-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcube.html
More file actions
140 lines (123 loc) · 3.66 KB
/
Copy pathcube.html
File metadata and controls
140 lines (123 loc) · 3.66 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="8×8×8 LED Cube — Charles Wang">
<link rel="icon" href="res/icon.ico">
<title>LED Cube · Charles Wang</title>
<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=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
<style>
.back-link {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.8125rem;
color: var(--text-muted);
text-decoration: none;
margin-bottom: 2.5rem;
transition: color 0.15s;
}
.back-link:hover { color: var(--text); }
.cube-meta {
font-family: var(--font-mono);
font-size: 0.75rem;
color: var(--text-muted);
margin-bottom: 1rem;
}
.cube-desc {
font-size: 1.0125rem;
color: #374151;
line-height: 1.8;
max-width: 620px;
margin-bottom: 2.5rem;
}
.cube-video {
width: 100%;
max-width: 640px;
aspect-ratio: 16 / 9;
border-radius: 8px;
border: 1px solid var(--border);
margin-bottom: 2.5rem;
}
.cube-photo {
width: 100%;
max-width: 640px;
border-radius: 8px;
border: 1px solid var(--border);
display: block;
}
.media-label {
font-family: var(--font-mono);
font-size: 0.72rem;
color: var(--accent);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 0.75rem;
}
.video-thumb-link {
display: block;
max-width: 640px;
margin-bottom: 2.5rem;
text-decoration: none;
}
.video-thumb {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
border-radius: 8px;
border: 1px solid var(--border);
overflow: hidden;
background: #000;
}
.video-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
opacity: 0.85;
transition: opacity 0.2s;
}
.video-thumb:hover img { opacity: 0.7; }
.video-play {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 3rem;
color: white;
text-shadow: 0 2px 8px rgba(0,0,0,0.5);
pointer-events: none;
}
</style>
</head>
<body>
<nav>
<a class="nav-name" href="index.html">Charles Wang</a>
</nav>
<main>
<a class="back-link" href="index.html">← Back</a>
<p class="section-label">// projects</p>
<h1>8×8×8 LED Cube</h1>
<p class="cube-meta">2016 · Hardware · University of Michigan</p>
<p class="cube-desc">
Built a 512-LED cube as part of a team of four at the University of Michigan.
Programmed an FPGA board in assembly to render and animate two-variable mathematical functions
across the 3D LED grid. Completed the day before our final presentation.
</p>
<p class="media-label">// demo</p>
<a href="https://www.youtube.com/watch?v=tT8K8eu9Nfg" target="_blank" rel="noopener" class="video-thumb-link">
<div class="video-thumb">
<img src="https://img.youtube.com/vi/tT8K8eu9Nfg/hqdefault.jpg" alt="8x8x8 LED Cube demo video">
<div class="video-play">▶</div>
</div>
</a>
<p class="media-label">// photo</p>
<img class="cube-photo" src="res/cube.jpg" alt="8x8x8 LED Cube">
</main>
</body>
</html>