Portfolio Case Study Cover

Portfolio Website

United States/Singapore, Oct 2024 – Present

Programming

Personal

#React

#Next.js

#TailWindCSS

#Matter.js

My Role

Designer and Developer

User Group

Recruiters, Designers, Developers

'Work Place'

Figma, VSCode, GitHub, Vercel

Tech Stack

Next.js, React.js, Typescript, TailwindCSS, Matter.js

Development Process

How might I showcase my work across 3 fields in a readable and engaging way?

1. Inspiration

Look for good ideas I can feasibly implement

2. Figma Mock up

Layout my case studies

3. Develop it

Experimenting with different libraries

4. Future plans

Areas of improvement

#1

Inspiration

I looked at portfolios on Awwwards, Behance, FWA etc. and noted down what I liked about them.

Portfolio website mood board

Takeaways

  • All text are in small chunks of readable length
  • Minimalism with BIG images
  • Slide-show smooth scrolling style
  • Interactive/gamified aspect
#2

Prototyping in Figma...

I adopted a 12 column grid system and used variants to explore UI styles. Got lots of feedback from my UX professor too!

Laying out my case studiesUI components that I experimented with
#3

Develop!

I branched off my most familiar framework, React.JS, and picked up Next.JS, Tailwind CSS in this process.

Tech stack: React, Next.js, Tailwind CSS, Typescript, Javascript, ShadCN UI, Matter.jsTech stack: React, Next.js, Tailwind CSS, Typescript, Javascript, ShadCN UI, Matter.js

Struggled most with picking a library to create the wave animation

I considered these libraries:

  • GSAP.js: Physics plugin required payment
  • LiquidFun: Not the most compatible with JS, and I leaned more towards a flat vector style
  • Matter.js: Physics engine meant I didn't need to reinvent the wheel, so I went with this option
Wave animation visualizationHome page wave animation visualization
After some time programming...

This website is the end-result!

Feel free to check out the GitHub repository and stay tuned for updates as I'm constantly improving the site!

#4

Future plans

Admittedly, I underestimated the work involved in web development, as I constantly have features I want to work on. But that's the fun of it!

  1. Improve front page animation
    • Animate the jug in the background with AfterEffects to look more realistic
    • Streamline Matter.js or consider integrating/switch to another library, as Matter.js is not optimized for animation
  2. Optimize loading

    Further optimize images, Include more loading skeletons, and a loading screen

  3. Improve on mobile-friendliness and accessibility

    I'm exploring new layouts and updating my codebase to incorporate accessibility features such 'aria-polite'

Wave animation visualizationThanks for visiting my portfolio website, I'd love to hear your feedback! — Jiaxi Tang
LogoJiaxi Tang
ProjectsExplorationResume

I hope you enjoyed your visit!

© Designed and developed with care by Jiaxi Tang.