royjohnson/index.html at main · Rhyse76/royjohnson · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Roy Johnson — IT Support &amp; DevOps Engineer</title>
  <meta name="description" content="Roy Johnson — IT Support and DevOps hybrid professional. Helpdesk expertise meets infrastructure automation." />
  <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/svg+xml" href="favicon.svg" />
</head>
<body>

  <nav class="nav">
    <div class="nav-inner">
      <a href="index.html" class="nav-logo">
        <div class="nav-logo-icon">RJ</div>
        Roy Johnson
      </a>
      <ul class="nav-links">
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="portfolio.html">Portfolio</a></li>
        <li><a href="resume.html">Resume</a></li>
        <li class="nav-cta"><a href="resume.html#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="index.html">Home</a>
    <a href="about.html">About</a>
    <a href="portfolio.html">Portfolio</a>
    <a href="resume.html">Resume</a>
    <a href="resume.html#contact">Contact</a>
  </div>

  <!-- HERO -->
  <section class="hero">
    <div class="hero-content">
      <div class="hero-eyebrow">IT Support · DevOps · Full Stack Developer</div>
      <h1 class="hero-name">
        Roy<br /><span class="line2">Johnson.</span>
      </h1>
      <p class="hero-title">
        <strong>Helpdesk to server room to codebase</strong> — I fix infrastructure,
        automate the boring stuff, and build the web apps that make the whole operation run smoother.
      </p>
      <div class="hero-tagline">
        <span class="typing-text"></span><span class="cursor">|</span>
      </div>
      <div class="hero-cta">
        <a href="portfolio.html" 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>
          View My Work
        </a>
        <a href="resume.html" class="btn btn-outline">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
            <polyline points="14 2 14 8 20 8"/>
            <line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/>
          </svg>
          See My Resume
        </a>
      </div>
      <div class="hero-stats">
        <div class="stat-item">
          <span class="stat-number">15+</span>
          <span class="stat-label">Years Experience</span>
        </div>
        <div class="stat-item">
          <span class="stat-number">1,250+</span>
          <span class="stat-label">Users Supported</span>
        </div>
        <div class="stat-item">
          <span class="stat-number">60%</span>
          <span class="stat-label">Tasks Automated</span>
        </div>
        <div class="stat-item">
          <span class="stat-number">0</span>
          <span class="stat-label">Data Loss Events</span>
        </div>
      </div>
    </div>
    <div class="scroll-indicator">
      <span>scroll</span>
      <div class="scroll-indicator-line"></div>
    </div>
  </section>

  <!-- WHAT I DO -->
  <section class="section-padding" style="background: var(--bg-secondary); border-top: 1px solid var(--border);">
    <div class="container">
      <span class="section-label">What I Do</span>
      <h2 class="section-title">One Engineer. Four Disciplines.</h2>
      <p class="section-subtitle">From the help desk to the server room to the codebase — I'm comfortable at every layer of the stack.</p>
      <div class="features-grid">
        <div class="feature-card fade-up">
          <div class="feature-icon">🖥️</div>
          <h3>IT Support &amp; Helpdesk</h3>
          <p>End-to-end support for users across office and warehouse environments. From workstation setup to advanced troubleshooting — I keep people productive and problems from recurring.</p>
        </div>
        <div class="feature-card fade-up">
          <div class="feature-icon">⚙️</div>
          <h3>DevOps &amp; Automation</h3>
          <p>PowerShell and Bash scripting, CI/CD pipeline implementation, and containerized deployments. If a task is repetitive, I automate it. If a process is manual, I build a better one.</p>
        </div>
        <div class="feature-card fade-up">
          <div class="feature-icon">🌐</div>
          <h3>Infrastructure &amp; Networking</h3>
          <p>Server administration, Active Directory, Microsoft 365, and network troubleshooting across distributed sites. I know what breaks before it breaks — and I fix it before anyone notices.</p>
        </div>
        <div class="feature-card fade-up">
          <div class="feature-icon">💻</div>
          <h3>Full Stack Web Development</h3>
          <p>PHP, Laravel, and Livewire on the backend — CSS and JavaScript on the front. I build features, handle server upgrades, squash breaking changes, and ship QOL improvements that make apps feel polished.</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 of the Trade</h2>
      <p class="section-subtitle">A battle-tested toolkit spanning IT support, DevOps, and full stack web development.</p>
      <div class="skills-cloud">
        <span class="skill-badge">PHP</span>
        <span class="skill-badge">Laravel</span>
        <span class="skill-badge">Livewire</span>
        <span class="skill-badge">JavaScript</span>
        <span class="skill-badge">CSS</span>
        <span class="skill-badge">HTML</span>
        <span class="skill-badge">REST APIs</span>
        <span class="skill-badge">Python</span>
        <span class="skill-badge">PowerShell</span>
        <span class="skill-badge">Bash</span>
        <span class="skill-badge">Windows Server</span>
        <span class="skill-badge">Linux (Ubuntu / CentOS)</span>
        <span class="skill-badge">Active Directory</span>
        <span class="skill-badge">Azure AD</span>
        <span class="skill-badge">Microsoft 365</span>
        <span class="skill-badge">Docker</span>
        <span class="skill-badge">GitHub Actions</span>
        <span class="skill-badge">Bitbucket Pipelines</span>
        <span class="skill-badge">Networking / VLANs</span>
        <span class="skill-badge">VMware</span>
        <span class="skill-badge">Ansible</span>
        <span class="skill-badge">ServiceNow</span>
        <span class="skill-badge">ERP 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;">Open to Opportunities</span>
      <h2>Ready to bring this skill set to your team?</h2>
      <p>Let's talk about how I can bridge the gap between your end users and your infrastructure.</p>
      <div class="btn-group">
        <a href="portfolio.html" class="btn btn-primary">See My Work</a>
        <a href="resume.html#contact" class="btn btn-outline">Get In Touch</a>
      </div>
    </div>
  </div>

  <footer class="footer">
    <div class="footer-inner">
      <div class="footer-brand">Roy <span class="accent">Johnson</span></div>
      <div class="footer-copy">© 2026 · Built with purpose · royjohnson.info</div>
      <div class="footer-links">
        <a href="about.html">About</a>
        <a href="portfolio.html">Portfolio</a>
        <a href="resume.html">Resume</a>
      </div>
    </div>
  </footer>

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