Muhammad Iqbal Ali - Portfolio Website

A modern, responsive portfolio website built with Next.js and shadcn/ui components, showcasing backend engineering expertise and projects.

🚀 Live Demo

Visit the live portfolio: https://iqbal167.github.io/

✨ Features

• Modern Design: Clean, professional UI with consistent design system
• Mobile-First: Fully responsive design optimized for all devices
• Dark Mode: Seamless theme switching with system preference detection
• Performance: Static site generation with optimized loading
• Accessibility: WCAG compliant with proper semantic HTML
• SEO Optimized: Meta tags and structured data for better search visibility

🛠️ Tech Stack

• Framework: Next.js 15 with App Router
• Styling: Tailwind CSS + shadcn/ui components
• Theme: next-themes for dark/light mode
• Deployment: GitHub Pages with automated CI/CD
• Icons: Lucide React
• Typography: Geist font family

📱 Sections

• Hero: Introduction with professional photo and bio
• Tech Stack: Backend technologies and tools expertise
• Portfolio: Featured projects (Sapawarga, Hotline Jawa Barat, Executive Jabar AI)
• Contact: Social links and resume download

🚀 Getting Started

Prerequisites

• Node.js 18+
• npm/yarn/pnpm

Installation

# Clone the repository
git clone https://github.com/iqbal167/iqbal167.github.io.git
cd iqbal167.github.io

# Install dependencies
npm install

# Run development server
npm run dev

Open http://localhost:3000 to view the site.

📦 Available Scripts

# Development
npm run dev          # Start development server
npm run build        # Build for production
npm run start        # Start production server

# Deployment
npm run deploy       # Deploy to GitHub Pages
npm run predeploy    # Pre-deployment build

# shadcn/ui Components
npm run shadcn:basic # Install basic components
npm run shadcn:forms # Install form components
npm run shadcn:all   # Install all components

🎨 Design System

The portfolio uses a consistent design system with:

• Colors: Semantic color tokens for light/dark themes
• Typography: Responsive text scales with proper hierarchy
• Spacing: Consistent padding and margins using Tailwind scale
• Components: Reusable shadcn/ui components with custom styling
• Animations: Subtle transitions and hover effects

📁 Project Structure

src/
├── app/
│   ├── layout.tsx          # Root layout with theme provider
│   ├── page.tsx            # Main portfolio page
│   └── globals.css         # Global styles
├── components/
│   ├── ui/                 # shadcn/ui components
│   ├── mode-toggle.tsx     # Theme switcher
│   └── theme-provider.tsx  # Theme context provider
├── lib/
│   └── utils.ts            # Utility functions
└── public/
    └── assets/             # Images and resume

🚀 Deployment

The site is automatically deployed to GitHub Pages using GitHub Actions:

1. Push to main triggers the deployment workflow
2. Build process generates static files in /out directory
3. gh-pages deploys to GitHub Pages
4. Live site updates at https://iqbal167.github.io/

Manual Deployment

npm run deploy

🔧 Configuration

Next.js Config

• Static Export: output: 'export' for GitHub Pages
• Base Path: Conditional basePath for proper routing
• Trailing Slash: trailingSlash: true for static hosting

Theme Configuration

• Default Theme: System preference detection
• Storage: localStorage persistence
• Hydration: Proper SSR/CSR handling to prevent mismatches

📄 License

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

👤 Author

Muhammad Iqbal Ali

• Backend Engineer specializing in Golang and cloud-native systems
• GitHub: @iqbal167
• LinkedIn: Muhammad Iqbal Ali

---

Built with ❤️ using Next.js and shadcn/ui