THIS WEBSITE

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

This website you're on right now is also a special project of mine. I have personally designed, prototyped, and coded this whole website from scratch over the Summer of 2022. Rather than use a website management platform such as Wordpress, Webflow, or Wix, I decided to code the website up myself. This was partly because I wanted extra practice for my frontend coding skills, but also because I did not want to be trapped within the templates that these platforms present. With code, I can be as flexible as I want with the design and even add in a little touch of my own personality and style into the final product. I'll be outlining below each step of the design/code process that I went through to come up with 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. I stuck to a solid black color for text that has great contrast with the bright colors I've used, perfect for readability on screens! As for my font choice for the body, Inter is a good basic serif font which also helps with readability. It is a bit more rounded than something like Avenir or Lato, so it matches the overall aesthetic of my website. I also wished for my header font to hold some significance for myself, so I chose one created by a Filipino artist. The font is called Maragsâ, created by designer John David Maza, and boasts Filipino type styles with tapered tips and flowing strokes and to mimic Filipino accent marks.

As for the overall design aesthetic, I went for fun gradient blobs all over the backgrounds of my pages. This has been a recent trend, especially in website & ui design, where designers go for more rounded shapes rather than flat edges. I find that this allows for a more interesting flow and adds an aspect of playfulness, which, again, says something about me! In a similar way, I tried my best to incorporate interactive animations in every page to keep site visitors entertained (which, in fact, is how you found this hidden page in the first place!) Lastly, 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 to whom I've shown this website have all said how greatly it encapsulates me as a person, and I'm very proud of that fact. It's been a true pleasure working on this website and I'm so glad you're here to see it now!

THE PROTOTYPE

I worked on 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 personally found it easier to stick to a neutral color scheme in the initial stages of planning, more so focusing on building a skeleton for the whole website. After establishing a solid foundation, I was then able to focus my efforts on building a color scheme and finding pictures to place.

THE CODE

I used vanilla HTML+CSS in the creation of my website. Seeing as I wouldn't need to scale it and would only keep it as static pages, this seemed like the most straightforward route. It also helped me brush up on some basic HTML/CSS concepts, such as flexbox and responsiveness for different device sizes. I also used JavaScript to make my navigation bar sticky as well as responsive.

As I continued to add pages and projects to the list, it became more and more difficult to maintain individual CSS styles for all the components I wanted to create. It also looked quite messy to me and I was frequently repeating some styling methods. That's when I discovered SASS, a cleaner way to structure my CSS that introduces nesting, variables, and mixins. Since I was midway through the creation of the website at this point, it took some time to refactor different parts of the site -- but through this process I learned a lot about being detail-oriented and refactoring one part at a time -- skills that I find extremely useful in all the previous programming jobs I've undertaken.

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 design. 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. 🦄