Skip to content

Commit 1c1572b

Browse files
dconcodconco
authored
Merge pull request #1 from dconco/copilot/fix-144423f0-9b25-4605-bd84-a3297d79e3c3
Add beautiful resume download section with responsive design
2 parents 79208bc + 0bf9b98 commit 1c1572b

File tree

2 files changed

+235
-0
lines changed

2 files changed

+235
-0
lines changed

‎css/style.css‎

Lines changed: 192 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -305,6 +305,175 @@ nav .container {
305305
font-size: 0.8em;
306306
}
307307

308+
/* Resume Section */
309+
.resume {
310+
padding: 100px 0;
311+
background:
312+
linear-gradient(rgba(26, 26, 62, 0.9), rgba(15, 15, 35, 0.9)),
313+
url('https://images.unsplash.com/photo-1586281380349-632531db7ed4?q=80&w=2340&auto=format&fit=crop')
314+
center/cover;
315+
text-align: center;
316+
}
317+
318+
.resume-content {
319+
max-width: 800px;
320+
margin: 0 auto;
321+
}
322+
323+
.resume-preview {
324+
background: rgba(26, 26, 62, 0.8);
325+
border-radius: 20px;
326+
padding: 60px 40px;
327+
border: 1px solid rgba(100, 255, 218, 0.2);
328+
position: relative;
329+
overflow: hidden;
330+
transition: all 0.3s ease;
331+
}
332+
333+
.resume-preview::before {
334+
content: '';
335+
position: absolute;
336+
top: 0;
337+
left: 0;
338+
right: 0;
339+
height: 4px;
340+
background: linear-gradient(135deg, #64ffda, #00d4aa);
341+
}
342+
343+
.resume-preview:hover {
344+
transform: translateY(-5px);
345+
border-color: rgba(100, 255, 218, 0.4);
346+
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
347+
}
348+
349+
.resume-icon {
350+
width: 120px;
351+
height: 120px;
352+
background: linear-gradient(135deg, #64ffda, #00d4aa);
353+
border-radius: 50%;
354+
display: flex;
355+
align-items: center;
356+
justify-content: center;
357+
margin: 0 auto 30px;
358+
transition: all 0.3s ease;
359+
position: relative;
360+
overflow: hidden;
361+
}
362+
363+
.resume-icon::before {
364+
content: '';
365+
position: absolute;
366+
top: 0;
367+
left: 0;
368+
right: 0;
369+
bottom: 0;
370+
background: linear-gradient(45deg, rgba(255,255,255,0.1), transparent);
371+
border-radius: 50%;
372+
}
373+
374+
.resume-icon i {
375+
font-size: 3.5em;
376+
color: #0f0f23;
377+
z-index: 1;
378+
}
379+
380+
.resume-preview:hover .resume-icon {
381+
transform: scale(1.1) rotate(10deg);
382+
}
383+
384+
.resume-preview h3 {
385+
font-size: 2.2em;
386+
color: #ccd6f6;
387+
margin-bottom: 20px;
388+
font-weight: 700;
389+
}
390+
391+
.resume-preview p {
392+
font-size: 1.1em;
393+
color: #8892b0;
394+
line-height: 1.7;
395+
margin-bottom: 40px;
396+
}
397+
398+
.resume-highlights {
399+
display: flex;
400+
justify-content: center;
401+
gap: 40px;
402+
margin-bottom: 40px;
403+
flex-wrap: wrap;
404+
}
405+
406+
.highlight-item {
407+
display: flex;
408+
flex-direction: column;
409+
align-items: center;
410+
gap: 10px;
411+
color: #ccd6f6;
412+
transition: color 0.3s ease;
413+
}
414+
415+
.highlight-item:hover {
416+
color: #64ffda;
417+
}
418+
419+
.highlight-item i {
420+
font-size: 2em;
421+
color: #64ffda;
422+
margin-bottom: 5px;
423+
}
424+
425+
.highlight-item span {
426+
font-size: 0.9em;
427+
font-weight: 600;
428+
}
429+
430+
.btn-resume {
431+
background: linear-gradient(135deg, #64ffda, #00d4aa);
432+
color: #0f0f23;
433+
padding: 18px 40px;
434+
border-radius: 50px;
435+
text-decoration: none;
436+
font-weight: 700;
437+
font-size: 1.1em;
438+
display: inline-flex;
439+
align-items: center;
440+
gap: 12px;
441+
transition: all 0.3s ease;
442+
border: 2px solid transparent;
443+
position: relative;
444+
overflow: hidden;
445+
}
446+
447+
.btn-resume::before {
448+
content: '';
449+
position: absolute;
450+
top: 0;
451+
left: 0;
452+
right: 0;
453+
bottom: 0;
454+
background: linear-gradient(45deg, rgba(255,255,255,0.1), transparent);
455+
opacity: 0;
456+
transition: opacity 0.3s ease;
457+
}
458+
459+
.btn-resume:hover::before {
460+
opacity: 1;
461+
}
462+
463+
.btn-resume:hover {
464+
transform: translateY(-3px);
465+
box-shadow: 0 15px 30px rgba(100, 255, 218, 0.4);
466+
}
467+
468+
.btn-resume i {
469+
font-size: 1.2em;
470+
transition: transform 0.3s ease;
471+
}
472+
473+
.btn-resume:hover i {
474+
transform: scale(1.2);
475+
}
476+
308477
/* Projects Section */
309478
.projects {
310479
padding: 100px 0;
@@ -497,6 +666,29 @@ footer p {
497666
grid-template-columns: 1fr;
498667
}
499668

669+
.resume-preview {
670+
padding: 40px 20px;
671+
margin: 0 10px;
672+
}
673+
674+
.resume-highlights {
675+
flex-direction: column;
676+
gap: 20px;
677+
}
678+
679+
.resume-icon {
680+
width: 100px;
681+
height: 100px;
682+
}
683+
684+
.resume-icon i {
685+
font-size: 3em;
686+
}
687+
688+
.resume-preview h3 {
689+
font-size: 1.8em;
690+
}
691+
500692
.contact-info {
501693
flex-direction: column;
502694
gap: 20px;

‎index.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@
3636
<ul class="nav-links">
3737
<li><a href="#home">Home</a></li>
3838
<li><a href="#about">About</a></li>
39+
<li><a href="#resume">Resume</a></li>
3940
<li><a href="#projects">Projects</a></li>
4041
<li><a href="#contact">Contact</a></li>
4142
</ul>
@@ -134,6 +135,48 @@ <h3>Tools & Others</h3>
134135
</div>
135136
</section>
136137

138+
<section id="resume" class="resume">
139+
<div class="container">
140+
<h2 class="section-title">My Resume</h2>
141+
<div class="resume-content">
142+
<div class="resume-preview">
143+
<div class="resume-icon">
144+
<i class="fas fa-file-pdf"></i>
145+
</div>
146+
<h3>Download My Resume</h3>
147+
<p>
148+
Get a comprehensive overview of my experience, skills, and
149+
achievements in software development. My resume includes
150+
detailed information about my 6+ years of experience in
151+
full-stack development, backend engineering, and the amazing
152+
projects I've built.
153+
</p>
154+
<div class="resume-highlights">
155+
<div class="highlight-item">
156+
<i class="fas fa-code"></i>
157+
<span>6+ Years Experience</span>
158+
</div>
159+
<div class="highlight-item">
160+
<i class="fas fa-project-diagram"></i>
161+
<span>20+ Projects Completed</span>
162+
</div>
163+
<div class="highlight-item">
164+
<i class="fas fa-tools"></i>
165+
<span>Multiple Tech Stacks</span>
166+
</div>
167+
</div>
168+
<a href="https://github.com/dconco/resumes/raw/main/dconco-resume-2.pdf"
169+
class="btn btn-resume"
170+
target="_blank"
171+
rel="noopener noreferrer">
172+
<i class="fas fa-download"></i>
173+
Download Resume
174+
</a>
175+
</div>
176+
</div>
177+
</div>
178+
</section>
179+
137180
<section id="projects" class="projects">
138181
<div class="container">
139182
<h2 class="section-title">Featured Projects</h2>

0 commit comments

Comments
 (0)