Portfolio/cv.html at main · PreLabHomework/Portfolio · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="theme-color" content="#0a0e16" />
  <meta name="description" content="Hamza Abu Khalaf Al Takrouri. Senior Computer & Electrical Engineer at Saint Louis University. Resume." />
  <title>Hamza Al Takrouri · CV</title>

  <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%230a0e16'/%3E%3Cpath d='M8 8 L8 24 M8 16 L20 16 M20 8 L20 24' stroke='%23ffd166' stroke-width='3' stroke-linecap='square' fill='none'/%3E%3Crect x='24' y='22' width='4' height='4' fill='%23ef476f'/%3E%3C/svg%3E" />

  <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=Oswald:wght@400;500;600;700&family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600;700&display=swap" rel="stylesheet">

  <link rel="stylesheet" href="cv.css" />
</head>
<body class="cv-body">

  <!-- subtle WebGL ambient bg -->
  <canvas id="cv-bg"></canvas>

  <!-- TOP BAR ============================================== -->
  <header class="cv-topbar">
    <div class="cv-topbar-inner">
      <div class="cv-mark">
        <span class="cv-mark-corner tl"></span>
        <span class="cv-mark-corner tr"></span>
        <span class="cv-mark-corner bl"></span>
        <span class="cv-mark-corner br"></span>
        <span class="cv-mark-name">HAMZA<span class="cv-mark-dim">'S HOUSE</span></span>
        <span class="cv-mark-mode">PROFESSIONAL MODE</span>
      </div>

      <div class="cv-mode-actions">
        <a href="index.html" class="cv-mode-toggle home-toggle" aria-label="Back to start screen">
          <span class="cmt-arrow">▸</span>
          <span class="cmt-label">HOME</span>
        </a>
        <button type="button" class="cv-mode-toggle resume-toggle resume-picker-btn" aria-label="Select resume">
          <span class="cmt-arrow">▸</span>
          <span class="cmt-label">RESUME PDF</span>
        </button>
        <a href="index.html#interactive" class="cv-mode-toggle arena-toggle" aria-label="Switch to arena mode">
          <span class="cmt-arrow">▸</span>
          <span class="cmt-label">ARENA MODE</span>
        </a>
      </div>
    </div>
  </header>

  <!-- LAYOUT ================================================ -->
  <div class="cv-shell">

    <!-- STICKY RAIL ======================================= -->
    <aside class="cv-rail" id="cv-rail" aria-label="Section navigation">
      <div class="cv-rail-inner">

        <div class="cv-rail-id">
          <div class="cv-rail-title">HAMZA ABU KHALAF</div>
          <div class="cv-rail-sub">Computer & Electrical Engineer</div>
          <div class="cv-rail-loc">contact: hamzaabukat@gmail.com</div>
        </div>

        <nav class="cv-nav" id="cv-nav" aria-label="Sections">
          <!-- nav items rendered by cv.js -->
        </nav>

        <div class="cv-rail-foot">
          <button type="button" class="cv-rail-link resume-picker-btn" style="background:none;border:none;padding:0;color:inherit;font:inherit;cursor:pointer;text-align:left;width:100%;">
            <span class="cvr-icn" aria-hidden="true">↓</span> Resume PDF
          </button>
          <a class="cv-rail-link" href="mailto:hamzaabukat@gmail.com">
            <span class="cvr-icn" aria-hidden="true">▸</span> Email
          </a>
          <a class="cv-rail-link" href="tel:+15716637706">
            <span class="cvr-icn" aria-hidden="true">▸</span> +1 571-663-7706
          </a>
          <a class="cv-rail-link" href="https://www.linkedin.com/in/hakat/" target="_blank" rel="noopener">
            <span class="cvr-icn" aria-hidden="true">▸</span> LinkedIn
          </a>
          <a class="cv-rail-link" href="https://github.com/PreLabHomework" target="_blank" rel="noopener">
            <span class="cvr-icn" aria-hidden="true">▸</span> GitHub
          </a>
        </div>

      </div>
    </aside>

    <!-- MAIN CONTENT ====================================== -->
    <main class="cv-main" id="cv-main">

      <!-- HERO HEADER -->
      <section class="cv-hero" id="hero">
        <div class="cv-hero-tag">PROFESSIONAL MODE / IDENTITY</div>
        <h1 class="cv-hero-name">
          <span class="cv-hero-first">HAMZA</span>
          <span class="cv-hero-rest">ABU KHALAF AL TAKROURI</span>
        </h1>
        <div class="cv-hero-role">Computer & Electrical Engineer · Saint Louis University · Graduated May 2026</div>
        <div class="cv-hero-divider"></div>
        <p class="cv-hero-pitch">
          Two focused engineering identities: Abu (embedded firmware, hardware-software co-design, RTOS, ESP32, FPGA) and Akat (software engineering, applied AI, ML systems, data pipelines). Rare depth across both without being a generalist. Everything shipped, won awards, or got used for real.
        </p>
        <div class="cv-hero-signal" aria-label="Recruiter summary">
          <div><span>Abu track</span><strong>Embedded Firmware · Hardware Bring-Up · RTOS · IoT · Medical Device</strong></div>
          <div><span>Akat track</span><strong>Software Eng · ML Engineer · Applied AI · Data Engineering</strong></div>
          <div><span>Research edge</span><strong>IEEE INFOCOM Under Review · Sold to Research Lab · $2,500 Award</strong></div>
        </div>
        <div class="cv-hero-stats">
          <div class="cv-hero-stat"><span class="k">research labs</span><span class="v">3</span></div>
          <div class="cv-hero-stat"><span class="k">papers in flight</span><span class="v">3</span></div>
          <div class="cv-hero-stat"><span class="k">patents</span><span class="v">2</span></div>
          <div class="cv-hero-stat"><span class="k">internships</span><span class="v">4</span></div>
          <div class="cv-hero-stat"><span class="k">awards</span><span class="v">SLU LAUNCH '26</span></div>
          <div class="cv-hero-stat"><span class="k">languages spoken</span><span class="v">5</span></div>
          <div class="cv-hero-stat"><span class="k">based in</span><span class="v">St. Louis</span></div>
          <div class="cv-hero-stat"><span class="k">ideal location</span><span class="v">USA</span></div>
        </div>

        <div class="cv-hero-contact">
          <button type="button" class="cv-hero-cta primary resume-picker-btn">
            <span class="cvc-icn">&#8595;</span> Download Resume
          </button>
          <a class="cv-hero-cta" href="mailto:hamzaabukat@gmail.com">Email</a>
          <a class="cv-hero-cta" href="tel:+15716637706">+1 571-663-7706</a>
          <a class="cv-hero-cta" href="https://www.linkedin.com/in/hakat/" target="_blank" rel="noopener">LinkedIn</a>
          <a class="cv-hero-cta" href="https://github.com/PreLabHomework" target="_blank" rel="noopener">GitHub</a>
        </div>
      </section>

      <!-- Section content rendered by cv.js -->
      <div id="cv-sections"></div>

      <footer class="cv-foot">
        <div class="cv-foot-line"></div>
        <div class="cv-foot-row">
          <span>© 2026 HAMZA ABU KHALAF AL TAKROURI</span>
          <span class="cv-foot-actions">
            <a href="index.html" class="cv-foot-link">▸ HOME</a>
            <button type="button" class="cv-foot-link resume-picker-btn" style="background:none;border:none;padding:0;color:inherit;font:inherit;cursor:pointer;">
              &#9658; RESUME PDF
            </button>
            <a href="index.html#interactive" class="cv-foot-link">▸ ARENA MODE</a>
          </span>
        </div>
      </footer>

    </main>

  </div>

  <script type="module" src="cv.js"></script>
</body>
</html>