path aliases

jsconfig.json

@@ -0,0 +1,8 @@
+{
+    "compilerOptions": {
+        "baseUrl": "./",
+        "paths": {
+            "@/*": ["src/*"]
+        }
+    }
+}

src/App.jsx

@@ -1,5 +1,5 @@
+import Home from "@/pages";
 import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
-import Home from "./pages";
 
 export default function App() {
     return (

src/components/Footer/index.jsx

@@ -1,6 +1,3 @@
-import { FaLinkedin } from "react-icons/fa";
-import { FaSquareXTwitter } from "react-icons/fa6";
-import { animateScroll as scroll } from "react-scroll";
 import {
     FooterContainer,
     FooterWrap,
@@ -10,7 +7,10 @@ import {
     SocialMedia,
     SocialMediaWrap,
     WebsiteRights,
-} from "./FooterElements";
+} from "@/components/Footer/FooterElements";
+import { FaLinkedin } from "react-icons/fa";
+import { FaSquareXTwitter } from "react-icons/fa6";
+import { animateScroll as scroll } from "react-scroll";
 
 const images = [
     "https://freepik.com/free-vector/hand-coding-concept-illustration_21864184.htm#query=coding&position=17&from_view=search&track=sph&uuid=5896d847-38e4-4cb9-8fe1-103041c7c933",

src/components/HeroSection/index.jsx

@@ -1,4 +1,3 @@
-import img from "../../images/F23.prince.learning.turquoise.jpg";
 import {
     HeroCitationBlock,
     HeroCitationTitle,
@@ -18,7 +17,8 @@ import {
     HeroRow,
     Img,
     UDLLink,
-} from "./HeroElements";
+} from "@/components/HeroSection/HeroElements";
+import img from "@/images/F23.prince.learning.turquoise.jpg";
 
 export default function HeroSection() {
     const citation = `

src/components/Instructors/index.jsx

@@ -1,4 +1,3 @@
-import img from "../../images/instructor.svg";
 import {
     Column1,
     Column2,
@@ -14,7 +13,8 @@ import {
     Subtitle,
     TextWrapper,
     TopLine,
-} from "./InstructorsElements";
+} from "@/components/Instructors/InstructorsElements";
+import img from "@/images/instructor.svg";
 
 const fullSlides = [
     {

src/components/Media/index.jsx

@@ -1,4 +1,3 @@
-import img from "../../images/media.svg";
 import {
     Column1,
     Column2,
@@ -15,7 +14,8 @@ import {
     TextWrapper,
     TopLine,
     VideoFrame,
-} from "./MediaElements";
+} from "@/components/Media/MediaElements";
+import img from "@/images/media.svg";
 
 const interviews = [
     {

src/components/More/index.jsx

@@ -1,4 +1,3 @@
-import img from "../../images/more.svg";
 import {
     Column1,
     Column2,
@@ -16,7 +15,8 @@ import {
     Subtitle,
     TextWrapper,
     TopLine,
-} from "./MoreElements";
+} from "@/components/More/MoreElements";
+import img from "@/images/more.svg";
 
 const book = [
     {

src/components/NavBar/index.jsx

@@ -1,7 +1,3 @@
-import { useEffect, useState } from "react";
-import { FaBars } from "react-icons/fa";
-import { IconContext } from "react-icons/lib";
-import { animateScroll as scroll } from "react-scroll";
 import {
     MobileIcon,
     Nav,
@@ -10,7 +6,11 @@ import {
     NavLinks,
     NavLogo,
     NavMenu,
-} from "./NavbarElements";
+} from "@/components/NavBar/NavbarElements";
+import { useEffect, useState } from "react";
+import { FaBars } from "react-icons/fa";
+import { IconContext } from "react-icons/lib";
+import { animateScroll as scroll } from "react-scroll";
 
 export default function NavBar({ toggle }) {
     const [scrollNav, setScrollNav] = useState(false);

src/components/Notebooks/index.jsx

@@ -1,4 +1,3 @@
-import img from "../../images/coding.svg";
 import {
     Column1,
     Column2,
@@ -12,7 +11,8 @@ import {
     Subtitle,
     TextWrapper,
     TopLine,
-} from "./NotebookElements";
+} from "@/components/Notebooks/NotebookElements";
+import img from "@/images/coding.svg";
 
 const notebooks = [
     {

src/components/Sidebar/index.jsx

@@ -5,7 +5,7 @@ import {
     SidebarLink,
     SidebarMenu,
     SidebarWrapper,
-} from "./SidebarElements";
+} from "@/components/Sidebar/SidebarElements";
 
 export default function Sidebar({ isOpen, toggle }) {
     return (

src/index.jsx

@@ -1,7 +1,7 @@
+import App from "@/App";
+import "@/styles/globals.css";
 import React from "react";
 import ReactDOM from "react-dom/client";
-import App from "./App";
-import "./styles/globals.css";
 
 ReactDOM.createRoot(document.getElementById("root")).render(
     <React.StrictMode>

src/pages/index.jsx

@@ -1,12 +1,12 @@
+import Footer from "@/components/Footer";
+import HeroSection from "@/components/HeroSection";
+import InstructorsSection from "@/components/Instructors";
+import MediaSection from "@/components/Media";
+import MoreSection from "@/components/More";
+import Navbar from "@/components/NavBar";
+import NotebookSection from "@/components/Notebooks";
+import Sidebar from "@/components/Sidebar";
 import { useState } from "react";
-import Footer from "../components/Footer";
-import HeroSection from "../components/HeroSection";
-import InstructorsSection from "../components/Instructors";
-import MediaSection from "../components/Media";
-import MoreSection from "../components/More";
-import Navbar from "../components/NavBar";
-import NotebookSection from "../components/Notebooks";
-import Sidebar from "../components/Sidebar";
 
 export default function Home() {
     const [isOpen, setIsOpen] = useState(false);

src/pages/signin.jsx

@@ -1,5 +1,5 @@
-import ScrollToTop from "../components/ScrollToTop";
+import ScrollToTop from "@/components/ScrollToTop";
-import SignIn from "../components/SignIn";
+import SignIn from "@/components/SignIn";
 
 export default function SigninPage() {
     return (

vite.config.js

@@ -1,9 +1,15 @@
 import react from "@vitejs/plugin-react-swc";
+import path from "node:path";
 import { defineConfig } from "vite";
 
 // https://vitejs.dev/config/
 export default defineConfig({
     plugins: [react()],
+    resolve: {
+        alias: {
+            "@": path.resolve(__dirname, "./src"),
+        },
+    },
     server: {
         port: 3000,
     },