🚀 Sakshyam Baral Portfolio

🎯 Modern Portfolio Built with Next.js 13

🌟 LIVE DEMO

🎨 FEATURES & HIGHLIGHTS

🎭 Design Excellence

🌟 Stunning UI/UX with smooth animations
📱 Fully Responsive on all devices
🌙 Dark/Light Mode toggle
⚡ Lightning Fast performance
🎨 Custom Tailwind Components

🛠️ Technical Power

📝 MDX Blog System with syntax highlighting
📧 Working Contact Form with email delivery
📊 GitHub API Integration for projects
🔍 SEO Optimized for search engines
🚀 Edge Runtime for maximum speed

🔥 TECH STACK

Frontend Arsenal

Backend & Services

Development Tools

⚡ QUICK START

📋 Prerequisites

Node.js >= 18.0.0  ✅
pnpm >= 8.0.0      ✅ (Recommended)
Git                ✅

🚀 Installation Steps

# 📦 Clone the repository
git clone https://github.com/SakshL/React.jsPortfolio.git

# 📂 Navigate to project
cd React.jsPortfolio

# ⚡ Install dependencies (super fast with pnpm!)
pnpm install

# 🔧 Configure environment
cp .env.example .env.local

# 🚀 Start development server
pnpm dev

🎉 Open http://localhost:3000 and witness the magic!

🔐 ENVIRONMENT SETUP

Create your .env.local file:

# 🔑 GitHub Integration (Required)
GITHUB_ACCESS_TOKEN=ghp_your_token_here

# 📧 Contact Form (Required)  
BREVO_API_KEY=xkeysib-your-api-key-here

# 📊 Analytics (Optional)
HOTJAR_ID=your_hotjar_id

Variable	Description	Status
`GITHUB_ACCESS_TOKEN`	🔑 GitHub API access for repositories
`BREVO_API_KEY`	📧 Email delivery service
`HOTJAR_ID`	📊 User analytics tracking

📦 NPM SCRIPTS

Command	Description	Performance
`pnpm dev`	🔥 Start development server
`pnpm build`	📦 Build for production
`pnpm start`	🚀 Start production server
`pnpm lint`	🔍 Code quality check
`pnpm format`	✨ Format code beautifully

🎯 FEATURES SHOWCASE

📧 Smart Contact System

✅ Real-time validation with instant feedback
✅ Professional email templates with your branding
✅ Reliable delivery via Brevo SMTP service
✅ Anti-spam protection built-in
✅ Success animations for better UX

📊 Dynamic GitHub Showcase

🔄 Live repository data from GitHub API
⭐ Automatic sorting by popularity and activity
📈 Contribution graphs and statistics
🏆 Featured projects highlighting
📅 Real-time updates when you push code

🎨 Modern Design System

🌈 Gradient animations and micro-interactions
📱 Mobile-first responsive design
🎭 Smooth transitions between pages
🌙 Theme switching with system preference
⚡ Optimized images with Next.js Image

🚀 DEPLOYMENT

Deploy to Vercel (One-Click)

Manual Deployment

# 📦 Build the project
pnpm build

# 🚀 Deploy to Vercel
vercel --prod

# 🌐 Your portfolio is live!

📊 PERFORMANCE METRICS

Lighthouse Scores

Key Achievements

🚀 < 1s First Contentful Paint
⚡ < 0.5s Time to Interactive
📱 100% Mobile Responsive Score
🔍 Perfect SEO Optimization
♿ Full Accessibility Compliance

📁 PROJECT STRUCTURE

📦 React.jsPortfolio/
├── 🏠 app/                    # Next.js 13 App Router
│   ├── 📄 page.jsx           # Homepage with hero section
│   ├── 📞 contact/           # Contact page & API routes
│   ├── 📝 blog/              # Blog system with MDX
│   ├── 🗂️ repositories/      # GitHub projects showcase
│   └── 🔧 api/               # Server-side API routes
├── 🧩 components/            # Reusable React components
│   ├── 🎨 decorations/       # Visual elements & animations
│   ├── 📋 elements/          # UI components & buttons
│   └── 📝 blog/              # Blog-specific components
├── 📊 data/                  # Static content & blog posts
├── 🛠️ lib/                   # Utility functions & helpers
├── 🎨 styles/                # Global CSS & Tailwind config
├── 🌐 public/                # Static assets & images
└── ⚙️ config.js              # App configuration & settings

🤝 CONTRIBUTING

Join the community! Contributions are always welcome!

🚀 How to Contribute

🍴 Fork this repository
🌿 Create your feature branch
```
git checkout -b feature/amazing-feature
```

💾 Commit your changes

git commit -m 'Add: amazing new feature'

🚀 Push to the branch
```
git push origin feature/amazing-feature
```
🎯 Open a Pull Request

🐛 Found Issues?

🙏 ACKNOWLEDGMENTS

Special thanks to these amazing technologies:

And the amazing open-source community 🌟

📄 LICENSE

This project is licensed under the MIT License - see the LICENSE file for details.

🌟 SHOW YOUR SUPPORT

If this project helped you, please give it a ⭐️!

💻 Crafted with ❤️ and ☕ by Sakshyam Baral

Connect with me:

⭐ Star this repository if it helped you! ⭐

>

Name		Name	Last commit message	Last commit date
Latest commit History 29 Commits
.devcontainer		.devcontainer
.github		.github
app		app
components		components
data		data
docs		docs
lib		lib
public		public
scripts		scripts
styles		styles
.eslintrc.js		.eslintrc.js
.gitattributes		.gitattributes
.gitignore		.gitignore
.nvmrc		.nvmrc
.prettierignore		.prettierignore
MIGRATION.md		MIGRATION.md
README.md		README.md
config.js		config.js
contentlayer.config.js		contentlayer.config.js
jsconfig.json		jsconfig.json
license.md		license.md
next.config.js		next.config.js
package-lock.json		package-lock.json
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
postcss.config.js		postcss.config.js
prettier.config.mjs		prettier.config.mjs
tailwind.config.js		tailwind.config.js
vercel.json		vercel.json

License

SakshL/React.jsPortfolio

Folders and files

Latest commit

History

Repository files navigation