PatchWorkLabs/index.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
195
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>PatchWork Labs — Web Development, Software & Cloud Infrastructure</title>
  <meta name="description" content="PatchWork Labs builds and maintains the software and infrastructure that runs your business — web development, server-side software upgrades, and AWS cloud infrastructure." />
  <meta property="og:type" content="website" />
  <meta property="og:title" content="PatchWork Labs — Web Development, Software & Cloud Infrastructure" />
  <meta property="og:description" content="PatchWork Labs builds and maintains the software and infrastructure that runs your business — web development, server-side software upgrades, and AWS cloud infrastructure." />
  <meta property="og:image" content="https://patchworklabs.dev/images/logo-lockup.png" />
  <meta property="og:url" content="https://patchworklabs.dev/" />
  <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>

  <!-- HERO -->
  <section class="hero">
    <div class="hero-content">
      <div class="hero-eyebrow">Web Development · Software Upgrades · Cloud Infrastructure</div>
      <h1 class="hero-name">
        PatchWork<br /><span class="line2">Labs.</span>
      </h1>
      <p class="hero-title">
        <strong>We build, patch, and run the systems behind your business</strong> —
        from the website your customers see to the AWS servers running quietly underneath.
      </p>
      <div class="hero-tagline">
        <span class="typing-text"></span><span class="cursor">|</span>
      </div>
      <div class="hero-cta">
        <a href="services" class="btn btn-primary">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/>
            <rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/>
          </svg>
          Our Services
        </a>
        <a href="contact" class="btn btn-outline">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
            <polyline points="22,6 12,13 2,6"/>
          </svg>
          Get In Touch
        </a>
      </div>
      <div class="hero-stats">
        <div class="stat-item">
          <span class="stat-number">15+</span>
          <span class="stat-label">Years IT &amp; Dev Experience</span>
        </div>
        <div class="stat-item">
          <span class="stat-number">Web · Cloud · Code</span>
          <span class="stat-label">Full Stack Coverage</span>
        </div>
        <div class="stat-item">
          <span class="stat-number">AWS</span>
          <span class="stat-label">Cloud Native Builds</span>
        </div>
        <div class="stat-item">
          <span class="stat-number">1</span>
          <span class="stat-label">Point Of Contact, Start To Finish</span>
        </div>
      </div>
    </div>
    <canvas id="topology"></canvas>
    <div class="scroll-indicator">
      <span>scroll</span>
      <div class="scroll-indicator-line"></div>
    </div>
  </section>

  <!-- WHAT WE DO -->
  <section class="section-padding" style="background: var(--bg-secondary); border-top: 1px solid var(--border);">
    <div class="container">
      <span class="section-label">What We Do</span>
      <h2 class="section-title">Four Services. One Team.</h2>
      <p class="section-subtitle">From the first line of code to the server it runs on — we cover the whole stack so you don't have to manage a dozen vendors.</p>
      <div class="features-grid">
        <div class="feature-card fade-up">
          <div class="feature-icon">🌐</div>
          <h3>Web Development</h3>
          <p>Custom websites and web applications built with HTML, CSS, and JavaScript — from marketing sites and small business pages to full stack apps with custom APIs.</p>
        </div>
        <div class="feature-card fade-up">
          <div class="feature-icon">🔧</div>
          <h3>Software &amp; Server-Side Upgrades</h3>
          <p>Framework version upgrades, breaking-change fixes, server patching and hardening, and quality-of-life improvements for the applications you already rely on.</p>
        </div>
        <div class="feature-card fade-up">
          <div class="feature-icon">☁️</div>
          <h3>Cloud Infrastructure &amp; AWS</h3>
          <p>AWS server builds from scratch, EC2 management, and deployment setups that are sized right for your business — not over-engineered, not under-protected.</p>
        </div>
        <div class="feature-card fade-up">
          <div class="feature-icon">⚙️</div>
          <h3>Automation &amp; DevOps</h3>
          <p>Scripting, CI/CD pipelines, and infrastructure automation that cut down manual work and keep deployments fast and repeatable. We're also exploring how AI tooling fits into that workflow — from AI-assisted development to standing up infrastructure for running AI in your own applications.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- TECH STACK -->
  <section class="section-padding">
    <div class="container">
      <span class="section-label">Tech Stack</span>
      <h2 class="section-title">Tools We Build With</h2>
      <p class="section-subtitle">A practical toolkit spanning front end, back end, and infrastructure.</p>
      <div class="skills-cloud">
        <span class="skill-badge">HTML</span>
        <span class="skill-badge">CSS</span>
        <span class="skill-badge">JavaScript</span>
        <span class="skill-badge">PHP</span>
        <span class="skill-badge">Laravel</span>
        <span class="skill-badge">Livewire</span>
        <span class="skill-badge">Python</span>
        <span class="skill-badge">REST APIs</span>
        <span class="skill-badge">MySQL</span>
        <span class="skill-badge">AWS EC2</span>
        <span class="skill-badge">AWS S3</span>
        <span class="skill-badge">Linux (Ubuntu)</span>
        <span class="skill-badge">Windows Server</span>
        <span class="skill-badge">Docker</span>
        <span class="skill-badge">Ansible</span>
        <span class="skill-badge">GitHub Actions</span>
        <span class="skill-badge">Bitbucket Pipelines</span>
        <span class="skill-badge">PowerShell</span>
        <span class="skill-badge">Bash</span>
        <span class="skill-badge">Nginx</span>
        <span class="skill-badge">AI Tooling &amp; Integration</span>
      </div>
    </div>
  </section>

  <!-- CTA BAND -->
  <div class="cta-band">
    <div class="cta-band-inner">
      <span class="section-label" style="text-align:center; display:block; margin-bottom:16px;">Let's Build Something</span>
      <h2>Got a project, an upgrade, or a server that needs building?</h2>
      <p>Tell us what you're working with and what you need — we'll take it from there.</p>
      <div class="btn-group">
        <a href="contact" class="btn btn-primary">Get In Touch</a>
        <a href="work" class="btn btn-outline">See Our Work</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="work">Work</a>
        <a href="about">About</a>
        <a href="contact">Contact</a>
      </div>
    </div>
  </footer>

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