yes

Development branch
Disguised-Coffee · Aug 18, 2024 · 6bebe7a · 6bebe7a
2 parents 347b2b3 + 71a6ce1
commit 6bebe7a
Show file tree

Hide file tree

Showing 11 changed files with 167 additions and 35 deletions.
diff --git a/public/icons/web/menu.svg b/public/icons/web/menu.svg
diff --git 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;
diff --git a/src/app/content.js b/src/app/content.js
@@ -18,7 +18,7 @@ const Content = ({
                 <h1 className="font-semibold text-[2rem] text-center">My previous projects!</h1>
                 <p className="text-center">(click for more info!)</p>
             </div>
-            <div className="w-[60vw] flex flex-wrap justify-center min-h-[90vh] ml-auto mr-auto mb-[2vh]">
+            <div className="w-[100vw] sm:w-[80vw] xl:w-[60vw] flex flex-wrap justify-center min-h-[90vh] ml-auto mr-auto mb-[2vh]">
                 {
                     data.map((obj, key) => {
                         return (
@@ -29,7 +29,7 @@ const Content = ({
                     })
                 }
             </div>
-            <p className="">Content last updated {GLOBALSFORMRWORLDWIDE.lastUpdated}, and hosted on Github Pages.</p>
+            <p className="w-[80vw] text-center">Content last updated {GLOBALSFORMRWORLDWIDE.lastUpdated}, and hosted on Github Pages.</p>
             <p className="italic font-semibold text-[0.7rem] mt-[0.7rem]">Disguised_Coffee ~ 2024</p>
         </div >
     );

diff --git 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;
+
 }
diff --git 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
@@ -16,7 +16,7 @@ export default function RootLayout({ children }) {
     <html lang="en" className="overflow-y-hidden">
       <head>
         <link
-          href="https://fonts.googleapis.com/css?family=Lato:light,lightitalic,bold,bolditalic,italic%7CIBM+Plex+Sans:bold,bolditalic,italic,400%7CBree+Serif%7CUbuntu:bold,bolditalic,italic%7CTS+Block"
+          href="https://fonts.googleapis.com/css?family=Lato:light,lightitalic,bold,bolditalic,italic%7CIBM+Plex+Sans:bold,bolditalic,italic,400%7CBree+Serif%7CUbuntu:bold,bolditalic,italic%7CTS+Block%7CUbuntu+Mono"
           rel="stylesheet"
         />
       </head>

diff --git 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 <div className="absolute top-[10vh] left-[2vw] font-Ubuntu-Mono">{currentText}<span id="trailingChar">{"█"}</span></div>;
+};
+
 
 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 (
     <div className="fixed [scroll-snap-align:_start_none] h-[100vh] pt-[0vh] text-white z-[0]">
       <Image className="object-cover h-full w-full" src={bg} alt="hi" />
       {/* actual  */}
       <div className="whitespace-nowrap w-[100vw]">
-        <div className="absolute top-[30vh] text-[4.375rem] blah-text left-[2vw]">
+        <TypingScriptDynamic word={getWord()}/>
+        <div className="absolute top-[30vh] 
+                        text-[1.5rem]
+                        sm:text-[3.375rem]
+                        md:text-[4.375rem] blah-text left-[1vw] ">
           <h1 className="main-text font-[Ubuntu] italic">&quot;Hello World&quot;</h1>
-          <h1 className="[animation-delay:0.6s_!important] main-text absolute left-[4rem]">FROM DISGUISED_COFFEE</h1>
+          <h1 className="w-[90vw] [animation-delay:2.7s_!important] main-text absolute left-[2rem] sm:left-[4rem]">FROM DISGUISED_COFFEE</h1>
         </div>
-        <div className="absolute left-[2vw] bottom-[11vh] lazycssthing flex flex-col items-center text-center mt-[100vh]">
+        <div className="absolute left-[2vw] bottom-[16vh] sm:bottom-[11vh] lazycssthing flex flex-col items-center text-center mt-[100vh]">
           <h2 className="text-[1.7rem]">
             <span className="main-captions">Student Programmer,</span><br />
-            <span className="main-captions [animation-delay:2.5s_!important]">and Computer Engineer.</span>
+            <span className="main-captions [animation-delay:4.5s_!important]">and Computer Engineer.</span>
           </h2>
-
-
           {/* DO SOMETHING ABOUT THIS. */}
-          <button className="btn mt-[2rem] py-[0.5rem] px-[1.2rem] text-[1.2rem] select-all main-captions [animation-delay:3.1s_!important]"
+          <button className="btn mt-[2rem] py-[0.5rem] px-[1.2rem] text-[1.2rem] select-all main-captions [animation-delay:5s_!important]"
             onClick={
               (event) => {
                 changeHC("about");
@@ -63,7 +106,7 @@ export default function Home() {
       <NavBar changeHC={changeHC} passRef={overlayRef} />
       <Overlay hc={hoverContent} ref={overlayRef} />
       <Page changeHC={changeHC} passRef={overlayRef} />
-      <div id="scrollingPage" className="customClipPath [overflow-y:_scroll] [scroll-snap-type:_y_mandatory] w-[105vw] h-[100vh] relative overflow-auto"
+      <div id="scrollingPage" className="customClipPath overscroll-none [overflow-y:_scroll] [scroll-snap-type:_y_mandatory] w-[105vw] h-[100vh] relative overflow-auto"
         onScroll={(e) => {
           if (typeof window === 'object') {
             let toChange = document.getElementById("scrollingPage");

diff --git a/src/components/cards.jsx b/src/components/cards.jsx
@@ -83,7 +83,8 @@ const Card =
     let DesignationName = ()=>{
         if(dn){
             return(
-                <h3 className="pt-[0.25rem] text-[0.76rem] italic">
+                <h3 className="pt-[0.25rem] italic
+                                text-[0.76rem]">
                         {("\"" + dn + "\"")}
                 </h3>
             )
@@ -95,7 +96,8 @@ const Card =
 
     return (
         <div className="w-auto relative m-2 aspect-[301.92/306.06] 
-                          h-[34vh] overflow-hidden rounded 
+                          h-[21vh] sm:h-[34vh] 
+                          overflow-hidden rounded 
                           shadow-[10px_10px_0px_#3E3D3D] m-4
                           hover:scale-[105%] group ease-in-out duration-300 cursor-pointer" onClick={() =>{ testFunc(title)}}>
             {image ? <img className="object-cover h-full w-full filter brightness-50 blur-[1px]" src={(image ? GLOBALSFORMRWORLDWIDE.cardSRC + image.src : "" )} alt={image.alt ? image.alt : ("project" + counter)} /> 
@@ -106,7 +108,9 @@ const Card =
                 {/* Title of project */}
                 <h2
                     className={`text-white font-bold m-0 leading-[2rem] 
-                                text-[1.5rem] w-[100%] text-center ${(title == "OPPA STOPPA") ? "oppaStoppa" : ""}`}>
+                                text-[1rem] sm:text-[1.5rem]
+                                leading-4 sm:leading-none
+                                w-[100%] text-center ${(title == "OPPA STOPPA") ? "oppaStoppa" : ""}`}>
                     {title}
                 </h2>
                 {/* designation name []*/}
@@ -116,7 +120,7 @@ const Card =
             {/* div for absolute stuff */}
             <div className="absolute h-full w-full z-[0] top-[0] flex justify-center">
                 {/* div for tech icons []*/}
-                <div className="absolute flex justify-center flex-col bottom-[1vh] opacity-0 group-hover:opacity-100 ease-in-out duration-300">
+                <div className="absolute hidden sm:flex justify-center flex-col bottom-[1vh] opacity-0 group-hover:opacity-100 ease-in-out duration-300">
                     <h4 className="italic text-center text-white text-[0.9rem]">Made with</h4>
                     <div className="flex justify-center h-max">
                         {

diff --git a/src/components/navbar.jsx b/src/components/navbar.jsx
@@ -4,6 +4,7 @@
 import Image from 'next/image'
 import dcLogo from '../../public/dcLogo.png'
 import { useRef } from 'react';
+import menu from '../../public/icons/web/menu.svg'
 
 const NavBar = ({
   changeHC,
@@ -25,26 +26,83 @@ const NavBar = ({
   ]
 
   const logo = useRef(null),
-    logoText = useRef(null);
+    logoText = useRef(null),
+    navBarButtons = useRef(null);
 
-  const scrollToBottom = () => {
-    console.log("ASdasds")
-    console.log(window.scrollBy)
-    window.scrollBy(100, 0);
 
-    window.scrollTo({
-      top: 200,
-      behavior: "smooth"
-    });
-  };
+  let isNavContextOn = false;
+
+
+  //this is a pain to look at.
+  function findIfContext(e){
+    let iteratingTarget = e.target;
+      do{
+
+        //the button
+        if(iteratingTarget === document.getElementById("context")){
+          return false;
+        }
+        //is the context menu, do nothing.
+        if(iteratingTarget === navBarButtons.current){
+          return false;
+        }
+        iteratingTarget = iteratingTarget.parentNode;
+        if(!(iteratingTarget)){
+          return(true)
+        }
+      }while (iteratingTarget)
+  }
+
+  //onclick event listener for window
+  if (typeof window === 'object') {
+
+    document.addEventListener("click", (e) => {
+      if(findIfContext(e)){
+        handleNavBarContextThing(false);
+      }
+    })
+  }
+
+
+  let handleNavBarContextThing = (changeNav) => {
+    if(window.innerWidth <= 640){
+      if (changeNav) {
+        navBarButtons.current.style.display = "flex";
+      }
+      else {
+        navBarButtons.current.style.display = "none";
+      }
+      isNavContextOn = changeNav;
+    }
+    // isNavContextOn = !isNavContextOn; //doesn't work since func is called twice ;-;
+  }
 
   return (
     <nav className="top-0 fixed h-[8vh] bg-topBar w-full text-white flex flex-center drop-shadow-custom z-30">
       <a className="flex items-center pl-[10px]" href="/">
-        <Image ref={logo} className="h-[3rem] max-w-full w-auto pr-[10px]" src={dcLogo} alt="hi" />
-        <h1 ref={logoText} className="text-[2rem] italic ">Disguised_Coffee</h1>
+        <Image ref={logo} className="h-[2rem] xl:h-[3rem] max-w-full w-auto mr-[10px] " src={dcLogo} alt="Disguised Coffee Logo"/>
+        <h1 ref={logoText} className="text-[1.76rem] xl:text-[2rem] italic ">Disguised_Coffee</h1>
       </a>
-      <ul className="absolute right-0 top-0 flex-center h-[8vh] items-center hidden xl:flex pr-[2rem]">
+      <button
+        onClick={
+          ()=>{
+            handleNavBarContextThing(true)
+          }
+        }
+        className="absolute right-[1vw] 
+                  top-[10%] w-[3rem]
+                  block sm:hidden">
+        <Image src={menu} id='context' className='h-[3rem]' alt='Menu Context button'/>
+      </button>
+      <ul ref={navBarButtons} className="absolute right-0 top-[8vh] 
+                                        sm:top-0 
+                                        flex-col sm:flex-row flex-center h-[8vh] items-center 
+                                        hidden sm:flex 
+                                        mr-[2rem]
+                                        bg-void
+                                        sm:bg-transparent
+                                        h-auto
+                                        ">
         {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}
                 </a>
@@ -77,6 +136,7 @@ const NavBar = ({
                           });
                       }
                       passRef.current.overlayOff();
+                      handleNavBarContextThing(false);
                     }}>
                   {obj.text}
                 </a>

diff --git a/src/components/overlay.jsx b/src/components/overlay.jsx
@@ -416,7 +416,7 @@ function ParseForSpecialTags({
         key++;
         toR.push(<span key={key}>{obj}</span>)
         return (
-            <p className="font-medium leading-9 h-[48vh] overflow-y-auto">
+            <p key={key} className="font-medium leading-9 h-[48vh] overflow-y-auto">
                 {toR}
             </p>
         )

diff --git 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)',