Skip to content

Commit 12bd939

Browse files
byby-incbyby-inc
committed
the imposter syndrome showcase
1 parent eb84d9a commit 12bd939

File tree

2 files changed

+213
-2
lines changed

2 files changed

+213
-2
lines changed

‎README.md

Lines changed: 40 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -190,6 +190,44 @@ Feel free to contribute to this repository.
190190

191191
<a href="./tutorial-trap.html">Tutorial trap</a> <br/><br/><a href="./burnout-symphony.html">Burnout symphony</a> <br/><br/>
192192

193-
<a href="./digital-deja-vu.html">Digital deja vu</a> <br/><br/><a href="./simulated-reality-shift.html">Simulated reality shift</a> <br/><br/><a href="./fear-of-missing-output.html">Fear of missing output</a> <br/><br/><a href="./the-overwhelm-algorithm.html">The overwhelm algorithm</a> <br/><br/><a href="./the-impostor-syndrome-matrix.html">The impostor syndrome matrix</a> <br/><br/><a href="./the-imposter-code.html">The imposter code</a> <br/><br/><a href="./the-blink-rate-dilemma.html">The blink rate dilemma</a> <br/><br/><a href="./flow-state-glitch.html">Flow state glitch</a> <br/><br/><a href="./the-tab-vortex.html">The tab vortex</a> <br/><br/><a href="./flow-state-failure.html">Flow state failure</a> <br/><br/>
193+
<a href="./digital-deja-vu.html">Digital deja vu</a> <br/><br/>
194194

195-
<a href="./alien-2.html">Alien 2</a> <br/><br/><a href="./glitch-core-nostalgia.html">Glitch core nostalgia</a> <br/><br/><a href="./echoes-of-attention-span.html">Echoes of attention span</a> <br/><br/><a href="./the-waiting-room.html">The waiting room</a> <br/><br/><a href="./the-dopamine-drift.html">The dopamine drift</a> <br/><br/><a href="./dopamine-drip.html">Dopamine drip</a> <br/><br/><a href="./frame-of-mind.html">Frame of mind</a> <br/><br/><a href="./the-glitchcore-dream.html">The glitchcore dream</a> <br/><br/><a href="./the-glitchcore-dream.html">The glitchcore dream</a> <br/><br/><a href="./the-memory-stack.html">The memory stack</a> <br/><br/><a href="./algorithm-anxiety.html">Algorithm anxiety</a> <br/><br/>
195+
<a href="./simulated-reality-shift.html">Simulated reality shift</a> <br/><br/>
196+
197+
<a href="./fear-of-missing-output.html">Fear of missing output</a> <br/><br/>
198+
199+
<a href="./the-overwhelm-algorithm.html">The overwhelm algorithm</a> <br/><br/>
200+
201+
<a href="./the-impostor-syndrome-matrix.html">The impostor syndrome matrix</a> <br/><br/>
202+
203+
<a href="./the-imposter-code.html">The imposter code</a> <br/><br/>
204+
205+
<a href="./the-blink-rate-dilemma.html">The blink rate dilemma</a> <br/><br/>
206+
207+
<a href="./flow-state-glitch.html">Flow state glitch</a> <br/><br/>
208+
209+
<a href="./the-tab-vortex.html">The tab vortex</a> <br/><br/>
210+
211+
<a href="./flow-state-failure.html">Flow state failure</a> <br/><br/>
212+
213+
<a href="./alien-2.html">Alien 2</a> <br/><br/>
214+
215+
<a href="./glitch-core-nostalgia.html">Glitch core nostalgia</a>
216+
217+
<br/><br/><a href="./echoes-of-attention-span.html">Echoes of attention span</a> <br/><br/>
218+
219+
<a href="./the-waiting-room.html">The waiting room</a> <br/><br/>
220+
221+
<a href="./the-dopamine-drift.html">The dopamine drift</a> <br/><br/>
222+
223+
<a href="./dopamine-drip.html">Dopamine drip</a> <br/><br/>
224+
225+
<a href="./frame-of-mind.html">Frame of mind</a> <br/><br/>
226+
227+
<a href="./the-glitchcore-dream.html">The glitchcore dream</a> <br/><br/>
228+
229+
<a href="./the-memory-stack.html">The memory stack</a> <br/><br/>
230+
231+
<a href="./algorithm-anxiety.html">Algorithm anxiety</a> <br/><br/>
232+
233+
<a href="./the-imposter-syndrome-showcase.html">The imposter syndrome showcase</a> <br/><br/>

‎the-imposter-syndrome-showcase.html

Lines changed: 173 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,173 @@
1+
<!DOCTYPE html>
2+
<html lang="pt-BR">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Impostor Syndrome Showcase</title>
6+
<style>
7+
* {
8+
margin: 0;
9+
padding: 0;
10+
box-sizing: border-box;
11+
}
12+
body {
13+
background-color: #111;
14+
display: flex;
15+
align-items: center;
16+
justify-content: center;
17+
height: 100vh;
18+
overflow: hidden;
19+
}
20+
.codigo {
21+
position: absolute;
22+
top: 0;
23+
left: 50%;
24+
transform: translateX(-50%);
25+
background: #272822;
26+
color: #F8F8F2;
27+
font-family: 'Consolas', 'Monaco', monospace;
28+
font-size: 18px;
29+
padding: 20px;
30+
border-radius: 8px;
31+
white-space: pre-line;
32+
text-align: left;
33+
line-height: 1.6;
34+
max-height: 50%;
35+
width: 100%;
36+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
37+
}
38+
.selector { color: #F92672; } .property { color: #66D9EF; } .value-number { color: #AE81FF; } .value-string { color: #E6DB74; } .value-color { color: #A6E22E; } .brace { color: #F8F8F2; } .comment { color: #75715E; } .function { color: #A6E22E; }
39+
.animation-container {
40+
position: absolute;
41+
top: 75%;
42+
left: 50%;
43+
transform: translate(-50%, -50%);
44+
display: flex;
45+
align-items: center;
46+
justify-content: center;
47+
width: 100%;
48+
height: 50%;
49+
overflow: hidden;
50+
background:transparent;
51+
}
52+
.showcase {
53+
position: relative;
54+
width: 300px;
55+
height: 200px;
56+
border-radius: 10px;
57+
background: linear-gradient(to bottom right, #28cdeb, #167f8d);
58+
margin-bottom: 20px;
59+
}
60+
.showcase h1 {
61+
position: absolute;
62+
top: 15px;
63+
left: 15px;
64+
color: #fff;
65+
font-size: 24px;
66+
font-weight: bold;
67+
text-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
68+
}
69+
.feature-list {
70+
position: absolute;
71+
bottom: 15px;
72+
left: 15px;
73+
width: calc(100% - 30px);
74+
}
75+
.feature {
76+
display: inline-block;
77+
margin: 0 10px;
78+
padding: 5px 10px;
79+
background: rgba(255, 255, 255, 0.1);
80+
border-radius: 5px;
81+
color: #fff;
82+
font-size: 14px;
83+
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
84+
}
85+
86+
87+
/* Animation */
88+
.showcase {
89+
animation: glitch 3s linear infinite;
90+
}
91+
@keyframes glitch {
92+
0% {
93+
transform: translate(0,0);
94+
}
95+
5% {
96+
transform: translate(4px, 4px) rotate(2deg);
97+
}
98+
10% {
99+
transform: translate(-4px, -4px) rotate(-2deg);
100+
}
101+
15% {
102+
transform: translate(8px, 8px) rotate(4deg);
103+
}
104+
20% {
105+
transform: translate(-8px, -8px) rotate(-4deg);
106+
}
107+
25% {
108+
transform: translate(12px, 12px) rotate(6deg);
109+
}
110+
30% {
111+
transform: translate(-12px, -12px) rotate(-6deg);
112+
}
113+
35% {
114+
transform: scale(1.05, 1.05);
115+
}
116+
40% {
117+
transform: scale(0.95, 0.95);
118+
}
119+
45% {
120+
transform: translate(0, 0) rotate(0deg);
121+
}
122+
50% {
123+
opacity: 0.9;
124+
}
125+
55% {
126+
opacity: 1;
127+
}
128+
100% {
129+
transform: translate(0,0);
130+
}
131+
132+
}
133+
134+
135+
136+
137+
</style>
138+
</head>
139+
<body>
140+
<div class="codigo">
141+
<span class="selector">h1 {</span>
142+
<span class="property">color:</span> <span class="value-color">#fff</span>; <br>
143+
<span class="selector">.feature-list span </span>
144+
<span class="property"> animation:</span>
145+
<span class="property"> glitch </span>
146+
<span class="value-number">2</span>s linear infinite;
147+
</div>
148+
<div class="animation-container">
149+
150+
151+
<div class="showcase">
152+
<h1>5 Features You Didn't Know You Needed</h1>
153+
<div class="feature-list">
154+
<span>Instant Coffee</span>
155+
<span>Remote Work Features</span>
156+
<span>Mind-Reading AI</span>
157+
<span>AI Dungeon Master</span>
158+
<span>Clickbait Algorithm</span>
159+
</div>
160+
<div id="heartbreaker">
161+
162+
</div>
163+
</div>
164+
165+
166+
167+
</div>
168+
169+
170+
171+
</body>
172+
173+
</html>

0 commit comments

Comments
 (0)