visualizer added

AB10110F · Dec 13, 2023 · cd732f6 · cd732f6
1 parent 7503ce1
commit cd732f6
Show file tree

Hide file tree

Showing 13 changed files with 258 additions and 201 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,5 +1,6 @@
 import '@/css/globals.css';
 import Dots from '@/components/Dots';
+import Marquee from '@/components/Marquee';
 import {Metadata} from 'next';
 import { LanguageContextProvider } from './context/language'
 import Favicon from './favicon.png';
@@ -26,10 +27,11 @@ export default function RootLayout({
     <html lang="en" translate='no'>
       <body>
         <LanguageContextProvider>
+          <Marquee/>
           <Dots/>
           {children}
         </LanguageContextProvider>
       </body>
     </html>
   )
-}
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,44 +1,15 @@
 "use client";
-import React, {useState} from 'react';
 import styles from '../css/page.module.css';
 import  Terminal  from '@/components/Terminal';
 import Model from '@/components/Model';
 import CrtSwitch from '@/components/CrtSwitch';
-import { dotFont } from '../fonts/fonts'
+import Visualizer from '@/components/Visualizer';
 import LanguageSwitch from '@/components/LanguageSwitch';
-import { useLanguageContext } from './context/language';
-import Image from 'next/image';
 import dynamic from "next/dynamic";
 
 function Home() {
-
-  const [currentCrt, setCrt] = useState(false)
-  const {language, setLanguage} = useLanguageContext();
-  const scanlines:string = currentCrt ? styles.scanlines : styles.hidden;
-  const scanner:string = currentCrt ? styles.scanner : styles.hidden;
-  const text:string = styles.main + " " + (currentCrt ? styles.bright: "");
-
-  let title:string
-  if(language == 'English')
-  {
-      title = 'DUST AND ECHOES'
-  }
-  else if(language == 'Spanish')
-  {
-      title = 'POLVO Y ECOS'
-  }
-  else
-  {
-      title = ''
-  }
-
   return (
-    <main className={text}>
-      <span className={scanlines}></span>
-      <span className={scanner}></span>
-      <header className={styles.header}>
-            <h1 style={dotFont.style}>{title}</h1>
-      </header>
+    <main className={styles.main}>
       <div className={styles.grid}>
             <Terminal/>
             <aside className={styles.aside}>
@@ -48,9 +19,11 @@ function Home() {
                     </article>
                     <LanguageSwitch/>
                 </section>
-                <article className={styles.bars}></article>
+                <article className={styles.bars}>
+                    <Visualizer/>
+                </article>
                 <article className={styles.crtSwitch}>
-                    <CrtSwitch changeState={(currentCrt) => setCrt(currentCrt)} />
+                    <CrtSwitch/>
                 </article>
             </aside>
       </div>

diff --git a/src/components/CrtSwitch.tsx b/src/components/CrtSwitch.tsx
@@ -3,22 +3,23 @@ import styles from '../css/switch.module.css';
 import { vt323 } from '../fonts/fonts';
 import { useLanguageContext } from '../app/context/language';
 
-interface CrtProps {
-  changeState: (newValue: boolean) => void;
-}
-
-const CrtSwtich: React.FC<CrtProps> = ({ changeState }) => {
+const CrtSwtich = () => {
   const [crt, setCrt] = useState(false);
-  const {language, setLanguage} = useLanguageContext();
+  const {language} = useLanguageContext();
 
-  const handleChange = () => {
-    const newValue:boolean = !crt;
-    setCrt(newValue);
-    changeState(newValue);
-  };
+  const scanlines:string = crt ? styles.scanlines : styles.hidden;
+  const scanner:string = crt ? styles.scanner : styles.hidden;
 
-  let label:string;
+  if(crt==true)
+  {
+     document.body.classList.add("bright");
+  }
+  else
+  {
+    document.body.classList.remove("bright")
+  }
 
+  let label:string = '';
   if(language == 'English')
   {
       label = 'CRT EFFECT'
@@ -27,23 +28,21 @@ const CrtSwtich: React.FC<CrtProps> = ({ changeState }) => {
   {
       label = 'EFECTO CRT'
   }
-  else
-  {
-      label = ''
-  }
 
   return (
     <section className={styles.container}>
+      <span className={scanlines}></span>
+      <span className={scanner}></span>
       <input
         className={styles.checkbox}
         id='crtSwitch'
         type="checkbox"
         checked={crt}
-        onChange={handleChange}
+        onChange={()=>setCrt(!crt)}
       />
       <label style={vt323.style} htmlFor="crtSwitch">{label}</label>
     </section>
   );
 };
 
-export default CrtSwtich;
+export default CrtSwtich;
diff --git a/src/components/LanguageSwitch.tsx b/src/components/LanguageSwitch.tsx
@@ -6,8 +6,8 @@ import dynamic from "next/dynamic";
 const LanguageSwitch = () => {
     const {language, setLanguage} = useLanguageContext();
 
-    let l1:string
-    let l2:string
+    let l1:string = '';
+    let l2:string = '';
 
     if(language == 'English')
     {
@@ -19,16 +19,11 @@ const LanguageSwitch = () => {
         l1 = 'INGLÉS'
         l2 = 'ESPAÑOL'
     }
-    else
-    {
-        l1 = ''
-        l2 = ''
-    }
 
     const changeState = (language:string) => {
         setLanguage(language);
     };
-    
+
     return (
         <section className={styles.languageSwitchContainer}>
             <section className={styles.section}>
@@ -59,4 +54,4 @@ const LanguageSwitch = () => {
 
 export default dynamic (() => Promise.resolve(LanguageSwitch), {ssr: false})
 
-/* export default LanguageSwitch; */
+/* export default LanguageSwitch; */
diff --git a/src/components/Marquee.tsx b/src/components/Marquee.tsx
@@ -0,0 +1,30 @@
+'use client';
+import { useLanguageContext } from '../app/context/language';
+import styles from '../css/marquee.module.css';
+import { dotFont } from '../fonts/fonts';
+import dynamic from "next/dynamic";
+
+const Marquee = () => {
+
+  const {language} = useLanguageContext();
+
+  let title:string = '';
+  if(language == 'English')
+  {
+      title = 'DUST AND ECHOES'
+  }
+  else if(language == 'Spanish')
+  {
+      title = 'POLVO Y ECOS'
+  }
+
+    return (
+        <>
+          <header className={styles.header}>
+            <h1 style={dotFont.style}>{title}</h1>
+          </header>
+        </>
+    );
+};
+
+export default dynamic (() => Promise.resolve(Marquee), {ssr: false})
diff --git a/src/components/Terminal.tsx b/src/components/Terminal.tsx
@@ -6,18 +6,18 @@ import { vt323 } from '../fonts/fonts'
 
 const Terminal = () => {
 
-    const {language, setLanguage} = useLanguageContext();
+    const {language} = useLanguageContext();
 
-    let banner:string[];
-    let help:string[];
-    let skills:string[];
-    let projects:string[];
-    let info:string[];
-    let smallBanner:string[];
-    let smallHelp:string[];
-    let smallSkills:string[];
-    let smallProjects:string[];
-    let smallInfo:string[];
+    let banner:string[] = [''];
+    let help:string[] = [''];
+    let skills:string[] = [''];
+    let projects:string[] = [''];
+    let info:string[] = [''];
+    let smallBanner:string[] = [''];
+    let smallHelp:string[] = [''];
+    let smallSkills:string[] = [''];
+    let smallProjects:string[] = [''];
+    let smallInfo:string[] = [''];
 
     if(language == 'English')
     {
@@ -197,19 +197,6 @@ const Terminal = () => {
             "La cuadrícula de puntos fue hecha con p5.js\n\n",
         ]
     }
-    else
-    {
-        banner = [''];
-        help = [''];
-        skills = [''];
-        projects = [''];
-        info = [''];
-        smallBanner = [''];
-        smallHelp= [''];
-        smallSkills = [''];
-        smallProjects = [''];
-        smallInfo = [''];
-    }
 
     skills = [
         "CSS     [████████████▁▁▁▁] 75%         C++    [████████████▁▁▁▁] 75%",

diff --git a/src/components/Visualizer.tsx b/src/components/Visualizer.tsx
@@ -0,0 +1,33 @@
+import styles from '../css/visualizer.module.css';
+
+const Visualizer = () => {
+    return (
+        <>
+            <article className={styles.strokeContainer}><span style={{ "--stroke":23 } as React.CSSProperties}></span></article>
+            <article className={styles.strokeContainer}><span style={{ "--stroke":21 } as React.CSSProperties}></span></article>
+            <article className={styles.strokeContainer}><span style={{ "--stroke":19 } as React.CSSProperties}></span></article>
+            <article className={styles.strokeContainer}><span style={{ "--stroke":17 } as React.CSSProperties}></span></article>
+            <article className={styles.strokeContainer}><span style={{ "--stroke":15 } as React.CSSProperties}></span></article>
+            <article className={styles.strokeContainer}><span style={{ "--stroke":13 } as React.CSSProperties}></span></article>
+            <article className={styles.strokeContainer}><span style={{ "--stroke":11 } as React.CSSProperties}></span></article>
+            <article className={styles.strokeContainer}><span style={{ "--stroke":9 } as React.CSSProperties}></span></article>
+            <article className={styles.strokeContainer}><span style={{ "--stroke":7 } as React.CSSProperties}></span></article>
+            <article className={styles.strokeContainer}><span style={{ "--stroke":5 } as React.CSSProperties}></span></article>
+            <article className={styles.strokeContainer}><span style={{ "--stroke":3 } as React.CSSProperties}></span></article>
+            <article className={styles.strokeContainer}><span style={{ "--stroke":1 } as React.CSSProperties}></span></article>
+            <article className={styles.strokeContainer}><span style={{ "--stroke":3 } as React.CSSProperties}></span></article>
+            <article className={styles.strokeContainer}><span style={{ "--stroke":5 } as React.CSSProperties}></span></article>
+            <article className={styles.strokeContainer}><span style={{ "--stroke":7 } as React.CSSProperties}></span></article>
+            <article className={styles.strokeContainer}><span style={{ "--stroke":9 } as React.CSSProperties}></span></article>
+            <article className={styles.strokeContainer}><span style={{ "--stroke":11 } as React.CSSProperties}></span></article>
+            <article className={styles.strokeContainer}><span style={{ "--stroke":13 } as React.CSSProperties}></span></article>
+            <article className={styles.strokeContainer}><span style={{ "--stroke":15 } as React.CSSProperties}></span></article>
+            <article className={styles.strokeContainer}><span style={{ "--stroke":17 } as React.CSSProperties}></span></article>
+            <article className={styles.strokeContainer}><span style={{ "--stroke":19 } as React.CSSProperties}></span></article>
+            <article className={styles.strokeContainer}><span style={{ "--stroke":21 } as React.CSSProperties}></span></article>
+            <article className={styles.strokeContainer}><span style={{ "--stroke":23 } as React.CSSProperties}></span></article>
+        </>
+    );
+};
+
+export default Visualizer;
diff --git a/src/css/globals.css b/src/css/globals.css
@@ -13,10 +13,18 @@ html{ background-color: black; }
 html,
 body {
   max-width: 100vw;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
   overflow-x: hidden;
+  color: white;
 }
 
 a {
   color: inherit;
   text-decoration: none;
 }
+
+.bright{ text-shadow: 1px 1px 2px white, 0 0 1em white, 0 0 0.8em white; }
+.bright input { text-shadow: 1px 1px 2px white, 0 0 1em white, 0 0 0.8em white; }
diff --git a/src/css/marquee.module.css b/src/css/marquee.module.css
@@ -0,0 +1,51 @@
+.header
+{
+  border: 1px solid rgb(255,255,255);
+  overflow-x: hidden;
+  display: flex;
+  align-items: center;
+  margin: 30px 30px 0 30px;
+  white-space: nowrap;
+}
+
+.header>h1
+{
+  font-size: 10vh;
+  animation: slide 10s infinite linear;
+}
+
+@keyframes slide
+{
+  0%{
+    transform: translateX(100vw);
+  }
+
+  100%{
+    transform: translateX(-100%);
+  }
+}
+
+@media only screen and (max-width: 1250px) and (min-width: 760px)
+{
+  .header
+  {
+    height: 12vh;
+  }
+  .header>h1
+  {
+    font-size: 7vh;
+  }
+}
+
+@media only screen and (max-width: 760px)
+{
+  .header
+  {
+    height: 9vh;
+  }
+  .header>h1
+  {
+    font-size: 5vh;
+    text-align: center;
+  }
+}