View my website at www.yiyishao.org
This is a website I made to showcase my portfolio. The goals are as follows:
- Responsible - user-friendly on desktop, mobile phone and tablet
- Inline with my personal branding
- Interactive - mostly mouse interaction to add a little fun to the user experience
- Clean and maximumly showcase my projects
- SEO - proper meta tag for search engine optimization
- Other features such as social media icons and a downloadable resume
- Using Node.js, React and Bootstrap
- Hosting on Microsoft Azure
The landing page is where the users first come to my website, I would like it to be impressive so I designed it with the most interactive features. To inline with the style of my resume, I put the logo animation on top of my name. The ambient particle at the background is also one of the design feature I used in some game environments for most of my projects.
I animated my logo in Aftereffects, and then use an extension called Bodymovin to export as SVG animation which is more suitable for web.
The CSS animation was inspired by a codepen project created by Paul Roger.
I'm using a JavaScript library called particle.js
I'm using a React-friendy animation package Framer-motion
I would like to show my projects in different categories so the users can choose to view any specific type of projects. The layout system should be expand to the maximum width of the page and it should place the projects in order even they are in different size. So I decide to use a JavaScript library called isotope.js. Most of my projects containing more details, they are clickable to another page. I also have some tiny projects which are those animation clips, they are part of my daily practices.
The about page contains my bio, social media links, photo, a downloadable resume and other information. It has the same style as the landing page.