Yiyis.github.io

Personal Website of Yiyi Shao


View my website at www.yiyishao.org

Summary

This is a website I made to showcase my portfolio. The goals are as follows:

Overview

Action

Landing Page

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.

1. SVG Logo Animation

I animated my logo in Aftereffects, and then use an extension called Bodymovin to export as SVG animation which is more suitable for web.

2. Interactive Letters

The CSS animation was inspired by a codepen project created by Paul Roger.

3. Interactive Particle Background

I’m using a JavaScript library called particle.js

4. Page transition and letter animation

I’m using a React-friendy animation package Framer-motion

Portfolio Page

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.

About Page

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.