https://lanzhoujiang.netlify.com/
https://github.com/Lanzhou-J/portfolio-project
The purpose of the portfolio website is to show my working experience, skills, personality and hobbies to future collaborators and people with similar interests. I think it is a better way to present myself compared with resume or coverletter. Resume may become outdated at the moment I hand it to others, however with a personal portfolio website I can update the information, such as new projects, new blog articles etc.
Besides, the website itself is a good example of my front end technology skills such as HTML, CSS, JavaScript and design skills.
All 5 webpages have navigation bar and footer bar with similar style. For navigation bar, I used translucent frosted glass filter. All the links/buttons have hover effects. The links on the left side of navigation bar will link to different websites (e.g. Working experience website/ Skills website/ Blog website) and the gray button on the right side of navigation bar will link visitors to a Chinese version of the homepage.
For footer bar I used gray background and white icon/text, the icon at the left side is my name "zhou" (meaning "boat") in ancient Chinese character. The icon will link users back to the homepage (or back to the top of the homepage).
In the homepage footer section I have included links to my Linkedin, Github and Facebook account. I have also provided my email address. This will provide users with additional information, and allow them to contact me if interested.
As mentioned before, the navigation bar has a button to link users to the Chinese homepage. By offering content in a different language, the portfolio website can reach a broader audience and target more locations. I choose Chinese because currently I am confident in translating the content into Chinese. (Translating the webpage into other languages is a potential function to be released in the future.)
My design inspiration is originated from Chinese landscape painting. Cloud and mist is a very important element in the artwork. Usually a veil of cloud or mist across the landscape is used to add mystery and elegance to the paintings. Imagine that you are walking in a mountain -- the mist comes near and goes away, and the scenary in front of you is changing all the time which provides travellers with incredible aesthetic experience. That is the effect that I want to achieve for my personal portfolio website. I think the best way to achieve it is to use on scroll animation. Contents fade in as users scroll down, which also makes the website more interactive. The svg animation of "My skills" is also inspired by floating clouds.
My pictures can be found besides title if users hover on the 2 geometric shape. I used large typography and geometric shape to give my portfolio a modern appearance.
The layout of the homepage is designed like asian hanging scroll paintings. In these paitings, usually the objects are not always placed in the middle line of the artwork. I structured elements in my homepage in a sequence of "left -- middle -- right -- middle ..." so that audience will not stare at one direction when the webpage is scrolled down, which can make the website fun to read.
In the blog webpage, visitors will see a welcome message first with illustration and instruction. The welcome section will be replaced by different blog articles if visitors click on the blog titles on the left side of the website. All the blog articles contain date, pictures and text contents. The content of articles are structured using grid to give it a nice page layout.
On the right side of the blog page, I created a sidebar with keywords about blog posts -- let readers know what to expect from the articles.
Users can click on subtitle "BLOG" to go back to the welcome view. This design is to make the website more interacive and organized.
Users can download my resume in Experience webpage, the button "Download Resume" is at the bottom of the webpage, with a hover and active CSS effect which changes the button color and font color.
My pdf resume opens in a different tab in the browser. This enables users to continue reading the content in the Experience webpage without losing their place.
All the webpages use a consistent design style, including components, fonts, and colors.
All 5 pages are designed following responsive web design rules.
The navigation bar and footer bar are designed to be responsive so that users with different mobile device are able to use the links and buttons easily.
For Experience and Skills webpage, I used flex cards to structure the contents including working experience, different category of personal skills and personality keywords. I have modified the strucure of Homepage and Blog page to make them all responsive and fit all screen sizes. I have used media query to help change font size and width/height of different sections to make the pages display all components at desktop, mobile, and tablet viewport widths.
Three versions of the website have been produced and saved on different branches in Github. The versions include:
- 'master' branch with the base version
- 'color' branch with a dark colour scheme on homepage
- 'font' branch with different fonts on homepage
Alternate versions can be viewed by typing 'git checkout {branch-name}' in the terminal. To view the 'color' branch, type:
git checkout color
To view the 'color' branch, type:
git checkout font
The website simply has all pages link to each other via the navigation bar. A sitemap for the website is presented below.
The target audience for the website are:
- Project Leads
- People that have similar interests (e.g. cooking, painting, design etc.)
-
HTML is used for the content of all 5 webpages (Homepage, Experience, Skills, Blog and Chinese homepage).
-
CSS is used to style and strucutre the webpages.
-
JavaScript is used to achieve on scroll or on click effect in homepage and Blog webpage.
-
Netlify is used to deploy webpages.
Wireframes were created for each page during the planning stage of the project. Wireframes are presented below. The tools that I used to create wireframes are Balsamic wireframes Desktop and Procreate app on ipad.
Tasks were tracked using Trello. Trello board screenshots presented below:
