Michaud.Dev

Michaud.Dev (you are here!) is the portfolio website that I created to showcase my skills and projects I've worked on over the years. I designed and programmed the website myself from scratch. I wanted the site to be visually unique and fun while still using modern website design practices, and work seamlessly on desktop and mobile. The design was inspired by physical print, the navigation bar on mobile is even a table of contents like you would find in a book.

Design

I created a Pinterest board with a bunch of reference images I could use for inspiration, and then I made a mockup in Adobe XD. Completing the design first is helpful because I didn't need to worry about writing any actual code yet. The final design is pretty close to what I made in XD, with the exception of the home page which I made a drastically different version of near the end of development.

To achieve an ink-on-paper look, I used a beige-white color for the background and an imperfect black for the ink. I also added some grain on top of the background and any images, which results in the page looking like it was drawn or printed on parchment paper.

Other than the background and ink colors, the primary 4 highlight colors I used were lightish blue, green, yellow, and red. The home page has these 4 colors in a rainbow spanning the hero section, and on every other page, those 4 colors underline my name in the top left. Those 4 colors are slightly washed out, to keep the theme of a printed image, but they are brighter than the other colors on the page so they stand out and provide some nice contrast.

Development

When it came time to implement my design, I kept everything as simple as possible. I used HTML and SASS for the bulk of the website, and some light Javascript where needed. It took me a while longer to develop than I originally anticipated because I wanted to make sure that not only did everything work on every platform but that it was lightweight and accessible.

Accessibility is sometimes overlooked in website design, so I made sure to be diligent and research how to make the website as accessible as possible to screen-readers and people with visual impairments.

I also wanted the website to be lightweight. A lot of people don't have fast internet, and quick loading times always result in a better user experience. I compressed all my images to the smallest size possible while keeping graphical fidelity, and made them responsive so that only the required image resolution is loaded. I also aimed to keep my main CSS file at or under 15kb in size (a recommendation from Philip Ardeljan's article about CSS size), which made me have to re-think how I approach writing CSS.