devbolt19.github.io/index.html at main · DEvBOLT19/devbolt19.github.io · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>BOLT. — Developer Portfolio</title>
  <meta name="description" content="BOLT. Developer portfolio — selected projects, contact and socials." />
  <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=Instrument+Serif:ital@0;1&family=JetBrains+Mono:ital,wght@0,300;0,400;0,500;1,400&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="data/style.css" />
</head>
<body>
  <!-- Grain overlay -->
  <div class="grain" aria-hidden="true"></div>

  <!-- Header -->
  <header class="site-header">
    <a href="#top" class="logo">BOLT<span class="logo-dot">.</span></a>
    <nav class="header-nav" aria-label="Primary">
      <a href="#work">Work</a>
      <a href="watchlist.html">Watchlist</a>
      <a href="blog.html">Blog</a>
      <a href="#contact">Contact</a>
      <span class="status"><span class="status-dot" aria-hidden="true"></span>Available for work</span>
    </nav>
  </header>

  <main id="top">
    <!-- Hero -->
    <section class="hero" aria-labelledby="hero-title">
      <p class="kicker mono">Independent developer — est. portfolio</p>
      <h1 id="hero-title" class="hero-title">
        Building quiet,<br />
        <em>deliberate</em> software.
      </h1>
      <p class="hero-sub">
        I&apos;m BOLT — a developer working across Python, machine learning and the web.
        I care about small details, sharp interfaces and code that does exactly what it says.
      </p>

      <!-- Preview frame -->
      <div class="frame" role="img" aria-label="Stylized preview of a dark, minimalist website">
        <div class="frame-chrome">
          <span class="frame-dot"></span>
          <span class="frame-dot"></span>
          <span class="frame-dot"></span>
          <span class="frame-url mono">devbolt19.github.io</span>
        </div>
        <div class="frame-body">
          <div class="frame-line frame-line-lg"></div>
          <div class="frame-line frame-line-md"></div>
          <div class="frame-grid">
            <div class="frame-cell"></div>
            <div class="frame-cell"></div>
            <div class="frame-cell"></div>
          </div>
          <div class="frame-line frame-line-sm"></div>
        </div>
      </div>
    </section>

    <!-- Work -->
    <section id="work" class="section" aria-labelledby="work-title">
      <div class="section-head">
        <h2 id="work-title" class="section-title">Selected work</h2>
        <a class="section-link mono" href="https://github.com/DEvBOLT19" target="_blank" rel="noopener noreferrer">github.com/DEvBOLT19 ↗</a>
      </div>
      <ol id="project-list" class="project-list">
        <!-- Populated by data/script.js -->
      </ol>
    </section>

    <!-- Contact -->
    <section id="contact" class="section" aria-labelledby="contact-title">
      <div class="section-head">
        <h2 id="contact-title" class="section-title">Get in touch</h2>
        <span class="section-link mono">Response within 24h</span>
      </div>

      <div class="contact-grid">
        <!-- Email -->
        <div class="contact-card">
          <p class="contact-label mono">Email</p>
          <p class="contact-value mono" id="email-value">Loading…</p>
          <button class="copy-btn mono" id="copy-email" type="button">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
            <span>Copy email</span>
          </button>
        </div>

        <!-- Discord -->
        <div class="contact-card">
          <p class="contact-label mono">
            <svg class="discord-icon" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20.317 4.37a19.79 19.79 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128c.126-.094.252-.192.372-.291a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.182 0-2.157-1.085-2.157-2.419 0-1.333.955-2.418 2.157-2.418 1.21 0 2.176 1.095 2.157 2.418 0 1.334-.956 2.419-2.157 2.419zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.418 2.157-2.418 1.21 0 2.176 1.095 2.157 2.418 0 1.334-.946 2.419-2.157 2.419z"/></svg>
            Discord
          </p>
          <p class="contact-value mono" id="discord-value">devbolt</p>
          <div class="contact-actions">
            <a class="copy-btn mono" href="https://discord.com/users/1465964458282188820" target="_blank" rel="noopener noreferrer">
              <span>Open profile ↗</span>
            </a>
            <button class="copy-btn mono" id="copy-discord" type="button">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
              <span>Copy ID</span>
            </button>
          </div>
        </div>
      </div>

      <!-- Socials -->
      <ul class="social-bar" aria-label="Social links">
        <li>
          <a href="https://github.com/DEvBOLT19" target="_blank" rel="noopener noreferrer">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 .5C5.65.5.5 5.65.5 12c0 5.08 3.29 9.39 7.86 10.91.58.11.79-.25.79-.55v-2.15c-3.2.7-3.87-1.36-3.87-1.36-.52-1.33-1.28-1.68-1.28-1.68-1.04-.71.08-.7.08-.7 1.15.08 1.76 1.19 1.76 1.19 1.03 1.76 2.69 1.25 3.35.96.1-.75.4-1.26.73-1.55-2.55-.29-5.23-1.28-5.23-5.69 0-1.26.45-2.29 1.19-3.09-.12-.29-.52-1.46.11-3.05 0 0 .97-.31 3.17 1.18a11 11 0 0 1 5.78 0c2.2-1.49 3.17-1.18 3.17-1.18.63 1.59.23 2.76.11 3.05.74.8 1.19 1.83 1.19 3.09 0 4.42-2.69 5.4-5.25 5.68.41.36.78 1.06.78 2.14v3.17c0 .31.21.67.8.55A11.51 11.51 0 0 0 23.5 12C23.5 5.65 18.35.5 12 .5z"/></svg>
            <span class="mono">GitHub</span>
          </a>
        </li>
        <li>
          <a href="https://x.com/DEvBOLT19" target="_blank" rel="noopener noreferrer">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
            <span class="mono">X / Twitter</span>
          </a>
        </li>
        <li>
          <a href="https://www.youtube.com/@bolt_66" target="_blank" rel="noopener noreferrer">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M23.5 6.19a3.02 3.02 0 0 0-2.12-2.14C19.51 3.55 12 3.55 12 3.55s-7.51 0-9.38.5A3.02 3.02 0 0 0 .5 6.19C0 8.07 0 12 0 12s0 3.93.5 5.81a3.02 3.02 0 0 0 2.12 2.14c1.87.5 9.38.5 9.38.5s7.51 0 9.38-.5a3.02 3.02 0 0 0 2.12-2.14C24 15.93 24 12 24 12s0-3.93-.5-5.81zM9.55 15.57V8.43L15.82 12l-6.27 3.57z"/></svg>
            <span class="mono">YouTube</span>
          </a>
        </li>
        <li>
          <a href="https://www.linkedin.com/feed/" target="_blank" rel="noopener noreferrer">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20.45 20.45h-3.55v-5.57c0-1.33-.03-3.04-1.85-3.04-1.86 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12zM7.12 20.45H3.55V9h3.57v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.73v20.54C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.73V1.73C24 .77 23.2 0 22.22 0z"/></svg>
            <span class="mono">LinkedIn</span>
          </a>
        </li>
      </ul>
    </section>
  </main>

  <footer class="site-footer">
    <span class="mono">© <span id="year">2026</span> BOLT.</span>
    <span class="mono">Designed &amp; built by BOLT</span>
  </footer>

  <script src="data/script.js"></script>
</body>
</html>