footer and projects start working

version-patch
trueberryless-org · Feb 15, 2024 · 600cd38 · 600cd38
1 parent a25b6b8
commit 600cd38
Show file tree

Hide file tree

Showing 15 changed files with 756 additions and 15 deletions.
diff --git a/app/footer.tsx b/app/footer.tsx
@@ -0,0 +1,37 @@
+"use client";
+import { GoogleGeminiEffect } from "@/components";
+import { useScroll, useTransform } from "framer-motion";
+import React from "react";
+
+export function Footer() {
+    const ref = React.useRef(null);
+    const { scrollYProgress } = useScroll({
+        target: ref,
+        offset: ["start start", "end start"],
+    });
+
+    const pathLengthFirst = useTransform(scrollYProgress, [0, 0.8], [0.2, 1.2]);
+    const pathLengthSecond = useTransform(scrollYProgress, [0, 0.8], [0.15, 1.2]);
+    const pathLengthThird = useTransform(scrollYProgress, [0, 0.8], [0.1, 1.2]);
+    const pathLengthFourth = useTransform(scrollYProgress, [0, 0.8], [0.05, 1.2]);
+    const pathLengthFifth = useTransform(scrollYProgress, [0, 0.8], [0, 1.2]);
+
+    return (
+        <div
+            className="h-[400vh] bg-black w-full rounded-md relative pt-40 overflow-clip"
+            ref={ref}
+        >
+            <GoogleGeminiEffect
+                pathLengths={[
+                    pathLengthFirst,
+                    pathLengthSecond,
+                    pathLengthThird,
+                    pathLengthFourth,
+                    pathLengthFifth,
+                ]}
+                title="Thank you for visiting my website!"
+                description="This website was built using Next.js, Tailwind CSS, and Aceternity UI. I hope you enjoyed it!"
+            />
+        </div>
+    );
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
+import classNames from "classnames";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -14,9 +15,11 @@ export default function RootLayout({
 }: Readonly<{
     children: React.ReactNode;
 }>) {
+    const bodyClasses = classNames(inter.className);
+
     return (
-        <html lang="en">
-            <body className={inter.className}>{children}</body>
+        <html lang="en" className="scrollbar-hide scroll-smooth">
+            <body className={bodyClasses}>{children}</body>
         </html>
     );
 }
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,15 +1,19 @@
 import { CurriculumVitae } from "./curriculum-vitae";
+import { Footer } from "./footer";
 import Header from "./header";
 import Images from "./images";
+import { Projects } from "./projects";
 import SocialMedia from "./social-media";
 
 export default function Home() {
     return (
         <div>
             <Header />
             {/* <CurriculumVitae /> */}
+            <Projects />
             <Images />
             <SocialMedia />
+            <Footer />
         </div>
     );
 }
diff --git a/app/projects.tsx b/app/projects.tsx
@@ -0,0 +1,111 @@
+import { CardBody, CardContainer, CardItem, FollowerPointerCard, HoverEffect } from "@/components";
+import Image from "next/image";
+import React from "react";
+
+export function Projects() {
+    return (
+        <div>
+            <h1 className="md:text-4xl text-xl text-center text-white relative z-20 pb-20">
+                Projects
+            </h1>
+            <div className="max-w-5xl mx-auto px-10 lg:flex lg:justify-between lg:items-center">
+                <CardContainer className="inter-var">
+                    <CardBody className="bg-gray-50 relative group/card  dark:hover:shadow-2xl dark:hover:shadow-emerald-500/[0.1] dark:bg-black dark:border-white/[0.2] border-black/[0.1] w-auto sm:w-2xl h-auto rounded-xl p-6 border">
+                        <CardItem
+                            translateZ="50"
+                            className="text-xl font-bold text-neutral-600 dark:text-white"
+                        >
+                            Mutanuq
+                        </CardItem>
+                        <CardItem
+                            as="p"
+                            translateZ="60"
+                            className="text-neutral-500 text-sm max-w-sm mt-2 dark:text-neutral-300"
+                        >
+                            Knowledge of a technical college
+                        </CardItem>
+                        <CardItem translateZ="100" className="w-full mt-4">
+                            <Image
+                                src="/projects/mutanuq.png"
+                                height="1000"
+                                width="1000"
+                                className="h-60 w-full object-cover rounded-xl group-hover/card:shadow-xl"
+                                alt="thumbnail"
+                            />
+                        </CardItem>
+                        <div className="flex justify-between items-center mt-10">
+                            <div></div>
+                            <CardItem
+                                translateZ={20}
+                                as="button"
+                                className="px-4 py-2 rounded-xl text-xs font-normal dark:text-white"
+                            >
+                                <a href="https://mutanuq.trueberryless.org/">Try now →</a>
+                            </CardItem>
+                        </div>
+                    </CardBody>
+                </CardContainer>
+
+                <CardContainer className="inter-var">
+                    <CardBody className="bg-gray-50 relative group/card  dark:hover:shadow-2xl dark:hover:shadow-emerald-500/[0.1] dark:bg-black dark:border-white/[0.2] border-black/[0.1] w-auto sm:w-2xl h-auto rounded-xl p-6 border">
+                        <CardItem
+                            translateZ="50"
+                            className="text-xl font-bold text-neutral-600 dark:text-white"
+                        >
+                            Group Chat
+                        </CardItem>
+                        <CardItem
+                            as="p"
+                            translateZ="60"
+                            className="text-neutral-500 text-sm max-w-sm mt-2 dark:text-neutral-300"
+                        >
+                            Chat with other people all over the world
+                        </CardItem>
+                        <CardItem translateZ="100" className="w-full mt-4">
+                            <Image
+                                src="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?q=80&w=2560&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+                                height="1000"
+                                width="1000"
+                                className="h-60 w-full object-cover rounded-xl group-hover/card:shadow-xl"
+                                alt="thumbnail"
+                            />
+                        </CardItem>
+                        <div className="flex justify-between items-center mt-10">
+                            <div></div>
+                            <CardItem
+                                translateZ={20}
+                                as="button"
+                                className="px-4 py-2 rounded-xl text-xs font-normal dark:text-white"
+                            >
+                                <a href="https://chat.trueberryless.org/">Try now →</a>
+                            </CardItem>
+                        </div>
+                    </CardBody>
+                </CardContainer>
+            </div>
+            <div className="max-w-5xl mx-auto px-8">
+                <HoverEffect items={projects} />
+            </div>
+        </div>
+    );
+}
+export const projects = [
+    {
+        title: "TrainIT",
+        description:
+            "Track your fitness data with this app. Track your workouts, see your progress, and see your progress compared to your friends.",
+        link: "https://trainit.trueberryless.org/",
+    },
+    {
+        title: "Y",
+        description:
+            "Y should I explain? Y is a platform that allows you to share your thoughts with your friends.",
+        link: "https://y.trueberryless.org/",
+    },
+    {
+        title: "About",
+        description:
+            "Find out more about me and my projects. I am a full stack developer with a passion for technology.",
+        link: "https://trueberryless.org/",
+    },
+];
diff --git a/app/social-media.tsx b/app/social-media.tsx
@@ -17,25 +17,25 @@ const links = [
     },
     {
         id: 3,
-        name: "X",
-        designation: "trueberryless",
-        image: "/logos/x.jpg",
-        href: "https://x.com/trueberryless",
-    },
-    {
-        id: 4,
         name: "LinkedIn",
-        designation: "trueberryless",
+        designation: "felix-schneider",
         image: "/logos/linkedin.png",
         href: "https://www.linkedin.com/in/felix-schneider-214154261/",
     },
     {
-        id: 5,
+        id: 4,
         name: "monkeytype",
         designation: "trueberryless",
         image: "/logos/monkeytype.png",
         href: "https://monkeytype.com/profile/trueberryless",
     },
+    {
+        id: 5,
+        name: "GitHub",
+        designation: "trueberryless",
+        image: "/logos/github.webp",
+        href: "https://github.com/trueberryless",
+    },
     {
         id: 6,
         name: "Lichess",
@@ -52,13 +52,20 @@ const links = [
     },
     {
         id: 8,
+        name: "X",
+        designation: "trueberryless",
+        image: "/logos/x.jpg",
+        href: "https://x.com/trueberryless",
+    },
+    {
+        id: 9,
         name: "Reddit",
         designation: "trueberryless",
         image: "/logos/reddit.png",
         href: "https://www.reddit.com/user/trueberryless/",
     },
     {
-        id: 9,
+        id: 10,
         name: "StackOverflow",
         designation: "trueberryless",
         image: "/logos/stack-overflow.png",

diff --git a/components/index.ts b/components/index.ts
@@ -4,3 +4,7 @@ export * from "./ui/parallax-scroll";
 export * from "./ui/animated-tooltip";
 export * from "./ui/sticky-scroll-reveal";
 export * from "./ui/tracing-beam";
+export * from "./ui/card-hover-effect";
+export * from "./ui/following-pointer";
+export * from "./ui/3d-card";
+export * from "./ui/google-gemini-effect";