Navigating Nostalgia: A Portfolio Design

Maria Finocchiaro
3 min readMay 7, 2024

--

Creating an Engaging Portfolio with a Retro Aesthetic

The final site!

Project Date:
Spring 2024

Project Overview:

The Emerging Media program requires a functional portfolio site as part of its degree requirements. This portfolio should exhibit various skills, projects, and abilities. As a freelance artist, I’ve maintained online portfolios previously. However, despite creating these sites, I never felt compelled to maintain them. Therefore, my task was to design a portfolio that would engage users as much as it engaged me. My solution was to create a vaporwave-inspired website mimicking a Windows 98 desktop, albeit redesigned to exude a more whimsical charm that better aligns with my design aesthetic.

The homepage as it stood at the beginning of the semester.

The Problem:

This project presented numerous challenges. One significant design hurdle was ensuring that the windows and icons accurately evoked older software while maintaining the overall brand design. The most formidable challenge, however, was ensuring that the site functioned as intended. Implementing interactive and resizable windows, draggable icons, a functional email contact form, and a taskbar that accurately mimicked old PC software using HTML, CSS, and JavaScript proved to be a major hurdle.

The Solution:

Initial Sketches for Icons

To address my design challenge, I ensured consistency by adhering to a specific color palette for each div within the website. This not only maintained site cohesion but also added flavor to window designs that might otherwise appear stale. Additionally, designing and creating custom icons infused personal flair and whimsy into the open “desktop”.

Final Icon Design 1
Final Icon Design 2

Ensuring site functionality required various approaches. While making windows draggable and resizable via JavaScript was relatively straightforward, ensuring accurate window opening from desktop icons required considerable effort. Developing JavaScript functions like “openWindow()” and “updateOpenWindow()” was crucial for functionality, allowing users to manage multiple windows effectively. Implementing a dynamic taskbar, which not only featured icons to open windows but also provided options for minimizing, maximizing, and selecting a window, was also essential for functionality.

Users cannow open multiple windows but still navigate easily.

Results:
The intuitive interface and improved navigation facilitated easier exploration of my work and portfolio for visitors. The site also functions as a project in itself, which effectively showcases my skill set. Overall, the portfolio project successfully achieved its goal of creating an engaging and interactive platform for showcasing my talents to potential employers. There is room for future enhancements, such as incorporating a dedicated music player or adding additional projects. Given the significant effort invested in this portfolio, my increased engagement with it contributes to its overall success.

--

--