@@ -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 5 px 5 px 0 ;
330+ margin : 0 8 px 8 px 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 : 12 px 24 px ;
341- border-radius : 5 px ;
417+ padding : 16 px 36 px ;
418+ border-radius : 50 px ;
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