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
<!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>
        <a href="https://drive.google.com/file/d/1B17Y6SKspYogM5aTdQrWbY-VDs7hbvD3/view?usp=sharing" class="cv-mode-toggle resume-toggle" target="_blank" rel="noopener" aria-label="Open resume PDF">
          <span class="cmt-arrow">▸</span>
          <span class="cmt-label">RESUME PDF</span>
        </a>
        <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">
          <a class="cv-rail-link" href="https://drive.google.com/file/d/1B17Y6SKspYogM5aTdQrWbY-VDs7hbvD3/view?usp=sharing" target="_blank" rel="noopener">
            <span class="cvr-icn" aria-hidden="true">↓</span> Resume PDF
          </a>
          <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">
          I build across software, firmware, hardware, and electrical engineering: BLE/mobile systems, embedded tooling, FPGA logic, signal-processing pipelines, radar ML, clinical hardware, and circuit-level diagnostic workflows. Open to software, firmware, embedded, hardware, and EE roles.
        </p>
        <div class="cv-hero-signal" aria-label="Recruiter summary">
          <div><span>Target roles</span><strong>Software · Firmware · Embedded · Hardware · EE</strong></div>
          <div><span>Core proof</span><strong>BLE apps · ESP32 · FPGA · Signals · Circuits</strong></div>
          <div><span>Research edge</span><strong>Radar ML · Clinical devices · Semiconductor lab exposure</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">
          <a class="cv-hero-cta primary" href="https://drive.google.com/file/d/1B17Y6SKspYogM5aTdQrWbY-VDs7hbvD3/view?usp=sharing" target="_blank" rel="noopener">
            <span class="cvc-icn">↓</span> Download Resume
          </a>
          <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>
            <a href="https://drive.google.com/file/d/1B17Y6SKspYogM5aTdQrWbY-VDs7hbvD3/view?usp=sharing" target="_blank" rel="noopener" class="cv-foot-link">▸ RESUME PDF</a>
            <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>