I am going to try and write a post describing each phase of this site, what my goals were, and what challenges I faced. I am going to start with what is now the current version which I am calling "V2", I might do another post describing the original version some time later.
So V2 is what I consider to be the first fully functional version of this site, it is the point where I switched my domain over from my old portfolio. My basic goals were: pretty enough that I felt like I could share it with people, works well on mobile, and fast. At this point I feel like I have accomplished all of those pretty well so let's talk about each of those pieces and how I accomplished them.
Look: This was probably what I spent the most time on during this phase of development. I decided before that I wanted to start by keeping things as simple as possible from the beginning so I didn't want to use any major frameworks like Material UI or Bootstrap. I decided on something called Emotion. It let me write pure CSS in my React with a few niceties that would help out, like theme creation.
As far as actual style I looked around at various other portfolios to find some sort of inspiration. The one I found that really caught my was Eina's, so I tried emulating that to some degree. A simple layout and friendly colors was the goal. I played around with everything for a while and eventually decided on the blueish color scheme and basic layout with just trial and error, seeing what I liked. Ultimately I am not super proud of the look, it feels basic but functional which fits this step of the process, but I just wish I was better at that design piece. I'll keep practicing, hopefully the next version is better.
Mobile: Mobile responsiveness is obviously really important these days, so I wanted to have that baked in to the site as early as I could. This actually ended up not being that hard. Using Emotion, I created a theme that had my basic colors and also set breakpoints that I could adjust in one central place. For most pieces I only needed one or two breakpoints based on the width of the browser. Since it was already built using Flex box a lot of it naturally worked. The main things that change with width are the placement of images on the projects page, and some of the text sizes for the links at the top and my name on the main page. I actually think the site might look better on phones than desktop, so I am very happy with this piece of it. One of the coolest things about making a website is pulling it up on your phone, for some reason that always sticks out to me as a great moment.
Speed: Speed was something I had considered from the beginning, the biggest thing that turns me away from a site is if it takes too long to load. So this is a static gatsby site served with netlify. It has Netlify CMS which lets me post this via a nice text editor which then gets pushed to Github and built to be served statically. This already leads to a pretty fast page even though I don't even pay anything for hosting. Because of that there is almost nothing else I have needed to do to make it fast. I can get close to perfect scores on Google's Lighthouse without any real adjustments. That said an area that I know I need to work on is the images, right now full size images are always being served which just doesn't make sense.
Final Thoughts: I'm happy with where my site is at right now. It isn't flashy at all and isn't the most beautiful design possible, but it is fast, responsive and hopefully fits with what I want to display to the world of who I am. My next steps are to add some interactivity to the site, while keeping it as simple as I can. I want to add a dark mode toggle and maybe different ways to sort the projects and blogs. Hopefully that will do more to show What I am capable of making.
The first Version
Currently working as a Front End developer making complex mapping applications for the planning, and editing of cable routes for the telecom industry. Hoping to use my skills and experience to build, design, test and fix beautiful thoughtful interfaces for all types of people.
You might have noticed the bar on the bottom of the site. You can use that to transition to older versions of this site. My goal with this portfolio was to have a transparent view of how this site has changed over time. Expect things to break if you go back in time, that's part of the fun.