<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700;12..96,800&family=Hanken+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
/* ====================== SAAD SARDAR PORTFOLIO STYLES ====================== */
:root{
--bg:#0d0e10;
--bg-2:#121419;
--surface:#16191f;
--surface-2:#1c2027;
--line:rgba(255,255,255,.09);
--line-strong:rgba(255,255,255,.16);
--text:#ece9e3;
--muted:#8d929c;
--muted-2:#62666e;
--accent:#ff5a26;
--accent-soft:rgba(255,90,38,.12);
--font-display:"Bricolage Grotesque",sans-serif;
--font-body:"Hanken Grotesk",sans-serif;
--font-mono:"IBM Plex Mono",monospace;
--maxw:1180px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body.ssp{
background:var(--bg);
color:var(--text);
font-family:var(--font-body);
font-size:17px;
line-height:1.6;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
/* blueprint grid backdrop */
.ssp{
background-image:
linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
background-size:54px 54px;
background-position:center top;
}
.ssp ::selection{background:var(--accent);color:#fff}
.ssp a{color:inherit;text-decoration:none}
.ssp img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.mono{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
/* ---------- image placeholder slots ---------- */
.img-slot{
position:relative;width:100%;aspect-ratio:4/3;
border:1px dashed var(--line-strong);border-radius:10px;
background:
repeating-linear-gradient(45deg,rgba(255,255,255,.02) 0 12px,transparent 12px 24px),
var(--surface);
display:flex;align-items:center;justify-content:center;text-align:center;
color:var(--muted-2);font-family:var(--font-mono);font-size:.68rem;
letter-spacing:.1em;text-transform:uppercase;padding:18px;
}
.img-slot::before{content:"⌖ ";color:var(--accent)}
.img-slot[data-label]::after{content:attr(data-label)}
.slot-img{width:100%;height:100%;object-fit:cover;border-radius:10px;display:block}
/* ---------- nav ---------- */
.nav{
position:fixed;top:0;left:0;right:0;z-index:100;
backdrop-filter:blur(14px);
background:rgba(13,14,16,.72);
border-bottom:1px solid transparent;
transition:border-color .3s,background .3s;
}
.nav.scrolled{border-bottom-color:var(--line);background:rgba(13,14,16,.9)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{font-family:var(--font-display);font-weight:800;font-size:1.15rem;letter-spacing:-.02em;display:flex;align-items:center;gap:10px}
.logo .dot{width:9px;height:9px;background:var(--accent);border-radius:2px;transform:rotate(45deg)}
.nav-links{display:flex;gap:30px;align-items:center}
.nav-links a{font-size:.86rem;color:var(--muted);transition:color .2s;position:relative}
.nav-links a:hover{color:var(--text)}
.nav-cta{
font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
border:1px solid var(--line-strong);padding:9px 16px;border-radius:7px;color:var(--text);
transition:.2s;
}
.nav-cta:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:6px}
.burger span{width:24px;height:2px;background:var(--text);transition:.3s}
/* ---------- hero ---------- */
.hero{position:relative;padding:150px 0 90px;overflow:hidden}
.hero-glow{position:absolute;top:-10%;right:-5%;width:680px;height:680px;
background:radial-gradient(circle,rgba(255,90,38,.16),transparent 62%);
filter:blur(20px);pointer-events:none;z-index:0}
.hero-grid{display:grid;grid-template-columns:1.25fr .9fr;gap:60px;align-items:center;position:relative;z-index:1}
.hero-tag{color:var(--accent);margin-bottom:22px;display:flex;align-items:center;gap:10px}
.hero-tag::before{content:"";width:34px;height:1px;background:var(--accent)}
.hero h1{
font-family:var(--font-display);font-weight:800;line-height:.98;letter-spacing:-.03em;
font-size:clamp(2.7rem,6vw,4.8rem);margin-bottom:18px;
}
.hero h1 .o{color:var(--accent)}
.hero-sub{font-size:1.32rem;color:var(--text);font-weight:600;margin-bottom:14px;font-family:var(--font-display)}
.pillars{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 28px}
.pillars span{
font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
border:1px solid var(--line);padding:7px 13px;border-radius:50px;color:var(--muted);
}
.hero-quote{color:var(--muted);font-size:1.02rem;border-left:2px solid var(--accent);padding-left:18px;margin-bottom:34px;max-width:440px}
.hero-quote b{color:var(--text);font-weight:600}
.btn-row{display:flex;gap:14px;flex-wrap:wrap}
.btn{
font-family:var(--font-mono);font-size:.78rem;letter-spacing:.07em;text-transform:uppercase;
padding:14px 24px;border-radius:8px;transition:.22s;display:inline-flex;align-items:center;gap:9px;cursor:pointer;
}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(255,90,38,.3)}
.btn-ghost{border:1px solid var(--line-strong);color:var(--text)}
.btn-ghost:hover{border-color:var(--text);background:rgba(255,255,255,.04)}
.hero-portrait{position:relative}
.hero-portrait .img-slot{aspect-ratio:4/5;border-radius:14px}
.hero-portrait .slot-img{aspect-ratio:4/5}
.hero-badge{
position:absolute;bottom:-18px;left:-18px;background:var(--surface);border:1px solid var(--line-strong);
border-radius:12px;padding:14px 18px;box-shadow:0 18px 40px rgba(0,0,0,.5);
}
.hero-badge .big{font-family:var(--font-display);font-weight:800;font-size:1.5rem;color:var(--accent)}
.hero-badge .small{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
/* ---------- stats strip ---------- */
.stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-2)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:30px 28px;border-right:1px solid var(--line)}
.stat:last-child{border-right:none}
.stat .num{font-family:var(--font-display);font-weight:800;font-size:2.1rem;line-height:1;letter-spacing:-.02em}
.stat .num .u{color:var(--accent)}
.stat .lab{color:var(--muted);font-size:.86rem;margin-top:8px}
/* ---------- section scaffolding ---------- */
section{position:relative}
.sec-pad{padding:96px 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:48px;flex-wrap:wrap}
.sec-head .mono{color:var(--accent);display:block;margin-bottom:12px}
.sec-head h2{font-family:var(--font-display);font-weight:800;font-size:clamp(1.9rem,3.6vw,2.9rem);letter-spacing:-.02em;line-height:1.04}
.sec-head p{color:var(--muted);max-width:430px}
/* ---------- about ---------- */
.about-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center}
.about-grid .img-slot{aspect-ratio:1/1;border-radius:14px}
.about-grid .slot-img{aspect-ratio:1/1}
.about-text p{color:var(--muted);margin-bottom:18px}
.about-text p b{color:var(--text);font-weight:600}
.chip-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.chip{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:6px 11px}
/* ---------- featured project (FYP) ---------- */
.featured{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}
.feat-medal{display:inline-flex;align-items:center;gap:10px;color:var(--accent);font-family:var(--font-mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;background:var(--accent-soft);border:1px solid rgba(255,90,38,.3);padding:8px 14px;border-radius:50px;margin-bottom:22px}
.feat-grid h3{font-family:var(--font-display);font-weight:800;font-size:clamp(1.6rem,3vw,2.3rem);letter-spacing:-.02em;line-height:1.08;margin-bottom:18px}
.feat-grid p{color:var(--muted);margin-bottom:16px}
.feat-grid p b{color:var(--text)}
.feat-metrics{display:flex;gap:34px;margin:26px 0 10px;flex-wrap:wrap}
.feat-metrics .m .v{font-family:var(--font-display);font-weight:800;font-size:1.8rem;color:var(--accent);line-height:1}
.feat-metrics .m .k{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.feat-stack{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
.feat-stack span{font-family:var(--font-mono);font-size:.68rem;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:5px 10px}
.feat-img .img-slot{aspect-ratio:1/1;border-radius:14px}
.feat-img .slot-img{aspect-ratio:1/1}
/* ---------- projects grid ---------- */
.proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{
background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;
transition:transform .25s,border-color .25s;display:flex;flex-direction:column;
}
.card:hover{transform:translateY(-6px);border-color:var(--line-strong)}
.card .img-slot{border:none;border-radius:0;aspect-ratio:16/10;border-bottom:1px dashed var(--line)}
.card .slot-img{border-radius:0;aspect-ratio:16/10}
.card-body{padding:22px 22px 24px}
.card .tag{color:var(--accent);font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase}
.card h4{font-family:var(--font-display);font-weight:700;font-size:1.22rem;margin:10px 0 8px;letter-spacing:-.01em}
.card p{color:var(--muted);font-size:.92rem}
/* ---------- experience timeline ---------- */
.exp-list{display:flex;flex-direction:column;gap:0}
.exp-item{display:grid;grid-template-columns:200px 1fr;gap:40px;padding:34px 0;border-top:1px solid var(--line)}
.exp-item:last-child{border-bottom:1px solid var(--line)}
.exp-when{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.exp-when .loc{display:block;color:var(--muted-2);margin-top:8px;letter-spacing:.04em}
.exp-body h4{font-family:var(--font-display);font-weight:700;font-size:1.4rem;letter-spacing:-.01em;margin-bottom:6px}
.exp-body .role{color:var(--muted);font-size:.95rem;margin-bottom:16px}
.exp-body ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.exp-body li{color:var(--muted);padding-left:22px;position:relative;font-size:.96rem}
.exp-body li::before{content:"";position:absolute;left:0;top:10px;width:7px;height:7px;background:var(--accent);border-radius:2px;transform:rotate(45deg)}
/* ---------- awards ---------- */
.awards{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.award-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.award{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:26px 24px;transition:.25s}
.award:hover{border-color:var(--accent);background:var(--surface-2)}
.award .yr{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;color:var(--muted-2)}
.award .ttl{font-family:var(--font-display);font-weight:700;font-size:1.12rem;margin:12px 0 8px;letter-spacing:-.01em}
.award .meta{color:var(--muted);font-size:.9rem}
.award .icn{color:var(--accent);font-size:1.1rem;margin-bottom:14px}
/* ---------- activities row ---------- */
.act-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:40px}
.act{border:1px solid var(--line);border-radius:12px;padding:22px 20px}
.act .k{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.act h5{font-family:var(--font-display);font-weight:700;font-size:1.02rem;margin-bottom:6px;line-height:1.2}
.act p{color:var(--muted);font-size:.86rem}
/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.contact-l h2{font-family:var(--font-display);font-weight:800;font-size:clamp(2rem,4vw,3.2rem);letter-spacing:-.02em;line-height:1.04;margin-bottom:18px}
.contact-l p{color:var(--muted);max-width:400px;margin-bottom:30px}
.contact-list{display:flex;flex-direction:column;gap:2px}
.contact-row{display:flex;align-items:center;gap:18px;padding:18px 0;border-top:1px solid var(--line)}
.contact-row:last-child{border-bottom:1px solid var(--line)}
.contact-row .ic{width:42px;height:42px;flex-shrink:0;border:1px solid var(--line-strong);border-radius:9px;display:flex;align-items:center;justify-content:center;color:var(--accent);font-family:var(--font-mono)}
.contact-row .k{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
.contact-row .v{font-size:1.05rem;color:var(--text)}
.contact-cta{margin-top:32px}
/* ---------- footer ---------- */
.foot{padding:40px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
.foot .mono{color:var(--muted-2)}
.foot-links{display:flex;gap:22px}
.foot-links a{font-size:.86rem;color:var(--muted);transition:.2s}
.foot-links a:hover{color:var(--accent)}
/* ---------- reveal animation ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.hero .reveal{transition-delay:var(--d,0s)}
/* ---------- responsive ---------- */
@media(max-width:980px){
.hero-grid,.about-grid,.feat-grid,.contact-grid{grid-template-columns:1fr;gap:42px}
.hero-portrait{max-width:380px}
.proj-grid,.award-grid{grid-template-columns:repeat(2,1fr)}
.stats-grid{grid-template-columns:repeat(2,1fr)}
.stat:nth-child(2){border-right:none}
.stat:nth-child(1),.stat:nth-child(2){border-bottom:1px solid var(--line)}
.act-grid{grid-template-columns:repeat(2,1fr)}
.exp-item{grid-template-columns:1fr;gap:16px}
}
@media(max-width:620px){
body.ssp{font-size:16px}
.nav-links{
position:fixed;inset:72px 0 auto 0;flex-direction:column;background:rgba(13,14,16,.97);
padding:24px 28px;gap:18px;border-bottom:1px solid var(--line);
transform:translateY(-130%);transition:transform .35s;align-items:flex-start;
}
.nav-links.open{transform:none}
.burger{display:flex}
.proj-grid,.award-grid,.act-grid,.stats-grid{grid-template-columns:1fr}
.stat{border-right:none;border-bottom:1px solid var(--line)}
.sec-pad{padding:70px 0}
.feat-metrics{gap:24px}
}
</style>
<!-- ============================== BODY ============================== -->
<body class="ssp">
<!-- NAV -->
<nav class="nav" id="nav">
<div class="wrap nav-inner">
<a href="#top" class="logo"><span class="dot"></span>SAAD SARDAR</a>
<div class="nav-links" id="navLinks">
<a href="#about">About</a>
<a href="#fyp">Flagship</a>
<a href="#projects">Projects</a>
<a href="#experience">Experience</a>
<a href="#awards">Awards</a>
<a href="#contact" class="nav-cta">Get in touch</a>
</div>
<div class="burger" id="burger"><span></span><span></span><span></span></div>
</div>
</nav>
<!-- HERO -->
<header class="hero" id="top">
<div class="hero-glow"></div>
<div class="wrap hero-grid">
<div class="hero-copy">
<div class="hero-tag mono reveal" style="--d:0s">Mechanical Engineer · NUST</div>
<h1 class="reveal" style="--d:.08s">Building smarter<br>industrial <span class="o">systems.</span></h1>
<p class="hero-sub reveal" style="--d:.16s">Manufacturing · Maintenance · Automation · Industry 4.0</p>
<div class="pillars reveal" style="--d:.22s">
<span>Smart Manufacturing</span><span>IoT & Sensors</span><span>Digital Twin</span><span>AI Quality Control</span>
</div>
<p class="hero-quote reveal" style="--d:.3s">Give me a machine, I'll automate it. Give me a process, I'll optimize it. Give me a problem, <b>I'll turn it into a full engineering project.</b></p>
<div class="btn-row reveal" style="--d:.38s">
<!-- Upload your CV to Media Library and paste its URL below -->
<a class="btn btn-primary" href="REPLACE_WITH_RESUME_PDF_URL" target="_blank" rel="noopener">Download Resume ↓</a>
<a class="btn btn-ghost" href="#projects">View Work</a>
</div>
</div>
<div class="hero-portrait reveal" style="--d:.2s">
<!-- Replace this whole div with: <img class="slot-img" src="YOUR_URL" alt="Saad Sardar"> -->
<div class="img-slot" data-label="Portrait / profile photo · 800×1000"></div>
<div class="hero-badge">
<div class="big">Gold</div>
<div class="small">Rector's Medal · FYP</div>
</div>
</div>
</div>
</header>
<!-- STATS -->
<section class="stats">
<div class="wrap stats-grid">
<div class="stat reveal"><div class="num">92<span class="u">%</span></div><div class="lab">AI defect detection accuracy</div></div>
<div class="stat reveal"><div class="num">3<span class="u">×</span></div><div class="lab">NUST High Achiever Awards</div></div>
<div class="stat reveal"><div class="num">2</div><div class="lab">Industrial internships</div></div>
<div class="stat reveal"><div class="num">5<span class="u">+</span></div><div class="lab">Engineering projects shipped</div></div>
</div>
</section>
<!-- ABOUT / JOURNEY -->
<section class="sec-pad" id="about">
<div class="wrap about-grid">
<div class="reveal">
<!-- Replace with: <img class="slot-img" src="YOUR_URL" alt="Saad at NUST"> -->
<div class="img-slot" data-label="Candid / NUST photo · 700×700"></div>
</div>
<div class="about-text reveal">
<div class="sec-head" style="margin-bottom:24px">
<div><span class="mono">01 — My Journey</span><h2>Engineer first.<br>Problem solver always.</h2></div>
</div>
<p>I'm a mechanical engineer trained at <b>NUST, Pakistan's top engineering university</b>, with a focus on manufacturing, maintenance, and the practical side of Industry 4.0. I like systems that sense their own condition, decide, and improve themselves.</p>
<p>That interest turned into a final year project that won the <b>Rector's Gold Medal</b>: a smart 3D printer that catches its own print defects using AI and a digital twin. Along the way I picked up real shop-floor experience at <b>Atlas Honda</b> and <b>Kohinoor Textile Mills</b>, working with die-casting, engine assembly, power generation, and PLC/SCADA systems.</p>
<p>I'm now looking for mechanical engineering and management trainee roles where I can build, automate, and optimize real industrial processes.</p>
<div class="chip-row">
<span class="chip">SolidWorks</span><span class="chip">AutoCAD</span><span class="chip">CFD</span>
<span class="chip">Arduino / ESP32</span><span class="chip">PLC / SCADA</span><span class="chip">SAP PM</span>
<span class="chip">Lean Manufacturing</span><span class="chip">Python</span>
</div>
</div>
</div>
</section>
<!-- FEATURED PROJECT (FYP) -->
<section class="featured sec-pad" id="fyp">
<div class="wrap feat-grid">
<div class="feat-copy reveal">
<div class="feat-medal">★ Rector's Gold Medal · Final Year Project</div>
<h3>Smart FDM 3D Printer with AI-Enabled Quality Control</h3>
<p>A three-tier system that watches a 3D print as it happens and flags failures before they waste filament and time. I <b>led the IoT integration and testing</b> within a four-person team.</p>
<p>It combines a <b>multi-modal AI engine</b>, a <b>digital twin verifier powered by Gemini</b>, and a full IoT sensor stack feeding live data from the machine into the cloud.</p>
<div class="feat-metrics">
<div class="m"><div class="v">92%</div><div class="k">Defect detection</div></div>
<div class="m"><div class="v">3-tier</div><div class="k">System architecture</div></div>
<div class="m"><div class="v">Real-time</div><div class="k">Sensor monitoring</div></div>
</div>
<div class="feat-stack">
<span>Raspberry Pi 4</span><span>ESP32-S3</span><span>Pi Cam V2</span><span>MPU6050</span><span>ACS712</span><span>INMP441</span><span>Gemini API</span>
</div>
</div>
<div class="feat-img reveal">
<!-- Replace with: <img class="slot-img" src="YOUR_URL" alt="Smart 3D printer / architecture diagram"> -->
<div class="img-slot" data-label="3D printer or architecture diagram · 900×900"></div>
</div>
</div>
</section>
<!-- PROJECTS -->
<section class="sec-pad" id="projects">
<div class="wrap">
<div class="sec-head reveal">
<div><span class="mono">02 — Selected Work</span><h2>Projects & builds</h2></div>
<p>A mix of design, simulation, embedded systems, and real-time monitoring work from coursework and competitions.</p>
</div>
<div class="proj-grid">
<article class="card reveal">
<!-- Replace with: <img class="slot-img" src="YOUR_URL" alt="CNC Drawing Machine"> -->
<div class="img-slot" data-label="CNC machine · 640×400"></div>
<div class="card-body">
<span class="tag">AutoCAD + Arduino</span>
<h4>CNC Drawing Machine</h4>
<p>A 2-axis plotter that converts vector drawings into precise motor paths via Arduino control.</p>
</div>
</article>
<article class="card reveal">
<!-- Replace with: <img class="slot-img" src="YOUR_URL" alt="HVAC System"> -->
<div class="img-slot" data-label="HVAC design · 640×400"></div>
<div class="card-body">
<span class="tag">SolidWorks Simulation</span>
<h4>HVAC System Design</h4>
<p>Thermal and airflow design of an HVAC layout, validated with SolidWorks flow simulation.</p>
</div>
</article>
<article class="card reveal">
<!-- Replace with: <img class="slot-img" src="YOUR_URL" alt="Line Following Robot"> -->
<div class="img-slot" data-label="Line robot · 640×400"></div>
<div class="card-body">
<span class="tag">Embedded Systems</span>
<h4>Line Following Robot</h4>
<p>An autonomous robot using IR sensing and a control loop to track and correct its path.</p>
</div>
</article>
<article class="card reveal">
<!-- Replace with: <img class="slot-img" src="YOUR_URL" alt="RPM and Voltage Monitor"> -->
<div class="img-slot" data-label="Monitoring dashboard · 640×400"></div>
<div class="card-body">
<span class="tag">Real-time Dashboard</span>
<h4>RPM & Voltage Monitor</h4>
<p>A live dashboard reading machine RPM and voltage for condition monitoring.</p>
</div>
</article>
<article class="card reveal">
<!-- Replace with: <img class="slot-img" src="YOUR_URL" alt="Turbofan Engine Model"> -->
<div class="img-slot" data-label="Turbofan / CFD · 640×400"></div>
<div class="card-body">
<span class="tag">CFD Analysis</span>
<h4>Turbofan Engine Model</h4>
<p>A CFD study of turbofan flow behaviour, modelling pressure and velocity fields.</p>
</div>
</article>
<article class="card reveal">
<!-- Replace with: <img class="slot-img" src="YOUR_URL" alt="EHPV Vehicle"> -->
<div class="img-slot" data-label="EHPV vehicle · 640×400"></div>
<div class="card-body">
<span class="tag">Manufacturing · Winner</span>
<h4>Electric-Human Powered Vehicle</h4>
<p>Award-winning vehicle build, first place in the EHPV manufacturing competition.</p>
</div>
</article>
</div>
</div>
</section>
<!-- EXPERIENCE -->
<section class="sec-pad" id="experience" style="border-top:1px solid var(--line)">
<div class="wrap">
<div class="sec-head reveal">
<div><span class="mono">03 — Industry Experience</span><h2>On the shop floor</h2></div>
<p>Hands-on internships across automotive manufacturing and textile power generation.</p>
</div>
<div class="exp-list">
<div class="exp-item reveal">
<div class="exp-when">Jul — Aug 2025<span class="loc">Kohinoor Textile Mills Ltd.</span></div>
<div class="exp-body">
<h4>Mechanical Intern</h4>
<div class="role">Maintenance & Power Generation</div>
<ul>
<li>Assisted in preventive maintenance of 3 power generation units: Wartsila, Niigata, and Jenbacher.</li>
<li>Analyzed real-time production parameters through PLC/SCADA to support operational efficiency.</li>
<li>Worked with SAP PM for maintenance planning and equipment records.</li>
</ul>
</div>
</div>
<div class="exp-item reveal">
<div class="exp-when">Jul — Aug 2023<span class="loc">Atlas Honda Ltd.</span></div>
<div class="exp-body">
<h4>Mechanical Intern</h4>
<div class="role">Manufacturing & Quality Control</div>
<ul>
<li>Supported manufacturing and quality control on HPDC and LPDC die-casting machines and the engine assembly line.</li>
<li>Conducted inspections of vehicle parts against manufacturing standards.</li>
<li>Observed lean manufacturing practices on a live production line.</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- AWARDS -->
<section class="awards sec-pad" id="awards">
<div class="wrap">
<div class="sec-head reveal">
<div><span class="mono">04 — Recognition</span><h2>Awards & honours</h2></div>
<p>Competition wins and consistent academic recognition at NUST.</p>
</div>
<div class="award-grid">
<div class="award reveal"><div class="icn">★</div><div class="yr">2026</div><div class="ttl">Rector's Gold Medal</div><div class="meta">AI-Enabled Quality Control in FDM 3D Printing (Final Year Project).</div></div>
<div class="award reveal"><div class="icn">◆</div><div class="yr">2024</div><div class="ttl">Winner — Zindigi Prize</div><div class="meta">EME Campus, NUST.</div></div>
<div class="award reveal"><div class="icn">◆</div><div class="yr">2024</div><div class="ttl">Winner — COMPPEC Ideathon</div><div class="meta">NUST engineering ideation competition.</div></div>
<div class="award reveal"><div class="icn">◆</div><div class="yr">—</div><div class="ttl">Winner — EHPV Competition</div><div class="meta">Electric-Human Powered Vehicle manufacturing contest.</div></div>
<div class="award reveal"><div class="icn">▲</div><div class="yr">3×</div><div class="ttl">NUST High Achiever Award</div><div class="meta">Certificate of Appreciation, awarded three times.</div></div>
</div>
<!-- LEADERSHIP & ACTIVITIES -->
<div class="act-grid">
<div class="act reveal"><div class="k">Leadership · 2024</div><h5>Promotions Lead, ASME EFx</h5><p>Led promotions and outreach for ASME's flagship engineering event at EME, NUST.</p></div>
<div class="act reveal"><div class="k">Leadership · 2023</div><h5>Athletics Lead, EME Olympiad</h5><p>Coordinated athletics for the campus Olympiad event.</p></div>
<div class="act reveal"><div class="k">Work · 2024–2026</div><h5>SEO Link Building, Batlinks (Estonia)</h5><p>Built brand visibility for global clients and sharpened business communication.</p></div>
<div class="act reveal"><div class="k">Volunteer · 2025–2026</div><h5>Alkhidmat Organization</h5><p>Community service and welfare volunteering.</p></div>
</div>
</div>
</section>
<!-- CONTACT -->
<section class="sec-pad" id="contact" style="border-top:1px solid var(--line)">
<div class="wrap contact-grid">
<div class="contact-l reveal">
<span class="mono" style="color:var(--accent);display:block;margin-bottom:14px">05 — Contact</span>
<h2>Let's build something.</h2>
<p>Open to mechanical engineering and management trainee roles across Pakistan and the Gulf. Reach out and I'll get back quickly.</p>
<a class="btn btn-primary contact-cta" href="mailto:sardarsaad.seo@gmail.com">Email me →</a>
</div>
<div class="contact-r reveal">
<div class="contact-list">
<a class="contact-row" href="mailto:sardarsaad.seo@gmail.com">
<div class="ic">@</div>
<div><div class="k">Email</div><div class="v">sardarsaad.seo@gmail.com</div></div>
</a>
<a class="contact-row" href="tel:+923197374139">
<div class="ic">☎</div>
<div><div class="k">Phone</div><div class="v">+92 319 7374139</div></div>
</a>
<div class="contact-row">
<div class="ic">⌖</div>
<div><div class="k">Location</div><div class="v">Sheikhupura, Punjab, Pakistan</div></div>
</div>
</div>
</div>
</div>
</section>
<!-- FOOTER -->
<footer class="wrap foot">
<div class="mono">© 2026 Saad Sardar · Mechanical Engineer</div>
<div class="foot-links">
<a href="#about">About</a>
<a href="#projects">Projects</a>
<a href="#contact">Contact</a>
<!-- Add your LinkedIn URL below -->
<a href="REPLACE_WITH_LINKEDIN_URL" target="_blank" rel="noopener">LinkedIn</a>
</div>
</footer>
<script>
/* ---- nav scroll state ---- */
const nav=document.getElementById('nav');
addEventListener('scroll',()=>nav.classList.toggle('scrolled',scrollY>20));
/* ---- mobile menu ---- */
const burger=document.getElementById('burger'),links=document.getElementById('navLinks');
burger.addEventListener('click',()=>links.classList.toggle('open'));
links.querySelectorAll('a').forEach(a=>a.addEventListener('click',()=>links.classList.remove('open')));
/* ---- scroll reveal ---- */
const io=new IntersectionObserver((entries)=>{
entries.forEach(e=>{if(e.isIntersecting){e.target.classList.add('in');io.unobserve(e.target);}});
},{threshold:.12});
document.querySelectorAll('.reveal').forEach(el=>io.observe(el));
/* hero reveals fire immediately on load */
addEventListener('load',()=>{
document.querySelectorAll('.hero .reveal').forEach(el=>el.classList.add('in'));
});
</script>
