diff --git a/public/icons/web/menu.svg b/public/icons/web/menu.svg new file mode 100644 index 0000000..cc4b184 --- /dev/null +++ b/public/icons/web/menu.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/app/const.js b/src/app/const.js index ffb003f..a2c1c7f 100644 --- a/src/app/const.js +++ b/src/app/const.js @@ -4,7 +4,7 @@ const GLOBALSFORMRWORLDWIDE = { cardSRC: "cardImages/", isProduction: false, - lastUpdated: "August 14, 2024" + lastUpdated: "August 17, 2024" }; export default GLOBALSFORMRWORLDWIDE; \ No newline at end of file diff --git a/src/app/content.js b/src/app/content.js index 07a9850..87f3cd1 100644 --- a/src/app/content.js +++ b/src/app/content.js @@ -18,7 +18,7 @@ const Content = ({

My previous projects!

(click for more info!)

-
+
{ data.map((obj, key) => { return ( @@ -29,7 +29,7 @@ const Content = ({ }) }
-

Content last updated {GLOBALSFORMRWORLDWIDE.lastUpdated}, and hosted on Github Pages.

+

Content last updated {GLOBALSFORMRWORLDWIDE.lastUpdated}, and hosted on Github Pages.

Disguised_Coffee ~ 2024

); diff --git a/src/app/globals.css b/src/app/globals.css index 5b78d40..e7431dc 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -133,7 +133,7 @@ body { .main-text{ - animation: title-animation 1.3s linear 0s 1 normal both running; + animation: title-animation 1.3s linear 2s 1 normal both running; } @keyframes title-animation { @@ -149,7 +149,7 @@ body { .main-captions{ animation: appear 1.3s linear 0s 1 normal both running; - animation-delay: 1.7s; + animation-delay: 3.7s; font-weight: 600; } @@ -205,4 +205,24 @@ body { /* https://unused-css.com/tools/clip-path-generator */ .customClipPath{ clip-path: polygon(0% 0%, 0% 100%, 37.05% 99.68%, 36.88% 81%, 58.23% 81%, 58.23% 89.75%, 36.88% 89.75%, 36.82% 99.68%, 100% 100%, 100% 0%); +} + +/* For trailing character, cursor is solid, but then blinks when idle */ +#trailingChar{ + animation: blink 0.75s cubic-bezier(0, 1.24, 0, 0.96) 0s infinite normal both running; +} + +@keyframes blink { + 0%,100% { + opacity: 0; + } + + 50% { + opacity: 1; + } +} + +#typedChars{ + animation: appear 0.25s linear 3s 1 normal both running; + } \ No newline at end of file diff --git a/src/app/info.json b/src/app/info.json index 117339d..8030252 100644 --- a/src/app/info.json +++ b/src/app/info.json @@ -1,6 +1,6 @@ { "about": { - "lastUpdate": "August 4, 2024", + "lastUpdate": "August 17, 2024", "qa": [ { "q": "What do you even do?", @@ -14,7 +14,7 @@ { "q": "What is your experience?", "a": [ - "As of writing, I’m an incoming college freshman that’s participated in multiple CS opportunities such as internships, hackathons, and even a robotics competition.", + "As of writing, I’m an incoming college freshman that’s participated in multiple CS opportunities such as internships, hackathons, CTFs, and even a robotics competition.", "If you mean technologies, I do Python, Java, and Javascript, with a little bit of C++.", "Also, I built this website with ReactJS." ] diff --git a/src/app/layout.js b/src/app/layout.js index 9e8c5a9..4bb19ea 100644 --- a/src/app/layout.js +++ b/src/app/layout.js @@ -16,7 +16,7 @@ export default function RootLayout({ children }) { diff --git a/src/app/page.js b/src/app/page.js index fcda9a0..d905e97 100644 --- a/src/app/page.js +++ b/src/app/page.js @@ -15,30 +15,73 @@ import bg from "../../public/np_file_17300.jpeg" import Image from "next/image"; import Content from "./content"; import Overlay from "@/components/overlay"; -import { useRef, useState } from "react"; +import { useRef, useState, useEffect} from "react"; + + +const TypingScriptDynamic = ({ + word +}) => { + + //https://blog.logrocket.com/5-ways-implement-typing-animation-react/ ;-; + + let text = word; + let delay = 10; + + const [currentText, setCurrentText] = useState(''); + const [currentIndex, setCurrentIndex] = useState(0); + + useEffect(() => { + if (currentIndex < text.length) { + const timeout = setTimeout(() => { + setCurrentText(prevText => prevText + text[currentIndex]); + setCurrentIndex(prevIndex => prevIndex + 1); + }, delay); + + return () => clearTimeout(timeout); + } + }, [currentIndex, delay, text]); + + return
{currentText}{"█"}
; +}; + const Page = ({ changeHC, passRef }) => { + let getWord = ()=>{ + let scripts = [ + 'console.log("Hello World");', + 'System.out.println("Hello World");', + 'std::cout << "Hello World" << std::endl;', + 'print("Hello World")', + 'echo "Hello World"', + 'Serial.println("Hello World");' + ] + let num = Math.round(Math.random() * scripts.length - 1) + return scripts[num]; + }; + return (
hi {/* actual */}
-
+ +

"Hello World"

-

FROM DISGUISED_COFFEE

+

FROM DISGUISED_COFFEE

-
+

Student Programmer,
- and Computer Engineer. + and Computer Engineer.

- - {/* DO SOMETHING ABOUT THIS. */} - +
    {navBarSlideButtons.map((obj, key) => { if (obj.onClick && obj.onClick !== "off") { return ( @@ -55,6 +113,7 @@ const NavBar = ({ (event) => { changeHC(obj.onClick); passRef.current.overlayOn(); + handleNavBarContextThing(false); }}> {obj.text} @@ -77,6 +136,7 @@ const NavBar = ({ }); } passRef.current.overlayOff(); + handleNavBarContextThing(false); }}> {obj.text} diff --git a/src/components/overlay.jsx b/src/components/overlay.jsx index 86c07cd..1fa8640 100644 --- a/src/components/overlay.jsx +++ b/src/components/overlay.jsx @@ -416,7 +416,7 @@ function ParseForSpecialTags({ key++; toR.push({obj}) return ( -

    +

    {toR}

    ) diff --git a/tailwind.config.js b/tailwind.config.js index dd91202..e2afc71 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -22,6 +22,7 @@ module.exports = { }, fontFamily:{ 'IBM': 'IBM Plex Sans', + 'Ubuntu-Mono' : 'Ubuntu Mono' }, dropShadow:{ "highlight":'2px 1px 2px var(--main-text-highlight)',