ajmalbuv.github.io

Personal Portfolio & Design System of Ajmal Basheer

🌐 View Production Site • 📄 Projects • 📬 Contact

---

⚡ Overview

A high-performance, accessible, and hardened personal portfolio engineered with a Zero Client JS Default philosophy. Powered by Astro 7, Tailwind CSS 4, and TypeScript, the site achieves near-instant load times while enforcing production-grade Content Security Policies.

Key Engineering Highlights

• Zero Client JS Default: Content is server-rendered as static HTML via Astro's Island architecture. Client JavaScript is strictly isolated to deferred interactive elements (tsParticles canvas).
• Automated SHA-256 CSP Pipeline: A custom Astro build hook (inline-csp in astro.config.mjs) scans generated HTML, hashes all inline <style> and <script> tags, and injects SHA-256 hashes into the Cloudflare _headers file—eliminating unsafe-inline entirely.
• Strict Hardened Security: Preconfigured with HSTS (31536000 with preload), X-Frame-Options: DENY, Permissions-Policy, COOP: same-origin, COEP: require-corp, and CORP: same-origin.
• Type-Safe Content Store: All portfolio data, projects, and personal timeline records reside in src/data/site.ts typed with strict immutable TypeScript interfaces.
• Accessibility & Motion Compliance: Features keyboard skip-to-content links, focus-visible outlines, ARIA attributes, native HTML5 Popover API for zero-JS mobile navigation, and @media (prefers-reduced-motion) guards.
• Modern Typography: Self-hosted variable font pairing using @fontsource-variable/geist and @fontsource-variable/geist-mono with preloading for core Latin glyph subsets.

---

📁 Repository Structure

ajmalbuv.github.io/
├── public/
│   ├── favicon.ico          # Multi-resolution favicon
│   ├── favicon.svg          # Vector favicon
│   └── apple-touch-icon-*   # Apple mobile touch icons
├── scripts/
│   └── clean.mjs            # Project cleanup script
├── src/
│   ├── assets/              # Local images (covers, screenshots, avatars)
│   ├── components/          # Semantic Astro components
│   │   ├── About.astro      # Experience & education timeline
│   │   ├── ConsoleSignature.astro # Devtools Easter egg
│   │   ├── Contact.astro    # Contact card & direct channels
│   │   ├── Footer.astro     # Footer & social links
│   │   ├── Head.astro       # SEO metadata, Open Graph, & JSON-LD schema
│   │   ├── Header.astro     # Responsive header with Popover mobile nav
│   │   ├── Hero.astro       # Hero section with lazy tsParticles integration
│   │   ├── Projects.astro   # projects showcase
│   │   └── Skills.astro     # Technical competencies matrix
│   ├── data/
│   │   └── site.ts          # Central source of truth for site content
│   ├── layouts/
│   │   └── Base.astro       # Root HTML document shell
│   ├── pages/
│   │   ├── 404.astro        # Custom 404 error page
│   │   ├── index.astro      # Single-page portfolio root
│   │   └── projects/
│   │       └── [slug].astro # Dynamic projects route
│   ├── styles/
│   │   └── global.css       # Tailwind CSS v4 entry & scroll animations
│   └── types/
│       └── index.ts         # TypeScript data contracts & models
├── astro.config.mjs         # Astro, Vite, Rollup, & CSP build integration
├── eslint.config.mjs        # Flat ESLint configuration
├── knip.json                # Dead code & unused dependency detector
├── package.json             # Scripts & dependency definitions
├── tsconfig.json            # Strictest TypeScript configuration
└── LICENSE                  # MIT License

---

🚀 Getting Started

Prerequisites

This project is built and managed using Bun.

• Bun: >= 1.1.0 (or Node.js >= 20.0.0)

Installation

Clone the repository and install dependencies:

git clone https://github.com/ajmalbuv/ajmalbuv.github.io.git
cd ajmalbuv.github.io
bun install

Development

Start the local Astro development server:

bun dev

Visit http://localhost:4321 in your browser.

Verification & Quality Checks

Run type-checking, linting, and formatting checks:

# Type check Astro & TypeScript, run ESLint
bun run check

# Lint files with ESLint
bun run lint

# Auto-fix linting issues
bun run lint:fix

# Verify formatting with Bun
bun run format:check

# Auto-format all code
bun run format

Production Build

Create an optimized production build:

bun run build

Preview the production build locally:

bun run preview

---

🛠️ Tech Stack & Tooling

Layer	Technologies
Framework	Astro v7 (Static Site Generation / Islands)
Styling	Tailwind CSS v4 (@tailwindcss/vite)
Language	TypeScript (strictest profile)
Icons	astro-icon (@iconify-json/mdi)
Interactive Canvas	tsParticles Slim (Lazy loaded via requestIdleCallback)
Typography	Geist Variable & Geist Mono
Quality & Linting	ESLint v9+, Bun formatter, Knip

---

📄 License & Content Rights

• Source Code: Licensed under the MIT License. You are free to adapt the architecture, layout components, and build configuration for your own personal projects.
• Personal Content & Branding: All personal imagery, screenshots, project copy, and biography are proprietary and copyrighted by Ajmal Basheer (All Rights Reserved). Please replace them with your own information before deploying your fork.