From 1f2518254d79e049c68a4e2470b90526abd77b75 Mon Sep 17 00:00:00 2001 From: "A. Bryant" Date: Mon, 4 Mar 2024 10:52:30 -0600 Subject: [PATCH] consistent-format --- src/app/context/language.tsx | 70 ++-- src/app/layout.tsx | 8 +- src/app/page.tsx | 34 +- src/components/CrtSwitch.tsx | 28 +- src/components/Dots.tsx | 12 +- src/components/LanguageSwitch.tsx | 84 +++-- src/components/Marquee.tsx | 30 +- src/components/Terminal.tsx | 571 +++++++++++++++--------------- src/components/Visualizer.tsx | 54 +-- src/css/dots.module.css | 11 +- src/css/globals.css | 24 +- src/css/marquee.module.css | 35 +- src/css/page.module.css | 91 +++-- src/css/switch.module.css | 160 ++++----- src/css/terminal.module.css | 137 ++++--- src/css/visualizer.module.css | 52 ++- src/fonts/fonts.ts | 8 +- 17 files changed, 683 insertions(+), 726 deletions(-) diff --git a/src/app/context/language.tsx b/src/app/context/language.tsx index 1ad8ec9..55781e7 100644 --- 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,8 +10,7 @@ interface Navigator { readonly language: string; } -interface LanguageContextValue -{ +interface LanguageContextValue { language: string; setLanguage: (language: string) => void; } @@ -20,45 +18,41 @@ interface LanguageContextValue const LanguageContext = createContext(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 ( - - {children} - - ); + 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 ( + + {children} + + ); }; export const useLanguageContext = (): LanguageContextValue => { const context = useContext(LanguageContext); - if (!context) - { + if (!context) { throw new Error("useLanguageContext must be used within a LanguageContextProvider"); } return context; -}; \ No newline at end of file +}; diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 52bc3a7..eb5ba3a 100644 --- 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({ - - + + {children} diff --git a/src/app/page.tsx b/src/app/page.tsx index 219a28c..a96164b 100644 --- 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 (
- - + +
) } -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 index 347a537..2f1cea9 100644 --- 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)} /> diff --git a/src/components/Dots.tsx b/src/components/Dots.tsx index 290e9ad..6f5dee8 100644 --- 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 index 4bfc2a2..d99b047 100644 --- 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 ( -
-
- changeState('English')} - /> - -
-
- changeState('Spanish')} - /> - -
-
- ) + return ( +
+
+ changeState('English')} + /> + +
+
+ changeState('Spanish')} + /> + +
+
+ ) }; -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 index 3b4154b..b8757c7 100644 --- 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 ( - <> -
-

{title}

-
- - ); + return ( + <> +
+

{title}

+
+ + ); }; -export default dynamic (() => Promise.resolve(Marquee), {ssr: false}) +export default dynamic(() => Promise.resolve(Marquee), { ssr: false }) diff --git a/src/components/Terminal.tsx b/src/components/Terminal.tsx index 9a3c74f..6919d72 100644 --- a/src/components/Terminal.tsx +++ b/src/components/Terminal.tsx @@ -6,320 +6,313 @@ import { vt323 } from '../fonts/fonts' const Terminal = () => { - const {language} = 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') - { - banner = [ - " ,db ", - " jSDl, ", - " DEMP\". ", - " 'YLObP Name: Bryant Hernández ", - " `YN` Mail: bryant.0@outlook.com ", - " Y\" ", - " Y; You can also check my social media ", - " ,Lb .,,. ,,ss just type one of the following options: ", - " .,dOVEl SDEMILO' ", - " dLOVENUSDEMILOP ", - " ;OP*NUSDP**LOVEb, =^..^= github codepen ", - " dEl \"DE; YENUP ", - " YUS :l` YS' (°‿°) reddit ,(u°)> twitter ", - " :*' .,DE. ", - " USD`YI ", - " dDEY O: ║▌║█║▌│║▌║▌█║▌║█║▌│║▌║▌█║▌║ ", - " .EMIb ,E. ", - " ,dILO* NUY ", - " ,ILOVb ,SD' Type \"help\" to view the available commands\n", - "", - ] - - help = [ - "This is the list of commands you can use: \n", - "banner Displays the initial greeting", - "help As you can see, it shows a list of commands", - "skills Displays the technologies I'm able to use", - "projects List of my projects", - "info Shows all the information of the project", - "github Opens github in a new tab", - "codepen Opens codepen in a new tab", - "reddit Opens reddit in a new tab", - "twitter Opens twitter in a new tab", - "cls Clears the content of the terminal\n\n", - ] - - projects = [ - " _ __ _ __ ___ _________ ,___ ________,", - "( / )( / ) / ()( /( / / /( / ( ", - " /--' /--< / / / /-- / / `. ", - "/ / \\_(___/ _/_ (/____/(___/ _/ (___)", - " // ", - " (/ \n\n", - "Still working on them, most of them are private, sorry :(\n\n", - ] + if (language == 'English') { + banner = [ + " ,db ", + " jSDl, ", + " DEMP\". ", + " 'YLObP Name: Bryant Hernández ", + " `YN` Mail: bryant.0@outlook.com ", + " Y\" ", + " Y; You can also check my social media ", + " ,Lb .,,. ,,ss just type one of the following options: ", + " .,dOVEl SDEMILO' ", + " dLOVENUSDEMILOP ", + " ;OP*NUSDP**LOVEb, =^..^= github codepen ", + " dEl \"DE; YENUP ", + " YUS :l` YS' (°‿°) reddit ,(u°)> twitter ", + " :*' .,DE. ", + " USD`YI ", + " dDEY O: ║▌║█║▌│║▌║▌█║▌║█║▌│║▌║▌█║▌║ ", + " .EMIb ,E. ", + " ,dILO* NUY ", + " ,ILOVb ,SD' Type \"help\" to view the available commands\n", + "", + ] - info = [ - "888b | 888~~ Y88b / ~~~888~~~ This project was build with Next.js 13", - "|Y88b | 888___ Y88b / 888 3D model was handled with three.js", - "| Y88b | 888 Y88b/ 888 Dots grid background was made with p5.js", - "| Y88b | 888 /Y88b 888 ", - "| Y88b| 888 / Y88b 888 ", - "| Y888 888___ / Y88b 888 \n\n", - ] + help = [ + "This is the list of commands you can use: \n", + "banner Displays the initial greeting", + "help As you can see, it shows a list of commands", + "skills Displays the technologies I'm able to use", + "projects List of my projects", + "info Shows all the information of the project", + "github Opens github in a new tab", + "codepen Opens codepen in a new tab", + "reddit Opens reddit in a new tab", + "twitter Opens twitter in a new tab", + "cls Clears the content of the terminal\n\n", + ] - smallBanner = [ - "Name: Bryant Hernández", - "Mail: bryant.0@outlook.com", - "", - "Type \"help\" to view the available commands\n\n" - ] + projects = [ + " _ __ _ __ ___ _________ ,___ ________,", + "( / )( / ) / ()( /( / / /( / ( ", + " /--' /--< / / / /-- / / `. ", + "/ / \\_(___/ _/_ (/____/(___/ _/ (___)", + " // ", + " (/ \n\n", + "Still working on them, most of them are private, sorry :(\n\n", + ] - smallHelp= [ - "This is the list of commands you can use: \n", - "banner: Displays the initial greeting\n", - "help: As you can see, it shows a list of commands\n", - "skills: Displays the technologies I'm able to use\n", - "projects: List of my projects\n", - "info: Shows all the information of the project\n", - "github: Opens github in a new tab\n", - "codepen: Opens codepen in a new tab\n", - "reddit: Opens reddit in a new tab\n", - "twitter: Opens twitter in a new tab\n", - "cls: Clears the content of the terminal\n\n", - ] + info = [ + "888b | 888~~ Y88b / ~~~888~~~ This project was build with Next.js 13", + "|Y88b | 888___ Y88b / 888 3D model was handled with three.js", + "| Y88b | 888 Y88b/ 888 Dots grid background was made with p5.js", + "| Y88b | 888 /Y88b 888 ", + "| Y88b| 888 / Y88b 888 ", + "| Y888 888___ / Y88b 888 \n\n", + ] - smallProjects = [ - "Still working on them, most of them are private, sorry :(\n\n" - ] + smallBanner = [ + "Name: Bryant Hernández", + "Mail: bryant.0@outlook.com", + "", + "Type \"help\" to view the available commands\n\n" + ] - smallInfo = [ - "This project was build with Next.js 13", - "3D model was handled with three.js", - "Dots grid background was made with p5.js\n\n", - ] - } - else if(language == 'Spanish') - { - banner = [ - " ,db ", - " jSDl, ", - " DEMP\". ", - " 'YLObP Nombre: Bryant Hernández ", - " `YN` Correo: bryant.0@outlook.com ", - " Y\" ", - " Y; También puedes encontrarme en mis redes ", - " ,Lb .,,. ,,ss tecleando unas de las siguientes opciones: ", - " .,dOVEl SDEMILO' ", - " dLOVENUSDEMILOP ", - " ;OP*NUSDP**LOVEb, =^..^= github codepen ", - " dEl \"DE; YENUP ", - " YUS :l` YS' (°‿°) reddit ,(u°)> twitter ", - " :*' .,DE. ", - " USD`YI ", - " dDEY O: ║▌║█║▌│║▌║▌█║▌║█║▌│║▌║▌█║▌║ ", - " .EMIb ,E. ", - " ,dILO* NUY ", - " ,ILOVb ,SD' Teclea \"help\" para ver los comandos disponibles\n", - "", - ] + smallHelp = [ + "This is the list of commands you can use: \n", + "banner: Displays the initial greeting\n", + "help: As you can see, it shows a list of commands\n", + "skills: Displays the technologies I'm able to use\n", + "projects: List of my projects\n", + "info: Shows all the information of the project\n", + "github: Opens github in a new tab\n", + "codepen: Opens codepen in a new tab\n", + "reddit: Opens reddit in a new tab\n", + "twitter: Opens twitter in a new tab\n", + "cls: Clears the content of the terminal\n\n", + ] - help = [ - "Esta es la lista de comandos que puedes usar: \n", - "banner Despliega el saludo inicial", - "help Como puedes ver, muestra una lista de comandos", - "skills Muestra las tecnologías que puedo usar", - "projects Lista mis proyectos", - "info Muestra la información del proyecto", - "github Abre github en una nueva pestaña", - "codepen Abre codepen en una nueva pestaña", - "reddit Abre reddit en una nueva pestaña", - "twitter Abre twitter en una nueva pestaña", - "cls Borra el contenido de la terminal\n\n", - ] + smallProjects = [ + "Still working on them, most of them are private, sorry :(\n\n" + ] - projects = [ - " _ __ _ __ ___ _________ ,___ ________,", - "( / )( / ) / ()( /( / / /( / ( ", - " /--' /--< / / / /-- / / `. ", - "/ / \\_(___/ _/_ (/____/(___/ _/ (___)", - " // ", - " (/ \n\n", - "Aún no están dispnibles :(\n\n", - ] + smallInfo = [ + "This project was build with Next.js 13", + "3D model was handled with three.js", + "Dots grid background was made with p5.js\n\n", + ] + } + else if (language == 'Spanish') { + banner = [ + " ,db ", + " jSDl, ", + " DEMP\". ", + " 'YLObP Nombre: Bryant Hernández ", + " `YN` Correo: bryant.0@outlook.com ", + " Y\" ", + " Y; También puedes encontrarme en mis redes ", + " ,Lb .,,. ,,ss tecleando unas de las siguientes opciones: ", + " .,dOVEl SDEMILO' ", + " dLOVENUSDEMILOP ", + " ;OP*NUSDP**LOVEb, =^..^= github codepen ", + " dEl \"DE; YENUP ", + " YUS :l` YS' (°‿°) reddit ,(u°)> twitter ", + " :*' .,DE. ", + " USD`YI ", + " dDEY O: ║▌║█║▌│║▌║▌█║▌║█║▌│║▌║▌█║▌║ ", + " .EMIb ,E. ", + " ,dILO* NUY ", + " ,ILOVb ,SD' Teclea \"help\" para ver los comandos disponibles\n", + "", + ] - info = [ - "888b | 888~~ Y88b / ~~~888~~~ Este proyecto fue hecho con Next.js 13", - "|Y88b | 888___ Y88b / 888 El modelo 3D fue añadido con three.js", - "| Y88b | 888 Y88b/ 888 La cuadrícula de puntos fue hecha con p5.js", - "| Y88b | 888 /Y88b 888 ", - "| Y88b| 888 / Y88b 888 ", - "| Y888 888___ / Y88b 888 \n\n", - ] + help = [ + "Esta es la lista de comandos que puedes usar: \n", + "banner Despliega el saludo inicial", + "help Como puedes ver, muestra una lista de comandos", + "skills Muestra las tecnologías que puedo usar", + "projects Lista mis proyectos", + "info Muestra la información del proyecto", + "github Abre github en una nueva pestaña", + "codepen Abre codepen en una nueva pestaña", + "reddit Abre reddit en una nueva pestaña", + "twitter Abre twitter en una nueva pestaña", + "cls Borra el contenido de la terminal\n\n", + ] - smallBanner = [ - "Nombre: Bryant Hernández", - "Correo: bryant.0@outlook.com", - "", - "Teclea \"help\" para ver los comandos disponibles\n\n" - ] + projects = [ + " _ __ _ __ ___ _________ ,___ ________,", + "( / )( / ) / ()( /( / / /( / ( ", + " /--' /--< / / / /-- / / `. ", + "/ / \\_(___/ _/_ (/____/(___/ _/ (___)", + " // ", + " (/ \n\n", + "Aún no están dispnibles :(\n\n", + ] - smallHelp= [ - "Esta es la lista de comandos que puedes usar: \n", - "banner: Despliega el saludo inicial\n", - "help: Como puedes ver, muestra una lista de comandos\n", - "skills: Muestra las tecnologías que puedo usar\n", - "projects: Lista mis proyectos\n", - "info: Muestra la información del proyecto\n", - "github: Abre github en una nueva pestaña\n", - "codepen: Abre codepen en una nueva pestaña\n", - "reddit: Abre reddit en una nueva pestaña\n", - "twitter: Abre twitter en una nueva pestaña\n", - "cls: Borra el contenido de la terminal\n\n", - ] + info = [ + "888b | 888~~ Y88b / ~~~888~~~ Este proyecto fue hecho con Next.js 13", + "|Y88b | 888___ Y88b / 888 El modelo 3D fue añadido con three.js", + "| Y88b | 888 Y88b/ 888 La cuadrícula de puntos fue hecha con p5.js", + "| Y88b | 888 /Y88b 888 ", + "| Y88b| 888 / Y88b 888 ", + "| Y888 888___ / Y88b 888 \n\n", + ] - smallProjects = [ - "Aún no están dispnibles :(\n\n", - ] + smallBanner = [ + "Nombre: Bryant Hernández", + "Correo: bryant.0@outlook.com", + "", + "Teclea \"help\" para ver los comandos disponibles\n\n" + ] - smallInfo = [ - "Este proyecto fue hecho con Next.js 13", - "El modelo 3D fue añadido con three.js", - "La cuadrícula de puntos fue hecha con p5.js\n\n", - ] - } + smallHelp = [ + "Esta es la lista de comandos que puedes usar: \n", + "banner: Despliega el saludo inicial\n", + "help: Como puedes ver, muestra una lista de comandos\n", + "skills: Muestra las tecnologías que puedo usar\n", + "projects: Lista mis proyectos\n", + "info: Muestra la información del proyecto\n", + "github: Abre github en una nueva pestaña\n", + "codepen: Abre codepen en una nueva pestaña\n", + "reddit: Abre reddit en una nueva pestaña\n", + "twitter: Abre twitter en una nueva pestaña\n", + "cls: Borra el contenido de la terminal\n\n", + ] - skills = [ - "CSS [████████████▁▁▁▁] 75% C++ [████████████▁▁▁▁] 75%", - "", - "TS [████████▁▁▁▁▁▁▁▁] 50% PHP [████████▁▁▁▁▁▁▁▁] 50%", - "", - "Angular [███████▁▁▁▁▁▁▁▁▁] 44% Go [█████████▁▁▁▁▁▁▁] 57%", - "", - "React [████████▁▁▁▁▁▁▁▁] 50% Git [████████████▁▁▁▁] 75%\n\n", + smallProjects = [ + "Aún no están dispnibles :(\n\n", ] - smallSkills = [ - "CSS [████████████▁▁▁▁] 75%", - "", - "C++ [████████████▁▁▁▁] 75%", - "", - "TS [████████▁▁▁▁▁▁▁▁] 50%", - "", - "PHP [████████▁▁▁▁▁▁▁▁] 50%", - "", - "NG [███████▁▁▁▁▁▁▁▁▁] 44%", - "", - "Go [█████████▁▁▁▁▁▁▁] 57%", - "", - "Reac [████████▁▁▁▁▁▁▁▁] 50%", - "", - "Git [████████████▁▁▁▁] 75%\n\n", + + smallInfo = [ + "Este proyecto fue hecho con Next.js 13", + "El modelo 3D fue añadido con three.js", + "La cuadrícula de puntos fue hecha con p5.js\n\n", ] + } - let start:string[]; - if(window.innerWidth<=760) - { - start=smallBanner; - } - else - { - start=banner; - } + skills = [ + "CSS [████████████▁▁▁▁] 75% C++ [████████████▁▁▁▁] 75%", + "", + "TS [████████▁▁▁▁▁▁▁▁] 50% PHP [████████▁▁▁▁▁▁▁▁] 50%", + "", + "Angular [███████▁▁▁▁▁▁▁▁▁] 44% Go [█████████▁▁▁▁▁▁▁] 57%", + "", + "React [████████▁▁▁▁▁▁▁▁] 50% Git [████████████▁▁▁▁] 75%\n\n", + ] + smallSkills = [ + "CSS [████████████▁▁▁▁] 75%", + "", + "C++ [████████████▁▁▁▁] 75%", + "", + "TS [████████▁▁▁▁▁▁▁▁] 50%", + "", + "PHP [████████▁▁▁▁▁▁▁▁] 50%", + "", + "NG [███████▁▁▁▁▁▁▁▁▁] 44%", + "", + "Go [█████████▁▁▁▁▁▁▁] 57%", + "", + "Reac [████████▁▁▁▁▁▁▁▁] 50%", + "", + "Git [████████████▁▁▁▁] 75%\n\n", + ] - const preRef = useRef(null); - const inputRef = useRef(null!); - const [input, setInput] = useState(""); - const [output, setOutput] = useState(start.join('\n')); - let newOutput = ""; + let start: string[]; + if (window.innerWidth <= 760) { + start = smallBanner; + } + else { + start = banner; + } - useEffect(() => { - if (preRef.current) - { - preRef.current.scrollTop = preRef.current.scrollHeight; - } + const preRef = useRef(null); + const inputRef = useRef(null!); + const [input, setInput] = useState(""); + const [output, setOutput] = useState(start.join('\n')); + let newOutput = ""; - inputRef.current.focus() - }, [output]); + useEffect(() => { + if (preRef.current) { + preRef.current.scrollTop = preRef.current.scrollHeight; + } + + inputRef.current.focus() + }, [output]); - useEffect(() => { - window.innerWidth<=760 ? newOutput += smallBanner.join('\n') : newOutput += banner.join('\n') - setOutput(newOutput) - }, [language]); + useEffect(() => { + window.innerWidth <= 760 ? newOutput += smallBanner.join('\n') : newOutput += banner.join('\n') + setOutput(newOutput) + }, [language]); - const handleKeyDown = (e: React.KeyboardEvent) => { - if (e.key === "Enter") - { - newOutput = output + "@guest from portfolio\n" + "> " + input + "\n\n"; - switch (input) - { - case "banner": - window.innerWidth<=760 ? newOutput += smallBanner.join('\n') : newOutput += banner.join('\n') - break; - case "help": - window.innerWidth<=760 ? newOutput += smallHelp.join('\n') : newOutput += help.join('\n') - break; - case "skills": - window.innerWidth<=760 ? newOutput += smallSkills.join('\n') : newOutput += skills.join('\n') - break; - case "projects": - window.innerWidth<=760 ? newOutput += smallProjects.join('\n') : newOutput += projects.join('\n') - break; - case "info": - window.innerWidth<=760 ? newOutput += smallInfo.join('\n') : newOutput += info.join('\n') - break; - case "github": - window.open("https://github.com/AB10110F", '_blank'); - break; - case "codepen": - window.open("https://codepen.io/AB10110F", '_blank'); - break; - case "reddit": - window.open("https://www.reddit.com/user/AB10110F", '_blank'); - break; - case "twitter": - window.open("https://twitter.com/AB10110F", '_blank'); - break; - case "cls": - newOutput = "" - break; - default: - language == 'English' ? newOutput += "x_x Syntax Error \"" + input + "\" is not a command\n\n" : newOutput += "x_x Error de sintaxis \"" + input + "\" no es un comando\n\n" - } - setOutput(newOutput) - setInput("") - } - }; + const handleKeyDown = (e: React.KeyboardEvent) => { + if (e.key === "Enter") { + newOutput = output + "@guest from portfolio\n" + "> " + input + "\n\n"; + switch (input) { + case "banner": + window.innerWidth <= 760 ? newOutput += smallBanner.join('\n') : newOutput += banner.join('\n') + break; + case "help": + window.innerWidth <= 760 ? newOutput += smallHelp.join('\n') : newOutput += help.join('\n') + break; + case "skills": + window.innerWidth <= 760 ? newOutput += smallSkills.join('\n') : newOutput += skills.join('\n') + break; + case "projects": + window.innerWidth <= 760 ? newOutput += smallProjects.join('\n') : newOutput += projects.join('\n') + break; + case "info": + window.innerWidth <= 760 ? newOutput += smallInfo.join('\n') : newOutput += info.join('\n') + break; + case "github": + window.open("https://github.com/AB10110F", '_blank'); + break; + case "codepen": + window.open("https://codepen.io/AB10110F", '_blank'); + break; + case "reddit": + window.open("https://www.reddit.com/user/AB10110F", '_blank'); + break; + case "twitter": + window.open("https://twitter.com/AB10110F", '_blank'); + break; + case "cls": + newOutput = "" + break; + default: + language == 'English' ? newOutput += "x_x Syntax Error \"" + input + "\" is not a command\n\n" : newOutput += "x_x Error de sintaxis \"" + input + "\" no es un comando\n\n" + } + setOutput(newOutput) + setInput("") + } + }; - return ( -
inputRef.current.focus()}> - 
{output}
-
-
@guest from portfolio
-
-

>

- setInput(e.target.value)} - onKeyDown={handleKeyDown} - /> -
-
-
- ) + return ( +
inputRef.current.focus()}> + 
{output}
+
+
@guest from portfolio
+
+

>

+ setInput(e.target.value)} + onKeyDown={handleKeyDown} + /> +
+
+
+ ) }; export default Terminal diff --git a/src/components/Visualizer.tsx b/src/components/Visualizer.tsx index 1a8b001..4fc84ba 100644 --- a/src/components/Visualizer.tsx +++ b/src/components/Visualizer.tsx @@ -1,33 +1,33 @@ import styles from '../css/visualizer.module.css'; const Visualizer = () => { - return ( - <> -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - ); + return ( + <> +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + ); }; export default Visualizer; diff --git a/src/css/dots.module.css b/src/css/dots.module.css index 876b4af..aabdb50 100644 --- a/src/css/dots.module.css +++ b/src/css/dots.module.css @@ -1,6 +1,5 @@ -.background -{ - position: fixed; - z-index: -1; - top: 0; -} \ No newline at end of file +.background { + position: fixed; + z-index: -1; + top: 0; +} diff --git a/src/css/globals.css b/src/css/globals.css index c86e8f3..867d3c9 100644 --- a/src/css/globals.css +++ b/src/css/globals.css @@ -5,10 +5,19 @@ border: 0; } -::-webkit-scrollbar{height: 10px; width: 10px;} -::-webkit-scrollbar-thumb{background:#fdfdfd; border-radius: 0px;} +::-webkit-scrollbar { + height: 10px; + width: 10px; +} + +::-webkit-scrollbar-thumb { + background: #fdfdfd; + border-radius: 0px; +} -html{ background-color: black; } +html { + background-color: black; +} html, body { @@ -26,5 +35,10 @@ a { 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; } +.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 index f0af228..ea60c72 100644 --- a/src/css/marquee.module.css +++ b/src/css/marquee.module.css @@ -1,6 +1,5 @@ -.header -{ - border: 2px solid rgb(255,255,255); +.header { + border: 2px solid rgb(255, 255, 255); overflow-x: hidden; display: flex; align-items: center; @@ -8,43 +7,37 @@ white-space: nowrap; } -.header>h1 -{ +.header>h1 { font-size: 10vh; animation: slide 10s infinite linear; } -@keyframes slide -{ - 0%{ +@keyframes slide { + 0% { transform: translateX(100vw); } - 100%{ + 100% { transform: translateX(-100%); } } -@media only screen and (max-width: 1250px) and (min-width: 760px) -{ - .header - { +@media only screen and (max-width: 1250px) and (min-width: 760px) { + .header { height: 12vh; } - .header>h1 - { + + .header>h1 { font-size: 7vh; } } -@media only screen and (max-width: 760px) -{ - .header - { +@media only screen and (max-width: 760px) { + .header { height: 11vh; } - .header>h1 - { + + .header>h1 { font-size: 5vh; text-align: center; } diff --git a/src/css/page.module.css b/src/css/page.module.css index bb6b159..9110d43 100644 --- a/src/css/page.module.css +++ b/src/css/page.module.css @@ -1,5 +1,4 @@ -.main -{ +.main { display: flex; flex-direction: column; justify-content: center; @@ -7,8 +6,7 @@ padding: 30px 30px 25px 30px; } -.grid -{ +.grid { display: flex; flex-direction: row; width: 100%; @@ -16,16 +14,14 @@ gap: 25px; } -.aside -{ +.aside { display: flex; flex-direction: column; gap: 25px; width: 35%; } -.languageContainer -{ +.languageContainer { display: flex; flex-direction: row; border: 2px solid rgb(255, 255, 255); @@ -33,14 +29,12 @@ animation: right 1s ease; } -.canvas -{ +.canvas { height: 100%; width: 55%; } -.bars -{ +.bars { border: 2px solid rgb(255, 255, 255); height: 40%; animation: right 1.5s ease; @@ -49,8 +43,7 @@ justify-content: center; } -.crtSwitch -{ +.crtSwitch { border: 2px solid rgb(255, 255, 255); height: 20%; display: flex; @@ -58,69 +51,69 @@ animation: right 2s ease; } -@keyframes right -{ - 0%{ - transform: translateX(500px); - opacity: 0%; - filter: blur(5px); +@keyframes right { + 0% { + transform: translateX(500px); + opacity: 0%; + filter: blur(5px); } - 75%{ - transform: translateX(-10px); + + 75% { + transform: translateX(-10px); } - 100%{ - transform: translateX(0); - opacity: 100%; + + 100% { + transform: translateX(0); + opacity: 100%; } } -@media only screen and (max-width: 1250px) and (min-width: 760px) -{ - .grid { flex-direction: column} - .aside - { +@media only screen and (max-width: 1250px) and (min-width: 760px) { + .grid { + flex-direction: column + } + + .aside { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); height: 50%; width: 100%; } - .languageContainer - { + + .languageContainer { flex-direction: column; grid-area: 1 / 1 / 3 / 2; height: 100%; width: 100%; } - .canvas - { + + .canvas { height: 75%; width: 100%; } - .bars - { + + .bars { height: 100%; } - .crtSwitch - { + + .crtSwitch { height: 100%; } } -@media only screen and (max-width: 760px) -{ - .grid - { - flex-direction: column; +@media only screen and (max-width: 760px) { + .grid { + flex-direction: column; } - .aside - { - width: 100%; - height: 60%; + + .aside { + width: 100%; + height: 60%; } - .canvas - { + + .canvas { width: 45%; } } diff --git a/src/css/switch.module.css b/src/css/switch.module.css index c4aa0ab..bc28698 100644 --- a/src/css/switch.module.css +++ b/src/css/switch.module.css @@ -1,58 +1,56 @@ -.container -{ - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - height: 100%; - width: 30%; - font-size: 3.2vh; +.container { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + height: 100%; + width: 30%; + font-size: 3.2vh; } -.languageSwitchContainer -{ - display: flex; - flex-direction: column; - align-items: center; - width: 100%; +.languageSwitchContainer { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; } -.section -{ - display: flex; - flex-direction: row; - align-items: center; - height: 100%; - width: 50%; - font-size: 3.2vh; +.section { + display: flex; + flex-direction: row; + align-items: center; + height: 100%; + width: 50%; + font-size: 3.2vh; } -.checkbox -{ - width: 2.3em; - height: 2.3em; - background-color: none; - border-radius: 50%; - vertical-align: middle; - border: 2px solid #ddd; - appearance: none; - -webkit-appearance: none; - outline: none; - cursor: pointer; - margin-right:10%; +.checkbox { + width: 2.3em; + height: 2.3em; + background-color: none; + border-radius: 50%; + vertical-align: middle; + border: 2px solid #ddd; + appearance: none; + -webkit-appearance: none; + outline: none; + cursor: pointer; + margin-right: 10%; } .checkbox:checked { - z-index: 1; - background-color: white; - box-shadow: - 0 0 60px 20px #fff, /* inner white */ - 0 0 100px 25px #f0f, /* middle magenta */ - 0 0 140px 30px #0ff; /* outer cyan */ + z-index: 1; + background-color: white; + box-shadow: + 0 0 60px 20px #fff, + /* inner white */ + 0 0 100px 25px #f0f, + /* middle magenta */ + 0 0 140px 30px #0ff; + /* outer cyan */ } -.scanlines -{ +.scanlines { position: fixed; top: 0; left: 0; @@ -67,8 +65,7 @@ pointer-events: none; } -.scanner -{ +.scanner { animation: scanning 2s infinite linear; background-color: rgba(133, 133, 133, 0.266); position: fixed; @@ -78,18 +75,16 @@ width: 100%; } -.hidden -{ +.hidden { display: none; } -@keyframes scanning -{ - 0%{ +@keyframes scanning { + 0% { transform: translateY(0%); } - 100%{ + 100% { transform: translateY(100vh); } } @@ -98,44 +93,41 @@ 0% { transform: translateY(2px); } + 100% { transform: translateY(0px); } } -@media only screen and (max-width: 1250px) and (min-width: 760px) -{ - .container - { - width: 50%; - font-size: 2vh; - } - .languageSwitchContainer - { - display: flex; - flex-direction: row; - height: 100%; - justify-content: center; - } - .section - { - width: 50%; - font-size: 2vh; - justify-content: center; - } +@media only screen and (max-width: 1250px) and (min-width: 760px) { + .container { + width: 50%; + font-size: 2vh; + } + + .languageSwitchContainer { + display: flex; + flex-direction: row; + height: 100%; + justify-content: center; + } + + .section { + width: 50%; + font-size: 2vh; + justify-content: center; + } } -@media only screen and (max-width: 760px) -{ - .container - { - width: 50%; - font-size: 3.2vh; - } - .section - { - width: 65%; - font-size: 3.2vh; - } +@media only screen and (max-width: 760px) { + .container { + width: 50%; + font-size: 3.2vh; + } + + .section { + width: 65%; + font-size: 3.2vh; + } } diff --git a/src/css/terminal.module.css b/src/css/terminal.module.css index 8c45f77..998c98d 100644 --- a/src/css/terminal.module.css +++ b/src/css/terminal.module.css @@ -1,89 +1,82 @@ -.terminal -{ - animation: bottom 1s ease; - width: 65%; - overflow-Y:auto; - overflow-X:hidden; - color: white; - font-size: 3vh; - border: 2px solid rgb(255, 255, 255); +.terminal { + animation: bottom 1s ease; + width: 65%; + overflow-Y: auto; + overflow-X: hidden; + color: white; + font-size: 3vh; + border: 2px solid rgb(255, 255, 255); } -.terminal__history -{ - padding: 15px 15px 0px 15px; - width: 100%; - color: white; +.terminal__history { + padding: 15px 15px 0px 15px; + width: 100%; + color: white; } -.terminal__prompt -{ - padding: 0 15px 15px 15px; +.terminal__prompt { + padding: 0 15px 15px 15px; } -.terminal__inputRow -{ - display: flex; - flex-direction: row; +.terminal__inputRow { + display: flex; + flex-direction: row; } -.terminal__prompt input -{ - border: none; - outline: none; - width: 100%; - background-color: transparent; - color: white; - /* margin-top: 10px */; - font-size: 3vh; +.terminal__prompt input { + border: none; + outline: none; + width: 100%; + background-color: transparent; + color: white; + /* margin-top: 10px */ + ; + font-size: 3vh; } -@keyframes bottom -{ - 0%{ - transform: translateY(500px); - opacity: 0%; - filter: blur(2px); - height: 0; /* This is to compensate the effect that makes the terminal be focus from the start */ - } - 75%{ - transform: translateY(-10px); - } - 100%{ - transform: translateY(0); - opacity: 100%; - height: 100; - } +@keyframes bottom { + 0% { + transform: translateY(500px); + opacity: 0%; + filter: blur(2px); + height: 0; + /* This is to compensate the effect that makes the terminal be focus from the start */ + } + + 75% { + transform: translateY(-10px); + } + + 100% { + transform: translateY(0); + opacity: 100%; + height: 100; + } } /* @media only screen and (max-width: 1250px) */ -@media only screen and (max-width: 1250px) and (min-width: 760px) -{ - .terminal - { - font-size: 125%; - width: 100%; - height: 60%; - animation: none; - } - .terminal__prompt input - { - font-size: 100%; - } +@media only screen and (max-width: 1250px) and (min-width: 760px) { + .terminal { + font-size: 125%; + width: 100%; + height: 60%; + animation: none; + } + + .terminal__prompt input { + font-size: 100%; + } } -@media only screen and (max-width: 760px) -{ - .terminal - { - width: 100%; - height: 40%; - animation: none; - } +@media only screen and (max-width: 760px) { + .terminal { + width: 100%; + height: 40%; + animation: none; + } - .terminal__history - { - white-space: pre-wrap; - word-wrap: break-word; - } + .terminal__history { + white-space: pre-wrap; + word-wrap: break-word; + } } diff --git a/src/css/visualizer.module.css b/src/css/visualizer.module.css index ce80792..5b0843b 100644 --- a/src/css/visualizer.module.css +++ b/src/css/visualizer.module.css @@ -1,33 +1,31 @@ -.strokeContainer -{ - display: flex; - align-items: center; - justify-content: center; - opacity: 1; - background-image: linear-gradient(0deg, rgba(255, 255, 255, 0) 50%, #000000 50%); - background-size: 14px 14px; - height: 75%; - width: 2%; - margin: 0 1%; +.strokeContainer { + display: flex; + align-items: center; + justify-content: center; + opacity: 1; + background-image: linear-gradient(0deg, rgba(255, 255, 255, 0) 50%, #000000 50%); + background-size: 14px 14px; + height: 75%; + width: 2%; + margin: 0 1%; } -.strokeContainer>span -{ - display: block; - background: white; - height: 100%; - width: 100%; - animation: wave 1s linear infinite; - animation-delay: calc(0.1s * (var(--stroke) - 12)); - z-index: -1; +.strokeContainer>span { + display: block; + background: white; + height: 100%; + width: 100%; + animation: wave 1s linear infinite; + animation-delay: calc(0.1s * (var(--stroke) - 12)); + z-index: -1; } @keyframes wave { - 50%{ - height: 10%; - } - 100%{ - height: 75%; - } -} + 50% { + height: 10%; + } + 100% { + height: 75%; + } +} diff --git a/src/fonts/fonts.ts b/src/fonts/fonts.ts index 4892716..d296b88 100644 --- a/src/fonts/fonts.ts +++ b/src/fonts/fonts.ts @@ -8,9 +8,9 @@ const vt323 = VT323({ variable: '--vt323', }) -const dotFont = localFont({ +const dotFont = localFont({ src: '../app/e-dot-digital-7.ttf', - variable: '--dotFont', + variable: '--dotFont', }) - -export { vt323, dotFont } \ No newline at end of file + +export { vt323, dotFont }