takumayumi

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.

Tools and 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.

Usage

You are free to download and use this repository as a learning tool. However, please adhere to the following guidelines:

1. Respect the license and terms of use for each library and tool used in this project.
2. Do not use any images in this repository. These assets are either my personal logos. The 3D model is credited to Prinavu and is used here solely for demonstrating the implementation of 3D models on a website. You can view the model in Sketchfab.
3. Starborn font is credited to Darrell Flood and is used here solely for demonstrating the implementation of custom fonts. You can view the font in Creative Fabrica.
4. Louis George Café font is credited to Chen Yining and is used here solely for demonstrating the implementation of custom fonts. You can view the font DaFont.

Installation

To get started with this project, follow these steps:

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.

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.

Credits

• 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.

Contact

For any inquiries or feedback, please reach out via yumitakuma@outlook.com.

---

Thank you for checking out my project! Happy coding!