-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
233 lines (210 loc) · 16 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>laladehulu.de 🖐</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Loading Bootstrap -->
<link href="dist/css/vendor/bootstrap.min.css" rel="stylesheet">
<!-- Loading Flat UI Pro -->
<link href="dist/css/flat-ui.css" rel="stylesheet">
<link href="index.css" rel="stylesheet">
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
</head>
<body >
<section class=" bg-dark header-section ">
<div class="d-flex flex-column text-center align-items-center justify-content-center flex-wrap header-div">
<div class="h3 typewrite " style="margin-top:37vh;" id="first-typewrite">
Hello, Nice to meet you, I'm a programmer
<div class="typewrite-text" id="front">Hello, Nice to meet you, I'm a programmer</div>
</div>
<p class="leading">
My name is Devin Han :)
</p>
<div class="social-media pt-4">
<a href="https://github.com/laladehulu"><img src="images/GitHub_Logo_White.png" width="100"></a>
</div>
<div class="mt-auto mb-3 " style="color: rgba(255, 255, 255, 0.644);">
<a class="d-block">Portfolios</a>
<a class="mb-5">▽</a>
</div>
</div>
</section>
<section class="projects-section palette-wet-asphalt bg-light text-dark text-sun-flower border-bottom">
<div class="container pt-5 mt-5">
<div class="h3 mt-5 mb-5" style="font-weight: 400; ">Here Are Some of My Projects
<div class="lead mb-1">Check them out!</div>
</div>
<br>
<div class="row project-row mt-5 mb-5 pb-5">
<div class="col-lg-6 d-flex flex-column" data-aos="fade-right">
<a href="https://hamiltoniangame.com/" class="h5 mb-4 d-block">Hamiltonian History</a>
<div class="p"> Immerse in a fantastically recreated world of 19th-cetury America and experience history through exciting slay-the-spire style hero combats. </div>
<a href="https://hamiltoniangame.com/" class="justify-self-end d-block cta" style="margin-top:10px;" target="_blank">George me some Washington</a>
</div>
<div class="col-lg-6" data-aos="fade-left">
<div class="videowrapper">
<iframe width="560" height="315" src="https://www.youtube.com/embed/zSA98GKXVt0?si=J5bPdtWr_-qlvZZ8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
<div class="row project-row mt-5 mb-5 pb-5">
<div class="col-lg-6 d-flex flex-column" data-aos="fade-right">
<a href="http://peerrate.net/" class="h5 mb-4 d-block"> Iron Chancellor </a>
<div class="p"> A 3D real-time strategy game themed in Franco Prussian War. Employed a multi-agent RL model to simulate the skirmish battlefield tactic of 19th-century. </div>
<a href="https://www.youtube.com/embed/v4W662cWHh8?si=EEiUUoowx5E0X4KN" class="justify-self-end d-block cta" style="margin-top:10px;" target="_blank">Are You Napoleon III or Bismarck?</a>
</div>
<div class="col-lg-6" data-aos="fade-left">
<div class="videowrapper">
<iframe width="560" height="315" src="https://www.youtube.com/embed/v4W662cWHh8?si=EEiUUoowx5E0X4KN" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
<div class="row project-row mt-5 mb-5 pb-5">
<div class="col-lg-6 d-flex flex-column" data-aos="fade-right">
<a href="https://gamejolt.com/games/treasureforrealm/628981" class="h5 mb-4 d-block">Treasure of Forrealm(added Dec 21)</a>
<div class="p"> During the summer, I developed a multiplayer player versus player (PvP) treasure hunt game. Originally designed as a tool for learning Spanish, the game has evolved into a fully-realized PvP experience. </div>
<a href="https://gamejolt.com/games/treasureforrealm/628981" class="justify-self-end d-block cta" style="margin-top:10px;" target="_blank">Have some fun</a>
</div>
<div class="col-lg-6" data-aos="fade-left">
<div class="videowrapper">
<iframe width="560" height="315" src="https://www.youtube.com/embed/5-LmgvwaTYk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
<div class="row project-row mt-5 mb-5 pb-5">
<div class="col-lg-6 d-flex flex-column" data-aos="fade-right">
<a href="https://youtu.be/vlyRnYkcLZM" class="h5 mb-4 d-block">Code Mano</a>
<div class="p">During the pandemic, I conceptualized a live coding sharing tool that could be used in classrooms. The idea was to create a platform where teachers could code live and students could ask questions, as an alternative to traditional whiteboard teaching. I approached my computer science teachers with the idea, but found it challenging to market the concept effectively.</div>
<a href="https://youtu.be/vlyRnYkcLZM" class="justify-self-end d-block cta" style="margin-top:10px;" target="_blank" >Learn CS the right way</a>
</div>
<div class="col-lg-6" data-aos="fade-left">
<div class="videowrapper">
<iframe width="560" height="315" src="https://www.youtube.com/embed/vlyRnYkcLZM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
<div class="row project-row mt-5 mb-5 pb-5">
<div class="col-lg-6 d-flex flex-column" data-aos="fade-right">
<a href="http://peerrate.net/" class="h5 mb-4 d-block"> PeerRate </a>
<div class="p"> During a hackathon, I collaborated with <a href="https://github.com/TheLemonOrange" style="text-decoration: underline;" target="_blank">Lemon Foxmere</a> to create a project for Think Care Act. Our task was to develop an app that enabled users to evaluate themselves. We brainstormed an idea that involved a multiplayer evaluation feature, which we thought would be a fun feature. Lemon focused on creating an attractive user interface, while I worked on developing the networking and backend code for the project.</div>
<a href="http://peerrate.net/" class="justify-self-end d-block cta" style="margin-top:10px;" target="_blank">AWS took it down 😔</a>
</div>
<div class="col-lg-6" data-aos="fade-left">
<div class="videowrapper">
<iframe width="560" height="315" src="https://www.youtube.com/embed/DrfBjLUh2YE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
<div class="row project-row mt-5 mb-5 pb-5">
<div class="col-lg-6 d-flex flex-column" data-aos="fade-right">
<a href="http://parrotnote.de:25565" class="h5 mb-4 d-block">Parrot Note</a>
<div class="p">After growing tired of constantly switching between tabs while trying to take notes during YouTube lecture videos, I set out to create a solution. I developed a website that automatically formats notes and enables users to take notes while watching videos. This approach allows for more effective learning through video lectures while simplifying the note-taking process.</div>
<a href="http://parrotnote.de:25565" class="justify-self-end d-block cta" style="margin-top:10px;" target="_blank" >Take some quality notes</a>
</div>
<div class="col-lg-6" data-aos="fade-left">
<iframe width="560" height="315" src="https://www.youtube.com/embed/gfhuNjnaTkk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<div class="row project-row mt-5 mb-5 pb-5">
<div class="col-lg-6 d-flex flex-column" data-aos="fade-right">
<a href="http://realmofcuriosity.com" class="h5 mb-4 d-block">House of Curiosity</a>
<div class="p">The COVID-19 pandemic has made it difficult for people to share their innovative ideas and discoveries with their communities through traditional in-person gatherings. In response to this challenge, I developed an app called "House of Curiosity" that enables users to post keynote seminar schedules for other members of their community. This app is designed to bring together a diverse range of individuals, including history buffs, musicians, geeks, and anyone else interested in sharing their fascinating discoveries and ideas. It even won a $1000 prize!</div>
<a href="http://realmofcuriosity.com" class="justify-self-end d-block cta" style="margin-top:10px;" target="_blank" >Cmon' aboard!</a>
</div>
<div class="col-lg-6" data-aos="fade-left">
<div class="videowrapper">
<iframe width="560" height="315" src="https://www.youtube.com/embed/VscBwux7yu4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
<div class="row project-row mt-5 mb-5 pb-5 project-media">
<div class="col-lg-6 d-flex flex-column" data-aos="fade-right">
<a href="http://parrotnote.de:25565" class="h5 mb-4 d-block" >Silent Day</a>
<div class="p">I collaborated with Mr. John and Sire Pepsipu to create a 3D real-time strategy (RTS) game set in World War I using Unity 3D. Our game includes advanced features such as A* pathfinding, a group system, and a build system. For those interested in technical details, we implemented several programming patterns, including the Command Pattern, Component Pattern, and Interface Pattern, among others.</div>
<a href="https://www.youtube.com/watch?v=Ejow8wOkT-A" class="justify-self-end d-block cta" style="margin-top:10px;" target="_blank">See the bleeding edge of tech</a>
</div>
<div class="col-lg-6" data-aos="fade-left">
<div class="videowrapper">
<iframe width="560" height="315" src="https://www.youtube.com/embed/Ejow8wOkT-A" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<!-- </div>
<div class="row project-row mt-5 mb-5 pb-5 project-media">
<div class="col-lg-6 d-flex flex-column" data-aos="fade-right">
<a href="http://parrotnote.de:25565" class="h5 mb-4 d-block">Website For Mufu's kingdom</a>
<div class="p">Website I made for a friend in html and css. The idea is about a medieval regiment</div>
<a href="https://youtu.be/uKjYkOLh8Fg" class="justify-self-end d-block" target="_blank">project page</a>
</div>
<div class="col-lg-6" data-aos="fade-left">
<div class="videowrapper">
<iframe width="560" height="315" src="https://www.youtube.com/embed/uKjYkOLh8Fg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div> -->
<div class="row project-row mt-5 mb-5 pb-5 project-media">
<div class="col-lg-6 d-flex flex-column" data-aos="fade-right">
<a href="https://iexploreclub.org" class="h5 mb-4 d-block">iExplore Landing Page</a>
<div class="p">As the vice president of the iExplore club, a non-profit organization that hosts webinars and small group lectures on STEM and literature, I designed and developed the landing page for the club's website. Our mission is to inspire and educate individuals interested in these fields, and our website serves as a hub for information about our upcoming events and lectures.</div>
<a href="https://iexploreclub.org" class="justify-self-end d-block cta" style="margin-top:10px;" target="_blank">Get educated</a>
</div>
<div class="col-lg-6" data-aos="fade-left">
<div class="videowrapper">
<iframe width="560" height="315" src="https://www.youtube.com/embed/GdBSzEeuiXM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
<div class="row project-row mt-5 mb-5 pb-5 project-media">
<div class="col-lg-6 d-flex flex-column"data-aos="fade-right" >
<a href="http://parrotnote.de:25565" class="h5 mb-4 d-block">Quote Cards</a>
<div class="p">As someone who was tired of manually creating index cards for English research papers, I developed a Chrome extension called Quote Cards. It enables users to highlight text on any website and generate a digital index card for the quote. The cards are automatically saved to the user's local storage, and the they can easily search through their deck of cards to find earlier quotes. Quote Cards simplifies the process of organizing and referencing research material for academic papers.</div>
<a href="https://chrome.google.com/webstore/detail/quote-card/cpeeafnodcfbaiaedeimgmacpopabjdm?hl=en" class="justify-self-end d-block cta" style="margin-top:10px;" target="_blank">Index away!</a>
</div>
<div class="col-lg-6" data-aos="fade-left">
<img src="images/quotecard.png">
</div>
</div>
</div>
</div>
</section>
<section class="about-me-section bg-light text-dark" >
<div class="container">
<div class="container pl-0 mt-5 mb-0 mb-lg-5">
<div class="h3 mb-5 mt-5 ">About Me
<div class="lead">I'm both an artist and a coder 😏</div>
</div>
</div>
<br>
<div class="row mt-lg-5 about-me-section-div" >
<div class="col-lg-4 pt-5 mb-3 mb-lg-0 stats-left " data-aos="fade-right">
<div class="h5">Artist</div>
<div class="p">🤪 Despite being a non-professional , I love making digital arts such as illustrations, 3D models, and graphic designs. </div>
</div>
<div class="col-lg-4 french-div " >
<div class="french-container">
<img src="images/french.JPG">
</div>
<div class="french-subtitle small text-center">
3D model made by me, textured by my buddy John.
</div>
</div>
<div class="col-lg-4 pt-5" data-aos="fade-left">
<div class="h5">Coder</div>
<div class="p">Coding is my coffee. I drink it everyday.</div>
</div>
</div>
</div>
</section>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<!-- Bootstrap 4 requires Popper.js -->
<script src="https://unpkg.com/[email protected]/dist/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="http://vjs.zencdn.net/6.6.3/video.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
<script src="dist/scripts/flat-ui.js"></script>
<script src="script.js"></script>
<script>
AOS.init();
</script>
</body>
</html>