DEV Community

Discussion on: My personal portfolio site. Some feeback / tips?

Collapse
 
devvyd profile image
Dāvis Naglis

Why would you need a framework for that? Simple flex-box and some good typography and for a minimal portfolio site it would be enough if that's his goal.

Collapse
 
joelbonetr profile image
JoelBonetR 🥇 • Edited

Yup, i said it too in the comment, have you read it all? 🤷🏻‍♀️
I made my own css framework using flex, just need to import those parts for grid system and so, no need to import entire framework, that's the point.

Thread Thread
 
devvyd profile image
Dāvis Naglis • Edited

The thing is - you didn't. Read what you wrote again.

EDIT: And now you edited it.

Thread Thread
 
joelbonetr profile image
JoelBonetR 🥇

I said you can use a framework or CSS Flex or Grid clearly, it's not my job to decide what he must use, only answering to the OP, by the other hand... When you use a framework, do you import it all, so you assumed that use it for a portfolio could be inefficient?

Using a framework and importing just what you need is as efficient as could be if you type it all from scratch. I imported (from my own framework) only the components i need (containers, grid system, accordions, modals, typography and colors) and i'm getting a 100/100 on pagespeed, because there isn't unused css or js on it, and the size is pretty lightweight, even i didn't optimized the images or cache policy yet.

Check it out:

developers.google.com/speed/pagesp...

If you want or need a full workaround i'll set the points here, ordered:
1- Draw what you want to reach on a paper, a simple wireframe (mobile and desktop).
2- Generate a Git project, clone it and set parcel.js (or rollup, or webpack) on it.
3- Start coding your structure in a file called index.html, with html5 (you can use pug or something similar if you like). - Only a single block of content.
4- Style this content block as you want, - Flex recommended, but you can use Grid too. If you are not familiar with those two features, or want to get it done faster, you can simply use a framework like Mustard UI, bootstrap or whatever you know or want to learn. Simply make sure you import only what you use. -
5- Repeat steps 3 and 4 till you have the entire layout done, from header to footer.
6- Optimize assets (scss and js will be compiled and optimized by the bundler if used correctly, i highly recommend you to optimize images by your own with your preferred software as bundlers mess it up a bit or makes a poor job that leads yo to loose too image quality).
7- push your project's new version to Git.
8- Build for production.
9- Deploy.

Obviously there could be tones of correct workarounds to reach same result.