Add CV and fix dark mod detection

public/index.html

@@ -5,6 +5,7 @@
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
+    <meta name="darkreader" content="dark" />
     <meta
       name="description"
       content="Portfolio de Félix MARQUET"

src/App.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { FaSun, FaMoon} from "react-icons/fa";
 import "./index.css";
 import Card from "./components/Card.tsx";
@@ -6,32 +6,44 @@ import About from "./components/About.tsx";
 import Skills from "./components/Skills.tsx";
 import Project from "./components/Project.tsx";
 import Footer from "./components/Footer.tsx";
+import CV from "./components/CV.tsx";
 import data from "./assets/DATA.ts";
 
 function App() {
-  const [theme, setTheme] = useState("light");
+    const [theme, setTheme] = useState("light");
 
-  const toggleTheme = () => {
-      setTheme(theme === "light" ? "dark" : "light")
-      document.documentElement.classList.toggle("dark");
-  }
+    useEffect(() => {
+        // Detect if the user has their system in dark mode
+        const userPrefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
 
-  return (
-      <div className="min-h-screen py-10 px-3 sm:px-5 bg-gray-100 dark:bg-gray-900">
-          <div data-aos="face-down" data-aos-duration="800">
-              <Card name={data.name} title={data.title} social={data.social} />
-          </div>
-          <div data-aos="fade-up" data-aos-duration="800" data-aos-delay="400">
-              <About title={data.about.title} description={data.about.description} />
-              <Skills skills={data.skills} />
-              <Project projects={data.projects} />
-              <Footer />
-          </div>
-          <button onClick={toggleTheme} className="fixed bottom-5 right-5 p-2 rounded-full bg-gray-100 dark:bg-gray-900 shadow-md">
+        if (userPrefersDark) {
+            setTheme("dark");
+            document.documentElement.classList.add("dark");
+        }
+    }, []);
+
+    const toggleTheme = () => {
+        setTheme(theme === "light" ? "dark" : "light");
+        document.documentElement.classList.toggle("dark");
+    }
+
+    return (
+        <div className="min-h-screen py-10 px-3 sm:px-5 bg-gray-100 dark:bg-gray-900">
+            <div data-aos="face-down" data-aos-duration="800">
+                <Card name={data.name} title={data.title} social={data.social} />
+            </div>
+            <div data-aos="fade-up" data-aos-duration="800" data-aos-delay="400">
+                <About title={data.about.title} description={data.about.description} />
+                <Skills skills={data.skills} />
+                <Project projects={data.projects} />
+                <CV />
+                <Footer />
+            </div>
+            <button onClick={toggleTheme} className="fixed bottom-5 right-5 p-2 rounded-full bg-gray-100 dark:bg-gray-900 shadow-md">
                 {theme === "light" ? <FaMoon size={20} className="text-gray-800" /> : <FaSun size={20} className="text-gray-200" />}
-          </button>
-      </div>
-  );
+            </button>
+        </div>
+    );
 }
 
-export default App;
+export default App;

src/assets/DATA.ts

@@ -9,7 +9,7 @@ const Felix = {
     },
     about: {
         title: "A propos de moi",
-        description: "Je suis étudiant en 2e année à l'ISEN Nantes. Je suis passionné par l'informatique. J'ai appris à coder en autodidacte et je suis actuellement en train d'apprendre le C++ et le PHP. Je suis également passionné par l'électronique et le hardware. Je possède un homelab composé de 2 serveur, un DELL T320 et un DELL R420 les 2 sous proxmox."
+        description: "Je suis étudiant en 2e année à l'ISEN Nantes. Je suis passionné par l'informatique. J'ai appris à coder en autodidacte et je suis actuellement en train d'apprendre le C++ et le PHP. Je suis également passionné par l'électronique et le hardware. Je possède un homelab composé de 2 serveur, un DELL T320 et un DELL T330 les 2 sous proxmox."
     },
     skills: [
         {

src/components/CV.tsx

@@ -0,0 +1,13 @@
+// @ts-ignore
+import React from 'react';
+
+function CV(){
+    return (
+        <div className="max-w-4xl mx-auto mt-16 flex justify-center items-center flex-col gap-1">
+            <p className="text-2xl md:text-4xl font-bold text-center text-gray-800 dark:text-gray-200">Mon CV</p>
+            <iframe src="/CV%20Félix%20MARQUET.pdf" width="70%" height="940px"></iframe>
+        </div>
+    );
+}
+
+export default CV;