<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Mahmoud Engineering</title>
<link rel=”preconnect” href=”https://fonts.googleapis.com”>
<link href=”https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Serif+Display:ital@0;1&family=JetBrains+Mono:wght@300;400&family=Lato:wght@300;400;700&display=swap” rel=”stylesheet”>
<style>
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
:root {
–wood: #8B5E3C;
–wood-dark: #5C3A1E;
–wood-light: #C8935A;
–copper: #B87333;
–copper-bright: #E8923A;
–steel: #4A5568;
–cream: #F5F0E8;
–charcoal: #1A1A1A;
–off-white: #FAF7F2;
–accent: #D4870A;
}
html { scroll-behavior: smooth; }
body {
font-family: ‘Lato’, sans-serif;
background: var(–charcoal);
color: var(–cream);
overflow-x: hidden;
}
/* ── NOISE TEXTURE ── */
body::before {
content: ”;
position: fixed;
inset: 0;
background-image: url(“data:image/svg+xml,%3Csvg viewBox=’0 0 256 256′ xmlns=’http://www.w3.org/2000/svg’%3E%3Cfilter id=’noise’%3E%3CfeTurbulence type=’fractalNoise’ baseFrequency=’0.9′ numOctaves=’4′ stitchTiles=’stitch’/%3E%3C/filter%3E%3Crect width=’100%25′ height=’100%25′ filter=’url(%23noise)’ opacity=’0.03’/%3E%3C/svg%3E”);
pointer-events: none;
z-index: 9999;
}
/* ── NAV ── */
nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.2rem 4rem;
background: rgba(26,26,26,0.92);
backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(184,115,51,0.25);
transition: padding 0.3s;
}
.nav-logo {
display: flex;
align-items: center;
gap: 14px;
text-decoration: none;
}
.logo-svg {
width: 46px;
height: 46px;
flex-shrink: 0;
}
.logo-text {
display: flex;
flex-direction: column;
line-height: 1;
}
.logo-text span:first-child {
font-family: ‘Bebas Neue’, sans-serif;
font-size: 1.3rem;
letter-spacing: 0.12em;
color: var(–copper-bright);
}
.logo-text span:last-child {
font-family: ‘JetBrains Mono’, monospace;
font-size: 0.55rem;
letter-spacing: 0.35em;
color: rgba(200,147,90,0.6);
text-transform: uppercase;
}
nav ul {
display: flex;
gap: 2.5rem;
list-style: none;
}
nav ul a {
font-family: ‘JetBrains Mono’, monospace;
font-size: 0.7rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(245,240,232,0.65);
text-decoration: none;
transition: color 0.25s;
}
nav ul a:hover { color: var(–copper-bright); }
.nav-cta {
font-family: ‘JetBrains Mono’, monospace;
font-size: 0.68rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(–copper-bright) !important;
border: 1px solid rgba(184,115,51,0.5);
padding: 0.5rem 1.2rem;
border-radius: 2px;
transition: background 0.25s, color 0.25s !important;
}
.nav-cta:hover {
background: var(–copper-bright);
color: var(–charcoal) !important;
}
/* ── HERO ── */
#hero {
min-height: 100vh;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
padding: 0 4rem;
}
.hero-bg {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 80% at 80% 50%, rgba(184,115,51,0.12) 0%, transparent 70%),
radial-gradient(ellipse 40% 60% at 20% 80%, rgba(92,58,30,0.25) 0%, transparent 60%),
var(–charcoal);
}
.hero-grid-lines {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(184,115,51,0.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(184,115,51,0.06) 1px, transparent 1px);
background-size: 60px 60px;
}
.hero-content {
position: relative;
z-index: 2;
max-width: 700px;
}
.hero-label {
font-family: ‘JetBrains Mono’, monospace;
font-size: 0.65rem;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(–copper-bright);
margin-bottom: 1.5rem;
display: flex;
align-items: center;
gap: 12px;
}
.hero-label::before {
content: ”;
width: 36px;
height: 1px;
background: var(–copper-bright);
}
.hero-title {
font-family: ‘Bebas Neue’, sans-serif;
font-size: clamp(4rem, 9vw, 8rem);
line-height: 0.9;
letter-spacing: 0.02em;
margin-bottom: 0.3rem;
color: var(–off-white);
}
.hero-title .highlight {
-webkit-text-stroke: 1.5px var(–copper);
color: transparent;
}
.hero-subtitle {
font-family: ‘DM Serif Display’, serif;
font-style: italic;
font-size: clamp(1.1rem, 2vw, 1.5rem);
color: rgba(200,147,90,0.8);
margin-bottom: 2.5rem;
letter-spacing: 0.02em;
}
.hero-desc {
font-family: ‘Lato’, sans-serif;
font-size: 1rem;
line-height: 1.8;
color: rgba(245,240,232,0.55);
max-width: 480px;
margin-bottom: 3rem;
}
.hero-actions {
display: flex;
gap: 1rem;
align-items: center;
}
.btn-primary {
font-family: ‘JetBrains Mono’, monospace;
font-size: 0.72rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(–charcoal);
background: var(–copper-bright);
border: none;
padding: 0.95rem 2rem;
cursor: pointer;
border-radius: 2px;
text-decoration: none;
transition: background 0.25s, transform 0.15s;
}
.btn-primary:hover { background: var(–wood-light); transform: translateY(-1px); }
.btn-outline {
font-family: ‘JetBrains Mono’, monospace;
font-size: 0.72rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(–cream);
background: transparent;
border: 1px solid rgba(245,240,232,0.25);
padding: 0.95rem 2rem;
cursor: pointer;
border-radius: 2px;
text-decoration: none;
transition: border-color 0.25s, color 0.25s;
}
.btn-outline:hover { border-color: var(–copper-bright); color: var(–copper-bright); }
.hero-visual {
position: absolute;
right: 4rem;
top: 50%;
transform: translateY(-50%);
width: 380px;
height: 380px;
opacity: 0.85;
}
/* ── SECTION SHARED ── */
section { padding: 7rem 4rem; }
.section-label {
font-family: ‘JetBrains Mono’, monospace;
font-size: 0.62rem;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(–copper-bright);
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 10px;
}
.section-label::before {
content: ”;
width: 28px;
height: 1px;
background: var(–copper-bright);
}
.section-title {
font-family: ‘Bebas Neue’, sans-serif;
font-size: clamp(2.5rem, 5vw, 4rem);
line-height: 1;
letter-spacing: 0.04em;
margin-bottom: 1rem;
color: var(–off-white);
}
/* ── ABOUT ── */
#about {
background: #141414;
border-top: 1px solid rgba(184,115,51,0.12);
border-bottom: 1px solid rgba(184,115,51,0.12);
}
.about-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5rem;
align-items: center;
max-width: 1100px;
margin: 0 auto;
}
.about-text p {
color: rgba(245,240,232,0.6);
line-height: 1.9;
margin-bottom: 1.2rem;
font-size: 1rem;
}
.about-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
background: rgba(184,115,51,0.15);
border: 1px solid rgba(184,115,51,0.15);
margin-top: 2.5rem;
}
.stat-box {
padding: 1.5rem;
background: #141414;
text-align: center;
}
.stat-number {
font-family: ‘Bebas Neue’, sans-serif;
font-size: 2.8rem;
color: var(–copper-bright);
line-height: 1;
display: block;
}
.stat-label {
font-family: ‘JetBrains Mono’, monospace;
font-size: 0.58rem;
letter-spacing: 0.25em;
text-transform: uppercase;
color: rgba(245,240,232,0.4);
margin-top: 0.3rem;
}
.about-visual-panel {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.about-logo-frame {
width: 280px;
height: 280px;
border: 1px solid rgba(184,115,51,0.3);
display: flex;
align-items: center;
justify-content: center;
position: relative;
background: rgba(26,26,26,0.8);
}
.about-logo-frame::before {
content: ”;
position: absolute;
inset: -8px;
border: 1px solid rgba(184,115,51,0.12);
}
.about-logo-frame::after {
content: ‘MAHMOUD ENGINEERING’;
position: absolute;
bottom: -2rem;
font-family: ‘JetBrains Mono’, monospace;
font-size: 0.55rem;
letter-spacing: 0.35em;
color: rgba(200,147,90,0.5);
}
/* ── SERVICES ── */
#services {
max-width: 1200px;
margin: 0 auto;
}
#services > .section-label,
#services > .section-title,
#services > .section-desc { max-width: 600px; }
.section-desc {
color: rgba(245,240,232,0.5);
line-height: 1.8;
margin-bottom: 4rem;
}
.services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: rgba(184,115,51,0.12);
}
.service-card {
background: var(–charcoal);
padding: 2.5rem 2rem;
position: relative;
overflow: hidden;
transition: background 0.3s;
}
.service-card:hover { background: #1f1f1f; }
.service-card::before {
content: ”;
position: absolute;
bottom: 0; left: 0; right: 0;
height: 2px;
background: var(–copper-bright);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s ease;
}
.service-card:hover::before { transform: scaleX(1); }
.service-icon {
width: 52px;
height: 52px;
margin-bottom: 1.5rem;
}
.service-name {
font-family: ‘Bebas Neue’, sans-serif;
font-size: 1.6rem;
letter-spacing: 0.05em;
color: var(–cream);
margin-bottom: 0.8rem;
}
.service-desc {
font-size: 0.9rem;
line-height: 1.75;
color: rgba(245,240,232,0.45);
}
.service-tags {
margin-top: 1.5rem;
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.tag {
font-family: ‘JetBrains Mono’, monospace;
font-size: 0.58rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(–copper-bright);
border: 1px solid rgba(184,115,51,0.3);
padding: 0.25rem 0.6rem;
border-radius: 2px;
}
/* ── WORK / GALLERY ── */
#work {
background: #0f0f0f;
border-top: 1px solid rgba(184,115,51,0.1);
border-bottom: 1px solid rgba(184,115,51,0.1);
}
.work-inner {
max-width: 1100px;
margin: 0 auto;
}
.work-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
gap: 1.5rem;
margin-top: 3rem;
}
.work-card {
position: relative;
overflow: hidden;
border: 1px solid rgba(184,115,51,0.12);
cursor: pointer;
aspect-ratio: 4/3;
background: #1a1a1a;
}
.work-card.featured {
grid-column: span 2;
aspect-ratio: 16/9;
}
.work-card-bg {
width: 100%;
height: 100%;
transition: transform 0.5s ease;
}
.work-card:hover .work-card-bg { transform: scale(1.04); }
.work-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 40%, rgba(10,8,6,0.9) 100%);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 1.5rem;
}
.work-cat {
font-family: ‘JetBrains Mono’, monospace;
font-size: 0.58rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(–copper-bright);
margin-bottom: 0.3rem;
}
.work-title {
font-family: ‘Bebas Neue’, sans-serif;
font-size: 1.4rem;
letter-spacing: 0.04em;
color: var(–cream);
}
/* ── PROCESS ── */
#process {
max-width: 900px;
margin: 0 auto;
}
.process-steps {
margin-top: 3.5rem;
display: flex;
flex-direction: column;
gap: 0;
}
.process-step {
display: grid;
grid-template-columns: 80px 1fr;
gap: 2rem;
padding: 2rem 0;
border-bottom: 1px solid rgba(184,115,51,0.1);
align-items: start;
}
.process-step:last-child { border-bottom: none; }
.step-num {
font-family: ‘Bebas Neue’, sans-serif;
font-size: 3.5rem;
color: rgba(184,115,51,0.2);
line-height: 1;
text-align: right;
padding-right: 1.5rem;
border-right: 1px solid rgba(184,115,51,0.15);
}
.step-body { padding-top: 0.2rem; }
.step-name {
font-family: ‘Bebas Neue’, sans-serif;
font-size: 1.6rem;
letter-spacing: 0.05em;
color: var(–cream);
margin-bottom: 0.5rem;
}
.step-desc {
color: rgba(245,240,232,0.45);
font-size: 0.92rem;
line-height: 1.8;
}
/* ── CONTACT ── */
#contact {
background: #0d0d0d;
border-top: 1px solid rgba(184,115,51,0.15);
}
.contact-inner {
max-width: 700px;
margin: 0 auto;
text-align: center;
}
.contact-inner .section-label { justify-content: center; }
.contact-inner .section-label::before { display: none; }
.contact-tagline {
font-family: ‘DM Serif Display’, serif;
font-style: italic;
font-size: 1.3rem;
color: rgba(200,147,90,0.7);
margin-bottom: 1rem;
}
.contact-form {
margin-top: 3rem;
display: grid;
gap: 1rem;
text-align: left;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-group { display: flex; flex-direction: column; gap: 0.4rem; }
.form-group label {
font-family: ‘JetBrains Mono’, monospace;
font-size: 0.6rem;
letter-spacing: 0.25em;
text-transform: uppercase;
color: rgba(245,240,232,0.4);
}
.form-group input,
.form-group textarea,
.form-group select {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(184,115,51,0.2);
border-radius: 2px;
padding: 0.85rem 1rem;
color: var(–cream);
font-family: ‘Lato’, sans-serif;
font-size: 0.95rem;
outline: none;
transition: border-color 0.25s;
width: 100%;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
border-color: var(–copper-bright);
}
.form-group select { appearance: none; cursor: pointer; }
.form-group textarea { resize: vertical; min-height: 130px; }
.form-submit {
text-align: center;
margin-top: 1rem;
}
/* ── FOOTER ── */
footer {
padding: 2rem 4rem;
border-top: 1px solid rgba(184,115,51,0.12);
display: flex;
align-items: center;
justify-content: space-between;
}
.footer-copy {
font-family: ‘JetBrains Mono’, monospace;
font-size: 0.6rem;
letter-spacing: 0.2em;
color: rgba(245,240,232,0.25);
}
.footer-links {
display: flex;
gap: 2rem;
}
.footer-links a {
font-family: ‘JetBrains Mono’, monospace;
font-size: 0.6rem;
letter-spacing: 0.2em;
color: rgba(245,240,232,0.3);
text-decoration: none;
text-transform: uppercase;
transition: color 0.25s;
}
.footer-links a:hover { color: var(–copper-bright); }
/* ── ANIMATIONS ── */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
.hero-label { animation: fadeUp 0.6s 0.1s both; }
.hero-title { animation: fadeUp 0.6s 0.25s both; }
.hero-subtitle { animation: fadeUp 0.6s 0.4s both; }
.hero-desc { animation: fadeUp 0.6s 0.5s both; }
.hero-actions { animation: fadeUp 0.6s 0.6s both; }
@keyframes spin-slow {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.spinning-ring {
animation: spin-slow 20s linear infinite;
transform-origin: center;
}
/* ── MOBILE ── */
@media (max-width: 900px) {
nav { padding: 1rem 1.5rem; }
nav ul { display: none; }
section { padding: 4rem 1.5rem; }
#hero { padding: 0 1.5rem; padding-top: 6rem; min-height: auto; padding-bottom: 4rem; }
.hero-visual { display: none; }
.about-grid { grid-template-columns: 1fr; gap: 2.5rem; }
.about-visual-panel { display: none; }
.services-grid { grid-template-columns: 1fr; }
.work-grid { grid-template-columns: 1fr; }
.work-card.featured { grid-column: span 1; aspect-ratio: 4/3; }
.form-row { grid-template-columns: 1fr; }
footer { flex-direction: column; gap: 1rem; text-align: center; }
}
</style>
</head>
<body>
<!– NAV –>
<nav>
<a href=”#hero” class=”nav-logo”>
<!– Mahmoud face sketch logo –>
<svg class=”logo-svg” viewBox=”80 45 240 340″ fill=”none” xmlns=”http://www.w3.org/2000/svg” style=”background:white; border-radius:3px; padding:1px;”>
<g fill=”none” stroke=”#B87333″ stroke-linecap=”round” stroke-linejoin=”round”>
<!– Hair left –>
<path d=”M 148 105 C 120 95,95 88,80 100 C 60 115,52 135,50 158 C 47 180,50 205,54 228 C 58 252,62 275,65 298 C 68 318,72 338,78 355″ stroke-width=”2.2″/>
<path d=”M 145 100 C 118 85,90 80,70 95 C 50 110,42 138,40 165 C 38 192,44 220,50 248 C 56 275,62 300,68 322″ stroke-width=”1.6″/>
<path d=”M 158 115 C 142 120,128 135,115 155 C 104 172,97 192,95 215″ stroke-width=”1″ opacity=”0.7″/>
<!– Hair right –>
<path d=”M 252 105 C 278 95,302 88,318 100 C 338 115,346 135,348 158 C 350 180,347 205,343 228 C 339 252,334 275,330 298 C 326 318,320 338,312 355″ stroke-width=”2.2″/>
<path d=”M 255 100 C 280 85,308 80,328 95 C 348 110,356 138,358 165 C 360 192,354 220,348 248 C 342 275,336 300,330 322″ stroke-width=”1.6″/>
<path d=”M 242 115 C 258 120,270 135,283 155 C 294 172,300 192,302 215″ stroke-width=”1″ opacity=”0.7″/>
<!– Top crown –>
<path d=”M 115 130 C 118 105,128 82,148 68 C 162 58,180 54,195 53 C 210 52,228 55,242 65 C 258 76,268 96,272 120″ stroke-width=”2.2″/>
<path d=”M 190 53 C 186 65,176 80,168 98″ stroke-width=”0.9″ opacity=”0.55″/>
<path d=”M 202 53 C 206 66,213 82,218 100″ stroke-width=”0.9″ opacity=”0.55″/>
<!– Face outline left –>
<path d=”M 120 145 C 112 162,108 180,107 198 C 106 216,108 234,112 250 C 116 266,122 280,130 292 C 140 306,152 316,166 324″ stroke-width=”2.0″/>
<!– Face outline right –>
<path d=”M 278 145 C 286 162,290 180,291 198 C 292 216,290 234,286 250 C 282 266,276 280,268 292 C 258 306,246 316,232 324″ stroke-width=”2.0″/>
<!– Chin –>
<path d=”M 166 324 C 178 334,188 337,200 337 C 212 337,222 334,232 324″ stroke-width=”2.0″/>
<!– Brows –>
<path d=”M 145 168 C 153 162,162 160,172 161 C 180 162,186 165,189 168″ stroke-width=”2.3″/>
<path d=”M 253 168 C 245 162,236 160,226 161 C 218 162,212 165,209 168″ stroke-width=”2.3″/>
<!– Round glasses left –>
<circle cx=”172″ cy=”198″ r=”27″ stroke-width=”2.2″/>
<circle cx=”172″ cy=”198″ r=”24″ stroke-width=”0.5″ opacity=”0.3″/>
<!– Round glasses right –>
<circle cx=”226″ cy=”198″ r=”27″ stroke-width=”2.2″/>
<circle cx=”226″ cy=”198″ r=”24″ stroke-width=”0.5″ opacity=”0.3″/>
<!– Bridge –>
<path d=”M 199 196 C 202 194,205 193,207 193″ stroke-width=”1.8″/>
<!– Arms –>
<path d=”M 145 192 C 136 190,126 191,118 193″ stroke-width=”1.8″/>
<path d=”M 253 192 C 262 190,272 191,280 193″ stroke-width=”1.8″/>
<!– Eyes –>
<circle cx=”172″ cy=”198″ r=”8″ stroke-width=”1.2″ opacity=”0.5″/>
<circle cx=”172″ cy=”198″ r=”3.5″ stroke-width=”0″ fill=”#B87333″ opacity=”0.85″/>
<circle cx=”226″ cy=”198″ r=”8″ stroke-width=”1.2″ opacity=”0.5″/>
<circle cx=”226″ cy=”198″ r=”3.5″ stroke-width=”0″ fill=”#B87333″ opacity=”0.85″/>
<!– Nose –>
<path d=”M 192 238 C 186 242,183 248,184 254 C 185 258,189 260,196 261 C 203 261,209 258,212 254 C 213 248,210 242,206 238″ stroke-width=”1.5″/>
<path d=”M 184 254 C 182 257,182 261,184 263″ stroke-width=”1.2″/>
<path d=”M 214 254 C 216 257,216 261,214 263″ stroke-width=”1.2″/>
<!– Mustache –>
<path d=”M 183 268 C 188 263,193 261,197 263 C 199 264,200 266,200 267″ stroke-width=”1.8″/>
<path d=”M 217 268 C 212 263,205 261,203 263 C 201 264,200 266,200 267″ stroke-width=”1.8″/>
<path d=”M 183 272 C 190 274,196 275,200 275 C 204 275,210 274,217 272″ stroke-width=”1.4″/>
<!– Beard outer left –>
<path d=”M 122 246 C 118 260,116 276,116 292 C 116 308,120 322,128 334 C 138 348,152 358,170 364″ stroke-width=”2.0″/>
<!– Beard outer right –>
<path d=”M 276 246 C 280 260,282 276,282 292 C 282 308,278 322,270 334 C 260 348,246 358,228 364″ stroke-width=”2.0″/>
<!– Beard bottom –>
<path d=”M 170 364 C 180 368,190 369,200 369 C 210 369,220 368,228 364″ stroke-width=”2.0″/>
<!– Beard texture left –>
<path d=”M 128 252 C 124 268,122 285,124 302 C 126 318,132 332,142 344″ stroke-width=”1″ opacity=”0.5″/>
<path d=”M 142 256 C 138 272,136 290,138 307 C 140 322,148 336,158 346″ stroke-width=”0.9″ opacity=”0.45″/>
<path d=”M 158 262 C 155 278,153 295,155 312 C 157 326,164 340,174 350″ stroke-width=”0.9″ opacity=”0.45″/>
<path d=”M 178 272 C 176 288,175 305,177 320 C 179 334,186 348,194 358″ stroke-width=”0.8″ opacity=”0.4″/>
<!– Beard texture right –>
<path d=”M 270 252 C 274 268,276 285,274 302 C 272 318,266 332,256 344″ stroke-width=”1″ opacity=”0.5″/>
<path d=”M 256 256 C 260 272,262 290,260 307 C 258 322,250 336,240 346″ stroke-width=”0.9″ opacity=”0.45″/>
<path d=”M 240 262 C 243 278,245 295,243 312 C 241 326,234 340,224 350″ stroke-width=”0.9″ opacity=”0.45″/>
<path d=”M 220 272 C 222 288,223 305,221 320 C 219 334,212 348,204 358″ stroke-width=”0.8″ opacity=”0.4″/>
<!– Beard center –>
<path d=”M 200 275 C 200 295,200 318,200 340 C 200 352,200 362,200 368″ stroke-width=”1″ opacity=”0.5″/>
<!– Upper beard edge –>
<path d=”M 122 244 C 138 238,155 236,170 238 C 182 240,190 245,190 252″ stroke-width=”1.3″/>
<path d=”M 276 244 C 260 238,243 236,228 238 C 216 240,208 245,208 252″ stroke-width=”1.3″/>
</g>
</svg>
<div class=”logo-text”>
<span>MAHMOUD</span>
<span>Engineering Studio</span>
</div>
</a>
<ul>
<li><a href=”#about”>About</a></li>
<li><a href=”#services”>Services</a></li>
<li><a href=”#work”>Work</a></li>
<li><a href=”#process”>Process</a></li>
<li><a href=”#contact” class=”nav-cta”>Contact</a></li>
</ul>
</nav>
<!– HERO –>
<section id=”hero”>
<div class=”hero-bg”></div>
<div class=”hero-grid-lines”></div>
<div class=”hero-content”>
<div class=”hero-label”>Engineer · Maker · Builder</div>
<h1 class=”hero-title”>
WOOD.<br>
WIRE.<br>
<span class=”highlight”>WONDER.</span>
</h1>
<p class=”hero-subtitle”>Where craft meets circuit.</p>
<p class=”hero-desc”>
Precision woodworking fused with electronics engineering. Custom furniture with embedded smart systems. One-of-a-kind pieces built to last a lifetime.
</p>
<div class=”hero-actions”>
<a href=”#work” class=”btn-primary”>View Work</a>
<a href=”#contact” class=”btn-outline”>Get a Quote</a>
</div>
</div>
<!– Hero geometric visual –>
<svg class=”hero-visual” viewBox=”0 0 380 380″ xmlns=”http://www.w3.org/2000/svg”>
<defs>
<marker id=”arrowH” viewBox=”0 0 10 10″ refX=”8″ refY=”5″ markerWidth=”5″ markerHeight=”5″ orient=”auto”>
<path d=”M2 1L8 5L2 9″ fill=”none” stroke=”#B87333″ stroke-width=”1.5″/>
</marker>
</defs>
<!– Outer rotating ring –>
<g class=”spinning-ring”>
<circle cx=”190″ cy=”190″ r=”170″ stroke=”#B87333″ stroke-width=”0.5″ fill=”none” stroke-dasharray=”8 12″/>
</g>
<!– Static outer –>
<circle cx=”190″ cy=”190″ r=”140″ stroke=”rgba(184,115,51,0.2)” stroke-width=”1″ fill=”none”/>
<!– Wood grain lines (left half) –>
<g opacity=”0.3″ stroke=”#8B5E3C” stroke-width=”0.8″>
<path d=”M60 120 Q120 115 140 130 Q160 145 165 190″/>
<path d=”M55 140 Q115 135 138 150 Q162 165 166 210″/>
<path d=”M58 160 Q118 158 140 172 Q163 188 168 230″/>
<path d=”M62 180 Q122 180 142 193 Q164 208 170 248″/>
<path d=”M68 200 Q128 202 146 214 Q167 228 172 268″/>
</g>
<!– Circuit traces (right half) –>
<g opacity=”0.45″ stroke=”#E8923A” stroke-width=”0.8″ fill=”none”>
<polyline points=”220,80 250,80 250,120 290,120″/>
<circle cx=”250″ cy=”80″ r=”3″ fill=”#E8923A” opacity=”0.8″/>
<polyline points=”250,120 280,120 280,160 320,160″/>
<circle cx=”280″ cy=”140″ r=”2.5″ fill=”#E8923A” opacity=”0.8″/>
<polyline points=”220,160 240,160 240,200 300,200″/>
<circle cx=”240″ cy=”180″ r=”2.5″ fill=”#E8923A” opacity=”0.8″/>
<polyline points=”240,200 240,240 290,240 290,270″/>
<circle cx=”265″ cy=”240″ r=”2.5″ fill=”#E8923A” opacity=”0.8″/>
<rect x=”288″ y=”115″ width=”8″ height=”10″ stroke=”#E8923A” stroke-width=”0.8″ fill=”rgba(232,146,58,0.1)”/>
<rect x=”316″ y=”155″ width=”8″ height=”10″ stroke=”#E8923A” stroke-width=”0.8″ fill=”rgba(232,146,58,0.1)”/>
</g>
<!– Center dividing line (wood meets circuit) –>
<line x1=”208″ y1=”50″ x2=”208″ y2=”330″ stroke=”rgba(184,115,51,0.25)” stroke-width=”1″ stroke-dasharray=”4 6″/>
<!– Center gear/cog –>
<circle cx=”190″ cy=”190″ r=”30″ stroke=”#B87333″ stroke-width=”1.5″ fill=”rgba(26,26,26,0.9)”/>
<circle cx=”190″ cy=”190″ r=”22″ stroke=”#B87333″ stroke-width=”0.8″ fill=”none”/>
<circle cx=”190″ cy=”190″ r=”6″ fill=”#E8923A” opacity=”0.8″/>
<!– Gear teeth –>
<g stroke=”#B87333″ stroke-width=”1.5″>
<line x1=”190″ y1=”156″ x2=”190″ y2=”163″/>
<line x1=”190″ y1=”217″ x2=”190″ y2=”224″/>
<line x1=”156″ y1=”190″ x2=”163″ y2=”190″/>
<line x1=”217″ y1=”190″ x2=”224″ y2=”190″/>
<line x1=”166″ y1=”166″ x2=”171″ y2=”171″/>
<line x1=”209″ y1=”209″ x2=”214″ y2=”214″/>
<line x1=”214″ y1=”166″ x2=”209″ y2=”171″/>
<line x1=”171″ y1=”209″ x2=”166″ y2=”214″/>
</g>
<!– Text labels –>
<text x=”100″ y=”280″ font-family=”‘JetBrains Mono’, monospace” font-size=”8″ fill=”rgba(139,94,60,0.7)” letter-spacing=”3″>WOODWORK</text>
<text x=”235″ y=”280″ font-family=”‘JetBrains Mono’, monospace” font-size=”8″ fill=”rgba(232,146,58,0.7)” letter-spacing=”3″>ELECTRONICS</text>
</svg>
</section>
<!– ABOUT –>
<section id=”about”>
<div class=”about-grid”>
<div class=”about-text”>
<div class=”section-label”>About Mahmoud</div>
<h2 class=”section-title”>ENGINEER BY MIND, CRAFTSMAN BY SOUL</h2>
<p>Mahmoud is a multi-disciplinary engineer with a rare gift — the ability to think in circuits and carve in wood with equal precision. Every project is an intersection of technical mastery and artisanal care.</p>
<p>From custom hardwood furniture with embedded smart home systems, to bespoke electronic enclosures machined from solid walnut — Mahmoud Engineering bridges two worlds that are rarely spoken in the same breath.</p>
<p>Based in a dedicated workshop equipped with both CNC machines and soldering stations, every creation that leaves the studio is engineered to function flawlessly and built to stand centuries.</p>
<div class=”about-stats”>
<div class=”stat-box”>
<span class=”stat-number”>120+</span>
<span class=”stat-label”>Projects Completed</span>
</div>
<div class=”stat-box”>
<span class=”stat-number”>8</span>
<span class=”stat-label”>Years Experience</span>
</div>
<div class=”stat-box”>
<span class=”stat-number”>40+</span>
<span class=”stat-label”>Happy Clients</span>
</div>
<div class=”stat-box”>
<span class=”stat-number”>3</span>
<span class=”stat-label”>Disciplines Mastered</span>
</div>
</div>
</div>
<div class=”about-visual-panel”>
<div class=”about-logo-frame”>
<!– Mahmoud face sketch logo — full size –>
<svg width=”240″ height=”300″ viewBox=”60 45 280 360″ fill=”none” xmlns=”http://www.w3.org/2000/svg” style=”background:white;”>
<g fill=”none” stroke=”#1a1a1a” stroke-linecap=”round” stroke-linejoin=”round”>
<!– Hair left –>
<path d=”M 148 105 C 120 95,95 88,80 100 C 60 115,52 135,50 158 C 47 180,50 205,54 228 C 58 252,62 275,65 298 C 68 318,72 338,78 355″ stroke-width=”2.2″/>
<path d=”M 145 100 C 118 85,90 80,70 95 C 50 110,42 138,40 165 C 38 192,44 220,50 248 C 56 275,62 300,68 322″ stroke-width=”1.7″/>
<path d=”M 158 115 C 142 120,128 136,116 156 C 106 173,99 193,97 216″ stroke-width=”1.1″ opacity=”0.7″/>
<path d=”M 162 125 C 148 135,136 152,126 172 C 118 190,114 210,114 232″ stroke-width=”0.9″ opacity=”0.55″/>
<!– Hair right –>
<path d=”M 252 105 C 278 95,302 88,318 100 C 338 115,346 135,348 158 C 350 180,347 205,343 228 C 339 252,334 275,330 298 C 326 318,320 338,312 355″ stroke-width=”2.2″/>
<path d=”M 255 100 C 280 85,308 80,328 95 C 348 110,356 138,358 165 C 360 192,354 220,348 248 C 342 275,336 300,330 322″ stroke-width=”1.7″/>
<path d=”M 242 115 C 258 120,270 136,282 156 C 292 173,299 193,301 216″ stroke-width=”1.1″ opacity=”0.7″/>
<path d=”M 238 125 C 252 135,262 152,272 172 C 280 190,284 210,284 232″ stroke-width=”0.9″ opacity=”0.55″/>
<!– Top crown –>
<path d=”M 115 130 C 118 105,128 82,148 68 C 162 58,180 54,195 53 C 210 52,228 55,242 65 C 258 76,268 96,272 120″ stroke-width=”2.2″/>
<path d=”M 150 70 C 162 58,179 52,195 51 C 211 51,228 57,240 68″ stroke-width=”1.4″/>
<path d=”M 190 53 C 186 66,175 82,166 100″ stroke-width=”1″ opacity=”0.55″/>
<path d=”M 202 53 C 206 67,214 84,220 102″ stroke-width=”1″ opacity=”0.55″/>
<path d=”M 122 118 C 127 100,138 84,152 72″ stroke-width=”1.2″ opacity=”0.6″/>
<path d=”M 268 118 C 262 100,252 84,238 72″ stroke-width=”1.2″ opacity=”0.6″/>
<!– Face left –>
<path d=”M 120 145 C 112 162,108 180,107 198 C 106 216,108 234,112 250 C 116 266,122 280,132 294 C 142 307,156 318,170 326″ stroke-width=”2.1″/>
<!– Face right –>
<path d=”M 278 145 C 286 162,290 180,291 198 C 292 216,290 234,286 250 C 282 266,276 280,266 294 C 256 307,242 318,228 326″ stroke-width=”2.1″/>
<!– Chin –>
<path d=”M 170 326 C 180 334,190 337,200 337 C 210 337,220 334,228 326″ stroke-width=”2.1″/>
<!– Brows — strong, slight inward angle (furrowed) –>
<path d=”M 144 167 C 152 161,162 159,173 160 C 181 161,188 165,190 169″ stroke-width=”2.4″/>
<path d=”M 145 171 C 154 166,164 164,174 165 C 182 166,188 169,190 172″ stroke-width=”1.2″ opacity=”0.45″/>
<path d=”M 254 167 C 246 161,236 159,225 160 C 217 161,210 165,208 169″ stroke-width=”2.4″/>
<path d=”M 253 171 C 244 166,234 164,224 165 C 216 166,210 169,208 172″ stroke-width=”1.2″ opacity=”0.45″/>
<!– Round glasses left –>
<circle cx=”172″ cy=”200″ r=”28″ stroke-width=”2.3″/>
<circle cx=”172″ cy=”200″ r=”25″ stroke-width=”0.6″ opacity=”0.25″/>
<!– Round glasses right –>
<circle cx=”226″ cy=”200″ r=”28″ stroke-width=”2.3″/>
<circle cx=”226″ cy=”200″ r=”25″ stroke-width=”0.6″ opacity=”0.25″/>
<!– Bridge –>
<path d=”M 200 197 C 203 195,206 194,208 194″ stroke-width=”2″/>
<path d=”M 200 201 C 203 199,206 198,208 198″ stroke-width=”1.2″ opacity=”0.5″/>
<!– Temple arms –>
<path d=”M 144 195 C 136 193,127 192,118 194″ stroke-width=”1.9″/>
<path d=”M 254 195 C 262 193,271 192,280 194″ stroke-width=”1.9″/>
<!– Eyes inside lenses –>
<circle cx=”172″ cy=”200″ r=”9.5″ stroke-width=”1.3″ opacity=”0.5″/>
<circle cx=”172″ cy=”200″ r=”4.5″ stroke-width=”0″ fill=”#1a1a1a” opacity=”0.75″/>
<circle cx=”226″ cy=”200″ r=”9.5″ stroke-width=”1.3″ opacity=”0.5″/>
<circle cx=”226″ cy=”200″ r=”4.5″ stroke-width=”0″ fill=”#1a1a1a” opacity=”0.75″/>
<!– Highlight –>
<circle cx=”168″ cy=”196″ r=”2″ stroke-width=”0″ fill=”white”/>
<circle cx=”222″ cy=”196″ r=”2″ stroke-width=”0″ fill=”white”/>
<!– Nose –>
<path d=”M 196 174 C 194 185,192 198,191 210 C 190 220,190 230,192 240″ stroke-width=”1.2″ opacity=”0.65″/>
<path d=”M 190 240 C 186 244,183 250,184 256 C 185 261,190 264,197 265 C 204 265,210 261,211 256 C 212 250,208 244,204 240″ stroke-width=”1.6″/>
<path d=”M 184 256 C 182 260,182 264,184 267″ stroke-width=”1.3″/>
<path d=”M 212 256 C 214 260,214 264,212 267″ stroke-width=”1.3″/>
<!– Mustache –>
<path d=”M 183 270 C 188 264,193 262,197 264 C 199 265,200 268,200 269″ stroke-width=”1.9″/>
<path d=”M 217 270 C 212 264,205 262,203 264 C 201 265,200 268,200 269″ stroke-width=”1.9″/>
<path d=”M 183 273 C 191 276,196 277,200 277 C 204 277,211 276,217 273″ stroke-width=”1.5″/>
<path d=”M 184 268 C 189 265,194 264,198 265″ stroke-width=”1″ opacity=”0.5″/>
<path d=”M 216 268 C 211 265,205 264,202 265″ stroke-width=”1″ opacity=”0.5″/>
<!– Beard outer left –>
<path d=”M 120 248 C 115 264,113 280,113 296 C 113 312,117 328,126 342 C 136 356,150 366,168 372″ stroke-width=”2.1″/>
<!– Beard outer right –>
<path d=”M 278 248 C 283 264,285 280,285 296 C 285 312,281 328,272 342 C 262 356,248 366,230 372″ stroke-width=”2.1″/>
<!– Beard bottom –>
<path d=”M 168 372 C 180 377,190 378,200 378 C 210 378,220 377,230 372″ stroke-width=”2.1″/>
<!– Upper beard edge –>
<path d=”M 120 246 C 138 240,156 238,172 240 C 185 242,192 248,192 255″ stroke-width=”1.4″/>
<path d=”M 278 246 C 260 240,242 238,226 240 C 213 242,206 248,206 255″ stroke-width=”1.4″/>
<!– Beard strands left –>
<path d=”M 124 254 C 120 270,118 288,120 306 C 122 322,128 338,138 352″ stroke-width=”1.1″ opacity=”0.5″/>
<path d=”M 138 258 C 134 274,132 292,134 310 C 136 326,144 342,154 354″ stroke-width=”1″ opacity=”0.48″/>
<path d=”M 154 264 C 151 280,149 298,151 314 C 153 330,161 346,172 358″ stroke-width=”0.95″ opacity=”0.45″/>
<path d=”M 172 270 C 170 286,169 302,171 318 C 173 332,180 348,190 360″ stroke-width=”0.85″ opacity=”0.42″/>
<!– Beard strands right –>
<path d=”M 274 254 C 278 270,280 288,278 306 C 276 322,270 338,260 352″ stroke-width=”1.1″ opacity=”0.5″/>
<path d=”M 260 258 C 264 274,266 292,264 310 C 262 326,254 342,244 354″ stroke-width=”1″ opacity=”0.48″/>
<path d=”M 244 264 C 247 280,249 298,247 314 C 245 330,237 346,226 358″ stroke-width=”0.95″ opacity=”0.45″/>
<path d=”M 226 270 C 228 286,229 302,227 318 C 225 332,218 348,208 360″ stroke-width=”0.85″ opacity=”0.42″/>
<!– Center beard –>
<path d=”M 198 278 C 197 298,197 320,198 342 C 199 358,200 370,200 377″ stroke-width=”1″ opacity=”0.5″/>
<path d=”M 202 278 C 203 298,203 320,202 342 C 201 358,200 370,200 377″ stroke-width=”1″ opacity=”0.5″/>
</g>
</svg>
</div>
</div>
</div>
</section>
<!– SERVICES –>
<section id=”services” style=”max-width:1200px; margin:0 auto; padding:7rem 4rem;”>
<div class=”section-label”>What I Do</div>
<h2 class=”section-title”>SERVICES</h2>
<p class=”section-desc”>Three disciplines. One craftsman. Infinite possibilities for your next project.</p>
<div class=”services-grid”>
<!– Woodworking –>
<div class=”service-card”>
<svg class=”service-icon” viewBox=”0 0 52 52″ fill=”none” xmlns=”http://www.w3.org/2000/svg”>
<rect x=”4″ y=”38″ width=”44″ height=”6″ rx=”1″ stroke=”#B87333″ stroke-width=”1.2″/>
<rect x=”10″ y=”14″ width=”32″ height=”24″ rx=”1″ stroke=”#B87333″ stroke-width=”1.2″/>
<line x1=”10″ y1=”20″ x2=”42″ y2=”20″ stroke=”#8B5E3C” stroke-width=”0.8″/>
<line x1=”10″ y1=”26″ x2=”42″ y2=”26″ stroke=”#8B5E3C” stroke-width=”0.8″/>
<line x1=”10″ y1=”32″ x2=”42″ y2=”32″ stroke=”#8B5E3C” stroke-width=”0.8″/>
<path d=”M22 14 L26 6 L30 14″ stroke=”#E8923A” stroke-width=”1.2″ fill=”none”/>
</svg>
<div class=”service-name”>WOODWORKING</div>
<p class=”service-desc”>Custom hardwood furniture, cabinetry, and decorative pieces. Each cut is precise, each joint is forever. Oak, walnut, ash — worked with hand tools and CNC alike.</p>
<div class=”service-tags”>
<span class=”tag”>Furniture</span>
<span class=”tag”>Cabinetry</span>
<span class=”tag”>CNC Routing</span>
<span class=”tag”>Joinery</span>
</div>
</div>
<!– Electronics –>
<div class=”service-card”>
<svg class=”service-icon” viewBox=”0 0 52 52″ fill=”none” xmlns=”http://www.w3.org/2000/svg”>
<rect x=”6″ y=”16″ width=”40″ height=”24″ rx=”2″ stroke=”#E8923A” stroke-width=”1.2″/>
<circle cx=”16″ cy=”28″ r=”4″ stroke=”#B87333″ stroke-width=”1″/>
<circle cx=”36″ cy=”28″ r=”4″ stroke=”#B87333″ stroke-width=”1″/>
<line x1=”20″ y1=”28″ x2=”32″ y2=”28″ stroke=”#E8923A” stroke-width=”0.8″/>
<line x1=”26″ y1=”16″ x2=”26″ y2=”10″ stroke=”#E8923A” stroke-width=”1″/>
<line x1=”20″ y1=”10″ x2=”32″ y2=”10″ stroke=”#E8923A” stroke-width=”1″/>
<rect x=”22″ y=”36″ width=”8″ height=”4″ rx=”0.5″ stroke=”#B87333″ stroke-width=”0.8″/>
</svg>
<div class=”service-name”>ELECTRONICS</div>
<p class=”service-desc”>PCB design, embedded systems, IoT devices, and custom control panels. From concept to working prototype, engineered for reliability in real-world conditions.</p>
<div class=”service-tags”>
<span class=”tag”>PCB Design</span>
<span class=”tag”>Arduino/ESP32</span>
<span class=”tag”>IoT</span>
<span class=”tag”>Prototyping</span>
</div>
</div>
<!– Hybrid –>
<div class=”service-card”>
<svg class=”service-icon” viewBox=”0 0 52 52″ fill=”none” xmlns=”http://www.w3.org/2000/svg”>
<!– Half wood, half circuit –>
<rect x=”4″ y=”14″ width=”22″ height=”28″ rx=”1″ stroke=”#8B5E3C” stroke-width=”1.2″/>
<line x1=”4″ y1=”20″ x2=”26″ y2=”20″ stroke=”#8B5E3C” stroke-width=”0.6″/>
<line x1=”4″ y1=”26″ x2=”26″ y2=”26″ stroke=”#8B5E3C” stroke-width=”0.6″/>
<line x1=”4″ y1=”32″ x2=”26″ y2=”32″ stroke=”#8B5E3C” stroke-width=”0.6″/>
<line x1=”4″ y1=”38″ x2=”26″ y2=”38″ stroke=”#8B5E3C” stroke-width=”0.6″/>
<rect x=”26″ y=”14″ width=”22″ height=”28″ rx=”1″ stroke=”#E8923A” stroke-width=”1.2″/>
<circle cx=”34″ cy=”24″ r=”3″ stroke=”#E8923A” stroke-width=”0.8″/>
<circle cx=”42″ cy=”32″ r=”3″ stroke=”#E8923A” stroke-width=”0.8″/>
<polyline points=”34,27 34,32 39,32″ stroke=”#B87333″ stroke-width=”0.8″ fill=”none”/>
<!– Link symbol –>
<path d=”M24 8 L28 8″ stroke=”#C8935A” stroke-width=”1.5″ stroke-linecap=”round”/>
</svg>
<div class=”service-name”>HYBRID BUILDS</div>
<p class=”service-desc”>Smart furniture, illuminated wooden panels, sensor-embedded tabletops. The perfect union of warm craft and cold logic. Custom smart home pieces that are also art.</p>
<div class=”service-tags”>
<span class=”tag”>Smart Furniture</span>
<span class=”tag”>LED Inlay</span>
<span class=”tag”>Sensor Systems</span>
<span class=”tag”>Custom</span>
</div>
</div>
</div>
</section>
<!– WORK –>
<section id=”work”>
<div class=”work-inner”>
<div class=”section-label”>Portfolio</div>
<h2 class=”section-title”>SELECTED WORK</h2>
<div class=”work-grid”>
<div class=”work-card featured”>
<svg class=”work-card-bg” viewBox=”0 0 600 337″ xmlns=”http://www.w3.org/2000/svg” preserveAspectRatio=”xMidYMid slice”>
<rect width=”600″ height=”337″ fill=”#1a1208″/>
<!– Wood grain pattern –>
<g stroke=”#3D2A10″ stroke-width=”1.2″ opacity=”0.7″>
<path d=”M0 50 Q150 45 300 55 Q450 65 600 50″/>
<path d=”M0 80 Q150 75 300 85 Q450 95 600 80″/>
<path d=”M0 110 Q150 108 300 115 Q450 122 600 112″/>
<path d=”M0 140 Q150 138 300 145 Q450 152 600 142″/>
<path d=”M0 170 Q150 168 300 175 Q450 182 600 172″/>
<path d=”M0 200 Q150 198 300 205 Q450 212 600 202″/>
<path d=”M0 230 Q150 228 300 235 Q450 242 600 232″/>
<path d=”M0 260 Q150 258 300 265 Q450 272 600 262″/>
<path d=”M0 290 Q150 288 300 295 Q450 302 600 292″/>
</g>
<!– Embedded circuit traces –>
<g stroke=”#E8923A” stroke-width=”1″ opacity=”0.6″ fill=”none”>
<polyline points=”80,80 120,80 120,140 200,140″/>
<polyline points=”200,140 280,140 280,80 360,80 360,200 420,200″/>
<polyline points=”420,200 480,200 480,140 560,140″/>
<circle cx=”120″ cy=”80″ r=”4″ fill=”#E8923A” opacity=”0.8″/>
<circle cx=”280″ cy=”140″ r=”4″ fill=”#E8923A” opacity=”0.8″/>
<circle cx=”420″ cy=”200″ r=”4″ fill=”#E8923A” opacity=”0.8″/>
<rect x=”350″ y=”190″ width=”20″ height=”20″ stroke=”#E8923A” fill=”rgba(232,146,58,0.1)”/>
</g>
<!– Highlight –>
<rect width=”600″ height=”337″ fill=”url(#featGrad)”/>
<defs>
<linearGradient id=”featGrad” x1=”0″ y1=”0″ x2=”0″ y2=”1″>
<stop offset=”0%” stop-color=”transparent”/>
<stop offset=”100%” stop-color=”rgba(10,8,4,0.7)”/>
</linearGradient>
</defs>
</svg>
<div class=”work-overlay”>
<div class=”work-cat”>Hybrid Build · 2024</div>
<div class=”work-title”>Smart Walnut Dining Table — Embedded Wireless Charging & LED System</div>
</div>
</div>
<div class=”work-card”>
<svg class=”work-card-bg” viewBox=”0 0 300 225″ xmlns=”http://www.w3.org/2000/svg” preserveAspectRatio=”xMidYMid slice”>
<rect width=”300″ height=”225″ fill=”#0d1a0d”/>
<!– PCB grid –>
<g stroke=”rgba(50,120,50,0.4)” stroke-width=”0.5″>
<line x1=”0″ y1=”20″ x2=”300″ y2=”20″/>
<line x1=”0″ y1=”40″ x2=”300″ y2=”40″/>
<line x1=”0″ y1=”60″ x2=”300″ y2=”60″/>
<line x1=”0″ y1=”80″ x2=”300″ y2=”80″/>
<line x1=”0″ y1=”100″ x2=”300″ y2=”100″/>
<line x1=”0″ y1=”120″ x2=”300″ y2=”120″/>
<line x1=”0″ y1=”140″ x2=”300″ y2=”140″/>
<line x1=”0″ y1=”160″ x2=”300″ y2=”160″/>
<line x1=”0″ y1=”180″ x2=”300″ y2=”180″/>
<line x1=”0″ y1=”200″ x2=”300″ y2=”200″/>
<line x1=”30″ y1=”0″ x2=”30″ y2=”225″/>
<line x1=”60″ y1=”0″ x2=”60″ y2=”225″/>
<line x1=”90″ y1=”0″ x2=”90″ y2=”225″/>
<line x1=”120″ y1=”0″ x2=”120″ y2=”225″/>
<line x1=”150″ y1=”0″ x2=”150″ y2=”225″/>
<line x1=”180″ y1=”0″ x2=”180″ y2=”225″/>
<line x1=”210″ y1=”0″ x2=”210″ y2=”225″/>
<line x1=”240″ y1=”0″ x2=”240″ y2=”225″/>
<line x1=”270″ y1=”0″ x2=”270″ y2=”225″/>
</g>
<g stroke=”#E8923A” stroke-width=”1.2″ fill=”none” opacity=”0.85″>
<polyline points=”30,60 90,60 90,100 180,100 180,60 240,60″/>
<polyline points=”90,100 90,160 150,160″/>
<polyline points=”150,160 210,160 210,100 270,100″/>
<circle cx=”90″ cy=”60″ r=”5″ fill=”rgba(232,146,58,0.3)” stroke=”#E8923A”/>
<circle cx=”180″ cy=”100″ r=”5″ fill=”rgba(232,146,58,0.3)” stroke=”#E8923A”/>
<circle cx=”150″ cy=”160″ r=”5″ fill=”rgba(232,146,58,0.3)” stroke=”#E8923A”/>
<rect x=”105″ y=”50″ width=”30″ height=”20″ fill=”rgba(232,146,58,0.15)” stroke=”#E8923A” stroke-width=”1″/>
</g>
</svg>
<div class=”work-overlay”>
<div class=”work-cat”>Electronics · 2024</div>
<div class=”work-title”>Custom Home Automation PCB</div>
</div>
</div>
<div class=”work-card”>
<svg class=”work-card-bg” viewBox=”0 0 300 225″ xmlns=”http://www.w3.org/2000/svg” preserveAspectRatio=”xMidYMid slice”>
<rect width=”300″ height=”225″ fill=”#1a1208″/>
<g stroke=”#5C3A1E” stroke-width=”1.5″ opacity=”0.8″>
<path d=”M0 30 Q75 25 150 35 Q225 45 300 30″/>
<path d=”M0 55 Q75 50 150 60 Q225 70 300 55″/>
<path d=”M0 80 Q75 78 150 85 Q225 92 300 80″/>
<path d=”M0 105 Q75 103 150 108 Q225 113 300 105″/>
<path d=”M0 130 Q75 128 150 133 Q225 138 300 130″/>
<path d=”M0 155 Q75 153 150 158 Q225 163 300 155″/>
<path d=”M0 180 Q75 178 150 183 Q225 188 300 180″/>
<path d=”M0 205 Q75 203 150 208 Q225 213 300 205″/>
</g>
<!– Chair silhouette –>
<g stroke=”#C8935A” stroke-width=”1.5″ fill=”none” opacity=”0.7″>
<rect x=”80″ y=”60″ width=”140″ height=”90″ rx=”2″/>
<line x1=”80″ y1=”120″ x2=”220″ y2=”120″/>
<line x1=”95″ y1=”150″ x2=”95″ y2=”200″/>
<line x1=”205″ y1=”150″ x2=”205″ y2=”200″/>
<line x1=”110″ y1=”150″ x2=”110″ y2=”200″/>
<line x1=”190″ y1=”150″ x2=”190″ y2=”200″/>
</g>
</svg>
<div class=”work-overlay”>
<div class=”work-cat”>Woodworking · 2023</div>
<div class=”work-title”>Handcrafted Oak Armchair Set</div>
</div>
</div>
<div class=”work-card”>
<svg class=”work-card-bg” viewBox=”0 0 300 225″ xmlns=”http://www.w3.org/2000/svg” preserveAspectRatio=”xMidYMid slice”>
<rect width=”300″ height=”225″ fill=”#12120d”/>
<!– Glowing LED panel effect –>
<g>
<rect x=”30″ y=”30″ width=”240″ height=”165″ rx=”3″ fill=”rgba(232,146,58,0.04)” stroke=”rgba(232,146,58,0.25)” stroke-width=”1″/>
<!– LED grid –>
<g fill=”rgba(232,146,58,0.6)”>
<circle cx=”60″ cy=”60″ r=”2.5″/>
<circle cx=”90″ cy=”60″ r=”2.5″/>
<circle cx=”120″ cy=”60″ r=”2.5″/>
<circle cx=”150″ cy=”60″ r=”2.5″/>
<circle cx=”180″ cy=”60″ r=”2.5″/>
<circle cx=”210″ cy=”60″ r=”2.5″/>
<circle cx=”240″ cy=”60″ r=”2.5″/>
<circle cx=”60″ cy=”90″ r=”2.5″/>
<circle cx=”90″ cy=”90″ r=”2.5″/>
<circle cx=”120″ cy=”90″ r=”2.5″/>
<circle cx=”150″ cy=”90″ r=”2.5″/>
<circle cx=”180″ cy=”90″ r=”2.5″/>
<circle cx=”210″ cy=”90″ r=”2.5″/>
<circle cx=”240″ cy=”90″ r=”2.5″/>
<circle cx=”60″ cy=”120″ r=”2.5″/>
<circle cx=”90″ cy=”120″ r=”2.5″/>
<circle cx=”120″ cy=”120″ r=”2.5″/>
<circle cx=”150″ cy=”120″ r=”2.5″/>
<circle cx=”180″ cy=”120″ r=”2.5″/>
<circle cx=”210″ cy=”120″ r=”2.5″/>
<circle cx=”240″ cy=”120″ r=”2.5″/>
</g>
<!– Wood frame around it –>
<rect x=”20″ y=”20″ width=”260″ height=”185″ rx=”4″ fill=”none” stroke=”#8B5E3C” stroke-width=”3″/>
</g>
</svg>
<div class=”work-overlay”>
<div class=”work-cat”>Hybrid Build · 2023</div>
<div class=”work-title”>Walnut-Frame LED Art Panel</div>
</div>
</div>
</div>
</div>
</section>
<!– PROCESS –>
<section id=”process” style=”padding:7rem 4rem; max-width:900px; margin:0 auto;”>
<div class=”section-label”>How It Works</div>
<h2 class=”section-title”>THE PROCESS</h2>
<div class=”process-steps”>
<div class=”process-step”>
<div class=”step-num”>01</div>
<div class=”step-body”>
<div class=”step-name”>DISCOVERY & BRIEF</div>
<p class=”step-desc”>We begin with a conversation — your vision, your space, your function. No project is too unusual. I listen first, then engineer.</p>
</div>
</div>
<div class=”process-step”>
<div class=”step-num”>02</div>
<div class=”step-body”>
<div class=”step-name”>DESIGN & ENGINEERING</div>
<p class=”step-desc”>Detailed technical drawings and circuit schematics are produced. You see exactly what you’ll receive before a single cut is made or wire soldered.</p>
</div>
</div>
<div class=”process-step”>
<div class=”step-num”>03</div>
<div class=”step-body”>
<div class=”step-name”>MATERIAL SELECTION</div>
<p class=”step-desc”>Wood species, hardware, electronic components — every material is chosen for longevity, aesthetics, and functional synergy.</p>
</div>
</div>
<div class=”process-step”>
<div class=”step-num”>04</div>
<div class=”step-body”>
<div class=”step-name”>CRAFT & BUILD</div>
<p class=”step-desc”>Woodwork and electronics are built in parallel in my dedicated studio. Precise, patient, and without shortcuts. Build time depends on project complexity.</p>
</div>
</div>
<div class=”process-step”>
<div class=”step-num”>05</div>
<div class=”step-body”>
<div class=”step-name”>DELIVERY & HANDOVER</div>
<p class=”step-desc”>White-glove delivery and full setup. Every electronic piece ships with complete documentation, warranty, and direct-line support from me personally.</p>
</div>
</div>
</div>
</section>
<!– CONTACT –>
<section id=”contact”>
<div class=”contact-inner”>
<div class=”section-label”>Get in Touch</div>
<h2 class=”section-title”>START A PROJECT</h2>
<p class=”contact-tagline”>Every great piece begins with a single message.</p>
<form class=”contact-form” onsubmit=”handleSubmit(event)”>
<div class=”form-row”>
<div class=”form-group”>
<label>Your Name</label>
<input type=”text” placeholder=”Ahmed Al-Rashid” required/>
</div>
<div class=”form-group”>
<label>Email Address</label>
<input type=”email” placeholder=”[email protected]” required/>
</div>
</div>
<div class=”form-group”>
<label>Project Type</label>
<select>
<option value=”” disabled selected>Select a service…</option>
<option>Woodworking — Custom Furniture</option>
<option>Electronics — Custom Circuit / PCB</option>
<option>Hybrid — Smart Furniture / Embedded Tech</option>
<option>Consultation</option>
<option>Other</option>
</select>
</div>
<div class=”form-group”>
<label>Tell Me About Your Project</label>
<textarea placeholder=”Describe your idea, dimensions, materials you have in mind, timeline, and budget range…”></textarea>
</div>
<div class=”form-submit”>
<button type=”submit” class=”btn-primary”>Send Message →</button>
</div>
</form>
<div id=”form-success” style=”display:none; margin-top:2rem; padding:1.5rem; border:1px solid rgba(184,115,51,0.3); text-align:center;”>
<p style=”font-family:’JetBrains Mono’,monospace; font-size:0.75rem; letter-spacing:0.2em; color:var(–copper-bright);”>MESSAGE SENT ✓</p>
<p style=”color:rgba(245,240,232,0.5); font-size:0.9rem; margin-top:0.5rem;”>Mahmoud will be in touch within 48 hours.</p>
</div>
</div>
</section>
<!– FOOTER –>
<footer>
<div class=”footer-copy”>© 2025 MAHMOUD ENGINEERING — ALL RIGHTS RESERVED</div>
<div class=”footer-links”>
<a href=”#about”>About</a>
<a href=”#services”>Services</a>
<a href=”#work”>Work</a>
<a href=”#contact”>Contact</a>
</div>
</footer>
<script>
// Smooth nav shrink on scroll
window.addEventListener(‘scroll’, () => {
const nav = document.querySelector(‘nav’);
if (window.scrollY > 60) {
nav.style.padding = ‘0.8rem 4rem’;
} else {
nav.style.padding = ‘1.2rem 4rem’;
}
});
// Form submit
function handleSubmit(e) {
e.preventDefault();
e.target.style.display = ‘none’;
document.getElementById(‘form-success’).style.display = ‘block’;
}
// Scroll reveal
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = ‘1’;
entry.target.style.transform = ‘translateY(0)’;
}
});
}, { threshold: 0.1 });
document.querySelectorAll(‘.service-card, .work-card, .process-step, .stat-box’).forEach(el => {
el.style.opacity = ‘0’;
el.style.transform = ‘translateY(20px)’;
el.style.transition = ‘opacity 0.5s ease, transform 0.5s ease’;
observer.observe(el);
});
</script>
</body>
</html>