Personal Brand Portfolio Website

Overview

A modern, premium‑looking personal brand website built with HTML, CSS, and vanilla JavaScript. It showcases a developer’s bio, career timeline, tech‑stack, services, projects, blog, and contact form. The design follows a Neon Purple + Charcoal theme with glass‑morphism, subtle gridlines, and animated UI elements.

Key Features

• Floating Icons Hero – silver/white gradient text with animated background shapes.
• Bounce Card Services – physics‑based hover animations for service cards.
• Orbiting Circles Tech Stack – a two‑column layout: left side a timeline‑style list of technologies, right side a rotating orbit of icons.
• Career Journey Timeline – reusable timeline component used on the About page.
• Responsive Design – fully mobile‑friendly; hero buttons, icons, and layout adapt to smaller screens.
• Background Gridlines – subtle neon‑purple grid overlay for a cyber‑punk feel.
• AOS & GSAP Animations – scroll‑triggered fades and hero micro‑interactions.
• GitHub Deployment Ready – can be hosted on GitHub Pages, Vercel, or Netlify.

Tech Stack

• HTML5 – semantic markup.
• CSS3 – custom variables, glass‑morphism, gradients, and responsive utilities.
• JavaScript (ES6+) – DOM manipulation, AOS/GSAP init, modal handling, form validation.
• Font Awesome – icons for tech stack and UI.
• Google Fonts – Outfit (headings) & Inter (body).

Design System

:root {
  --bg-primary: #0F0F14;      /* Charcoal background */
  --bg-secondary: #1A1A22;    /* Dark secondary */
  --accent-primary: #B026FF;  /* Neon Purple */
  --accent-secondary: #FF2E88;/* Pink‑Magenta */
  --text-primary: #F5F5F5;    /* White */
  --text-secondary: #A0A0B0;  /* Light gray */
  --border-glow: rgba(176,38,255,0.4);
}

All headings (h1‑h6) use a white‑to‑silver gradient (linear-gradient(135deg, #ffffff 0%, #a0a5b0 100%)).

Installation & Development

# Clone the repo
git clone <repo-url>
cd Timeline_Training
# Open the site in a browser (no build step needed)
start index.html   # Windows

Edit files under assets/css/ and assets/js/ to customize styles or behavior.

Deployment

Push to the main branch; the repository already has a remote set. The site can be served directly from GitHub Pages:

1. Enable GitHub Pages in the repo settings (source: main// root).
2. The site will be available at https://<username>.github.io/<repo>/.

Contributing

Feel free to fork the repo and submit pull requests. Follow the existing code style (CSS variables, BEM‑like class naming) and run the site locally to verify changes.

License

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