✅ fix: change the about layout and animation

nyomansunima · Nov 24, 2023 · e88b08f · e88b08f
1 parent 50d2b76
commit e88b08f
Show file tree

Hide file tree

Showing 8 changed files with 46 additions and 39 deletions.
diff --git a/src/app/about/about-activity-section.tsx b/src/app/about/about-activity-section.tsx
@@ -1,6 +1,10 @@
 export default function AboutActivitySection() {
   return (
-    <section className="flex flex-col container mx-auto laptop:px-20 px-5 items-center">
+    <section
+      className="flex flex-col container mx-auto laptop:px-20 px-5 items-center"
+      data-animation="body-background-transition"
+      data-animation-body-color="#98CBD6"
+    >
       <h2
         className="text-5xl laptop:text-8xl !leading-tight"
         data-animation="text-char-opacity"
@@ -12,8 +16,8 @@ export default function AboutActivitySection() {
       </h2>
 
       <div className="grid grid-cols-1 laptop:grid-cols-2 text-xl leading-relaxed gap-10 mt-20 laptop:mt-36">
-        <div>
-          <p>
+        <div data-animation="slide-up">
+          <p data-animation-target>
             My daily activities revolve around the exciting process of
             transforming concepts into fully-fledged applications. From the very
             inception of an idea, I dive into thorough research. Understanding
@@ -24,8 +28,8 @@ export default function AboutActivitySection() {
             process.
           </p>
         </div>
-        <div>
-          <p>
+        <div data-animation="slide-up">
+          <p data-animation-target>
             Design is where the magic happens. With a keen eye for aesthetics
             and an understanding of user experience, I create captivating
             interfaces that strike a perfect balance between beauty and
@@ -38,8 +42,8 @@ export default function AboutActivitySection() {
             forms the backbone of the final product.
           </p>
         </div>
-        <div>
-          <p>
+        <div data-animation="slide-up">
+          <p data-animation-target>
             I believe in the power of shipping products that make a real impact.
             With careful testing, bug fixes, and optimizations, I ensure that
             the application is polished and ready for launch. The satisfaction

diff --git a/src/app/about/about-career-section.tsx b/src/app/about/about-career-section.tsx
@@ -11,7 +11,10 @@ export default function AboutCareerSection() {
   })
 
   return (
-    <section className="flex flex-col container mx-auto laptop:px-20 px-5">
+    <section
+      className="flex flex-col container mx-auto laptop:px-20 px-5"
+      data-animation="body-background-transition"
+    >
       <h2
         className="text-5xl laptop:text-8xl !leading-tight"
         data-animation="text-char-slide-down"

diff --git a/src/app/about/about-contact-section.tsx b/src/app/about/about-contact-section.tsx
@@ -2,12 +2,17 @@ import Link from 'next/link'
 
 export default function AboutContactSection() {
   return (
-    <section className="flex container mx-auto laptop:px-20 px-5">
+    <section
+      className="flex container mx-auto laptop:px-20 px-5"
+      data-animation="slide-up"
+    >
       <Link
         href="/contact"
         className="text-5xl laptop:text-8xl text-center !leading-tight"
         data-cursor-size="100"
         data-cursor-text="Contact"
+        data-cursor-color="#0B20F3"
+        data-animation-target
       >
         <div>Let's make your idea become reality. We can discuss anything.</div>
       </Link>

diff --git a/src/app/about/about-intro-section.tsx b/src/app/about/about-intro-section.tsx
diff --git a/src/app/about/about-profile-section.tsx b/src/app/about/about-profile-section.tsx
@@ -1,19 +1,30 @@
 export default function AboutProfileSection() {
   return (
-    <section className="flex flex-col container mx-auto laptop:px-20 px-5">
+    <section
+      className="flex flex-col container mx-auto laptop:px-20 px-5 laptop:py-20"
+      data-animation="body-background-transition"
+    >
       <h2
         className="text-5xl laptop:text-8xl !leading-tight"
         data-animation="text-char-slide-up"
         data-cursor-size="200"
         data-cursor-exclusion
       >
         <span className="laptop:pl-20"></span>
-        I'm product designer & creative fullstack developer
+        I'm product
+        <span
+          className="px-8 py-4 rounded-full bg-[#FF5FA1] mx-4"
+          data-animation="fade"
+          data-animation-dela=".4"
+        >
+          designer
+        </span>{' '}
+        & fullstack developer
       </h2>
 
       <div className="flex flex-col laptop:w-8/12 text-xl leading-relaxed gap-10 mt-36">
-        <div className="flex-none">
-          <p>
+        <div className="flex-none" data-animation="slide-up">
+          <p data-animation-target>
             Hello, My name is Nyoman Sunima, a product designer and creative
             developer with a passion for solving problems. My journey as a
             designer has been driven by the desire to create innovative
@@ -27,8 +38,8 @@ export default function AboutProfileSection() {
             impression.
           </p>
         </div>
-        <div className="flex-none">
-          <p>
+        <div className="flex-none" data-animation="slide-up">
+          <p data-animation-target>
             But my expertise doesn't stop at design. I'm also a creative
             developer equipped with technical skills to bring ideas to life.
             Through my knowledge of programming languages and cutting-edge

diff --git a/src/app/about/about-timeline-item.tsx b/src/app/about/about-timeline-item.tsx
@@ -6,8 +6,8 @@ type Props = {
 
 export function AboutTimelineItem({ timeline }: Props) {
   return (
-    <div className="block col-span-1 border-l border-gray-200 dark:border-gray-800 py-16 px-5">
-      <span className="text-lg text-neutral-400">{timeline.date}</span>
+    <div className="block col-span-1 dark:border-gray-800 py-16 px-5">
+      <span className="text-lg">{timeline.date}</span>
 
       <h3 className="text-xl mt-3 block">{timeline.title}</h3>
     </div>

diff --git a/src/app/about/about-timeline-section.tsx b/src/app/about/about-timeline-section.tsx
@@ -11,10 +11,14 @@ export default function AboutTimelineSection() {
   })
 
   return (
-    <section className="flex flex-col container mx-auto laptop:px-20 px-5">
+    <section
+      className="flex flex-col container mx-auto laptop:px-20 px-5"
+      data-animation="body-background-transition"
+      data-animation-body-color="#C8E543"
+    >
       <h2
         className="text-5xl laptop:text-8xl !leading-tight"
-        data-animation="text-line-mask-opacity-scrub"
+        data-animation="text-char-slide-down"
         data-cursor-size="200"
         data-cursor-exclusion
       >

diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
@@ -1,7 +1,6 @@
 import AboutActivitySection from './about-activity-section'
 import AboutCareerSection from './about-career-section'
 import AboutContactSection from './about-contact-section'
-import AboutIntroSection from './about-intro-section'
 import AboutProfileSection from './about-profile-section'
 import AboutTimelineSection from './about-timeline-section'
 import { Metadata } from 'next'
@@ -28,7 +27,6 @@ export const metadata: Metadata = {
 export default function AboutPage() {
   return (
     <main className="flex flex-col py-28 pb-80 gap-40 laptop:gap-80">
-      <AboutIntroSection />
       <AboutProfileSection />
       <AboutActivitySection />
       <AboutTimelineSection />