scuffed slider loop

Author: Melyguy

bun.lockb

@@ -10,20 +10,21 @@
   },
   "dependencies": {
     "framer-motion": "^11.11.9",
-    "next": "14.2.14",
-    "react": "^18",
-    "react-dom": "^18",
+    "lenis": "^1.1.14",
+    "next": "15.0.0-rc.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-intersection-observer": "^9.13.1",
-    "vite": "^5.4.8"
+    "vite": "^5.4.10"
   },
   "devDependencies": {
-    "@types/node": "^20",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
-    "eslint": "^8",
+    "@types/node": "^20.17.0",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "eslint": "^8.57.1",
     "eslint-config-next": "14.2.14",
-    "postcss": "^8",
-    "tailwindcss": "^3.4.1",
-    "typescript": "^5"
+    "postcss": "^8.4.47",
+    "tailwindcss": "^3.4.14",
+    "typescript": "^5.6.3"
   }
 }

package-lock.json

@@ -0,0 +1,33 @@
+"use client"
+
+import React from "react";
+import Image from "next/image";
+
+import { StaticImageData } from "next/image";
+
+interface ProjectProps {
+  imageSrc: StaticImageData; 
+  title: string;
+  content: string;
+}
+
+export default function Project({ imageSrc, title, content, }: ProjectProps) {
+
+    return (
+        <>
+            <div className="relative flex flex-col justify-between h-full">
+                <Image src={imageSrc} alt="" className="w-full aspect-square object-cover rounded-[3vw] bg-thirdy cursor-pointer" />
+                <div className="flex justify-between items-center relative z-10 rounded-lg py-5"> 
+                    <div className="flex flex-col gap-3 w-full h-[200px]">
+                        <div className="text-secondary text-[6vw] md:text-[2vw]">{title}</div>
+                        <div className="flex gap-1">
+                        </div>
+                        <div className="w-full flex justify-between">
+                            <div className="text-thirdy text-[3vw] md:text-[1vw] w-4/5">{content}</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+}

package.json

@@ -0,0 +1,66 @@
+import { useState } from "react";
+import Project from "./project";
+import FadeIn from "./fadein";
+
+
+import citycaseImg1 from "@assets/5factory.png"
+import citycaseImg2 from "@assets/bigbank.png"
+import citycaseImg3 from "@assets/ccmainmenu.png"
+import citycaseImg4 from "@assets/gamble1.png"
+import citycaseImg5 from "@assets/gamble2.png"
+import citycaseImg6 from "@assets/peopleandtowers.png"
+
+export default function Slider() {
+    const projects = [
+        {imageSrc: citycaseImg1, title: "City Case img#1", content: 'hello hello testestest'},
+        {imageSrc: citycaseImg2, title: "City Case img#2", content: 'hello hello testestest'},
+        {imageSrc: citycaseImg3, title: "City Case img#3", content: 'hello hello testestest'},
+        {imageSrc: citycaseImg4, title: "City Case img#4", content: 'hello hello testestest'},
+        {imageSrc: citycaseImg5, title: "City Case img#5", content: 'hello hello testestest'},
+        {imageSrc: citycaseImg6, title: "City Case img#6", content: 'hello hello testestest'}
+    ];
+    const[index, setIndex] = useState(0);
+    const totalImages = projects.length
+
+    const next = () => {
+        if(index < totalImages - 1){
+            setIndex((prevIndex) => prevIndex + 1)  
+        }
+        if (index >= totalImages -1){
+            setIndex((prevIndex) => 0)  
+        }
+    }
+    const prev = () => {
+        if (index > 0) {
+            setIndex((prevIndex) => prevIndex - 1);
+        }
+    };
+
+    return (
+        <FadeIn delay={0}>
+            <div className="w-full p-5 md:p-10">
+                <div className="grid grid-cols-3 grid-rows-1 overflow-hidden gap-5 md:gap-10">
+                    {projects.slice(index, index + 3).map((project) => (
+                        <div key={project.title}>
+                            <Project
+                                imageSrc={project.imageSrc}
+                                title={project.title}
+                                content={project.content}
+                            />
+                        </div>
+                    ))}
+                </div>
+                <div className="w-full flex justify-between items-center">
+                    <button onClick={prev} className='bg-secondary aspect-square rounded-full p-5' disabled={index === 0}>Prev</button>
+                    <div className="flex gap-3">
+                        {Array.from({ length: Math.ceil(totalImages) }).map((_, i) => (
+                            <div key={i} className={`aspect-square w-5 h-5 rounded-full ${i === Math.floor(index) ? 'bg-secondary scale-125' : 'bg-primary scale-100'}`}></div>
+                        ))}
+                    </div>
+                    <button onClick={next} className='bg-secondary aspect-square rounded-full p-5' disabled={index >= totalImages}>Next</button>
+                </div>
+            </div>
+        </FadeIn>
+    );
+};
+

src/Components/assets/5factory.png

@@ -1,8 +1,9 @@
 "use client"
 
-import React from "react";
+import React, {useEffect} from "react";
 import Link from 'next/link';
 import FadeIn from "@/Components/fadein";
+import Lenis from "lenis";
 
 import RenderWidget from "@/Components/renderwidget";
 import renderbrain from "./Assets/brainrender.png"
@@ -14,6 +15,16 @@ import FugaRender from "./Assets/fuga.png"
 
 
 export default function Home() {
+  useEffect( () => {
+    window.scrollTo(0, 0);
+
+    const lenis = new Lenis();
+    const raf = (time: number) => {
+      lenis.raf(time);
+      requestAnimationFrame(raf);
+    }
+    requestAnimationFrame(raf);
+  }, []);
 const mainText = "Blender"
     const textDesc = "Blender is a program for designing 3d models and renders. I make all of my models and renders here. I take alot of inspiration from media I watch. Here is some of my work in this program."
   return (

src/Components/assets/bigbank.png

@@ -2,6 +2,7 @@
 
 import React from "react";
 import Link from 'next/link';
+import Slider from "@/Components/slider";
 //import Image from "next/image";
 
 export default function Home() {
@@ -16,6 +17,12 @@ const mainText = "Games"
       </div>
       <h1 className=" h-[45vh] flex justify-center items-center text-[15vw] font-bold md:h-[45vh] md:flex md:justify-center md:items-center md:text-[15vw] md:font-bold ">{mainText}</h1>
       <p className="h-[10vh] flex justify-center pr-20 pl-20 items-center text-[5vw] font-bold md:h-[20vh] md:flex md:justify-center md:pr-80 md:pl-80 md:items-center md:text-[2vw] md:font-bold">{textDesc} </p>
+      
+      <h1 className="h-[50vh] flex justify-center items-center text-[10vw] pt-[50vh] font-bold">City Case</h1>7
+      <div className="p-10">
+      <Slider />
+      </div>
+
       <footer>
 
       </footer>

src/Components/assets/ccmainmenu.png

@@ -1,6 +1,10 @@
 {
   "compilerOptions": {
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -18,9 +22,18 @@
       }
     ],
     "paths": {
-      "@/*": ["./src/*"]
-    }
+      "@/*": ["./src/*"],
+      "@assets/*": ["./src/Components/assets/*"]
+    },
+    "target": "ES2017"
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }