https://github.com/aniruddhaadak80/folio-motion
An interactive, animation-rich portfolio template with Next.js and Tailwind CSS to showcase your skills!
https://github.com/aniruddhaadak80/folio-motion
famermotion javascript lucide-react nextjs nextjs14 portfolio portfolio-construction portfolio-site portfolio-template portfolio-website portfolio-website-design react-components reactjs shadcn-ui tailwind-css tailwindcss typescript
Last synced: 7 months ago
JSON representation
An interactive, animation-rich portfolio template with Next.js and Tailwind CSS to showcase your skills!
- Host: GitHub
- URL: https://github.com/aniruddhaadak80/folio-motion
- Owner: aniruddhaadak80
- Created: 2024-11-15T14:11:02.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2024-11-16T07:34:28.000Z (12 months ago)
- Last Synced: 2025-03-26T18:22:22.315Z (7 months ago)
- Topics: famermotion, javascript, lucide-react, nextjs, nextjs14, portfolio, portfolio-construction, portfolio-site, portfolio-template, portfolio-website, portfolio-website-design, react-components, reactjs, shadcn-ui, tailwind-css, tailwindcss, typescript
- Language: TypeScript
- Homepage: https://folio-motion.vercel.app
- Size: 382 KB
- Stars: 3
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
Awesome Lists containing this project
README
# 🚀 **Folio-Motion: Interactive & Animated Developer Portfolio**
Welcome to **Folio-Motion**, a stunning, interactive, and animation-rich developer portfolio built with the latest technologies: **Next.js**, **Tailwind CSS**, **Framer Motion**, **ShadCN UI**, and **TypeScript**. This portfolio is designed to showcase your skills, projects, and experience with smooth animations, dynamic hover effects, and a modern, responsive design. It's built to impress and provide an engaging user experience!
---
## 🎨 **Features**
- **💫 Hero Section**: Animated background and smooth introduction with dynamic text animations.
- **📱 Sticky & Interactive Navbar**: Smooth scrolling and responsive design, with hover effects.
- **👤 About Me Section**: Animated profile picture and bio with interactive progress indicators for your skills.
- **💻 Projects Section**: Hoverable project cards with detailed modals, plus project categories filter.
- **🔧 Skills Section**: Animated skill indicators and interactive icons for each technology.
- **🗣 Testimonials Section**: Testimonial carousel with smooth transitions.
- **✉️ Contact Form**: Fully interactive contact form with animated submit button and success message.
- **🌍 Responsive Design**: Optimized for mobile, tablet, and desktop with smooth page transitions.
- **⚡️ Performance Optimized**: Lazy loading, scroll-triggered animations, and server-side rendering.
---
## 🛠 **Tech Stack**
- **Next.js**: Server-side rendering, routing, and optimized performance.
- **Tailwind CSS**: Utility-first CSS for fast and responsive design.
- **Framer Motion**: Dynamic animations for smooth transitions and hover effects.
- **ShadCN UI**: Modern UI components for consistency and professionalism.
- **TypeScript**: Type safety and maintainability throughout the codebase.
---
## 🌐 **Getting Started**
Follow these steps to get the project up and running locally:
### 1. **Clone the repository**:
```bash
git clone https://github.com/aniruddhaadak80/folio-motion.git
```
### 2. **Install dependencies**:
```bash
cd folio-motion
npm install
```
### 3. **Run the development server**:
```bash
npm run dev
```
Your portfolio will be available at [http://localhost:3000](http://localhost:3000) 🚀
---
## ✨ **Features in Development**
- More **interactive animations** on various sections.
- Enhanced **performance optimizations** for faster load times.
- Additional **project categories** and filtering options.
- **Multi-language support**.
---
## 👥 **Contributing**
We welcome contributions! Please follow the steps below to contribute to this project:
1. **Fork the repository** and clone it to your local machine.
2. **Create a new branch** for your feature or bug fix.
3. **Make your changes** and test them locally.
4. **Commit your changes** with a descriptive message.
5. **Push to your fork** and open a **pull request** to the main repository.
For more detailed instructions, check out the [CONTRIBUTING.md](CONTRIBUTING.md) guide. 📑
---
## 📜 **License**
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
---
## 📧 **Contact**
If you have any questions or suggestions, feel free to reach out to me:
- Email: [aniruddhaadak80@gmail.com](mailto:aniruddhaadak80@gmail.com)
- GitHub: [Profile](https://github.com/aniruddhaadak80)
---
### ⭐ **Thank you for checking out my portfolio! Feel free to fork, clone, and customize!** 🌟