fix: add text that I'm a student at University

components/Header/SwitchTheme.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { useTheme } from 'next-themes'
 
 export const SwitchTheme: React.FC = () => {
@@ -20,25 +20,35 @@ export const SwitchTheme: React.FC = () => {
   return (
     <>
       <div
-        className='toggle-button'
+        className='flex items-center'
         data-cy='switch-theme-click'
         onClick={handleClick}
       >
-        <div className='toggle-theme-button'>
+        <div className='toggle-theme-button relative cursor-pointer bg-transparent inline-block'>
           <div className='toggle-track'>
-            <div data-cy='switch-theme-dark' className='toggle-track-check'>
+            <div
-              <span className='toggle_Dark'>🌜</span>
+              data-cy='switch-theme-dark'
+              className='toggle-track-check absolute'
+            >
+              <span className='toggle_Dark flex justify-center items-center relative'>
+                🌜
+              </span>
             </div>
-            <div data-cy='switch-theme-light' className='toggle-track-x'>
+            <div
-              <span className='toggle_Light'>🌞</span>
+              data-cy='switch-theme-light'
+              className='toggle-track-x absolute'
+            >
+              <span className='toggle_Light flex justify-center items-center relative'>
+                🌞
+              </span>
             </div>
           </div>
-          <div className='toggle-thumb' />
+          <div className='toggle-thumb absolute' />
           <input
             data-cy='switch-theme-input'
             type='checkbox'
             aria-label='Dark mode toggle'
-            className='toggle-screenreader-only'
+            className='toggle-screenreader-only absolute overflow-hidden'
             defaultChecked
           />
         </div>
@@ -46,16 +56,8 @@ export const SwitchTheme: React.FC = () => {
 
       <style jsx>
         {`
-          .toggle-button {
-            display: flex;
-            align-items: center;
-          }
           .toggle-theme-button {
             touch-action: pan-x;
-            display: inline-block;
-            position: relative;
-            cursor: pointer;
-            background-color: transparent;
             border: 0;
             padding: 0;
             user-select: none;
@@ -70,7 +72,6 @@ export const SwitchTheme: React.FC = () => {
             color: #fff;
           }
           .toggle-track-check {
-            position: absolute;
             width: 14px;
             height: 10px;
             top: 0;
@@ -83,7 +84,6 @@ export const SwitchTheme: React.FC = () => {
             transition: opacity 0.25s ease;
           }
           .toggle-track-x {
-            position: absolute;
             width: 10px;
             height: 10px;
             top: 0;
@@ -96,15 +96,10 @@ export const SwitchTheme: React.FC = () => {
           }
           .toggle_Dark,
           .toggle_Light {
-            align-items: center;
-            display: flex;
             height: 10px;
-            justify-content: center;
-            position: relative;
             width: 10px;
           }
           .toggle-thumb {
-            position: absolute;
             left: ${theme === 'dark' ? '27px' : '0px'};
             width: 22px;
             height: 22px;
@@ -121,9 +116,7 @@ export const SwitchTheme: React.FC = () => {
             clip: rect(0 0 0 0);
             height: 1px;
             margin: -1px;
-            overflow: hidden;
             padding: 0;
-            position: absolute;
             width: 1px;
           }
         `}

locales/en/home.json

@@ -4,7 +4,7 @@
     "description": "Developer Full Stack Junior • Passionate about High-Tech",
     "birthDate": "Birth date",
     "nationality": "Nationality",
-    "descriptionBottom": "I am self-taught in Computer Science by following online trainings. <0/> <0/> I put into practice everything I learn and make many projects."
+    "descriptionBottom": "I am self-taught in Computer Science by following online trainings and I am also a student at the university following the French training \"BUT Informatique\" (first year). <0/> <0/> I put into practice everything I learn and make many projects."
   },
   "interests": {
     "title": "Interests",

locales/fr/home.json

@@ -4,7 +4,7 @@
     "description": "Développeur Full Stack Junior • Passionné de High-Tech",
     "birthDate": "Date de naissance",
     "nationality": "Nationalité",
-    "descriptionBottom": "Je me forme en autodidacte dans l'informatique en suivant des formations en ligne. <0/> <0/> Je mets en pratique tout ce que j'apprends et réalise de nombreux projets."
+    "descriptionBottom": "Je me forme en autodidacte dans l'informatique en suivant des formations en ligne et je suis aussi un étudiant à l'université suivant la formation \"BUT Informatique\" (première année). <0/> <0/> Je mets en pratique tout ce que j'apprends et réalise de nombreux projets."
   },
   "interests": {
     "title": "Intérêts",

pages/_app.tsx

@@ -13,7 +13,7 @@ const universalCookie = new UniversalCookie()
 /** how long in seconds, until the cookie expires (10 years) */
 const COOKIE_MAX_AGE = 10 * 365.25 * 24 * 60 * 60
 
-const MyApp = ({ Component, pageProps }: AppProps): JSX.Element => {
+const Application = ({ Component, pageProps }: AppProps): JSX.Element => {
   const { lang } = useTranslation()
 
   useEffect(() => {
@@ -30,4 +30,4 @@ const MyApp = ({ Component, pageProps }: AppProps): JSX.Element => {
   )
 }
 
-export default MyApp
+export default Application

pages/_document.tsx

@@ -1,31 +1,15 @@
-import Document, {
+import { Html, Head, Main, NextScript } from 'next/document'
-  Html,
-  Head,
-  Main,
-  NextScript,
-  DocumentContext,
-  DocumentInitialProps
-} from 'next/document'
 
-class MyDocument extends Document {
+const Document: React.FC = () => {
-  static async getInitialProps(
+  return (
-    context: DocumentContext
+    <Html>
-  ): Promise<DocumentInitialProps> {
+      <Head />
-    const initialProps = await Document.getInitialProps(context)
+      <body className='bg-white dark:bg-black text-black dark:text-white font-headline'>
-    return initialProps
+        <Main />
-  }
+        <NextScript />
-
+      </body>
-  render(): JSX.Element {
+    </Html>
-    return (
+  )
-      <Html>
-        <Head />
-        <body className='bg-white dark:bg-black text-black dark:text-white font-headline'>
-          <Main />
-          <NextScript />
-        </body>
-      </Html>
-    )
-  }
 }
 
-export default MyDocument
+export default Document