working on school dashboard; TODO(read .md)

package.json

@@ -10,10 +10,12 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@types/react-router-hash-link": "^2.4.9",
     "flowbite": "^2.5.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.26.2",
+    "react-router-hash-link": "^2.4.3",
     "react-switch": "^7.1.0"
   },
   "devDependencies": {

public/notes/misc/p1-inizializzazione.md

@@ -0,0 +1,96 @@
+# 1. Project initialization
+
+>- **React for Dummies**, I.T.T. "Blaise Pascal" @ Cesena, IT
+>- Written by: Nicholas Magi - <nicholas.magi24[@]gmail.com>
+
+```table-of-contents
+title: Table of contents
+style: nestedList # TOC style (nestedList|nestedOrderedList|inlineFirstLevel)
+minLevel: 0 # Include headings from the specified level
+maxLevel: 0 # Include headings up to the specified level
+includeLinks: true # Make headings clickable
+debugInConsole: false # Print debug info in Obsidian console
+```
+<div style="page-break-after: always;"></div>
+
+## 1.1 How to create a React + Vite project
+_(From https://vite.dev/guide/#scaffolding-your-first-vite-project)_
+
+> [!warning]
+> **Ensure your PC has installed Node.js version 18+ or 20+**! Check your installed version with `node --version` or install it from https://nodejs.org/en/download/package-manager.
+
+Simply run `npm create vite@latest` on your terminal and follow the prompts!
+
+Alternatively, run `npm create vite@latest <nome_progetto> -- --template react` to skip guided prompts.
+
+Finally run the `npm install` command, to download the default dependencies needed.
+
+## 1.2 What happens after project creation
+
+To see your code changes live in the browser, run `npm run dev` on your terminal and go to the link you're given.
+
+You will see a basic pre-defined React application with some images, texts, a Counter and a button to increase its value. Everything shown is contained in `src/App.jsx`, with the corresponding styles defined in `src/App.css`.
+
+## 1.3 Before going on: Bootstrap installation
+
+During the course we want and we will put some style to our pages and components. In order to do that, we won't use pure CSS: a shallow knowledge of the language is needed, but it's not the core of the project. We'll use **Bootstrap**, a powerful frontend toolkit that allows us to use pre-defined styles and animations. The official guide is https://getbootstrap.com/;
+
+On your terminal, type `npm i bootstrap@5.3.3`
+
+After the installation has been completed, we need to import its CSS and JS files to our project in order to use its classes. To do that, go to `src/main.jsx` and, below the import statements you see in the first lines of the page, add:
+- `import 'bootstrap/dist/css/bootstrap.min.css'`
+- `import 'bootstrap/dist/js/bootstrap.bundle.min'`
+
+## 1.4 Project structure
+
+Take a look at the files contained in `<nome_progetto>`:
+```
+<nome_progetto>/    
+│
+└───node_modules/
+    │   [...]   
+└───public/
+    │   [...]
+└───src/
+    └───assets/
+        |   [...]
+    │   App.css
+    │   App.jsx
+    │   index.css
+    │   main.jsx
+|   [...]
+|   README.md
+|   [...]
+```
+
+What you've got is a `node_modules/` directory containing all the project **package dependencies** (_remember to '.gitignore' it, if you want to track the project with git!_), 
+a `public/` directory (made for assets files when **deploying the application**) and a `src/` directory. Here you'll have all the important files containing **React components and the corresponding stylesheets**.
+
+Consider that we'll be working primarily **inside the `src` directory**.
+## 1.5 Inside `src/`
+
+We'll define our React components and styles inside the `src/` folder, that we'll consider our main working space - as previously said. The default template has already crafted one component for us: `App.jsx`. 
+
+This gives us the chance to take a look at the typical structure of a component:
+
+- In the very first top lines you **import** everything you need within your component - could it be a stylesheet (_`App.css`_), some images (_`./assets/react.svg`,`./vite.svg`_) or/and other components as well.
+
+- Then there's the main component implementation - which corresponds to just a "normal" JavaScript function implementation. You declare the function _with some parameters (optional)_, write its body and its return statement. What you see returning from `App()` is not pure HTML, but it's called **JSX** (_**J**ava**S**cript e**X**tension_) - **which describes the UI of the component**. 
+
+> [!warning] Remember!
+> That is a crucial point to keep in mind, because many features of this language are similar to HTML, but there are some key differences that we'll cover later. 
+
+- The last line of code is 
+```jsx
+export default App
+```
+which allows the other parts of the project to see and use the component `App`. This line can be omitted if the `export default` keywords are included in the `App()` function declaration like so:
+```jsx
+export default function App() {
+  // [...]
+}
+```
+Note that inside a jsx file you can write and work with other helper functions as well, but remember to **export** the function that represents the description and logic of the component!
+
+> [!success] Let's get started
+> Delete the content of `src/App.jsx`,`src/App.css` and `src/index.css` and you'll have an empty project waiting to be coded!

src/App.tsx

@@ -5,6 +5,7 @@ import Education from './pages/Education'
 import Projects from './pages/Projects'
 import ContactMe from './pages/ContactMe'
 import DefaultLayout from './components/LayoutComponents/DefaultLayout'
+import SchoolDashboard from './pages/SchoolDashboard'
 
 function App() {
   if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
@@ -24,6 +25,10 @@ function App() {
           </DefaultLayout>
         }>
         </Route>
+        <Route path='school'>
+          <Route index element={<DefaultLayout children={<SchoolDashboard/>}/>}/>
+          <Route path='react-for-dummies' element="Ciaoo"/>
+        </Route>
       </Routes>
     </Router>
   )

src/components/LayoutComponents/DefaultLayout.tsx

@@ -8,7 +8,7 @@ type Props = {
 export default function DefaultLayout({ children }: Props) {
     return <>
         <Navbar/>
-        <div className='px-10 lg:px-[10rem] 2xl:px-[25rem] md:pt-10 lg:pt-0'>
+        <div className='h-full px-10 lg:px-[10rem] 2xl:px-[25rem] md:pt-10 lg:pt-0'>
             { children }
         </div>
         <Footer/>

src/components/LayoutComponents/MyNavLink.tsx

@@ -0,0 +1,15 @@
+import { NavHashLink } from "react-router-hash-link"
+
+type Props = {
+    to: string,
+    className?: string
+    children?: JSX.Element | JSX.Element[] | string
+}
+
+export default function MyNavLink({ to, children, className }: Props) {
+    return <NavHashLink
+        className={className + " block align-middle py-2 px-3 lg:p-0 text-primary rounded lg:hover:bg-transparent lg:border-0 lg:hover:text-[--accent-color] transition dark:text-white lg:dark:hover:text-red-500 dark:hover:text-white lg:dark:hover:bg-transparent"} 
+        to={to}>
+        { children }
+    </NavHashLink>
+}

src/components/LayoutComponents/Navbar.tsx

@@ -1,5 +1,6 @@
 import SocialCard from "../SocialCard"
 import ThemeSwitcher from "../ThemeSwitcher"
+import MyNavLink from "./MyNavLink"
 
 function Navbar() 
 {
@@ -13,9 +14,9 @@ function Navbar()
     ]
 
     return (
-        <nav className="flex flex-row justify-center w-screen fixed z-10 bg-[--nav-bg] text-primary py-3">
+        <nav className="fixed flex flex-row justify-center w-screen z-10 bg-[--nav-bg] text-primary py-3">
             <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">
+                <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">
                         <span className="text-[--accent-color]">NM</span>'s Portfolio
                     </span>
@@ -47,46 +48,31 @@ function Navbar()
                 <div className="hidden w-full lg:block lg:w-auto" id="navbar-solid-bg">
                     <ul className="flex flex-col font-medium mt-4 rounded-lg lg:space-x-8 rtl:space-x-reverse lg:flex-row lg:mt-0 lg:border-0 lg:bg-transparent dark:bg-gray-800 lg:dark:bg-transparent dark:border-gray-700">
                         <li>
-                            <a
-                                href="#home"
-                                className="block align-middle py-2 px-3 lg:p-0 text-primary rounded hover:bg-gray-100 lg:hover:bg-transparent lg:hover:text-[--accent-color] transition"
-                                aria-current="page"
-                            >
+                            <MyNavLink to="/#home">
                                 Home
-                            </a>
+                            </MyNavLink>
                         </li>
                         <li>
-                            <a
-                                href="#education"
-                                className="block align-middle py-2 px-3 lg:p-0 text-primary rounded hover:bg-gray-100 lg:hover:bg-transparent lg:border-0 lg:hover:text-[--accent-color] transition dark:text-white lg:dark:hover:text-red-500 dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent"
-                            >
+                            <MyNavLink to="/#education">
                                 Education
-                            </a>
+                            </MyNavLink>
                         </li>
                         <li>
-                            <a
-                                href="#projects"
-                                className="block align-middle py-2 px-3 lg:p-0 text-primary rounded hover:bg-gray-100 lg:hover:bg-transparent lg:border-0 lg:hover:text-[--accent-color] transition dark:text-white lg:dark:hover:text-red-500 dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent"
-                            >
+                           <MyNavLink to="/#projects">
                                 Projects
-                            </a>
+                            </MyNavLink>
                         </li>
                         <li>
-                            <a
-                                href="#contact-me"
-                                className="block align-middle py-2 px-3 lg:p-0 text-primary rounded hover:bg-gray-100 lg:hover:bg-transparent lg:border-0 lg:hover:text-[--accent-color] transition dark:text-white lg:dark:hover:text-red-500 dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent"
-                            >
+                            <MyNavLink to="/#contact-me">
                                 Contact me
-                            </a>
+                            </MyNavLink>
                         </li>
-                        <li className="py-2 ps-3 lg:py-0 lg:ps-20 flex flex-row gap-5">
+                        <li className="py-2 px-3 lg:py-0 lg:ps-20 flex flex-row gap-5">
                             {
                                 contact_tabs.map(it => it.item)
                             }
+                            <ThemeSwitcher className="ms-auto"/>
                         </li>
-                        <div className="py-2 px-3 lg:p-0 flex flex-row lg:items-center">
-                            <ThemeSwitcher/>
-                        </div>
                     </ul>
                 </div>
             </div>

src/components/ThemeSwitcher.tsx

@@ -4,8 +4,11 @@ import { useState } from 'react'
 import LightOffIco from './icons/LightOffIco'
 import LightOnIco from './icons/LightOnIco'
 
+type Props = {
+    className?: string
+}
 
-export default function ThemeSwitcher() 
+export default function ThemeSwitcher({ className }: Props) 
 {
     const [ currentTheme, setCurrentTheme ] = useState<string>(localStorage.getItem("theme")!!)
     const [ isDarkModeOn, setIsDarkModeOn ] = useState<boolean>(localStorage.getItem("theme") === "dark")
@@ -22,8 +25,15 @@ export default function ThemeSwitcher()
 
     document.querySelector("html")?.setAttribute("data-theme", currentTheme)
 
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (evt) => {
+        if (evt.matches) {
+            toggleTheme()
+        }
+    });
+
     return <>
         <ReactSwitch 
+            className={className}
             checked={isDarkModeOn} 
             onChange={toggleTheme}
             offColor="#3836b5"

src/pages/ContactMe.tsx

@@ -1,5 +1,4 @@
 import Button from "../components/Button"
-import './ContactMe.module.css'
 
 function ContactMe() 
 {

src/pages/Education.tsx

@@ -39,7 +39,7 @@ function Education()
                     <div className="text-sm text-secondary">Issued on: 29/07/2023</div>
                     <div className="text-2xl">Cambridge Advanced English (CAE)</div>
                     <div className="text-xl accent-clr">British School @ Rimini, IT</div>
-                    <div className="mt-5 flex flex-row justify-between">
+                    <div className="mt-5 flex flex-row justify-between items-center">
                         <div className="font-bold text-2xl">C1 Level</div>
                         <div>Grade C</div>
                     </div>

src/pages/SchoolDashboard.tsx

@@ -0,0 +1,15 @@
+// import TESTDOC from 'public/notes/misc/p1-inizializzazione.md'
+
+export default function SchoolDashboard() {
+
+    // let reader = new FileReader()
+    //reader.readAsText()
+    return <section className="h-full pt-[15em]">
+        <h1 className="text-6xl text-center">Welcome!</h1>
+        <p className="text-primary text-xl text-center pt-5">
+            This part of the site is meant to be a place where my academic notes, 
+            as well as miscellaneous stuff get published... 
+            they have been useful to me, so I hope they could be meaningful to you as well!
+        </p>
+    </section>
+}