Home

Welcome, This guide will help you understand, customize, and deploy your modern developer portfolio.

---

🎯 Overview

This is a modern, responsive portfolio website template designed for developers and creators. It provides a beautiful platform to showcase your work, skills, and experience.

🔗 Live Demo: https://satya00089.github.io/portfolio

What Makes This Special?

• ✅ Ready to use - Fork and customize in minutes
• ✅ Modern stack - React 19, TypeScript, Tailwind CSS 4
• ✅ Unique features - CLI-style resume, animated skills
• ✅ Easy customization - Single config file controls all content
• ✅ Production ready - Optimized, responsive, accessible

---

✨ Features

🎨 Interactive Portfolio

• Grid and modal views for projects
• Markdown-powered project descriptions
• GitHub-flavored markdown styling
• Image galleries and live links

📄 Multiple Resume Views

• Traditional resume page with print support
• Unique CLI-style terminal resume
• Interactive and engaging presentation

💪 Skills Showcase

• Animated circular progress bars
• Categorized skill sets
• Visual proficiency indicators

🎭 Theme System

• Dark and Light mode toggle
• Smooth theme transitions
• Persistent user preference

🎬 Smooth Animations

• Framer Motion powered
• Scroll-triggered effects
• Page transitions

📱 Responsive Design

• Mobile-first approach
• Works on all screen sizes
• Touch-friendly interactions

📧 Contact Integration

• Interactive contact form
• Social media links
• Professional presentation

🚀 Performance

• Optimized builds with Vite
• Fast page loads
• Smooth scrolling with progress indicator

---

🛠️ Tech Stack

Frontend Framework

React 19          → Modern UI library
TypeScript        → Type-safe JavaScript
Vite             → Lightning-fast build tool
React Router DOM  → Client-side routing

Styling & UI

Tailwind CSS 4          → Utility-first CSS
Framer Motion           → Animation library
Lucide React            → Beautiful icons
React Icons             → Extended icon library
GitHub Markdown CSS     → Markdown styling

Additional Libraries

React Markdown              → Render markdown content
React Circular Progressbar  → Skill visualizations
React Scroll               → Smooth scrolling

---

📁 Project Structure

portfolio/
│
├── public/                    # Static assets
│   ├── preview-home.png      # Homepage preview
│   └── preview-cli.png       # CLI resume preview
│
├── src/
│   ├── components/           # React components
│   │   ├── shared/          # Reusable components
│   │   │   ├── Header.tsx
│   │   │   ├── Footer.tsx
│   │   │   ├── ProjectModal.tsx
│   │   │   └── ...
│   │   └── resume/          # Resume components
│   │       ├── ResumeHeader.tsx
│   │       ├── CLIResume.tsx
│   │       └── ...
│   │
│   ├── pages/               # Page components
│   │   ├── PortfolioPage.tsx
│   │   └── ResumePage.tsx
│   │
│   ├── config/              # Configuration
│   │   └── portfolioData.ts  # 🎯 MAIN CONFIG FILE
│   │
│   ├── context/             # React contexts
│   │   └── ThemeContext.ts   # Theme state management
│   │
│   ├── types/               # TypeScript definitions
│   │   └── index.ts
│   │
│   ├── App.tsx              # Root component
│   └── main.tsx             # Entry point
│
├── package.json             # Dependencies
├── vite.config.ts           # Vite configuration
├── tailwind.config.js       # Tailwind configuration
└── tsconfig.json            # TypeScript configuration

🎯 Key Files to Know

File	Purpose
src/config/portfolioData.ts	MOST IMPORTANT - All your content
src/context/ThemeContext.ts	Theme logic and state
tailwind.config.js	Styling customization
vite.config.ts	Build and deployment config

---

🚀 Getting Started

Prerequisites

Before you begin, ensure you have:

• ✅ Node.js (v18 or higher) - Download here
• ✅ npm or yarn - Comes with Node.js
• ✅ Git - Download here
• ✅ A code editor (VS Code recommended)

Quick Start (5 minutes)

Step 1: Get the Code

Option A: Use as Template (Recommended)

1. Click the "Use this template" button on GitHub
2. Create your repository
3. Clone your new repo:

git clone https://github.com/YOUR-USERNAME/YOUR-REPO-NAME.git
cd YOUR-REPO-NAME

Option B: Direct Clone

git clone https://github.com/satya00089/portfolio.git my-portfolio
cd my-portfolio

Step 2: Install Dependencies

npm install

Step 3: Start Development Server

npm run dev

Step 4: Open in Browser

Navigate to: http://localhost:5173

You should see the portfolio running! 🎉

---

🎨 Customization Guide

1️⃣ Update Your Information (Required)

Open src/config/portfolioData.ts and update:

Personal Info

export const personalInfo = {
  name: "Your Name",
  title: "Your Title",
  bio: "Your bio...",
  email: "your.email@example.com",
  location: "Your Location",
  // ... more fields
};

Social Links

export const socialLinks = {
  github: "https://github.com/yourusername",
  linkedin: "https://linkedin.com/in/yourusername",
  twitter: "https://twitter.com/yourusername",
  // ... add/remove as needed
};

2️⃣ Add Your Projects

In the same file, update the projects array:

export const projects: Project[] = [
  {
    id: "1",
    title: "Your Project Name",
    description: "Short description",
    longDescription: `
# Project Title

Full description in **Markdown** format.

## Features
- Feature 1
- Feature 2
    `,
    technologies: ["React", "TypeScript", "Tailwind"],
    imageUrl: "/path/to/image.png",
    githubUrl: "https://github.com/...",
    liveUrl: "https://...",
    category: "web"
  },
  // Add more projects...
];

3️⃣ Update Your Skills

export const skills = {
  "Frontend": [
    { name: "React", level: 90 },
    { name: "TypeScript", level: 85 },
    // ...
  ],
  "Backend": [
    { name: "Node.js", level: 80 },
    // ...
  ],
  // Add more categories...
};

4️⃣ Add Experience & Education

export const experience = [
  {
    title: "Your Position",
    company: "Company Name",
    period: "2023 - Present",
    description: "What you did...",
    technologies: ["Tech1", "Tech2"]
  },
  // ...
];

export const education = [
  {
    degree: "Your Degree",
    school: "School Name",
    period: "2019 - 2023",
    description: "Details..."
  },
  // ...
];

5️⃣ Update Images

Replace images in the public/ folder:

• Add project screenshots
• Update preview images
• Use descriptive filenames

6️⃣ Customize Colors & Styling

Edit tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      colors: {
        // Add your brand colors
        primary: '#your-color',
        secondary: '#your-color',
      },
    },
  },
};

---

🎭 Theme & Styling

Theme Toggle

The theme system supports:

• 🌙 Dark mode (default)
• ☀️ Light mode
• 💾 Persistent user preference

Customizing Themes

File: src/context/ThemeContext.ts

// Modify theme logic here
export const ThemeProvider = ({ children }: { children: ReactNode }) => {
  const [theme, setTheme] = useState<'light' | 'dark'>('dark');
  // ...
};

File: src/components/ThemeProvider.tsx

Apply theme classes and transitions.

Tailwind Customization

File: tailwind.config.js

export default {
  darkMode: 'class',
  theme: {
    extend: {
      // Add custom styles
      fontFamily: {
        sans: ['Your Font', 'sans-serif'],
      },
      animation: {
        'custom': 'custom 2s ease-in-out',
      },
    },
  },
};

---

🌐 Deployment

Deploy to GitHub Pages

Step 1: Update Configuration

File: package.json

{
  "homepage": "https://YOUR-USERNAME.github.io/YOUR-REPO-NAME"
}

File: vite.config.ts

export default defineConfig({
  base: '/YOUR-REPO-NAME/',
  // ...
});

Step 2: Deploy

npm run deploy

Your site will be live at: https://YOUR-USERNAME.github.io/YOUR-REPO-NAME

Deploy to Vercel (One-Click)

1. Click:
2. Connect your GitHub account
3. Configure and deploy
4. Done! 🎉

Deploy to Netlify (One-Click)

1. Click:
2. Connect repository
3. Configure build settings:
   • Build command: npm run build
   • Publish directory: dist
4. Deploy!

Custom Domain Setup

GitHub Pages

1. Add CNAME file in public/ with your domain
2. Configure DNS with your provider

Vercel/Netlify

1. Go to domain settings in dashboard
2. Add your custom domain
3. Follow DNS configuration instructions

---

🔧 Troubleshooting

Common Issues

Changes Not Showing?

# Clear cache and restart
npm run dev
# Press Ctrl+Shift+R in browser to hard refresh

Build Errors?

# Clean install
rm -rf node_modules package-lock.json
npm install
npm run build

Routing Issues After Deploy?

Check vite.config.ts - ensure base matches your repo name:

base: '/your-repo-name/'

Images Not Loading?

• Use relative paths: /images/project.png
• Ensure images are in public/ folder
• Check file names match exactly (case-sensitive)

Performance Issues?

# Build and preview production version
npm run build
npm run preview

---

📚 Available Scripts

Command	Description
npm run dev	Start development server at localhost:5173
npm run build	Create production build in dist/ folder
npm run preview	Preview production build locally
npm run lint	Run ESLint to check code quality
npm run deploy	Deploy to GitHub Pages

---

🤝 Contributing

Contributions are welcome! Here's how:

1. Fork the repository
2. Create a feature branch: git checkout -b feature/AmazingFeature
3. Commit changes: git commit -m 'Add AmazingFeature'
4. Push to branch: git push origin feature/AmazingFeature
5. Open a Pull Request

Issues & Feature Requests

Found a bug or have an idea? Open an issue

---

📄 License

This project is open source under the MIT License.

You are free to:

• ✅ Use commercially
• ✅ Modify
• ✅ Distribute
• ✅ Use privately

---

👤 Author

Satya Subudhi

• 🐙 GitHub: @satya00089
• 📧 Email: satyasubudhi089@gmail.com
• 💼 LinkedIn: Connect with me

---

💡 Tips & Best Practices

Content Tips

• ✅ Use high-quality project screenshots
• ✅ Write clear, concise descriptions
• ✅ Keep skills up-to-date
• ✅ Add live demo links when possible

Technical Tips

• ✅ Test on multiple devices
• ✅ Optimize images before uploading
• ✅ Use semantic HTML
• ✅ Keep dependencies updated

SEO Tips

• ✅ Update meta tags in index.html
• ✅ Add descriptive titles
• ✅ Use proper heading hierarchy
• ✅ Include alt text for images

---

🎓 Learning Resources

React & TypeScript

• React Docs
• TypeScript Handbook

Tailwind CSS

• Tailwind Documentation
• Tailwind UI Components

Deployment

• GitHub Pages Guide
• Vercel Documentation
• Netlify Documentation

---

⭐ Show Your Support

If this project helped you, please consider:

• ⭐ Starring the repository
• 🐛 Reporting bugs
• 💡 Suggesting features
• 🤝 Contributing code