v0.8.1 Fix button inconsistencies
This commit is contained in:
parent
a6b174120c
commit
addb8cef92
3 changed files with 50 additions and 6 deletions
|
|
@ -2,6 +2,13 @@ import React from "react";
|
|||
import styles from "./AboutMe.module.css";
|
||||
|
||||
const AboutMe = () => {
|
||||
const scrollToContact = () => {
|
||||
const contactSection = document.getElementById("contact");
|
||||
if (contactSection) {
|
||||
contactSection.scrollIntoView({ behavior: "smooth" });
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<section className={styles.aboutMe} id="about">
|
||||
<div className={styles.container}>
|
||||
|
|
@ -40,6 +47,9 @@ const AboutMe = () => {
|
|||
<a href="/path-to-your-resume.pdf" target="_blank" rel="noopener noreferrer" className={styles.resumeLink}>
|
||||
Download Resume (PDF)
|
||||
</a>
|
||||
<button onClick={scrollToContact} className={styles.contactLink}>
|
||||
Contact Me
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.aboutMe {
|
||||
padding: 80px 0;
|
||||
background-color: #0e0e0e; /* Dark background to match your theme */
|
||||
background-color: #0e0e0e;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
|
@ -94,21 +94,43 @@
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
.resumeLink {
|
||||
.resumeLink,
|
||||
.contactLink {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
padding: 10px 20px;
|
||||
border: 1px solid #ff6600;
|
||||
padding: 12px 24px;
|
||||
border: 2px solid #ff6600;
|
||||
border-radius: 5px;
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
display: inline-block;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
min-width: 180px;
|
||||
line-height: 1.5;
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.resumeLink:hover {
|
||||
.resumeLink:hover,
|
||||
.contactLink:hover {
|
||||
background-color: #ff6600;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.contactLink {
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.bottomSection {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.content {
|
||||
flex-direction: column;
|
||||
|
|
@ -122,4 +144,16 @@
|
|||
.socialLinks {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.bottomSection {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.resumeLink,
|
||||
.contactLink {
|
||||
width: 100%;
|
||||
max-width: 250px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
0.8.0
|
||||
0.8.1
|
||||
Loading…
Add table
Add a link
Reference in a new issue