-
Notifications
You must be signed in to change notification settings - Fork 0
/
Story.html
191 lines (170 loc) · 8.08 KB
/
Story.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Story - Technomancer's Realm</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&display=swap');
body {
margin: 0;
padding: 0;
font-family: 'Courier Prime', monospace;
background-color: #000;
color: #0f0;
line-height: 1.6;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
h1, h2 {
text-align: center;
text-transform: uppercase;
letter-spacing: 2px;
}
h1 {
font-size: 3rem;
margin-bottom: 1rem;
text-shadow: 0 0 5px #0f0, 0 0 10px #0f0;
}
.glitch {
position: relative;
font-size: 2rem;
font-weight: bold;
color: #0f0;
letter-spacing: 3px;
margin-bottom: 1rem;
}
.glitch:before,
.glitch:after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
}
.glitch:before {
left: 2px;
text-shadow: -1px 0 #ff00de;
clip: rect(44px, 450px, 56px, 0);
animation: glitch-anim 5s infinite linear alternate-reverse;
}
.glitch:after {
left: -2px;
text-shadow: -1px 0 #00fff9;
clip: rect(44px, 450px, 56px, 0);
animation: glitch-anim2 5s infinite linear alternate-reverse;
}
@keyframes glitch-anim {
0% { clip: rect(10px, 9999px, 28px, 0); }
5% { clip: rect(66px, 9999px, 98px, 0); }
10% { clip: rect(37px, 9999px, 23px, 0); }
15% { clip: rect(89px, 9999px, 76px, 0); }
20% { clip: rect(65px, 9999px, 57px, 0); }
25% { clip: rect(74px, 9999px, 94px, 0); }
30% { clip: rect(47px, 9999px, 9px, 0); }
35% { clip: rect(37px, 9999px, 45px, 0); }
40% { clip: rect(96px, 9999px, 84px, 0); }
45% { clip: rect(72px, 9999px, 43px, 0); }
50% { clip: rect(19px, 9999px, 15px, 0); }
55% { clip: rect(55px, 9999px, 65px, 0); }
60% { clip: rect(81px, 9999px, 4px, 0); }
65% { clip: rect(38px, 9999px, 49px, 0); }
70% { clip: rect(15px, 9999px, 43px, 0); }
75% { clip: rect(70px, 9999px, 69px, 0); }
80% { clip: rect(2px, 9999px, 14px, 0); }
85% { clip: rect(33px, 9999px, 59px, 0); }
90% { clip: rect(20px, 9999px, 46px, 0); }
95% { clip: rect(100px, 9999px, 86px, 0); }
100% { clip: rect(43px, 9999px, 77px, 0); }
}
@keyframes glitch-anim2 {
0% { clip: rect(65px, 9999px, 36px, 0); }
5% { clip: rect(36px, 9999px, 4px, 0); }
10% { clip: rect(85px, 9999px, 66px, 0); }
15% { clip: rect(91px, 9999px, 91px, 0); }
20% { clip: rect(48px, 9999px, 38px, 0); }
25% { clip: rect(38px, 9999px, 22px, 0); }
30% { clip: rect(69px, 9999px, 54px, 0); }
35% { clip: rect(98px, 9999px, 71px, 0); }
40% { clip: rect(46px, 9999px, 34px, 0); }
45% { clip: rect(34px, 9999px, 43px, 0); }
50% { clip: rect(2px, 9999px, 80px, 0); }
55% { clip: rect(27px, 9999px, 65px, 0); }
60% { clip: rect(81px, 9999px, 4px, 0); }
65% { clip: rect(38px, 9999px, 49px, 0); }
70% { clip: rect(15px, 9999px, 43px, 0); }
75% { clip: rect(70px, 9999px, 69px, 0); }
80% { clip: rect(2px, 9999px, 14px, 0); }
85% { clip: rect(33px, 9999px, 59px, 0); }
90% { clip: rect(20px, 9999px, 46px, 0); }
95% { clip: rect(100px, 9999px, 86px, 0); }
100% { clip: rect(43px, 9999px, 77px, 0); }
}
.content-box {
margin-top: 1rem;
border: 1px solid #0f0;
padding: 20px;
background-color: rgba(0, 255, 0, 0.05);
}
.back-link {
display: inline-block;
margin-top: 20px;
color: #0f0;
text-decoration: none;
border: 1px solid #0f0;
padding: 5px 10px;
transition: all 0.3s ease;
}
.back-link:hover {
background-color: #0f0;
color: #000;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>Technomancer</h1>
</header>
<main>
<section>
<h2 class="glitch" data-text="My Story">My Story</h2>
<div class="content-box">
<p>
Embracing Curiosity and Determination in Technology
</p>
Technology has always been a passion of mine,
stemming from an innate curiosity and a resolute determination to tackle challenges.
This journey began during my middle school years
when my access to a game console was restricted by my parents.
Turning frustration into motivation, I sought refuge in the school library,
where I delved into articles on Python programming to create a Pong game.
My persistence paid off as I successfully coded the game,
emphasizing my ability to transform obstacles into opportunities for creativity and productivity,
laying the groundwork for my future pursuits.
</p>
<p>
In high school, I encountered internet restrictions that spurred me to explore network fundamentals. Through my exploration, I legally and ethically circumvented the limitations using a DNS server, recognizing the importance of upholding ethical standards. This experience underlined my resourcefulness and technical acumen, reinforcing the notion that knowledge and innovation can surmount any barrier.
</p>
<p>
Transitioning into college, I honed my skills in quantum optimization and supply chain logistics, both pivotal realms within the realm of computer science and societal impact. Notably, the creation of QSolvers, a quantum optimization tool, garnered attention within the scientific and technological community, validating the significance and relevance of my work. Engaging in article writing and webinars further facilitated the dissemination of insights and the cultivation of collaborative efforts within the tech sphere.
</p>
<p>
My ethos revolves around upholding integrity, transparently sharing my work, and promoting open-source contributions, aligning with my goal of solving substantive challenges and sharing expertise with a wider audience. Such an approach not only fortifies my credibility but also bolsters the collective progress of technology.
</p>
<p>
I embody values of integrity, transparency, and promoting open discourse, while tackling obstacles with knowledge and determination. My undertakings epitomize an unyielding quest for knowledge, a fervor for resolving substantive issues, and an impetus to extend the boundaries of possibility.
By embodying these values, I aim to wield a meaningful influence in the technology domain and beyond. My narratives bear testimony to my indomitable curiosity and steadfast determination, qualities that permeate each project and challenge. Whether it entails pioneering solutions in quantum optimization or contributing to open-source initiatives, I remain unwavering in my commitment to effectuating positive change through technology.
</p>
</div>
</section>
</main>
<a href="index.html" class="back-link">Back to Home</a>
</div>
</body>
</html>