removed the contact page and reworked the home page, along with shuffling the header around
This commit is contained in:
100
src/App.css
100
src/App.css
@@ -113,6 +113,7 @@ p {
|
||||
line-height: 1.6;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
max-width: 600px;
|
||||
min-height: 160px;
|
||||
}
|
||||
|
||||
.hero-socials {
|
||||
@@ -608,102 +609,3 @@ p {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
/* Contact Page Styles */
|
||||
.contact-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.contact-background-placeholder {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: black;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.contact-main-block {
|
||||
min-width: 66vw;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.contact-card {
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
/* Reduced from 800px to be tighter */
|
||||
padding: 40px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 20px;
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
backdrop-filter: blur(5px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.contact-title {
|
||||
font-size: clamp(40px, 5vw, 60px);
|
||||
font-family: roboto, sans-serif;
|
||||
color: white;
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.contact-content {
|
||||
font-size: 1.1rem;
|
||||
font-family: roboto, sans-serif;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.contact-intro {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.contact-links-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.contact-link-item {
|
||||
padding: 20px;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 15px;
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.contact-link-text {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.contact-label {
|
||||
opacity: 0.7;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.contact-value {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
}
|
||||
@@ -8,7 +8,7 @@ import About from './pages/About';
|
||||
import WorkExperience from './pages/WorkExperience';
|
||||
import Projects from './pages/Projects';
|
||||
import Skills from './pages/Skills';
|
||||
import Contact from './pages/Contact';
|
||||
|
||||
|
||||
function ScrollToTop() {
|
||||
const { pathname } = useLocation();
|
||||
@@ -41,7 +41,7 @@ function App() {
|
||||
<Route path="/work-experience" element={<WorkExperience />} />
|
||||
<Route path="/projects" element={<Projects />} />
|
||||
<Route path="/skills" element={<Skills />} />
|
||||
<Route path="/contact" element={<Contact />} />
|
||||
|
||||
</Routes>
|
||||
<div>
|
||||
<div style={{ height: "20px" }}></div>
|
||||
|
||||
@@ -12,12 +12,6 @@ export default function FloatingHeader() {
|
||||
>
|
||||
Home
|
||||
</Link>
|
||||
<Link
|
||||
to="/work-experience"
|
||||
className={`nav-link ${location.pathname === "/work-experience" ? "active" : ""}`}
|
||||
>
|
||||
Work Experience
|
||||
</Link>
|
||||
<Link
|
||||
to="/skills"
|
||||
className={`nav-link ${location.pathname === "/skills" ? "active" : ""}`}
|
||||
@@ -25,10 +19,10 @@ export default function FloatingHeader() {
|
||||
Skills
|
||||
</Link>
|
||||
<Link
|
||||
to="/about"
|
||||
className={`nav-link ${location.pathname === "/about" ? "active" : ""}`}
|
||||
to="/work-experience"
|
||||
className={`nav-link ${location.pathname === "/work-experience" ? "active" : ""}`}
|
||||
>
|
||||
About Me
|
||||
Work Experience
|
||||
</Link>
|
||||
<Link
|
||||
to="/projects"
|
||||
@@ -37,11 +31,12 @@ export default function FloatingHeader() {
|
||||
Projects and Sidequests
|
||||
</Link>
|
||||
<Link
|
||||
to="/contact"
|
||||
className={`nav-link ${location.pathname === "/contact" ? "active" : ""}`}
|
||||
to="/about"
|
||||
className={`nav-link ${location.pathname === "/about" ? "active" : ""}`}
|
||||
>
|
||||
Contact
|
||||
About Me
|
||||
</Link>
|
||||
|
||||
</nav>
|
||||
</header>
|
||||
);
|
||||
|
||||
@@ -1,75 +0,0 @@
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
export default function Contact() {
|
||||
return (
|
||||
<div className="contact-wrapper">
|
||||
|
||||
<div className="mainContentBlock contact-main-block">
|
||||
<motion.div
|
||||
className="contact-card"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
>
|
||||
<motion.h1
|
||||
className="contact-title"
|
||||
initial={{ y: -20, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
transition={{ delay: 0.2, duration: 0.6 }}
|
||||
>
|
||||
Contact Me
|
||||
</motion.h1>
|
||||
|
||||
<motion.div
|
||||
className="contact-content"
|
||||
initial={{ y: 20, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
transition={{ delay: 0.4, duration: 0.6 }}
|
||||
>
|
||||
<div className="contact-intro">
|
||||
<p>
|
||||
I would love to hear from you! Feel free to reach out through any of these channels:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="contact-links-container">
|
||||
<motion.div
|
||||
className="contact-link-item"
|
||||
whileHover={{ scale: 1.02, backgroundColor: "rgba(255, 255, 255, 0.15)" }}
|
||||
>
|
||||
<p className="contact-link-text">
|
||||
<span className="contact-label">Email:</span>
|
||||
<a href="mailto:sasha.bayda@outlook.com" className="contact-value">
|
||||
sasha.bayda@outlook.com
|
||||
</a>
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
className="contact-link-item"
|
||||
whileHover={{ scale: 1.02, backgroundColor: "rgba(255, 255, 255, 0.15)" }}
|
||||
>
|
||||
<p className="contact-link-text">
|
||||
<span className="contact-label">Phone:</span>
|
||||
<span className="contact-value">(306) 921-7145</span>
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
className="contact-link-item"
|
||||
whileHover={{ scale: 1.02, backgroundColor: "rgba(255, 255, 255, 0.15)" }}
|
||||
>
|
||||
<p className="contact-link-text">
|
||||
<span className="contact-label">LinkedIn:</span>
|
||||
<a href="https://www.linkedin.com/in/sasha-bayda/" target="_blank" rel="noopener noreferrer" className="contact-value">
|
||||
linkedin.com/in/sasha-bayda
|
||||
</a>
|
||||
</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,5 +1,6 @@
|
||||
import { motion } from "framer-motion";
|
||||
import TypingText from "../components/animatedTyping";
|
||||
import { useState } from "react";
|
||||
|
||||
const welcomeText = `Hello! My name is Sasha Bayda and welcome to my digital resume site!
|
||||
|
||||
@@ -7,6 +8,14 @@ Here you will find some of my projects, skills, contact information and any info
|
||||
|
||||
Feel free to explore and learn more about me and if something isn't answered, don't hesitate to reach out via the contact page!`;
|
||||
|
||||
const HOVER_TEXTS: { [key: string]: string } = {
|
||||
"Email": "Drop me a line! I'm always open to new opportunities and interesting conversations.",
|
||||
"Phone": "Prefer a mix of voice? Give me a call or text.",
|
||||
"LinkedIn": "Let's connect professionally. View my full experience and network.",
|
||||
"GitHub": "Dive into my code. See what I'm building and how I solve problems.",
|
||||
"Portfolio": "See more of my work in action on my portfolio site."
|
||||
};
|
||||
|
||||
const CONTACT_LINKS = [
|
||||
{ label: "Email", url: "mailto:sasha.bayda@outlook.com" },
|
||||
{ label: "Phone", url: "tel:+13069217145" },
|
||||
@@ -16,6 +25,8 @@ const CONTACT_LINKS = [
|
||||
];
|
||||
|
||||
export default function Home() {
|
||||
const [displayedText, setDisplayedText] = useState(welcomeText);
|
||||
|
||||
return (
|
||||
<div className="mainContentBlock">
|
||||
<div className="home-container">
|
||||
@@ -48,7 +59,7 @@ export default function Home() {
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 1, delay: 2.0 }}
|
||||
>
|
||||
{welcomeText}
|
||||
{displayedText}
|
||||
</motion.p>
|
||||
|
||||
<div className="hero-socials">
|
||||
@@ -64,6 +75,8 @@ export default function Home() {
|
||||
delay: 2.5 + (index * 0.1),
|
||||
ease: "easeOut"
|
||||
}}
|
||||
onMouseEnter={() => setDisplayedText(HOVER_TEXTS[link.label] || welcomeText)}
|
||||
onMouseLeave={() => setDisplayedText(welcomeText)}
|
||||
>
|
||||
{link.label}
|
||||
</motion.a>
|
||||
|
||||
Reference in New Issue
Block a user