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.mov
- 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
-
Clone the repo
git clone https://github.com/manishtiwari25/portfolio.git cd portfolio -
Install dependencies
npm install # or yarn install -
Run development server
npm run dev # or yarn devNavigate to
http://localhost:3000to see your portfolio in action.
- 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/*.tsto keep data strongly typed. - Theme Colors: Tailwind utilities and
.minecraft-world.day/.nightCSS classes inglobals.csscontrol sky gradients. - Toggle Button: Customize the pixelated toggle in
ToggleDayNight.tsx.
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
AnimatePresenceand variants for smooth entry/exit and stagger effects.
Modify variants objects or transition props to fine-tune durations, easings, and staggering.
Build for production:
npm run build
npm run start
# or
yarn build
yarn startDeploy to Vercel, Netlify, or any static host supporting Next.js.
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.
This project is licensed under the MIT License. See LICENSE for details.
Made with ❤️ and 8-bit nostalgia.