Time.
09/15/2021 - 12/15/2021 (4 month)
Team.
Peggy Du
Languege.
HTML + CSS
Javascript
Summary.
The responsive design of my old version of the portfolio website. Focus on the viewing experience on both desktop and mobile devices. Some necessary changes are made to improve the readability and visual appeal of the website.
My Role.
I write the code of the whole website with HTML, CSS, and Javascript. I designed the prototype in Figma first, then built the website with code. I also checked the accessibility of my website and fixed all the issues.
Problem
Design responsive portfolio websites with HTML, CSS and JavaScript.
Solution
https://peijindu.github.io - View my websiteI designed this responsive portfolio website following the mobie first principle. Started from mobile version of the website, I finished the front-end web design of both desktop and mobile version. (Breakpoint = 850 px)
Mobile version: Home page & Project page
Desktops version: Home page & Illustration page
Accessibility
I also checked and solved all the accessibility issues that my website has before. For example, I add alternative text for all the links, images, and icons to help screen readers users to understand the web content. I changed the color contrast to 4.5:1, so people with low vision ability can easily browse the website. For people who use the keyboard to browse the website, I add the "skip to main context" function, so they can jump to the main section easily.
Auto check accessibility issues with plug-ins and solved all issues
Skip to main context easily with keyboard
You have reached the socks : )
Let's keep in touch!
