DEV Community

Cover image for Making a Portfolio Website From Scratch
JillKlatt
JillKlatt

Posted on

Making a Portfolio Website From Scratch

It’s time.

You’ve created projects, you wrote your resume, your LinkedIn looks great. On the never ending checklist of Personal Branding and Networking to-dos, you’ve narrowed it down to your portfolio website and fixing your Twitter (aka deleting the Glee-fanfic).
That might be too specific.
But if you’re a little like me, you might be met with the analysis paralysis of where to even begin. Where to host? What language to use? Styled Components or Bootstrap? Or, god forbid, ignoring a template all together and diving into CSS on your own.
You have to find what works for you, but to help, here are some tips and resources:

Tips
Resources
Inspiration

Tips

  • Don’t be afraid to look for inspiration. Look at your friends and colleagues and connections and what their portfolios look like. But remember to credit where it's due.
  • Let it reflect you. In the world of first impressions, your portfolio can be the inhale you take before you introduce yourself.
  • Let it be weird, let it be silly, let it be exciting. It’s recommended that your resume be relatively boring in order to pass through the programs, but here you can use colors and animations and make the buttons bounce in a way that some people might not like but Oh well!
  • Send it around! Not just to your friends with wonderful design ability, but to your mom! If your mom can’t figure out how to use your dropdown, perhaps that needs some adjusting. Overwhelm yourself with feedback.
  • But remember that when you receive feedback, it’s one person’s opinion. It might be an educated opinion that you should probably listen to, but at the end of the day it’s your portfolio, it’s literally representing YOU.
  • Use this opportunity to learn. I graduated Flatiron’s Software Engineering program with a competency in Ruby and JS, but they couldn’t teach me how to have style or taste. My CSS knowledge was incredibly limited, I could not explain what a flexbox was. But by ignoring that tempting urge to go to Bootstrap, I was able to deepen my understanding of how CSS works and (maybe) how to make things look good. Smooth Load Screen

Resources

Gif of the email logo moving on mouse-over

Inspiration

Not only did a learn so much about styling and organizing, but I’m even more excited to show this project off.
I'm proud to say this thing is about me and by me.

View my website here!

Top comments (2)

Collapse
 
notevenagoat profile image
Ivan Tinoco

Great page, awesome post. I have dreaded building my landing page for weeks now but this links and tips are just what I needed to get it going

Collapse
 
jonrandy profile image
Jon Randy 🎖️

Pro tip: You don't need a portfolio