restructured file organization and handled imports

Author: steadyfall

src/app/page.tsx

@@ -1,11 +1,11 @@
 "use client";
 
-import Header from './components/Header'
-import Footer from './components/Footer'
-import About from './components/About'
-import { Experiences } from './components/Experiences'
-import { Projects } from './components/Projects'
-import Navbar from './components/Navbar';
+import Header from '@/components/Header'
+import Footer from '@/components/Footer'
+import About from '@/components/About'
+import { Experiences } from '@/components/Experiences'
+import { Projects } from '@/components/Projects'
+import Navbar from '@/components/Navbar';
 
 export default function Portfolio() {
   const experiencesArray = [

src/app/components/about.tsx renamed to src/components/About.tsx

@@ -1,4 +1,4 @@
-import useReadingProgress from '../hooks/useReadingProgress'
+import useReadingProgress from '@/hooks/useReadingProgress'
 
 const Navbar = () => {
     const completion = useReadingProgress();

src/app/components/experiences.tsx renamed to src/components/Experiences.tsx

@@ -10,7 +10,7 @@ export type ExperienceTileProps = {
 
 export function ExperienceTile({ companyLogo, companyName, position, period, responsibilities }: ExperienceTileProps) {
   return (
-    <div className="bg-white dark:bg-neutral-800 p-6 rounded-lg shadow-md">
+    <div className="bg-sushi-200 dark:bg-sushi-900 p-6 rounded-lg shadow-md">
       <div className="flex flex-col sm:flex-row items-center sm:items-start mb-4">
         <div className="mb-4 sm:mb-0 sm:mr-4 flex-shrink-0">
           <img