A portfolio website dedicated to showcasing my design and animation skill.
Objectives
My Role
Tools
Teams
Duration
Prototype
Research
Before developing my portfolio website, I researched my audience, focusing on hiring managers and recruiters. To gain valuable insights, I conducted primary research by consulting recruiters about their expectations for a designer’s portfolio.
Online Blogs
Layout
Landing Page
About Page
Trubite project Page(Case study)
Portfolio project Page (Web design page)
Animation Project Page
Animation Process page
Design Process
I sketched each page layouts on paper, which help me iterated quickly, then used the paper sketch to create low-fidelity designs in Figma, later refining them into final designs.
Responsive design
Implementation
Building the Website
HTML/CSS
While developing animated stories, I devised an animation process within the Notion app. I then exported it as an HTML/CSS file, imported it into WordPress, and customized the code to seamlessly integrate into my portfolio website. This ensures a smooth user experience for hiring managers and recruiters.
Security
The Server side of things
SSL Certificate
- Authentication: SSL certificates are issued by trusted Certificate Authorities, which verifies Hiring managers and recruiters are connecting to my legitimate portfolio website and not a fraudulent one.
- Data Encryption: SSL encrypts the data between the web server and the browser, meaning that even if someone intercepts the data, it remains unreadable.
- Data Integrity: SSL ensures that the data sent to and from the Bluehost server is exactly as it should be and hasn’t been altered or tampered with.
- Trust Factor: When hiring managers or recruiters see a lock icon in their browser, it instills a sense of trust.
Domain privacy + Protection
SiteLock security
WordPress
For WordPress security, maintaining backups of the website and its content, coupled with automatic plugin updates, is the optimal strategy to safeguard my portfolio website.
SVG Files
Utilizing SVG files in my portfolio, particularly in the Trubite case study and the animation page, raises security concerns if left uncleaned and unoptimized. Though it may appear excessive for a portfolio site, implementing this extra security measure demands minimal effort, making it a worthwhile precautionary step.
Performance
Content delivery network
Employing Cloudflare CDN, I distributed the content of my portfolio website across various servers, ensuring faster load times and improved accessibility for users, including hiring managers and recruiters.
Design
Cache
In addition to implementing a CDN, I ensured my portfolio website enables browser caching to store frequently accessed content in local memory.
Plug-Ins
Maintaining only essential plugins and keeping them up-to-date not only enhances security but also contributes to faster load times.
Ratings
I tested my portfolio website using Google's PageSpeed Insight for a quantitative analysis of security, performance, and user experience.
Reflection+
Website Performance
The load time of each page in my portfolio website are all above average but it is not where I’d prefer it to be. There are render-blocking resources and CSS files implemented inefficiently, something I’m planning on fixing.
Design
I designed my portfolio website with a focus on minimalism and simplicity, aiming to highlight my projects. In the future, I plan to to re-design the whole website by incorporating motion design using tools like Webflow to enhance my creative expression.
Animation
The primary objective for my portfolio website is to highlight my skills not only as a designer but also as an animator. In the future, I plan to incorporate animation more into my portfolio to better demonstrate my capabilities.
