Skip to content

Commit 400a7fe

Browse files
manishtiwari25manishtiwari25
committed
chore: Updated readme
1 parent 2f648c0 commit 400a7fe

File tree

5 files changed

+229
-20
lines changed

5 files changed

+229
-20
lines changed

‎.github/assets/demo.mov

56.6 MB
Binary file not shown.

‎.github/assets/demo.png

517 KB
Loading

‎CONTRIBUTING.md

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
# Contributing to Portfolio
2+
3+
First off, thank you for considering contributing! 🎉 Your feedback, bug reports, and improvements help make this project better for everyone.
4+
5+
---
6+
7+
## Table of Contents
8+
9+
1. [Reporting Issues](#reporting-issues)
10+
2. [Suggesting Enhancements](#suggesting-enhancements)
11+
3. [Development Setup](#development-setup)
12+
4. [Submitting Pull Requests](#submitting-pull-requests)
13+
5. [Coding Guidelines](#coding-guidelines)
14+
6. [Style & Formatting](#style--formatting)
15+
7. [Additional Resources](#additional-resources)
16+
17+
---
18+
19+
## Reporting Issues
20+
21+
If you encounter a bug or unexpected behavior, please open an issue:
22+
23+
1. Check existing issues for duplicates.
24+
2. Click **New Issue** and provide:
25+
- A clear, descriptive title.
26+
- Steps to reproduce the problem.
27+
- What you expected to happen and what actually occurred.
28+
- Screenshots or console logs if available.
29+
30+
---
31+
32+
## Suggesting Enhancements
33+
34+
Got an idea? We’d love to hear it!
35+
36+
1. Open an issue titled **"Feature Request: [Your Idea]"**.
37+
2. Explain the motivation behind your suggestion.
38+
3. Optionally include sketches or mockups.
39+
40+
---
41+
42+
## Development Setup
43+
44+
1. **Fork** the repository and **clone** your fork locally:
45+
```bash
46+
git clone https://github.com/manishtiwari25/portfolio.git
47+
cd portfolio
48+
```
49+
2. **Install dependencies**:
50+
```bash
51+
npm install
52+
# or
53+
yarn install
54+
```
55+
3. **Start the dev server**:
56+
```bash
57+
npm run dev
58+
# or
59+
yarn dev
60+
```
61+
4. Open `http://localhost:3000` in your browser.
62+
63+
---
64+
65+
## Submitting Pull Requests
66+
67+
1. Create a new branch for your feature or bugfix:
68+
```bash
69+
git checkout -b feature/my-feature
70+
```
71+
2. Make your changes, ensuring all tests pass and code is linted.
72+
3. Commit your changes with clear, concise messages:
73+
```bash
74+
git commit -m "Add [feature/fix]: brief description"
75+
```
76+
4. Push your branch:
77+
```bash
78+
git push origin feature/my-feature
79+
```
80+
5. Open a PR from your fork’s branch to `main`.
81+
6. In your PR description, include:
82+
- What the change does and why it’s needed.
83+
- Screenshots, GIFs, or code examples if relevant.
84+
85+
---
86+
87+
## Coding Guidelines
88+
89+
- **Typescript**: Use strong typings; prefer `interface` for props and data shapes.
90+
- **React Components**: Functional components with hooks; avoid class components.
91+
- **Next.js**: Use the `app` router conventions and `use client` directives as needed.
92+
- **CSS**: Tailwind utility classes and NES.css for styling; keep custom CSS minimal.
93+
94+
---
95+
96+
## Style & Formatting
97+
98+
- **Prettier**: Run `npm run format` or configure your editor to format on save.
99+
- **ESLint**: Follow lint rules; run `npm run lint` regularly.
100+
- **Commit Messages**: Use [Conventional Commits](https://www.conventionalcommits.org/) style.
101+
102+
---
103+
104+
## Additional Resources
105+
106+
- [Next.js Documentation](https://nextjs.org/docs)
107+
- [Framer Motion Guide](https://www.framer.com/docs/)
108+
- [NES.css Components](https://nostalgic-css.github.io/NES.css/)
109+
- [Tailwind CSS](https://tailwindcss.com/docs)
110+
111+
---
112+
113+
Thank you for helping improve **Portfolio**! 🚀

‎LICENSE

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2025 manishtiwari25
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md

Lines changed: 95 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,111 @@
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
22

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.
44

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:
681

782
```bash
8-
npm run dev
83+
npm run build
84+
npm run start
985
# or
10-
yarn dev
11-
# or
12-
pnpm dev
13-
# or
14-
bun dev
86+
yarn build
87+
yarn start
1588
```
1689

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+
---
1893

19-
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
94+
## ❤️ Contributing
2095

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:
2297

23-
## Learn More
98+
- Open an issue for bugs or ideas
99+
- Submit pull requests for enhancements
24100

25-
To learn more about Next.js, take a look at the following resources:
101+
Please read `CONTRIBUTING.md` for details.
26102

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+
---
29104

30-
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
105+
## 📜 License
31106

32-
## Deploy on Vercel
107+
This project is licensed under the MIT License. See `LICENSE` for details.
33108

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+
---
35110

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

Comments
 (0)