Making a Portfolio Website From Scratch
Tags: beginners, portfolio, react, githubpages
Published: 2021-07-27 19:53:13

## 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](#tips)
[Resources](#resources)
[Inspiration](#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](https://media3.giphy.com/media/JI9xHLR2UMAi5EkWND/giphy.gif?cid=790b7611df73b984e37f1be686650cbfc28cb7ebbc64252b&rid=giphy.gif&ct=g)


## Resources
* I used React for my portfolio and hosted it on Github Pages. Here's a great [tutorial](https://dev.to/yuribenjamin/how-to-deploy-react-app-in-github-pages-2a1f)
* Create a personal [color scheme](https://coolors.co/)
* Add CSS [animation](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations)
* Improve your Flexbox [skills](https://flexboxfroggy.com/)
* Add a [tabbed table](https://github.com/reactjs/react-tabs)
* Create a free email [form](https://formspree.io/)

![Gif of the email logo moving on mouse-over](https://media4.giphy.com/media/pODy2C4ctFHgMnSlBY/giphy.gif?cid=790b761181fd378dcbc867d04b0deb189d37eb7bb8ad34dc&rid=giphy.gif&ct=g)

####Inspiration
* [Nicky Dover](https://www.nickydover.com/) *Reflecting Your Personality*
![Nicky Dover Website](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vk83klb2q3fxirgwr3o5.png)
* [Brittany Chiang](https://brittanychiang.com/) *Sleek and Smooth*
![Brittany Chiang Website](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lrdpj4nm5trmegmkjx0f.png)
* [Maxine Meurer](https://mmeurer00.github.io/#/) *Animations and Fun Features*
* [Nicoll Oliver]( https://oliver-nicoll.github.io/) *Repurposing a Template*
* [This Giant List](https://github.com/emmabostian/developer-portfolios)

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!](jillklatt.github.io)