Refactoring file locations

src/App.jsx

@@ -1,12 +1,12 @@
 import { useState, useEffect, useRef } from 'react';
 import { useAtomValue } from 'jotai';
 import { activeSectionState, themeState } from './state/atoms';
-import Navbar from './components/Navbar/Navbar';
-import Hero from './components/Hero/Hero';
-import About from './components/About/About';
-import Projects from './components/Projects/Projects';
-import Contact from './components/Contact/Contact';
-import Footer from './components/Footer/Footer';
+import Navbar from './components/Navbar';
+import Hero from './components/Hero';
+import About from './components/About';
+import Projects from './components/Projects';
+import Contact from './components/Contact';
+import Footer from './components/Footer';
 import styles from './App.module.scss';
 
 const SECTIONS = {

src/components/About.jsx

@@ -1,4 +1,4 @@
-import styles from './About.module.scss';
+import styles from '../styles/components/About.module.scss';
 
 const STACK = ['Technology 1', 'Technology 2', 'Technology 3', 'Technology 4', 'Technology 5', 'Technology 6'];
 

src/components/Contact.jsx

@@ -1,4 +1,4 @@
-import styles from './Contact.module.scss';
+import styles from '../styles/components/Contact.module.scss';
 
 export default function Contact() {
   return (

src/components/Footer.jsx

@@ -1,4 +1,4 @@
-import styles from './Footer.module.scss';
+import styles from '../styles/components/Footer.module.scss';
 
 export default function Footer() {
   return (

src/components/Hero.jsx

@@ -1,4 +1,4 @@
-import styles from './Hero.module.scss';
+import styles from '../styles/components/Hero.module.scss';
 
 export default function Hero() {
   return (

src/components/Navbar.jsx

@@ -1,7 +1,7 @@
 import { useAtom } from 'jotai';
-import { navOpenState, activeSectionState } from '../../state/atoms';
-import ThemeToggle from '../ThemeToggle/ThemeToggle';
-import styles from './Navbar.module.scss';
+import { navOpenState, activeSectionState } from '../state/atoms';
+import ThemeToggle from './ThemeToggle';
+import styles from '../styles/components/Navbar.module.scss';
 
 const NAV_LINKS = [
   { label: 'Home', section: 'home' },

src/components/Projects.jsx

@@ -1,4 +1,4 @@
-import styles from './Projects.module.scss';
+import styles from '../styles/components/Projects.module.scss';
 
 const PROJECTS = [
   {

src/components/ThemeToggle.jsx

@@ -1,6 +1,6 @@
 import { useAtom } from 'jotai';
-import { themeState } from '../../state/atoms';
-import styles from './ThemeToggle.module.scss';
+import { themeState } from '../state/atoms';
+import styles from '../styles/components/ThemeToggle.module.scss';
 
 export default function ThemeToggle() {
   const [theme, setTheme] = useAtom(themeState);

src/styles/components/About.module.scss

@@ -1,4 +1,4 @@
-@use '../../styles/variables' as *;
+@use '../variables' as *;
 
 .about {
   padding: $space-24 $space-6;

src/styles/components/Contact.module.scss

@@ -1,4 +1,4 @@
-@use '../../styles/variables' as *;
+@use '../variables' as *;
 
 .contact {
   padding: $space-24 $space-6 $space-16;

src/styles/components/Footer.module.scss

@@ -1,4 +1,4 @@
-@use '../../styles/variables' as *;
+@use '../variables' as *;
 
 .footer {
   border-top: 1px solid $color-border;

src/styles/components/Hero.module.scss

@@ -1,4 +1,4 @@
-@use '../../styles/variables' as *;
+@use '../variables' as *;
 
 .hero {
   position: relative;

src/styles/components/Navbar.module.scss

@@ -1,4 +1,4 @@
-@use '../../styles/variables' as *;
+@use '../variables' as *;
 
 .header {
   position: fixed;

src/styles/components/Projects.module.scss

@@ -1,4 +1,4 @@
-@use '../../styles/variables' as *;
+@use '../variables' as *;
 
 .projects {
   padding: $space-24 $space-6;

src/styles/components/ThemeToggle.module.scss

@@ -1,4 +1,4 @@
-@use '../../styles/variables' as *;
+@use '../variables' as *;
 
 .toggle {
   background: none;