Welcome to the source code for my personal website!
This site is built with Next.js, React, and TypeScript, and showcases my projects, experience, and skills as an aspiring full stack developer and software engineer.
Check out the live site here: https://jocelynxu.vercel.app/
- Design: Responsive, mobile-friendly design using Tailwind CSS and Framer Motion for cool animations :). Also added 3D objects and a custom animated landing page with SVG effects to spice things up!
- Sections: Typical portfolio structure with dynamic sections highlighting about me, experiences, projects, and contact.
- Contact Form: End-to-end contact form using Mailgun API for secure client communication.
- Custom Canvas Cursor 💞: Canvas-based animated cursor for enhanced interactivity (desktop only).
- Frontend: Next.js, React, TypeScript, Tailwind CSS, Framer Motion, Three.js
- Backend: Node.js, Mailgun API
- Other Tools: SweetAlert2, React Icons
- Animations & 3D: Experimented with Three.js and Framer Motion for various animated objects and cool tricks with svgs.
- SVG Responsiveness & Rendering: Faced challenges with responsive scaling of SVG paths and heavy rendering with Three.js. Learned to troubleshoot, optimize rendering (debouncing and only load when in view), and balance performance with visual fidelity.
- Code Organization: Structured the project with reusable components, hooks, api folder, hoc etc. My favorite part was learning to implement higher-order components (HOCs) — they’re simple to add but significantly improve layout and animation consistency, following the DRY principle.
- More Coding Practice: As with any project, I became more familiar working with TypeScript, React, and Next.js, but also exploring and learning about other frameworks and tools such as Three.js, SweetAlert2 (for simple modals), and connecting a frontend form to the Mailgun backend email service for end-to-end functionality. :D
👉 This project is still ongoing! I’m actively refining design/animations, optimizing performance, and adding new sections as I grow my portfolio.
- Fill out the contact form on my website
- Email me directly at joce.xxt22@gmail.com
- Or reach out on LinkedIn