-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
309 lines (308 loc) · 14 KB
/
index.html
File metadata and controls
309 lines (308 loc) · 14 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
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link href="style.css" rel="stylesheet" />
<script defer src="script.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<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&family=Roboto:ital,wght@0,400;0,500;0,700;1,400&family=Satisfy&display=swap"
rel="stylesheet"
/>
</head>
<body>
<audio autoplay>
<source src="img/thunder.wav" type="audio/wav" />
</audio>
<div class="mobile">
This is currently not available on mobile! If you are on desktop, please
full-screen website to more than 912 pixels.
</div>
<section class="section-hero">
<div class="what-is--div">
<div class="what-is--title-div">
<h1 class="what-is--title">
What is a Tech Chad 10x Developer Brogrammer?
</h1>
<p class="what-is--text">
A Tech Chad 10x developer Brogrammer meditates daily, wakes up at 5
AM, is jacked, and most importantly, codes at 10x the speed of a
normal developer. He codes this fast due to his dedication to his
craft. He shows everyone that it's 100% possible to be an all-around
human being, and that it is important. He also takes craps while
standing and is able to control his internal body temperature.
</p>
<button class="next-button what-is">Next →</button>
</div>
</div>
<div class="what-is--image-box">
<p class="what-is--img-desc"></p>
</div>
</section>
<section class="section-how">
<h2 class="how-title">It all starts with mindset</h2>
<div class="section-how-flex">
<div class="how-div">
<figure class="mindmap" data-type="0"><p>Mindset</p></figure>
<figure class="mindmap" data-type="1"><p>Trajectory</p></figure>
<figure class="mindmap" data-type="2">
<p>Principle centered learning</p>
</figure>
<figure class="mindmap" data-type="3"><p>careers</p></figure>
<figure class="mindmap" data-type="4">
<p>Web development</p>
</figure>
<figure class="mindmap" data-type="5"><p>Embedded Systems</p></figure>
<figure class="mindmap" data-type="6"><p>Machine Learning</p></figure>
<figure class="mindmap" data-type="7"><p>Data Science</p></figure>
<figure class="mindmap" data-type="8"><p>And much more!</p></figure>
<span class="connector" data-type="0"></span>
<span class="connector" data-type="1"></span>
<span class="connector" data-type="2"></span>
<span class="connector" data-type="3"></span>
<span class="connector" data-type="4"></span>
<span class="connector" data-type="5"></span>
<span class="connector" data-type="6"></span>
<span class="connector" data-type="7"></span>
</div>
<div class="explanation" data-type="0">
<h3 class="explanation-title">Mindset</h3>
<p class="explanation-desc">
It all starts with the right mindset. They know that every outside
journey must start from within. This journey is not like any other
journey. The struggles of computer science equates to a more
meaningful life as well as more stress. It is ultimately up to you
to take on the task. Give yourself a reason for Computer Science to
be your passion. For me, it is because it <i>embodies</i> the
meaning of life. It requires constant learning on the job and it is
constantly evolving. You will be compensated well for the value you
provide to this world. You deserve it.
</p>
</div>
</div>
<button class="next-button how">Next →</button>
</section>
<section class="section-gallery">
<div class="container">
<div class="gallery-title-div">
<h2 class="gallery-title">Gallery</h2>
</div>
<div class="gallery">
<figure class="gallery-figure">
<div class="figure-image" data-img="0"></div>
<div class="figure-text">
<h3 class="figure-title">Linda Mansour</h3>
<p class="figure-desc">
Originally a Neuroscience major, she made a career switch to
bioinformatics. She was featured in an article on break-thru
tech and is loving it.
</p>
</div>
</figure>
<figure class="gallery-figure">
<div class="figure-image" data-img="1"></div>
<div class="figure-text">
<h3 class="figure-title">David Serrano</h3>
<p class="figure-desc">
He is him, the author of this website. He hopes that he embodies
every characteristic that this website poses. He believes that
everyone is capable of what it takes to become whatever they
want with the power of choice.
<!-- <a href="www.linkedin.com/in/davidserranodev">LinkedIn!</a> -->
</p>
</div>
</figure>
<figure class="gallery-figure">
<div class="figure-image" data-img="2"></div>
<div class="figure-text">
<h3 class="figure-title">Frank Mensah</h3>
<p class="figure-desc">
I met this guy in CS 211 during COVID. He's a CS homie that's
been there since day 1. We have both complimented each other's
journeys. I remember when he told me that he wakes up at 5 am,
and that inspired me to do it too.
</p>
</div>
</figure>
<figure class="gallery-figure">
<div class="figure-image" data-img="3"></div>
<div class="figure-text">
<h3 class="figure-title">Nadia Taiym</h3>
<p class="figure-desc">
After joining Break-thru Tech Chicago, she was able to join
Morningstar in a sprinternship, which led to a full time summer
internship. Today, she works at Morningstar full-time as well as
being a student full time
</p>
</div>
</figure>
<figure class="gallery-figure">
<div class="figure-image" data-img="4"></div>
<div class="figure-text">
<h3 class="figure-title">Vertical Monitor</h3>
<p class="figure-desc">
This is a vertical monitor. Every Tech Chad 10x Developer
Brogrammer must have a monitor that can go vertical. Instead of
viewing ~35 lines of code at a time, you are able to view ~80
lines of code.
</p>
</div>
</figure>
<figure class="gallery-figure">
<div class="figure-image" data-img="5"></div>
<div class="figure-text">
<h3 class="figure-title">Nate Hittensdorf</h3>
<p class="figure-desc">
This is my roommate. He is definitely a tech chad with the
amount of caffeine he consumes daily. He also spends ~40 minutes
on the toilet and always gets last in gun game. He also has an
internship with CME.
</p>
</div>
</figure>
<figure class="gallery-figure">
<div class="figure-image" data-img="6"></div>
<div class="figure-text">
<h3 class="figure-title">Konrad Zygier</h3>
<p class="figure-desc">
This is my roommate. A comrade in computer engineering, he is
also in the midst of a gambling addiction.
</p>
</div>
</figure>
<figure class="gallery-figure">
<div class="figure-image" data-img="7"></div>
<div class="figure-text">
<h3 class="figure-title">Ryan Lakin</h3>
<p class="figure-desc">
50% tech chad since hes just a chad. He uses his computer to
write papers. He's also good with telecommunications and got
caught cheating in poker once by dealing himself pocket aces.
</p>
</div>
</figure>
<figure class="gallery-figure">
<div class="figure-image" data-img="8"></div>
<div class="figure-text">
<h3 class="figure-title">Nick Pintar</h3>
<p class="figure-desc">
Brilliant tech chad who is very passionate about CS. He loves
CS!
</p>
</div>
</figure>
<figure class="gallery-figure">
<div class="figure-image" data-img="9"></div>
<div class="figure-text">
<h3 class="figure-title">AAnthony Lahm</h3>
<p class="figure-desc">
Met this man in MATH 215 and then we had CS 362 together, where
we joined a team to make arduino racecars. He is hardworking and
does not mess around.
</p>
</div>
</figure>
<figure class="gallery-figure">
<div class="figure-image" data-img="10"></div>
<div class="figure-text">
<h3 class="figure-title">Aiban Horan</h3>
<p class="figure-desc">
Has toy bobblehead collection that's worth probably $5,000. Has
mommy issues, likes blonde chicks, and will tell you random
useless facts during marvel movies that you don't care about. If
this is not 10x then idk what is.
</p>
</div>
</figure>
<!-- let's get Nadia and Nate -->
<div class="down-arrow">↓</div>
</div>
</div>
<div class="section-background">
<p class="everything-matters" data-type="0">Everything matters.</p>
<p class="everything-matters" data-type="1">
Take a look at a <span class="rose">rose</span>. Here is one
</p>
<img class="everything-matters" data-type="2" src="./img/rose.jpg" />
<p class="everything-matters" data-type="3">
<i class="beautiful">Beautiful</i>, isn't it?
</p>
<p class="everything-matters" data-type="3">Well guess what?</p>
<p class="everything-matters" data-type="3">
We can model the <span class="rose">rose's</span> spiral with <10
lines of code.
</p>
<div class="everything-matters" data-type="4">
<img src="./img/fib.PNG" />
<!-- <img src="./img/terms.PNG"/> -->
</div>
<p class="everything-matters" data-type="3">
If such a <i class="beautiful">beautiful</i>
<span class="rose">rose</span> can be created with such a
<span class="simple">simple</span> formula, imagine what
<i class="beautiful">beautiful</i> things you could do with your life
if you started applying the <span class="simple">simple</span> things.
</p>
<p class="everything-matters" data-type="3">
When I realized this, I began to live!
</p>
<p class="everything-matters" data-type="3">
That made me read this book called "The 5 AM Club"
</p>
<img class="everything-matters" src="./img/5Am.png" data-type="5" />
<p class="everything-matters">and I embodied the morning routine.</p>
<p class="everything-matters">
Starting in March of 2022, I made an oath to myself to wake up at 5 am
every weekday for the rest of my life. Non negotiable, it has totally
revolutionized my life and the direction of it. All of the neurons in
my brain look at reality in a positive lense. I feel the most alive;
the most aligned with the energy of the Earth's heartbeat. Nothing
matters more to me than becoming the best version of myself in ALL
AREAS OF LIFE. Physical, emotional/social, mental, spiritual,
financial, environmental, etc. My goal on this Earth is to be
maximally synergistic. To contribute so much value to this Earth that
it creates a self reinforcing cycle of recycling and regrowth, just
like a plant. My influence on the people around me will be multi
generational.
</p>
<p class="everything-matters">
I don't know how I will achieve that, and I don't know my true calling
yet, but I know it will happen.
</p>
<img class="everything-matters" src="./img/R.png" data-type="6" />
<p class="everything-matters">
I want it. I am matching the frequency. I am manifesting it. I will
blossom.
</p>
<img
class="everything-matters"
src="./img/flower-bloom.gif"
data-type="7"
/>
</div>
<div class="asdfgh">
<button class="next-button me">Next →</button>
</div>
</section>
<section class="section-me">
<div class="no-turningg">,</div>
<p class="no-turning">There is no turning back.</p>
<p class="no-turning" data-type="0">
Stay faithful to your highest self.
</p>
<p class="no-turning" data-type="1">
Follow David and his journey at his
<a target="_blank" href="https://www.davidserrano.dev">portfolio</a> and
<a target="_blank" href="https://www.linkedin.com/in/davidserranodev"
>LinkedIn</a
>
</p>
</section>
</body>
</html>