-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcreative.html
More file actions
204 lines (162 loc) · 11 KB
/
creative.html
File metadata and controls
204 lines (162 loc) · 11 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Creative Work - Peter He</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="icon" type="image/svg+xml" href="/favicon/favicon.svg">
<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=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap"
rel="stylesheet">
</head>
<body class="bg-white text-gray-900 font-sans">
<nav class="border-b border-gray-200 py-4">
<div class="max-w-6xl mx-auto px-6">
<div class="flex space-x-8">
<a href="index.html" class="text-gray-500 hover:text-gray-700 transition-colors">home</a>
<a href="projects.html" class="text-gray-500 hover:text-gray-700 transition-colors">projects</a>
<a href="research.html" class="text-gray-500 hover:text-gray-700 transition-colors">research</a>
<a href="creative.html" class="text-black font-medium border-b-2 border-black pb-1">creative</a>
</div>
</div>
</nav>
<main class="max-w-6xl mx-auto px-6 py-12">
<section class="mb-8">
<h1 class="text-5xl font-bold text-black mb-4">creative work</h1>
<p class="text-xl text-gray-600">art, photography, design, sculptures, anything creative.</p>
</section>
<section class="mb-10">
<h2 class="text-3xl font-bold text-black mb-8">amateur photography</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-gray-50 rounded-lg p-4 shadow-md hover:shadow-xl transition-shadow duration-300">
<img src="1000009168.jpg" alt="London Chinatown" class="w-full rounded mb-3">
</div>
<div class="bg-gray-50 rounded-lg p-4 shadow-md hover:shadow-xl transition-shadow duration-300">
<img src="1000009255.jpg" alt="London Industrial" class="w-full rounded mb-3">
</div>
<div class="bg-gray-50 rounded-lg p-4 shadow-md hover:shadow-xl transition-shadow duration-300">
<img src="1000008512.jpg" alt="Train" class="w-full rounded mb-3">
</div>
<div class="bg-gray-50 rounded-lg p-4 shadow-md hover:shadow-xl transition-shadow duration-300">
<img src="IMG_1441.jpg" alt="Tokyo Akihabara" class="w-full rounded mb-3">
</div>
<div class="bg-gray-50 rounded-lg p-4 shadow-md hover:shadow-xl transition-shadow duration-300">
<img src="IMG_1243.jpg" alt="Yokohoma Chinatown" class="w-full rounded mb-3">
</div>
<div class="bg-gray-50 rounded-lg p-4 shadow-md hover:shadow-xl transition-shadow duration-300">
<img src="gatesofhell.jpg" alt="Gates of Hell" class="w-full rounded mb-3">
</div>
<div class="bg-gray-50 rounded-lg p-4 shadow-md hover:shadow-xl transition-shadow duration-300">
<img src="12239.jpg" alt="Plane" class="w-full rounded mb-3">
</div>
<div class="bg-gray-50 rounded-lg p-4 shadow-md hover:shadow-xl transition-shadow duration-300">
<img src="1000008122.jpg" alt="German Palace" class="w-full rounded mb-3">
</div>
<div class="bg-gray-50 rounded-lg p-4 shadow-md hover:shadow-xl transition-shadow duration-300">
<img src="scenedesert.jpg" alt="Middle of nowhere" class="w-full rounded mb-3">
</div>
<div class="bg-gray-50 rounded-lg p-4 shadow-md hover:shadow-xl transition-shadow duration-300">
<img src="1000009374.jpg" alt="Grafitti Heaven" class="w-full rounded mb-3">
</div>
<div class="bg-gray-50 rounded-lg p-4 shadow-md hover:shadow-xl transition-shadow duration-300">
<img src="IMG_1252.jpg" alt="Ferris Wheel in Yokohoma" class="w-full rounded mb-3">
</div>
<div class="bg-gray-50 rounded-lg p-4 shadow-md hover:shadow-xl transition-shadow duration-300">
<img src="birddrama.jpg" alt="Dramatic Bird" class="w-full rounded mb-3">
</div>
</div>
</section>
<section class="mb-10">
<h2 class="text-3xl font-bold text-black mb-8">sculptures</h2>
<div class="grid grid-cols-1 md:grid-cols-1 gap-8">
<div class="bg-gray-50 rounded-lg p-4 shadow-md hover:shadow-xl transition-shadow duration-300">
<div class="flex flex-col md:flex-row justify-center items-center gap-4 mb-3">
<img src="funhand.png" alt="Hand CAD" class="rounded w-full h-auto md:h-80 md:w-auto">
<img src="IMG_9866.jpg" alt="Funny Cornhell Hoodie" class="rounded w-full h-auto md:h-80 md:w-auto">
<img src="IMG_9917.jpg" alt="Funny Cornhell Hoodie" class="rounded w-full h-auto md:h-80 md:w-auto">
</div>
<h3 class="text-lg font-medium text-black">Oversized Reality Hack 3D-printed Haptic Glove Sculpture</h3>
<p class="text-base text-gray-600">Designed in Fusion 360 and fully 3D-printed. <br> It is a replica of Lucas VRTech's Open-Source Haptic Gloves. <br> LED strips for neon glow sign. <br> <br> <strong>Comissioned for Reality Hack 2025 (Largest XR Hackathon)</strong>.
</p>
</div>
</div>
</section>
<section class="mb-10">
<h2 class="text-3xl font-bold text-black mb-8">art</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-gray-50 rounded-lg p-4 shadow-md hover:shadow-xl transition-shadow duration-300">
<img src="design7.jpg" alt="Funny Cornhell Hoodie" class="w-full rounded mb-3"
style="aspect-ratio: 1/1">
<h3 class="text-lg font-medium text-black">Cornhell</h3>
<p class="text-base text-gray-600">Satirical Merch Design. I also made stickers and they ended up
all over campus during my freshmen year. <br> <br> <strong>Much to Cornell's annoyance
probably.</strong></p>
</div>
<div class="bg-gray-50 rounded-lg p-4 shadow-md hover:shadow-xl transition-shadow duration-300">
<img src="design6-2.png" alt="Ecology House T-Shirt" class="w-full rounded mb-3">
<h3 class="text-lg font-medium text-black">Ecology House T-Shirt</h3>
<p class="text-base text-gray-600">Inspired by another student's cat from when I lived in Cornell's
Ecology House. <br> <br> This became the official Eco House T-shirt for 2023 - 2024 academic
year.</p>
</div>
<div class="bg-gray-50 rounded-lg p-4 shadow-md hover:shadow-xl transition-shadow duration-300">
<img src="design5.png" alt="Eclipse Sticker Design" class="w-full rounded mb-3">
<h3 class="text-lg font-medium text-black">Eclipse Sticker Design</h3>
<p class="text-base text-gray-600">Sticker I drew that won the Fuertes Observatory Sticker
Design Contest. <br><br> Was printed and distributed to Ithacans watching the 2024 Eclipse.</p>
</div>
</div>
</section>
<section class="mb-10">
<h2 class="text-3xl font-bold text-black mb-8">3D designs</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-gray-50 rounded-lg p-4 shadow-md hover:shadow-xl transition-shadow duration-300">
<video src="sickvideo.mp4" autoplay muted loop playsinline webkit-playsinline preload="metadata"
class="w-full h-auto rounded-lg object-cover mb-3" style="aspect-ratio: 1/1;">
Your browser does not support the video tag.
</video>
<h3 class="text-lg font-medium text-black">Smart Pendent Render</h3>
<p class="text-base text-gray-600">Explosive render I made while working at an AI Wearables startup
called Halo.</p>
</div>
<div class="bg-gray-50 rounded-lg p-4 shadow-md hover:shadow-xl transition-shadow duration-300">
<video src="cuxrvideo.mp4" autoplay muted loop playsinline webkit-playsinline preload="metadata"
class="w-full h-auto rounded-lg object-cover mb-3">
Your browser does not support the video tag.
</video>
<h3 class="text-lg font-medium text-black">Cornell XR Logo</h3>
<p class="text-base text-gray-600">Modeled in blender and rendered in Light Tracer Render.</p>
</div>
<div class="bg-gray-50 rounded-lg p-4 shadow-md hover:shadow-xl transition-shadow duration-300">
<img src="design1.png" alt="Kraken Pirate" class="w-full rounded mb-3">
<h3 class="text-lg font-medium text-black">Kraken Pirate</h3>
<p class="text-base text-gray-600">Voxel Kraken</p>
</div>
<div class="bg-gray-50 rounded-lg p-4 shadow-md hover:shadow-xl transition-shadow duration-300">
<img src="design4.gif" alt="Voxel Toast Cat" class="w-full rounded mb-3">
<h3 class="text-lg font-medium text-black">Toast Cat</h3>
<p class="text-base text-gray-600">Voxel animated Toast Cat</p>
</div>
<div class="bg-gray-50 rounded-lg p-4 shadow-md hover:shadow-xl transition-shadow duration-300">
<img src="design2.png" alt="Medieval Weapon Stand" class="w-full rounded mb-3">
<h3 class="text-lg font-medium text-black">Medieval Weapon Stand</h3>
<p class="text-base text-gray-600">Voxel Furniture</p>
</div>
<div class="bg-gray-50 rounded-lg p-4 shadow-md hover:shadow-xl transition-shadow duration-300">
<img src="design3.png" alt="FTC Robotics CAD" class="w-full rounded mb-3">
<h3 class="text-lg font-medium text-black">FTC Robotics CAD</h3>
<p class="text-base text-gray-600">Remnant of my HS Robotics Days</p>
</div>
</div>
</section>
</main>
<footer class="border-t border-gray-200 py-8">
<div class="max-w-6xl mx-auto px-6 text-center text-gray-500">
<p>© 2025 Peter He. All rights reserved.</p>
</div>
</footer>
</body>
</html>