A final project synthesizing design principles and front-end development skills through a portfolio for a student-led web design and development elective .
The project allowed for complete creative freedom, so I saw it as a chance to combine my illustration, interface design, and front-end development skills. I developed a portfolio that included an "about me" section, a works section, and a unique interactive desk feature.
I chose this concept because I love surrounding myself with items that spark joy and creativity and hold sentimental value. By making the objects on my desk clickable, I wanted users to explore different aspects of my personality and hobbies. To further personalize the site, I incorporated ASL motifs, blending my love for sign language with my passion for graphic design.
Before jumping into the development process, I compiled all of my illustrations, fonts, and color palette and created an interactive wireframe in Figma to visualize my desired portfolio. I created a "welcome to my desk" page to serve as a launching point to other pages. I created a Home page, About Me page, Scrapbook page, Beauty page, and a Book Stack page.
HTML
CSS
JAVASCRIPT
Over the course of two weeks, I successfully brought my Figma wireframe design to life by coding my website from scratch using HTML, CSS, and JavaScript. One of the key challenges I tackled was using JavaScript to implement a hidden "lightbox" effect for my scrapbook images, ensuring they displayed in full quality despite initial loading issues. I also hosted the site on GitHub Pages and integrated interactive animations and secret clickable buttons, enhancing the user experience.
Making the website responsive across different browsers proved to be a significant learning experience. I experimented with various layouts and breakpoints, ultimately refining the responsiveness. This project was a crash course in both patience and precision, as I meticulously recreated each design element. While I had to adjust my original scope due to time constraints—replacing the planned book stack page with a work and project section—I came away with a deeper understanding of web development and adaptability in real-world scenarios.
