introduced dark mode

index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/site_icon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Nicholas Magi Portfolio</title>
+    <title>NM's Portfolio</title>
     <link href="https://cdn.jsdelivr.net/npm/flowbite@2.5.1/dist/flowbite.min.css" rel="stylesheet" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
   </head>

package.json

@@ -13,7 +13,8 @@
     "flowbite": "^2.5.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.26.2"
+    "react-router-dom": "^6.26.2",
+    "react-switch": "^7.1.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.43",

src/App.tsx

@@ -1,30 +1,28 @@
-import './App.css'
-import Navbar from './components/Navbar'
-import Footer from './components/Footer'
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
 
 import InitialScreen from './pages/InitialScreen'
 import Education from './pages/Education'
 import Projects from './pages/Projects'
 import ContactMe from './pages/ContactMe'
+import DefaultLayout from './components/LayoutComponents/DefaultLayout'
 
 function App() {
-
-  localStorage.setItem("theme", "light")
-
+  if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+    localStorage.setItem("theme", "dark")
+  } else {
+    localStorage.setItem("theme", "light")
+  }
   return (
     <Router basename={import.meta.env.BASE_URL}>
       <Routes>
-        <Route index path='/' element={<>
-            <Navbar></Navbar>
-            <div className='px-10 lg:px-[10rem] 2xl:px-[25rem] md:pt-10 lg:pt-0'>
-              <InitialScreen></InitialScreen>
-              <Education></Education>
-              <Projects></Projects>
-              <ContactMe></ContactMe>
-            </div>
-            <Footer></Footer>
-        </>}>
+        <Route index path='/' element={
+          <DefaultLayout>
+              <InitialScreen/>
+              <Education/>
+              <Projects/>
+              <ContactMe/>
+          </DefaultLayout>
+        }>
         </Route>
       </Routes>
     </Router>

src/components/EducationCard.tsx

@@ -14,13 +14,12 @@ function EducationCard({ data }: IProps)
             <article className="flex flex-row flex-nowrap gap-5 justify-center content-center">
                 <i className="fa fa-bullseye text-7xl md:text-8xl accent-clr"></i>
                 <div className="flex flex-col flex-wrap">
-                    <div className="max-w-[580px] text-3xl text-pretty">{data?.start_year} - {data?.end_year} {current_year < data?.end_year!! ? <span className="text-sm text-gray-500">(expected)</span> : <></>}</div>
+                    <div className="max-w-[580px] text-3xl text-pretty">{data?.start_year} - {data?.end_year} {current_year < data?.end_year!! ? <span className="text-sm text-secondary">(expected)</span> : <></>}</div>
                     <div className="max-w-[580px] text-2xl text-pretty font-bold">{data?.title_description}</div>
                     <div className="max-w-[580px] text-xl text-pretty accent-clr">{data?.school}</div>
-
                     {
                         data?.grade ? 
-                            <div className='mt-2'>Grade: <span>{data?.grade}</span>/{data.max_grade} {data?.withHonours ? <span className='italic'>with honours</span> : <></>}</div> : 
+                            <div className='mt-2 text-secondary'>Grade: <span>{data?.grade}</span>/{data.max_grade} {data?.withHonours ? <span className='italic'>with honours</span> : <></>}</div> : 
                             <></>
                     }
                 </div>

src/components/GHRepoCard.tsx

@@ -9,13 +9,13 @@ function GHRepoCard({ data }: IProps ) {
     let tooltip_id = "tooltip-" + data.name + data.language
 
     return <>
-        <article className='overflow-hidden bg-[--bg-color] flex flex-col flex-wrap content-center justify-between shadow-xl rounded-lg hover:scale-[1.02] hover:shadow-2xl transition'>
+        <article className='overflow-hidden bg-[--nav-bg] flex flex-col flex-wrap content-center justify-between shadow-xl rounded-lg hover:scale-[1.02] hover:shadow-2xl transition'>
             <div className='p-6 w-full'>
                 {/* <img src={template_img}></img> */}
                 <div className='py-2 flex justify-between content-center'>
                     <small className='mt-1 inline-block align-middle h-fit'>
                         <p className='h-fit'><i className="fa fa-code bg-transparent"></i> Made by <span className='accent-clr'>{data.author}</span></p>
-                        <p className='h-fit'><i className='fa fa-star'/> by <span className='accent-clr'>{data.stars}</span> people <br className='inline sm:hidden'/> {data.stars === 0 ? <span className='text-gray-600'>&#8212;{" you can be the first!"}</span> : <></>}</p> 
+                        <p className='h-fit'><i className='fa fa-star'/> by <span className='accent-clr'>{data.stars}</span> people <br className='inline sm:hidden'/> {data.stars === 0 ? <span className='text-[var(--secondary-color)]'>&#8212;{" you can be the first!"}</span> : <></>}</p> 
                     </small>
                     <img data-tooltip-target={tooltip_id} data-tooltip-placement="bottom" className='w-10' src={'https://skillicons.dev/icons?i=' + languageToID[data.language]}></img>
                 </div>

src/components/LayoutComponents/DefaultLayout.tsx

@@ -0,0 +1,16 @@
+import Footer from "./Footer";
+import Navbar from "./Navbar";
+
+type Props = {
+    children: string | JSX.Element | JSX.Element[]
+}
+
+export default function DefaultLayout({ children }: Props) {
+    return <>
+        <Navbar/>
+        <div className='px-10 lg:px-[10rem] 2xl:px-[25rem] md:pt-10 lg:pt-0'>
+            { children }
+        </div>
+        <Footer/>
+    </>
+}

src/components/Footer.tsx → src/components/LayoutComponents/Footer.tsx

@@ -3,7 +3,7 @@ import styles from './Footer.module.css'
 function Footer() 
 {
     return <>
-        <footer className={styles.footer + " border-t-2 mt-20 flex justify-center content-center p-20 text-center text-black bg-[--nav-bg]"}>
+        <footer className={styles.footer + " mt-20 flex justify-center content-center p-20 text-center text-primary bg-[--nav-bg]"}>
             <span>Handmade with <i className='fa fa-heart text-[--accent-color]'></i> by <a className='text-[--accent-color]' href='https://github.com/Nickolausen'>Nicholas Magi</a></span>
         </footer>
     </>

src/components/Navbar.tsx → src/components/LayoutComponents/Navbar.tsx

@@ -1,4 +1,5 @@
-import ContactCard from "./ContactCard"
+import SocialCard from "../SocialCard"
+import ThemeSwitcher from "../ThemeSwitcher"
 // import ThemeSwitcher from "./ThemeSwitcher"
 
 function Navbar() 
@@ -7,23 +8,23 @@ function Navbar()
      Icon Website: https://iconmonstr.com/
     */
     const contact_tabs = [
-        { key: 1, item: ContactCard(1, "@Nickolausen", "https://github.com/Nickolausen", { width: 30, height: 30 }, "M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z")},
-        { key: 2, item: ContactCard(2, "@nicholas-magi", "https://linkedin.com/in/nicholas-magi", { width: 30, height: 30 }, "M0 0v24h24v-24h-24zm8 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.397-2.586 7-2.777 7 2.476v6.759z")},
-        { key: 3, item: ContactCard(3, "nicholas.magi24@gmail.com", "#contact-me", { width: 30, height: 30 }, "M12 12.713l-11.985-9.713h23.971l-11.986 9.713zm-5.425-1.822l-6.575-5.329v12.501l6.575-7.172zm10.85 0l6.575 7.172v-12.501l-6.575 5.329zm-1.557 1.261l-3.868 3.135-3.868-3.135-8.11 8.848h23.956l-8.11-8.848z")},
+        { item: SocialCard(1, "@Nickolausen", "https://github.com/Nickolausen", { width: 30, height: 30 }, "M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z")},
+        { item: SocialCard(2, "@nicholas-magi", "https://linkedin.com/in/nicholas-magi", { width: 30, height: 30 }, "M0 0v24h24v-24h-24zm8 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.397-2.586 7-2.777 7 2.476v6.759z")},
+        { item: SocialCard(3, "nicholas.magi24@gmail.com", "#contact-me", { width: 30, height: 30 }, "M12 12.713l-11.985-9.713h23.971l-11.986 9.713zm-5.425-1.822l-6.575-5.329v12.501l6.575-7.172zm10.85 0l6.575 7.172v-12.501l-6.575 5.329zm-1.557 1.261l-3.868 3.135-3.868-3.135-8.11 8.848h23.956l-8.11-8.848z")},
     ]
 
     return (
-        <nav className="flex flex-row justify-center w-screen fixed border-b-2 z-10 bg-[--nav-bg] text-primary">
+        <nav className="flex flex-row justify-center w-screen fixed z-10 bg-[--nav-bg] text-primary">
             <div className="w-screen lg:w-auto max-w-screen-xl flex flex-wrap items-center justify-between p-4">
                 <a href="#home" className="exclude flex items-center space-x-3 rtl:space-x-reverse pe-auto lg:pe-20">
-                    <span className="self-center text-4xl whitespace-nowrap dark:text-white">
-                        <span className="first-letter">N</span>.<span className="first-letter">M</span>. Portfolio
+                    <span className="self-center text-4xl whitespace-nowrap">
+                        <span className="text-[--accent-color]">NM</span>'s Portfolio
                     </span>
                 </a>
                 <button
                     data-collapse-toggle="navbar-solid-bg"
                     type="button"
-                    className="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg lg:hidden hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
+                    className="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg lg:hidden dark:focus:ring-gray-600"
                     aria-controls="navbar-solid-bg"
                     aria-expanded="false"
                 >
@@ -84,10 +85,9 @@ function Navbar()
                                 contact_tabs.map(it => it.item)
                             }
                         </li>
-                        {/* TODO: Theme Switcher */}
-                        {/* <li className="flex py-2 ps-3 lg:py-0">
+                        <div className="py-2 px-3 lg:p-0 flex flex-row lg:items-center">
                             <ThemeSwitcher/>
-                        </li> */}
+                        </div>
                     </ul>
                 </div>
             </div>

src/components/ProjectCard.tsx

@@ -5,7 +5,7 @@ interface IProps {
     project_info?: ProjectDetails
 }
 
-const month_conversion: { [nr: string]: string } = {
+const monthConversion: { [nr: string]: string } = {
     "01": "January",
     "02": "February",
     "03": "March",
@@ -24,8 +24,8 @@ const month_conversion: { [nr: string]: string } = {
 
 export default function ProjectCard( { project_info }: IProps)  
 {    
-    let start_month: string = month_conversion[project_info?.start_date.split("/")[0]!!]
-    let end_month: string | undefined = month_conversion[project_info?.end_date?.split("/")[0]!!]
+    let start_month: string = monthConversion[project_info?.start_date.split("/")[0]!!]
+    let end_month: string | undefined = monthConversion[project_info?.end_date?.split("/")[0]!!]
 
     let start_year: string = project_info?.start_date.split("/")[1]!!
     let end_year: string | undefined = project_info?.start_date.split("/")[1]!!
@@ -36,14 +36,14 @@ export default function ProjectCard( { project_info }: IProps)
     let img_id: string = project_info?.name.toLowerCase().replace(" ", "_")!!
 
     return <>
-        <div className="w-full shadow-xl flex items-center flex-col md:flex-row rounded-lg bg-red hover:shadow-2xl hover:scale-[1.02] transition bg-[--bg-color]">
+        <div className="w-full shadow-xl flex items-center flex-col md:flex-row rounded-lg hover:shadow-2xl hover:scale-[1.02] transition bg-[--nav-bg]">
             <div className="w-full md:w-auto md:min-w-2xl h-full flex justify-center items-center bg-white py-3 md:py-0 rounded-l-lg"> { /* Image container */}
                 <img className="max-w-64 lg:max-w-96 rounded-lg px-2" src={import.meta.env.BASE_URL + "imgs/projects/" + img_id + ".png"} alt="" />
             </div>
             <div className="p-5  h-full flex flex-col justify-between">
                 <div>
                     <h3 className='text-3xl font-bold'>{!project_info?.is_source_available ? <i className="fa fa-lock" data-tooltip-target={"tooltip-privacy-" + img_id} data-tooltip-placement="top"></i> : <></>} &lt;{project_info?.name}<span className='accent-clr'>/</span>&gt;</h3>
-                    <h4 className="text-xl"><span className="accent-clr">{project_info?.company} @ {project_info?.location}</span> <span className="text-gray-600">- from {start_month} {start_year} {end_year ? <>{"to " + end_month + " " + end_year}</> : <>&#8212; ongoing</>}</span></h4>
+                    <h4 className="text-xl"><span className="accent-clr">{project_info?.company} @ {project_info?.location}</span> <span className="text-[--secondary-color]">- from {start_month} {start_year} {end_year ? <>{"to " + end_month + " " + end_year}</> : <>&#8212; ongoing</>}</span></h4>
                     <p className="mt-3 text-pretty">{project_info?.description}</p>
                 </div>
                 <div className="flex flex-row gap-5 flex-wrap">