Skip to content

This project showcases the power of React, Next.js, TailwindCSS, and Framer Motion in building a dynamic, high-performance, and visually captivating web application.

Notifications You must be signed in to change notification settings

Trangvu801/TrangVu-dev-portfolio24

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

38 Commits
 
 
 
 
 
 
 
 

Repository files navigation

My Portfolio Website

Welcome to my portfolio website repository! This project showcases the power of React, Next.js, TailwindCSS, and Framer Motion in building a dynamic, high-performance, and visually captivating web application. Dive in to learn and explore how these technologies come together in a seamless project.


🚀 Key Features

🌟 React & Next.js Foundations

  • Grasp the core concepts of React and Next.js.
  • Build a robust, scalable, and high-performance web application.

🎨 TailwindCSS Mastery

  • Style your portfolio effortlessly with Tailwind's utility-first approach.
  • Achieve responsive and scalable designs with minimal CSS overhead.

✨ Framer Motion & CSS Animations

  • Create stunning animations and micro-interactions.
  • Boost user engagement with smooth transitions and captivating effects.

🛠️ End-to-End Project Build

  • Follow a step-by-step guide to building your portfolio from scratch.
  • Learn best practices for setup, styling, and deployment of a professional website.

🌐 Project Demo

Experience the portfolio live through the following visuals:

🏠 Home Page

Home Page

📁 Projects Section

Projects Section

💬 Testimonial Section

Testimonial Section

🙋‍♂️ About Me Section

About Me Section


🔧 Technologies Used

Frontend Frameworks

  • React: A flexible component-based architecture for building dynamic UIs.
  • Next.js: Offers server-side rendering, optimized routing, and performance enhancements.

Styling

  • TailwindCSS: A utility-first CSS framework for effortless and efficient styling.
  • CSS Animations: Adds subtle enhancements to improve aesthetics and user experience.

Animations

  • Framer Motion: A powerful library for creating declarative and engaging animations.

🛠️ Getting Started

Prerequisites

Before getting started, ensure you have the following installed:

Installation Steps

  1. Clone the repository:

    git clone https://github.com/your-username/your-portfolio.git
  2. Navigate to the project directory:

    cd Folder
  3. Install dependencies:

    npm install

Running the Development Server

Start the development server:

npm run dev

Access your portfolio at http://localhost:3000.


🚀 Deployment

Deploy your portfolio seamlessly using platforms like Vercel which natively supports Next.js.

Steps for Vercel Deployment

  1. Connect your GitHub repository to Vercel.
  2. Select the branch to deploy.
  3. Vercel will automatically build and deploy your site.

🤝 Contributing

Your contributions are highly valued! Feel free to:

  • Fork the repository.
  • Submit pull requests for new features or improvements.
  • Report issues or suggest enhancements.

📜 License

This project is licensed under the MIT License. Feel free to use and adapt it for your own projects.


📬 Contact

Have questions or want to connect? Let's chat!


Thank you for visiting! If you find this project helpful or inspiring, don’t forget to give it a ⭐️.

About

This project showcases the power of React, Next.js, TailwindCSS, and Framer Motion in building a dynamic, high-performance, and visually captivating web application.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published