KnightHacks Dev Application

.env.example

@@ -8,30 +8,30 @@ DATABASE_URL="postgresql://root:mysecretpassword@localhost:5432/local"
 BETTER_AUTH_SECRET=""
 
 # Stripe
-NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=""
-STRIPE_SECRET_KEY=""
-STRIPE_SECRET_WEBHOOK_KEY=""
+NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY="asdasdasdasdasdasd"
+STRIPE_SECRET_KEY="asdasdasdasdasdasdasd"
+STRIPE_SECRET_WEBHOOK_KEY="asdasdasdasdasdasdasd"
 
 # Discord
-DISCORD_BOT_TOKEN=""
-DISCORD_CLIENT_ID=""
+DISCORD_BOT_TOKEN="asdasdasdasdasdasd"
+DISCORD_CLIENT_ID="asdasdasdasdasdasd"
 DISCORD_CLIENT_SECRET=""
-DISCORD_DAILY_ANIMAL_WEBHOOK_URL=""
-DISCORD_LEETCODE_DAILY_WEBHOOK_URL=""
-DISCORD_DAILY_REMINDERS_WEBHOOK_URL=""
-DISCORD_PRE_DAILY_REMINDERS_WEBHOOK_URL=""
-DISCORD_WEATHER_API_KEY=""
+DISCORD_DAILY_ANIMAL_WEBHOOK_URL="asdasdasdasdasdasd"
+DISCORD_LEETCODE_DAILY_WEBHOOK_URL="asdasdasdasdasdasd"
+DISCORD_DAILY_REMINDERS_WEBHOOK_URL="asdasdasdasdasdasd"
+DISCORD_PRE_DAILY_REMINDERS_WEBHOOK_URL="asdasdasdasdasdasd"
+DISCORD_WEATHER_API_KEY="asdasdasdasdasdasd"
 
 # Google
-GOOGLE_PRIVATE_KEY_B64=""
-GOOGLE_CLIENT_EMAIL=""
+GOOGLE_PRIVATE_KEY_B64="asdasdasdasdasdasd"
+GOOGLE_CLIENT_EMAIL="stevie@gmail.com"
 
 # Minio
-MINIO_ENDPOINT=""
-MINIO_ACCESS_KEY=""
-MINIO_SECRET_KEY=""
+MINIO_ENDPOINT="asdasdasdasdasdasd"
+MINIO_ACCESS_KEY="asdasdasdasdasdasd"
+MINIO_SECRET_KEY="asdasdasdasdasdasd"
 #can I get a cheese burger
-BLADE_URL=""
+BLADE_URL="asdasdasdasdasdasd"
 
 # Passkit
 WWDR_CERT_BASE64=
@@ -42,5 +42,5 @@ PASS_TYPE_IDENTIFIER=
 TEAM_IDENTIFIER=
 
 #Resend
-RESEND_API_KEY=""
-RESEND_FROM_EMAIL=""
+RESEND_API_KEY="asdasdasdasdasdasdasd"
+RESEND_FROM_EMAIL="asdasdasdasdasdasdasd"

apps/blade/package.json

@@ -39,6 +39,7 @@
     "canvas-confetti": "^1.9.3",
     "csv-parse": "^6.1.0",
     "csv-stringify": "^6.6.0",
+    "framer-motion": "^12.0.1",
     "geist": "^1.3.1",
     "google-auth-library": "^9.15.0",
     "googleapis": "^144.0.0",

apps/blade/src/app/components/AnimatedInfo.tsx

@@ -0,0 +1,165 @@
+"use client";
+
+import { useRef } from "react";
+import Image from "next/image";
+import { motion, useInView } from "framer-motion";
+
+const AnimatedInfo = () => {
+  const ref = useRef(null);
+  const isInView = useInView(ref, { once: true });
+
+  const outerDivVariants = {
+    hidden: {},
+    show: {
+      transition: {
+        staggerChildren: 0.4,
+        delayChildren: 0.5,
+      },
+    },
+  };
+
+  const textBoxVariants = {
+    hidden: {
+      x: 100,
+      opacity: 0,
+    },
+    show: {
+      opacity: 1,
+      x: 0,
+      transition: {
+        duration: 1,
+      },
+    },
+  };
+
+  return (
+    <motion.div
+      ref={ref}
+      variants={outerDivVariants}
+      initial="hidden"
+      animate={isInView ? "show" : "hidden"}
+      className="flex h-full w-full flex-col items-center justify-center gap-3"
+    >
+      <motion.div
+        variants={textBoxVariants}
+        className="relative z-20 flex h-[20%] w-full border-2 border-white bg-gray-800 shadow-md shadow-white"
+      >
+        <div className="w-[80%] bg-gray-900 pl-1">
+          <h1 className="font-bold md:text-xl xl:text-2xl 2xl:text-3xl">
+            Hi, I'm Noah!
+          </h1>
+          <div className="h-[calc(100%-1.5rem)] overflow-y-auto text-[.65rem] md:text-[.9rem] xl:text-[1.1rem] 2xl:text-[1.3rem]">
+            I'm a first year Computer Science Major at UCF and an active
+            KnightHacks Member/former kickstart mentee. Click the buttons on the
+            right to see my resume, LinkedIn, Github, and Portfolio!
+          </div>
+        </div>
+        <div className="flex w-[30%] items-center justify-center">
+          <div className="grid grid-cols-2 gap-x-3 gap-y-1">
+            <a href="/resume.pdf" target="_blank" rel="noopener noreferrer">
+              <div className="relative flex h-8 w-8 cursor-pointer items-center justify-center rounded-full border-2 bg-white transition-colors duration-300 hover:bg-gray-400 md:h-10 md:w-10 xl:h-16 xl:w-16">
+                <div className="relative h-5 w-5 xl:h-10 xl:w-10">
+                  <Image
+                    src="/noah_img/resume.svg"
+                    fill
+                    style={{ objectFit: "contain" }}
+                    alt="Resume"
+                  ></Image>
+                </div>
+              </div>
+            </a>
+            <a
+              href="https://www.linkedin.com/in/noah-lerner-59b651384/"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <div className="relative flex h-8 w-8 cursor-pointer items-center justify-center rounded-full border-2 bg-white transition-colors duration-300 hover:bg-gray-400 md:h-10 md:w-10 xl:h-16 xl:w-16">
+                <div className="relative h-5 w-5 xl:h-10 xl:w-10">
+                  <Image
+                    src="/noah_img/linkedin.svg"
+                    fill
+                    style={{ objectFit: "contain" }}
+                    alt="Linkedin"
+                  ></Image>
+                </div>
+              </div>
+            </a>
+            <a
+              href="https://github.com/lernej"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <div className="relative flex h-8 w-8 cursor-pointer items-center justify-center rounded-full border-2 bg-white transition-colors duration-300 hover:bg-gray-400 md:h-10 md:w-10 xl:h-16 xl:w-16">
+                <div className="relative h-5 w-5 xl:h-10 xl:w-10">
+                  <Image
+                    src="/noah_img/github.svg"
+                    fill
+                    style={{ objectFit: "contain" }}
+                    alt="Github"
+                  ></Image>
+                </div>
+              </div>
+            </a>
+            <a
+              href="https://nlerner.dev/"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <div className="relative flex h-8 w-8 cursor-pointer items-center justify-center rounded-full border-2 bg-white transition-colors duration-300 hover:bg-gray-400 md:h-10 md:w-10 xl:h-16 xl:w-16">
+                <div className="relative h-5 w-5 xl:h-10 xl:w-10">
+                  <Image
+                    src="/noah_img/portfolio.svg"
+                    fill
+                    style={{ objectFit: "contain" }}
+                    alt="Portfolio"
+                  ></Image>
+                </div>
+              </div>
+            </a>
+          </div>
+        </div>
+      </motion.div>
+      <motion.div
+        variants={textBoxVariants}
+        className="relative z-20 h-[25%] w-full border-2 border-white bg-gray-900 pl-1 shadow-md shadow-white"
+      >
+        <h1 className="font-bold md:text-xl xl:text-2xl 2xl:text-3xl">
+          Why Me?
+        </h1>
+        <div className="h-[calc(100%-2rem)] overflow-y-auto text-[.65rem] md:text-[.9rem] xl:text-[1.1rem] 2xl:text-[1.3rem]">
+          Though I have only been a club member for a short time, the
+          hackathons, club meetings, and mentor/mentee sessions I've attended
+          have endlessly inspired me and fueled my motivation to learn. If
+          selected, I will approach every task with curiosity and focused
+          effort, applying the skills I have gained so far while learning new
+          ones whenever necessary.
+        </div>
+      </motion.div>
+      <motion.div
+        variants={textBoxVariants}
+        className="relative z-20 h-[25%] w-full border-2 border-white bg-gray-900 pl-1 shadow-md shadow-white"
+      >
+        <h1 className="font-bold md:text-xl xl:text-2xl 2xl:text-3xl">
+          About AI Use
+        </h1>
+        <div className="h-[calc(100%-1.5rem)] overflow-y-auto text-[.65rem] md:text-[.9rem] xl:text-[1.1rem] 2xl:text-[1.3rem]">
+          Unlike the graphic, I WON'T use AI to center divs or write for loops.
+          I see LLMs as a tool rather than a crutch and treat their responses
+          like any other potentially unreliable source of information. When I'm
+          inevitably confronted with a problem that I do not know how to handle,
+          I'll only use AI to supplement my learning, not to replace it.
+        </div>
+      </motion.div>
+      <motion.div
+        variants={textBoxVariants}
+        className="relative z-20 flex h-[15%] w-full items-center justify-center border-2 border-white bg-gray-900 pl-1 shadow-md shadow-white"
+      >
+        <div className="font-mono font-bold italic md:text-xl lg:text-2xl">
+          THANK YOU FOR YOUR CONSIDERATION!
+        </div>
+      </motion.div>
+    </motion.div>
+  );
+};
+
+export default AnimatedInfo;

apps/blade/src/app/components/MotionDiv.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import type { ReactElement } from "react";
+import { motion } from "framer-motion";
+
+interface Props {
+  children: ReactElement;
+}
+
+const MotionDiv = ({ children }: Props) => {
+  return (
+    <motion.div
+      className="h-full w-full"
+      initial={{
+        opacity: 0,
+        x: -50,
+        y: 20,
+        scale: 1,
+      }}
+      whileInView={{
+        opacity: 1,
+        x: 0,
+        y: 0,
+        scale: 1,
+        transition: { duration: 1, delay: 2 },
+      }}
+      viewport={{ once: true }}
+    >
+      {children}
+    </motion.div>
+  );
+};
+
+export default MotionDiv;

apps/blade/src/app/components/ShootingStars.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+const ShootingStars = () => {
+  const [positionX, setPositionX] = useState(50);
+  const [positionY, setPositionY] = useState(50);
+  const [starKey, setStarKey] = useState(0);
+  const [animationDelay, setAnimationDelay] = useState(1);
+  const [duration, setDuration] = useState(0);
+
+  const [windowWidth, setWindowWidth] = useState(0);
+  const [windowHeight, setWindowHeight] = useState(0);
+
+  useEffect(() => {
+    const spawnsOnTop = Math.random() < 0.5;
+
+    const dx = window.innerWidth;
+    const dy = window.innerHeight;
+
+    setWindowWidth(dx);
+    setWindowHeight(dy);
+
+    const speed = 800;
+
+    const distance = Math.hypot(dx, dy);
+    const newDuration = distance / speed;
+
+    setDuration(newDuration);
+
+    setPositionX(spawnsOnTop ? Math.random() * 100 : 110);
+    setPositionY(spawnsOnTop ? -10 : Math.random() * 100);
+
+    setAnimationDelay(Math.random() * 5 + 1);
+  }, [starKey]);
+
+  return (
+    <div
+      key={starKey}
+      className={`animate-shoot absolute z-[5] h-[1px] w-3 -rotate-45 rounded-full bg-white`}
+      style={
+        {
+          left: `${positionX}%`,
+          top: `${positionY}%`,
+          animationDelay: `${animationDelay}s`,
+          "--dx": `${windowWidth}px`,
+          "--dy": `${windowHeight}px`,
+          "--duration": `${duration}s`,
+        } as React.CSSProperties
+      }
+      onAnimationEnd={() => {
+        setStarKey((k) => k + 1);
+      }}
+    ></div>
+  );
+};
+
+export default ShootingStars;

apps/blade/src/app/components/Stars.tsx

@@ -0,0 +1,22 @@
+const Stars = () => {
+  const stars = Array.from({ length: 100 }).map((_, index) => {
+    const top = Math.random() * 100;
+    const left = Math.random() * 100;
+
+    return (
+      <div
+        key={index}
+        className="absolute h-1 w-1 rounded-full bg-white"
+        style={{
+          top: `${top}%`,
+          left: `${left}%`,
+        }}
+      ></div>
+    );
+  });
+  return (
+    <div className="absolute z-0 h-full w-full overflow-clip">{stars}</div>
+  );
+};
+
+export default Stars;