gitguerz.github.io/about.html at main · gitguerz/gitguerz.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
<!DOCTYPE html>
<html lang="en" data-theme="day">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>About Guerz — self-taught web developer in training | guerz.lol</title>
<meta name="description" content="About Guerz: a self-taught full-stack web developer in training, learning in public via freeCodeCamp and The Odin Project.">
<link rel="canonical" href="https://guerz.lol/about.html">
<meta property="og:title" content="About Guerz | guerz.lol">
<meta property="og:description" content="A self-taught full-stack web developer in training, learning in public via freeCodeCamp and The Odin Project.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://guerz.lol/about.html">
<meta property="og:image" content="https://guerz.lol/og-banner.png">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="About Guerz | guerz.lol">
<meta name="twitter:description" content="A self-taught full-stack web developer in training, learning in public via freeCodeCamp and The Odin Project.">
<meta name="twitter:image" content="https://guerz.lol/og-banner.png">
<link rel="icon" id="favicon" type="image/svg+xml" href="favicon-peach.svg">
<link rel="stylesheet" href="styles.css">
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://guerz.lol/"},{"@type":"ListItem","position":2,"name":"About","item":"https://guerz.lol/about.html"}]}
</script>
</head>
<body>

<a class="skip-link" href="#main">skip to main content</a>

<header class="header">
  <div class="topbar">
    <div class="topbar-left">
      <div class="brand">guerz.lol</div>
    </div>
    <div class="topbar-right">
      <div class="toggle" role="group" aria-label="color theme">
        <button type="button" data-theme-btn="day" class="is-active">☼ DAY</button>
        <button type="button" data-theme-btn="night">☾ NIGHT</button>
      </div>
    </div>
  </div>
  <nav class="nav" aria-label="primary">
    <a href="index.html">home</a>
    <a href="about.html" aria-current="page">about</a>
    <a href="roadmap.html">roadmap</a>
    <a href="projects.html">projects</a>
    <a href="https://blogguerz.wordpress.com" target="_blank" rel="noopener noreferrer">blogguerz</a>
    <a href="https://twitch.tv/guerz" target="_blank" rel="noopener noreferrer">ttv/guerz</a>
    <a href="https://github.com/gitguerz" target="_blank" rel="noopener noreferrer">github</a>
  </nav>
  <div class="marquee" aria-hidden="true">
    <span>☀ still here, still making things ☾ part portfolio, part brain dump, part proof of life ☀ i like websites that feel lived in ☾ still here, still making things ☀ part portfolio, part brain dump, part proof of life ☾</span>
  </div>
</header>

<main class="container" id="main" tabindex="-1">

  <div class="construction">⚠ UNDER CONSTRUCTION — PARDON THE DUST ⚠</div>

  <figure class="banner-wrap">
    <img class="banner" src="banner-about.png" width="1200" height="675" alt="GUERZ.LOL brutalist flyer — sector-g/02, wireframe torus-knot sculpture over a peach grid; analog dreams. digital grind. future primitive; full-stack web developer in training">
  </figure>

  <div class="userinfo" style="background:var(--lavender);color:var(--ink);box-shadow:5px 5px 0 var(--peach);width:fit-content;margin:0 auto">
    <span class="avatar-frame"><img class="avatar" id="avatar-img" src="favicon-peach.svg" alt="guerz avatar"></span>
    <div class="userinfo-body" style="min-width:0;flex-direction:row;align-items:center;gap:16px;flex-wrap:wrap">
      <div class="userinfo-name" style="font-family:'Platypi',serif;font-size:64px;font-weight:800">Guerz</div>
      <div style="display:flex;flex-direction:column;gap:6px">
        <div style="background:#1c1a20;color:var(--peach);display:inline-block;padding:4px 10px;width:fit-content;font-size:12px">self-taught web dev · dj · internet gremlin</div>
        <div style="display:flex;gap:6px">
          <div style="background:var(--peach);color:var(--ink);display:inline-block;padding:2px 7px;width:fit-content;font-size:10.5px">y2k-web-vibes</div>
          <div style="background:var(--peach);color:var(--ink);display:inline-block;padding:2px 7px;width:fit-content;font-size:10.5px">learning in public</div>
        </div>
      </div>
    </div>
  </div>

  <article class="card card--lavender" style="background:var(--peach);color:var(--ink)">
    <div class="title-wrap"><h1 class="card-title">about</h1></div>
    <div class="card-body" style="display:flex;flex-direction:column;gap:12px">
        <p>hi, i’m guerz.</p>

        <p>my roots are in the y2k internet — messing with deadjournal and later livejournal layouts, tweaking the frontend aesthetics until it felt like mine. this isn’t a beginner story. it’s a return. the muscle memory never left. it was just waiting for the right moment to come back online.</p>

        <p>this is my little corner of the internet, where i build, write, learn, and try to turn the weird little fractures in my life into something sturdier and more useful.</p>

        <p>i’m a self-taught web developer, dj, blogger, and all-around internet gremlin with a bad habit of caring too much and doing things the hard way. i’m also trying to break generational patterns, honor the people who came before me, and build a life that doesn’t just survive the past — it outlives it.</p>

        <p>guerz.lol is part portfolio, part brain dump, part ongoing proof that i’m still here and still making things. it holds my projects, my writing, my study notes, and whatever else feels worth dragging into the light.</p>

        <p>the vibe here is honest, a little dark, occasionally funny, and definitely not sterile. i like websites that feel lived in. i like art that remembers being made by a person. i like progress that actually means something.</p>

        <p>if you’re here, thanks for stopping by. i’m probably building the next thing right now.</p>
        <p style="margin-top:6px;font-style:italic;opacity:.85">• guerz</p>
    </div>
  </article>

  <!-- card--slate reuses the existing dark card style from your guestbook -->
  <div class="card card--slate" style="background:var(--lavender);color:var(--ink)">
    <!-- eyebrow = the small label above card content -->
    <h2 class="card-eyebrow" style="color:var(--ink)">now — august 2026</h2>
    <!-- flex column stacks the lines with even spacing -->
    <div class="card-body" style="display:flex;flex-direction:column;gap:5px">
      <span>studying: freeCodeCamp Responsive Web. Design v9 Certification Curriculum</span>
      <span>building: <a href="projects.html#rwd-archive">freeCodeCamp Build Archive</a></span>
      <span>reading: Lullaby by Chuck Palahniuk</span>
      <span>starting: Full Sail University - Web Development B.S.</span>
    </div>
  </div>

  <div class="card card--peach" style="background:var(--peach);color:var(--ink)">
    <h2 class="card-eyebrow" style="color:var(--ink)">where to find me</h2>
    <div style="display:flex;flex-direction:column;gap:6px;font:15.5px/1.5 'Space Grotesk', sans-serif">
      <a href="https://github.com/gitguerz" target="_blank" rel="noopener noreferrer">→ github / gitguerz</a>
      <a href="https://www.discogs.com/user/guerz_" target="_blank" rel="noopener noreferrer">→ discogs / guerz_</a>
      <a href="https://www.instagram.com/guerz/" target="_blank" rel="noopener noreferrer">→ instagram / guerz</a>
      <a href="https://bsky.app/profile/guerz.bsky.social" target="_blank" rel="noopener noreferrer">→ bluesky / guerz.bsky.social</a>
      <!-- mailto: opens the visitor's default mail app with your address prefilled -->
      <a href="mailto:nick@guerz.lol">→ email / nick@guerz.lol</a>
    </div>
  </div>

</main>

<footer class="footer">
  <div class="footer-inner">
    <div class="footer-copy">© guerz.lol<br>no cookies, just cache</div>
    <nav class="footer-nav" aria-label="footer">
      <a href="index.html">home</a>
      <a href="about.html">about</a>
      <a href="roadmap.html">roadmap</a>
      <a href="projects.html">projects</a>
      <a href="https://blogguerz.wordpress.com" target="_blank" rel="noopener noreferrer">blogguerz</a>
    </nav>
    <div class="footer-note">best viewed at<br>any resolution</div>
  </div>
</footer>

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