{"id":29273706,"url":"https://github.com/codelander07/threejs-portfolio","last_synced_at":"2025-07-05T02:36:37.093Z","repository":{"id":275815845,"uuid":"927285340","full_name":"CodeLander07/Threejs-Portfolio","owner":"CodeLander07","description":"Welcome to the Three.jsPortfolio repository! This project showcases my personal portfolio, built using the powerful Three.jslibrary to create stunning 3D graphics and interactive experiences.","archived":false,"fork":false,"pushed_at":"2025-06-19T08:41:45.000Z","size":103746,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-19T09:40:14.292Z","etag":null,"topics":["nodejs","portfolio","reactjs","threejs"],"latest_commit_sha":null,"homepage":"https://unstopablesid-online-resume.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CodeLander07.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-02-04T17:55:34.000Z","updated_at":"2025-06-19T08:41:49.000Z","dependencies_parsed_at":null,"dependency_job_id":"9b799070-922f-4dfa-a693-7e46f4c362ba","html_url":"https://github.com/CodeLander07/Threejs-Portfolio","commit_stats":null,"previous_names":["unstopablesid/unstopablesid-online-resume","codelander07/threejs-portfolio"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/CodeLander07/Threejs-Portfolio","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeLander07%2FThreejs-Portfolio","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeLander07%2FThreejs-Portfolio/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeLander07%2FThreejs-Portfolio/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeLander07%2FThreejs-Portfolio/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CodeLander07","download_url":"https://codeload.github.com/CodeLander07/Threejs-Portfolio/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeLander07%2FThreejs-Portfolio/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263671881,"owners_count":23494057,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["nodejs","portfolio","reactjs","threejs"],"created_at":"2025-07-05T02:36:36.268Z","updated_at":"2025-07-05T02:36:37.071Z","avatar_url":"https://github.com/CodeLander07.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n  \u003ch3 align=\"center\"\u003eA 3D Developers Portfolio\u003c/h3\u003e\n\n   \u003cdiv align=\"center\"\u003e\n    For developer inquiries, please contact us at mayurnikumbh2004@gmail.com or call us at +91 7972053605 \n    \u003c/div\u003e\n\u003c/div\u003e\n\n\n\n\n\n## \u003ca name=\"tech-stack\"\u003e⚙️ Tech Stack\u003c/a\u003e\n\n- Node.js\n- React.js\n- Three.js\n- React Three Fiber\n- React Three Drei\n- Email JS\n- Vite\n- Tailwind CSS\n\n## \u003ca name=\"features\"\u003e🔋 Features\u003c/a\u003e\n\n👉 **Immersive Hero**: An eye-catching 3D hacker room that responds to mouse movements, surrounded by animated mini-models.\n\n👉 **Interactive About Me**: A sleek bento grid layout featuring personal info, a 3D globe pinpointing location, tech stack icons, and a one-click email copy option.\n\n👉 **Dynamic Project Showcase**: Browse through projects while watching live demos inside a 3D computer model, seamlessly switching between different projects.\n\n👉 **Engaging Experience Timeline**: Hover over career milestones to trigger interactive 3D animations that bring your professional journey to life.\n\n👉 **Client Testimonials**: A dedicated section highlighting satisfied clients and their feedback.\n\n👉 **Easy Contact Form**: A user-friendly email form for visitors to reach out directly from your portfolio.\n\n👉 **Clean Footer**: A minimalist design featuring social media links for easy networking.\n\n👉 **Fully Responsive**: Optimized layout ensuring a smooth experience across all devices, from desktop to mobile.\n\nand many more, including code architecture and reusability \n\n## \u003ca name=\"quick-start\"\u003e🤸 Quick Start\u003c/a\u003e\n\nFollow these steps to set up the project locally on your machine.\n\n**Prerequisites**\n\nMake sure you have the following installed on your machine:\n\n- [Git](https://git-scm.com/)\n- [Node.js](https://nodejs.org/en)\n- [npm](https://www.npmjs.com/) (Node Package Manager)\n\n**Cloning the Repository**\n\n```bash\ngit clone https://github.com/unstopablesid/Threejs-Portfolio\ncd Threejs-Portfolio\n```\n\n**Installation**\n\nInstall the project dependencies using npm:\n\n```bash\nnpm install\n```\n\n**Set Up Environment Variables**\n\nCreate a new file named `.env` in the root of your project and add the following content:\n\n```env\nREACT_APP_EMAILJS_USERID=your_emailjs_user_id\nREACT_APP_EMAILJS_TEMPLATEID=your_emailjs_template_id\nREACT_APP_EMAILJS_RECEIVERID=your_emailjs_receiver_id\n```\n\nReplace the placeholder values with your actual EmailJS credentials. You can obtain these credentials by signing up on the [EmailJS website](https://www.emailjs.com/).\n\n**Running the Project**\n\n```bash\nnpm run dev\n```\n\nOpen [http://localhost:5173](http://localhost:5173) in your browser to view the project.\n\n## \u003ca name=\"snippets\"\u003e🕸️ Snippets\u003c/a\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ccode\u003etailwind.config.js\u003c/code\u003e\u003c/summary\u003e\n\n```js\n/** @type {import('tailwindcss').Config} */\nexport default {\n  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],\n  theme: {\n    extend: {\n      fontFamily: {\n        generalsans: ['General Sans', 'sans-serif'],\n      },\n      colors: {\n        black: {\n          DEFAULT: '#000',\n          100: '#010103',\n          200: '#0E0E10',\n          300: '#1C1C21',\n          500: '#3A3A49',\n          600: '#1A1A1A',\n        },\n        white: {\n          DEFAULT: '#FFFFFF',\n          800: '#E4E4E6',\n          700: '#D6D9E9',\n          600: '#AFB0B6',\n          500: '#62646C',\n        },\n      },\n      backgroundImage: {\n        terminal: \"url('/assets/terminal.png')\",\n      },\n    },\n  },\n  plugins: [],\n};\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ccode\u003eindex.css\u003c/code\u003e\u003c/summary\u003e\n\n```css\n@import url('https://fonts.cdnfonts.com/css/general-sans');\n\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n* {\n  scroll-behavior: smooth;\n}\n\nbody {\n  background: #010103;\n  font-family: 'General Sans', sans-serif;\n}\n\n@layer utilities {\n  .c-space {\n    @apply sm:px-10 px-5;\n  }\n\n  .head-text {\n    @apply sm:text-4xl text-3xl font-semibold text-gray_gradient;\n  }\n\n  .nav-ul {\n    @apply flex flex-col items-center gap-4 sm:flex-row md:gap-6 relative z-20;\n  }\n\n  .nav-li {\n    @apply text-neutral-400 hover:text-white font-generalsans max-sm:hover:bg-black-500 max-sm:w-full max-sm:rounded-md py-2 max-sm:px-5;\n  }\n\n  .nav-li_a {\n    @apply text-lg md:text-base hover:text-white transition-colors;\n  }\n\n  .nav-sidebar {\n    @apply absolute left-0 right-0 bg-black-200 backdrop-blur-sm transition-all duration-300 ease-in-out overflow-hidden z-20 mx-auto sm:hidden block;\n  }\n\n  .text-gray_gradient {\n    @apply bg-gradient-to-r from-[#BEC1CF] from-60% via-[#D5D8EA] via-60% to-[#D5D8EA] to-100% bg-clip-text text-transparent;\n  }\n\n  /* button component */\n  .btn {\n    @apply flex gap-4 items-center justify-center cursor-pointer p-3 rounded-md bg-black-300  transition-all active:scale-95 text-white mx-auto;\n  }\n\n  .btn-ping {\n    @apply animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75;\n  }\n\n  .btn-ping_dot {\n    @apply relative inline-flex rounded-full h-3 w-3 bg-green-500;\n  }\n\n  /* hero section */\n  .hero_tag {\n    @apply text-center xl:text-6xl md:text-5xl sm:text-4xl text-3xl font-generalsans font-black !leading-normal;\n  }\n\n  /* about section */\n  .grid-container {\n    @apply w-full h-full border border-black-300 bg-black-200 rounded-lg sm:p-7 p-4 flex flex-col gap-5;\n  }\n\n  .grid-headtext {\n    @apply text-xl font-semibold mb-2 text-white font-generalsans;\n  }\n\n  .grid-subtext {\n    @apply text-[#afb0b6] text-base font-generalsans;\n  }\n\n  .copy-container {\n    @apply cursor-pointer flex justify-center items-center gap-2;\n  }\n\n  /* projects section  */\n  .arrow-btn {\n    @apply w-10 h-10 p-3 cursor-pointer active:scale-95 transition-all rounded-full arrow-gradient;\n  }\n\n  .tech-logo {\n    @apply w-10 h-10 rounded-md p-2 bg-neutral-100 bg-opacity-10 backdrop-filter backdrop-blur-lg flex justify-center items-center;\n  }\n\n  /* clients section */\n  .client-container {\n    @apply grid md:grid-cols-2 grid-cols-1 gap-5 mt-12;\n  }\n\n  .client-review {\n    @apply rounded-lg md:p-10 p-5 col-span-1 bg-black-300 bg-opacity-50;\n  }\n\n  .client-content {\n    @apply flex lg:flex-row flex-col justify-between lg:items-center items-start gap-5 mt-7;\n  }\n\n  /*  work experience section */\n  .work-container {\n    @apply grid lg:grid-cols-3 grid-cols-1 gap-5 mt-12;\n  }\n\n  .work-canvas {\n    @apply col-span-1 rounded-lg bg-black-200 border border-black-300;\n  }\n\n  .work-content {\n    @apply col-span-2 rounded-lg bg-black-200 border border-black-300;\n  }\n\n  .work-content_container {\n    @apply grid grid-cols-[auto_1fr] items-start gap-5  transition-all ease-in-out duration-500 cursor-pointer hover:bg-black-300 rounded-lg sm:px-5 px-2.5;\n  }\n\n  .work-content_logo {\n    @apply rounded-3xl w-16 h-16 p-2 bg-black-600;\n  }\n\n  .work-content_bar {\n    @apply flex-1 w-0.5 mt-4 h-full bg-black-300 group-hover:bg-black-500 group-last:hidden;\n  }\n\n  /* contact section */\n  .contact-container {\n    @apply max-w-xl relative z-10 sm:px-10 px-5 mt-12;\n  }\n\n  .field-label {\n    @apply text-lg text-white-600;\n  }\n\n  .field-input {\n    @apply w-full bg-black-300 px-5 py-2 min-h-14 rounded-lg placeholder:text-white-500 text-lg text-white-800 shadow-black-200 shadow-2xl focus:outline-none;\n  }\n\n  .field-btn {\n    @apply bg-black-500 px-5 py-2 min-h-12 rounded-lg shadow-black-200 shadow-2xl flex justify-center items-center text-lg text-white gap-3;\n  }\n\n  .field-btn_arrow {\n    @apply w-2.5 h-2.5 object-contain invert brightness-0;\n  }\n\n  /*  footer */\n  .social-icon {\n    @apply w-12 h-12 rounded-full flex justify-center items-center bg-black-300 border border-black-200;\n  }\n}\n\n.waving-hand {\n  animation-name: wave-animation;\n  animation-duration: 2.5s;\n  animation-iteration-count: infinite;\n  transform-origin: 70% 70%;\n  display: inline-block;\n}\n\n.arrow-gradient {\n  background-image: linear-gradient(\n    to right,\n    rgba(255, 255, 255, 0.1) 10%,\n    rgba(255, 255, 255, 0.000025) 50%,\n    rgba(255, 255, 255, 0.000025) 50%,\n    rgba(255, 255, 255, 0.025) 100%\n  );\n}\n\n@keyframes wave-animation {\n  0% {\n    transform: rotate(0deg);\n  }\n  15% {\n    transform: rotate(14deg);\n  }\n  30% {\n    transform: rotate(-8deg);\n  }\n  40% {\n    transform: rotate(14deg);\n  }\n  50% {\n    transform: rotate(-4deg);\n  }\n  60% {\n    transform: rotate(10deg);\n  }\n  70% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(0deg);\n  }\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ccode\u003econstants/index.js\u003c/code\u003e\u003c/summary\u003e\n\n```js\nexport const navLinks = [\n  {\n    id: 1,\n    name: 'Home',\n    href: '#home',\n  },\n  {\n    id: 2,\n    name: 'About',\n    href: '#about',\n  },\n  {\n    id: 3,\n    name: 'Work',\n    href: '#work',\n  },\n  {\n    id: 4,\n    name: 'Contact',\n    href: '#contact',\n  },\n];\n\nexport const clientReviews = [\n  {\n    id: 1,\n    name: 'Emily Johnson',\n    position: 'Marketing Director at GreenLeaf',\n    img: 'assets/review1.png',\n    review:\n      'Working with Adrian was a fantastic experience. He transformed our outdated website into a modern, user-friendly platform. His attention to detail and commitment to quality are unmatched. Highly recommend him for any web dev projects.',\n  },\n  {\n    id: 2,\n    name: 'Mark Rogers',\n    position: 'Founder of TechGear Shop',\n    img: 'assets/review2.png',\n    review:\n      'Adrian’s expertise in web development is truly impressive. He delivered a robust and scalable solution for our e-commerce site, and our online sales have significantly increased since the launch. He’s a true professional! Fantastic work.',\n  },\n  {\n    id: 3,\n    name: 'John Dohsas',\n    position: 'Project Manager at UrbanTech ',\n    img: 'assets/review3.png',\n    review:\n      'I can’t say enough good things about Adrian. He was able to take our complex project requirements and turn them into a seamless, functional website. His problem-solving abilities are outstanding.',\n  },\n  {\n    id: 4,\n    name: 'Ether Smith',\n    position: 'CEO of BrightStar Enterprises',\n    img: 'assets/review4.png',\n    review:\n      'Adrian was a pleasure to work with. He understood our requirements perfectly and delivered a website that exceeded our expectations. His skills in both frontend backend dev are top-notch.',\n  },\n];\n\nexport const myProjects = [\n  {\n    title: 'Podcastr - AI Podcast Platform',\n    desc: 'Podcastr is a revolutionary Software-as-a-Service platform that transforms the way podcasts are created. With advanced AI-powered features like text-to-multiple-voices functionality, it allows creators to generate diverse voiceovers from a single text input.',\n    subdesc:\n      'Built as a unique Software-as-a-Service app with Next.js 14, Tailwind CSS, TypeScript, Framer Motion and Convex, Podcastr is designed for optimal performance and scalability.',\n    href: 'https://www.youtube.com/watch?v=zfAb95tJvZQ',\n    texture: '/textures/project/project1.mp4',\n    logo: '/assets/project-logo1.png',\n    logoStyle: {\n      backgroundColor: '#2A1816',\n      border: '0.2px solid #36201D',\n      boxShadow: '0px 0px 60px 0px #AA3C304D',\n    },\n    spotlight: '/assets/spotlight1.png',\n    tags: [\n      {\n        id: 1,\n        name: 'React.js',\n        path: '/assets/react.svg',\n      },\n      {\n        id: 2,\n        name: 'TailwindCSS',\n        path: 'assets/tailwindcss.png',\n      },\n      {\n        id: 3,\n        name: 'TypeScript',\n        path: '/assets/typescript.png',\n      },\n      {\n        id: 4,\n        name: 'Framer Motion',\n        path: '/assets/framer.png',\n      },\n    ],\n  },\n  {\n    title: 'LiveDoc - Real-Time Google Docs Clone',\n    desc: 'LiveDoc is a powerful collaborative app that elevates the capabilities of real-time document editing. As an enhanced version of Google Docs, It supports millions of collaborators simultaneously, ensuring that every change is captured instantly and accurately.',\n    subdesc:\n      'With LiveDoc, users can experience the future of collaboration, where multiple contributors work together in real time without any lag, by using Next.js and Liveblocks newest features.',\n    href: 'https://www.youtube.com/watch?v=y5vE8y_f_OM',\n    texture: '/textures/project/project2.mp4',\n    logo: '/assets/project-logo2.png',\n    logoStyle: {\n      backgroundColor: '#13202F',\n      border: '0.2px solid #17293E',\n      boxShadow: '0px 0px 60px 0px #2F6DB54D',\n    },\n    spotlight: '/assets/spotlight2.png',\n    tags: [\n      {\n        id: 1,\n        name: 'React.js',\n        path: '/assets/react.svg',\n      },\n      {\n        id: 2,\n        name: 'TailwindCSS',\n        path: 'assets/tailwindcss.png',\n      },\n      {\n        id: 3,\n        name: 'TypeScript',\n        path: '/assets/typescript.png',\n      },\n      {\n        id: 4,\n        name: 'Framer Motion',\n        path: '/assets/framer.png',\n      },\n    ],\n  },\n  {\n    title: 'CarePulse - Health Management System',\n    desc: 'An innovative healthcare platform designed to streamline essential medical processes. It simplifies patient registration, appointment scheduling, and medical record management, providing a seamless experience for both healthcare providers and patients.',\n    subdesc:\n      'With a focus on efficiency, CarePulse integrantes complex forms and SMS notifications, by using Next.js, Appwrite, Twillio and Sentry that enhance operational workflows.',\n    href: 'https://www.youtube.com/watch?v=lEflo_sc82g',\n    texture: '/textures/project/project3.mp4',\n    logo: '/assets/project-logo3.png',\n    logoStyle: {\n      backgroundColor: '#60f5a1',\n      background:\n        'linear-gradient(0deg, #60F5A150, #60F5A150), linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(208, 213, 221, 0.8) 100%)',\n      border: '0.2px solid rgba(208, 213, 221, 1)',\n      boxShadow: '0px 0px 60px 0px rgba(35, 131, 96, 0.3)',\n    },\n    spotlight: '/assets/spotlight3.png',\n    tags: [\n      {\n        id: 1,\n        name: 'React.js',\n        path: '/assets/react.svg',\n      },\n      {\n        id: 2,\n        name: 'TailwindCSS',\n        path: 'assets/tailwindcss.png',\n      },\n      {\n        id: 3,\n        name: 'TypeScript',\n        path: '/assets/typescript.png',\n      },\n      {\n        id: 4,\n        name: 'Framer Motion',\n        path: '/assets/framer.png',\n      },\n    ],\n  },\n  {\n    title: 'Horizon - Online Banking Platform',\n    desc: 'Horizon is a comprehensive online banking platform that offers users a centralized finance management dashboard. It allows users to connect multiple bank accounts, monitor real-time transactions, and seamlessly transfer money to other users.',\n    subdesc:\n      'Built with Next.js 14 Appwrite, Dwolla and Plaid, Horizon ensures a smooth and secure banking experience, tailored to meet the needs of modern consumers.',\n    href: 'https://www.youtube.com/watch?v=PuOVqP_cjkE',\n    texture: '/textures/project/project4.mp4',\n    logo: '/assets/project-logo4.png',\n    logoStyle: {\n      backgroundColor: '#0E1F38',\n      border: '0.2px solid #0E2D58',\n      boxShadow: '0px 0px 60px 0px #2F67B64D',\n    },\n    spotlight: '/assets/spotlight4.png',\n    tags: [\n      {\n        id: 1,\n        name: 'React.js',\n        path: '/assets/react.svg',\n      },\n      {\n        id: 2,\n        name: 'TailwindCSS',\n        path: 'assets/tailwindcss.png',\n      },\n      {\n        id: 3,\n        name: 'TypeScript',\n        path: '/assets/typescript.png',\n      },\n      {\n        id: 4,\n        name: 'Framer Motion',\n        path: '/assets/framer.png',\n      },\n    ],\n  },\n  {\n    title: 'Imaginify - AI Photo Manipulation App',\n    desc: 'Imaginify is a groundbreaking Software-as-a-Service application that empowers users to create stunning photo manipulations using AI technology. With features like AI-driven image editing, a payments system, and a credits-based model.',\n    subdesc:\n      'Built with Next.js 14, Cloudinary AI, Clerk, and Stripe, Imaginify combines cutting-edge technology with a user-centric approach. It can be turned into a side income or even a full-fledged business.',\n    href: 'https://www.youtube.com/watch?v=Ahwoks_dawU',\n    texture: '/textures/project/project5.mp4',\n    logo: '/assets/project-logo5.png',\n    logoStyle: {\n      backgroundColor: '#1C1A43',\n      border: '0.2px solid #252262',\n      boxShadow: '0px 0px 60px 0px #635BFF4D',\n    },\n    spotlight: '/assets/spotlight5.png',\n    tags: [\n      {\n        id: 1,\n        name: 'React.js',\n        path: '/assets/react.svg',\n      },\n      {\n        id: 2,\n        name: 'TailwindCSS',\n        path: 'assets/tailwindcss.png',\n      },\n      {\n        id: 3,\n        name: 'TypeScript',\n        path: '/assets/typescript.png',\n      },\n      {\n        id: 4,\n        name: 'Framer Motion',\n        path: '/assets/framer.png',\n      },\n    ],\n  },\n];\n\nexport const calculateSizes = (isSmall, isMobile, isTablet) =\u003e {\n  return {\n    deskScale: isSmall ? 0.05 : isMobile ? 0.06 : 0.065,\n    deskPosition: isMobile ? [0.5, -4.5, 0] : [0.25, -5.5, 0],\n    cubePosition: isSmall ? [4, -5, 0] : isMobile ? [5, -5, 0] : isTablet ? [5, -5, 0] : [9, -5.5, 0],\n    reactLogoPosition: isSmall ? [3, 4, 0] : isMobile ? [5, 4, 0] : isTablet ? [5, 4, 0] : [12, 3, 0],\n    ringPosition: isSmall ? [-5, 7, 0] : isMobile ? [-10, 10, 0] : isTablet ? [-12, 10, 0] : [-24, 10, 0],\n    targetPosition: isSmall ? [-5, -10, -10] : isMobile ? [-9, -10, -10] : isTablet ? [-11, -7, -10] : [-13, -13, -10],\n  };\n};\n\nexport const workExperiences = [\n  {\n    id: 1,\n    name: 'Framer',\n    pos: 'Lead Web Developer',\n    duration: '2022 - Present',\n    title: \"Framer serves as my go-to tool for creating interactive prototypes. I use it to bring designs to  life, allowing stakeholders to experience the user flow and interactions before development.\",\n    icon: '/assets/framer.svg',\n    animation: 'victory',\n  },\n  {\n    id: 2,\n    name: 'Figma',\n    pos: 'Web Developer',\n    duration: '2020 - 2022',\n    title: \"Figma is my collaborative design platform of choice. I utilize it to work seamlessly with team members and clients, facilitating real-time feedback and design iterations. Its cloud-based.\",\n    icon: '/assets/figma.svg',\n    animation: 'clapping',\n  },\n  {\n    id: 3,\n    name: 'Notion',\n    pos: 'Junior Web Developer',\n    duration: '2019 - 2020',\n    title: \"Notion helps me keep my projects organized. I use it for project management, task tracking, and as a central hub for documentation, ensuring that everything from design notes to.\",\n    icon: '/assets/notion.svg',\n    animation: 'salute',\n  },\n];\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ccode\u003ecomponents/Cube.js\u003c/code\u003e\u003c/summary\u003e\n\n```js\n/*\n    Auto-generated by: https://github.com/pmndrs/gltfjsx\n*/\n\nimport gsap from 'gsap';\nimport { useGSAP } from '@gsap/react';\nimport { useRef, useState } from 'react';\nimport { Float, useGLTF, useTexture } from '@react-three/drei';\n\nconst Cube = ({ ...props }) =\u003e {\n  const { nodes } = useGLTF('models/cube.glb');\n\n  const texture = useTexture('textures/cube.png');\n\n  const cubeRef = useRef();\n  const [hovered, setHovered] = useState(false);\n\n  useGSAP(() =\u003e {\n    gsap\n      .timeline({\n        repeat: -1,\n        repeatDelay: 0.5,\n      })\n      .to(cubeRef.current.rotation, {\n        y: hovered ? '+=2' : `+=${Math.PI * 2}`,\n        x: hovered ? '+=2' : `-=${Math.PI * 2}`,\n        duration: 2.5,\n        stagger: {\n          each: 0.15,\n        },\n      });\n  });\n\n  return (\n    \u003cFloat floatIntensity={2}\u003e\n      \u003cgroup position={[9, -4, 0]} rotation={[2.6, 0.8, -1.8]} scale={0.74} dispose={null} {...props}\u003e\n        \u003cmesh\n          ref={cubeRef}\n          castShadow\n          receiveShadow\n          geometry={nodes.Cube.geometry}\n          material={nodes.Cube.material}\n          onPointerEnter={() =\u003e setHovered(true)}\u003e\n          \u003cmeshMatcapMaterial matcap={texture} toneMapped={false} /\u003e\n        \u003c/mesh\u003e\n      \u003c/group\u003e\n    \u003c/Float\u003e\n  );\n};\n\nuseGLTF.preload('models/cube.glb');\n\nexport default Cube;\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ccode\u003ecomponents/Ring.js\u003c/code\u003e\u003c/summary\u003e\n\n```js\nimport { useGSAP } from '@gsap/react';\nimport { Center, useTexture } from '@react-three/drei';\nimport gsap from 'gsap';\nimport { useCallback, useRef } from 'react';\n\nconst Rings = ({ position }) =\u003e {\n  const refList = useRef([]);\n  const getRef = useCallback((mesh) =\u003e {\n    if (mesh \u0026\u0026 !refList.current.includes(mesh)) {\n      refList.current.push(mesh);\n    }\n  }, []);\n\n  const texture = useTexture('textures/rings.png');\n\n  useGSAP(\n    () =\u003e {\n      if (refList.current.length === 0) return;\n\n      refList.current.forEach((r) =\u003e {\n        r.position.set(position[0], position[1], position[2]);\n      });\n\n      gsap\n        .timeline({\n          repeat: -1,\n          repeatDelay: 0.5,\n        })\n        .to(\n          refList.current.map((r) =\u003e r.rotation),\n          {\n            y: `+=${Math.PI * 2}`,\n            x: `-=${Math.PI * 2}`,\n            duration: 2.5,\n            stagger: {\n              each: 0.15,\n            },\n          },\n        );\n    },\n    {\n      dependencies: position,\n    },\n  );\n\n  return (\n    \u003cCenter\u003e\n      \u003cgroup scale={0.5}\u003e\n        {Array.from({ length: 4 }, (_, index) =\u003e (\n          \u003cmesh key={index} ref={getRef}\u003e\n            \u003ctorusGeometry args={[(index + 1) * 0.5, 0.1]}\u003e\u003c/torusGeometry\u003e\n            \u003cmeshMatcapMaterial matcap={texture} toneMapped={false} /\u003e\n          \u003c/mesh\u003e\n        ))}\n      \u003c/group\u003e\n    \u003c/Center\u003e\n  );\n};\n\nexport default Rings;\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eAbout Earth Maps\u003c/summary\u003e\n\n```js\nglobeImageUrl=\"//unpkg.com/three-globe/example/img/earth-night.jpg\"\nbumpImageUrl=\"//unpkg.com/three-globe/example/img/earth-topology.png\"\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ccode\u003ecomponents/HackerRoom.jsx\u003c/code\u003e\u003c/summary\u003e\n\n```jsx\n/*\nAuto-generated by: https://github.com/pmndrs/gltfjsx\nCommand: npx gltfjsx@6.5.0 hacker-room-new.glb -T \nFiles: hacker-room-new.glb [34.62MB] \u003e /Users/hsuwinlat/Desktop/jsm pj/threejscc-portfolio/public/models/hacker-room-new-transformed.glb [2.56MB] (93%)\n*/\n\nimport { useGLTF, useTexture } from '@react-three/drei';\n\nexport function HackerRoom(props) {\n  const { nodes, materials } = useGLTF('/models/hacker-room.glb');\n\n  const monitortxt = useTexture('textures/desk/monitor.png');\n  const screenTxt = useTexture('textures/desk/screen.png');\n\n  return (\n    \u003cgroup {...props} dispose={null}\u003e\n      \u003cmesh geometry={nodes.screen_screens_0.geometry} material={materials.screens}\u003e\n        \u003cmeshMatcapMaterial map={screenTxt} /\u003e\n      \u003c/mesh\u003e\n      \u003cmesh geometry={nodes.screen_glass_glass_0.geometry} material={materials.glass} /\u003e\n      \u003cmesh geometry={nodes.table_table_mat_0_1.geometry} material={materials.table_mat} /\u003e\n      \u003cmesh geometry={nodes.table_table_mat_0_2.geometry} material={materials.computer_mat}\u003e\n        \u003cmeshMatcapMaterial map={monitortxt} /\u003e\n      \u003c/mesh\u003e\n      \u003cmesh geometry={nodes.table_table_mat_0_3.geometry} material={materials.server_mat} /\u003e\n      \u003cmesh geometry={nodes.table_table_mat_0_4.geometry} material={materials.vhsPlayer_mat} /\u003e\n      \u003cmesh geometry={nodes.table_table_mat_0_5.geometry} material={materials.stand_mat} /\u003e\n      \u003cmesh geometry={nodes.table_table_mat_0_6.geometry} material={materials.mat_mat} /\u003e\n      \u003cmesh geometry={nodes.table_table_mat_0_7.geometry} material={materials.arm_mat} /\u003e\n      \u003cmesh geometry={nodes.table_table_mat_0_8.geometry} material={materials.tv_mat}\u003e\n        \u003cmeshMatcapMaterial map={monitortxt} /\u003e\n      \u003c/mesh\u003e\n      \u003cmesh geometry={nodes.table_table_mat_0_9.geometry} material={materials.cables_mat} /\u003e\n      \u003cmesh geometry={nodes.table_table_mat_0_10.geometry} material={materials.props_mat} /\u003e\n      \u003cmesh geometry={nodes.table_table_mat_0_11.geometry} material={materials.ground_mat} /\u003e\n      \u003cmesh geometry={nodes.table_table_mat_0_12.geometry} material={materials.key_mat} /\u003e\n    \u003c/group\u003e\n  );\n}\n\nuseGLTF.preload('/models/hacker-room.glb');\n```\n\n\u003c/details\u003e\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodelander07%2Fthreejs-portfolio","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodelander07%2Fthreejs-portfolio","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodelander07%2Fthreejs-portfolio/lists"}