diff --git a/src/app/context/language.tsx b/src/app/context/language.tsx new file mode 100644 index 0000000..45b1d69 --- /dev/null +++ b/src/app/context/language.tsx @@ -0,0 +1,36 @@ +"use client" +import { createContext, useContext, useState, ReactNode } from "react"; + +interface LanguageContextProviderProps +{ + children: ReactNode; +} + +interface LanguageContextValue +{ + language: string; + setLanguage: (language: string) => void; +} + +const LanguageContext = createContext(undefined); + +export const LanguageContextProvider = ({ children }: LanguageContextProviderProps) => { + const [language, setLanguage] = useState('Spanish'); + + console.log(navigator.language) + + return ( + + {children} + + ); +}; + +export const useLanguageContext = (): LanguageContextValue => { + const context = useContext(LanguageContext); + 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 964a764..d38c0ee 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,6 +1,7 @@ import '@/css/globals.css'; import Dots from '@/components/Dots'; import {Metadata} from 'next'; +import { LanguageContextProvider } from './context/language' export const metadata: Metadata = { title: 'AB10110F', @@ -15,8 +16,10 @@ export default function RootLayout({ return ( - - {children} + + + {children} + ) diff --git a/src/app/page.tsx b/src/app/page.tsx index 68f5f51..40c86c6 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,34 +1,53 @@ "use client"; -import React, {useState} from 'react'; +import React, {use, useState} from 'react'; import styles from '../css/page.module.css'; import Terminal from '@/components/Terminal'; import Typewriter from '@/components/Typewriter'; import Model from '@/components/Model'; -import Controls from '@/components/Controls'; -import Image from 'next/image' +import CrtSwitch from '@/components/CrtSwitch'; +import LanguageSwitch from '@/components/LanguageSwitch'; +import { useLanguageContext } from './context/language'; +import Image from 'next/image'; export default 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 bright:string = currentCrt ? styles.bright : styles.main; + let title:string + if(language == 'English') + { + title = 'Front-End Developer' + } + else if(language == 'Spanish') + { + title = 'Desarrollador Front-End' + } + else + { + title = '' + } return (
image - +
-
- -
+
+
+ +
+ +
- setCrt(currentCrt)} /> + setCrt(currentCrt)} />
diff --git a/src/components/Controls.tsx b/src/components/Controls.tsx deleted file mode 100644 index 5e791b1..0000000 --- a/src/components/Controls.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import React, { useState } from 'react'; -import styles from '../css/controls.module.css'; -import { vt323 } from '../fonts/fonts' - -interface ControlsProps { - changeState: (newValue: boolean) => void; -} - -const Controls: React.FC = ({ changeState }) => { - const [crt, setCrt] = useState(false); - - const handleChange = () => { - const newValue:boolean = !crt; - setCrt(newValue); - changeState(newValue); - }; - - return ( -
- - -
- ); -}; - -export default Controls; diff --git a/src/components/CrtSwitch.tsx b/src/components/CrtSwitch.tsx new file mode 100644 index 0000000..1f13419 --- /dev/null +++ b/src/components/CrtSwitch.tsx @@ -0,0 +1,48 @@ +import React, { useState } from 'react'; +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 = ({ changeState }) => { + const [crt, setCrt] = useState(false); + const {language, setLanguage} = useLanguageContext(); + + const handleChange = () => { + const newValue:boolean = !crt; + setCrt(newValue); + changeState(newValue); + }; + + let label:string; + + if(language == 'English') + { + label = 'CRT EFFECT' + } + else if(language == 'Spanish') + { + label = 'EFECTO CRT' + } + else + { + label = '' + } + + return ( +
+ + +
+ ); +}; + +export default CrtSwtich; diff --git a/src/components/LanguageSwitch.tsx b/src/components/LanguageSwitch.tsx new file mode 100644 index 0000000..2ea5628 --- /dev/null +++ b/src/components/LanguageSwitch.tsx @@ -0,0 +1,58 @@ +import React, {useState, useEffect, useRef} from 'react'; +import styles from '../css/switch.module.css' +import { vt323 } from '../fonts/fonts'; +import { useLanguageContext } from '../app/context/language'; + +const Typewriter = () => { + const {language, setLanguage} = useLanguageContext(); + + let l1:string + let l2:string + + if(language == 'English') + { + l1 = 'ENGLISH' + l2 = 'SPANISH' + } + else if(language == 'Spanish') + { + l1 = 'INGLÉS' + l2 = 'ESPAÑOL' + } + else + { + l1 = '' + l2 = '' + } + + const changeState = (language:string) => { + setLanguage(language); + }; + console.log(language) //TODO delete this line + + return ( +
+
+ changeState('English')} + /> + +
+
+ changeState('Spanish')} + /> + +
+
+ ) +}; + +export default Typewriter; diff --git a/src/components/Terminal.tsx b/src/components/Terminal.tsx index 8408d1a..fd024ae 100644 --- a/src/components/Terminal.tsx +++ b/src/components/Terminal.tsx @@ -1,47 +1,233 @@ import React from 'react'; import { useState, useRef, useEffect } from 'react'; +import { useLanguageContext } from '../app/context/language'; import styles from '../css/terminal.module.css' import { vt323 } from '../fonts/fonts' const Terminal = () => { - const banner:string[] = [ - " _/_/ _/_/_/ _/ _/ _/ _/ _/ _/_/_/_/", - " _/ _/ _/ _/ _/_/ _/ _/ _/_/ _/_/ _/ _/ _/ ", - " _/_/_/_/ _/_/_/ _/ _/ _/ _/ _/ _/ _/ _/_/_/ ", - " _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ ", - "_/ _/ _/_/_/ _/ _/ _/ _/ _/ _/ ", - "", - "________________________________________________", - "| _____________________________ | Name: Bryant", - "| [][] _____________________________ [_][_][_] | Mail: bryant.0@outlook.com", - "| [][] [_][_][_] [_][_][_][_] [_][_] [_][_][_] | ", - "| | You can also check my", - "| [][] [][][][][][][][][][][][][][_] [][][][] | social media, just type", - "| [][] [_][][][][][][][][][][][][][] [][][][] | one of the following options:", - "| [][] [__][][][][][][][][][][][][_] [][][][] | ", - "| [][] [___][][][][][][][][][][][__] [__][][] | =^..^= github codepen", - "| [_][______________][_] | (°‿°) reddit ,(u°)> twitter", - "|______________________________________________|", - "", - "Type \"help\" to view the available commands\n\n" - ] + const {language, setLanguage} = useLanguageContext(); - const help:string[] = [ - "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 codpen 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", - ] + 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[]; - const skills:string[] = [ + if(language == 'English') + { + banner = [ + " _/_/ _/_/_/ _/ _/ _/ _/ _/ _/_/_/_/", + " _/ _/ _/ _/ _/_/ _/ _/ _/_/ _/_/ _/ _/ _/ ", + " _/_/_/_/ _/_/_/ _/ _/ _/ _/ _/ _/ _/ _/_/_/ ", + " _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ ", + "_/ _/ _/_/_/ _/ _/ _/ _/ _/ _/ ", + "", + "________________________________________________", + "| _____________________________ | Name: Bryant", + "| [][] _____________________________ [_][_][_] | Mail: bryant.0@outlook.com", + "| [][] [_][_][_] [_][_][_][_] [_][_] [_][_][_] | ", + "| | You can also check my", + "| [][] [][][][][][][][][][][][][][_] [][][][] | social media, just type", + "| [][] [_][][][][][][][][][][][][][] [][][][] | one of the following options:", + "| [][] [__][][][][][][][][][][][][_] [][][][] | ", + "| [][] [___][][][][][][][][][][][__] [__][][] | =^..^= github codepen", + "| [_][______________][_] | (°‿°) reddit ,(u°)> twitter", + "|______________________________________________|", + "", + "Type \"help\" to view the available commands\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 codpen 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", + ] + + 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", + ] + + smallBanner = [ + "Name: Bryant", + "Mail: bryant.0@outlook.com", + "", + "=^..^= github codepen", + "(°‿°) reddit ,(u°)> twitter", + "", + "Type \"help\" to view the available commands\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 codpen 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", + ] + + smallProjects = [ + "Still working on them, most of them are private, sorry :(\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", + ] + } + else if(language == 'Spanish') + { + banner = [ + " _/_/ _/_/_/ _/ _/ _/ _/ _/ _/_/_/_/", + " _/ _/ _/ _/ _/_/ _/ _/ _/_/ _/_/ _/ _/ _/ ", + " _/_/_/_/ _/_/_/ _/ _/ _/ _/ _/ _/ _/ _/_/_/ ", + " _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ ", + "_/ _/ _/_/_/ _/ _/ _/ _/ _/ _/ ", + "", + "________________________________________________", + "| _____________________________ | Nombre: Bryant", + "| [][] _____________________________ [_][_][_] | Correo: bryant.0@outlook.com", + "| [][] [_][_][_] [_][_][_][_] [_][_] [_][_][_] | ", + "| | También puedes checar mis", + "| [][] [][][][][][][][][][][][][][_] [][][][] | redes sociales tecleando", + "| [][] [_][][][][][][][][][][][][][] [][][][] | una de las siguientes opciones:", + "| [][] [__][][][][][][][][][][][][_] [][][][] | ", + "| [][] [___][][][][][][][][][][][__] [__][][] | =^..^= github codepen", + "| [_][______________][_] | (°‿°) reddit ,(u°)> twitter", + "|______________________________________________|", + "", + "Teclea \"help\" para ver los comandos disponibles\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", + ] + + skills = [ + "CSS [████████████▁▁▁▁] 75% C++ [████████████▁▁▁▁] 75%", + "", + "TS [████████▁▁▁▁▁▁▁▁] 50% PHP [████████▁▁▁▁▁▁▁▁] 50%", + "", + "Angular [███████▁▁▁▁▁▁▁▁▁] 44% Go [█████████▁▁▁▁▁▁▁] 57%", + "", + "React [████████▁▁▁▁▁▁▁▁] 50% Git [████████████▁▁▁▁] 75%\n\n", + ] + + projects = [ + " _ __ _ __ ___ _________ ,___ ________,", + "( / )( / ) / ()( /( / / /( / ( ", + " /--' /--< / / / /-- / / `. ", + "/ / \\_(___/ _/_ (/____/(___/ _/ (___)", + " // ", + " (/ \n\n", + "", + "Aún no están dispnibles :(\n\n", + ] + + info = [ + "888b | 888~~ Y88b / ~~~888~~~ Este proyecto fue hecho con Next.js 13", + "|Y88b | 888___ Y88b / 888 Él 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", + ] + + smallBanner = [ + "Nombre: Bryant", + "Correo: bryant.0@outlook.com", + "", + "=^..^= github codepen", + "(°‿°) reddit ,(u°)> twitter", + "", + "Type \"help\" to view the available commands\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", + ] + + smallProjects = [ + "Aún no están dispnibles :(\n", + ] + + smallInfo = [ + "Este proyecto fue hecho con Next.js 13", + "Él modelo 3D fue añadido con three.js", + "La cuadrícula de puntos fue hecha con p5.js\n", + ] + } + else + { + banner = ['']; + help = ['']; + skills = ['']; + projects = ['']; + info = ['']; + smallBanner = ['']; + smallHelp= ['']; + smallSkills = ['']; + smallProjects = ['']; + smallInfo = ['']; + } + + skills = [ "CSS [████████████▁▁▁▁] 75% C++ [████████████▁▁▁▁] 75%", "", "TS [████████▁▁▁▁▁▁▁▁] 50% PHP [████████▁▁▁▁▁▁▁▁] 50%", @@ -50,50 +236,7 @@ const Terminal = () => { "", "React [████████▁▁▁▁▁▁▁▁] 50% Git [████████████▁▁▁▁] 75%\n\n", ] - - const projects:string[] = [ - " _ __ _ __ ___ _________ ,___ ________,", - "( / )( / ) / ()( /( / / /( / ( ", - " /--' /--< / / / /-- / / `. ", - "/ / \\_(___/ _/_ (/____/(___/ _/ (___)", - " // ", - " (/ \n\n", - "", - "Still working on them, most of them are private, sorry :(\n\n", - ] - - const info:string[] = [ - "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", - ] - - const smallBanner:string[] = [ - "Name: Bryant", - "Mail: bryant.0@outlook.com", - "", - "=^..^= github codepen", - "(°‿°) reddit ,(u°)> twitter", - "", - "Type \"help\" to view the available commands\n" - ] - const smallHelp:string[] = [ - "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 codpen 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", - ] - const smallSkills:string[] = [ + smallSkills = [ "CSS [████████████▁▁▁▁] 75%", "", "C++ [████████████▁▁▁▁] 75%", @@ -110,14 +253,6 @@ const Terminal = () => { "", "Git [████████████▁▁▁▁] 75%\n", ] - const smallProjects:string[] = [ - "Still working on them, most of them are private, sorry :(\n" - ] - const smallInfo:string[] = [ - "This project was build with Next.js 13", - "3D model was handled with three.js", - "Dots grid background was made with p5.js\n", - ] let start:string[]; if(window.innerWidth<=760) diff --git a/src/components/Typewriter.tsx b/src/components/Typewriter.tsx index 9e7ed8f..94b7c17 100644 --- a/src/components/Typewriter.tsx +++ b/src/components/Typewriter.tsx @@ -4,6 +4,11 @@ import { dotFont } from '../fonts/fonts' const Typewriter = ({ text }: { text:string }) => { const index = useRef(0); const [currentText, setCurrentText] = useState(''); + + useEffect(() => { + index.current = 0; + setCurrentText(''); + }, [text]); useEffect(() => { if (index.current < text.length) diff --git a/src/css/page.module.css b/src/css/page.module.css index 1c5f7eb..d1348ba 100644 --- a/src/css/page.module.css +++ b/src/css/page.module.css @@ -1,4 +1,5 @@ -.main { +.main +{ display: flex; flex-direction: column; height: 100vh; @@ -6,7 +7,8 @@ padding: 30px; } -.main h1{ +.main h1 +{ font-size: 10vh; margin: 0 0 2% 0 } @@ -47,13 +49,21 @@ width: 35%; } -.canvas +.languageContainer { + display: flex; + flex-direction: row; border: 3px solid rgb(255, 255, 255); height: 40%; animation: right 1s ease; } +.canvas +{ + height: 100%; + width: 55%; +} + .bars { border: 3px solid rgb(255, 255, 255); @@ -128,6 +138,19 @@ } } +@media only screen and (max-width: 1250px) and (min-width: 760px) +{ + .languageContainer + { + flex-direction: column; + } + .canvas + { + height: 75%; + width: 100%; + } +} + @media only screen and (max-width: 760px) { .grid @@ -153,4 +176,8 @@ text-align: center; margin: 0 0 7% 0 } + .canvas + { + width: 45%; + } } \ No newline at end of file diff --git a/src/css/controls.module.css b/src/css/switch.module.css similarity index 55% rename from src/css/controls.module.css rename to src/css/switch.module.css index 06d7de6..d87b132 100644 --- a/src/css/controls.module.css +++ b/src/css/switch.module.css @@ -9,6 +9,25 @@ font-size: 3.2vh; } +.languageSwitchContainer +{ + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +} + +.section +{ + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + height: 100%; + width: 50%; + font-size: 3.2vh; +} + .checkbox { width: 2.3em; @@ -31,13 +50,25 @@ 0 0 140px 30px #0ff; /* outer cyan */ } -@media only screen and (max-width: 1250px) +@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%; + } + .section + { + width: 50%; + justify-content: space-around; + font-size: 2vh; + } } @media only screen and (max-width: 760px) @@ -47,4 +78,9 @@ width: 50%; font-size: 3.2vh; } + .section + { + width: 65%; + font-size: 3.2vh; + } } \ No newline at end of file