• 

  Home

• 

  About

• 

  My Work

• 

  Reviews from Clients

• 

  Contact

Inspiration

The main purpose of creating this portfolio was to enhance my web development skills, particularly by working with React.js, Three.js, and Tailwind CSS. I participated in the ACM Design Annual Personal Portfolio Competition to motivate myself to build an impressive website, knowing that a strong portfolio is essential for catching the attention of recruiters.

I also wanted to help others who might be struggling with creating a portfolio and don’t know where to start. To achieve this, I included detailed comments in my files so that developers of any skill level can learn from my project. I made all the files public and customizable so others can create their unique portfolios and succeed in landing interviews.

What it does

This portfolio showcases my skills, projects, and passions using interactive 3D elements and a modern design. It features dynamic sections built with React.js and Three.js, creating an engaging and visually appealing experience.

How I built it

I built this portfolio using the following tools and technologies:

• React.js for building the user interface.
• Three.js and React Three Fiber for 3D graphics and rendering.
• React Three Drei for essential helpers and abstractions.
• Email JS for contact form functionality.
• Vite for bundling and development.
• Tailwind CSS for styling.

The 3D models were sourced from platforms like Sketchfab and modified to fit the design of the portfolio. I referenced documentation and guides, such as the React Three Fiber documentation and the Ultimate Three.js Guide, which provided tips, tricks, and project ideas.

A special shoutout to the JavaScript Mastery YouTube channel for offering an in-depth tutorial that helped me grasp the fundamentals and best practices of working with Three.js and React.js. While the tutorial was a source of learning, the portfolio was built with significant personal effort and customization.

I want to thank the ACM chapter at Cal State Fullerton for inspiring and igniting my programming skills. Their workshops and support have been instrumental in my journey as a developer, and I aim to pass on the same encouragement to future ACM members

Challenges I ran into

Integrating 3D objects was one of the biggest challenges I faced. The source code for some models caused my program to crash repeatedly, forcing me to debug extensively and even restart parts of the project from scratch. Despite the setbacks, these challenges taught me resilience and improved my problem-solving skills.

Accomplishments that I'm proud of

I’m proud of creating an interactive and visually engaging portfolio that effectively showcases my skills. Seeing the 3D objects and sections displayed on the screen after overcoming numerous challenges was incredibly rewarding.

What I learned

Through this project, I gained valuable knowledge about:

• Implementing and rendering 3D objects using Three.js.
• Leveraging React.js for dynamic and modular code.
• Using Tailwind CSS to create responsive and aesthetic designs. This experience also made me more comfortable with exploring new technologies and incorporating them into my projects.

What's next for the Portfolio

There are many features I’d like to add in the future:

1. Displaying orbiting 3D objects representing Python, JavaScript, and C++.
2. Adding a work experience section to better highlight my professional background.
3. Optimizing the project for accessibility and performance.

Like all programming projects, this portfolio is a work in progress and will continue to evolve as I grow as a developer.

Built With

• emailjs
• react.js
• reactthreedrei
• reactthreefiber
• tailwindcss
• three.js
• vite