THIS WEBSITE

CONGRATS! You've uncovered a hidden page 😲😲😲

This website you're on right now is a special project of mine. I have personally designed, prototyped, and coded this entire website from scratch over the Summer of 2022, and again in the Summer of 2024. Rather than using a website management platform like WordPress, Webflow, or Wix, I decided to code the website myself. This decision was partly to gain extra practice with my frontend coding skills, but also to avoid being constrained by the templates these platforms offer. Coding it myself allowed me to be as flexible as I wanted with the design and to add a personal touch to the final product. Below, I outline each step of the design and coding process that I went through to create this website.

THE DESIGN

The website you see right now is bursting with my personality! I used four of my favorite colors – blue, peach, purple, and turquoise – and incorporated them into colorful and bright gradients. For text, I stuck to a solid black color to ensure great contrast with the bright colors, making it perfect for readability on screens. I chose Inter as the body font because it's a good basic serif font that also helps with readability. It's more rounded than fonts like Avenir or Lato, matching the overall aesthetic of my website. For the header font, I wanted something significant to me, so I chose Maragsâ, a font created by Filipino artist John David Maza. It boasts Filipino type styles with tapered tips and flowing strokes, mimicking Filipino accent marks.

For the overall design aesthetic, I went for fun gradient blobs in the backgrounds of my pages. This trend, especially popular in website and UI design, uses more rounded shapes rather than flat edges. I find this allows for a more interesting flow and adds a playful aspect, which reflects my personality! I also incorporated interactive animations on every page to keep visitors entertained (which, in fact, is how you found this hidden page in the first place!). Adding a solid black outline around most of the shapes and buttons helps keep the design grounded and matches well with the black-colored text.

Friends and family who have seen this website have all said how well it encapsulates me as a person, and I'm very proud of that fact. It has been a true pleasure working on this website, and I'm so glad you're here to see it now!

I started by mapping out a prototype first on paper, then on Figma. The images below demonstrate my paper prototype -> low-fidelity wireframe -> high-fidelity mockup process. I found it easier to stick to a neutral color scheme in the initial planning stages, focusing more on building the skeleton of the website. After establishing a solid foundation, I was able to focus on building a color scheme and finding pictures to place.

I used vanilla HTML and CSS to create my website. Since I didn't need to scale it and would keep it as static pages, this was the most straightforward route. It also helped me brush up on basic HTML and CSS concepts, such as flexbox and responsiveness for different device sizes. I used JavaScript to make my navigation bar sticky and responsive.

As I added more pages and projects, maintaining individual CSS styles for all the components became more challenging. It looked messy and I was frequently repeating styling methods. That's when I discovered SASS, which offered a cleaner way to structure my CSS with features like nesting, variables, and mixins. Refactoring different parts of the site took some time, but through this process, I learned a lot about being detail-oriented and refactoring one part at a time – skills that have been extremely useful in my previous programming jobs.

After my first co-op at Klue in Vancouver, I sharpened my web development skills, particularly in React and TypeScript. When I updated my original portfolio website, I felt frustrated by the redundancies and saw a huge potential for improvement. This inspired me to completely overhaul the site using React (Next.js) and Tailwind CSS. These technologies allowed me to create reusable components, streamline the development process, and improve the site's performance and SEO with Next.js's advanced features.

Switching to a JavaScript framework offered several advantages over plain HTML and CSS. React's component-based architecture made my code more modular and easier to maintain. Tailwind's utility-first CSS classes significantly reduced the amount of custom CSS I needed, ensuring a consistent design system across the site. This combination allowed me to focus more on the functionality and aesthetics of my portfolio, making it cleaner, more scalable, and truly reflective of my skills and personality.

The website is still a work in progress. So many new projects and designs to add but not enough time to add them. But I find that every time I come back here, there's always something new to learn in website development. And finding new opportunities for growth is always a fun time :)

And that concludes my work on my personal portfolio! I hope you enjoyed walking through my journey creating it, because I put a lot of my heart and personality into the entire process. This website is a manifestation of my dream to eventually grow into what the industry calls a 'unicorn developer' – thriving at the intersection of both design and technology. 🦄