TL;DR Multi page responsive website with subtle animations using CSS and some JS where CSS is not possible. This project is working but continousuly being developed with content and styling changes.
You can view the webpage here: https://www.gavinpili.com
This webpage was created using the following:
- HTML5, CSS3, JavaScript
- Google Fonts API
- Font Awesome Icons v4.7.0 library
- All images used are by the author and cannot be used by others.
- Template used but removed files that I do not need -- Credit: https://html5boilerplate.com
- Bubbles: https://codepen.io/Mark_Bowley/pen/mEtqj I've changed the values to suit this project.
- I was inspired by this website https://www.awwwards.com/sites/mortnsn-com because I liked how good he placed the image with overlapping wireframe style text. I love the various animations on this website however my idea for my portfolio website is to apply subtle animations using CSS only so I've retained the image and text overlap on mobile view because I like that to be the center of attention.
My Design Goals:
- Soft colour scheme that is modern and welcoming (UX)
- Create a simple UI with some animation effects (UX)
- Use images as part of a portfolio website
- Use Google fonts to create a logo without actually creating a logo outside VSCode
- Use of minimal colour theme but still present a cohesive layout (UI)
- Consider using floating elements, transparency, opacity, shadows (UI)
- Mobile-friendly layout (UI and UX)
My Coding Goals:
- Create a homepage where the image with text overlay as initial navigation
- Use animation in a subtle way without using too much JavaScript
- Create a logotype using CSS
- Use comments strategically
- Codes should be well organised and easy to read
- Create separate .js, .css, .img folders for better organisation
- Use animated and hidden side menu (curtain menu)
- Create a fun 404 page with simple animation using CSS only
- Use CSS to create a wireframe look font
- Add a filter function to view gallery images based on categories
Trajectory of this project:
- Use this webpage as template for creative portfolio projects for others to use
- Add collapsible text field when clicking on images > to show more content about the image (UI)
- Add Dark Mode switch (UI and UX)
- Create Blog page and template (UI)
- Add curtain menu on homepage whilst retaining the logotype to be consistent with the UI and UX
Here is a sample screenshot of the webpage:
Home Page: I originally wanted a page for each link (Web, Branding, Objects and Photomedia) but writing all the content would take so much time. For now, each of thiose links will take you to portfolio.html. The About and Contact links have their own page.
Curtain Menu with Opacity: I am thinking of adding the logotype with this menu to be consistent with the home page. I would have to add logotype.jpg instead of the current set-up where the it is created using CSS.
Gallery Filter Function
404 Page with Bubbles Animation: Credit to: https://codepen.io/Mark_Bowley/pen/mEtqj I've changed the values to suit this project.
To trigger this page, try https://gavinpwd.github.io/website-portfolio/inde.html (I've removed letter x on index.html)
Feel free to fork / clone the repo. Just a reminder to please use your own images for your project. As a Junior Web Dev, I am continously learning everyday so I would be happy to hear from other programmers to teach me to code efficiently and beautifully. Feel free to reach out to me if you find any issues and/or have suggestions to improve this work. This is my most challenging but enjoyable project so far.