Refactor styles and restructure CSS files
- Removed App.css and migrated styles to individual component and page-specific CSS files. - Created base styles in base.css for layout utilities and common elements. - Added component-specific styles in cards.css, header.css, and other relevant files. - Updated imports in App.tsx and other components to reflect new CSS structure. - Enhanced responsiveness and visual consistency across various components and pages.
This commit is contained in:
611
src/App.css
611
src/App.css
@@ -1,611 +0,0 @@
|
||||
.background {
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
background: transparent;
|
||||
margin: 0;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.mainContentBlock {
|
||||
box-sizing: border-box;
|
||||
height: auto;
|
||||
min-height: 100vh;
|
||||
max-height: 200vh;
|
||||
width: 66vw;
|
||||
min-width: auto;
|
||||
max-width: max-content;
|
||||
}
|
||||
|
||||
.horizontalContentItem {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.verticalContentItem {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.flexContainer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 3%;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Home page specific styles */
|
||||
.home-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 80vh;
|
||||
/* Takes up most of the viewport */
|
||||
text-align: center;
|
||||
gap: 30px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.hero-profile-container {
|
||||
padding: 10px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
/* Subtle backing */
|
||||
border-radius: 50%;
|
||||
backdrop-filter: blur(10px);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.hero-profile-img {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
object-fit: cover;
|
||||
border-radius: 50%;
|
||||
/* Circle */
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
color: white;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.hero-name {
|
||||
font-size: clamp(40px, 6vw, 80px);
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
margin: 0;
|
||||
letter-spacing: -0.5px;
|
||||
text-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.hero-bio {
|
||||
font-size: clamp(16px, 1.5vw, 20px);
|
||||
/* font-family: 'Roboto', sans-serif; - inherent*/
|
||||
font-weight: 300;
|
||||
line-height: 1.6;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
max-width: 600px;
|
||||
min-height: 160px;
|
||||
}
|
||||
|
||||
.hero-socials {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
margin-top: 20px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.hero-social-link {
|
||||
text-decoration: none;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
padding: 10px 24px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 50px;
|
||||
/* Pill shape */
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
transition: all 0.3s ease;
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
|
||||
.hero-social-link:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
color: white;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
border-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
/* Legacy Home styles (keep if referenced elsewhere, otherwise minimal) */
|
||||
.hero-card {
|
||||
/* Kept for backward compat if needed, but redesigned home won't use it */
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 10px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.portrait-img {
|
||||
object-fit: cover;
|
||||
border: 2px solid rgba(255, 255, 255, 0.5);
|
||||
border-radius: 8px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.welcome-text {
|
||||
font-size: clamp(10px, 1.5vw, 100px);
|
||||
font-family: roboto, sans-serif;
|
||||
color: white;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.name-text {
|
||||
font-size: clamp(24px, 8vw, 120px);
|
||||
font-family: roboto, sans-serif;
|
||||
color: white;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.skills-list {
|
||||
height: 5vh;
|
||||
color: white;
|
||||
font-family: roboto, sans-serif;
|
||||
}
|
||||
|
||||
.spacer {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 75px;
|
||||
font-family: roboto, sans-serif;
|
||||
}
|
||||
|
||||
.contact-link {
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
transition: color 0.3s ease;
|
||||
font-size: clamp(10px, 2vw, 1.2em);
|
||||
}
|
||||
|
||||
.contact-link:hover {
|
||||
color: #00ff00;
|
||||
}
|
||||
|
||||
.floating-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
padding: 20px 0px;
|
||||
text-align: center;
|
||||
background: rgba(52, 87, 245, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.header-nav {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: clamp(10px, 2vw, 40px);
|
||||
flex-wrap: nowrap;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
text-decoration: none;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-family: "roboto, sans-serif";
|
||||
font-size: clamp(10px, 1.5vw, 18px);
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
padding-bottom: 5px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
.nav-link::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.nav-link:hover::after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.nav-link.active {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
.nav-link.active::after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.contentContainer {
|
||||
font-size: clamp(10px, 1.5vw, 60px);
|
||||
font-family: roboto, sans-serif;
|
||||
color: white;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.contentCard {
|
||||
margin-bottom: 40px;
|
||||
padding: 20px;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 10px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.contentCard:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.contentCard h2 {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.contentCard p {
|
||||
white-space: normal;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
@keyframes slideInFromLeft {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-50px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* About Page Styles */
|
||||
.about-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: auto;
|
||||
/* Changed from 80vh to auto to let flex parent handle it, or reduced */
|
||||
height: 100%;
|
||||
padding: 20px;
|
||||
/* Reduced from 40px */
|
||||
color: white;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
}
|
||||
|
||||
.about-title {
|
||||
font-size: clamp(32px, 5vw, 60px);
|
||||
margin-top: 0;
|
||||
/* Clear top margin */
|
||||
margin-bottom: 20px;
|
||||
/* Reduced from 40px */
|
||||
font-weight: 700;
|
||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.about-content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 40px;
|
||||
/* Reduced from 60px */
|
||||
max-width: 1200px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.about-image-container {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.about-image {
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
object-fit: cover;
|
||||
border-radius: 20px;
|
||||
border: 3px solid rgba(255, 255, 255, 0.8);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.about-image:hover {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.about-text-container {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
padding: 30px 30px 30px 30px;
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.about-text {
|
||||
font-size: clamp(16px, 1.2vw, 18px);
|
||||
line-height: 1.8;
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
white-space: pre-line;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Mobile portrait mode - width < height */
|
||||
@media (orientation: portrait) {
|
||||
.mainContentBlock {
|
||||
width: 100vw;
|
||||
max-width: 100vw;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.about-content {
|
||||
flex-direction: column;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.about-image {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
}
|
||||
|
||||
.about-text-container {
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.home-container {
|
||||
padding-top: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.about-content {
|
||||
flex-direction: column;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.about-title {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.home-container {
|
||||
min-height: 70vh;
|
||||
gap: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Projects Page Styles */
|
||||
|
||||
.projects-container {
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.projects-title {
|
||||
font-size: clamp(32px, 6vw, 60px);
|
||||
font-family: 'Roboto', sans-serif;
|
||||
color: white;
|
||||
margin-bottom: 30px;
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
text-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.projects-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 30px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.project-card {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
/* Slightly lighter base */
|
||||
backdrop-filter: blur(16px);
|
||||
/* Increased blur */
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
/* Softer border */
|
||||
border-radius: 24px;
|
||||
/* More rounded */
|
||||
padding: 25px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
height: 100%;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
/* Softer shadow */
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.project-card:hover {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
transform: translateY(-8px) scale(1.02);
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
|
||||
/* Deeper but soft shadow */
|
||||
border-color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
.project-card::before {
|
||||
/* Shine effect */
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
background: linear-gradient(to right,
|
||||
rgba(255, 255, 255, 0) 0%,
|
||||
rgba(255, 255, 255, 0.1) 50%,
|
||||
rgba(255, 255, 255, 0) 100%);
|
||||
transform: skewX(-25deg);
|
||||
transition: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.project-card:hover::before {
|
||||
animation: shine 1.5s ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes shine {
|
||||
0% {
|
||||
left: -100%;
|
||||
}
|
||||
|
||||
100% {
|
||||
left: 200%;
|
||||
}
|
||||
}
|
||||
|
||||
.project-image-container {
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 20px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.project-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.5s ease;
|
||||
}
|
||||
|
||||
.project-card:hover .project-image {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.project-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.project-name {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
color: white;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
}
|
||||
|
||||
.project-description {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 20px;
|
||||
flex-grow: 1;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.project-tech-stack {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.tech-chip {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
padding: 6px 12px;
|
||||
border-radius: 20px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
transition: background 0.3s ease;
|
||||
}
|
||||
|
||||
.project-card:hover .tech-chip {
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
|
||||
.project-links {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.project-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
transition: color 0.3s ease;
|
||||
padding: 8px 16px;
|
||||
border-radius: 8px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.project-link:hover {
|
||||
color: white;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
import { BrowserRouter, Routes, Route, useLocation } from 'react-router-dom';
|
||||
import './App.css';
|
||||
import './styles/index.css';
|
||||
import FloatingHeader from './components/floatingHeader';
|
||||
import ParticlesBackground from './components/ParticlesBackground';
|
||||
import Home from './pages/Home';
|
||||
|
||||
@@ -25,6 +25,12 @@ export default function BioSection({ imageSrc, imageAlt, text, reversed = false
|
||||
return () => clearInterval(interval);
|
||||
}, [images.length, currentIndex]);
|
||||
|
||||
const handleImageClick = () => {
|
||||
if (images.length <= 1) return;
|
||||
setPrevIndex(currentIndex);
|
||||
setCurrentIndex((prev) => (prev + 1) % images.length);
|
||||
};
|
||||
|
||||
const slideVariants = {
|
||||
enter: {
|
||||
x: "-100%",
|
||||
@@ -52,6 +58,7 @@ export default function BioSection({ imageSrc, imageAlt, text, reversed = false
|
||||
initial={{ x: reversed ? 30 : -30, opacity: 0 }}
|
||||
animate={{ x: 0, opacity: 1 }}
|
||||
transition={{ delay: 0.4, duration: 0.6 }}
|
||||
onClick={handleImageClick}
|
||||
style={{
|
||||
position: "relative",
|
||||
width: "250px",
|
||||
@@ -60,6 +67,7 @@ export default function BioSection({ imageSrc, imageAlt, text, reversed = false
|
||||
borderRadius: "20px",
|
||||
border: "3px solid rgba(255, 255, 255, 0.8)",
|
||||
boxShadow: "0 8px 32px rgba(0, 0, 0, 0.2)",
|
||||
cursor: images.length > 1 ? "pointer" : "default",
|
||||
}}
|
||||
>
|
||||
<AnimatePresence initial={false}>
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { motion, Variants } from "framer-motion";
|
||||
import "../styles/components/cards.css";
|
||||
|
||||
export interface Project {
|
||||
id: number;
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
import "../styles/components/cards.css";
|
||||
|
||||
interface ContentCardProps {
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { Link, useLocation } from "react-router-dom";
|
||||
import "../styles/components/header.css";
|
||||
|
||||
export default function FloatingHeader() {
|
||||
const location = useLocation();
|
||||
@@ -34,7 +35,7 @@ export default function FloatingHeader() {
|
||||
to="/about"
|
||||
className={`nav-link ${location.pathname === "/about" ? "active" : ""}`}
|
||||
>
|
||||
About Me
|
||||
Personal About Me
|
||||
</Link>
|
||||
|
||||
</nav>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { motion } from "framer-motion";
|
||||
import VisitedMap from "../components/VisitedMap";
|
||||
import BioSection from "../components/BioSection";
|
||||
import "../styles/pages/about.css";
|
||||
|
||||
const ABOUT_TEXT = "Hi! I'm Sasha Bayda, a passionate developer focused on creating beautiful and functional web experiences. With a background in computer science and a keen eye for design, I strive to bridge the gap between technology and user-centric solutions. When I'm not coding, you can find me exploring the outdoors, experimenting with new recipes, or indulging in photography. Feel free to explore my projects and get in touch if you'd like to collaborate or learn more about my work!" + "\n\n" + "Thank you for visiting my digital resume site. I look forward to connecting with you!";
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { motion } from "framer-motion";
|
||||
import TypingText from "../components/animatedTyping";
|
||||
import { useState } from "react";
|
||||
import "../styles/pages/home.css";
|
||||
|
||||
const welcomeText = `Hello! My name is Sasha Bayda and welcome to my digital resume site!
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { motion, Variants } from "framer-motion";
|
||||
import FullPageImage from "../components/fullPageImage";
|
||||
import ProjectCard, { Project } from "../components/ProjectCard";
|
||||
import "../styles/pages/projects.css";
|
||||
|
||||
const FEATURED_PROJECTS: Project[] = [
|
||||
{
|
||||
|
||||
@@ -86,20 +86,20 @@ const itemVariants: Variants = {
|
||||
|
||||
export default function Skills() {
|
||||
return (
|
||||
<div className="mainContentBlock" style={{ minWidth: "66vw", alignItems: "center" }}>
|
||||
<div className="mainContentBlock" style={{ minWidth: "66vw", display: "flex", justifyContent: "center" }}>
|
||||
<div style={{ height: "30px" }}></div>
|
||||
<motion.div
|
||||
className="skills-container"
|
||||
variants={containerVariants}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
style={{ width: "100%", maxWidth: "1000px", padding: "0 20px" }}
|
||||
style={{ width: "100%", maxWidth: "1200px", padding: "0 40px", boxSizing: "border-box" }}
|
||||
>
|
||||
<motion.div variants={itemVariants} style={{ marginBottom: "50px" }}>
|
||||
<h2 style={{ color: "white", borderBottom: "1px solid rgba(255,255,255,0.2)", paddingBottom: "10px", marginBottom: "25px" }}>
|
||||
Technical Skills
|
||||
</h2>
|
||||
<div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))", gap: "25px" }}>
|
||||
<div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(320px, 1fr))", gap: "30px" }}>
|
||||
{TECHNICAL_SKILLS.map((category) => (
|
||||
<motion.div
|
||||
key={category.category}
|
||||
@@ -108,12 +108,12 @@ export default function Skills() {
|
||||
backdropFilter: "blur(10px)",
|
||||
border: "1px solid rgba(255, 255, 255, 0.15)",
|
||||
borderRadius: "12px",
|
||||
padding: "20px",
|
||||
padding: "24px",
|
||||
}}
|
||||
whileHover={{ scale: 1.02, backgroundColor: "rgba(255, 255, 255, 0.12)" }}
|
||||
>
|
||||
<h3 style={{ color: "white", marginTop: 0, marginBottom: "15px", fontSize: "1.2rem" }}>{category.category}</h3>
|
||||
<div style={{ display: "flex", flexWrap: "wrap", gap: "8px" }}>
|
||||
<div style={{ display: "flex", flexWrap: "wrap", gap: "10px" }}>
|
||||
{category.skills.map((skill) => (
|
||||
<span
|
||||
key={skill}
|
||||
@@ -140,7 +140,7 @@ export default function Skills() {
|
||||
<h2 style={{ color: "white", borderBottom: "1px solid rgba(255,255,255,0.2)", paddingBottom: "10px", marginBottom: "25px" }}>
|
||||
Professional Skills
|
||||
</h2>
|
||||
<div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))", gap: "20px" }}>
|
||||
<div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(320px, 1fr))", gap: "25px" }}>
|
||||
{PROFESSIONAL_SKILLS.map((skill) => (
|
||||
<motion.div
|
||||
key={skill.skill}
|
||||
|
||||
109
src/styles/base.css
Normal file
109
src/styles/base.css
Normal file
@@ -0,0 +1,109 @@
|
||||
/* Base styles - Layout utilities and common elements */
|
||||
|
||||
.background {
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
background: transparent;
|
||||
margin: 0;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.mainContentBlock {
|
||||
box-sizing: border-box;
|
||||
height: auto;
|
||||
min-height: 100vh;
|
||||
max-height: 200vh;
|
||||
width: 66vw;
|
||||
min-width: auto;
|
||||
max-width: max-content;
|
||||
}
|
||||
|
||||
.horizontalContentItem {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.verticalContentItem {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.flexContainer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 3%;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.contentContainer {
|
||||
font-size: clamp(10px, 1.5vw, 60px);
|
||||
font-family: roboto, sans-serif;
|
||||
color: white;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.spacer {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 75px;
|
||||
font-family: roboto, sans-serif;
|
||||
}
|
||||
|
||||
.contact-link {
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
transition: color 0.3s ease;
|
||||
font-size: clamp(10px, 2vw, 1.2em);
|
||||
}
|
||||
|
||||
.contact-link:hover {
|
||||
color: #00ff00;
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes slideInFromLeft {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-50px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile portrait mode - width < height */
|
||||
@media (orientation: portrait) {
|
||||
.mainContentBlock {
|
||||
width: 100vw;
|
||||
max-width: 100vw;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
182
src/styles/components/cards.css
Normal file
182
src/styles/components/cards.css
Normal file
@@ -0,0 +1,182 @@
|
||||
/* Content Card and Project Card Component Styles */
|
||||
|
||||
.contentCard {
|
||||
margin-bottom: 40px;
|
||||
padding: 20px;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 10px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.contentCard:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.contentCard h2 {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.contentCard p {
|
||||
white-space: normal;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
/* Hero Card (Legacy) */
|
||||
.hero-card {
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 10px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* Project Card Styles */
|
||||
.project-card {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
backdrop-filter: blur(16px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 24px;
|
||||
padding: 25px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
height: 100%;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.project-card:hover {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
transform: translateY(-8px) scale(1.02);
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
|
||||
border-color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
.project-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
background: linear-gradient(to right,
|
||||
rgba(255, 255, 255, 0) 0%,
|
||||
rgba(255, 255, 255, 0.1) 50%,
|
||||
rgba(255, 255, 255, 0) 100%);
|
||||
transform: skewX(-25deg);
|
||||
transition: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.project-card:hover::before {
|
||||
animation: shine 1.5s ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes shine {
|
||||
0% {
|
||||
left: -100%;
|
||||
}
|
||||
|
||||
100% {
|
||||
left: 200%;
|
||||
}
|
||||
}
|
||||
|
||||
.project-image-container {
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 20px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.project-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.5s ease;
|
||||
}
|
||||
|
||||
.project-card:hover .project-image {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.project-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.project-name {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
color: white;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
}
|
||||
|
||||
.project-description {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 20px;
|
||||
flex-grow: 1;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.project-tech-stack {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.tech-chip {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
padding: 6px 12px;
|
||||
border-radius: 20px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
transition: background 0.3s ease;
|
||||
}
|
||||
|
||||
.project-card:hover .tech-chip {
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
|
||||
.project-links {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.project-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
transition: color 0.3s ease;
|
||||
padding: 8px 16px;
|
||||
border-radius: 8px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.project-link:hover {
|
||||
color: white;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
63
src/styles/components/header.css
Normal file
63
src/styles/components/header.css
Normal file
@@ -0,0 +1,63 @@
|
||||
/* Floating Header Component Styles */
|
||||
|
||||
.floating-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
padding: 20px 0px;
|
||||
text-align: center;
|
||||
background: rgba(52, 87, 245, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.header-nav {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: clamp(10px, 2vw, 40px);
|
||||
flex-wrap: nowrap;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
text-decoration: none;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-family: "roboto, sans-serif";
|
||||
font-size: clamp(14px, 2vw, 20px);
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
padding-bottom: 5px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
.nav-link::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.nav-link:hover::after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.nav-link.active {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
.nav-link.active::after {
|
||||
width: 100%;
|
||||
}
|
||||
4
src/styles/index.css
Normal file
4
src/styles/index.css
Normal file
@@ -0,0 +1,4 @@
|
||||
/* Main CSS Entry Point - Shared/Base styles only */
|
||||
/* Component and page-specific styles are imported directly in their respective files */
|
||||
|
||||
@import './base.css';
|
||||
98
src/styles/pages/about.css
Normal file
98
src/styles/pages/about.css
Normal file
@@ -0,0 +1,98 @@
|
||||
/* About Page Styles */
|
||||
|
||||
.about-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: auto;
|
||||
height: 100%;
|
||||
padding: 20px;
|
||||
color: white;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
}
|
||||
|
||||
.about-title {
|
||||
font-size: clamp(32px, 5vw, 60px);
|
||||
margin-top: 0;
|
||||
margin-bottom: 20px;
|
||||
font-weight: 700;
|
||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.about-content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 40px;
|
||||
max-width: 1200px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.about-image-container {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.about-image {
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
object-fit: cover;
|
||||
border-radius: 20px;
|
||||
border: 3px solid rgba(255, 255, 255, 0.8);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.about-image:hover {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.about-text-container {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
padding: 30px 30px 30px 30px;
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.about-text {
|
||||
font-size: clamp(16px, 1.2vw, 18px);
|
||||
line-height: 1.8;
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
white-space: pre-line;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Mobile/Responsive */
|
||||
@media (orientation: portrait) {
|
||||
.about-content {
|
||||
flex-direction: column;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.about-image {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
}
|
||||
|
||||
.about-text-container {
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.about-content {
|
||||
flex-direction: column;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.about-title {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
131
src/styles/pages/home.css
Normal file
131
src/styles/pages/home.css
Normal file
@@ -0,0 +1,131 @@
|
||||
/* Home Page Styles */
|
||||
|
||||
.home-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 80vh;
|
||||
text-align: center;
|
||||
gap: 30px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.hero-profile-container {
|
||||
padding: 10px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 50%;
|
||||
backdrop-filter: blur(10px);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.hero-profile-img {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
object-fit: cover;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
color: white;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.hero-name {
|
||||
font-size: clamp(40px, 6vw, 80px);
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
margin: 0;
|
||||
letter-spacing: -0.5px;
|
||||
text-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.hero-bio {
|
||||
font-size: clamp(16px, 1.5vw, 20px);
|
||||
font-weight: 300;
|
||||
line-height: 1.6;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
max-width: 600px;
|
||||
min-height: 160px;
|
||||
}
|
||||
|
||||
.hero-socials {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
margin-top: 20px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.hero-social-link {
|
||||
text-decoration: none;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
padding: 10px 24px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 50px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
transition: all 0.3s ease;
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
|
||||
.hero-social-link:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
color: white;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
border-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
/* Legacy Home styles */
|
||||
.portrait-img {
|
||||
object-fit: cover;
|
||||
border: 2px solid rgba(255, 255, 255, 0.5);
|
||||
border-radius: 8px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.welcome-text {
|
||||
font-size: clamp(10px, 1.5vw, 100px);
|
||||
font-family: roboto, sans-serif;
|
||||
color: white;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.name-text {
|
||||
font-size: clamp(24px, 8vw, 120px);
|
||||
font-family: roboto, sans-serif;
|
||||
color: white;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.skills-list {
|
||||
height: 5vh;
|
||||
color: white;
|
||||
font-family: roboto, sans-serif;
|
||||
}
|
||||
|
||||
/* Mobile/Responsive */
|
||||
@media (orientation: portrait) {
|
||||
.home-container {
|
||||
padding-top: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.home-container {
|
||||
min-height: 70vh;
|
||||
gap: 20px;
|
||||
}
|
||||
}
|
||||
24
src/styles/pages/projects.css
Normal file
24
src/styles/pages/projects.css
Normal file
@@ -0,0 +1,24 @@
|
||||
/* Projects Page Styles */
|
||||
|
||||
.projects-container {
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.projects-title {
|
||||
font-size: clamp(32px, 6vw, 60px);
|
||||
font-family: 'Roboto', sans-serif;
|
||||
color: white;
|
||||
margin-bottom: 30px;
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
text-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.projects-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 30px;
|
||||
width: 100%;
|
||||
}
|
||||
Reference in New Issue
Block a user