consistent-format

AB10110F · Mar 4, 2024 · 1f25182 · 1f25182
1 parent bee57c5
commit 1f25182
Show file tree

Hide file tree

Showing 17 changed files with 683 additions and 726 deletions.
diff --git a/src/app/context/language.tsx b/src/app/context/language.tsx
@@ -1,8 +1,7 @@
 "use client"
 import { createContext, useContext, useState, ReactNode, useEffect } from "react";
 
-interface LanguageContextProviderProps 
-{
+interface LanguageContextProviderProps {
   children: ReactNode;
 }
 
@@ -11,54 +10,49 @@ interface Navigator {
   readonly language: string;
 }
 
-interface LanguageContextValue 
-{
+interface LanguageContextValue {
   language: string;
   setLanguage: (language: string) => void;
 }
 
 const LanguageContext = createContext<LanguageContextValue | undefined>(undefined);
 
 export const LanguageContextProvider = ({ children }: LanguageContextProviderProps) => {
-
-    const detectLanguage = ():string => { //function used to execute useEffect before useState
-        if (typeof navigator !== "undefined") {
-          // browser code
-            if ((navigator as Navigator).language.includes('es')) 
-            {
-                return 'Spanish';
-            } 
-            else 
-            {
-                return 'English';
-            }
-        }
-        else
-        {
-            return '';
-        }
-    };
-
-    const startLanguage = detectLanguage();
-
-    useEffect(() => {
-        setLanguage(startLanguage);
-    }, []);
 
-    const [language, setLanguage] = useState(startLanguage);
-
-    return (
-        <LanguageContext.Provider value={{ language, setLanguage }}>
-        {children}
-        </LanguageContext.Provider>
-    );
+  const detectLanguage = (): string => { //function used to execute useEffect before useState
+    if (typeof navigator !== "undefined") {
+      // browser code
+      if ((navigator as Navigator).language.includes('es')) {
+        return 'Spanish';
+      }
+      else {
+        return 'English';
+      }
+    }
+    else {
+      return '';
+    }
+  };
+
+  const startLanguage = detectLanguage();
+
+  useEffect(() => {
+    setLanguage(startLanguage);
+  }, []);
+
+  const [language, setLanguage] = useState(startLanguage);
+
+  return (
+    <LanguageContext.Provider value={{ language, setLanguage }}>
+      {children}
+    </LanguageContext.Provider>
+  );
 };
 
 export const useLanguageContext = (): LanguageContextValue => {
   const context = useContext(LanguageContext);
-  if (!context) 
-  {
+  if (!context) {
     throw new Error("useLanguageContext must be used within a LanguageContextProvider");
   }
   return context;
-};
+};
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,14 +1,14 @@
 import '@/css/globals.css';
 import Dots from '@/components/Dots';
 import Marquee from '@/components/Marquee';
-import {Metadata} from 'next';
+import { Metadata } from 'next';
 import { LanguageContextProvider } from './context/language'
 import Favicon from './favicon.png';
 
 export const metadata: Metadata = {
   title: 'AB10110F',
   description: 'Portfolio',
-  keywords: ['portfolio','developer','web developer', 'next.js'],
+  keywords: ['portfolio', 'developer', 'web developer', 'next.js'],
   icons: [
     { rel: 'icon', url: Favicon.src, }
   ],
@@ -27,8 +27,8 @@ export default function RootLayout({
     <html lang="en" translate='no'>
       <body>
         <LanguageContextProvider>
-          <Marquee/>
-          <Dots/>
+          <Marquee />
+          <Dots />
           {children}
         </LanguageContextProvider>
       </body>

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 import styles from '../css/page.module.css';
-import  Terminal  from '@/components/Terminal';
+import Terminal from '@/components/Terminal';
 import Model from '@/components/Model';
 import CrtSwitch from '@/components/CrtSwitch';
 import Visualizer from '@/components/Visualizer';
@@ -11,24 +11,24 @@ function Home() {
   return (
     <main className={styles.main}>
       <div className={styles.grid}>
-            <Terminal/>
-            <aside className={styles.aside}>
-                <section className ={styles.languageContainer}>
-                    <article className={styles.canvas}>
-                        <Model/>
-                    </article>
-                    <LanguageSwitch/>
-                </section>
-                <article className={styles.bars}>
-                    <Visualizer/>
-                </article>
-                <article className={styles.crtSwitch}>
-                    <CrtSwitch/>
-                </article>
-            </aside>
+        <Terminal />
+        <aside className={styles.aside}>
+          <section className={styles.languageContainer}>
+            <article className={styles.canvas}>
+              <Model />
+            </article>
+            <LanguageSwitch />
+          </section>
+          <article className={styles.bars}>
+            <Visualizer />
+          </article>
+          <article className={styles.crtSwitch}>
+            <CrtSwitch />
+          </article>
+        </aside>
       </div>
     </main>
   )
 }
 
-export default dynamic (() => Promise.resolve(Home), {ssr: false})
+export default dynamic(() => Promise.resolve(Home), { ssr: false })
diff --git a/src/components/CrtSwitch.tsx b/src/components/CrtSwitch.tsx
@@ -5,28 +5,24 @@ import { useLanguageContext } from '../app/context/language';
 
 const CrtSwtich = () => {
   const [crt, setCrt] = useState(false);
-  const {language} = useLanguageContext();
+  const { language } = useLanguageContext();
 
-  const scanlines:string = crt ? styles.scanlines : styles.hidden;
-  const scanner:string = crt ? styles.scanner : styles.hidden;
+  const scanlines: string = crt ? styles.scanlines : styles.hidden;
+  const scanner: string = crt ? styles.scanner : styles.hidden;
 
-  if(crt==true)
-  {
-     document.body.classList.add("bright");
+  if (crt == true) {
+    document.body.classList.add("bright");
   }
-  else
-  {
+  else {
     document.body.classList.remove("bright")
   }
 
-  let label:string = '';
-  if(language == 'English')
-  {
-      label = 'CRT EFFECT'
+  let label: string = '';
+  if (language == 'English') {
+    label = 'CRT EFFECT'
   }
-  else if(language == 'Spanish')
-  {
-      label = 'EFECTO CRT'
+  else if (language == 'Spanish') {
+    label = 'EFECTO CRT'
   }
 
   return (
@@ -38,7 +34,7 @@ const CrtSwtich = () => {
         id='crtSwitch'
         type="checkbox"
         checked={crt}
-        onChange={()=>setCrt(!crt)}
+        onChange={() => setCrt(!crt)}
       />
       <label style={vt323.style} htmlFor="crtSwitch">{label}</label>
     </section>

diff --git a/src/components/Dots.tsx b/src/components/Dots.tsx
@@ -45,10 +45,8 @@ const Dots = () => {
 
       const createDots = () => {
         dots = [];
-        for (let i = 0; i < p.width; i += spacing)
-        {
-          for (let j = 0; j < p.height; j += spacing)
-          {
+        for (let i = 0; i < p.width; i += spacing) {
+          for (let j = 0; j < p.height; j += spacing) {
             let dot = new Dot(i + spacing / 2, j + spacing / 2, dotSize);
             dots.push(dot);
           }
@@ -80,12 +78,10 @@ const Dots = () => {
           Math.pow(mouseX - this.x, 2) + Math.pow(mouseY - this.y, 2)
         );
 
-        if (mouseIsMoving && distance < areaAffected)
-        {
+        if (mouseIsMoving && distance < areaAffected) {
           this.transparency = 255;
         }
-        else
-        {
+        else {
           this.transparency = Math.max(minTvalue, this.transparency - 10);
         }
       }

diff --git a/src/components/LanguageSwitch.tsx b/src/components/LanguageSwitch.tsx
@@ -4,54 +4,52 @@ import { useLanguageContext } from '../app/context/language';
 import dynamic from "next/dynamic";
 
 const LanguageSwitch = () => {
-    const {language, setLanguage} = useLanguageContext();
+  const { language, setLanguage } = useLanguageContext();
 
-    let l1:string = '';
-    let l2:string = '';
+  let l1: string = '';
+  let l2: string = '';
 
-    if(language == 'English')
-    {
-        l1 = 'ENGLISH'
-        l2 = 'SPANISH'
-    }
-    else if(language == 'Spanish')
-    {
-        l1 = 'INGLÉS'
-        l2 = 'ESPAÑOL'
-    }
+  if (language == 'English') {
+    l1 = 'ENGLISH'
+    l2 = 'SPANISH'
+  }
+  else if (language == 'Spanish') {
+    l1 = 'INGLÉS'
+    l2 = 'ESPAÑOL'
+  }
 
-    const changeState = (language:string) => {
-        setLanguage(language);
-    };
+  const changeState = (language: string) => {
+    setLanguage(language);
+  };
 
-    return (
-        <section className={styles.languageSwitchContainer}>
-            <section className={styles.section}>
-                <input
-                    className={styles.checkbox}
-                    type="radio"
-                    name='language'
-                    id="english"
-                    checked={language=='English'}
-                    onChange={() => changeState('English')}
-                    />
-                <label style={vt323.style} htmlFor="english" >{l1}</label>
-            </section>
-            <section className={styles.section}>
-                <input
-                    className={styles.checkbox}
-                    type="radio"
-                    id='spanish'
-                    name='language'
-                    checked={language=='Spanish'}
-                    onChange={() => changeState('Spanish')}
-                />
-                <label style={vt323.style} htmlFor="spanish" >{l2}</label>
-            </section>
-        </section>
-    )
+  return (
+    <section className={styles.languageSwitchContainer}>
+      <section className={styles.section}>
+        <input
+          className={styles.checkbox}
+          type="radio"
+          name='language'
+          id="english"
+          checked={language == 'English'}
+          onChange={() => changeState('English')}
+        />
+        <label style={vt323.style} htmlFor="english" >{l1}</label>
+      </section>
+      <section className={styles.section}>
+        <input
+          className={styles.checkbox}
+          type="radio"
+          id='spanish'
+          name='language'
+          checked={language == 'Spanish'}
+          onChange={() => changeState('Spanish')}
+        />
+        <label style={vt323.style} htmlFor="spanish" >{l2}</label>
+      </section>
+    </section>
+  )
 };
 
-export default dynamic (() => Promise.resolve(LanguageSwitch), {ssr: false})
+export default dynamic(() => Promise.resolve(LanguageSwitch), { ssr: false })
 
 /* export default LanguageSwitch; */
diff --git a/src/components/Marquee.tsx b/src/components/Marquee.tsx
@@ -6,25 +6,23 @@ import dynamic from "next/dynamic";
 
 const Marquee = () => {
 
-  const {language} = useLanguageContext();
+  const { language } = useLanguageContext();
 
-  let title:string = '';
-  if(language == 'English')
-  {
-      title = 'DUST AND ECHOES'
+  let title: string = '';
+  if (language == 'English') {
+    title = 'DUST AND ECHOES'
   }
-  else if(language == 'Spanish')
-  {
-      title = 'POLVO Y ECOS'
+  else if (language == 'Spanish') {
+    title = 'POLVO Y ECOS'
   }
 
-    return (
-        <>
-          <header className={styles.header}>
-            <h1 style={dotFont.style}>{title}</h1>
-          </header>
-        </>
-    );
+  return (
+    <>
+      <header className={styles.header}>
+        <h1 style={dotFont.style}>{title}</h1>
+      </header>
+    </>
+  );
 };
 
-export default dynamic (() => Promise.resolve(Marquee), {ssr: false})
+export default dynamic(() => Promise.resolve(Marquee), { ssr: false })