Skip to content

Commit 3bd3b5a

Browse files
committed
Fix speaking page JavaScript and apply premium styling to CV and Socials pages
Speaking page fixes: - Fixed duplicate closing brace breaking JavaScript execution - Next speaking engagement section now works properly CV page improvements: - Added glassmorphism with backdrop-filter blur effects - Implemented fadeIn and fadeInUp animations - Enhanced typography with larger sizes and better spacing - Added rotating gradient background animations - Updated tech tags with glassmorphic design - Improved button styles with rounded corners - Enhanced hover states with smooth transitions Socials page improvements: - Applied glassmorphism effects to all sections - Added staggered fadeInUp animations - Enhanced typography and spacing - Improved contact method cards with better hover effects - Added icon animations on hover - Updated layout with premium design aesthetic - Removed old redundant CSS styles All pages now have consistent premium black and gold aesthetic
1 parent 328274c commit 3bd3b5a

File tree

3 files changed

+280
-79
lines changed

3 files changed

+280
-79
lines changed

resume.html

Lines changed: 110 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -112,19 +112,71 @@ <h2>Current Focus</h2>
112112
min-height: 100vh;
113113
}
114114

115+
.cv-page {
116+
animation: fadeIn 0.8s ease-out;
117+
}
118+
119+
@keyframes fadeIn {
120+
from {
121+
opacity: 0;
122+
transform: translateY(20px);
123+
}
124+
to {
125+
opacity: 1;
126+
transform: translateY(0);
127+
}
128+
}
129+
115130
.cv-header {
116131
text-align: center;
117-
margin-bottom: 50px;
118-
padding: 40px 0;
119-
background: linear-gradient(135deg, var(--black-secondary), var(--black-tertiary));
120-
border-radius: 15px;
121-
border: 1px solid var(--border-color);
132+
margin-bottom: 60px;
133+
padding: 60px 40px;
134+
background: rgba(26, 26, 26, 0.6);
135+
backdrop-filter: blur(10px);
136+
-webkit-backdrop-filter: blur(10px);
137+
border-radius: 20px;
138+
border: 2px solid rgba(255, 215, 0, 0.3);
139+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
140+
position: relative;
141+
overflow: hidden;
142+
animation: fadeInUp 0.8s ease-out 0.2s backwards;
143+
}
144+
145+
.cv-header::before {
146+
content: '';
147+
position: absolute;
148+
top: -50%;
149+
left: -50%;
150+
width: 200%;
151+
height: 200%;
152+
background: radial-gradient(circle, rgba(255, 215, 0, 0.1) 0%, transparent 70%);
153+
animation: rotate 20s linear infinite;
154+
}
155+
156+
@keyframes rotate {
157+
0% { transform: rotate(0deg); }
158+
100% { transform: rotate(360deg); }
159+
}
160+
161+
@keyframes fadeInUp {
162+
from {
163+
opacity: 0;
164+
transform: translateY(30px);
165+
}
166+
to {
167+
opacity: 1;
168+
transform: translateY(0);
169+
}
122170
}
123171

124172
.cv-header h1 {
125173
color: var(--gold-primary);
126-
margin: 0 0 10px;
127-
font-size: 2.5rem;
174+
margin: 0 0 15px;
175+
font-size: 3rem;
176+
font-weight: 700;
177+
text-shadow: 0 4px 20px rgba(255, 215, 0, 0.3);
178+
letter-spacing: -0.5px;
179+
position: relative;
128180
}
129181

130182
.cv-header .position {
@@ -173,18 +225,30 @@ <h2>Current Focus</h2>
173225

174226
.cv-section {
175227
margin-bottom: 50px;
176-
padding: 30px;
177-
background-color: var(--black-secondary);
178-
border-radius: 10px;
179-
border: 1px solid var(--border-color);
228+
padding: 40px;
229+
background: rgba(26, 26, 26, 0.6);
230+
backdrop-filter: blur(10px);
231+
-webkit-backdrop-filter: blur(10px);
232+
border-radius: 16px;
233+
border: 2px solid rgba(255, 215, 0, 0.2);
234+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
235+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
236+
}
237+
238+
.cv-section:hover {
239+
transform: translateY(-5px);
240+
border-color: rgba(255, 215, 0, 0.4);
241+
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
180242
}
181243

182244
.cv-section h2 {
183245
color: var(--gold-primary);
184-
margin: 0 0 30px;
185-
font-size: 1.8rem;
186-
padding-bottom: 10px;
187-
border-bottom: 2px solid var(--gold-primary);
246+
margin: 0 0 35px;
247+
font-size: 2.2rem;
248+
font-weight: 700;
249+
letter-spacing: -0.5px;
250+
padding-bottom: 15px;
251+
border-bottom: 2px solid rgba(255, 215, 0, 0.3);
188252
}
189253

190254
.experience-item, .education-item {
@@ -255,14 +319,24 @@ <h2>Current Focus</h2>
255319
}
256320

257321
.tech-tag {
258-
background: linear-gradient(135deg, var(--gold-primary), var(--gold-secondary));
259-
color: var(--black-primary);
260-
padding: 4px 8px;
261-
border-radius: 12px;
262-
font-size: 0.8rem;
322+
background: rgba(255, 215, 0, 0.15);
323+
backdrop-filter: blur(5px);
324+
-webkit-backdrop-filter: blur(5px);
325+
color: var(--gold-primary);
326+
padding: 6px 14px;
327+
border-radius: 50px;
328+
font-size: 0.85rem;
263329
font-weight: 600;
264-
margin: 0 5px 5px 0;
330+
margin: 0 8px 8px 0;
265331
display: inline-block;
332+
border: 1px solid rgba(255, 215, 0, 0.3);
333+
transition: all 0.3s ease;
334+
}
335+
336+
.tech-tag:hover {
337+
background: rgba(255, 215, 0, 0.25);
338+
border-color: var(--gold-primary);
339+
transform: translateY(-2px);
266340
}
267341

268342
.skills-categories {
@@ -325,24 +399,30 @@ <h2>Current Focus</h2>
325399

326400
.cv-footer {
327401
text-align: center;
328-
margin-top: 50px;
329-
padding: 30px;
330-
background: linear-gradient(135deg, var(--black-secondary), var(--black-tertiary));
331-
border-radius: 15px;
332-
border: 1px solid var(--border-color);
402+
margin-top: 60px;
403+
padding: 50px 40px;
404+
background: rgba(26, 26, 26, 0.6);
405+
backdrop-filter: blur(10px);
406+
-webkit-backdrop-filter: blur(10px);
407+
border-radius: 20px;
408+
border: 2px solid rgba(255, 215, 0, 0.3);
409+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
333410
display: flex;
334411
justify-content: center;
335412
gap: 20px;
336413
flex-wrap: wrap;
337414
}
338415

339416
.cv-footer .btn {
340-
padding: 12px 24px;
341-
border-radius: 5px;
417+
padding: 16px 36px;
418+
border-radius: 50px;
342419
font-weight: 600;
343-
transition: var(--transition);
420+
font-size: 1.05rem;
421+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
344422
text-decoration: none;
345-
display: inline-block;
423+
display: inline-flex;
424+
align-items: center;
425+
gap: 10px;
346426
}
347427

348428
.linkedin-btn {

0 commit comments

Comments
 (0)