Senior WordPress Developer & Architect Portfolio

A premium, highly interactive single-page portfolio and resume website built with a modern "Warm Editorial" color palette. The site is optimized for speed, local SEO, mobile responsiveness, and recruiter readability.

🎨 Visual Identity & Theme

This portfolio employs a bespoke Warm Editorial design system:

• Cream Background: #FAF6EE / #F4EFE6 (high readability, low strain)
• Terracotta Accent: #C2410C (brand identity, borders, tags)
• Forest Green: #166534 (success metrics, availability indicator, subtle highlights)
• Obsidian Typography: #1C1917 (deep dark typography meeting AAA contrast compliance)

✨ Core Features

• Typographic Hero & Name Hover Effects: A bold typographical presentation of name and title featuring custom CSS scale transitions.
• Mac-Style JSON Config Card: An interactive mockup terminal card showcasing developer profile configurations in formatted JSON (profile_config.json).
• Recruiter Availability Badge: An animated outline pulsing badge designed to catch the eye of potential recruiters instantly.
• Dynamic Clock Widget: A real-time local time clock widget mapped directly to the Mumbai, India timezone (Asia/Kolkata).
• Interactive About Section: An asymmetrical cards grid detailing core competencies:
  1. Custom Core & Gutenberg block editor
  2. WooCommerce & E-commerce
  3. Performance & Accessibility (a11y)
• Editorial Experience Grid: A modern grid-based timeline mapping 6 professional positions with categorized skill tags.
• Qualifications & Achievements: Elegant two-column presentation of educational degrees and professional certifications.
• Technical Arsenal Badges: Clear list of technical skill tags, including grayscale-to-color transition logos for major platforms (WordPress, Shopify, PHP, JavaScript, React, Git).
• Projects Bento Box: A clean grid highlighting client websites with conversion-focused descriptions.
• Enhanced Navigation: Sticky header with responsive drop-down mobile menu that auto-closes upon navigation selection.

🛠️ Built With

• Markup: Semantic HTML5 tags for optimal search engine indexing and screen-reader accessibility (a11y).
• Styling: Tailwind CSS via CDN with custom extending variables.
• Icons: FontAwesome icons.
• Typography: Google Fonts (Outfit for headings, Inter for body text).

🚀 How to Run Locally

Simply open the index.html file in any modern web browser:

open index.html

🌐 Deploy to GitHub Pages

Since the site is static, it can be deployed to GitHub Pages in seconds:

1. Push this repository to your GitHub account.
2. In the repository settings, go to Pages in the sidebar.
3. Under Branch, select main and click Save.
4. Your site will be live at https://<your-username>.github.io/<repo-name>/.

---

© Copyright Ashraf Khan. All rights reserved.