|
1 |
| -This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app). |
| 1 | +# Minecraft Portfolio Animations |
2 | 2 |
|
3 |
| -## Getting Started |
| 3 | +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. |
4 | 4 |
|
5 |
| -First, run the development server: |
| 5 | +--- |
| 6 | + |
| 7 | +## 📺 Demo |
| 8 | + |
| 9 | +<div align="center"> |
| 10 | + <!-- Example: You can embed a video or an animated GIF here --> |
| 11 | + <video src="./.github/assets/demo.mov" controls width="640" poster="./.github/assets/demo.png"> |
| 12 | + Your browser does not support the video tag. |
| 13 | + </video> |
| 14 | +</div> |
| 15 | + |
| 16 | +--- |
| 17 | + |
| 18 | +## 🚀 Features |
| 19 | + |
| 20 | +- **Light & Dark Mode**: Automatically detects user timezone for day/night and allows manual toggle. |
| 21 | +- **Minecraft Aesthetic**: Blocky gradients emulate sky→grass→dirt→stone layers, with pixelated clouds and twinkling stars. |
| 22 | +- **Animated Header**: Portal overlay animation opens with block ring explosion before revealing content. |
| 23 | +- **Work Experience**: NES-style cards showing position, company, dates, summary, and expandable highlights powered by Framer Motion. |
| 24 | +- **Projects Showcase**: Grid of project cards with fade-in, ‘Load More’ functionality, and animated reveal of tech tags. |
| 25 | +- **Pixel Fonts & Icons**: Uses NES.css components and React Icons (FiChevronDown / FiChevronUp) for a cohesive 8-bit look. |
| 26 | +- **Responsive & Accessible**: Mobile-first layout and ARIA-friendly semantics |
| 27 | + |
| 28 | +--- |
| 29 | + |
| 30 | +## 🔧 Installation |
| 31 | + |
| 32 | +1. **Clone the repo** |
| 33 | + |
| 34 | + ```bash |
| 35 | + git clone https://github.com/manishtiwari25/portfolio.git |
| 36 | + cd portfolio |
| 37 | + ``` |
| 38 | + |
| 39 | +2. **Install dependencies** |
| 40 | + |
| 41 | + ```bash |
| 42 | + npm install |
| 43 | + # or |
| 44 | + yarn install |
| 45 | + ``` |
| 46 | + |
| 47 | +3. **Run development server** |
| 48 | + ```bash |
| 49 | + npm run dev |
| 50 | + # or |
| 51 | + yarn dev |
| 52 | + ``` |
| 53 | + Navigate to `http://localhost:3000` to see your portfolio in action. |
| 54 | + |
| 55 | +--- |
| 56 | + |
| 57 | +## 🎨 Configuration |
| 58 | + |
| 59 | +- **Project Data**: Edit `src/data/work.json`, `src/data/projects.json`, etc. to update your work history and open-source projects. |
| 60 | +- **Type Definitions**: Found in `/types/*.ts` to keep data strongly typed. |
| 61 | +- **Theme Colors**: Tailwind utilities and `.minecraft-world.day` / `.night` CSS classes in `globals.css` control sky gradients. |
| 62 | +- **Toggle Button**: Customize the pixelated toggle in `ToggleDayNight.tsx`. |
| 63 | + |
| 64 | +--- |
| 65 | + |
| 66 | +## 🚧 Customizing Animations |
| 67 | + |
| 68 | +All animations use Framer Motion: |
| 69 | + |
| 70 | +- **PortalOverlay**: Block ring explosion in `PortalOverlay.tsx`. |
| 71 | +- **Clouds & Stars**: Day/Night sky animations in `MinecraftLayout.tsx`. |
| 72 | +- **Card & List**: WorkExperience and Projects components leverage `AnimatePresence` and variants for smooth entry/exit and stagger effects. |
| 73 | + |
| 74 | +Modify `variants` objects or transition props to fine-tune durations, easings, and staggering. |
| 75 | + |
| 76 | +--- |
| 77 | + |
| 78 | +## 🌐 Deployment |
| 79 | + |
| 80 | +Build for production: |
6 | 81 |
|
7 | 82 | ```bash
|
8 |
| -npm run dev |
| 83 | +npm run build |
| 84 | +npm run start |
9 | 85 | # or
|
10 |
| -yarn dev |
11 |
| -# or |
12 |
| -pnpm dev |
13 |
| -# or |
14 |
| -bun dev |
| 86 | +yarn build |
| 87 | +yarn start |
15 | 88 | ```
|
16 | 89 |
|
17 |
| -Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. |
| 90 | +Deploy to Vercel, Netlify, or any static host supporting Next.js. |
| 91 | + |
| 92 | +--- |
18 | 93 |
|
19 |
| -You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. |
| 94 | +## ❤️ Contributing |
20 | 95 |
|
21 |
| -This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel. |
| 96 | +Contributions, issues, and feature requests are welcome! Feel free to: |
22 | 97 |
|
23 |
| -## Learn More |
| 98 | +- Open an issue for bugs or ideas |
| 99 | +- Submit pull requests for enhancements |
24 | 100 |
|
25 |
| -To learn more about Next.js, take a look at the following resources: |
| 101 | +Please read `CONTRIBUTING.md` for details. |
26 | 102 |
|
27 |
| -- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. |
28 |
| -- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. |
| 103 | +--- |
29 | 104 |
|
30 |
| -You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome! |
| 105 | +## 📜 License |
31 | 106 |
|
32 |
| -## Deploy on Vercel |
| 107 | +This project is licensed under the MIT License. See `LICENSE` for details. |
33 | 108 |
|
34 |
| -The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. |
| 109 | +--- |
35 | 110 |
|
36 |
| -Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details. |
| 111 | +Made with ❤️ and 8-bit nostalgia. |
0 commit comments