⟦ GS ⟧ // Mohamed Nasser

🛡️ Cyber Defense Architect

Pentesting • SOC • Threat Hunting • Digital Forensics • Malware Analysis

A futuristic, single-page cybersecurity portfolio with a 2090-era security-interface aesthetic.
Built with pure HTML, CSS & JavaScript — no frameworks and no build tools.

🔗 Live Demo

---

✨ Features

• 🖥️ Loading Screen — Animated boot sequence with progress bar
• 🎯 Custom Cursor — Radar/target-style cursor with hover effects on desktop
• 🌐 Particle Network — Interactive canvas particle background
• ⌨️ Typewriter Effect — Rotating cybersecurity role titles
• 📊 Animated Skill Bars — Scroll-triggered proficiency bars
• 🔢 Counter Animation — Animated statistics on scroll
• 🃏 Decrypt Effect — Glitch/cipher text effect on project-card hover
• 📱 Responsive Layout — Mobile-first design with hamburger navigation
• 🔒 CSP Hardened — No inline JavaScript; local assets and restrictive source policy
• 📬 Contact Form — Frontend-only encrypted-transmission animation followed by a mailto: handoff
• 🎨 Scan Line Overlay — CRT-style cybersecurity aesthetic
• ♿ Reduced Motion Support — Particle animation respects prefers-reduced-motion

---

📁 Project Structure

├── index.html                  # Main HTML single-page portfolio
├── style.min.css               # Production stylesheet
├── script.min.js               # Production JavaScript and animations
├── favicon.png                 # PNG favicon
├── 404.html                    # Custom GitHub Pages 404 page
├── 404.css                     # 404 page styles
├── _headers                    # Security headers for hosts that support _headers
├── README.md                   # Project documentation
├── robots.txt                  # Search-engine crawling rules
├── sitemap.xml                 # Search-engine sitemap
├── site.webmanifest            # Web app manifest
├── humans.txt                  # Project attribution
│
└── assets/
    ├── profile.png             # Profile photo
    ├── gs-logo.jpg             # Logo used by social/share metadata
    ├── contact-email.js        # Builds the contact mailto link at runtime
    └── fonts/
        ├── local-fonts.css     # Self-hosted @font-face declarations
        └── *.woff2             # Self-hosted font files

The current production build uses inline SVG icons directly in index.html; there is no Lucide JavaScript dependency.

---

🛠️ Technology Stack

Layer	Technology
Structure	HTML5 semantic markup
Styling	CSS3 — custom properties, animations, grid, flexbox
Logic	Vanilla JavaScript (ES6+)
Icons	Inline SVG — no third-party icon runtime
Fonts	Self-hosted WOFF2 fonts via assets/fonts/local-fonts.css
Deployment	Static hosting / GitHub Pages

No framework, package manager, runtime dependency, or build system is required for the deployed site.

---

🔐 Security Notes

• The page uses a restrictive Content Security Policy with local scripts, styles, fonts, and assets.
• unsafe-inline is not required by the current index.html or 404.html CSP.
• Inline SVG icons are markup, not executable JavaScript.
• The contact address is assembled by assets/contact-email.js for the visible contact link; this is an obfuscation measure, not encryption or access control.
• The contact form is client-side only and ultimately opens the visitor's local mail client using mailto:.
• _headers contains additional response-header policy for hosting platforms that support the _headers convention. GitHub Pages does not apply _headers as HTTP response headers.
• GitHub Pages provides HTTPS, but custom response headers such as HSTS, X-Frame-Options, and Permissions-Policy should be verified on the actual hosting platform.

A static website cannot be guaranteed to be completely vulnerability-free. Security should be re-tested after every significant code or hosting change.

---

🚀 Getting Started

Option 1 — Open directly

Open index.html in a modern browser.

Some browser features and local font loading work best over HTTP rather than file://.

Option 2 — Local HTTP server

# Python 3
python -m http.server 8080

# Node.js
npx -y http-server . -p 8080

Then visit http://localhost:8080.

---

🌍 Deployment

This is a fully static website and can be deployed to any suitable static host.

Provider	Notes
GitHub Pages	Push to main and enable Pages from repository settings
Netlify	Connect the repository or deploy the static directory
Vercel	Import the repository as a static project
Cloudflare Pages	Connect the repository with no build command
Firebase Hosting	Initialize Hosting and deploy the static files

Production checklist

1. Confirm the final canonical URL in index.html.
2. Confirm robots.txt points to the production sitemap.
3. Confirm sitemap.xml contains the production URL.
4. Verify the favicon and profile image load on mobile and desktop.
5. Verify the actual HTTP response headers supplied by the hosting provider.
6. Run a fresh security-header and performance audit after deployment.

---

📬 Contact Form

The contact form is a frontend-only UI. It validates the required fields in the browser, displays a transmission animation, and then creates a mailto: URL for the visitor's email client.

It does not send or store messages on a server.

For a production backend form, use a trusted form-processing service or your own server-side endpoint with appropriate validation, rate limiting, CSRF protection where applicable, and abuse controls.

---

📄 License

© 2026 Mohamed Nasser (GS) — All rights reserved.

---

_{Built with ☕ and 🖥️ by GS}