From 42d8ff82af1ca4cf9a38f7dabc227649eccd32c4 Mon Sep 17 00:00:00 2001 From: "A. Bryant" Date: Thu, 10 Aug 2023 21:04:25 -0600 Subject: [PATCH] fonts-and-tweaks --- src/app/layout.tsx | 4 +--- src/app/page.tsx | 6 +++--- src/components/Controls.tsx | 5 +++-- src/components/Dots.tsx | 8 ++++---- src/components/Terminal.tsx | 37 +++++++++++++++-------------------- src/components/Typewriter.tsx | 6 ++---- src/css/controls.module.css | 11 +++++++++++ src/css/globals.css | 7 ------- src/css/page.module.css | 1 + src/fonts/fonts.ts | 16 +++++++++++++++ 10 files changed, 57 insertions(+), 44 deletions(-) create mode 100644 src/fonts/fonts.ts diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 3d7eb3d..98c9593 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,8 +1,6 @@ import '@/css/globals.css'; -import { Inter } from 'next/font/google'; import Dots from '@/components/Dots'; import {Metadata} from 'next'; -const inter = Inter({ subsets: ['latin'] }) export const metadata: Metadata = { title: 'AB10110F', @@ -17,7 +15,7 @@ export default function RootLayout({ return ( - + {children} diff --git a/src/app/page.tsx b/src/app/page.tsx index d351cb3..3f3532c 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -10,9 +10,9 @@ import Image from 'next/image' export default function Home() { const [currentCrt, setCrt] = useState(false) - var scanlines = currentCrt ? styles.scanlines : styles.hidden; - var scanner = currentCrt ? styles.scanner : styles.hidden; - var bright = currentCrt ? styles.bright : styles.main; + let scanlines:string = currentCrt ? styles.scanlines : styles.hidden; + let scanner:string = currentCrt ? styles.scanner : styles.hidden; + let bright:string = currentCrt ? styles.bright : styles.main; return ( diff --git a/src/components/Controls.tsx b/src/components/Controls.tsx index c870d26..5e791b1 100644 --- a/src/components/Controls.tsx +++ b/src/components/Controls.tsx @@ -1,5 +1,6 @@ import React, { useState } from 'react'; import styles from '../css/controls.module.css'; +import { vt323 } from '../fonts/fonts' interface ControlsProps { changeState: (newValue: boolean) => void; @@ -9,7 +10,7 @@ const Controls: React.FC = ({ changeState }) => { const [crt, setCrt] = useState(false); const handleChange = () => { - const newValue = !crt; + const newValue:boolean = !crt; setCrt(newValue); changeState(newValue); }; @@ -22,7 +23,7 @@ const Controls: React.FC = ({ changeState }) => { checked={crt} onChange={handleChange} /> - + ); }; diff --git a/src/components/Dots.tsx b/src/components/Dots.tsx index 02203ca..1e631d4 100644 --- a/src/components/Dots.tsx +++ b/src/components/Dots.tsx @@ -7,10 +7,10 @@ const Dots = () => { const sketchRef = useRef(null!); useEffect(() => { - let dotSize: number = 4; - let spacing: number = dotSize * 10; - let minTvalue: number = 50; - let areaAffected: number = 50; + const dotSize: number = 4; + const spacing: number = dotSize * 10; + const minTvalue: number = 50; + const areaAffected: number = 50; let mouseIsMoving: boolean = false; let dots: Dot[] = []; diff --git a/src/components/Terminal.tsx b/src/components/Terminal.tsx index 4c56cec..37242e6 100644 --- a/src/components/Terminal.tsx +++ b/src/components/Terminal.tsx @@ -1,17 +1,11 @@ import React from 'react'; import { useState, useRef, useEffect } from 'react'; import styles from '../css/terminal.module.css' -import { VT323 } from '@next/font/google'; - -const vt323 = VT323({ - subsets: ['latin'], - weight: '400', - variable: '--vt323', -}) +import { vt323 } from '../fonts/fonts' const Terminal = () => { - const banner = [ + const banner:string[] = [ " _/_/ _/_/_/ _/ _/ _/ _/ _/ _/_/_/_/", " _/ _/ _/ _/ _/_/ _/ _/ _/_/ _/_/ _/ _/ _/ ", " _/_/_/_/ _/_/_/ _/ _/ _/ _/ _/ _/ _/ _/_/_/ ", @@ -33,7 +27,7 @@ const Terminal = () => { "Type \"help\" to view the available commands" ] - const help = [ + 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", @@ -47,7 +41,7 @@ const Terminal = () => { "cls Clears the content of the terminal", ] - const skills = [ + const skills:string[] = [ "CSS [████████████▁▁▁▁] 75% C++ [████████████▁▁▁▁] 75%", "", "TS [████████▁▁▁▁▁▁▁▁] 50% PHP [████████▁▁▁▁▁▁▁▁] 50%", @@ -57,7 +51,7 @@ const Terminal = () => { "React [████████▁▁▁▁▁▁▁▁] 50% Git [████████████▁▁▁▁] 75%", ] - const projects = [ + const projects:string[] = [ " _ __ _ __ ___ _________ ,___ ________,", "( / )( / ) / ()( /( / / /( / ( ", " /--' /--< / / / /-- / / `. ", @@ -68,8 +62,8 @@ const Terminal = () => { "Still working on them, most of them are private, sorry :(", ] - const info = [ - "888b | 888~~ Y88b / ~~~888~~~ This project was built with Next.js 13", + 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 ", @@ -77,7 +71,7 @@ const Terminal = () => { "| Y888 888___ / Y88b 888 ", ] - const smallBanner = [ + const smallBanner:string[] = [ "Name: Bryant", "Mail: bryant.0@outlook.com", "", @@ -86,7 +80,7 @@ const Terminal = () => { "", "Type \"help\" to view the available commands" ] - const smallHelp = [ + 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", @@ -99,7 +93,7 @@ const Terminal = () => { "twitter: Opens twitter in a new tab\n", "cls: Clears the content of the terminal\n", ] - const smallSkills = [ + const smallSkills:string[] = [ "CSS [████████████▁▁▁▁] 75%", "", "C++ [████████████▁▁▁▁] 75%", @@ -116,16 +110,16 @@ const Terminal = () => { "", "Git [████████████▁▁▁▁] 75%", ] - const smallProjects = [ + const smallProjects:string[] = [ "Still working on them, most of them are private, sorry :(" ] - const smallInfo = [ - "This project was built with Next.js 13", + 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", ] - var start; + let start:string[]; if(window.innerWidth<=760) { start=smallBanner; @@ -141,7 +135,8 @@ const Terminal = () => { const [output, setOutput] = useState(start.join('\n')); useEffect(() => { - if (preRef.current) { + if (preRef.current) + { preRef.current.scrollTop = preRef.current.scrollHeight; } diff --git a/src/components/Typewriter.tsx b/src/components/Typewriter.tsx index fd3e70e..50a3f01 100644 --- a/src/components/Typewriter.tsx +++ b/src/components/Typewriter.tsx @@ -1,7 +1,5 @@ import React, {useState, useEffect, useRef} from 'react'; -import localFont from 'next/font/local'; - -const dotFont = localFont({ src: '../app/e-dot-digital-7.ttf' }) +import { dotFont } from '../fonts/fonts' const Typewriter = ({ text }: { text:string }) => { const index = useRef(0); @@ -14,7 +12,7 @@ const Typewriter = ({ text }: { text:string }) => { }, 80); }, [currentText]); - return

>{currentText}

+ return

>{currentText}

}; export default Typewriter; diff --git a/src/css/controls.module.css b/src/css/controls.module.css index 501ccff..06d7de6 100644 --- a/src/css/controls.module.css +++ b/src/css/controls.module.css @@ -6,6 +6,7 @@ align-items: center; height: 100%; width: 30%; + font-size: 3.2vh; } .checkbox @@ -30,10 +31,20 @@ 0 0 140px 30px #0ff; /* outer cyan */ } +@media only screen and (max-width: 1250px) +{ + .container + { + width: 50%; + font-size: 2vh; + } +} + @media only screen and (max-width: 760px) { .container { width: 50%; + font-size: 3.2vh; } } \ No newline at end of file diff --git a/src/css/globals.css b/src/css/globals.css index 6359346..124f8fd 100644 --- a/src/css/globals.css +++ b/src/css/globals.css @@ -1,10 +1,3 @@ -:root { - --font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono', - 'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro', - 'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace; - -} - @media (prefers-color-scheme: dark) { :root { --foreground-rgb: 255, 255, 255; diff --git a/src/css/page.module.css b/src/css/page.module.css index ef20ccd..235c6f7 100644 --- a/src/css/page.module.css +++ b/src/css/page.module.css @@ -144,6 +144,7 @@ { font-size: 5vh; text-align: center; + margin: 0 0 7% 0 } .bright h1 diff --git a/src/fonts/fonts.ts b/src/fonts/fonts.ts new file mode 100644 index 0000000..4892716 --- /dev/null +++ b/src/fonts/fonts.ts @@ -0,0 +1,16 @@ +import { VT323 } from '@next/font/google'; +import localFont from 'next/font/local'; + + +const vt323 = VT323({ + subsets: ['latin'], + weight: '400', + variable: '--vt323', +}) + +const dotFont = localFont({ + src: '../app/e-dot-digital-7.ttf', + variable: '--dotFont', +}) + +export { vt323, dotFont } \ No newline at end of file