Colophon

About This Website

This website is my personal portfolio—my place on the internet. It's a digital canvas where I showcase my skills, projects, and everything I'm passionate about.

This is the third version of my portfolio. My journey began in 2022 when I deployed my first portfolio, which I had copied from a YouTube tutorial. Later, after passing my SEE examination, I built the second version—this time inspired by and heavily influenced by Leerob’s portfolio. Now, with everything I’ve learned along the way, I’ve crafted this version from the ground up, blending all my experiences into a site that truly represents me.

Built with Sanity, MDX, Firebase, TypeScript, NextJS and PostgreSQL, this website prioritizes performance, user experience, and maintainability.

Tech Stack

This website is proudly crafted with the following technologies:

I purchased my domain tuyenpham.tech for this site from Bisup, and the site is deployed on Vercel.

Typography

A carefully selected set of typefaces contributes to the website's visual identity:

• Karla: Used for the majority of the body content for readability.
• Peachi: Applied to headings to create a distinct and memorable visual hierarchy.
• Life of Apple: Elegantly displays my name, lending a personal touch.
• MonoLisa: Chosen for code snippets, ensuring clarity and legibility.
• Ride My Bike: Font for some special sections of the website.

Design & Colors

The website's color palette is a result of deliberate selection and feedback, reflecting my personal aesthetic while prioritizing accessibility and a modern feel.

These colors are consistently applied throughout the site to maintain a cohesive and visually appealing experience.

External APIs & Libraries

This website leverages several external APIs and libraries to enhance functionality and user experience:

• Web3Forms: For handling form submissions.
• Weather API: To dynamically display weather information.
• Joke API: To generate random jokes.
• Spotify API: To showcase listening activity.
• WakaTime API: To display coding statistics.
• Time API: To display time in contact page.
• Umami API: For privacy-focused website analytics.
• Feedback.fish: Providing the feedback widget.
• Three.js & React Three Fiber: For creating interactive 3D elements.
• @react-three/drei: For useful helpers and abstractions for React Three Fiber.
• @react-three/fiber: For React renderer for Threejs.

The 3D model on the About page is generously provided by Takuya Matsuyama at craftz.dog.

Additional Libraries & Functionality

Beyond the core tech stack, the website utilizes the following libraries to enhance specific features:

• Shadcn UI: For beautifully-designed, accessible components
• auth.js v2: For secure and streamlined user authentication.
• Icons: Sourced from both react-icons and react-feather, providing a diverse and consistent icon set.
• recharts: Used for data visualization in the dashboard.
• react-hot-toast: For displaying user-friendly toast notifications.
• react-canvas-confetti: To generate engaging confetti effects.
• Custom Cursor: For unique and personalized custom cursors.
• react-medium-image-zoom: Enables image zooming functionality.
• react-cookie: For Storing Blog Views and Likes.

Acknowledgements

I would like to express my sincere gratitude to the following individuals and their work, which have significantly inspired the design and development of this portfolio:

• Ouassim: For the inspiration to re-create my new portfolio.
• Jahir Fiquitiva
• Theodorus Clarence
• Bona Brian Siagian
• Lee Robinson
• Marc Bouchenoire
• Victor Eke
• Ryan Aulia
• Vijay Verma
• Raphaël Chelly
• danielwirtz
• DavidDarnes
• Sayan Dey
• Håvard Brynjulfsen

And to many more talented developers and designers whose work has unknowingly shaped my perspective and approach. Thank you all.