resume.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mohamad Firdaus - Resume</title>
<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=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
  @page { margin: 0; size: A4; }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  
  body {
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 8pt;
    line-height: 1.4;
    color: #333;
    background: #eee;
    padding: 20px;
  }

  .page {
    width: 210mm;
    min-height: 297mm;
    margin: 0 auto;
    background: #fff;
    display: grid;
    grid-template-columns: 195px 1fr;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    overflow: hidden;
  }

  /* SIDEBAR */
  .sidebar {
      background: #1a1a2e;
      color: #ccc;
      padding: 28px 16px 24px;
      display: flex;
      flex-direction: column;
      gap: 18px;
    }

  .sidebar h3 {
    color: #22c55e;
    font-size: 7pt;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    border-bottom: 1.5px solid #22c55e;
    padding-bottom: 3px;
    margin-bottom: 5px;
  }

  .sidebar .contact-row {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 7pt;
    color: #bbb;
    margin-bottom: 2px;
  }

  .sidebar .contact-row a.sidebar-link {
    color: #bbb;
    text-decoration: none;
  }
  .sidebar .contact-row a.sidebar-link:hover {
    color: #4ade80;
    text-decoration: underline;
  }

  .sidebar .contact-row .icon {
    width: 13px;
    text-align: center;
    font-size: 7pt;
  }

  .sidebar .tag {
      display: inline-block;
      background: rgba(34, 197, 94, 0.06);
      color: #74c69d;
      font-size: 6.5pt;
      padding: 1.5px 7px;
      border-radius: 3px;
      margin: 1px 0;
    }

    .skills-cluster {
      margin-top: 5px;
    }
    .skills-cluster-name {
      font-size: 5.8pt;
      font-weight: 600;
      color: #8a8a9a;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      margin-bottom: 2px;
    }

  .sidebar .item {
    font-size: 7pt;
    line-height: 1.5;
    color: #bbb;
  }

  .sidebar .item strong {
    color: #ddd;
  }

  /* MAIN */
  .main {
    padding: 28px 28px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .header h1 {
    font-size: 20pt;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: #111;
    line-height: 1.1;
  }

  .header .hook {
    font-size: 9pt;
    font-weight: 600;
    color: #22c55e;
    margin-top: 1px;
  }

  .header .sub {
    font-size: 7pt;
    color: #777;
    margin-top: 3px;
  }

  .section-title {
    font-size: 7.5pt;
    font-weight: 700;
    color: #22c55e;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    border-bottom: 1.5px solid #22c55e;
    padding-bottom: 2px;
    margin-bottom: 6px;
  }

  .value-prop {
    background: #f0fdf4;
    border-left: 3px solid #22c55e;
    padding: 7px 12px;
    font-size: 7.5pt;
    color: #166534;
    line-height: 1.5;
    border-radius: 0 3px 3px 0;
  }

  .exp-item {
    margin-bottom: 7px;
  }

  .exp-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
  }

  .exp-header .title {
    font-size: 8.5pt;
    font-weight: 700;
    color: #111;
  }

  .exp-header .period {
      font-size: 7pt;
      color: #777;
      font-weight: 600;
      white-space: nowrap;
      margin-left: 8px;
    }

  .exp-company {
    font-size: 7.5pt;
    color: #555;
    font-weight: 500;
    margin-bottom: 2px;
  }

  .exp-bullets {
    list-style: none;
    padding-left: 12px;
  }

  .exp-bullets li {
    font-size: 7.2pt;
    color: #444;
    line-height: 1.45;
    margin-bottom: 1px;
    position: relative;
  }

  .exp-bullets li::before {
    content: '';
    position: absolute;
    left: -9px;
    top: 6px;
    width: 3.5px;
    height: 3.5px;
    background: #22c55e;
    border-radius: 50%;
  }

  .projects-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 16px;
  }

  .project-item .proj-title {
    font-weight: 700;
    font-size: 7.5pt;
    color: #111;
  }

  .project-item .proj-desc {
    font-size: 7pt;
    color: #555;
    line-height: 1.45;
  }

  .project-item .proj-stack {
      font-size: 7pt;
      color: #666;
    }

  .closer {
    background: #f0fdf4;
    border-left: 3px solid #22c55e;
    padding: 7px 12px;
    font-size: 7.5pt;
    color: #166534;
    line-height: 1.5;
    border-radius: 0 3px 3px 0;
    margin-top: auto;
  }

  .closer strong {
    color: #15803d;
  }

  @media print {
    body { background: #fff; padding: 0; }
    .page { box-shadow: none; }
  }
</style>
</head>
<body>
<div class="page">

  <!-- SIDEBAR -->
  <div class="sidebar">
    <div>
      <h3>Contact</h3>
      <div class="contact-row"><span class="icon">📞</span> 014-3043514</div>
      <div class="contact-row"><span class="icon">✉️</span> <a href="mailto:fdfrontdev@gmail.com" class="sidebar-link">fdfrontdev@gmail.com</a></div>
      <div class="contact-row"><span class="icon">📍</span> Balik Pulau, Penang</div>
      <div class="contact-row"><span class="icon">💬</span> <a href="https://wa.me/60143043514" class="sidebar-link" target="_blank">WhatsApp</a></div>
            <div class="contact-row"><span class="icon">🔗</span> <a href="https://www.linkedin.com/in/mohamad-firdaus-mohamad-fauzi-310672294" class="sidebar-link" target="_blank">LinkedIn</a></div>
            <div class="contact-row"><span class="icon">🐙</span> <a href="https://github.com/fdfrontdev" class="sidebar-link" target="_blank">github.com/fdfrontdev</a></div>
            <div class="contact-row"><span class="icon">🌐</span> <a href="https://fdfrontdev.github.io/web-profile-deploy/" class="sidebar-link" target="_blank">fdfrontdev.github.io</a></div>
    </div>

    <div>
          <h3>Skills</h3>
          <div class="item">
            <div class="skills-cluster">
              <div class="skills-cluster-name">Systems · Enterprise</div>
              <span class="tag">ERP Architecture</span><span class="tag">MES / Industry 4.0</span><span class="tag">Real-Time Systems</span><span class="tag">C#</span><span class="tag">.NET</span><span class="tag">ASP.NET Core</span><span class="tag">Entity Framework</span><span class="tag">Microsoft SQL Server</span><span class="tag">Docker</span>
            </div>
            <div class="skills-cluster">
              <div class="skills-cluster-name">Web · Full-Stack</div>
              <span class="tag">Nuxt 3 / Vue 3</span><span class="tag">Vuetify</span><span class="tag">TypeScript</span><span class="tag">Prisma</span><span class="tag">PostgreSQL</span><span class="tag">FastAPI</span>
            </div>
            <div class="skills-cluster">
              <div class="skills-cluster-name">Data · AI · Quality</div>
              <span class="tag">Python</span><span class="tag">Scikit-Learn</span><span class="tag">Git / CI/CD</span><span class="tag">TDD</span>
            </div>
          </div>
        </div>

    <div>
      <h3>Education</h3>
      <div class="item">
        <strong>UniKL MIIT</strong><br>
        B.Comp (Hons) Entrepreneurial Mgmt<br>
        CGPA 3.30 | Dean's List 2x<br>
        Exchange: Yonsei Univ. S.Korea<br>
        Best Final Year Project 2012
      </div>
    </div>

    <div>
      <h3>Highlights</h3>
      <div class="item">
        • Built ERP replacing SAP<br>
        • 7 production systems from scratch<br>
        • Led team as pioneer employee<br>
        • Best FYP award 2012
      </div>
    </div>

    <div>
          <h3>Languages</h3>
          <div class="item">Malay (Native)<br>English (Professional)</div>
        </div>

        <div style="margin-top: auto;">
          <h3>Availability</h3>
                <div class="item">
                  Full-Time<br>Penang + Remote
                </div>
          <div class="item" style="margin-top:10px;color:#8a8a9a;font-size:6.5pt;line-height:1.5;">
            🏗️ Built under <strong style="color:#bbb;">FIRDAUS BUILDS</strong> — one rule: if it doesn't work for real people, it doesn't ship.
          </div>
        </div>
  </div>

  <!-- MAIN -->
  <div class="main">
    <div class="header">
      <h1>Mohamad Firdaus</h1>
      <div class="hook">ERP/MES &amp; Workflow Systems · C#/.NET · Python · Full-Stack Delivery</div>
      <div class="sub">Senior Software Engineer · Manufacturing Systems · Workflow Automation · Balik Pulau, Penang</div>
    </div>

    <div class="value-prop">
          <strong>Profile —</strong> Senior software engineer who builds reliable software around real operating workflows. Architected and built a production ERP replacing SAP/Navision for refinery operations across manufacturing execution, supply chain, finance, HR and procurement. Strongest evidence is end-to-end delivery: requirements, architecture, C#/.NET foundations, Nuxt/Vue/TypeScript, Python, SQL, testing and supportability.
        </div>

    <div>
      <div class="section-title">Experience</div>

      <div class="exp-item">
        <div class="exp-header">
                  <span class="title" style="color:#15803d;">Senior Software Engineer / Head of Software</span>
                  <span class="period">2024 – Aug 2026</span>
                </div>
                <div class="exp-company">GlobalIoT Sdn Bhd</div>
                <ul class="exp-bullets">
                  <li>Architected and built the company's core ERP replacing SAP/Navision — manufacturing execution for palm oil refinery operations (supply chain, finance, HR, procurement)</li>
                  <li>Designed the system around operational continuity, data integrity, and support after release</li>
                  <li>Led a team of engineers, established code review, CI/CD, and development standards</li>
                  <li>Owned requirements, architecture, development, QA, support and mentoring across the delivery lifecycle</li>
                  <li>Delivered production software for a confidential refinery client</li>
                </ul>
      </div>

      <div class="exp-item">
        <div class="exp-header">
          <span class="title">Web Developer</span>
          <span class="period">2022 – 2024</span>
        </div>
        <div class="exp-company">ePandu Sdn Bhd</div>
        <ul class="exp-bullets">
          <li>Built job portal with merchant subscriptions generating recurring revenue</li>
          <li>Built full e-commerce platform — product management, payments, fulfillment</li>
        </ul>
      </div>

      <div class="exp-item">
        <div class="exp-header">
          <span class="title">E-Commerce Developer</span>
          <span class="period">Jan – Dec 2021</span>
        </div>
        <div class="exp-company">GAMA Supermarket &amp; Dept Store</div>
        <ul class="exp-bullets">
                  <li>Built e-commerce platform from scratch for a major retail chain; ran the department end-to-end — product, payments, fulfillment</li>
                </ul>
      </div>

      <div class="exp-item">
        <div class="exp-header">
          <span class="title">IT Support Specialist</span>
          <span class="period">2019 – 2020</span>
        </div>
        <div class="exp-company">DISTED College</div>
        <ul class="exp-bullets">
          <li>Built library mgmt, ticketing, and knowledge base systems in-house</li>
          <li>Automated audit processes. Maintained ISO 9001</li>
        </ul>
      </div>

      <div class="exp-item">
        <div class="exp-header">
          <span class="title">Asst. IT Supervisor</span>
          <span class="period">2016 – 2018</span>
        </div>
        <div class="exp-company">GAMA Supermarket &amp; Dept Store</div>
        <ul class="exp-bullets">
          <li>Led company-wide POS deployment. Built ticketing and knowledge base systems</li>
        </ul>
      </div>

      <div class="exp-item">
        <div class="exp-header">
          <span class="title">Software Engineer</span>
          <span class="period">2012 – 2015</span>
        </div>
        <div class="exp-company">UniKL Resources Sdn Bhd</div>
        <ul class="exp-bullets">
          <li>Extended Microsoft Dynamics AX (enterprise .NET ecosystem) via custom plugins — financial workflows, SQL Server-backed data</li>
          <li>Developed a financial system for MARA (government agency) — complex financial workflows</li>
          <li>Built web services integrating with e-Perolehan (government e-procurement)</li>
        </ul>
      </div>
    </div>

    <div>
      <div class="section-title">Selected Evidence</div>
      <div class="projects-grid">
        <div class="project-item">
          <div class="proj-title">Enterprise ERP — Refinery Operations</div>
          <div class="proj-desc">Production ERP replacing SAP/Navision across manufacturing execution, supply chain, finance, HR and procurement.</div>
          <div class="proj-stack">Nuxt · Vue · TypeScript · Prisma · MariaDB</div>
        </div>
        <div class="project-item">
          <div class="proj-title">CHRONO — GTA V Mod (C# / .NET)</div>
          <div class="proj-desc">Public release with 526 automated tests, 0 warnings, a custom installer and a release pipeline.</div>
          <div class="proj-stack">C# · .NET · ScriptHookVDotNet · TDD</div>
        </div>
        <div class="project-item">
          <div class="proj-title">EMS — Engineering Management SaaS</div>
          <div class="proj-desc">Delivery system for requirements, standards, project work and evidence.</div>
          <div class="proj-stack">Nuxt · Vue · Vuetify · Prisma · TypeScript</div>
        </div>
        <div class="project-item">
          <div class="proj-title">Second Brain — AI Knowledge System</div>
          <div class="proj-desc">Private knowledge system with semantic search, knowledge graphs and more than 125,000 documents.</div>
          <div class="proj-stack">Python · ChromaDB · FastAPI · SQLite</div>
        </div>
      </div>
    </div>

    <div class="closer">
      <strong>What I bring —</strong> I turn operating requirements into software that can be tested, supported and improved after release.
      I lead across analysis, architecture, development, QA and delivery, with evidence behind the work.<br>
      <span style="font-weight:400;">References available on request.</span>
    </div>
  </div>

</div>
</body>
</html>