A modern, fast, and responsive portfolio website built with Astro, TypeScript, and Tailwind CSS. Features a clean design inspired by tania.dev with dark/light theme support and mobile-first responsive design.

• Production: shoaib.dev (coming soon)
• Development: http://localhost:4321

• Modern Design System: Clean, professional layout with consistent spacing and typography
• Dark/Light Theme: Toggle between themes with localStorage persistence
• Responsive Design: Mobile-first approach with smooth breakpoints
• Smooth Animations: Subtle hover effects and page transitions
• Professional Typography: Inter font family with proper hierarchy

• Blog System: Write posts in MDX with frontmatter support
• Project Showcase: Featured projects with GitHub/demo links
• Content Collections: Type-safe content with Zod validation
• SEO Optimized: Meta tags, Open Graph, and sitemap generation

• Lightning Fast: Static site generation with Astro
• Type Safety: Full TypeScript support with strict mode
• Component Architecture: Reusable components with proper separation
• Search Ready: Frontend search functionality framework
• Performance Optimized: Minimal JavaScript, optimized images

• Astro - Static site generator
• TypeScript - Type safety
• Tailwind CSS - Utility-first styling

• MDX - Enhanced markdown with components
• Zod - Schema validation for content
• Content Collections - Type-safe content management

• Vite - Fast build tool and dev server
• ESLint - Code linting
• Prettier - Code formatting

shoaib-portfolio/
├── public/
│   ├── favicon.svg
│   └── og-image.jpg
├── src/
│   ├── components/
│   │   ├── layout/
│   │   │   ├── Header.astro
│   │   │   └── Sidebar.astro
│   │   └── ui/              # Future UI components
│   ├── content/
│   │   ├── blog/            # Blog posts (MDX)
│   │   ├── projects/        # Project showcases (MDX)
│   │   └── config.ts        # Content collection schemas
│   ├── layouts/
│   │   ├── Layout.astro     # Base layout
│   │   └── PortfolioLayout.astro
│   ├── pages/
│   │   ├── index.astro      # Homepage
│   │   ├── blog/            # Blog pages
│   │   └── projects/        # Project pages
│   ├── styles/              # Global styles
│   ├── types/
│   │   └── global.d.ts      # TypeScript declarations
│   └── utils/               # Utility functions
├── astro.config.mjs
├── tailwind.config.mjs
├── tsconfig.json
└── package.json

• Node.js 18+
• npm or yarn

1. Clone the repository

   git clone https://github.com/shoaibyte/shoaib-portfolio.git
   cd portfolio

2. Install dependencies

   npm install
   # or
   yarn install

3. Start development server

   npm run dev
   # or
   yarn dev

4. Open in browser

   http://localhost:4321
   

# Development
npm run dev          # Start dev server
npm run build        # Build for production
npm run preview      # Preview production build

# Code Quality
npm run lint         # Run ESLint
npm run format       # Format with Prettier
npm run type-check   # TypeScript type checking

# Astro Utilities
npm run astro        # Run Astro CLI commands
npx astro sync       # Generate content collection types

Create a new MDX file in src/content/blog/:

---
title: "Your Blog Post Title"
description: "A brief description of your post"
publishDate: 2024-08-22
tags: ["astro", "typescript", "web-development"]
featured: true
draft: false
---

# Your Blog Post

Your content here...

Create a new MDX file in src/content/projects/:

---
title: "Your Project Name"
description: "A brief description of your project"
publishDate: 2024-08-22
tags: ["react", "typescript", "tailwind"]
featured: true
status: "completed"
github: "https://github.com/yourusername/project"
demo: "https://your-project-demo.com"
---

# Project Details

Your project description and details...

Both blog posts and projects support:

• Required: title, description, publishDate
• Optional: tags[], featured, image, updatedDate
• Projects Only: github, demo, status

Update the following files with your information:

1. Sidebar (src/components/layout/Sidebar.astro)

   • Update bio and links

2. Homepage (src/pages/index.astro)

   • Update hero section content

3. Layout (src/layouts/Layout.astro)

   • Update meta tags and site info

The design system uses CSS custom properties defined in src/layouts/Layout.astro:

:root {
  --color-primary: #e879f9;      /* Primary brand color */
  --color-bg: #0f172a;           /* Background color */
  --font-sans: 'Inter', sans-serif;
  /* ... more variables */
}

Create new pages in src/pages/:

---
// src/pages/about.astro
import PortfolioLayout from '../layouts/PortfolioLayout.astro';
---

<PortfolioLayout title="About Me">
  <h1>About Me</h1>
  <!-- Your content -->
</PortfolioLayout>

1. Connect GitHub repository to Vercel
2. Auto-deploy on every push to main branch
3. Environment variables (if needed):

   PUBLIC_SITE_URL=https://yourdomain.com

1. Connect repository to Netlify
2. Build settings:
   • Build command: npm run build
   • Publish directory: dist

npm run build
# Upload the `dist` folder to your hosting provider

Recommended: WebStorm or VS Code

VS Code Extensions:

• Astro
• Tailwind CSS IntelliSense
• TypeScript and JavaScript Language Features

WebStorm:

• Built-in TypeScript support
• Astro plugin
• Tailwind CSS support

The search framework is ready in src/utils/search.ts. To implement:

1. Build search index from content collections
2. Add search component with real-time results
3. Connect to header search input

Consider adding:

• Giscus (GitHub Discussions)
• Utterances (GitHub Issues)
• Disqus (Traditional comments)

Add analytics by updating the layout:

• Google Analytics
• Umami (Privacy-focused)
• Vercel Analytics

MIT License - feel free to use this as a template for your own portfolio!

This is a personal portfolio, but feel free to:

• Report bugs via issues
• Suggest improvements
• Use as inspiration for your own portfolio

• Website: shoaib.dev
• Email: shoaib.hasan1801@gmail.com
• GitHub: @shoaib
• Twitter: @shoaib

⭐ Star this repo if you found it helpful!

Built with ❤️ using Astro