reactthreefolio

This project portfolio was built using React, TailwindCSS, Vite, React Three, and Swiper. It is designed to showcase a variety of web development skills and tools.

Features

• 3D Model for Landing Page: Engage visitors with an immersive 3D model as the landing page.
• Downloadable Resume: Visitors can download my resume directly from the portfolio.
• Skills List in Accordion: Organized list of skills in an accordion-style layout for easy browsing.
• Experience Carousel: List of experiences presented in a swiper/slider form. Clicking "Show More Info" opens a modal with detailed information.
• Location Button with Google Maps Integration: Shows the location of companies on Google Maps for each experience.
• Search Filter: Filterable list of projects and certificates for easy navigation.
• Project and Certificate Popups: Clicking on a project or certificate displays a popup with an image and links for live demo or source code.
• Contact Me Page: A dedicated page with contact information and a form for reaching out.
• Google Tag Manager Integration: Manage and deploy marketing tags and tracking codes seamlessly with Google Tag Manager.

Technologies Used

• EmailJS: Used for email services.
• Font Awesome: A popular icon toolkit.
• Google Maps API: For embedding maps.
• Google Tag Manager: For managing and deploying marketing tags and tracking codes.
• React: A JavaScript library for building user interfaces.
• React Three, React Three Drei, React Three Fiber: For rendering 3D models.
• Swiper: A modern mobile touch slider.
• Tailwind CSS: A utility-first CSS framework for rapid UI development.
• Vite: A next-generation front-end tooling that provides a faster and leaner development experience.

Getting Started

1. Clone the repository:

   git clone https://github.com/takumayumi/takumayumi.git
   

2. Navigate to the project directory:

   cd takumayumi
   

3. Install dependencies:

   npm install
   

4. Start the development server:

   npm run dev
   

Note: You might encounter errors due to the absence of a .env file. Ensure you create and configure your .env file with the necessary environment variables for the project to run correctly.

Credits

Solely for demonstrating the implementation of 3D models and custom fonts.

• 3D Model by AquarianDoll on Sketchfab: View Model.
• Starborn by Darrell Flood on Creative Fabrica: View Font.
• Louis George Café by Chen Yining on DaFont: View Font.

Learning

You are welcome to download and use this project for your learning purposes. Please note that while you can use the code to understand and build your own projects, refrain from using my images.

License

This project is licensed under the MIT License. See the LICENSE file for more information.