Projects

Portfolio Website

This project focused on coding a full website using HTML/CSS. This portfolio website includes five main pages, allowing users to freely roam and explore my works.

OVERVIEW:

As a creative in need of a portfolio website, I decided to code one for my Digital Imaging for Online Applications course. My portfolio showcases my work across three dedicated pages — design, photography, and videography — while also featuring an “About Me” section that highlights my background, experiences, and awards.


View the full website here.

ROLE:

INDEPENDENT PROJECT - WEBSITE DESIGN

DURATION:

NOV 2025 - DEC 2025

TOOLS:

FIGMA

NETNET STUDIO

HTML/CSS

PROCESS:

Before coding the website, it was important to design a mockup of what I wanted the website to look like. Using Figma, I created a mockup that fits within a 1440px width desktop size. The design of the website is heavily inspired by elegant and modern editorial look, emphasizing typography and simple black-and-white.

Using NetNet Studio to code the website, I ensured that the final implementation accurately reflected the original mockup through consistent layout structure, styling, and visual details. Using course material and some assistance from W3Schools, I implemented features/practices like grids, hyperlinks, and even an image carousel.


The most difficult task was creating 6 sub-pages for my photography, categorizing images by the corresponding genre. This required searching through my computer for images and uploading each individual picture to NetNet, being one of the most tedious tasks I had ever done.


Here's a picture of me working on my website at 5am in the morning, where I reached "flow state" (the time crunch was serious).

RETROSPECTIVE:

Coding my own website using HTML and CSS taught me fundamental skills in web design and development. Through this process, I learned key design principles, best practices, and terminology that contribute to creating an effective and user-friendly website. This assignment also allowed me to apply these skills within Framer, which was used to build this portfolio, helping me better understand layout design, responsiveness, and overall user experience.