PortfolioWebsite README

The project's README from github.com/AhmadHassan-BTed/PortfolioWebsite. As one markdown file: README.md.

B-Ted Logo

Ahmad Hassan | B-Ted Portfolio

Designing with Pixels, Coding with Precision

Vite Status Stack

A sophisticated, high-performance portfolio repository engineered by Ahmad Hassan (B-Ted). This project bridges the gap between complex software engineering and high-fidelity UI/UX design.

Live Demo • Contact Me • My Story


Architecture Overview

The repository is structured with a focus on strict modularity and high cohesion. By separating the build-time logic from the runtime assets, the system ensures near-instantaneous load times and maintainable code boundaries.

System Design

graph TD
    User([User Browser]) --> Build[Vite Pipeline]
    Build --> UI[Static Assets / HTML]
    UI --> Styles[src/styles]
    UI --> Logic[src/scripts]
    Logic --> Assets[public/assets]
    
    subgraph "Internal Core"
        Styles --> CSS[Global & Component CSS]
        Logic --> JS[Modular ES6 Logic]
    end
    
    subgraph "Asset Management"
        Assets --> Images[Optimized Imagery]
        Assets --> PDF[Digital Assets]
    end

System Workflow

The project utilizes a modern development lifecycle, transitioning from raw source files to an optimized production container.

sequenceDiagram
    participant Dev as Local Developer
    participant Vite as Vite Dev Server
    participant Build as Build Pipeline
    participant Docker as Production Container
    
    Dev->>Vite: npm run dev
    Vite-->>Dev: Hot Module Replacement (HMR)
    Dev->>Build: npm run build
    Build->>Build: Minification & Tree-shaking
    Build->>Docker: Package static files
    Docker-->>User: Serve via Nginx

Repository Structure

A carefully organized hierarchy designed for scalability and clear separation of concerns.

.
├── src/
│   ├── scripts/          # Modularized JavaScript logic
│   ├── styles/           # Component-specific and Global CSS
│   └── config/           # Environment-based configuration
├── public/
│   └── assets/           # High-resolution media and artifacts
│       └── hd/           # Raw high-fidelity source assets
├── Dockerfile            # Containerization strategy
├── package.json          # Project orchestration & dependencies
├── vite.config.js        # Build-time optimization configuration
└── index.html            # Main entry point

Technical Features

High-Fidelity UI/UX Polished aesthetics with fluid transitions and pixel-perfect layouts, meticulously crafted to reflect Ahmad's design philosophy.
Optimized Build Pipeline Leveraging Vite for tree-shaking, automated bundling, and high-performance asset serving.
Containerization Full Docker support for consistent deployment across any environment, served through a lightweight Nginx image.

Development Workflow

The project is maintained with a focus on ease of onboarding and technical trustworthiness.

Prerequisites

Local Setup

Command Description
npm install Synchronize all project dependencies.
npm run dev Initialize the reactive development server.
npm run build Generate the optimized production bundle.

Deployment Pipeline

Data flows from the local development environment through an automated build cycle to the final production container.

graph LR
    A[Code] --> B(Build Pipeline)
    B --> C{Optimization}
    C -->|Bundled| D[Static Distribution]
    C -->|Images| E[Asset Storage]
    D --> F[Nginx Container]
    E --> F
    F --> G((Production Site))

Credits

This entire ecosystem, from the low-level architecture to the high-level design systems, was engineered and curated solely by Ahmad Hassan (B-Ted).

New collaborators or interested parties are welcomed to explore the codebase and learn more about the technical decisions behind the build.

Designing with Pixels, Coding with Precision.
© 2026 Ahmad Hassan (B-Ted)

PortfolioWebsite (AhmadHassan-BTed/PortfolioWebsite)

Searching Database…

741 ·GitHub
PortfolioWebsite
What is this?This is Ahmad Hassan's (B-Ted) personal portfolio website, showcasing his work in software engineering and graphic design along with his projects, story, and resume.
Is this a full web app or just a static site?It's a simple multi-page static site built with HTML, CSS, and basic JavaScript, bundled through Vite for optimized production builds.
How do I run this locally?Clone the repo, run 'npm install' to grab dependencies, then 'npm run dev' to start the dev server or 'npm run build' to generate the production bundle.
Do I need Node.js or Docker to run this?You need Node.js v18.0 or higher; Docker is optional and only needed for containerized testing or deployment via the included Nginx image.
Why does a static portfolio site include a Dockerfile?To guarantee consistent deployment across environments; the production build is served through a lightweight Nginx image inside a Docker container.
What will I find on the site itself?It shares Ahmad's projects, his personal story, and his resume, with a focus on polished high-fidelity UI/UX.
What are similar projects?simplefolio, impress.js, html5-boilerplate, nodeppt, beautiful-jekyll, materialize, academicpages.github.io, html-css
Which topics is it in?personal-website, portfolio-website, css3, static-site, nginx, software-engineering, html5, vite, css, html, web-app, web-development
Creator
AhmadHassan-BTed
Size
39.7 MB
Stars
741
Updated
CommitJun 30
Age
3y
Commits · 90 Days