Merge pull request #246 from nyomansunima/245-feature-and-optimized

245 feature and optimized

.eslintrc.json

@@ -2,6 +2,7 @@
   "extends": ["next", "prettier"],
   "rules": {
     "react/no-unescaped-entities": "off",
-    "react-hooks/exhaustive-deps": "off"
+    "react-hooks/exhaustive-deps": "off",
+    "@next/next/no-img-element": "off"
   }
 }

package.json

@@ -26,7 +26,6 @@
     "graphql-request": "^6.1.0",
     "gsap": "^3.12.2",
     "next": "14.0.3",
-    "next-themes": "^0.2.1",
     "react": "^18",
     "react-dom": "^18",
     "react-hook-form": "^7.47.0",

src/app/(home)/components/home-blog-section.tsx → src/app/(root)/home-blog-section.tsx

@@ -1,16 +1,13 @@
 import Link from 'next/link'
-import { BlogPostItemCard } from '~/app/blog/components/blog-post-item'
-import { Button } from '~/app/components/ui/button'
+import { Button } from '~/components/ui/button'
 import { blogService } from '~/services/blog-service'
+import { BlogPostItemCard } from '../blog/blog-post-item'
 
 export default async function HomeBlogSection() {
   const posts = await blogService.getInitialBlogPost()
 
   return (
-    <section
-      v-show="posts.length > 0"
-      className="flex flex-col container mx-auto px-5 laptop:px-20 blog"
-    >
+    <section className="flex flex-col container mx-auto px-5 laptop:px-20 blog">
       <h2
         className="text-5xl laptop:text-8xl !leading-tight laptop:w-11/12"
         data-cursor-size="200"
@@ -20,18 +17,23 @@ export default async function HomeBlogSection() {
         I share my experience and educate other people.
       </h2>
 
-      <div className="flex mt-16 actions">
-        <Button asChild className="transition-all duration-700 hover:scale-95">
+      <div className="flex mt-16 actions" data-animation="slide-up">
+        <Button asChild data-animation-target>
           <Link href={'/blog'}>
             Learn from blog <i className="fi fi-rr-arrow-right"></i>
           </Link>
         </Button>
       </div>
 
-      <div className="grid grid-cols-1 laptop:grid-cols-3 gap-6 mt-20 list laptop:mt-36">
-        {posts.map((post, i) => (
-          <BlogPostItemCard post={post} key={i} />
-        ))}
+      <div data-animation="slide-up">
+        <div
+          className="grid grid-cols-1 laptop:grid-cols-3 gap-6 mt-20 list laptop:mt-36"
+          data-animation-target
+        >
+          {posts.map((post, i) => (
+            <BlogPostItemCard post={post} key={i} />
+          ))}
+        </div>
       </div>
     </section>
   )

src/app/(home)/components/home-contact-section.tsx → src/app/(root)/home-contact-section.tsx

@@ -1,9 +1,9 @@
-import { Button } from '~/app/components/ui/button'
+import { Button } from '~/components/ui/button'
 import Link from 'next/link'
 
 export default function HomeContactSection() {
   return (
-    <section className="flex flex-col container mx-auto px-5 laptop:px-20 projects">
+    <section className="flex flex-col container mx-auto px-5 laptop:px-20">
       <h2
         className="text-5xl laptop:text-8xl !leading-tight laptop:w-11/12 mx-auto text-center"
         data-cursor-size="200"

src/app/(home)/components/home-intro-section.tsx → src/app/(root)/home-intro-section.tsx

@@ -1,25 +1,31 @@
 'use client'
 
 import Link from 'next/link'
-import { Button } from '~/app/components/ui/button'
+import { Button } from '~/components/ui/button'
 
 export default function HomeIntroSection() {
   return (
-    <section className="flex flex-col container mx-auto laptop:px-20 intro px-5">
+    <section
+      className="flex flex-col container mx-auto laptop:px-20 intro px-5 laptop:py-24"
+      data-animation="body-background-transition"
+    >
       <h2
         className="text-5xl laptop:text-8xl !leading-tight"
         data-cursor-size="200"
         data-cursor-exclusion
         data-animation="text-char-opacity"
       >
         <span className="laptop:pl-20"></span>
-        Product Designer & Fullstack Developer specialized in crafting apps from
-        scratch.
+        Specialized in crafting apps from scratch.
       </h2>
 
       <div className="flex flex-col mt-24">
-        <div className="flex flex-col gap-10 text-xl !leading-relaxed laptop:w-10/12">
-          <p>
+        <div
+          className="flex flex-col gap-10 text-xl laptop:text-2xl !leading-relaxed laptop:w-10/12"
+          data-animation="slide-up"
+          data-animation-delay=".4"
+        >
+          <p data-animation-target>
             5+ years as a product designer and full stack developer. Been
             focusing on crafting apps through research, design, and development.
             My day to day revolves around designing and developing digital
@@ -30,14 +36,17 @@ export default function HomeIntroSection() {
         </div>
       </div>
 
-      <div className="flex items-center flex-wrap gap-5 mt-16">
+      <div
+        className="flex items-center flex-wrap gap-5 mt-16"
+        data-animation="slide-up"
+      >
         <Button
           asChild
           variant="primary"
           data-cursor-size="40"
           data-cursor-stick
           data-cursor-exclusion
-          className="transition-all duration-700 hover:scale-95"
+          data-animation-target
         >
           <Link href={'/about'}>
             About me <i className="fi fi-sr-video-camera" />

src/app/(home)/components/home-learn-section.tsx → src/app/(root)/home-learn-section.tsx

@@ -1,4 +1,4 @@
-import { Button } from '~/app/components/ui/button'
+import { Button } from '~/components/ui/button'
 import Link from 'next/link'
 
 export default function HomeLearnSection() {

src/app/(home)/components/home-project-section.tsx → src/app/(root)/home-project-section.tsx

@@ -1,4 +1,4 @@
-import { Button } from '~/app/components/ui/button'
+import { Button } from '~/components/ui/button'
 import Link from 'next/link'
 
 export default function HomeProjectSection() {
@@ -22,7 +22,7 @@ export default function HomeProjectSection() {
 
       <div className="flex justify-center mt-56">
         <Button asChild variant="outline">
-          <Link href={'/project'}>
+          <Link href={'/works'}>
             More projects <i className="fi fi-sr-gamepad" />
           </Link>
         </Button>

src/app/(home)/page.tsx → src/app/(root)/page.tsx

@@ -1,8 +1,8 @@
-import HomeBlogSection from './components/home-blog-section'
-import HomeContactSection from './components/home-contact-section'
-import HomeIntroSection from './components/home-intro-section'
-import HomeLearnSection from './components/home-learn-section'
-import HomeProjectSection from './components/home-project-section'
+import HomeBlogSection from './home-blog-section'
+import HomeContactSection from './home-contact-section'
+import HomeIntroSection from './home-intro-section'
+import HomeLearnSection from './home-learn-section'
+import HomeProjectSection from './home-project-section'
 import { Metadata } from 'next'
 import {
   defaultOpenGraphMetadata,
@@ -33,7 +33,7 @@ export default function HomePage() {
   return (
     <main className="flex flex-col pt-28 py-32 laptop:py-28 gap-28 laptop:gap-80">
       <HomeIntroSection />
-      <HomeProjectSection />
+      {/* <HomeProjectSection /> */}
       <HomeBlogSection />
       <HomeLearnSection />
       <HomeContactSection />

src/app/about/components/about-activity-section.tsx → 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

src/app/about/components/about-career-section.tsx → 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"

src/app/about/components/about-contact-section.tsx → 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>

src/app/about/components/about-profile-section.tsx → 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

src/app/about/components/about-timeline-item.tsx → 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>

src/app/about/components/about-timeline-section.tsx → 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
       >

src/app/about/page.tsx

@@ -1,9 +1,8 @@
-import AboutActivitySection from './components/about-activity-section'
-import AboutCareerSection from './components/about-career-section'
-import AboutContactSection from './components/about-contact-section'
-import AboutIntroSection from './components/about-intro-section'
-import AboutProfileSection from './components/about-profile-section'
-import AboutTimelineSection from './components/about-timeline-section'
+import AboutActivitySection from './about-activity-section'
+import AboutCareerSection from './about-career-section'
+import AboutContactSection from './about-contact-section'
+import AboutProfileSection from './about-profile-section'
+import AboutTimelineSection from './about-timeline-section'
 import { Metadata } from 'next'
 import {
   defaultOpenGraphMetadata,
@@ -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 />

src/app/bio/components/bio-link-section.tsx → src/app/bio/bio-link-section.tsx

@@ -1,4 +1,4 @@
-import { Button } from '~/app/components/ui/button'
+import { Button } from '~/components/ui/button'
 import Link from 'next/link'
 import { commonService } from '~/services/common-service'
 

src/app/bio/components/bio-newsletter-section.tsx → src/app/bio/bio-newsletter-section.tsx

@@ -6,13 +6,13 @@ import {
   FormField,
   FormItem,
   FormMessage,
-} from '~/app/components/ui/form'
+} from '~/components/ui/form'
 import { useForm } from 'react-hook-form'
 import { z } from 'zod'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useMutation } from '@tanstack/react-query'
-import { Input } from '~/app/components/ui/input'
-import { Button } from '~/app/components/ui/button'
+import { Input } from '~/components/ui/input'
+import { Button } from '~/components/ui/button'
 import { newsletterService } from '~/services/newsletter-service'
 
 const formSchema = z.object({