🛠️ Backend Control Room — Ehtasham Yasin Portfolio

Welcome to the Backend Control Room! This is the developer portfolio website for Ehtasham Yasin, a Full-Stack / Backend / Automation Engineer based in Innsbruck, Austria.

Rather than a generic developer template, this portfolio is built to resemble an Engineering Mission Dashboard or Server Control Terminal, emphasizing systems design, containerization, and automation.

---

⚡ Live Station Features

• 📺 Interactive Terminal Simulator (TerminalCard.tsx): A custom-designed, retro-futuristic console that loops typing commands (npm run build, docker compose up, pytest -q), displays file transform outputs, executes container starting checks, and shows successful CI/CD deploys.
• 📊 Telemetry Metrics (SystemMetrics.tsx): Live dashboard counters that animate figures (APIs Designed, Dockerized Apps, Workflow Automations, etc.) with rolling number counts on viewport entry.
• 🌀 System Design Pipeline Flow (ArchitectureFlow.tsx): An interactive, glowing systems flowchart representing User Request → API Gateway → Backend Service → Database → Logs → Monitoring → Deployment.
• 🪵 Git Commit Audit Trail (ActivityTimeline.tsx): A vertical timeline designed as a command-line log (git log --oneline) tracing recent backend, devops, testing, and open-source contributions.
• ✉️ Interactive SMTP Console (App.tsx): A command-line client simulator where users can type their details to send a mock SMTP ping that outputs validation streams.
• 🌌 Cyber Aesthetics: Backlit glassmorphism panels, mouse-tracking cursor glow (radial-gradient), grid coordinate backgrounds, subtle noise texture overlays, custom cyber scrollbars, and retro scanline animations.

---

🛠️ Technology Stack

• Framework: React 19 + Vite 8
• Language: TypeScript
• Styling: Tailwind CSS v4 (using native @tailwindcss/vite configuration)
• Animations: Framer Motion
• Icons: Lucide React
• Linting: Oxlint (for blazing-fast static checks)

---

📂 Codebase Directory Structure

portfolio/
├── dist/                     # Production build artifacts
├── public/                   # Static assets
└── src/
    ├── assets/               # Image/SVG asset files
    ├── components/
    │   ├── ActivityTimeline.tsx  # Git-log styled experience timeline
    │   ├── ArchitectureFlow.tsx  # Dynamic SVG system design flowchart
    │   ├── ControlPanel.tsx      # Reusable glassmorphism panel card
    │   ├── ProjectGrid.tsx       # Bento grid showcasing projects
    │   ├── SystemMetrics.tsx     # Counter stat telemetry widgets
    │   └── TerminalCard.tsx      # Live console typing simulator
    ├── App.css               # Clean styling helper (empty)
    ├── App.tsx               # Main layout page structure and contact client
    ├── index.css             # Tailwind v4 directives, custom themes, grid styles
    └── main.tsx              # Application mount file

---

⚙️ Local Station Execution

Ensure you have Node.js installed on your host server.

1. Link Dependencies

Run the command below to install all project packages:

npm install

2. Boot Local Development Server

Start the Vite local development instance with Hot Module Replacement (HMR):

npm run dev

Open http://localhost:5173 in your web browser to audit the dashboard.

3. Verify Code Quality & Linting

Run oxlint static analysis checks:

npm run lint

4. Compile Production Build

To build the compiled, optimized static client assets:

npm run build

The output assets will be exported to the /dist directory.

5. Preview Production Build Locally

Verify the production build assets locally:

npm run preview

---

🛰️ Geolocation Station Coordinates

• Host Location: Innsbruck, Austria
• Station Coordinates: 47.2602° N, 11.4012° E
• Contact: ehtasham.yasin.dev@gmail.com
• GitHub: github.com/ehtashamyasin
• LinkedIn: linkedin.com/in/ehtashamyasin