About this page
My personal site designed & developed using HTML, CSS, and Bootstrap. Features a simple one-page review of my past work, my online presence, my taste in music, and my travel history. The design was intended to be clean and simple in nature, where the reader can quickly and easily read it and learn about myself and my work. I hope to add more to this page in the future!
Feel free to use this as a template for your own sites, and see the evolution of the design below.
Decided to make the color scheme a little classier by switching from a purple-white palette to a black-white palette with a blue accent for links. I realized the level of purple can be distracting and overwhelming to look at, and keeping a simpler color set can make the website look more professional.
Decided to change the layout from all the information being on a single view to adding a tabbed menu pointing to each category (travel, music, projects). With all the categories on a single view, I realized it would be overwhelming to view this all at once. Instead, giving the user the option to click the tab to find the specific information they want would be more ideal. For instance, some users may not be interested in my music playlist, so there is no reason to crowd the space with that as well. The website opens with the "about" tab, which has a short bio, a picture of me, and a few links. I figured this would be the most relevant information when people visit. The tabs are also a part of the single page so the user does not have to leave the home page and come back. In other words, the URL will stay the same, providing a quicker and more fluid change of page as one tab fades out and the other fades in. The travel map has also been added via Google Maps, as I had wanted to do earlier.
Updated the look to clearly define and separate each block of information, while keeping the design flat and clean. I removed the highlighting on hover for the different blocks to take away any confusion that they were actually links. Now, only links will highlight on hover.
One of the more initial designs for the site, inspired by a more tabular, blocky format to clearly represent hierarchy of information, but clearly not as visually pleasing with so many lines everywhere that only distract from content.
Things to do
- Add links to past writings, resume, etc.
- Continue to improve the user experience