DEV Community

Ishraq Haider Chowdhury
Ishraq Haider Chowdhury

Posted on

Customize and deploy a developer portfolio template on GitHub Pages

🚀 Developer Portfolio Website

A modern, responsive developer portfolio website built with React, TypeScript, and TailwindCSS. Features a beautiful purple-black-white color scheme and smooth animations.

Portfolio Preview

✨ Features

  • 🎨 Modern Design: Beautiful purple-black-white theme with gradients and animations
  • 📱 Fully Responsive: Works perfectly on all devices and screen sizes
  • ⚡ Fast Performance: Built with Vite for lightning-fast development and builds
  • 🔧 TypeScript: Fully typed for better development experience
  • 🎯 Smooth Scrolling: Elegant navigation between sections
  • 📧 Contact Form: Interactive contact form with validation
  • 🌙 Dark Theme: Professional dark color scheme

📁 Project Structure 

src/
├── components/          # React components
│   ├── Header.tsx      # Navigation header
│   ├── Hero.tsx        # Hero section
│   ├── About.tsx       # About section
│   ├── Skills.tsx      # Skills showcase
│   ├── Projects.tsx    # Projects gallery
│   ├── Contact.tsx     # Contact form
│   └── Footer.tsx      # Footer
├── data/
│   └── projects.ts     # Project data and skills
├── assets/             # Images and static files
├── ui/                 # Reusable UI components
└── App.tsx            # Main application
Enter fullscreen mode Exit fullscreen mode

🚀 Getting Started

1. Create GitHub repo and push the code

  1. Get the template
    Get the developer portfolio template from this link.

  2. Create a new repository in your GitHub account and name it "developer-portfolio"

  3. Copy this command

   git remote add origin https://github.com/YOUR_USERNAME/developer-portfolio.git
Enter fullscreen mode Exit fullscreen mode
  1. Open a terminal or command prompt inside the project root directory in your local machine: 
   git init
   git remote add origin https://github.com/YOUR_USERNAME/developer-portfolio.git
   git add .
   git commit -m "initial commit"
   git push origin main
Enter fullscreen mode Exit fullscreen mode

2. Install & Run Locally 

# Install dependencies
npm install

# Start development server
npm run dev
Enter fullscreen mode Exit fullscreen mode

The site will be available at http://localhost:5173

3. Build for Production 

# Build the project
npm run build

# Preview the build
npm run preview
Enter fullscreen mode Exit fullscreen mode

🎨 Customization Guide

Update Your Information

1. Personal Details

Edit the following components with your information:

Hero Section (src/components/Hero.tsx):

// Update name, title, and description
<h1>Your Name Here</h1>
<p>Your Title/Role</p>
Enter fullscreen mode Exit fullscreen mode

About Section (src/components/About.tsx):

// Replace with your story
<p>Your personal story and experience...</p>
Enter fullscreen mode Exit fullscreen mode

2. Projects

Update your projects in src/data/projects.ts:

export const projects: Project[] = [
  {
    id: '1',
    title: 'Your Project Name',
    description: 'Project description...',
    technologies: ['React', 'TypeScript', 'etc'],
    image: 'project-image-url',
    githubUrl: 'https://github.com/yourusername/project',
    liveUrl: 'https://your-project.com',
    featured: true
  },
  // Add more projects...
];
Enter fullscreen mode Exit fullscreen mode

3. Skills

Update your skills in the same file:

export const skills = [
  'JavaScript',
  'TypeScript',
  'React',
  // Add your skills...
];
Enter fullscreen mode Exit fullscreen mode

4. Contact Information

Update contact details in:

  • src/components/Header.tsx (social links)
  • src/components/Hero.tsx (social links)
  • src/components/Contact.tsx (contact info)
  • src/components/Footer.tsx (contact info)

Replace all instances of:

  • your.email@example.com → Your email
  • https://github.com/yourusername → Your GitHub
  • https://linkedin.com/in/yourusername → Your LinkedIn

Customize Design

Colors

The color system is defined in src/index.css. Update the CSS custom properties:

:root {
  --primary: 262 83% 58%;     /* Purple */
  --background: 0 0% 100%;    /* White */
  --foreground: 220 13% 18%;  /* Dark text */
  /* Modify other colors as needed */
}
Enter fullscreen mode Exit fullscreen mode

Fonts

Fonts are configured in tailwind.config.ts and loaded in index.html:

fontFamily: {
  'sans': ['Inter', 'system-ui', 'sans-serif'],
  'mono': ['JetBrains Mono', 'monospace']
}
Enter fullscreen mode Exit fullscreen mode

🚀 Deploy to GitHub Pages

GitHub Actions Deployment

  1. Create the workflow file if you don't have the file .github/workflows/deploy.yml: 
name: Deploy to GitHub Pages

on:
  push:
    branches: [ main ]

jobs:
  deploy:
    runs-on: ubuntu-latest
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    permissions:
      contents: read
      pages: write
      id-token: write

    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '18'
          cache: 'npm'

      - name: Install dependencies
        run: npm ci

      - name: Build
        run: npm run build

      - name: Setup Pages
        uses: actions/configure-pages@v4

      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: './dist'  # Verify this matches your build output

      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4
Enter fullscreen mode Exit fullscreen mode

  1. Configure repository settings:

    • Go to Settings → Pages → Source: GitHub Actions
    • Go to Settings → Environments → github-pages
    • Under Deployment branches and tags: Select "Selected branches and tags"
    • Click "Add deployment branch or tag rule" → Enter main → Add rule

  2. Update or check base path in vite.config.ts to match your repository name:

   export default defineConfig({
     base: '/developer-portfolio/',
     // ... other config
   });
Enter fullscreen mode Exit fullscreen mode
  1. Deploy: 
   git add .
   git commit -m "Add deployment workflow"
   git push origin main
Enter fullscreen mode Exit fullscreen mode

Your site will be available at: https://YOURUSERNAME.github.io/developer-portfolio/

🤖 AI Customization Tips

Use these AI prompts to quickly customize your content:

Content Generation 

"Write a professional 3-line 'About Me' for a front-end developer who loves minimal design, React, and has 5 years of experience."

"Generate 5 project descriptions for a full-stack developer's portfolio. Include: e-commerce site, task manager, weather app, blog platform, and chat application."

"Create a skills list for a modern web developer including frontend, backend, and tools."
Enter fullscreen mode Exit fullscreen mode

Design Adjustments 

"Modify the CSS custom properties to use a blue-gray color scheme instead of purple."

"Add a new project card hover effect that includes a subtle scale animation."
Enter fullscreen mode Exit fullscreen mode

🛠️ Tech Stack

  • Framework: React 18 with TypeScript
  • Build Tool: Vite
  • Styling: TailwindCSS
  • UI Components: Radix UI + shadcn/ui
  • Icons: Lucide React
  • Deployment: GitHub Pages

Top comments (0)