Case Study: evaneckels.com

Building my Personal Website

I wanted a place to showcase my websites, so I registered the domain evaneckels.com, and started creating my portfolio site.

On my site, I wanted a section for case studies on all of the sites I have created. These would walk the reader through my design process for each site I have worked on. Along with the case studies, I added a blog section to my site. A place for me to talk about web design, web development, and anything else Computer Science related.

Building the Header

I found the header of my site to be the hardest to complete for sure. I wanted to give it a minimal feel, but it felt too plain without any color. So I added the header text in the center, put my name in there, and then got to work on the pulsing circle.

I centered the pulsing circle and the text to the center of the page, hoping to draw attention to the center of the page immediately.

The bubble was extremely hard to develop in terms of technicality. It was by far my most intricate element on my site, with the keyframing. The circle started as blue in the center and then faded to a light green on the edges. The circle had a cycle of about 5 seconds, where it would expand, contract, and repeat forever.

The hardest part was keeping it somewhat viewable on mobile. I ended up finding the perfect sizing to get the circle to display perfectly on mobile, but I ended up removing it completely from mobile viewports due to performance issues. The animation caused a lot of frame rate dropping on even more modern phones, so I just dropped it altogether since UX > UI.

Samsung S8 Mockup of Mobile view of my site

I ended up going with a purely black and white home page on mobile viewports. It is very plain, but it gets my point across. Some devices will support the bubble if the phone meets requirement standards.

Design and Typography

Most portfolios take a minimalistic design to make sure that the sites design/theme does not distract the user from the important part of the site: the projects. I kept a white theme with accents of gray to help make sure that the projects were in the spotlight.

I used gray text for the paragraph, and then a charcoal color for the headers. Not exactly black, but very close.

The typeface I chose was very basic too. I used Italicized Playfair Display for displaying my name in the header, but other than that, all the rest of the text was Roboto. I felt Roboto was a good choice because it is a versatile font and goes well with the minimalist design. I used three different weights, 400, 500, and 700 for the body, subheadings, and headings respectively.

Creating the Cards

Next on my list was the grid section for all of my case studies. I wanted to give the user a preview of what each project was, without flooding the user with too much content.

So my solution was to use a grid system with a preview of each of my projects, giving the cards a rounded and taller feel. This allowed me to display text on the card without having to worry about the contrast and readability of the text.

I fit the different cards with the theme of each project, so they have vastly different color palettes. It allowed the projects to stand out and gave them more definition from each other.

Creating the Case Study Template

I needed a reusable template to use for the case studies for the different projects, so I created a template system that was based solely on HTML tags, so it was scaleable and all the parts harmoniously fit together no matter the order of the elements.

I created a reusable section where the image hovers to the side of the text, allowing for easy annotation of the image. I also rendered the screenshots in Photoshop and added a browser vector for added effect.

The template consisted of two sizes for headers, body text, block quotes, images, captions, unordered and ordered lists. I wanted to make sure I styled elements for every possible situation, hopefully leading to some time saved down the road.

I made sure to keep the styling for the header and the link colors open so that project could have its own color scheme.

Choosing the Animations

I wanted to add animations to my site without being too obnoxious, so I went for a lot of fade up animations. It is a great effect because especially with images and cards it has that very natural feel to it as it comes from the bottom of the page when you scroll. I applied an Ease Out Quart easing function to the effects to give it a more fluid feel. I played around with the timing, as you could probably see with the projects, they come in from the bottom of the page in a staggered fashion.

Conclusion

Building this site was definitely an uphill battle because I needed to make sure it was scaleable and it took a lot longer than most of my other projects. I had to put a lot of thought into the development of my site because I had to plan for future cases where I may run into problems with my styling or structure, rather than only having to plan for one possible scenario with most of my past projects. I found myself using more styling like max-width or max-height to limit images or text boxes, because who knows, maybe at some point I will be uploading 1:10 aspect ratio images or writing 2 paragraph captions. This site definitely brought some light to why developers should worry about possible future use cases.