Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mahossain1/portfolio
This portfolio showcases my skills and projects, built using modern web technologies like Next.js, React, and TypeScript. It features 3D animations powered by Three.js and React Three Fiber, along with smooth transitions using Framer Motion. Styled with Tailwind CSS and enhanced with dark mode support via Next Themes.
https://github.com/mahossain1/portfolio
framer framer-motion nextjs react react-icons tailwindcss threejs typescript
Last synced: 4 months ago
JSON representation
This portfolio showcases my skills and projects, built using modern web technologies like Next.js, React, and TypeScript. It features 3D animations powered by Three.js and React Three Fiber, along with smooth transitions using Framer Motion. Styled with Tailwind CSS and enhanced with dark mode support via Next Themes.
- Host: GitHub
- URL: https://github.com/mahossain1/portfolio
- Owner: MAHossain1
- Created: 2024-09-15T05:03:31.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-09-18T13:06:58.000Z (5 months ago)
- Last Synced: 2024-09-27T16:40:56.990Z (4 months ago)
- Topics: framer, framer-motion, nextjs, react, react-icons, tailwindcss, threejs, typescript
- Language: TypeScript
- Homepage: https://my-portfolio-plum-ten-94.vercel.app/
- Size: 18.3 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# My Portfolio
This repository contains the code for my personal portfolio, showcasing my skills and projects. Built using cutting-edge technologies such as **Next.js**, **React**, **Three.js**, and **Tailwind CSS**, it includes 3D animations, smooth transitions, and a clean, modern design.
## 🛠️ Tech Stack
- **Next.js** (v14.2.11) - Server-side rendering and static site generation
- **React** (v18) - Component-based UI development
- **Three.js** (v0.168.0) - 3D animations and graphics
- **React Three Fiber** (v8.17.7) - Declarative Three.js within React
- **Framer Motion** (v11.5.4) - Animations and transitions
- **Tailwind CSS** (v3.4.1) - Utility-first CSS framework
- **Next Themes** (v0.3.0) - Dark/light mode support
- **React Icons** (v5.3.0) & **Tabler Icons** (v3.16.0) - Icon sets
- **React Lottie** (v1.2.4) - Lottie animations
- **Tailwind Merge** (v2.5.2) - Utility class merging
- **Mini SVG Data URI** (v1.4.4) - SVG optimization
## 🚀 Features
- **3D Globe:** Integrated using **Three.js** and **three-globe** to showcase interactive 3D elements.
- **Dark Mode Support:** Easily toggle between dark and light themes using **Next Themes**.
- **Smooth Animations:** Implemented with **Framer Motion** for seamless transitions.
- **Interactive Icons:** Leveraging **React Icons** and **Tabler Icons** for a modern touch.
- **SVG Optimization:** Using **Mini SVG Data URI** for optimized SVG handling.
## 📦 Installation
1. Clone the repository:
```bash
git clone https://github.com/yourusername/your-repo-name.git
```
2. Install the dependencies:
```bash
npm install
```
3. Run the development server:
```bash
npm run dev
```