removed title for the skills page, looks cleaner without and update deploy to link to nginx on deploy

.github/workflows/deploy.yml

@@ -4,72 +4,16 @@ on:
   push:
     branches: [ "main" ]
 
-env:
-  REGISTRY: ghcr.io
-  IMAGE_NAME: ${{ github.repository }}
-
 jobs:
-  build-and-push:
-    runs-on: ubuntu-latest
-    permissions:
-      contents: read
-      packages: write
-
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-
-      - name: Log in to the Container registry
-        uses: docker/login-action@v3
-        with:
-          registry: ${{ env.REGISTRY }}
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Extract metadata (tags, labels) for Docker
-        id: meta
-        uses: docker/metadata-action@v5
-        with:
-          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
-          tags: |
-            type=raw,value=latest
-            type=sha
-
-      - name: Build and push Docker image
-        uses: docker/build-push-action@v5
-        with:
-          context: .
-          push: true
-          tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}
-
   deploy:
     runs-on: ubuntu-latest
-    needs: build-and-push
     steps:
-      - name: Deploy to Remote Server
+      - name: Deploy Application
         uses: appleboy/ssh-action@v1.0.3
         with:
           host: ${{ secrets.REMOTE_HOST }}
           username: ${{ secrets.REMOTE_USER }}
           key: ${{ secrets.SSH_PRIVATE_KEY }}
+          passphrase: ${{ secrets.SSH_PASSPHRASE }}
           script: |
-            # Login to registry
-            echo ${{ secrets.GITHUB_TOKEN }} | docker login ghcr.io -u ${{ github.actor }} --password-stdin
-            
-            # Pull new image
-            docker pull ghcr.io/${{ env.IMAGE_NAME }}:latest
-            
-            # Stop and remove existing container
-            docker stop resume-frontend || true
-            docker rm resume-frontend || true
-            
-            # Run new container
-            docker run -d \
-              --name resume-frontend \
-              --restart unless-stopped \
-              -p 80:80 \
-              ghcr.io/${{ env.IMAGE_NAME }}:latest
-            
-            # Cleanup unused images
-            docker image prune -f
+            powershell -ExecutionPolicy Bypass -Command "Write-Host '=== Starting deployment ==='; if (Test-Path 'C:\projects\digital-resume-FE') { Set-Location 'C:\projects\digital-resume-FE'; git pull origin main } else { New-Item -ItemType Directory -Path 'C:\projects' -Force; Set-Location 'C:\projects'; git clone https://gitea.sashabayda.ca/Bayda77/digital-resume-FE.git }; Write-Host '=== Stopping container ==='; docker stop resume-frontend; docker rm resume-frontend; Write-Host '=== Building image ==='; Set-Location 'C:\projects\digital-resume-FE'; docker build -t resume-frontend:latest .; Write-Host '=== Running container ==='; docker run -d --name resume-frontend --network nginx_web --restart unless-stopped -p 3001:80 resume-frontend:latest; Write-Host '=== Verifying ==='; docker ps -a --filter name=resume-frontend"

src/App.css

@@ -357,26 +357,31 @@ p {
 }
 
 .project-card {
-    background: rgba(255, 255, 255, 0.07);
-    backdrop-filter: blur(12px);
-    border: 1px solid rgba(255, 255, 255, 0.15);
-    border-radius: 16px;
+    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);
-    /* Bouncy feel */
     height: 100%;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    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.12);
+    background: rgba(255, 255, 255, 0.15);
     transform: translateY(-8px) scale(1.02);
-    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
-    border-color: rgba(255, 255, 255, 0.3);
+    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 {

src/App.tsx

@@ -7,6 +7,7 @@ import Home from './pages/Home';
 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() {
@@ -39,6 +40,7 @@ function App() {
             <Route path="/about" element={<About />} />
             <Route path="/work-experience" element={<WorkExperience />} />
             <Route path="/projects" element={<Projects />} />
+            <Route path="/skills" element={<Skills />} />
             <Route path="/contact" element={<Contact />} />
           </Routes>
           <div>

src/components/BioSection.tsx

@@ -0,0 +1,100 @@
+import { motion, AnimatePresence } from "framer-motion";
+import { useState, useEffect } from "react";
+
+interface BioSectionProps {
+    imageSrc: string;
+    imageAlt: string;
+    text: string;
+    reversed?: boolean;
+}
+
+export default function BioSection({ imageSrc, imageAlt, text, reversed = false }: BioSectionProps) {
+    const images = imageSrc.split(',').map(src => src.trim()).filter(src => src.length > 0);
+    const [currentIndex, setCurrentIndex] = useState(0);
+    const [prevIndex, setPrevIndex] = useState(0);
+    const [direction, setDirection] = useState(1); // 1 for right, -1 for left (though we always slide right here)
+
+    useEffect(() => {
+        if (images.length <= 1) return;
+
+        const interval = setInterval(() => {
+            setPrevIndex(currentIndex);
+            setCurrentIndex((prev) => (prev + 1) % images.length);
+        }, 6000);
+
+        return () => clearInterval(interval);
+    }, [images.length, currentIndex]);
+
+    const slideVariants = {
+        enter: {
+            x: "-100%",
+            opacity: 1
+        },
+        center: {
+            x: 0,
+            opacity: 1
+        },
+        exit: {
+            x: "100%",
+            opacity: 1
+        }
+    };
+
+    return (
+        <div
+            className="about-content"
+            style={{
+                flexDirection: reversed ? "row-reverse" : "row",
+            }}
+        >
+            <motion.div
+                className="about-image-container"
+                initial={{ x: reversed ? 30 : -30, opacity: 0 }}
+                animate={{ x: 0, opacity: 1 }}
+                transition={{ delay: 0.4, duration: 0.6 }}
+                style={{
+                    position: "relative",
+                    width: "250px",
+                    height: "250px",
+                    overflow: "hidden",
+                    borderRadius: "20px",
+                    border: "3px solid rgba(255, 255, 255, 0.8)",
+                    boxShadow: "0 8px 32px rgba(0, 0, 0, 0.2)",
+                }}
+            >
+                <AnimatePresence initial={false}>
+                    <motion.img
+                        key={currentIndex}
+                        src={images[currentIndex]}
+                        alt={imageAlt}
+                        variants={slideVariants}
+                        initial="enter"
+                        animate="center"
+                        exit="exit"
+                        transition={{ duration: 0.8, ease: "easeInOut" }}
+                        style={{
+                            position: "absolute",
+                            top: 0,
+                            left: 0,
+                            width: "100%",
+                            height: "100%",
+                            objectFit: "cover",
+                        }}
+                        whileHover={{ scale: 1.05 }}
+                    />
+                </AnimatePresence>
+            </motion.div>
+
+            <motion.div
+                className="about-text-container"
+                initial={{ x: reversed ? -30 : 30, opacity: 0 }}
+                animate={{ x: 0, opacity: 1 }}
+                transition={{ delay: 0.6, duration: 0.6 }}
+            >
+                <p className="about-text">
+                    {text}
+                </p>
+            </motion.div>
+        </div>
+    );
+}

src/components/ParticlesBackground.tsx

@@ -35,31 +35,6 @@ const ParticlesBackground: React.FC = () => {
                 this.x += this.speedX;
                 this.y += this.speedY;
 
-                // update speedX
-                let speedXRng = Math.random();
-                if (speedXRng > 0.75) {
-                    this.speedX += Math.random() * 0.1;
-                } else if (speedXRng < 0.25) {
-                    this.speedX -= Math.random() * 0.1;
-                }
-                if (this.speedX > 1) {
-                    this.speedX = 1;
-                } else if (this.speedX < -1) {
-                    this.speedX = -1;
-                }
-
-                // update speedY
-                let speedYRng = Math.random();
-                if (speedYRng > 0.75) {
-                    this.speedY += Math.random() * 0.1;
-                } else if (speedYRng < 0.25) {
-                    this.speedY -= Math.random() * 0.1;
-                }
-                if (this.speedY > 1) {
-                    this.speedY = 1;
-                } else if (this.speedY < -1) {
-                    this.speedY = -1;
-                }
 
                 //size
                 let sizeRng = Math.random();

src/components/ProjectCard.tsx

@@ -0,0 +1,62 @@
+import { motion, Variants } from "framer-motion";
+
+export interface Project {
+    id: number;
+    title: string;
+    description: string;
+    techStack: string[];
+    image: string;
+    links: {
+        demo?: string;
+        repo?: string;
+    };
+}
+
+interface ProjectCardProps {
+    project: Project;
+    variants: Variants;
+}
+
+export default function ProjectCard({ project, variants }: ProjectCardProps) {
+    return (
+        <motion.div
+            className="project-card"
+            variants={variants}
+            whileHover={{ y: -10, transition: { duration: 0.2 } }}
+        >
+            <div className="project-image-container">
+                <img
+                    src={project.image}
+                    alt={project.title}
+                    className="project-image"
+                />
+            </div>
+            <div className="project-header">
+                <h2 className="project-name">{project.title}</h2>
+            </div>
+
+            <div className="project-tech-stack">
+                {project.techStack.map(tech => (
+                    <span key={tech} className="tech-chip">{tech}</span>
+                ))}
+            </div>
+
+            <p className="project-description">
+                {project.description}
+            </p>
+
+            <div className="project-links">
+                {project.links.demo && (
+                    <a href={project.links.demo} className="project-link" target="_blank" rel="noopener noreferrer">
+                        Live Demo <span>→</span>
+                    </a>
+                )}
+                {project.links.repo && (
+                    <a href={project.links.repo} className="project-link" target="_blank" rel="noopener noreferrer">
+                        GitHub <span>↗</span>
+                    </a>
+                )}
+            </div>
+        </motion.div>
+    );
+}

src/components/floatingHeader.tsx

@@ -18,6 +18,12 @@ export default function FloatingHeader() {
                 >
                     Work Experience
                 </Link>
+                <Link
+                    to="/skills"
+                    className={`nav-link ${location.pathname === "/skills" ? "active" : ""}`}
+                >
+                    Skills
+                </Link>
                 <Link
                     to="/about"
                     className={`nav-link ${location.pathname === "/about" ? "active" : ""}`}
@@ -28,7 +34,7 @@ export default function FloatingHeader() {
                     to="/projects"
                     className={`nav-link ${location.pathname === "/projects" ? "active" : ""}`}
                 >
-                    Projects
+                    Projects and Sidequests
                 </Link>
                 <Link
                     to="/contact"

src/pages/About.tsx

@@ -1,8 +1,14 @@
 import { motion } from "framer-motion";
 import VisitedMap from "../components/VisitedMap";
+import BioSection from "../components/BioSection";
 
 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!";
 
+const JANE_TEXT = "Outside of work, I enjoy spending time with my girlfriend, family and friends. Doing things such as cooking, watching shows or movies, gaming, snowboarding, or just relaxing with a glass of something warm.";
+
+const HOMELAB_TEXT = "I love hosting my own applications and learning new technologies. Right now I host my own gitea server to host my own git repositories and host my own 'runners', immich to host my own photo gallery, and a beszel to monitor all of my applications with a dashboards, graphs and webhook alerts."
+
+
 const VISITED_CITIES = [
     "Melfort",
     "Star City",
@@ -41,31 +47,12 @@ export default function About() {
                         About Me
                     </motion.h1>
 
-                    <div className="about-content">
-                        <motion.div
-                            className="about-image-container"
-                            initial={{ x: -30, opacity: 0 }}
-                            animate={{ x: 0, opacity: 1 }}
-                            transition={{ delay: 0.4, duration: 0.6 }}
-                        >
-                            <img
-                                src="/dapperSasha.jpg"
-                                alt="profile"
-                                className="about-image"
-                            />
-                        </motion.div>
+                    <BioSection
+                        imageSrc="/dapperSasha.jpg"
+                        imageAlt="profile"
+                        text={ABOUT_TEXT}
+                    />
 
-                        <motion.div
-                            className="about-text-container"
-                            initial={{ x: 30, opacity: 0 }}
-                            animate={{ x: 0, opacity: 1 }}
-                            transition={{ delay: 0.6, duration: 0.6 }}
-                        >
-                            <p className="about-text">
-                                {ABOUT_TEXT}
-                            </p>
-                        </motion.div>
-                    </div>
 
                     <motion.div
                         style={{ marginTop: "40px", width: "100%" }}
@@ -73,12 +60,28 @@ export default function About() {
                         animate={{ y: 0, opacity: 1 }}
                         transition={{ delay: 0.8, duration: 0.6 }}
                     >
-                        <h2 style={{ textAlign: "center", fontSize: "1.5rem", marginBottom: "10px", color: "rgba(255,255,255,0.9)" }}>My Hot Chocolate Journey</h2>
+                        <h2 style={{ textAlign: "center", fontSize: "1.5rem", marginBottom: "10px", color: "rgba(255,255,255,0.9)" }}>Places I've Visited</h2>
                         <p style={{ textAlign: "center", marginBottom: "20px", color: "rgba(255,255,255,0.7)", fontSize: "0.9rem" }}>
-                            Places across the world where I've enjoyed a hot chocolate ☕
+                            Some of the More Interesting Places I've visited, I hope to one day fill this map with more cool spots!
                         </p>
                         <VisitedMap places={VISITED_CITIES} />
                     </motion.div>
+                    <div style={{ marginTop: "40px" }}>
+                        <BioSection
+                            imageSrc="/janepic.jpg, fampic.jpg, gangpic.jpg"
+                            imageAlt="profile"
+                            text={JANE_TEXT}
+                            reversed={true}
+                        />
+                    </div>
+                    <div style={{ marginTop: "40px" }}>
+                        <BioSection
+                            imageSrc="/beszel.png"
+                            imageAlt="profile"
+                            text={HOMELAB_TEXT}
+                            reversed={false}
+                        />
+                    </div>
                 </div>
             </motion.div>
         </div>

src/pages/Home.tsx

@@ -20,7 +20,11 @@ const ANIMATION_TIMINGS = {
     testItemStaggerDelay: 0.2, // Delay between each test item (in seconds)
     testItemAnimationDuration: 0.5, // Duration of each item's slide-in animation
 };
-const welcomeText = "Hello! My name is Sasha Bayda and welcome to my digital resume site! Here you will find some of my projects, skills, contact information and any information I couldn't fit into my resume. 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 welcomeText = `Hello! My name is Sasha Bayda and welcome to my digital resume site!
+
+Here you will find some of my projects, skills, contact information and any information I couldn't fit into my resume.
+
+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 CONTACT_LINKS = [
     { label: "Email", url: "mailto:sasha.bayda@outlook.com" },

src/pages/Projects.tsx

@@ -1,19 +1,8 @@
 import { motion, Variants } from "framer-motion";
 import FullPageImage from "../components/fullPageImage";
+import ProjectCard, { Project } from "../components/ProjectCard";
 
-interface Project {
-    id: number;
-    title: string;
-    description: string;
-    techStack: string[];
-    image: string; // Ensure these images exist in public/ or use placeholders
-    links: {
-        demo?: string;
-        repo?: string;
-    };
-}
-
-const PROJECTS: Project[] = [
+const FEATURED_PROJECTS: Project[] = [
     {
         id: 1,
         title: "Digital Resume",
@@ -27,6 +16,29 @@ const PROJECTS: Project[] = [
     },
 ];
 
+const SIDEQUESTS: Project[] = [
+    {
+        id: 101, // Different ID range for sidequests
+        title: "Experimental Shader",
+        description: "A WebGL shader experiment creating procedural textures and animations. Exploring noise functions and light interactions.",
+        techStack: ["WebGL", "GLSL", "React Three Fiber"],
+        image: "https://placehold.co/600x400/1a1a1a/cccccc?text=Shader+Experiment", // Placeholder image
+        links: {
+            repo: "https://github.com/Bayda77/sidequests", // Placeholder link
+        }
+    },
+    {
+        id: 102,
+        title: "CLI Tool",
+        description: "A command-line utility for automating daily workflows and file management tasks.",
+        techStack: ["Rust", "Clap"],
+        image: "https://placehold.co/600x400/2a2a2a/dddddd?text=CLI+Tool", // Placeholder
+        links: {
+            repo: "https://github.com/Bayda77/cli-tools"
+        }
+    }
+];
+
 const containerVariants: Variants = {
     hidden: { opacity: 0 },
     visible: {
@@ -55,63 +67,50 @@ export default function Projects() {
         <div style={{ position: "relative", width: "100%", minHeight: "100vh" }}>
             <div className="mainContentBlock" style={{ width: "100%", minWidth: "100vw", maxWidth: "100vw", paddingTop: "20px", paddingBottom: "10px", boxSizing: "border-box", display: "flex", justifyContent: "center", position: "relative", zIndex: 1 }}>
                 <div className="projects-container">
-                    <motion.h1
-                        className="projects-title"
-                        initial={{ y: -30, opacity: 0 }}
-                        animate={{ y: 0, opacity: 1 }}
-                        transition={{ duration: 0.8, ease: "easeOut" }}
-                    >
-                        Featured Projects
-                    </motion.h1>
-
+                    {/* Featured Projects Section */}
                     <motion.div
-                        className="projects-grid"
-                        variants={containerVariants}
                         initial="hidden"
                         animate="visible"
+                        variants={containerVariants}
                     >
-                        {PROJECTS.map((project) => (
-                            <motion.div
-                                key={project.id}
-                                className="project-card"
-                                variants={cardVariants}
-                                whileHover={{ y: -10, transition: { duration: 0.2 } }}
-                            >
-                                <div className="project-image-container">
-                                    <img
-                                        src={project.image}
-                                        alt={project.title}
-                                        className="project-image"
-                                    />
-                                </div>
-                                <div className="project-header">
-                                    <h2 className="project-name">{project.title}</h2>
-                                </div>
+                        <motion.h1
+                            className="projects-title"
+                            initial={{ y: -30, opacity: 0 }}
+                            animate={{ y: 0, opacity: 1 }}
+                            transition={{ duration: 0.8, ease: "easeOut" }}
+                        >
+                            Featured Projects
+                        </motion.h1>
 
-                                <div className="project-tech-stack">
-                                    {project.techStack.map(tech => (
-                                        <span key={tech} className="tech-chip">{tech}</span>
-                                    ))}
-                                </div>
+                        <div className="projects-grid">
+                            {FEATURED_PROJECTS.map((project) => (
+                                <ProjectCard key={project.id} project={project} variants={cardVariants} />
+                            ))}
+                        </div>
+                    </motion.div>
 
-                                <p className="project-description">
-                                    {project.description}
-                                </p>
 
-                                <div className="project-links">
-                                    {project.links.demo && (
-                                        <a href={project.links.demo} className="project-link" target="_blank" rel="noopener noreferrer">
-                                            Live Demo <span>→</span>
-                                        </a>
-                                    )}
-                                    {project.links.repo && (
-                                        <a href={project.links.repo} className="project-link" target="_blank" rel="noopener noreferrer">
-                                            GitHub <span>↗</span>
-                                        </a>
-                                    )}
-                                </div>
-                            </motion.div>
-                        ))}
+                    {/* Sidequests Section */}
+                    <motion.div
+                        initial="hidden"
+                        whileInView="visible"
+                        viewport={{ once: true, amount: 0.1 }}
+                        variants={containerVariants}
+                        style={{ marginTop: "80px" }}
+                    >
+                        <motion.h2
+                            className="projects-title" // Reusing title style for consistency, maybe smaller?
+                            style={{ fontSize: "clamp(24px, 4vw, 40px)", marginBottom: "30px" }}
+                            variants={cardVariants}
+                        >
+                            Sidequests
+                        </motion.h2>
+
+                        <div className="projects-grid">
+                            {SIDEQUESTS.map((project) => (
+                                <ProjectCard key={project.id} project={project} variants={cardVariants} />
+                            ))}
+                        </div>
                     </motion.div>
                 </div>
             </div>

src/pages/Skills.tsx

@@ -0,0 +1,170 @@
+import { motion, Variants } from "framer-motion";
+
+interface SkillCategory {
+    category: string;
+    skills: string[];
+}
+
+interface ProfessionalSkill {
+    skill: string;
+    description: string;
+}
+
+const TECHNICAL_SKILLS: SkillCategory[] = [
+    {
+        category: "Languages",
+        skills: ["JavaScript (ES6+)", "TypeScript", "Python", "Java", "C", "C++", "Lua", "HTML", "CSS", "SQL"]
+    },
+    {
+        category: "Frameworks/Libraries",
+        skills: ["React", "Express.js", "Django REST Framework", "AWS Lambda"]
+    },
+    {
+        category: "Databases",
+        skills: ["PostgreSQL (SQL Based)", "CouchDB (No-SQL Based)"]
+    },
+    {
+        category: "DevOps & Tools",
+        skills: ["Docker", "CircleCI", "Git (CLI)", "Postman", "AWS CDK", "Linux CLI"]
+    },
+    {
+        category: "AWS Technologies",
+        skills: ["S3", "Cloudfront", "Route 53", "API Gateway", "Lambda", "RDS", "VPC", "ECS", "SQS"]
+    },
+    {
+        category: "Concepts",
+        skills: ["RESTful APIs", "Agile/Scrum", "MVC Architecture", "Cloud Deployment", "Responsive Design"]
+    }
+];
+
+const PROFESSIONAL_SKILLS: ProfessionalSkill[] = [
+    {
+        skill: "Customer Service & Sales",
+        description: "Clear communication and coordination with customers and clients"
+    },
+    {
+        skill: "Technical Support",
+        description: "Diagnosing and resolving hardware/software issues across all major devices."
+    },
+    {
+        skill: "Web Development",
+        description: "WordPress plugin development, front-end design, and site optimization."
+    },
+    {
+        skill: "Scripting & Programming",
+        description: "JavaScript, Python, HTML/CSS, Git, and NPM package management."
+    },
+    {
+        skill: "Collaboration & Problem-Solving",
+        description: "Working effectively with diverse teams to meet deadlines and ensure quality results."
+    },
+    {
+        skill: "Adaptability",
+        description: "Quickly learning new tools, technologies, and processes in dynamic work environments."
+    }
+];
+
+const containerVariants: Variants = {
+    hidden: { opacity: 0 },
+    visible: {
+        opacity: 1,
+        transition: {
+            staggerChildren: 0.1,
+            delayChildren: 0.2
+        }
+    }
+};
+
+const itemVariants: Variants = {
+    hidden: { y: 20, opacity: 0 },
+    visible: {
+        y: 0,
+        opacity: 1,
+        transition: { type: "spring", stiffness: 100 }
+    }
+};
+
+export default function Skills() {
+    return (
+        <div className="mainContentBlock" style={{ minWidth: "66vw", alignItems: "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" }}
+            >
+                <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" }}>
+                        {TECHNICAL_SKILLS.map((category) => (
+                            <motion.div
+                                key={category.category}
+                                style={{
+                                    background: "rgba(255, 255, 255, 0.07)",
+                                    backdropFilter: "blur(10px)",
+                                    border: "1px solid rgba(255, 255, 255, 0.15)",
+                                    borderRadius: "12px",
+                                    padding: "20px",
+                                }}
+                                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" }}>
+                                    {category.skills.map((skill) => (
+                                        <span
+                                            key={skill}
+                                            style={{
+                                                background: "rgba(255, 255, 255, 0.15)",
+                                                color: "rgba(255, 255, 255, 0.9)",
+                                                padding: "6px 12px",
+                                                borderRadius: "20px",
+                                                fontSize: "0.85rem",
+                                                fontWeight: 500,
+                                                border: "1px solid rgba(255, 255, 255, 0.1)"
+                                            }}
+                                        >
+                                            {skill}
+                                        </span>
+                                    ))}
+                                </div>
+                            </motion.div>
+                        ))}
+                    </div>
+                </motion.div>
+
+                <motion.div variants={itemVariants} style={{ marginBottom: "50px" }}>
+                    <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" }}>
+                        {PROFESSIONAL_SKILLS.map((skill) => (
+                            <motion.div
+                                key={skill.skill}
+                                style={{
+                                    background: "rgba(255, 255, 255, 0.05)",
+                                    backdropFilter: "blur(5px)",
+                                    border: "1px solid rgba(255, 255, 255, 0.1)",
+                                    borderRadius: "12px",
+                                    padding: "20px",
+                                    display: "flex",
+                                    flexDirection: "column",
+                                    gap: "8px"
+                                }}
+                                whileHover={{ x: 5, backgroundColor: "rgba(255, 255, 255, 0.08)" }}
+                            >
+                                <h3 style={{ color: "#fff", margin: 0, fontSize: "1.1rem" }}>{skill.skill}</h3>
+                                <p style={{ color: "rgba(255, 255, 255, 0.7)", margin: 0, fontSize: "0.95rem", lineHeight: "1.5" }}>
+                                    {skill.description}
+                                </p>
+                            </motion.div>
+                        ))}
+                    </div>
+                </motion.div>
+            </motion.div>
+        </div>
+    );
+}