-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
268 lines (268 loc) · 19.5 KB
/
Copy pathindex.html
File metadata and controls
268 lines (268 loc) · 19.5 KB
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
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chamar Williams - Developer & Systems Engineer</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Navigation Toggle Button -->
<button class="nav-toggle" id="navToggle">☰</button> <!-- Navigation Overlay -->
<div class="nav-overlay" id="navOverlay"></div> <!-- Navigation -->
<nav id="nav">
<div>
<div class="nav-logo">CW</div>
<ul class="nav-links">
<li><a href="#about">About</a></li>
<li><a href="#featured-projects">Featured</a></li>
<li><a href="#all-projects">Projects</a></li>
<li><a href="#resume">Resume</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</nav> <!-- Hero Section -->
<section class="hero" id="about">
<div class="hero-bg"></div>
<div class="hero-content">
<div class="hero-subtitle">Welcome</div>
<h1 class="hero-title">Chamar Williams</h1>
<p class="hero-description">
CS student at Temple University focused on systems design, distributed applications, and backend infrastructure. Interested in building reliable, performant software with an emphasis on networking, scalability, and clean architecture.
</p>
<div class="hero-cta">
<a href="#featured-projects" class="btn btn-primary">View Featured</a>
<a href="#contact" class="btn btn-secondary">Get in Touch</a>
</div>
</div>
</section> <!-- Featured Projects Section (populated from All Projects by JS) -->
<section class="section" id="featured-projects">
<h2 class="section-title">Featured Projects</h2>
<div class="projects-grid featured-projects-grid">
<!-- JS will clone featured project cards in here -->
</div>
</section> <!-- Resume Section -->
<section class="section" id="resume">
<h2 class="section-title">Resume & Skills</h2>
<div class="resume-section">
<div class="resume-content">
<h3>Experience & Education</h3> <div class="resume-item">
<div class="resume-title">Computer Science Student</div>
<div class="resume-subtitle">Temple University (Graduating 2027)</div>
<div class="resume-description">
Coursework in networking, systems design, and advanced programming. Active in projects spanning backend services, infrastructure, and interactive applications.
</div>
</div> <div class="resume-item">
<div class="resume-title">Software & Systems Developer</div>
<div class="resume-subtitle">Personal & Collaborative Projects</div>
<div class="resume-description">
Designed and deployed real-time, networked applications with a focus on reliability, observability, and performance across client–server boundaries.
</div>
</div> <h3>Skills</h3>
<div class="skills-grid">
<div class="skill-item">Lua Scripting</div>
<div class="skill-item">JavaScript/Node.js</div>
<div class="skill-item">SQL Databases</div>
<div class="skill-item">Client–Server Architecture</div>
<div class="skill-item">Networking & Protocols</div>
<div class="skill-item">Game/Realtime Systems</div>
<div class="skill-item">Git & Version Control</div>
<div class="skill-item">Performance Optimization</div>
</div>
</div> <div class="resume-content">
<h3>Expertise Areas</h3> <div class="resume-item">
<div class="resume-title">Multiplayer & Networked Systems</div>
<div class="resume-description">
Client-side prediction, server reconciliation, lag compensation, and netcode architecture for responsive, networked experiences.
</div>
</div> <div class="resume-item">
<div class="resume-title">Systems & API Design</div>
<div class="resume-description">
Designing clear interfaces, event-driven architectures, and robust state management for scalable services and tools.
</div>
</div> <div class="resume-item">
<div class="resume-title">Performance & Reliability</div>
<div class="resume-description">
Latency masking, bandwidth reduction, server load balancing, and real-time performance monitoring across distributed systems.
</div>
</div> <div class="resume-item">
<div class="resume-title">State & Data Management</div>
<div class="resume-description">
Consistency checking, synchronization strategies, and replay-style systems for debugging and analysis.
</div>
</div> <a href="assets/Chamar Williams - Resume.pdf"
class="btn btn-secondary"
style="margin-top: 20px; justify-self: start;"
target="_blank"
rel="noopener">
Download Resume PDF
</a>
</div>
</div>
</section> <!-- Blog Section -->
<section class="section" id="blog">
<h2 class="section-title">Latest Articles</h2>
<div class="blog-grid">
<div class="blog-card"
data-article-date="November 26, 2025"
data-article-tag="Systems & Netcode"
data-article-title="Server-Authoritative Systems: Architecture & Implementation"
data-article-body="Server-authoritative architectures put the server in charge of all critical decisions, from movement and combat to validation of client requests. This article walks through how to structure that authority without making the experience feel laggy, using client-side prediction and server reconciliation to keep things responsive. It also covers how to design message formats, separate trusted and untrusted code paths, and apply rollback strategies when the server disagrees with the client’s view of the world. Finally, it touches on monitoring and debugging techniques—like logging, replaying sessions, and tracking latency distributions—that help keep systems fair, performant, and resistant to common exploits."
data-article-image="images/server-arch.png">
<div class="blog-date">November 26, 2025</div>
<h3 class="blog-title">Server-Authoritative Systems: Architecture & Implementation</h3>
<p class="blog-excerpt">
Deep dive into building exploit-resistant, server-authoritative architectures with client-side prediction and server validation for real-time apps.
</p>
<div class="blog-tag">Systems & Netcode</div>
</div> <div class="blog-card"
data-article-date="November 20, 2025"
data-article-tag="Realtime Design"
data-article-title="Designing Responsive Realtime Interactions"
data-article-body="Explores how to keep interactions responsive when latency is unpredictable, using interpolation, buffering, and client-side smoothing. Includes trade-offs between strict correctness and perceived responsiveness, and patterns for timing-sensitive UI/UX in realtime systems."
data-article-image="images/realtime-design.png">
<div class="blog-date">November 20, 2025</div>
<h3 class="blog-title">Designing Responsive Realtime Interactions</h3>
<p class="blog-excerpt">
Exploring timing-sensitive systems, interpolation, and synchronization techniques for smooth user experiences under real-world latency.
</p>
<div class="blog-tag">Realtime Design</div>
</div> <div class="blog-card"
data-article-date="November 15, 2025"
data-article-tag="Optimization"
data-article-title="Optimizing Bandwidth in Networked Applications"
data-article-body="Walks through delta compression, interest management, and selective state sync so you can scale users without exploding bandwidth. Focuses on practical heuristics and metrics you can track to decide what, when, and how often to send."
data-article-image="images/bandwidth-opt.png">
<div class="blog-date">November 15, 2025</div>
<h3 class="blog-title">Optimizing Bandwidth in Networked Applications</h3>
<p class="blog-excerpt">
Techniques for reducing network traffic: delta compression, interest management, and selective state synchronization in large-scale environments.
</p>
<div class="blog-tag">Optimization</div>
</div>
</div>
</section> <!-- Article Modal -->
<div class="article-modal-overlay" id="articleModal">
<div class="article-modal">
<button class="article-modal-close" id="articleModalClose">✕</button>
<div class="article-modal-content">
<div class="article-modal-meta">
<span class="article-modal-date" id="articleModalDate"></span>
<span class="article-modal-tag" id="articleModalTag"></span>
</div>
<h3 class="article-modal-title" id="articleModalTitle"></h3>
<img id="articleModalImage" class="article-modal-image" alt="" style="display:none;">
<div class="article-modal-body" id="articleModalBody"></div>
</div>
</div>
</div> <!-- Project Modal (single project detail) -->
<div class="project-modal-overlay" id="projectModal">
<div class="project-modal">
<button class="project-modal-close" id="projectModalClose">✕</button>
<div class="project-modal-content">
<h3 class="project-modal-title" id="projectModalTitle"></h3>
<p class="project-modal-summary" id="projectModalSummary"></p>
<div class="project-modal-video-wrapper" id="projectModalVideoWrapper"></div>
<div class="project-modal-body" id="projectModalBody"></div>
</div>
</div>
</div> <!-- All Projects Modal (opened from nav) -->
<div class="project-modal-overlay" id="allProjectsModal">
<div class="project-modal">
<button class="project-modal-close" id="allProjectsModalClose">✕</button>
<div class="project-modal-content">
<h3 class="project-modal-title">All Projects</h3>
<div class="projects-grid all-projects-grid">
<!-- Each project lives here once --> <div class="project-card"
data-featured="true"
data-project-title="Networked Services Layer"
data-project-summary="Server-driven animation syncing layer that separates critical gameplay timelines from visual polish."
data-project-video="https://www.youtube.com/embed/GCNci0m_k5w"
data-project-body="This demo focuses on animation synchronization in a networked environment, using the server as the single source of truth for timing. The system distinguishes between critical animations that affect gameplay (such as hit frames) and purely visual animations that exist for feedback and polish. The video shows how clients align their local timelines to server-perceived time, so critical events land consistently even under different ping values. Visual animation layers can lead or lag slightly on each client, but the important frames are locked to server-confirmed timestamps. Under the hood, the layer tracks animation events as timed markers attached to server state, then interpolates or adjusts client playback to keep those markers aligned. This approach reduces desync issues, makes hit detection feel fair, and still leaves room for smooth, responsive visuals on each client.">
<div class="project-header">🌐</div>
<div class="project-body">
<h3 class="project-title">Networked Services Layer</h3>
<p class="project-description">
Scalable client–server communication layer with packet compression, state synchronization, and latency masking strategies for real-time applications.
</p>
<div class="project-tags">
<span class="tag">Lua</span>
<span class="tag">Networking</span>
</div>
<a href="#" class="project-link">Learn more →</a>
</div>
</div> <div class="project-card"
data-featured="true"
data-project-title="Systems & Tools Framework"
data-project-summary="Toolkit for analyzing algorithm behavior in terms of time, memory, and storage complexity."
data-project-video=""
data-project-body="This toolkit focuses on measuring how algorithms behave under real workloads by tracking their time, memory, and storage characteristics. It runs configurable test suites against a given implementation, records how runtime scales with input size, and captures peak and average memory usage. The system aggregates these measurements into simple visual summaries and reports, so it’s easy to compare different approaches to the same problem. It is designed to highlight practical complexity—not just Big-O on paper—by surfacing constant factors, cache effects, and I/O costs that show up in real executions. Internally, the toolkit wraps target functions with timing, allocation, and storage instrumentation, then exports the collected data for further analysis or visualization. This makes it useful both for learning algorithmic trade-offs and for performance tuning in production-style code.">
<div class="project-header">⚙️</div>
<div class="project-body">
<h3 class="project-title">Systems & Tools Framework</h3>
<p class="project-description">
Modular framework for rapid feature iteration, including event systems, state machines, logging, and debugging utilities.
</p>
<div class="project-tags">
<span class="tag">Architecture</span>
<span class="tag">Framework</span>
<span class="tag">Design</span>
</div>
<a href="#" class="project-link">Learn more →</a>
</div>
</div> <div class="project-card"
data-featured="true"
data-project-title="Performance & Monitoring Toolkit"
data-project-summary="Toolkit for analyzing algorithm behavior in terms of time, memory, and storage complexity."
data-project-video=""
data-project-body="This toolkit focuses on measuring how algorithms behave under real workloads by tracking their time, memory, and storage characteristics. It runs configurable test suites against a given implementation, records how runtime scales with input size, and captures peak and average memory usage. The system aggregates these measurements into simple visual summaries and reports, so it’s easy to compare different approaches to the same problem. It is designed to highlight practical complexity—not just Big-O on paper—by surfacing constant factors, cache effects, and I/O costs that show up in real executions. Internally, the toolkit wraps target functions with timing, allocation, and storage instrumentation, then exports the collected data for further analysis or visualization. This makes it useful both for learning algorithmic trade-offs and for performance tuning in production-style code.">
<div class="project-header">📊</div>
<div class="project-body">
<h3 class="project-title">Performance & Monitoring Toolkit</h3>
<p class="project-description">
A lightweight analysis tool that runs algorithms against configurable input sizes and records how their runtime, memory usage, and storage footprint scale in practice. It wraps target functions with instrumentation, collects timing and allocation metrics, and then summarizes the results so different implementations can be compared on real-world performance, not just theoretical Big-O.
</p>
<div class="project-tags">
<span class="tag">Optimization</span>
<span class="tag">Metrics</span>
<span class="tag">Backend</span>
</div>
<a href="#" class="project-link">Learn more →</a>
</div>
</div> <!-- Add more non-featured projects here (omit data-featured or set data-featured="false") -->
</div>
</div>
</div>
</div> <!-- Contact Section -->
<section class="section" id="contact">
<h2 class="section-title">Let's Connect</h2>
<div class="contact-content">
<p style="margin-bottom: 40px; color: var(--color-text-secondary);">
Open to discussing software engineering, networking, infrastructure, internships, and collaborations. Reach out below.
</p>
<div class="contact-links">
<a href="mailto:cWilliams5425@outlook.com" class="contact-link">
<div class="contact-icon">✉️</div>
<div class="contact-label">Email</div>
</a>
<a href="https://github.com/ChamarWilliams" class="contact-link">
<div class="contact-icon">💻</div>
<div class="contact-label">GitHub</div>
</a>
<a href="https://www.linkedin.com/in/chamarw/" class="contact-link">
<div class="contact-icon">🔗</div>
<div class="contact-label">LinkedIn</div>
</a>
<a href="https://twitter.com" class="contact-link">
<div class="contact-icon">𝕏</div>
<div class="contact-label">Twitter</div>
</a>
</div>
</div>
</section> <!-- Footer -->
<footer>
<p>© 2025 Chamar Williams. Built with care. </p>
</footer> <script src="script.js"></script>
</body>
</html>