Skip to content

Instantly share code, notes, and snippets.

@DevWael

DevWael/index.html

Created May 11, 2026 19:47
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save DevWael/443d7bc946678def0bc01c2d3fa0aada to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save DevWael/443d7bc946678def0bc01c2d3fa0aada to your computer and use it in GitHub Desktop.
Download ZIP
LinkedIn-Style Profile Page
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ahmad Wael | LinkedIn-Style Profile</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif; background: #f4f2ee; color: #191919; line-height: 1.5; }
.container { max-width: 820px; margin: 24px auto; padding: 0 16px; }
/* Banner & Avatar */
.profile-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px #e0dfdc, 0 2px 4px rgba(0,0,0,.08); }
.banner { height: 196px; background: linear-gradient(135deg, #0a66c2 0%, #004182 100%); position: relative; }
.avatar-section { padding: 0 32px 24px; position: relative; }
.avatar { width: 152px; height: 152px; border-radius: 50%; border: 4px solid #fff; position: absolute; top: -76px; left: 32px; background: #e1e1e1; display: flex; align-items: center; justify-content: center; font-size: 56px; color: #666; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-header { padding-top: 84px; }
.profile-header h1 { font-size: 28px; font-weight: 600; }
.profile-header .headline { color: #666; font-size: 16px; margin-top: 2px; }
.profile-header .location { color: #666; font-size: 14px; margin-top: 4px; }
.profile-header .connections { color: #0a66c2; font-size: 14px; margin-top: 4px; font-weight: 600; }
.action-buttons { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.btn-primary { background: #0a66c2; color: #fff; border: none; padding: 8px 24px; border-radius: 24px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .15s; }
.btn-primary:hover { background: #004182; }
.btn-outline { background: transparent; color: #0a66c2; border: 1px solid #0a66c2; padding: 8px 24px; border-radius: 24px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all .15s; }
.btn-outline:hover { background: rgba(10,102,194,.1); }
/* About */
.section { background: #fff; border-radius: 12px; padding: 28px 32px; margin-top: 12px; box-shadow: 0 0 0 1px #e0dfdc, 0 2px 4px rgba(0,0,0,.08); }
.section h2 { font-size: 20px; font-weight: 600; margin-bottom: 12px; }
.section p { color: #191919; font-size: 15px; white-space: pre-line; }
/* Experience */
.exp-item { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid #e0dfdc; }
.exp-item:last-child { border-bottom: none; }
.exp-logo { width: 56px; height: 56px; border-radius: 4px; background: #e1e1e1; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 22px; font-weight: 700; color: #555; }
.exp-content h3 { font-size: 16px; font-weight: 600; }
.exp-content .company { font-size: 14px; color: #666; }
.exp-content .date { font-size: 13px; color: #666; margin-top: 2px; }
.exp-content .location-badge { font-size: 13px; color: #666; }
.exp-content .desc { font-size: 14px; margin-top: 8px; color: #333; }
.exp-content .skills-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.skill-tag { background: #e8f3ff; color: #0a66c2; font-size: 12px; padding: 4px 12px; border-radius: 4px; font-weight: 500; }
/* Education */
.edu-item { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid #e0dfdc; }
.edu-item:last-child { border-bottom: none; }
.edu-logo { width: 56px; height: 56px; border-radius: 4px; background: #e1e1e1; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 22px; }
.edu-content h3 { font-size: 16px; font-weight: 600; }
.edu-content .school { font-size: 14px; color: #666; }
.edu-content .date { font-size: 13px; color: #666; margin-top: 2px; }
/* Skills */
.skills-list { display: flex; flex-wrap: wrap; gap: 10px; }
.skill-pill { background: #fff; border: 1px solid #e0dfdc; padding: 10px 18px; border-radius: 8px; font-size: 14px; font-weight: 500; }
/* Certifications */
.cert-item { padding: 12px 0; border-bottom: 1px solid #e0dfdc; display: flex; justify-content: space-between; align-items: center; }
.cert-item:last-child { border-bottom: none; }
.cert-item .cert-name { font-size: 15px; font-weight: 600; color: #0a66c2; }
.cert-item .cert-org { font-size: 13px; color: #666; }
/* Stats bar */
.stats-bar { display: flex; gap: 32px; margin-top: 16px; padding-top: 12px; }
.stat { text-align: center; }
.stat .num { font-size: 22px; font-weight: 700; color: #0a66c2; }
.stat .label { font-size: 12px; color: #666; }
@media (max-width: 600px) {
.avatar { width: 110px; height: 110px; top: -55px; }
.profile-header { padding-top: 60px; }
.section, .avatar-section { padding-left: 20px; padding-right: 20px; }
.stats-bar { gap: 16px; }
}
</style>
</head>
<body>
<div class="container">
<!-- Profile Card -->
<div class="profile-card">
<div class="banner"></div>
<div class="avatar-section">
<div class="avatar">AW</div>
<div class="profile-header">
<h1>Ahmad Wael</h1>
<div class="headline">Senior WordPress Engineer @ AwesomeMotive | Scalable Systems & Distributed Architectures</div>
<div class="location">Cairo, Egypt · <a href="#" style="color:#0a66c2;">Contact info</a></div>
<div class="connections">500+ connections</div>
<div class="action-buttons">
<button class="btn-primary">Connect</button>
<button class="btn-outline">Message</button>
<button class="btn-outline">More</button>
</div>
<div class="stats-bar">
<div class="stat"><div class="num">14+</div><div class="label">Years Experience</div></div>
<div class="stat"><div class="num">277k+</div><div class="label">Plugin Downloads</div></div>
<div class="stat"><div class="num">116</div><div class="label">Projects Delivered</div></div>
<div class="stat"><div class="num">5.0</div><div class="label">★ Codeable Rating</div></div>
</div>
</div>
</div>
</div>
<!-- About -->
<div class="section">
<h2>About</h2>
<p>WordPress Engineer with 14+ years of experience building scalable, high-performance WordPress solutions. Currently at AwesomeMotive shipping products used by 277k+ sites worldwide.
Expert in plugin architecture, WooCommerce ecosystems, and distributed systems. I bridge the gap between enterprise-grade engineering and practical WordPress development — from custom REST APIs and headless setups with Next.js to AI-powered features using Google Gemini.
Previously at aThemes, I shipped 5 commercial themes adopted by thousands of users. On Codeable, I maintain a perfect 5.0 rating across 116 projects. Top 3% on Toptal.
I write about engineering strategy, AI workflows, and modern WordPress architecture on my blog at bbioon.com — 779 posts and counting.
Family man, veteran, and PlayStation gamer. Based in Cairo, originally from Mansoura.</p>
</div>
<!-- Experience -->
<div class="section">
<h2>Experience</h2>
<div class="exp-item">
<div class="exp-logo" style="background:#ff6b35;color:#fff;">AM</div>
<div class="exp-content">
<h3>WordPress Engineer</h3>
<div class="company">AwesomeMotive · Full-time</div>
<div class="date">Jan 2025 – Present · 1 yr 5 mos</div>
<div class="location-badge">Remote</div>
<div class="desc">Leading development on Merchant and Merchant Pro — a WooCommerce extension suite with 45+ modules serving 277k+ active installations. Architecting scalable plugin architecture, optimizing performance across diverse hosting environments, and shipping features that directly impact hundreds of thousands of eCommerce stores.</div>
<div class="skills-tags">
<span class="skill-tag">WordPress</span>
<span class="skill-tag">WooCommerce</span>
<span class="skill-tag">PHP</span>
<span class="skill-tag">React</span>
<span class="skill-tag">Plugin Architecture</span>
</div>
</div>
</div>
<div class="exp-item">
<div class="exp-logo" style="background:#2d8cf0;color:#fff;">aT</div>
<div class="exp-content">
<h3>WordPress Developer</h3>
<div class="company">aThemes · Full-time</div>
<div class="date">2023 – 2025 · 2 yrs</div>
<div class="location-badge">Remote</div>
<div class="desc">Designed and shipped 5 commercial WordPress themes for ThemeForest, focusing on performance, accessibility, and modern design patterns. Implemented customizer APIs, Gutenberg blocks, and full-site editing support. Themes were adopted by thousands of users across diverse niches — blogs, magazines, portfolios, and business sites.</div>
<div class="skills-tags">
<span class="skill-tag">Theme Development</span>
<span class="skill-tag">FSE</span>
<span class="skill-tag">Gutenberg</span>
<span class="skill-tag">SASS</span>
<span class="skill-tag">JavaScript</span>
</div>
</div>
</div>
<div class="exp-item">
<div class="exp-logo" style="background:#44c553;color:#fff;">C</div>
<div class="exp-content">
<h3>WordPress Expert Consultant</h3>
<div class="company">Codeable · Freelance</div>
<div class="date">Sep 2021 – Present · 4+ yrs</div>
<div class="location-badge">Remote</div>
<div class="desc">Delivered 116 projects for 33 clients with a perfect 5.0/5 rating. Specializing in complex custom plugin development, WooCommerce integrations, performance optimization, and API-driven architectures. Clients range from startups to established businesses needing enterprise-grade WordPress solutions.</div>
<div class="skills-tags">
<span class="skill-tag">Consulting</span>
<span class="skill-tag">Custom Development</span>
<span class="skill-tag">API Integration</span>
<span class="skill-tag">Performance</span>
</div>
</div>
</div>
<div class="exp-item">
<div class="exp-logo" style="background:#204ecf;color:#fff;">T</div>
<div class="exp-content">
<h3>WordPress Developer</h3>
<div class="company">Toptal · Freelance</div>
<div class="date">2022 – Present · 4+ yrs</div>
<div class="location-badge">Remote</div>
<div class="desc">Ranked in the top 3% of WordPress developers worldwide. Delivered high-impact projects including headless WordPress implementations, custom REST API endpoints, and AI-integrated features for enterprise clients.</div>
<div class="skills-tags">
<span class="skill-tag">Headless WP</span>
<span class="skill-tag">Next.js</span>
<span class="skill-tag">REST API</span>
<span class="skill-tag">AI Integration</span>
</div>
</div>
</div>
<div class="exp-item">
<div class="exp-logo" style="background:#333;color:#fff;">bb</div>
<div class="exp-content">
<h3>Founder & Lead Developer</h3>
<div class="company">bbioon · bbioonThemes</div>
<div class="date">2012 – Present · 14+ yrs</div>
<div class="location-badge">Cairo, Egypt</div>
<div class="desc">Founded a WordPress development studio shipping plugins and themes for ThemeForest and self-distribution. Built and maintained bbioon.com — a technical blog with 779 articles covering WordPress engineering, AI workflows, and scalable architectures. Shipped InLife (WordPress) and Babon (Shopify) themes on ThemeForest. Created "Purchase Orders for WooCommerce" plugin (100/100 rating).</div>
<div class="skills-tags">
<span class="skill-tag">Entrepreneurship</span>
<span class="skill-tag">Product Development</span>
<span class="skill-tag">Shopify</span>
<span class="skill-tag">Technical Writing</span>
</div>
</div>
</div>
</div>
<!-- Education -->
<div class="section">
<h2>Education</h2>
<div class="edu-item">
<div class="edu-logo">🎓</div>
<div class="edu-content">
<h3>Bachelor of Laws (LLB)</h3>
<div class="school">Mansoura University · Faculty of Law</div>
<div class="date">Dakahlia Governorate, Egypt</div>
</div>
</div>
</div>
<!-- Skills -->
<div class="section">
<h2>Skills</h2>
<div class="skills-list">
<span class="skill-pill">WordPress Plugin Development</span>
<span class="skill-pill">WooCommerce</span>
<span class="skill-pill">PHP (OOP)</span>
<span class="skill-pill">JavaScript / React</span>
<span class="skill-pill">REST API Design</span>
<span class="skill-pill">WP-CLI</span>
<span class="skill-pill">Full Site Editing</span>
<span class="skill-pill">MySQL</span>
<span class="skill-pill">Redis & Caching</span>
<span class="skill-pill">Docker</span>
<span class="skill-pill">Next.js / Headless WP</span>
<span class="skill-pill">Google Gemini / AI</span>
<span class="skill-pill">Semantic Search (Qdrant)</span>
<span class="skill-pill">Laravel</span>
<span class="skill-pill">Shopify</span>
<span class="skill-pill">Kotlin / Android</span>
<span class="skill-pill">NGINX</span>
<span class="skill-pill">Scalable Architecture</span>
</div>
</div>
<!-- Certifications -->
<div class="section">
<h2>Honors & Recognition</h2>
<div class="cert-item">
<div>
<div class="cert-name">Top 3% WordPress Developer</div>
<div class="cert-org">Toptal</div>
</div>
</div>
<div class="cert-item">
<div>
<div class="cert-name">5.0/5 Rating · 116 Projects</div>
<div class="cert-org">Codeable Expert</div>
</div>
</div>
<div class="cert-item">
<div>
<div class="cert-name">100/100 Plugin Rating</div>
<div class="cert-org">Purchase Orders for WooCommerce</div>
</div>
</div>
<div class="cert-item">
<div>
<div class="cert-name">Plugin Developer Badge</div>
<div class="cert-org">WordPress.org</div>
</div>
</div>
<div class="cert-item">
<div>
<div class="cert-name">84/100 Rating · 277k+ Downloads</div>
<div class="cert-org">Merchant by AwesomeMotive</div>
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment