diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 0839014..52bc3a7 100644
--- 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({
+
{children}
)
-}
\ No newline at end of file
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 75faecf..219a28c 100644
--- 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 (
-
-
-
-
+
diff --git a/src/components/CrtSwitch.tsx b/src/components/CrtSwitch.tsx
index 5f0c88f..347a537 100644
--- 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 = ({ 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 = ({ changeState }) => {
{
label = 'EFECTO CRT'
}
- else
- {
- label = ''
- }
return (
);
};
-export default CrtSwtich;
\ No newline at end of file
+export default CrtSwtich;
diff --git a/src/components/LanguageSwitch.tsx b/src/components/LanguageSwitch.tsx
index 34870fe..4bfc2a2 100644
--- 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 (
@@ -59,4 +54,4 @@ const LanguageSwitch = () => {
export default dynamic (() => Promise.resolve(LanguageSwitch), {ssr: false})
-/* export default LanguageSwitch; */
\ No newline at end of file
+/* export default LanguageSwitch; */
diff --git a/src/components/Marquee.tsx b/src/components/Marquee.tsx
new file mode 100644
index 0000000..3b4154b
--- /dev/null
+++ 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 (
+ <>
+
+
+ );
+};
+
+export default dynamic (() => Promise.resolve(Marquee), {ssr: false})
diff --git a/src/components/Terminal.tsx b/src/components/Terminal.tsx
index 7f40f5d..9a3c74f 100644
--- 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
new file mode 100644
index 0000000..1a8b001
--- /dev/null
+++ b/src/components/Visualizer.tsx
@@ -0,0 +1,33 @@
+import styles from '../css/visualizer.module.css';
+
+const Visualizer = () => {
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default Visualizer;
diff --git a/src/css/globals.css b/src/css/globals.css
index 5572efe..c86e8f3 100644
--- 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
new file mode 100644
index 0000000..e7caea8
--- /dev/null
+++ 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;
+ }
+}
diff --git a/src/css/page.module.css b/src/css/page.module.css
index 4d9c8d8..a17f67e 100644
--- a/src/css/page.module.css
+++ b/src/css/page.module.css
@@ -3,43 +3,10 @@
display: flex;
flex-direction: column;
justify-content: center;
- height: 100vh;
color: white;
padding: 30px;
}
-.header
-{
- margin: 0 0 25px 0;
- border: 1px solid rgb(255,255,255);
- overflow-x: hidden;
- display: flex;
- align-items: center;
-}
-
-.main h1
-{
- font-size: 10vh;
- animation: slider 10s infinite linear;
- display:inline-block;
-}
-
-@keyframes slider
-{
- 0%{
- transform: translateX(-100%);
- }
-
- 100%{
- transform: translateX(100vw);
- }
-}
-.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 h1{
- font-size: 10vh;
-}
-
.grid
{
display: flex;
@@ -77,10 +44,9 @@
border: 1px solid rgb(255, 255, 255);
height: 40%;
animation: right 1.5s ease;
- background: repeating-linear-gradient(90deg, #ffffff 0, #ffffff 3%, transparent 0, transparent 50%), repeating-linear-gradient(180deg, #ffffff 0, #ffffff 3%, transparent 0, transparent 50%);
- background-size: 8% 20%;
- background-color: #00000000;
- opacity: 1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
.crtSwitch
@@ -92,48 +58,6 @@
animation: right 2s ease;
}
-.scanlines
-{
- position: fixed;
- top: 0;
- left: 0;
- height: 100%;
- width: 100%;
- opacity: 25%;
- background-color: rgb(0, 0, 0);
- mask-image: radial-gradient(rgba(120, 120, 120, 1) 30%, rgb(60, 60, 60, 0.4) 52%);
- background-image: linear-gradient(0deg, rgb(60, 60, 60) 50%, rgb(220, 220, 220) 50%);
- background-size: 1.5% 1.5%;
- animation: flicker 100ms infinite;
- pointer-events: none;
-}
-
-.scanner
-{
- animation: scanning 2s infinite linear;
- background-color: rgba(133, 133, 133, 0.266);
- position: fixed;
- top: 0;
- left: 0;
- height: 5%;
- width: 100%;
-}
-
-.hidden
-{
- display: none;
-}
-
-@keyframes flicker {
- 0% {
- transform: translateY(1px);
- }
- 100% {
- transform: translateY(0px);
- }
-}
-
-
@keyframes right
{
0%{
@@ -150,16 +74,6 @@
}
}
-@keyframes scanning
-{
- 0%{
- transform: translateY(0%);
- }
-
- 100%{
- transform: translateY(100vh);
- }
-}
@media only screen and (max-width: 1250px) and (min-width: 760px)
{
@@ -169,7 +83,7 @@
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
- height: 100%;
+ height: 50%;
width: 100%;
}
.languageContainer
@@ -192,14 +106,6 @@
{
height: 100%;
}
- .header
- {
- height: 18vh;
- }
- .main h1
- {
- font-size: 7vh;
- }
}
@media only screen and (max-width: 760px)
@@ -211,24 +117,10 @@
.aside
{
width: 100%;
- height: 150%;
- }
- .header
- {
- height: 12vh;
- }
- .main h1
- {
- font-size: 5vh;
- text-align: center;
+ height: 60%;
}
-
.canvas
{
width: 45%;
}
- .bars
- {
- background-size: 11% 30%;
- }
}
diff --git a/src/css/switch.module.css b/src/css/switch.module.css
index 08edadb..87cb995 100644
--- a/src/css/switch.module.css
+++ b/src/css/switch.module.css
@@ -43,6 +43,7 @@
}
.checkbox:checked {
+ z-index: 1;
background-color: white;
box-shadow:
0 0 60px 20px #fff, /* inner white */
@@ -50,6 +51,59 @@
0 0 140px 30px #0ff; /* outer cyan */
}
+.scanlines
+{
+ position: fixed;
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 100%;
+ opacity: 25%;
+ background-color: rgb(0, 0, 0);
+ mask-image: radial-gradient(rgba(120, 120, 120, 1) 30%, rgb(60, 60, 60, 0.4) 52%);
+ background-image: linear-gradient(0deg, rgb(60, 60, 60) 50%, rgb(220, 220, 220) 50%);
+ background-size: 1.5% 1.5%;
+ animation: flicker 100ms infinite;
+ pointer-events: none;
+}
+
+.scanner
+{
+ animation: scanning 2s infinite linear;
+ background-color: rgba(133, 133, 133, 0.266);
+ position: fixed;
+ top: 0;
+ left: 0;
+ height: 5%;
+ width: 100%;
+}
+
+.hidden
+{
+ display: none;
+}
+
+@keyframes scanning
+{
+ 0%{
+ transform: translateY(0%);
+ }
+
+ 100%{
+ transform: translateY(100vh);
+ }
+}
+
+@keyframes flicker {
+ 0% {
+ transform: translateY(1px);
+ }
+ 100% {
+ transform: translateY(0px);
+ }
+}
+
+
@media only screen and (max-width: 1250px) and (min-width: 760px)
{
.container
@@ -84,4 +138,4 @@
width: 65%;
font-size: 3.2vh;
}
-}
\ No newline at end of file
+}
diff --git a/src/css/terminal.module.css b/src/css/terminal.module.css
index 67b0b26..5fc58b9 100644
--- a/src/css/terminal.module.css
+++ b/src/css/terminal.module.css
@@ -63,7 +63,7 @@
{
font-size: 125%;
width: 100%;
- height: 135%;
+ height: 60%;
animation: none;
}
.terminal__prompt input
@@ -77,7 +77,7 @@
.terminal
{
width: 100%;
- height: 100%;
+ height: 40%;
animation: none;
}
diff --git a/src/css/visualizer.module.css b/src/css/visualizer.module.css
new file mode 100644
index 0000000..ce80792
--- /dev/null
+++ b/src/css/visualizer.module.css
@@ -0,0 +1,33 @@
+.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;
+}
+
+@keyframes wave {
+ 50%{
+ height: 10%;
+ }
+ 100%{
+ height: 75%;
+ }
+}
+