fonts-and-tweaks

AB10110F · Aug 11, 2023 · 42d8ff8 · 42d8ff8
1 parent 28733b0
commit 42d8ff8
Show file tree

Hide file tree

Showing 10 changed files with 57 additions and 44 deletions.
diff --git 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 (
     <html lang="en">
       <Dots/>
-      <body className={inter.className}>
+      <body>
         {children}
       </body>
     </html>

diff --git 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
@@ -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<ControlsProps> = ({ 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<ControlsProps> = ({ changeState }) => {
         checked={crt}
         onChange={handleChange}
       />
-      <label htmlFor="">CRT EFFECT</label>
+      <label style={vt323.style} htmlFor="">CRT EFFECT</label>
     </section>
   );
 };

diff --git a/src/components/Dots.tsx b/src/components/Dots.tsx
@@ -7,10 +7,10 @@ const Dots = () => {
   const sketchRef = useRef<HTMLDivElement>(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
@@ -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,16 +62,16 @@ 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   ", 
         "|   Y88b| 888     /  Y88b     888   ", 
         "|    Y888 888___ /    Y88b    888   ",
     ]
 
-    const smallBanner = [
+    const smallBanner:string[] = [
         "Name: Bryant",
         "Mail: [email protected]",
         "",
@@ -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
@@ -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 <h1 className={dotFont.className}>&gt;{currentText}</h1>
+    return <h1 style={dotFont.style} >&gt;{currentText}</h1>
 };
 
 export default Typewriter;
diff --git 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;
      }
 }
diff --git 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
@@ -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
@@ -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 }