PatchWorkLabs/work.html at main · Rhyse76/PatchWorkLabs · 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
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Work — PatchWork Labs</title>
  <meta name="description" content="A look at projects built and maintained by PatchWork Labs — web development, client sites, and infrastructure automation." />
  <meta property="og:type" content="website" />
  <meta property="og:title" content="Work — PatchWork Labs" />
  <meta property="og:description" content="A look at projects built and maintained by PatchWork Labs — web development, client sites, and infrastructure automation." />
  <meta property="og:image" content="https://patchworklabs.dev/images/logo-lockup.png" />
  <meta property="og:url" content="https://patchworklabs.dev/work" />
  <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=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="css/style.css" />
  <link rel="icon" type="image/png" href="images/logo-badge.png" />
</head>
<body>

  <nav class="nav">
    <div class="nav-inner">
      <a href="/" class="nav-logo">
        <img src="images/logo-badge.png" alt="PatchWork Labs logo" class="nav-logo-icon" />
        PatchWork Labs
      </a>
      <ul class="nav-links">
        <li><a href="/">Home</a></li>
        <li><a href="services">Services</a></li>
        <li><a href="work">Work</a></li>
        <li><a href="about">About</a></li>
        <li class="nav-cta"><a href="contact">Contact</a></li>
      </ul>
      <button class="nav-toggle" aria-label="Toggle menu">
        <span></span><span></span><span></span>
      </button>
    </div>
  </nav>

  <div class="mobile-nav">
    <a href="/">Home</a>
    <a href="services">Services</a>
    <a href="work">Work</a>
    <a href="about">About</a>
    <a href="contact">Contact</a>
  </div>

  <!-- PAGE HERO -->
  <section class="page-hero">
    <div class="page-hero-content">
      <div class="breadcrumb">
        <a href="/">Home</a>
        <span>/</span>
        <span>Work</span>
      </div>
      <h1>Our <span class="accent">Work</span></h1>
      <p>A sample of sites we've built, maintained, and run the infrastructure behind.</p>
    </div>
  </section>

  <!-- PORTFOLIO GRID -->
  <section class="section-padding">
    <div class="container">
      <div class="portfolio-grid">

        <!-- RhyseGaming -->
        <div class="project-card fade-up">
          <div class="project-image">
            <img src="images/RhyseGaming.png" alt="RhyseGaming Server Status Dashboard" />
            <span class="project-type-badge">Web Dev · API</span>
          </div>
          <div class="project-body">
            <h3>RhyseGaming — Server Status Dashboard</h3>
            <p>Live gaming server status site showing which servers are online, current player counts, and join addresses — all pulling from a custom-built API. Front end and API both built in-house. Live at RhyseGaming.com.</p>
            <div class="project-tags">
              <span class="tag">HTML</span>
              <span class="tag">CSS</span>
              <span class="tag">JavaScript</span>
              <span class="tag">Custom API</span>
            </div>
            <div class="project-links">
              <a href="https://www.RhyseGaming.com" class="project-link" target="_blank" rel="noopener">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
                RhyseGaming.com
              </a>
            </div>
          </div>
        </div>

        <!-- Lucky Penny Barbershop -->
        <div class="project-card fade-up">
          <div class="project-image carousel">
            <div class="carousel-slide active"><img src="images/LuckyPenny.png" alt="Lucky Penny Barbershop - Home" /></div>
            <div class="carousel-slide"><img src="images/LuckyPenny_ServiceMenu.png" alt="Lucky Penny - Service Menu" /></div>
            <div class="carousel-slide"><img src="images/LuckyPenny_Shaves_Socials.png" alt="Lucky Penny - Shaves & Socials" /></div>
            <div class="carousel-slide"><img src="images/LuckyPenny_footer.png" alt="Lucky Penny - Footer" /></div>
            <button class="carousel-btn prev">&#8249;</button>
            <button class="carousel-btn next">&#8250;</button>
            <div class="carousel-dots">
              <button class="carousel-dot active"></button>
              <button class="carousel-dot"></button>
              <button class="carousel-dot"></button>
              <button class="carousel-dot"></button>
            </div>
            <span class="project-type-badge">Web Design</span>
          </div>
          <div class="project-body">
            <h3>Lucky Penny Barbershop — Client Website</h3>
            <p>Full website built for a local barbershop client, including a services &amp; pricing menu, a shaves and socials section, and a clean branded design that fits the shop's personality. Live and actively used by the business.</p>
            <div class="project-tags">
              <span class="tag">HTML</span>
              <span class="tag">CSS</span>
              <span class="tag">JavaScript</span>
              <span class="tag">Client Work</span>
            </div>
            <div class="project-links">
              <a href="https://luckypennybarbershop.com" class="project-link" target="_blank" rel="noopener">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
                luckypennybarbershop.com
              </a>
            </div>
          </div>
        </div>

        <!-- Internal Ops & Automation Tooling -->
        <div class="project-card fade-up">
          <div class="project-image">
            <div class="project-image-placeholder">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
              Internal — confidential
            </div>
            <span class="project-type-badge">DevOps · AWS</span>
          </div>
          <div class="project-body">
            <h3>Operations Dashboard &amp; AWS Automation</h3>
            <p>Built a web dashboard for managing automation playbook runs and AWS EC2 infrastructure from a single interface — login portal, live operations view, run history, application logs, and an audit log tracking every action. EC2 instances can be started, stopped, and terminated without touching the AWS console. Deployed internally for a client; not publicly viewable.</p>
            <div class="project-tags">
              <span class="tag">Ansible</span>
              <span class="tag">AWS EC2</span>
              <span class="tag">Laravel</span>
              <span class="tag">DevOps</span>
            </div>
            <div class="project-links">
              <span class="project-link" style="cursor:default; color: var(--text-muted);">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
                Internal — live AWS infrastructure
              </span>
            </div>
          </div>
        </div>

      </div>
    </div>
  </section>

  <!-- CTA -->
  <div class="cta-band">
    <div class="cta-band-inner">
      <h2>Want something built like this?</h2>
      <p>Whether it's a client-facing site, an internal tool, or the infrastructure underneath — let's talk about your project.</p>
      <div class="btn-group">
        <a href="contact" class="btn btn-primary">Get In Touch</a>
        <a href="services" class="btn btn-outline">See Our Services</a>
      </div>
    </div>
  </div>

  <footer class="footer">
    <div class="footer-inner">
      <div class="footer-brand">PatchWork <span class="accent">Labs</span></div>
      <div class="footer-copy">© 2026 · PatchWork Labs · patchworklabs.dev</div>
      <div class="footer-links">
        <a href="services">Services</a>
        <a href="about">About</a>
        <a href="contact">Contact</a>
      </div>
    </div>
  </footer>

  <!-- LIGHTBOX -->
  <div class="lightbox" id="lightbox" role="dialog" aria-modal="true" aria-label="Image viewer">
    <button class="lightbox-close" aria-label="Close">&times;</button>
    <button class="lightbox-nav lb-prev" aria-label="Previous image">&#8249;</button>
    <div class="lightbox-img-wrap">
      <img class="lightbox-img" src="" alt="" />
    </div>
    <button class="lightbox-nav lb-next" aria-label="Next image">&#8250;</button>
    <div class="lightbox-counter"></div>
    <div class="lightbox-hint">ESC to close &nbsp;·&nbsp; ← → to navigate</div>
  </div>

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