Srishilesh P S

Srishilesh’s Personal Portfolio

A modern, responsive personal portfolio website built with Next.js 14, TypeScript, Tailwind CSS, and Framer Motion. Features a clean design with smooth animations, blog support, and project showcases.

✨ Features

🚀 Quick Start

Prerequisites

Installation

  1. Clone the repository: 
    git clone https://github.com/srishilesh/srishilesh.github.io.git
cd srishilesh.github.io
  2. Install dependencies: 
    npm install
# or
yarn install
# or
pnpm install
  3. Set up environment variables: 
    cp .env.example .env.local
# Edit .env.local with your values
  4. Start the development server: 
    npm run dev
# or
yarn dev
# or
pnpm dev
  5. Open your browser: Navigate to http://localhost:3000

📁 Project Structure

├── app/                    # Next.js 14 app directory
│   ├── globals.css        # Global styles
│   ├── layout.tsx         # Root layout
│   ├── page.tsx           # Home page
│   ├── projects/          # Projects pages
│   └── writing/           # Blog pages
├── components/            # React components
│   ├── layout/           # Layout components
│   ├── sections/         # Page sections
│   └── ui/               # UI components
├── data/                 # Static data
├── types/                # TypeScript types
└── public/               # Static assets

🎨 Design System

Colors

Typography

Components

🔧 Customization

Adding Projects

Edit data/projects.ts to add new projects:

{
  slug: 'project-slug',
  title: 'Project Title',
  description: 'Project description',
  image: '/projects/project-image.jpg',
  tech: ['Next.js', 'TypeScript', 'Tailwind CSS'],
  github: 'https://github.com/username/repo',
  demo: 'https://demo-url.com',
  featured: true,
  date: '2024-01-01',
}

Adding Blog Posts

Edit data/blog.ts to add new blog posts:

{
  slug: 'post-slug',
  title: 'Post Title',
  excerpt: 'Post excerpt',
  content: 'Full post content',
  date: '2024-01-01',
  readTime: 5,
  tags: ['Tag1', 'Tag2'],
  featured: true
}

Customizing Styles

Edit tailwind.config.js to customize colors, fonts, and other design tokens.

🚀 Deployment

This portfolio is configured for multiple deployment platforms. Choose the one that best fits your needs:

Automatic Deployment (Recommended):

  1. Push your code to the main branch
  2. GitHub Actions will automatically build and deploy your site
  3. Your site will be available at https://yourusername.github.io

Manual Deployment:

# Build the project for GitHub Pages
npm run build:github

# The static files will be in the 'out' directory
# Upload the contents of 'out' to your GitHub Pages repository

Custom Domain Setup:

  1. Add your domain to the CNAME file in the root directory
  2. Configure DNS settings with your domain provider
  3. Enable custom domain in GitHub Pages settings

Automatic Deployment:

  1. Connect your GitHub repository to Vercel
  2. Import your project
  3. Vercel will automatically detect Next.js and deploy
  4. Your site will be live with automatic deployments on every push

Manual Deployment:

# Install Vercel CLI
npm i -g vercel

# Deploy (Vercel will use standard Next.js build)
vercel --prod

Netlify

Automatic Deployment:

  1. Connect your repository to Netlify
  2. Set build command: npm run build:github
  3. Set publish directory: out
  4. Deploy automatically on every push

Manual Deployment:

# Build the project for static hosting
npm run build:github

# Install Netlify CLI
npm install -g netlify-cli

# Deploy
netlify deploy --prod --dir=out

Other Static Hosting Providers

The project can generate static files for other hosting services:

  1. Build the project for static hosting: 
    npm run build:github
  2. Deploy the out directory to your hosting provider:
    • AWS S3 + CloudFront
    • Google Cloud Storage
    • Azure Static Web Apps
    • Surge.sh
    • Firebase Hosting

Note: For Vercel deployment, use the standard npm run build command or let Vercel handle the build automatically.

🔧 Configuration

Environment Variables

Create a .env.local file based on .env.example:

# Required
NEXT_PUBLIC_SITE_URL=https://yourdomain.com
NEXT_PUBLIC_SITE_NAME="Your Name"
NEXT_PUBLIC_EMAIL=your@email.com

# Optional
NEXT_PUBLIC_GA_ID=G-XXXXXXXXXX
NEXT_PUBLIC_GITHUB_URL=https://github.com/yourusername
NEXT_PUBLIC_LINKEDIN_URL=https://linkedin.com/in/yourusername

Custom Domain

  1. Update CNAME file with your domain
  2. Configure DNS with your domain provider: 
    Type: CNAME
Name: www (or @)
Value: yourusername.github.io
  3. Enable HTTPS in your hosting provider settings

Pre-Deployment Checklist

Quick Deploy Script

Use the included deployment script for easy setup:

# Make executable (first time only)
chmod +x deploy.sh

# Run deployment preparation
./deploy.sh

📱 Mobile Responsiveness

The portfolio is fully responsive and optimized for:

⚡ Performance & SEO

🛠️ Technologies Used

🔧 Development Scripts

# Development
npm run dev          # Start development server
npm run build        # Build for production
npm run start        # Start production server
npm run lint         # Run ESLint
npm run lint:fix     # Fix ESLint errors
npm run type-check   # Run TypeScript type checking
npm run clean        # Clean build artifacts

🐛 Troubleshooting

Common Issues

Build Errors:

# Clear cache and reinstall
npm run clean
rm -rf node_modules package-lock.json
npm install

Image Loading Issues:

Deployment Issues:

Styling Issues:

Getting Help

  1. Check the Issues page
  2. Review Next.js Documentation
  3. Check Tailwind CSS Documentation

📱 Browser Support

🛠️ Technologies Used

📄 License

This project is open source and available under the MIT License.

🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to check the issues page.

📧 Contact

Made with ❤️ by Srishilesh