From 8c3942567f43176a8336184ffae50bf09f0efb5c Mon Sep 17 00:00:00 2001 From: "A. Bryant" Date: Wed, 26 Jul 2023 23:51:25 -0600 Subject: [PATCH] responsive-canvas --- src/app/layout.tsx | 9 ++-- src/app/page.tsx | 19 +++---- src/components/Controls.tsx | 18 +++++++ src/components/Dots.tsx | 4 +- src/components/Model.tsx | 92 ++++++++++++++++---------------- src/components/Terminal.tsx | 66 ++++++++++++++++++----- src/components/Typewriter.tsx | 3 +- src/css/controls.module.css | 30 +++++++++++ src/css/globals.css | 71 ++---------------------- src/{app => css}/page.module.css | 46 ++++++++++++++-- src/css/terminal.module.css | 43 +++++++++++---- 11 files changed, 242 insertions(+), 159 deletions(-) create mode 100644 src/components/Controls.tsx create mode 100644 src/css/controls.module.css rename src/{app => css}/page.module.css (59%) diff --git a/src/app/layout.tsx b/src/app/layout.tsx index e2b2bb4..3d7eb3d 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,9 +1,10 @@ -/* import '@/css/globals.css' */ -import { Inter } from 'next/font/google' -import Dots from '@/components/Dots' +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 = { +export const metadata: Metadata = { title: 'AB10110F', description: 'Portfolio', } diff --git a/src/app/page.tsx b/src/app/page.tsx index bda9822..3ab794c 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,11 +1,10 @@ -import Image from 'next/image' -import styles from './page.module.css' -import { Metadata } from 'next' -import Terminal from '@/components/Terminal' -import Typewriter from '@/components/Typewriter' -import Model from '@/components/Model' -import localFont from 'next/font/local' -import { ChevronRight, X, Minus, Square } from 'lucide-react'; +"use client"; +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 localFont from 'next/font/local'; const dotFont = localFont({ src: './e-dot-digital-7.ttf' }) @@ -20,7 +19,9 @@ export default function Home() {
-
hi
+
+ +
diff --git a/src/components/Controls.tsx b/src/components/Controls.tsx new file mode 100644 index 0000000..420d396 --- /dev/null +++ b/src/components/Controls.tsx @@ -0,0 +1,18 @@ +import React, {useState, useEffect, useRef} from 'react'; +import localFont from 'next/font/local'; +import styles from '../css/controls.module.css'; + +const dotFont = localFont({ src: '../app/e-dot-digital-7.ttf' }) + +const Controls = () => { + + return ( +
+ + + +
+ ) +}; + +export default Controls; diff --git a/src/components/Dots.tsx b/src/components/Dots.tsx index c3744da..02203ca 100644 --- a/src/components/Dots.tsx +++ b/src/components/Dots.tsx @@ -1,7 +1,7 @@ -"use client" +"use client"; import React, { useEffect, useRef } from 'react'; import p5 from 'p5'; -import styles from '../css/dots.module.css' +import styles from '../css/dots.module.css'; const Dots = () => { const sketchRef = useRef(null!); diff --git a/src/components/Model.tsx b/src/components/Model.tsx index 0059cc9..f23eacf 100644 --- a/src/components/Model.tsx +++ b/src/components/Model.tsx @@ -1,51 +1,51 @@ -"use client" import React, { useEffect, useRef } from 'react'; import * as THREE from 'three'; +const AsciiCube = () => { + const canvasRef = useRef(null!); + useEffect(() => { + const canvas = canvasRef.current; + const renderer = new THREE.WebGLRenderer({ canvas, alpha: true }); -const AsciiCube = () => { - const canvasRef = useRef(null!); - - useEffect(() => { - const canvas = canvasRef.current; - const renderer = new THREE.WebGLRenderer({ canvas/* , alpha: true */}); - - const width = 380; - const height = 170; - - canvas.style.width = `${width}px`; - canvas.style.height = `${height}px`; - - renderer.setSize(width, height); - - const scene = new THREE.Scene(); - const camera = new THREE.PerspectiveCamera( - 30, - width / height, - 0.1, - 1000 - ); - camera.position.z = 5; - - const geometry = new THREE.BoxGeometry(1, 1, 1); - const material = new THREE.MeshBasicMaterial({ color: 0xffffff, /* transparent:true */}); - const cube = new THREE.Mesh(geometry, material); - scene.add(cube); - - const animate = () => { - requestAnimationFrame(animate); - - cube.rotation.x += 0.01; - cube.rotation.y += 0.01; - - renderer.render(scene, camera); - }; - - animate(); - }, []); - - return ; - }; - - export default AsciiCube; \ No newline at end of file + const scene = new THREE.Scene(); + const camera = new THREE.PerspectiveCamera(30, 1, 0.1, 1000); + camera.position.z = 5; + + const geometry = new THREE.BoxGeometry(1, 1, 1); + const material = new THREE.MeshBasicMaterial({ color: 0xffffff, /* transparent: true */}); + const cube = new THREE.Mesh(geometry, material); + scene.add(cube); + + const animate = () => { + requestAnimationFrame(animate); + + cube.rotation.x += 0.01; + cube.rotation.y += 0.01; + + renderer.render(scene, camera); + }; + + const onWindowResize = () => { + const contenedor = canvas.parentElement; + if (contenedor) { + camera.aspect = contenedor.clientWidth / contenedor.clientHeight; + camera.updateProjectionMatrix(); + renderer.setSize(contenedor.clientWidth, contenedor.clientHeight); + } + }; + + onWindowResize(); + window.addEventListener('resize', onWindowResize); + + animate(); + + return () => { + window.removeEventListener('resize', onWindowResize); + }; + }, []); + + return ; +}; + +export default AsciiCube; \ No newline at end of file diff --git a/src/components/Terminal.tsx b/src/components/Terminal.tsx index 5a14e1e..46740de 100644 --- a/src/components/Terminal.tsx +++ b/src/components/Terminal.tsx @@ -1,10 +1,8 @@ -"use client" import React from 'react'; import { useState, useRef, useEffect } from 'react'; import styles from '../css/terminal.module.css' import { ChevronRight } from 'lucide-react'; - const Terminal = () => { const banner = [ @@ -15,10 +13,17 @@ const Terminal = () => { "╚███╔███╔╝███████╗███████╗╚██████╗╚██████╔╝██║ ╚═╝ ██║███████╗ ", " ╚══╝╚══╝ ╚══════╝╚══════╝ ╚═════╝ ╚═════╝ ╚═╝ ╚═╝╚══════╝", "", - "You can also check my social media:", - "", - "GitHub CodePen", - "Twitter Reddit", + "________________________________________________", + "| _____________________________ | Name: Bryant", + "| [][] _____________________________ [_][_][_] | Mail: bryant.0@outlook.com", + "| [][] [_][_][_] [_][_][_][_] [_][_] [_][_][_] | ", + "| | You can also check my", + "| [][] [][][][][][][][][][][][][][_] [][][][] | social media, just type", + "| [][] [_][][][][][][][][][][][][][] [][][][] | one of the following options:", + "| [][] [__][][][][][][][][][][][][_] [][][][] | ", + "| [][] [___][][][][][][][][][][][__] [__][][] | github codepen", + "| [_][______________][_] | reddit twitter", + "|______________________________________________|", "", "Type \"help\" to view the available commands" ] @@ -28,7 +33,12 @@ const Terminal = () => { "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", ] @@ -37,20 +47,29 @@ const Terminal = () => { "", "TS [█████████████▁▁▁▁▁▁▁▁▁▁] PHP [██████████████▁▁▁▁▁▁▁▁▁]", "", + "Angular[█████████__▁▁▁▁▁▁▁▁▁▁▁▁] Go [█████████████____▁▁▁▁▁▁]", + "", "React [███████████▁▁▁▁▁▁▁▁▁▁▁▁] Git [██████████████████▁▁▁▁▁▁]", + ] + const projects = [ + " _ __ _ __ ___ _________ ,___ ________,", + "( / )( / ) / ()( /( / / /( / ( ", + " /--' /--< / / / /-- / / `. ", + "/ / \\_(___/ _/_ (/____/(___/ _/ (___)", + " // ", + " (/ ", + "", + "Still working on them, most of them are private, sorry :(", ] const info = [ - "888b | 888~~ Y88b / ~~~888~~~", - "|Y88b | 888___ Y88b / 888 ", - "| Y88b | 888 Y88b/ 888 ", - "| Y88b | 888 /Y88b 888 ", + "888b | 888~~ Y88b / ~~~888~~~ This project was built with Next.js 13", + "|Y88b | 888___ Y88b / 888 The icons I used are the lucide-icons", + "| Y88b | 888 Y88b/ 888 Dots grid background was made with p5.js", + "| Y88b | 888 /Y88b 888 3D model was handled with three.js", "| Y88b| 888 / Y88b 888 ", "| Y888 888___ / Y88b 888 ", - "", - "This project was built with Next.js 13", - "The icons I used are the lucide-icons" ] const preRef = useRef(null); @@ -72,7 +91,7 @@ const Terminal = () => {
setInput(e.target.value)} onKeyDown={e=>{ @@ -91,9 +110,28 @@ const Terminal = () => { case "skills": newOutput += skills.join('\n') break; + case "projects": + newOutput += projects.join('\n') + break; case "info": newOutput += info.join('\n') break; + case "github": + newOutput += "github" + window.open("https://github.com/AB10110F", '_blank'); + break; + case "codepen": + newOutput += "codepen" + window.open("https://codepen.com/AB10110F", '_blank'); + break; + case "reddit": + newOutput += "reddit" + window.open("https://github.com/AB10110F", '_blank'); + break; + case "twitter": + newOutput += "twitter" + window.open("https://github.com/AB10110F", '_blank'); + break; case "cls": newOutput = "" break; diff --git a/src/components/Typewriter.tsx b/src/components/Typewriter.tsx index d5c1535..10bc86d 100644 --- a/src/components/Typewriter.tsx +++ b/src/components/Typewriter.tsx @@ -1,6 +1,5 @@ -"use client" import React, {useState, useEffect, useRef} from 'react'; -import localFont from 'next/font/local' +import localFont from 'next/font/local'; const dotFont = localFont({ src: '../app/e-dot-digital-7.ttf' }) diff --git a/src/css/controls.module.css b/src/css/controls.module.css new file mode 100644 index 0000000..24fa827 --- /dev/null +++ b/src/css/controls.module.css @@ -0,0 +1,30 @@ +.container +{ + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: center; + height: 100%; +} + +.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; +} + +.checkbox:checked { + 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 */ +} diff --git a/src/css/globals.css b/src/css/globals.css index fc42e73..cfe1adb 100644 --- a/src/css/globals.css +++ b/src/css/globals.css @@ -1,43 +1,8 @@ :root { - --max-width: 1100px; - --border-radius: 12px; --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; - - --foreground-rgb: 0, 0, 0; - --background-start-rgb: 214, 219, 220; - --background-end-rgb: 255, 255, 255; - - --primary-glow: conic-gradient( - from 180deg at 50% 50%, - #16abff33 0deg, - #0885ff33 55deg, - #54d6ff33 120deg, - #0071ff33 160deg, - transparent 360deg - ); - --secondary-glow: radial-gradient( - rgba(255, 255, 255, 1), - rgba(255, 255, 255, 0) - ); - - --tile-start-rgb: 239, 245, 249; - --tile-end-rgb: 228, 232, 233; - --tile-border: conic-gradient( - #00000080, - #00000040, - #00000030, - #00000020, - #00000010, - #00000010, - #00000080 - ); - - --callout-rgb: 238, 240, 241; - --callout-border-rgb: 172, 175, 176; - --card-rgb: 180, 185, 188; - --card-border-rgb: 131, 134, 135; + } @media (prefers-color-scheme: dark) { @@ -53,23 +18,6 @@ rgba(1, 65, 255, 0), rgba(1, 65, 255, 0.3) ); - - --tile-start-rgb: 2, 13, 46; - --tile-end-rgb: 2, 5, 19; - --tile-border: conic-gradient( - #ffffff80, - #ffffff40, - #ffffff30, - #ffffff20, - #ffffff10, - #ffffff10, - #ffffff80 - ); - - --callout-rgb: 20, 20, 20; - --callout-border-rgb: 108, 108, 108; - --card-rgb: 100, 100, 100; - --card-border-rgb: 200, 200, 200; } } @@ -77,25 +25,16 @@ box-sizing: border-box; padding: 0; margin: 0; + border: 0; } +::-webkit-scrollbar{height: 10px; width: 10px;} +::-webkit-scrollbar-thumb{background:#878787; border-radius: 50px;} + html, body { max-width: 100vw; overflow-x: hidden; - - border: 0; /* TODO */ - -} - -body { - color: rgb(var(--foreground-rgb)); - background: linear-gradient( - to bottom, - transparent, - rgb(var(--background-end-rgb)) - ) - rgb(var(--background-start-rgb)); } a { diff --git a/src/app/page.module.css b/src/css/page.module.css similarity index 59% rename from src/app/page.module.css rename to src/css/page.module.css index 9734abc..ac3e8ee 100644 --- a/src/app/page.module.css +++ b/src/css/page.module.css @@ -12,7 +12,7 @@ display: flex; flex-direction: row; width: 100%; - height: 72vh; + height: 75vh; gap: 25px; } @@ -26,20 +26,56 @@ .canvas { - border: 1px solid rgb(113, 113, 113); + border: 2px solid rgb(255, 255, 255); height: 40%; + animation: right 1s ease; } .bars { - border: 1px solid rgb(113, 113, 113); + border: 2px solid rgb(255, 255, 255); height: 40%; + animation: right 1.5s ease; + background: repeating-linear-gradient(90deg, #ffffff 0, #ffffff 5%, transparent 0, transparent 50%), repeating-linear-gradient(180deg, #ffffff 0, #ffffff 5%, transparent 0, transparent 50%); + background-size: 3em 3em; + background-color: #00000000; + opacity: 1; } .controls { - border: 1px solid rgb(113, 113, 113); + border: 2px solid rgb(255, 255, 255); height: 20%; + animation: right 2s ease; +} + +@keyframes right +{ + 0%{ + transform: translateX(500px); + opacity: 0%; + filter: blur(5px); + } + 75%{ + transform: translateX(-10px); + } + 100%{ + transform: translateX(0); + opacity: 100%; + } +} + +@media only screen and (max-width: 760px) +{ + .grid + { + flex-direction: column; + } + .column + { + width: 100%; + height: 1200px; + } } /* .projects { @@ -99,4 +135,4 @@ justify-content: center; align-items: center; height: 180px; -} */ \ No newline at end of file +} */ diff --git a/src/css/terminal.module.css b/src/css/terminal.module.css index 4154b1e..1ab9366 100644 --- a/src/css/terminal.module.css +++ b/src/css/terminal.module.css @@ -1,20 +1,20 @@ .terminal { animation: bottom 1s ease; - box-sizing: border-box; width: 65%; overflow-Y:auto; overflow-X:hidden; color: white; - font-size: 15px; - border: 1px solid rgb(113, 113, 113); + font-size: 2.5vh; + border: 2px solid rgb(255, 255, 255); } -@keyframes bottom{ +@keyframes bottom +{ 0%{ transform: translateY(500px); opacity: 0%; - filter: blur(5px); + filter: blur(2px); } 75%{ transform: translateY(-10px); @@ -23,14 +23,14 @@ transform: translateY(0); opacity: 100%; } - } +} .terminal::-webkit-scrollbar{height: 10px; width: 8px;} .terminal::-webkit-scrollbar-thumb{background:#878787; border-radius: 50px;} .history { - padding: 0 10px; + padding: 15px; /* white-space: pre-wrap; word-wrap: break-word; */ width: 100%; @@ -39,7 +39,7 @@ .prompt { - padding: 0 10px; + padding: 0 15px 15px 15px; } .promptDown @@ -48,15 +48,36 @@ flex-direction: row; } -.prompt svg{width: 15px;} +.prompt svg{width: 2.5vh;} .prompt input { border: none; outline: none; - width: 80%; + width: 100%; background-color: transparent; color: white; /* margin-top: 10px */; - font-size: 15px; + font-size: 2.5vh; +} + +@media only screen and (max-width: 1250px) +{ + .terminal + { + font-size: 1.8vw; + } + .prompt input + { + font-size: 1.8vw; + } +} + +@media only screen and (max-width: 760px) +{ + .terminal + { + height: 400%; + width: 100%; + } } \ No newline at end of file