Pearls of Wisdom I’ve Gleaned From Building My Portfolio Website
I thought I’d write something a bit different from my previous blogs. I have so many takeaways from finishing Draft #350 of my portfolio website. (It is and will never be quite as perfect as I’d like.) What follows will mostly be applicable to recent bootcamp and/or college grads. If you’re a seasoned dev, you probably either already have a portfolio website or you don’t need one!
- If you haven’t built a React (or fill in your language and/or framework here) app in a little while you’ll be rusty! No worries. Check your notes, watch some tutorials, read some blogs. It’s like riding a bike, the knowledge is still in there somewhere. 😉
- Option A: You can use your project portfolio to practice what you’ve already learned (perfectly valid); or Option B: you can build on your skills by learning/implementing a bunch of new tricks. I definitely recommend Option B. This experience was equal parts intimidating, intriguing, frustrating, fascinating and super, super rewarding. For instance, I worked with a couple of new npm packages as well as creating an RSS feed for my blogs*, learned how to work with EmailJS, and learned/used Material UI for pretty much all the styling. Yep, I’m feeling pretty accomplished right about now. 😎
- There are a multitude of excellent blogs to assist you if you go with Option B, from above. But there might well be outdated information there. This is where your critical thinking/Google skills come into play. (Of course there are always the docs as a last ditch effort!) I was following a blog, working with the npm react-hook-form package to hold state and provide validations for my contact form, but one of the props names had changed since the blog was written, so following one section of the instructions resulted in broken code (womp, womp!). Fortunately the react-hook-form docs are really thorough and their corresponding website has a helpful video tutorial to get you on your way. Plus, Stack Overflow. Need I say more?
- There are plenty of resources out there with instructions on how to hide your API key(s) before pushing to your remote repo, but I haven’t found a whole lot about how to access and use these keys, post-deployment. After all, they are intentionally hidden from your remote repo. Thankfully I found it quite easy to utilize my API key and a couple of requisite IDs while still keeping them secure via Netlify’s own environment variables. If you’re using Netlify, this functionality is located in your app’s Deploy Settings/Environment.
- You might already know what you want your portfolio’s end product to look like but if you don’t, that is fine too. You will figure out your “vision” at some point. Or that vision might just change along the way.
- As your project comes to life, seek out advice and feedback on your project from anyone and everyone. And not just from fellow developers. Ask your Mom/Dad, your best friend, your dog walker. UX/UI is something that anyone can respond to with really valuable feedback.
- One thing that has become quite clear to me: what starts out as perfectly acceptable, whether we are talking about the components or the styling (oh, I love styling), in a few short days/weeks will probably become not at all good enough for you. In other words, your skills will grow exponentially. My home page had an image and some text, and I was having difficulty in placing them where I wanted, so I decided that it was “good enough”. But that page was itching at my brain so I kept trying different tactics until I found what I feel is a much more symmetrical/attractive layout. Now I will never be able to go back to “that was good enough.” Because I’m a better developer than I was just two weeks ago!
- DON’T FORGET MOBILE. You will become pretty good at breakpoints/media queries. This can be frustrating even if you’re skilled at it. Do use your Chrome Dev Tools and toggle on the little mobile/tablet icon to experiment with various device sizes.
You will probably always be updating/changing/refreshing your website as your skills grow or as you simply become tired of what you’ve got and want to try out a new look. Personally I think that is fabulous, as a software engineer who wants to keep one foot in the design world. Your portfolio is a reflection of your personality, and as we learn and grow, our portfolios should evolve as well.
I’d love to know your thoughts on building a portfolio website, what your greatest challenges and greatest victories have been. My site is here. Do send me yours, I’m a big fan of exchanging feedback.
PS Below are some resources I used to implement new features, improve UI and secure the API key on my site.
Simple React Contact Form without Back-End
When I was building my portfolio website with React, one of the most challenging issues I had was creating a working…
How to stream a Medium blog to your React portfolio app
A step by step guide.
react-router scroll to top on every transition
For react-router v4, here is a create-react-app that achieves the scroll restoration…