Add GitHub Pages portfolio site for Abdul Hafeez Mohamed Abu-Grara

[Copilot]

Bootstraps a static single-page portfolio from an empty repo, ready for GitHub Pages deployment. No build step — pure HTML/CSS/JS.

Structure

• index.html — 8 sections: Hero, About, Skills, Experience, Projects, Certifications, Contact, Footer
• style.css — CSS custom properties for dark/light theming, Grid/Flexbox layout, IntersectionObserver-based scroll-reveal, responsive breakpoints down to 480px
• script.js — theme toggle (persisted via localStorage), mobile hamburger, typed-text hero effect, active nav highlighting on scroll

Notable details

• Dark theme default; light theme swaps all colour tokens via [data-theme="light"] overrides including --badge-border to avoid hardcoded rgba values that wouldn't adapt
• Smooth scroll polyfill wraps querySelector in try/catch to guard against invalid href selectors
• cv/Abdul_Hafeez_CV.pdf path is wired up but the file itself must be added manually; README documents this

Screenshot

Original prompt

Create a modern responsive personal portfolio website for a System Engineer named Abdul Hafeez Mohamed Abu-Grara.

The website will be hosted on GitHub Pages, so it should be built using only HTML, CSS, and a small amount of JavaScript (no backend).

Design requirements:

• Clean professional layout
• Dark and light mode toggle
• Mobile responsive
• Smooth scrolling navigation
• Simple animations for sections
• Icons for skills and contact links

Website sections:

1. Hero Section

• Name: Abdul Hafeez Mohamed Abu-Grara
• Title: System Engineer | Linux Administrator | Telecom & RF Optimization Engineer
• Short intro: Experienced in Linux Administration, Oracle Database, RF Optimization, and system automation.
• Buttons: "Download CV" and "Contact Me"

2. About Me

• Background in Communication Engineering
• Experience with Linux systems, Oracle DB, RF drive testing, and infrastructure troubleshooting
• Passion for automation, security, and reliable IT systems

3. Skills Section
   Group skills into categories:

Telecom & RF

• Drive Testing
• RF Optimization
• Post Processing
• 2G / 3G / 4G / 5G troubleshooting

System Administration

• Oracle Linux
• Shell scripting
• Docker
• Security hardening

Tools & Technologies

• TEMS Investigation
• TEMS Discovery
• QGIS
• MapInfo
• Power BI
• Python (NumPy, Pandas, Matplotlib)

4. Experience

• System Administrator – Al Daleel Raqmee for IT & GIS
• RF Drive Test & Optimization Engineer – ZTE / Huawei / Ericsson projects

5. Projects

• RF Network Optimization
• Linux Infrastructure Automation
• System Hardening and Security Implementation

6. Certifications

• RF Basics (2G–5G)
• Drive Testing
• RF Optimization
• Microwave Transmission
• Radio Planning
• 4G CSFB Architecture

7. Contact Section
   Include icons and links for:

• Email
• LinkedIn
• GitHub

8. Footer

• Copyright
• Social links

Technical requirements:

• Use a modern CSS layout (Flexbox or Grid)
• Use Google Fonts
• Include simple scroll animations
• Make the design similar to a professional developer portfolio
• Put all code in one GitHub Pages friendly project (index.html, style.css, script.js)

Generate the full code structure.

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.