many changes; looks great

version-patch

app/curriculum-vitae.tsx

@@ -2,11 +2,30 @@
 import React from "react";
 import Image from "next/image";
 import { twMerge } from "tailwind-merge";
-import { TracingBeam } from "@/components";
+import { TracingBeam, TypewriterEffectSmooth } from "@/components";
 
 export function CurriculumVitae() {
+    const words = [
+        {
+            text: "The",
+        },
+        {
+            text: "journey",
+            className: "text-blue-500 dark:text-blue-500",
+        },
+        {
+            text: "begins",
+        },
+        {
+            text: "here.",
+        },
+    ];
+
     return (
-        <TracingBeam className="">
+        <TracingBeam>
+            <div className="flex flex-col items-center justify-center h-[10rem]">
+                <TypewriterEffectSmooth words={words} />
+            </div>
             <div className="max-w-2xl mx-auto antialiased pt-4 relative">
                 {dummyContent.map((item, index) => (
                     <div key={`content-${index}`} className="mb-10">
@@ -37,72 +56,69 @@ export function CurriculumVitae() {
 
 const dummyContent = [
     {
-        title: "Lorem Ipsum Dolor Sit Amet",
+        title: "From primary school to college",
         description: (
             <>
                 <p>
-                    Sit duis est minim proident non nisi velit non consectetur. Esse adipisicing
-                    laboris consectetur enim ipsum reprehenderit eu deserunt Lorem ut aliqua anim
-                    do. Duis cupidatat qui irure cupidatat incididunt incididunt enim magna id est
-                    qui sunt fugiat. Laboris do duis pariatur fugiat Lorem aute sit ullamco. Qui
-                    deserunt non reprehenderit dolore nisi velit exercitation Lorem qui do enim
-                    culpa. Aliqua eiusmod in occaecat reprehenderit laborum nostrud fugiat voluptate
-                    do Lorem culpa officia sint labore. Tempor consectetur excepteur ut fugiat
-                    veniam commodo et labore dolore commodo pariatur.
-                </p>
-                <p>
-                    Dolor minim irure ut Lorem proident. Ipsum do pariatur est ad ad veniam in
-                    commodo id reprehenderit adipisicing. Proident duis exercitation ad quis ex
-                    cupidatat cupidatat occaecat adipisicing.
-                </p>
-                <p>
-                    Tempor quis dolor veniam quis dolor. Sit reprehenderit eiusmod reprehenderit
-                    deserunt amet laborum consequat adipisicing officia qui irure id sint
-                    adipisicing. Adipisicing fugiat aliqua nulla nostrud. Amet culpa officia aliquip
-                    deserunt veniam deserunt officia adipisicing aliquip proident officia sunt.
+                    My journey begins in 2005, when I was born on 20 February. I started primary
+                    school in 2011 and eight years later I left secondary school. The first big
+                    decision of my life after grammar school was to go to technical college. And I
+                    completed this educational unit in Krems an der Donau in 2024.
                 </p>
+                <br />
+                <p></p>
             </>
         ),
-        badge: "React",
-        image: "https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&q=80&w=3540&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+        badge: "Education",
+        image: "/cv/education.jpg",
     },
     {
-        title: "Lorem Ipsum Dolor Sit Amet",
+        title: "Internships and their advantages",
         description: (
             <>
                 <p>
-                    Ex irure dolore veniam ex velit non aute nisi labore ipsum occaecat deserunt
-                    cupidatat aute. Enim cillum dolor et nulla sunt exercitation non voluptate qui
-                    aliquip esse tempor. Ullamco ut sunt consectetur sint qui qui do do qui do.
-                    Labore laborum culpa magna reprehenderit ea velit id esse adipisicing deserunt
-                    amet dolore. Ipsum occaecat veniam commodo proident aliqua id ad deserunt dolor
-                    aliquip duis veniam sunt.
-                </p>
-                <p>
-                    In dolore veniam excepteur eu est et sunt velit. Ipsum sint esse veniam fugiat
-                    esse qui sint ad sunt reprehenderit do qui proident reprehenderit. Laborum
-                    exercitation aliqua reprehenderit ea sint cillum ut mollit.
+                    I started doing internships during my technical colleague&apos;s summer
+                    holidays. These are extremely helpful for gaining real-life work experience that
+                    can&apos;t be learnt at school. This has also enabled me to find out which
+                    sectors in the information technology field I like and which I don&apos;t like.
+                    Because I prefer to work on the frontend rather than the backend. However, I
+                    also really like the backend, as long as it is not an outdated and poorly
+                    documented programming language.
                 </p>
+                <br />
+                <p></p>
             </>
         ),
-        badge: "Changelog",
-        image: "https://images.unsplash.com/photo-1519681393784-d120267933ba?auto=format&fit=crop&q=80&w=3540&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+        badge: "Work experience",
+        image: "/cv/work_experience.webp",
     },
     {
-        title: "Lorem Ipsum Dolor Sit Amet",
+        title: "Tennis, golf and Rocket League",
         description: (
             <>
                 <p>
-                    Ex irure dolore veniam ex velit non aute nisi labore ipsum occaecat deserunt
-                    cupidatat aute. Enim cillum dolor et nulla sunt exercitation non voluptate qui
-                    aliquip esse tempor. Ullamco ut sunt consectetur sint qui qui do do qui do.
-                    Labore laborum culpa magna reprehenderit ea velit id esse adipisicing deserunt
-                    amet dolore. Ipsum occaecat veniam commodo proident aliqua id ad deserunt dolor
-                    aliquip duis veniam sunt.
+                    My father taught me to play golf at a very early age, as he is also a keen
+                    golfer himself. As a result, I have always been fascinated by beautiful golf
+                    courses, where I have always found my peace and connection with nature.
+                </p>
+                <br />
+                <p>
+                    But golf is not my only hobby. I have had many hobbies over the years. For some
+                    months I was in love with the magic of card tricks and couldn&apos;t stop
+                    practising them and improving my dexterity. However, that too has now stopped. I
+                    also love to play tennis, both big and small, and the more subtle table tennis.
+                </p>
+                <br />
+                <p>
+                    In terms of video and board games, I&apos;ve never been interested in
+                    first-person shooters and the like. I much prefer to play 2D platformers, the
+                    best by far still being Celeste, and racing games such as Trackmania or Rocket
+                    League. Speaking of board games, if you ever want to play a game of chess
+                    against me, I&apos;m up for it.
                 </p>
             </>
         ),
-        badge: "Launch Week",
-        image: "https://images.unsplash.com/photo-1469474968028-56623f02e42e?auto=format&fit=crop&q=80&w=3506&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+        badge: "Hobbies",
+        image: "/cv/hobbies.jpg",
     },
 ];

app/header.tsx

@@ -1,10 +1,13 @@
-import { SparklesCore } from "@/components";
+import { BackgroundBeams, SparklesCore } from "@/components";
 
 export default function Header() {
     return (
-        <div className="h-[100vh] w-full bg-black flex flex-col items-center justify-center overflow-hidden rounded-md">
+        <div className="h-[100vh] w-full bg-black flex flex-col items-center justify-center rounded-md">
+            <h6 className="md:text-md text-sm lg:text-lg text-center text-gray-500 relative z-20">
+                @trueberryless
+            </h6>
             <h1 className="md:text-7xl text-3xl lg:text-9xl font-bold text-center text-white relative z-20">
-                trueberryless
+                Felix Schneider
             </h1>
             <div className="w-[40rem] h-40 relative">
                 {/* Gradients */}
@@ -18,14 +21,16 @@ export default function Header() {
                     background="transparent"
                     minSize={0.3}
                     maxSize={1.2}
-                    particleDensity={1200}
+                    particleDensity={600}
                     className="w-full h-full"
                     particleColor="#FFFFFF"
                 />
 
                 {/* Radial Gradient to prevent sharp edges */}
                 <div className="absolute inset-0 w-full h-full bg-black [mask-image:radial-gradient(350px_200px_at_top,transparent_20%,white)]"></div>
             </div>
+            <div className="absolute w-full h-full bg-gradient-to-b from-transparent via-transparent to-black z-10"></div>
+            <BackgroundBeams />
         </div>
     );
 }

app/images.tsx

@@ -1,10 +1,34 @@
-import { ParallaxScroll } from "@/components";
+import { ParallaxScroll, TypewriterEffectSmooth } from "@/components";
 
 export default function Images() {
-    return <ParallaxScroll images={images} />;
+    const words = [
+        {
+            text: "Look",
+        },
+        {
+            text: "at",
+        },
+        {
+            text: "those",
+        },
+        {
+            text: "pics.",
+            className: "text-blue-500 dark:text-blue-500",
+        },
+    ];
+
+    return (
+        <div>
+            <div className="flex flex-col items-center justify-center h-[10rem]">
+                <TypewriterEffectSmooth words={words} />
+            </div>
+            <ParallaxScroll images={images} />
+        </div>
+    );
 }
 
 const images = [
+    "/felix/0.jpg",
     "/felix/1.jpg",
     "/felix/2.jpg",
     "/felix/3.jpg",
@@ -15,8 +39,4 @@ const images = [
     "/felix/8.jpg",
     "/felix/9.jpg",
     "/felix/10.jpg",
-    "/felix/11.jpg",
-    "/felix/12.jpg",
-    "/felix/13.jpg",
-    "/felix/14.jpg",
 ];

app/page.tsx

@@ -1,3 +1,4 @@
+import { BackgroundBeams } from "@/components";
 import { CurriculumVitae } from "./curriculum-vitae";
 import { Footer } from "./footer";
 import Header from "./header";
@@ -9,10 +10,13 @@ export default function Home() {
     return (
         <div>
             <Header />
-            {/* <CurriculumVitae /> */}
+            <CurriculumVitae />
+            <div className="h-40"></div>
             <Projects />
+            <div className="h-40"></div>
             <Images />
             <SocialMedia />
+            <div className="h-10"></div>
             <Footer />
         </div>
     );

app/projects.tsx

@@ -1,13 +1,35 @@
-import { CardBody, CardContainer, CardItem, FollowerPointerCard, HoverEffect } from "@/components";
+import {
+    CardBody,
+    CardContainer,
+    CardItem,
+    HoverEffect,
+    TypewriterEffectSmooth,
+} from "@/components";
 import Image from "next/image";
 import React from "react";
 
 export function Projects() {
+    const words = [
+        {
+            text: "My",
+        },
+        {
+            text: "favourite",
+            className: "text-blue-500 dark:text-blue-500",
+        },
+        {
+            text: "personal",
+        },
+        {
+            text: "projects.",
+        },
+    ];
+
     return (
         <div>
-            <h1 className="md:text-4xl text-xl text-center text-white relative z-20 pb-20">
-                Projects
-            </h1>
+            <div className="flex flex-col items-center justify-center h-[10rem]">
+                <TypewriterEffectSmooth words={words} />
+            </div>
             <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">

app/social-media.tsx

@@ -1,4 +1,4 @@
-import { AnimatedTooltip } from "@/components";
+import { AnimatedTooltip, TypewriterEffectSmooth } from "@/components";
 
 const links = [
     {
@@ -74,13 +74,35 @@ const links = [
 ];
 
 export default function SocialMedia() {
+    const words = [
+        {
+            text: "Welcome",
+        },
+        {
+            text: "to",
+        },
+        {
+            text: "the",
+        },
+        {
+            text: "trueberryless",
+            className: "text-blue-500 dark:text-blue-500",
+        },
+        {
+            text: "network!",
+        },
+    ];
+
     return (
-        <div className="w-full grid gap-20">
-            <h1 className="md:text-4xl text-xl text-center text-white relative z-20">
-                Social Media
-            </h1>
-            <div className="flex flex-row items-center justify-center mb-10 w-full">
-                <AnimatedTooltip items={links} />
+        <div className="h-[50rem] w-full dark:bg-black bg-white  dark:bg-dot-white/[0.2] bg-dot-black/[0.2] relative flex items-center justify-center">
+            <div className="absolute pointer-events-none inset-0 flex items-center justify-center dark:bg-black bg-white [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)]"></div>
+            <div>
+                <div className="flex flex-col items-center justify-center h-[10rem]">
+                    <TypewriterEffectSmooth words={words} />
+                </div>
+                <div className="flex flex-row items-center justify-center mb-10 w-full">
+                    <AnimatedTooltip items={links} />
+                </div>
             </div>
         </div>
     );

components/index.ts

@@ -2,9 +2,9 @@ export * from "./ui/sparkles";
 export * from "./ui/infinite-moving-cards";
 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";
+export * from "./ui/background-beams";
+export * from "./ui/typewriter-effect";