The usual advise given to my students is that you don't include your portfolio site in your actual portfolio; however, this was one of my first web projects, it was built from the ground up (mostly, more on that in a bit), and has enough moving parts to warrent reflection. It is something I actively maintain and improve upon as I learn more.
Project Purpose and Goals
Putting together a portfolio website is one of the milestones for new developers. While using a platform with WYSIWYG editors is perfectly acceptable to get yourself "out there," I'm more the all-in type. I wanted something that reflected my personality and aesthetics, and get the benefit of building something from scratch. It also has room to grow, and and certainly room for improvement.
Originally, this was based on a YouTube tutorial put out by freeCodeCamp, of which I followed along. I then created a new design based on the core structure, modified most of the layout and asset choices, and rebuilt it. This required to refactor much of the logic and styling.
Web Stack
This was a real bread-and-butter project, as I was still learning the basics. The original tutorial used Sass, which I didn't know at the time and decided not to use, but one of my goals is to refactor the CSS with either Sass or PostCSS, as it's gotten hard to maintain in its current state.
Only a small amount of JavaScript was needed to add event handlers for navigating to each section of the site. Transitions were smoothed out with CSS animations. I used Font Awesome and Google Fonts for great-looking assets and to give the site that extra refinement.
For the contact form, FormSubmit provided an easy way to implement seamless email submissions with features like honeypots and blacklists for security, and auto-responses and custom success pages for user experience.
Issues
Aside from not knowing what I was doing when I started? 🤣 Seriously, the website's biggest issue is the CSS: the main style page is 834 lines and, while I've organized and commented it into sections that make sense, it needs cleaning up. Modularizing the files, and being able to nest properties with Sass or PostCSS is my next goal.
When I decided to include these project summaries for my portfolio, I had consider how to incorporate them into the structure of the site, as it's built on a 1-page model. That has made keeping the overall design more difficult, with additional CSS files, as well as considering if the user pathways still make sense.
Lessons Learned
This project reminds me that you can accomplish almost everything with CSS and a little JavaScript, and there was benefit to going the long way around to understand how something like hiding and displaying different elements works under the hood. It has given me a great appreciation of frameworks and libraries to make our lives easier.
One of my biggest regrets was not starting this project with a "mobile-first" approach, which led to more complex media queries (I now have a sign above my desk to remind me!). Considering possible issues and planning ahead really is the key to success on large projects, but sometimes you end up in different directions that you couldn't have planned for, so you need to be open to new ways of thinking.
