diff --git a/jsconfig.json b/jsconfig.json
new file mode 100644
index 0000000..96c46e6
--- /dev/null
+++ b/jsconfig.json
@@ -0,0 +1,8 @@
+{
+ "compilerOptions": {
+ "baseUrl": "./",
+ "paths": {
+ "@/*": ["src/*"]
+ }
+ }
+}
diff --git a/package-lock.json b/package-lock.json
index f3e3bff..d659ef8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,6 @@
"name": "udlbook-website",
"version": "0.1.0",
"dependencies": {
- "@fortawesome/fontawesome-svg-core": "^6.5.2",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-icons": "^5.2.1",
@@ -470,27 +469,6 @@
"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
}
},
- "node_modules/@fortawesome/fontawesome-common-types": {
- "version": "6.5.2",
- "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.5.2.tgz",
- "integrity": "sha512-gBxPg3aVO6J0kpfHNILc+NMhXnqHumFxOmjYCFfOiLZfwhnnfhtsdA2hfJlDnj+8PjAs6kKQPenOTKj3Rf7zHw==",
- "hasInstallScript": true,
- "engines": {
- "node": ">=6"
- }
- },
- "node_modules/@fortawesome/fontawesome-svg-core": {
- "version": "6.5.2",
- "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.5.2.tgz",
- "integrity": "sha512-5CdaCBGl8Rh9ohNdxeeTMxIj8oc3KNBgIeLMvJosBMdslK/UnEB8rzyDRrbKdL1kDweqBPo4GT9wvnakHWucZw==",
- "hasInstallScript": true,
- "dependencies": {
- "@fortawesome/fontawesome-common-types": "6.5.2"
- },
- "engines": {
- "node": ">=6"
- }
- },
"node_modules/@humanwhocodes/config-array": {
"version": "0.11.14",
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
diff --git a/package.json b/package.json
index 49a6780..068a57b 100755
--- a/package.json
+++ b/package.json
@@ -14,7 +14,6 @@
"format": "prettier --write ."
},
"dependencies": {
- "@fortawesome/fontawesome-svg-core": "^6.5.2",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-icons": "^5.2.1",
diff --git a/src/App.jsx b/src/App.jsx
index 34610d5..cbb5f96 100755
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,11 +1,11 @@
+import Index from "@/pages";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
-import Home from "./pages";
export default function App() {
return (
- } />
+ } />
);
diff --git a/src/components/ButtonElement.jsx b/src/components/ButtonElement.jsx
deleted file mode 100644
index 13293f1..0000000
--- a/src/components/ButtonElement.jsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Link } from "react-scroll";
-import styled from "styled-components";
-
-export const Button = styled(Link)`
- border-radius: 50px;
- background: ${({ primary }) => (primary ? "#01BF71" : "#010606")};
- white-space: nowrap;
- padding: ${({ big }) => (big ? "14px 48px" : "12px 30px")};
- color: ${({ dark }) => (dark ? "#010106" : "#fff")};
- font-size: $ ${({ fontBig }) => (fontBig ? "20px" : "16px")};
- outline: none;
- border: none;
- cursor: pointer;
- display: flex;
- justify-content: center;
- align-items: center;
- transition: all 0.2s ease-in-out;
-
- &:hover {
- transition: all 0.2s ease-in-out;
- background: ${({ primary }) => (primary ? "#fff" : "#01BF71")};
- }
-`;
diff --git a/src/components/Footer/index.jsx b/src/components/Footer/index.jsx
index 5544523..461ae54 100755
--- a/src/components/Footer/index.jsx
+++ b/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",
@@ -43,7 +43,7 @@ export default function Footer() {
-
+
Understanding Deep Learning
diff --git a/src/components/HeroSection/HeroElements.jsx b/src/components/HeroSection/HeroElements.jsx
index 2a3e7bd..383b648 100755
--- a/src/components/HeroSection/HeroElements.jsx
+++ b/src/components/HeroSection/HeroElements.jsx
@@ -61,12 +61,16 @@ export const HeroBtnWrapper = styled.div`
export const HeroRow = styled.div`
display: grid;
- grid-auto-columns: minmax(auto, 1fr);
+ grid-template-columns: 1fr 1fr;
+ gap: 20px;
align-items: top;
- grid-template-areas: 'col1 col2' };
+ grid-template-areas: "col1 col2";
- @media screen and (max-width: 768px){
- grid-template-areas: 'col2' 'col1';
+ @media screen and (max-width: 768px) {
+ grid-template-columns: 1fr;
+ grid-template-areas:
+ "col1"
+ "col2";
}
`;
@@ -74,7 +78,6 @@ export const HeroNewsItem = styled.div`
margin-left: 4px;
color: #000000;
font-size: 16px;
- /* line-height: 16px; */
margin-bottom: 16px;
display: flex;
justify-content: start;
@@ -111,12 +114,16 @@ export const HeroColumn1 = styled.div`
margin-left: 12px;
margin-top: 60px;
padding: 10px 15px;
- padding: 0 15px;
grid-area: col1;
- align-items: left;
display: flex;
flex-direction: column;
justify-content: space-between;
+
+ @media screen and (max-width: 768px) {
+ margin-left: 0;
+ margin-top: 20px;
+ padding: 0;
+ }
`;
export const HeroColumn2 = styled.div`
@@ -126,6 +133,10 @@ export const HeroColumn2 = styled.div`
display: flex;
align-items: center;
flex-direction: column;
+
+ @media screen and (max-width: 768px) {
+ padding: 0;
+ }
`;
export const TextWrapper = styled.div`
diff --git a/src/components/HeroSection/index.jsx b/src/components/HeroSection/index.jsx
index 4576a78..9a9721b 100755
--- a/src/components/HeroSection/index.jsx
+++ b/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 = `
diff --git a/src/components/Instructors/index.jsx b/src/components/Instructors/index.jsx
index e1bdf08..ee377d4 100644
--- a/src/components/Instructors/index.jsx
+++ b/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 = [
{
diff --git a/src/components/Media/index.jsx b/src/components/Media/index.jsx
index 4050b65..caf2d41 100644
--- a/src/components/Media/index.jsx
+++ b/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 = [
{
diff --git a/src/components/More/index.jsx b/src/components/More/index.jsx
index 09de6f3..ce2d2ea 100644
--- a/src/components/More/index.jsx
+++ b/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 = [
{
diff --git a/src/components/NavBar/NavbarElements.jsx b/src/components/Navbar/NavbarElements.jsx
similarity index 100%
rename from src/components/NavBar/NavbarElements.jsx
rename to src/components/Navbar/NavbarElements.jsx
diff --git a/src/components/NavBar/index.jsx b/src/components/Navbar/index.jsx
similarity index 97%
rename from src/components/NavBar/index.jsx
rename to src/components/Navbar/index.jsx
index 4654e59..f0714cc 100755
--- a/src/components/NavBar/index.jsx
+++ b/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,9 +6,13 @@ 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 }) {
+export default function Navbar({ toggle }) {
const [scrollNav, setScrollNav] = useState(false);
useEffect(() => {
diff --git a/src/components/Notebooks/index.jsx b/src/components/Notebooks/index.jsx
index 40d847a..b722410 100644
--- a/src/components/Notebooks/index.jsx
+++ b/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 = [
{
diff --git a/src/components/ScrollToTop.jsx b/src/components/ScrollToTop.jsx
deleted file mode 100755
index ec78401..0000000
--- a/src/components/ScrollToTop.jsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { useEffect } from "react";
-import { useLocation } from "react-router-dom";
-
-export default function ScrollToTop() {
- const { pathname } = useLocation();
-
- useEffect(() => {
- window.scrollTo(0, 0, { behavior: "smooth" });
- }, [pathname]);
-
- return null;
-}
diff --git a/src/components/Sidebar/index.jsx b/src/components/Sidebar/index.jsx
index e3e10fe..716eb2c 100755
--- a/src/components/Sidebar/index.jsx
+++ b/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 (
diff --git a/src/index.jsx b/src/index.jsx
index 2c28dfe..c3b2d7f 100755
--- a/src/index.jsx
+++ b/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(
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index 71ae0d1..1963853 100755
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -1,14 +1,14 @@
+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() {
+export default function Index() {
const [isOpen, setIsOpen] = useState(false);
const toggle = () => {
diff --git a/src/pages/signin.jsx b/src/pages/signin.jsx
deleted file mode 100644
index f54c1a1..0000000
--- a/src/pages/signin.jsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import ScrollToTop from "../components/ScrollToTop";
-import SignIn from "../components/SignIn";
-
-export default function SigninPage() {
- return (
- <>
-
-
-
- );
-}
diff --git a/vite.config.js b/vite.config.js
index c708a7a..0e64769 100644
--- a/vite.config.js
+++ b/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,
},