diff --git a/src/App.css b/src/App.css
deleted file mode 100644
index 4ec2649..0000000
--- a/src/App.css
+++ /dev/null
@@ -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);
-}
\ No newline at end of file
diff --git a/src/App.tsx b/src/App.tsx
index fb55010..0cf7428 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -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';
diff --git a/src/components/BioSection.tsx b/src/components/BioSection.tsx
index 64c66b3..f1c0b99 100644
--- a/src/components/BioSection.tsx
+++ b/src/components/BioSection.tsx
@@ -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}>
diff --git a/src/components/ProjectCard.tsx b/src/components/ProjectCard.tsx
index ca8f926..648647a 100644
--- a/src/components/ProjectCard.tsx
+++ b/src/components/ProjectCard.tsx
@@ -1,4 +1,5 @@
 import { motion, Variants } from "framer-motion";
+import "../styles/components/cards.css";
 
 export interface Project {
     id: number;
diff --git a/src/components/contentCard.tsx b/src/components/contentCard.tsx
index 7b55889..6a6af19 100644
--- a/src/components/contentCard.tsx
+++ b/src/components/contentCard.tsx
@@ -1,3 +1,5 @@
+import "../styles/components/cards.css";
+
 interface ContentCardProps {
   children: React.ReactNode;
   className?: string;
diff --git a/src/components/floatingHeader.tsx b/src/components/floatingHeader.tsx
index 35ae091..ea97991 100644
--- a/src/components/floatingHeader.tsx
+++ b/src/components/floatingHeader.tsx
@@ -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>
diff --git a/src/pages/About.tsx b/src/pages/About.tsx
index dd2ddf5..cafac26 100644
--- a/src/pages/About.tsx
+++ b/src/pages/About.tsx
@@ -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!";
 
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 9d502b1..5fb6b80 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -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!
 
diff --git a/src/pages/Projects.tsx b/src/pages/Projects.tsx
index cf1feac..3732e50 100644
--- a/src/pages/Projects.tsx
+++ b/src/pages/Projects.tsx
@@ -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[] = [
     {
diff --git a/src/pages/Skills.tsx b/src/pages/Skills.tsx
index db6d8aa..76f6a70 100644
--- a/src/pages/Skills.tsx
+++ b/src/pages/Skills.tsx
@@ -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}
diff --git a/src/styles/base.css b/src/styles/base.css
new file mode 100644
index 0000000..fe7bbdb
--- /dev/null
+++ b/src/styles/base.css
@@ -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;
+    }
+}
diff --git a/src/styles/components/cards.css b/src/styles/components/cards.css
new file mode 100644
index 0000000..94b1cfc
--- /dev/null
+++ b/src/styles/components/cards.css
@@ -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);
+}
diff --git a/src/styles/components/header.css b/src/styles/components/header.css
new file mode 100644
index 0000000..ac11593
--- /dev/null
+++ b/src/styles/components/header.css
@@ -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%;
+}
diff --git a/src/styles/index.css b/src/styles/index.css
new file mode 100644
index 0000000..9fc8dcd
--- /dev/null
+++ b/src/styles/index.css
@@ -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';
diff --git a/src/styles/pages/about.css b/src/styles/pages/about.css
new file mode 100644
index 0000000..4d433c5
--- /dev/null
+++ b/src/styles/pages/about.css
@@ -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;
+    }
+}
diff --git a/src/styles/pages/home.css b/src/styles/pages/home.css
new file mode 100644
index 0000000..a0a48ee
--- /dev/null
+++ b/src/styles/pages/home.css
@@ -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;
+    }
+}
diff --git a/src/styles/pages/projects.css b/src/styles/pages/projects.css
new file mode 100644
index 0000000..ff0e729
--- /dev/null
+++ b/src/styles/pages/projects.css
@@ -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%;
+}