Add files via upload

Author: twizzycodes

twizzy.gg/src/components/AboutCard.tsx

@@ -0,0 +1,41 @@
+import { motion } from "framer-motion";
+import Divider from "@/components/Divider";
+import TechBadge from "@/components/TechBadge";
+import Marquee from "react-fast-marquee";
+import type { Tech } from "../../typings";
+
+export default function AboutCard({ title, description, tech, direction, span, gradient, delay }: { title: string, description: string, tech?: Tech[], direction: 'top' | 'bottom' | 'left' | 'right', span: 1 | 2, gradient: string, delay: number }) {
+    return (
+        <>
+            <motion.li
+                className={`${span === 1 ? 'min-[940px]:col-span-1 col-span-2' : 'col-span-2'} `}
+                initial={{ transform: `translate${direction === 'top' || direction === 'bottom' ? 'Y' : 'X'}(${direction === 'top' || direction === 'left' ? '-' : ''}30px)`, opacity: 0 }}
+                whileInView={{ transform: `translate${direction === 'top' || direction === 'bottom' ? 'Y' : 'X'}(0px)`, opacity: 100 }}
+                transition={{ duration: 0.5, delay: delay, ease: [0.39, 0.21, 0.12, 0.96], }}
+                viewport={{ amount: 0.1, once: true }}
+            >
+                <div className={`${gradient} from-primary to-secondary p-4 flex flex-col rounded-lg border-1 border-accent shadow-2xl shadow-background`}>
+                    <h2 className="text-center font-semibold text-4xl">
+                        {title}
+                    </h2>
+                    <p className="text-center text-xl mb-2">
+                        {description}
+                    </p>
+                    {tech &&
+                        <>
+                            <Divider />
+                            <Marquee pauseOnHover speed={70} className="my-2">
+                                <ul className="flex flex-row">
+                                    {tech.map((tech: Tech) => (
+                                        <TechBadge key={tech.title} title={tech.title} icon={tech.icon} link={tech.link} />
+                                    ))}
+                                </ul>
+                            </Marquee>
+                            <Divider />
+                        </>
+                    }
+                </div>
+            </motion.li>
+        </>
+    );
+}

twizzy.gg/src/components/Button.tsx

@@ -0,0 +1,7 @@
+export default function Button({ label, onClick, width }: { label: string, onClick: () => void, width: string }) {
+    return (
+        <button onClick={onClick} className={`${width} bg-secondary hover:bg-accent duration-300 border-1 border-accent px-2 py-1.5 text-lg font-medium flex items-center justify-center rounded-lg`}>
+            {label}
+        </button>
+    );
+}

twizzy.gg/src/components/CursorSparkles.tsx

@@ -0,0 +1,89 @@
+import { useEffect, useState } from 'react';
+
+interface Sparkle {
+  id: number;
+  x: number;
+  y: number;
+  opacity: number;
+  vx: number;
+  vy: number;
+  size: number;
+}
+
+export default function CursorSparkles() {
+  const [sparkles, setSparkles] = useState<Sparkle[]>([]);
+  const [sparkleId, setSparkleId] = useState(0);
+
+  useEffect(() => {
+    const handleMouseMove = (e: MouseEvent) => {
+      // Create a few sparkles at the cursor position
+      const newSparkles: Sparkle[] = [];
+      const sparkleCount = 2;
+      
+      for (let i = 0; i < sparkleCount; i++) {
+        const angle = Math.random() * Math.PI * 2;
+        const speed = 0.5 + Math.random() * 1;
+        const vx = Math.cos(angle) * speed;
+        const vy = Math.sin(angle) * speed;
+        const size = 2 + Math.random() * 3;
+        
+        newSparkles.push({
+          id: sparkleId + i,
+          x: e.clientX,
+          y: e.clientY,
+          opacity: 1,
+          vx,
+          vy,
+          size,
+        });
+      }
+      
+      setSparkleId(prev => prev + sparkleCount);
+      setSparkles(prev => [...prev, ...newSparkles]);
+    };
+
+    window.addEventListener('mousemove', handleMouseMove);
+
+    // Animate sparkles
+    const interval = setInterval(() => {
+      setSparkles(prev => 
+        prev
+          .map(sparkle => ({
+            ...sparkle,
+            x: sparkle.x + sparkle.vx,
+            y: sparkle.y + sparkle.vy,
+            opacity: sparkle.opacity - 0.03,
+            vx: sparkle.vx * 0.98,
+            vy: sparkle.vy * 0.98,
+          }))
+          .filter(sparkle => sparkle.opacity > 0)
+      );
+    }, 16); // ~60fps
+
+    return () => {
+      window.removeEventListener('mousemove', handleMouseMove);
+      clearInterval(interval);
+    };
+  }, [sparkleId]);
+
+  return (
+    <div className="fixed inset-0 pointer-events-none z-[9999]">
+      {sparkles.map(sparkle => (
+        <div
+          key={sparkle.id}
+          className="absolute rounded-full bg-white"
+          style={{
+            left: `${sparkle.x}px`,
+            top: `${sparkle.y}px`,
+            width: `${sparkle.size}px`,
+            height: `${sparkle.size}px`,
+            opacity: sparkle.opacity,
+            transform: 'translate(-50%, -50%)',
+            boxShadow: `0 0 ${sparkle.size * 2}px ${sparkle.size}px rgba(255, 255, 255, ${sparkle.opacity * 0.8})`,
+          }}
+        />
+      ))}
+    </div>
+  );
+}
+

twizzy.gg/src/components/Divider.tsx

@@ -0,0 +1,3 @@
+export default function Divider() {
+  return (<div className="h-0.5 w-full rounded-lg bg-gradient-to-r from-secondary via-accent to-secondary" />);
+}

twizzy.gg/src/components/ExperienceCard.tsx

@@ -0,0 +1,84 @@
+import { motion } from "framer-motion";
+import Link from "next/link";
+import { useState } from "react";
+import Modal from "@/components/Modal";
+import MediaCarousel from "@/components/MediaCarousel";
+import Button from "@/components/Button";
+import LinkButton from "@/components/LinkButton";
+import Divider from "@/components/Divider";
+
+export default function ExperienceCard({ url, title, fullDescription, cardDescription, cardImage, media, delay, gradient, myRole, timeline }: { url?: string, title: string, fullDescription: string[], cardDescription: string, cardImage: string, media: string[], delay: number, gradient: string, myRole: string, timeline: string }) {
+    const [modalOpen, setModalOpen] = useState(false);
+
+    return (
+        <>
+            <motion.li
+                className="group flex"
+                initial={{ transform: 'translateY(-30px)', opacity: 0 }}
+                whileInView={{ transform: 'translateY(0px)', opacity: 100 }}
+                transition={{ duration: 0.5, delay: delay, ease: [0.39, 0.21, 0.12, 0.96], }}
+                viewport={{ amount: 0.1, once: true }}
+            >
+                <div className={`p-4 flex md:flex-row flex-col gap-6 ${gradient} from-primary to-secondary rounded-lg border-1 border-accent shadow-2xl shadow-background items-center`}>
+                    <img alt="" draggable={false} className="rounded-lg md:h-[14rem] sm:h-[12rem] h-[10rem] duration-300" src={cardImage} />
+                    <div className="flex flex-col">
+                        <h2 className="md:text-left text-center font-semibold text-4xl">
+                            {myRole}
+                        </h2>
+                        <h3 className="md:text-left text-center font-normal text-2xl">
+                            {title} | <span className="brightness-75">{timeline}</span>
+                        </h3>
+                        <Divider />
+                        <p className="md:text-left text-center text-lg mt-1">
+                            {cardDescription}
+                        </p>
+                        <div className="flex row gap-4 mt-2">
+                            {url &&
+                                <LinkButton label="Visit Website" link={url} width="w-1/2" />
+                            }
+                            <Button label="View More" onClick={() => setModalOpen(true)} width={`${url ? 'w-1/2' : 'w-full'}`} />
+                        </div>
+                    </div>
+                    <Modal open={modalOpen} setOpen={setModalOpen}>
+                        <MediaCarousel media={media} />
+                        <div className="flex lg:flex-row flex-col justify-between mt-6 px-3">
+                            <div className="flex flex-col">
+                                <div className="flex flex-row gap-2 items-center">
+                                    <h1 className="sm:text-4xl text-3xl font-bold">{title}</h1>
+                                    {url &&
+                                        <Link href={url} target="_blank" className="bg-middle hover:bg-secondary duration-300 border-1 border-accent p-1.5 rounded-full">
+                                            <svg xmlns="http://www.w3.org/2000/svg" className="w-6 h-6 fill-white" viewBox="0 0 16 16">
+                                                <path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1 1 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4 4 0 0 1-.128-1.287z" />
+                                                <path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243z" />
+                                            </svg>
+                                        </Link>
+                                    }
+                                </div>
+                                <div className="flex flex-col mt-2">
+                                    <h2 className="sm:text-2xl text-xl font-semibold">My Role</h2>
+                                    <p className="sm:text-lg text-base">{myRole}</p>
+                                </div>
+                                <div className="flex flex-col mt-2">
+                                    <h2 className="sm:text-2xl text-xl font-semibold">Timeline</h2>
+                                    <p className="sm:text-lg text-base">{timeline}</p>
+                                </div>
+                            </div>
+                            <div className="w-auto h-0.5 bg-accent rounded-lg lg:hidden block my-2" />
+                            <div className="w-0.5 h-auto bg-accent rounded-lg lg:block hidden" />
+                            <div className="flex flex-col">
+                                <h2 className="sm:text-2xl text-xl font-semibold">
+                                    Overview
+                                </h2>
+                                <div className="max-h-[16.5rem] overflow-y-auto bg-neutral-800 border-1 border-accent rounded-lg p-2">
+                                    {fullDescription.map((desc, i) => (
+                                        <p key={i} className="sm:text-lg text-base first:mt-0 mt-2 max-w-[28rem]">{desc}</p>
+                                    ))}
+                                </div>
+                            </div>
+                        </div>
+                    </Modal>
+                </div>
+            </motion.li>
+        </>
+    );
+}

twizzy.gg/src/components/GridPattern.tsx

@@ -0,0 +1,73 @@
+import { useId } from "react";
+
+import { cn } from "@/lib/utils";
+
+// MagicUI Component
+// https://magicui.design/docs/components/grid-pattern
+
+interface GridPatternProps {
+  width?: any;
+  height?: any;
+  x?: any;
+  y?: any;
+  squares?: Array<[x: number, y: number]>;
+  strokeDasharray?: any;
+  className?: string;
+  [key: string]: any;
+}
+
+export function GridPattern({
+  width = 40,
+  height = 40,
+  x = -1,
+  y = -1,
+  strokeDasharray = 0,
+  squares,
+  className,
+  ...props
+}: GridPatternProps) {
+  const id = useId();
+
+  return (
+    <svg
+      aria-hidden="true"
+      className={cn(
+        "pointer-events-none absolute inset-0 h-full w-full fill-primary stroke-primary",
+        className,
+      )}
+      {...props}
+    >
+      <defs>
+        <pattern
+          id={id}
+          width={width}
+          height={height}
+          patternUnits="userSpaceOnUse"
+          x={x}
+          y={y}
+        >
+          <path
+            d={`M.5 ${height}V.5H${width}`}
+            fill="none"
+            strokeDasharray={strokeDasharray}
+          />
+        </pattern>
+      </defs>
+      <rect width="100%" height="100%" strokeWidth={0} fill={`url(#${id})`} />
+      {squares && (
+        <svg x={x} y={y} className="overflow-visible">
+          {squares.map(([x, y]) => (
+            <rect
+              strokeWidth="0"
+              key={`${x}-${y}`}
+              width={width - 1}
+              height={height - 1}
+              x={x * width + 1}
+              y={y * height + 1}
+            />
+          ))}
+        </svg>
+      )}
+    </svg>
+  );
+}

twizzy.gg/src/components/LinkButton.tsx

@@ -0,0 +1,9 @@
+import Link from "next/link";
+
+export default function LinkButton({ label, link, width }: { label: string, link: string, width: string }) {
+    return (
+        <Link href={link} target="_blank" className={`${width} bg-secondary hover:bg-accent duration-300 border-1 border-accent px-2 py-1.5s text-lg font-medium flex items-center justify-center rounded-lg`}>
+            {label}
+        </Link>
+    );
+}

twizzy.gg/src/components/MediaCarousel.tsx

@@ -0,0 +1,69 @@
+import { useEffect, useRef, useState } from 'react'
+import { ArrowLeft, ArrowRight } from 'lucide-react'
+
+export default function MediaCarousel({ media }: { media: string[] }) {
+    const [currentMedia, setCurrentMedia] = useState(0)
+    const refs = useRef<HTMLDivElement[]>([])
+
+    useEffect(() => {
+        refs.current = refs.current.slice(0, media.length)
+    }, [media.length])
+
+    const scrollToMedia = (i: number) => {
+        setCurrentMedia(i)
+
+        refs.current[i]?.scrollIntoView({
+            behavior: 'smooth',
+            block: 'nearest',
+            inline: 'start',
+        })
+    }
+
+    const nextMedia = () => {
+        scrollToMedia((currentMedia + 1) % media.length)
+    }
+
+    const previousMedia = () => {
+        scrollToMedia((currentMedia - 1 + media.length) % media.length)
+    }
+
+    return (
+        <div className="scrollbar flex w-full snap-x snap-mandatory overflow-x-auto rounded-lg media-carousel">
+            {media.length > 1 && <CarouselControl isLeft handleNext={nextMedia} handlePrevious={previousMedia} />}
+            {media.map((src, i) => (
+                <div
+                    ref={(el) => { if (el) refs.current[i] = el }}
+                    key={i}
+                    className="flex w-full flex-shrink-0 snap-center justify-center rounded-lg"
+                >
+                    {src.includes('.mp4') ?
+                        <video
+                            src={src}
+                            muted
+                            loop
+                            controls
+                        />
+                        :
+                        <img
+                            src={src}
+                            alt={`Media ${i}`}
+                        />
+                    }
+                </div>
+            ))}
+            {media.length > 1 && <CarouselControl handleNext={nextMedia} handlePrevious={previousMedia} />}
+        </div>
+    )
+}
+
+function CarouselControl({ isLeft = false, handleNext, handlePrevious }: { isLeft?: boolean, handleNext: () => void, handlePrevious: () => void }) {
+    return (
+        <button
+            type="button"
+            onClick={!isLeft ? handleNext : handlePrevious}
+            className={`absolute z-10 flex h-8 w-8 items-center justify-center self-center rounded-full bg-neutral-700 text-sm text-white opacity-60 md:text-2xl ${isLeft ? 'md:left-8 left-6' : 'md:right-8 right-6'}`}
+        >
+            {isLeft ? <ArrowLeft className="h-4 w-4" /> : <ArrowRight className="h-4 w-4" />}
+        </button>
+    )
+}