{"id":20859514,"url":"https://github.com/darkshadowcoder/3d_nextjs_portfolio","last_synced_at":"2025-08-29T03:32:33.138Z","repository":{"id":260635056,"uuid":"880601780","full_name":"DarkShadowCoder/3D_NextJS_Portfolio","owner":"DarkShadowCoder","description":null,"archived":false,"fork":false,"pushed_at":"2025-01-30T17:36:16.000Z","size":19075,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-12T14:16:09.432Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DarkShadowCoder.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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}},"created_at":"2024-10-30T02:23:57.000Z","updated_at":"2025-01-30T17:36:20.000Z","dependencies_parsed_at":null,"dependency_job_id":"8101c9d4-21ad-4522-9e60-3e041e94d32c","html_url":"https://github.com/DarkShadowCoder/3D_NextJS_Portfolio","commit_stats":null,"previous_names":["darkshadowcoder/3d_nextjs_portfolio"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/DarkShadowCoder/3D_NextJS_Portfolio","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DarkShadowCoder%2F3D_NextJS_Portfolio","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DarkShadowCoder%2F3D_NextJS_Portfolio/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DarkShadowCoder%2F3D_NextJS_Portfolio/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DarkShadowCoder%2F3D_NextJS_Portfolio/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DarkShadowCoder","download_url":"https://codeload.github.com/DarkShadowCoder/3D_NextJS_Portfolio/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DarkShadowCoder%2F3D_NextJS_Portfolio/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":272619413,"owners_count":24965415,"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","status":"online","status_checked_at":"2025-08-29T02:00:10.610Z","response_time":87,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2024-11-18T04:50:15.615Z","updated_at":"2025-08-29T03:32:33.086Z","avatar_url":"https://github.com/DarkShadowCoder.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cbr /\u003e\n    \u003ch1\u003eMy Portfolio Created using NextJs , FramerMotion and ThreeJS\u003c/h1\u003e\n  \u003cbr /\u003e\n\n  \u003cdiv\u003e\n    \u003cimg src=\"https://img.shields.io/badge/-Next_JS-black?style=for-the-badge\u0026logoColor=white\u0026logo=nextdotjs\u0026color=000000\" alt=\"nextdotjs\" /\u003e\n    \u003cimg src=\"https://img.shields.io/badge/-Framer-black?style=for-the-badge\u0026logoColor=white\u0026logo=framer\u0026color=0055FF\" alt=\"framer\" /\u003e\n    \u003cimg src=\"https://img.shields.io/badge/-Three_JS-black?style=for-the-badge\u0026logoColor=white\u0026logo=threedotjs\u0026color=000000\" alt=\"three.js\" /\u003e\n    \u003cimg src=\"https://img.shields.io/badge/-Tailwind_CSS-black?style=for-the-badge\u0026logoColor=white\u0026logo=tailwindcss\u0026color=06B6D4\" alt=\"tailwindcss\" /\u003e\n  \u003c/div\u003e\n\n  \u003ch3 align=\"center\"\u003eA Modern Next.js Portfolio\u003c/h3\u003e\n\u003c/div\u003e\n\n## 📋 \u003ca name=\"table\"\u003eTable of Contents\u003c/a\u003e\n\n1. 🤖 [Introduction](#introduction)\n2. ⚙️ [Tech Stack](#tech-stack)\n3. 🔋 [Features](#features)\n4. 🤸 [Quick Start](#quick-start)\n5. 🕸️ [Code to Copy](#snippets)\n6. 🔗 [Assets](#links)\n\n## \u003ca name=\"introduction\"\u003e🤖 Introduction\u003c/a\u003e\n\nBuilt with Next.js for handling the user interface, Three.js for rendering 3D elements, Framer motion for beautiful animations, and styled with TailwindCSS, this portfolio demonstrates the developer's skills in a unique manner that creates a lasting impact.\n\n\n## \u003ca name=\"tech-stack\"\u003e⚙️ Tech Stack\u003c/a\u003e\n\n- Next.js\n- Three.js\n- Framer Motion\n- Tailwind CSS\n\n## \u003ca name=\"features\"\u003e🔋 Features\u003c/a\u003e\n\n👉 **Hero**: Captivating introduction featuring a spotlight effect and dynamic background.\n\n👉 **Bento Grid**: Modern layout presenting personal information using cutting-edge CSS design techniques.\n\n👉 **3D Elements**:  Interactive 3D design elements, such as a GitHub-style globe and card hover effects, adding depth and engagement.\n\n👉 **Testimonials**: Dynamic testimonials area with scrolling or animated content for enhanced engagement.\n\n👉 **Work Experience**: Prominent display of professional background for emphasis and credibility.\n\n👉 **Canvas Effect**: Innovative use of HTML5 canvas to create visually striking effects in the \"approaches\" section.\n\n👉 **Responsiveness**: Seamless adaptability across all devices, ensuring optimal viewing experience for every user.\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/Yvanhajdin/portfolio.git\ncd portfolio\n```\n\n**Installation**\n\nInstall the project dependencies using npm:\n\n```bash\nnpm install\n```\n\n**Running the Project**\n\n```bash\nnpm run dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) 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\u003edata/index.ts\u003c/code\u003e\u003c/summary\u003e\n\n```typescript\nexport const navItems = [\n  { name: \"About\", link: \"#about\" },\n  { name: \"Projects\", link: \"#projects\" },\n  { name: \"Testimonials\", link: \"#testimonials\" },\n  { name: \"Contact\", link: \"#contact\" },\n];\n\nexport const gridItems = [\n  {\n    id: 1,\n    title: \"I prioritize client collaboration, fostering open communication \",\n    description: \"\",\n    className: \"lg:col-span-3 md:col-span-6 md:row-span-4 lg:min-h-[60vh]\",\n    imgClassName: \"w-full h-full\",\n    titleClassName: \"justify-end\",\n    img: \"/b1.svg\",\n    spareImg: \"\",\n  },\n  {\n    id: 2,\n    title: \"I'm very flexible with time zone communications\",\n    description: \"\",\n    className: \"lg:col-span-2 md:col-span-3 md:row-span-2\",\n    imgClassName: \"\",\n    titleClassName: \"justify-start\",\n    img: \"\",\n    spareImg: \"\",\n  },\n  {\n    id: 3,\n    title: \"My tech stack\",\n    description: \"I constantly try to improve\",\n    className: \"lg:col-span-2 md:col-span-3 md:row-span-2\",\n    imgClassName: \"\",\n    titleClassName: \"justify-center\",\n    img: \"\",\n    spareImg: \"\",\n  },\n  {\n    id: 4,\n    title: \"Tech enthusiast with a passion for development.\",\n    description: \"\",\n    className: \"lg:col-span-2 md:col-span-3 md:row-span-1\",\n    imgClassName: \"\",\n    titleClassName: \"justify-start\",\n    img: \"/grid.svg\",\n    spareImg: \"/b4.svg\",\n  },\n\n  {\n    id: 5,\n    title: \"Currently building a JS Animation library\",\n    description: \"The Inside Scoop\",\n    className: \"md:col-span-3 md:row-span-2\",\n    imgClassName: \"absolute right-0 bottom-0 md:w-96 w-60\",\n    titleClassName: \"justify-center md:justify-start lg:justify-center\",\n    img: \"/b5.svg\",\n    spareImg: \"/grid.svg\",\n  },\n  {\n    id: 6,\n    title: \"Do you want to start a project together?\",\n    description: \"\",\n    className: \"lg:col-span-2 md:col-span-3 md:row-span-1\",\n    imgClassName: \"\",\n    titleClassName: \"justify-center md:max-w-full max-w-60 text-center\",\n    img: \"\",\n    spareImg: \"\",\n  },\n];\n\nexport const projects = [\n  {\n    id: 1,\n    title: \"3D Solar System Planets to Explore\",\n    des: \"Explore the wonders of our solar system with this captivating 3D simulation of the planets using Three.js.\",\n    img: \"/p1.svg\",\n    iconLists: [\"/re.svg\", \"/tail.svg\", \"/ts.svg\", \"/three.svg\", \"/fm.svg\"],\n    link: \"https://github.com/Yvanhajdin?tab=repositories\",\n  },\n  {\n    id: 2,\n    title: \"Yoom - Video Conferencing App\",\n    des: \"Simplify your video conferencing experience with Yoom. Seamlessly connect with colleagues and friends.\",\n    img: \"/p2.svg\",\n    iconLists: [\"/next.svg\", \"/tail.svg\", \"/ts.svg\", \"/stream.svg\", \"/c.svg\"],\n    link: \"https://github.com/Yvanhajdin/zoom-clone\",\n  },\n  {\n    id: 3,\n    title: \"AI Image SaaS - Canva Application\",\n    des: \"A REAL Software-as-a-Service app with AI features and a payments and credits system using the latest tech stack.\",\n    img: \"/p3.svg\",\n    iconLists: [\"/re.svg\", \"/tail.svg\", \"/ts.svg\", \"/three.svg\", \"/c.svg\"],\n    link: \"https://github.com/Yvanhajdin/ai_saas_app\",\n  },\n  {\n    id: 4,\n    title: \"Animated Apple Iphone 3D Website\",\n    des: \"Recreated the Apple iPhone 15 Pro website, combining GSAP animations and Three.js 3D effects..\",\n    img: \"/p4.svg\",\n    iconLists: [\"/next.svg\", \"/tail.svg\", \"/ts.svg\", \"/three.svg\", \"/gsap.svg\"],\n    link: \"https://github.com/Yvanhajdin/iphone\",\n  },\n];\n\n\n\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ccode\u003etailwind.config.ts\u003c/code\u003e\u003c/summary\u003e\n\n```ts\nimport type { Config } from \"tailwindcss\";\n\nconst svgToDataUri = require(\"mini-svg-data-uri\");\n\nconst colors = require(\"tailwindcss/colors\");\nconst {\n  default: flattenColorPalette,\n} = require(\"tailwindcss/lib/util/flattenColorPalette\");\n\nconst config = {\n  darkMode: [\"class\"],\n  content: [\n    \"./pages/**/*.{ts,tsx}\",\n    \"./components/**/*.{ts,tsx}\",\n    \"./app/**/*.{ts,tsx}\",\n    \"./src/**/*.{ts,tsx}\",\n    \"./data/**/*.{ts,tsx}\",\n  ],\n  prefix: \"\",\n  theme: {\n    container: {\n      center: true,\n      padding: \"2rem\",\n      screens: {\n        \"2xl\": \"1400px\",\n      },\n    },\n    extend: {\n      colors: {\n        black: {\n          DEFAULT: \"#000\",\n          100: \"#000319\",\n          200: \"rgba(17, 25, 40, 0.75)\",\n          300: \"rgba(255, 255, 255, 0.125)\",\n        },\n        white: {\n          DEFAULT: \"#FFF\",\n          100: \"#BEC1DD\",\n          200: \"#C1C2D3\",\n        },\n        blue: {\n          \"100\": \"#E4ECFF\",\n        },\n        purple: \"#CBACF9\",\n        border: \"hsl(var(--border))\",\n        input: \"hsl(var(--input))\",\n        ring: \"hsl(var(--ring))\",\n        background: \"hsl(var(--background))\",\n        foreground: \"hsl(var(--foreground))\",\n        primary: {\n          DEFAULT: \"hsl(var(--primary))\",\n          foreground: \"hsl(var(--primary-foreground))\",\n        },\n        secondary: {\n          DEFAULT: \"hsl(var(--secondary))\",\n          foreground: \"hsl(var(--secondary-foreground))\",\n        },\n        destructive: {\n          DEFAULT: \"hsl(var(--destructive))\",\n          foreground: \"hsl(var(--destructive-foreground))\",\n        },\n        muted: {\n          DEFAULT: \"hsl(var(--muted))\",\n          foreground: \"hsl(var(--muted-foreground))\",\n        },\n        accent: {\n          DEFAULT: \"hsl(var(--accent))\",\n          foreground: \"hsl(var(--accent-foreground))\",\n        },\n        popover: {\n          DEFAULT: \"hsl(var(--popover))\",\n          foreground: \"hsl(var(--popover-foreground))\",\n        },\n        card: {\n          DEFAULT: \"hsl(var(--card))\",\n          foreground: \"hsl(var(--card-foreground))\",\n        },\n      },\n      borderRadius: {\n        lg: \"var(--radius)\",\n        md: \"calc(var(--radius) - 2px)\",\n        sm: \"calc(var(--radius) - 4px)\",\n      },\n      keyframes: {\n        \"accordion-down\": {\n          from: { height: \"0\" },\n          to: { height: \"var(--radix-accordion-content-height)\" },\n        },\n        \"accordion-up\": {\n          from: { height: \"var(--radix-accordion-content-height)\" },\n          to: { height: \"0\" },\n        },\n        spotlight: {\n          \"0%\": {\n            opacity: \"0\",\n            transform: \"translate(-72%, -62%) scale(0.5)\",\n          },\n          \"100%\": {\n            opacity: \"1\",\n            transform: \"translate(-50%,-40%) scale(1)\",\n          },\n        },\n        shimmer: {\n          from: {\n            backgroundPosition: \"0 0\",\n          },\n          to: {\n            backgroundPosition: \"-200% 0\",\n          },\n        },\n        moveHorizontal: {\n          \"0%\": {\n            transform: \"translateX(-50%) translateY(-10%)\",\n          },\n          \"50%\": {\n            transform: \"translateX(50%) translateY(10%)\",\n          },\n          \"100%\": {\n            transform: \"translateX(-50%) translateY(-10%)\",\n          },\n        },\n        moveInCircle: {\n          \"0%\": {\n            transform: \"rotate(0deg)\",\n          },\n          \"50%\": {\n            transform: \"rotate(180deg)\",\n          },\n          \"100%\": {\n            transform: \"rotate(360deg)\",\n          },\n        },\n        moveVertical: {\n          \"0%\": {\n            transform: \"translateY(-50%)\",\n          },\n          \"50%\": {\n            transform: \"translateY(50%)\",\n          },\n          \"100%\": {\n            transform: \"translateY(-50%)\",\n          },\n        },\n        scroll: {\n          to: {\n            transform: \"translate(calc(-50% - 0.5rem))\",\n          },\n        },\n      },\n      animation: {\n        \"accordion-down\": \"accordion-down 0.2s ease-out\",\n        \"accordion-up\": \"accordion-up 0.2s ease-out\",\n        spotlight: \"spotlight 2s ease .75s 1 forwards\",\n        shimmer: \"shimmer 2s linear infinite\",\n        first: \"moveVertical 30s ease infinite\",\n        second: \"moveInCircle 20s reverse infinite\",\n        third: \"moveInCircle 40s linear infinite\",\n        fourth: \"moveHorizontal 40s ease infinite\",\n        fifth: \"moveInCircle 20s ease infinite\",\n        scroll:\n          \"scroll var(--animation-duration, 40s) var(--animation-direction, forwards) linear infinite\",\n      },\n    },\n  },\n  plugins: [\n    require(\"tailwindcss-animate\"),\n    addVariablesForColors,\n    function ({ matchUtilities, theme }: any) {\n      matchUtilities(\n        {\n          \"bg-grid\": (value: any) =\u003e ({\n            backgroundImage: `url(\"${svgToDataUri(\n              `\u003csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" width=\"100\" height=\"100\" fill=\"none\" stroke=\"${value}\"\u003e\u003cpath d=\"M0 .5H31.5V32\"/\u003e\u003c/svg\u003e`\n            )}\")`,\n          }),\n          \"bg-grid-small\": (value: any) =\u003e ({\n            backgroundImage: `url(\"${svgToDataUri(\n              `\u003csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" width=\"8\" height=\"8\" fill=\"none\" stroke=\"${value}\"\u003e\u003cpath d=\"M0 .5H31.5V32\"/\u003e\u003c/svg\u003e`\n            )}\")`,\n          }),\n          \"bg-dot\": (value: any) =\u003e ({\n            backgroundImage: `url(\"${svgToDataUri(\n              `\u003csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" width=\"16\" height=\"16\" fill=\"none\"\u003e\u003ccircle fill=\"${value}\" id=\"pattern-circle\" cx=\"10\" cy=\"10\" r=\"1.6257413380501518\"\u003e\u003c/circle\u003e\u003c/svg\u003e`\n            )}\")`,\n          }),\n        },\n        { values: flattenColorPalette(theme(\"backgroundColor\")), type: \"color\" }\n      );\n    },\n  ],\n} satisfies Config;\n\nfunction addVariablesForColors({ addBase, theme }: any) {\n  let allColors = flattenColorPalette(theme(\"colors\"));\n  let newVars = Object.fromEntries(\n    Object.entries(allColors).map(([key, val]) =\u003e [`--${key}`, val])\n  );\n\n  addBase({\n    \":root\": newVars,\n  });\n}\n\nexport default config;\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ccode\u003eglobals.css\u003c/code\u003e\u003c/summary\u003e\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 240 10% 3.9%;\n\n    --card: 0 0% 100%;\n    --card-foreground: 240 10% 3.9%;\n\n    --popover: 0 0% 100%;\n    --popover-foreground: 240 10% 3.9%;\n\n    --primary: 240 5.9% 10%;\n    --primary-foreground: 0 0% 98%;\n\n    --secondary: 240 4.8% 95.9%;\n    --secondary-foreground: 240 5.9% 10%;\n\n    --muted: 240 4.8% 95.9%;\n    --muted-foreground: 240 3.8% 46.1%;\n\n    --accent: 240 4.8% 95.9%;\n    --accent-foreground: 240 5.9% 10%;\n\n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 0 0% 98%;\n\n    --border: 240 5.9% 90%;\n    --input: 240 5.9% 90%;\n    --ring: 240 10% 3.9%;\n\n    --radius: 0.5rem;\n  }\n\n  .dark {\n    --background: 240 10% 3.9%;\n    --foreground: 0 0% 98%;\n\n    --card: 240 10% 3.9%;\n    --card-foreground: 0 0% 98%;\n\n    --popover: 240 10% 3.9%;\n    --popover-foreground: 0 0% 98%;\n\n    --primary: 0 0% 98%;\n    --primary-foreground: 240 5.9% 10%;\n\n    --secondary: 240 3.7% 15.9%;\n    --secondary-foreground: 0 0% 98%;\n\n    --muted: 240 3.7% 15.9%;\n    --muted-foreground: 240 5% 64.9%;\n\n    --accent: 240 3.7% 15.9%;\n    --accent-foreground: 0 0% 98%;\n\n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 0 0% 98%;\n\n    --border: 240 3.7% 15.9%;\n    --input: 240 3.7% 15.9%;\n    --ring: 240 4.9% 83.9%;\n  }\n}\n\n@layer base {\n  * {\n    @apply border-border !scroll-smooth;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n  button {\n    @apply active:outline-none;\n  }\n}\n\n@layer utilities {\n  .heading {\n    @apply font-bold text-4xl md:text-5xl text-center;\n  }\n\n  .black-gradient {\n    background: linear-gradient(90deg, #161a31 0%, #06091f 100%);\n  }\n}\n```\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdarkshadowcoder%2F3d_nextjs_portfolio","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdarkshadowcoder%2F3d_nextjs_portfolio","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdarkshadowcoder%2F3d_nextjs_portfolio/lists"}