"use client"; import React, { useRef } from "react"; import Image from "next/image"; import ConnectionLine from "./connection-line"; import { cn } from "@/lib/utils"; import "./style.css"; type TechBoxProps = { pinId: string; title: string; image: string; color: string; boxRef: React.RefObject; }; type Tech = { title: string; image: string; color: string; }; const TechBox: React.FC = (props) => { const direction = props.pinId.split("-")[0]; const borderMap: Record = { stage1: "only-bottom", stage2: "nothing", stage3: "nothing", stage4: "only-top", }; return (

{props.title}

); }; const renderTechBoxes = ( techArray: Tech[], idPrefix: string, refs: React.RefObject[] ) => { return (

{techArray.map((tech, idx) => { return ( ); })}

); }; export const TechStack = () => { const refs = { stage1: { techbox: [ useRef(null), useRef(null), useRef(null), useRef(null), useRef(null), ], pins: [ useRef(null), useRef(null), useRef(null), useRef(null), useRef(null), ], }, stage2: { techbox: [useRef(null), useRef(null)], pins: [useRef(null), useRef(null)], }, stage3: { techbox: [useRef(null), useRef(null)], pins: [useRef(null), useRef(null)], }, stage4: { techbox: [ useRef(null), useRef(null), useRef(null), useRef(null), useRef(null), ], pins: [ useRef(null), useRef(null), useRef(null), useRef(null), useRef(null), ], }, }; return (

{renderTechBoxes(techs.stage1, "stage1", refs.stage1.techbox)} {renderTechBoxes(techs.stage2, "stage2", refs.stage2.techbox)} {renderTechBoxes(techs.stage3, "stage3", refs.stage3.techbox)} {renderTechBoxes(techs.stage4, "stage4", refs.stage4.techbox)}

{renderPins(5, "stage1", refs.stage1.pins)} {renderPins(2, "stage2", refs.stage2.pins)} {renderPins(2, "stage3", refs.stage3.pins)} {renderPins(5, "stage4", refs.stage4.pins)}

TechStack

{Object.keys(refs).map((key) => { const techboxRefs = refs[key as keyof typeof refs].techbox; const pinRefs = refs[key as keyof typeof refs].pins; return ( {techboxRefs.map((techboxRef, idx) => ( ))} ); })}

); }; const renderPins = ( pinCount: number, idPrefix: string, refs: React.RefObject[] ) => { return (

{Array.from({ length: pinCount }, (_, idx) => { return (

); })}

); }; const techs = { stage1: [ { title: "React", image: "/logo.svg", color: "#61DAFB", }, { title: "Next.js", image: "/logo.svg", color: "#bdbdbd", }, { title: "Typescript", image: "/logo.svg", color: "#007acc", }, { title: "Tailwind CSS", image: "/logo.svg", color: "#38b2ac", }, { title: "Turborepo", image: "/logo.svg", color: "#bf0477", }, ], stage2: [ { title: "Supabase", image: "/logo.svg", color: "#18b870", }, { title: "MySQL", image: "/logo.svg", color: "#00618A", }, ], stage3: [ { title: "MongoDB", image: "/logo.svg", color: "#45A538", }, { title: "Firebase", image: "/logo.svg", color: "#f58220", }, ], stage4: [ { title: "NodeJS", image: "/logo.svg", color: "#83CD29", }, { title: "Redux", image: "/logo.svg", color: "#764abc", }, { title: "NestJS", image: "/logo.svg", color: "#b52d3f", }, { title: "Flutter", image: "/logo.svg", color: "#27AACD", }, { title: "Go", image: "/logo.svg", color: "#00acd7", }, ], };

Connecting multiple divs with svg path

Virtual Sandbox

Mobile version NOT SUPPORTED

TechStack

NexTemplate

Socials

nextemplate