My website is live. It felt great to really dig into this and be able to come out the other side with a functional result that does exactly what I want and need. The process of building the site was really enjoyable. I started with some rough sketches and a general framework/checklist of the content that I needed.

—
A brief aside: No matter what the project is, this is how I begin. These papers never leave my side when I'm working because I know that for me, the act of taking notes and sketching by hand is how my best ideas will come out. I also love being able to go back into my notes to layer in more notes or write out answers to questions that had come up in ideation. For larger projects I often take the time to rewrite the design problem or project summary every time I sit down to work because I know that something slightly different will come out every time, especially as ideas develop over the course of a project.
—
Fortunately I already had all of my portfolio images organized and ready for web presentation from preparing a digital portfolio PDF and my previous Squarespace site, so that took a huge amount of time and planning out of the equation. Also, having gone through many iterations of template-based portfolio websites, I had an idea of what I did and didn't want in my site. All I need is a place to showcase my portfolio in a way that can be updated quickly when I want to replace older work with newer work.

One thing that was absolutely essential for me was that my site be responsive. It wouldn't do me any good to tell someone that I had just built my new website from scratch, the caveat being that it only looks good on a monitor, oh and to make sure that their browser window is open pretty wide.

Since this was so important I took a mobile-first approach to designing my site. Knowing that not only is this a good standard to work from, it's always best to work from a place that can be built on rather than wondering how to remove pieces without having the whole thing fall apart. Learning about and then implementing media queries into my CSS was a real "wow" moment for me. I knew that I needed to design the site in proportionate measures, rather than absolute pixel dimensions, but I didn't know how that would eventually manifest into being responsive. Since all of my global styles were set up for mobile viewing, the changes that I had to apply to my media queries at a tablet/horizontal scale and monitor scale were really basic.

That being said, there was more trial and error at this phase than any other and I was locked in mortal combat with the float function for some time trying to make my nav links go where I wanted them to. The trial and error was fun though. As I tried to get elements to do what I wanted and watched as nothing happened, I just kept adding to it. When something finally worked I would go back and start removing declarations, seeing if they truly had been doing nothing, or what combination of declarations were actually achieving what I wanted. The logic behind a lot of the work was fun to start wrapping my head around as well. At least twice while working on this site I woke up with a "what if..." in my head, rolling out of bed and jumping straight into my CSS.

Something that I had wanted for a long time that fell by the wayside time after time was a place to write project summaries. I wanted my projects to have a bit of a case study look. I could never seem to find a template that balanced how I wanted my images displayed and also provided a text field. Not all work can speak for itself, as much as we may want it to, context is the most essential thing that one can have when viewing anything. Easy.

I created a couple of div classes to specify rules for my gallery images, in addition to using global styles I had created. I had considered creating a carousel for my images, but I felt that it took away from the "case study" approach I was going for with my projects. I also felt that I better control over hierarchy and how the images related to the project descriptions. One thing that I would like to add as I continue to learn more advanced coding is the ability to click on each image and enlarge them. Another great thing about having control over my own site is that its development will be right in stride with mine and I can use it as a bit of a playground for my continuing education.

There is a small bit of Javascript that I tried implementing which isn't working, but I haven't really dived into JS yet. I'm going to let the squishy part of my brain firm back up a bit and lock in the HTML and CSS I've been learning first.