https://github.com/manishtiwari25/portfolio
https://github.com/manishtiwari25/portfolio
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/manishtiwari25/portfolio
- Owner: manishtiwari25
- Created: 2025-04-06T16:40:22.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2025-04-19T20:00:20.000Z (2 months ago)
- Last Synced: 2025-04-19T21:31:23.533Z (2 months ago)
- Language: TypeScript
- Homepage: https://portfolio-bitesinbyte.vercel.app
- Size: 1.27 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Portfolio
A playful, pixelated portfolio site built with Next.js, TypeScript, Tailwind CSS, NES.css, and Framer Motion. This project transforms your professional work experience and open-source projects into an interactive, retro-inspired experience with smooth animations and light/dark themes.
---
## 📺 Demo
Your browser does not support the video tag.
---
## 🚀 Features
- **Light & Dark Mode**: Automatically detects user timezone for day/night and allows manual toggle.
- **Minecraft Aesthetic**: Blocky gradients emulate sky→grass→dirt→stone layers, with pixelated clouds and twinkling stars.
- **Animated Header**: Portal overlay animation opens with block ring explosion before revealing content.
- **Work Experience**: NES-style cards showing position, company, dates, summary, and expandable highlights powered by Framer Motion.
- **Projects Showcase**: Grid of project cards with fade-in, ‘Load More’ functionality, and animated reveal of tech tags.
- **Pixel Fonts & Icons**: Uses NES.css components and React Icons (FiChevronDown / FiChevronUp) for a cohesive 8-bit look.
- **Responsive & Accessible**: Mobile-first layout and ARIA-friendly semantics
---
## 🔧 Installation
1. **Clone the repo**
```bash
git clone https://github.com/manishtiwari25/portfolio.git
cd portfolio
```
2. **Install dependencies**
```bash
npm install
# or
yarn install
```
3. **Run development server**
```bash
npm run dev
# or
yarn dev
```
Navigate to `http://localhost:3000` to see your portfolio in action.
---
## 🎨 Configuration
- **Project Data**: Edit `src/data/work.json`, `src/data/projects.json`, etc. to update your work history and open-source projects.
- **Type Definitions**: Found in `/types/*.ts` to keep data strongly typed.
- **Theme Colors**: Tailwind utilities and `.minecraft-world.day` / `.night` CSS classes in `globals.css` control sky gradients.
- **Toggle Button**: Customize the pixelated toggle in `ToggleDayNight.tsx`.
---
## 🚧 Customizing Animations
All animations use Framer Motion:
- **PortalOverlay**: Block ring explosion in `PortalOverlay.tsx`.
- **Clouds & Stars**: Day/Night sky animations in `MinecraftLayout.tsx`.
- **Card & List**: WorkExperience and Projects components leverage `AnimatePresence` and variants for smooth entry/exit and stagger effects.
Modify `variants` objects or transition props to fine-tune durations, easings, and staggering.
---
## 🌐 Deployment
Build for production:
```bash
npm run build
npm run start
# or
yarn build
yarn start
```
Deploy to Vercel, Netlify, or any static host supporting Next.js.
---
## ❤️ Contributing
Contributions, issues, and feature requests are welcome! Feel free to:
- Open an issue for bugs or ideas
- Submit pull requests for enhancements
Please read `CONTRIBUTING.md` for details.
---
## 📜 License
This project is licensed under the MIT License. See `LICENSE` for details.
---
Made with ❤️ and 8-bit nostalgia.