Merge pull request #291 from nyomansunima/fix/update

auto adjustment
nyomansunima · Dec 30, 2024 · 5ecff1c · 5ecff1c
2 parents d3dcae6 + de8b507
commit 5ecff1c
Show file tree

Hide file tree

Showing 40 changed files with 337 additions and 570 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -15,17 +15,14 @@
   "dependencies": {
     "@flaticon/flaticon-uicons": "^3.3.1",
     "@radix-ui/react-accordion": "^1.2.2",
-    "@radix-ui/react-hover-card": "^1.1.3",
-    "@radix-ui/react-label": "^2.1.1",
     "@radix-ui/react-slot": "^1.1.1",
     "@radix-ui/react-tooltip": "^1.1.5",
     "@vercel/analytics": "^1.4.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.13",
     "lenis": "^1.1.18",
-    "motion": "^11.14.4",
-    "next": "15.1.2",
+    "next": "^15.1.3",
     "next-mdx-remote-client": "^1.0.3",
     "next-themes": "^0.4.4",
     "posthog-js": "^1.200.1",
@@ -42,7 +39,7 @@
     "@types/react-dom": "^19.0.2",
     "autoprefixer": "^10",
     "eslint": "9.14.0",
-    "eslint-config-next": "15.1.2",
+    "eslint-config-next": "^15.1.3",
     "eslint-config-prettier": "^9.1.0",
     "postcss": "^8",
     "prettier": "^3.4.2",

diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
@@ -21,11 +21,11 @@ export const metadata: Metadata = {
 export default function ContactPage(): React.ReactElement {
   return (
     <div className="flex flex-col">
-      <h3 className="text-lg font-medium !leading-tight">
+      <h2 className="text-lg tablet:text-xl font-medium">
         Get in touch & build
         <br />
         things together.
-      </h3>
+      </h2>
 
       <div className="flex flex-col mt-10">
         <ContactList />

diff --git a/src/app/faqs/page.tsx b/src/app/faqs/page.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { Metadata } from 'next'
 import { sharedMetadata } from '@shared/libs'
-import { FAQListSection, AskSection } from '@features/faqs'
+import { FAQListSection } from '@features/faqs'
 
 export const metadata: Metadata = {
   title: 'FAQs',
@@ -22,7 +22,6 @@ export default function FAQsPage(): React.ReactElement {
   return (
     <div className="flex flex-col gap-20 tablet:gap-36">
       <FAQListSection />
-      <AskSection />
     </div>
   )
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import type { Metadata } from 'next'
 import '@shared/styles/globals.css'
-import { config } from '@shared/libs'
+import { config, sharedMetadata } from '@shared/libs'
 import { Analytics as VercelAnalytics } from '@vercel/analytics/react'
 import {
   ThemeProvider,
@@ -12,6 +12,21 @@ import { Footer, Header, Toaster, CenteredLayout } from '@shared/components'
 import { fonts } from '@shared/fonts'
 
 export const metadata: Metadata = {
+  title: 'Nyoman Sunima',
+  description:
+    'Focused on crafting digital products, website, web app, mobile app to help business.',
+  openGraph: {
+    ...sharedMetadata.openGraph,
+    title: 'Nyoman Sunima',
+    description:
+      'Focused on crafting digital products, website, web app, mobile app to help business.',
+  },
+  twitter: {
+    ...sharedMetadata.twitter,
+    title: 'Nyoman Sunima',
+    description:
+      'Focused on crafting digital products, website, web app, mobile app to help business.',
+  },
   applicationName: 'Nyoman Sunima',
   keywords: [
     'Product Designer',

diff --git a/src/features/crafts/craft-item.tsx b/src/features/crafts/craft-item.tsx
@@ -1,11 +1,6 @@
-'use client'
-
 import * as React from 'react'
 import Image from 'next/image'
 import Link from 'next/link'
-import { motion } from 'motion/react'
-
-const MotionLink = motion.create(Link)
 
 export interface CraftData {
   title: string
@@ -23,41 +18,33 @@ export function CraftItem({ craft }: CraftItemProps): React.ReactElement {
   const { title, description, publisher, image, link } = craft
 
   return (
-    <MotionLink
-      initial={{ y: 200, opacity: 0 }}
-      whileInView={{ y: 0, opacity: 1 }}
-      transition={{ type: 'spring', duration: '1.2', delay: 0.1 }}
-      viewport={{
-        once: true,
-      }}
+    <Link
       href={link}
       target="_blank"
-      className="col-span-1"
+      className="flex flex-col h-full p-3 rounded-2xl border border-border bg-surface relative group transition-all duration-300 hover:-translate-y-1"
     >
-      <div className="flex flex-col h-full p-3 rounded-2xl border border-border bg-surface relative group transition-all duration-300 hover:-translate-y-1">
-        <div className="flex gap-3">
-          <div className="block">
-            <Image
-              src={image}
-              height={36}
-              width={36}
-              alt={title}
-              className="rounded-xl overflow-hidden"
-            />
-          </div>
+      <div className="flex gap-3">
+        <div className="block">
+          <Image
+            src={image}
+            height={36}
+            width={36}
+            alt={title}
+            className="rounded-xl overflow-hidden"
+          />
+        </div>
 
-          <div className="flex flex-col flex-grow">
-            <h3 className="text-sm font-medium">{title}</h3>
-            <span className="text-sm text-foreground/60">{publisher}</span>
-          </div>
+        <div className="flex flex-col flex-grow">
+          <h3 className="text-sm font-medium">{title}</h3>
+          <span className="text-sm text-foreground/60">{publisher}</span>
         </div>
+      </div>
 
-        <p className="text-sm mt-3 text-foreground/60">{description}</p>
+      <p className="text-sm mt-3 text-foreground/60">{description}</p>
 
-        <div className="hidden w-7 h-7 rounded-lg bg-secondary/30 border border-border group-hover:flex justify-center items-center absolute top-3 right-3">
-          <i className="fi fi-rr-arrow-small-right -rotate-45" />
-        </div>
+      <div className="hidden w-7 h-7 rounded-lg bg-secondary/30 border border-border group-hover:flex justify-center items-center absolute top-3 right-3">
+        <i className="fi fi-rr-arrow-small-right -rotate-45" />
       </div>
-    </MotionLink>
+    </Link>
   )
 }
diff --git a/src/features/crafts/craft-list-section.tsx b/src/features/crafts/craft-list-section.tsx
@@ -7,11 +7,11 @@ const crafts = craftsData.crafts as CraftData[]
 export function CraftListSection(): React.ReactElement {
   return (
     <div className="flex flex-col">
-      <h3 className="text-lg font-medium !leading-tight">
+      <h2 className="text-lg tablet:text-xl font-medium">
         Good products build with
         <br />
         feeling and heart.
-      </h3>
+      </h2>
       <div className="grid grid-cols-1 tablet:grid-cols-2 w-full gap-2 tablet:gap-3 mt-10">
         {crafts.map((craft, i) => (
           <CraftItem craft={craft} key={i} />

diff --git a/src/features/faqs/ask-section.tsx b/src/features/faqs/ask-section.tsx
diff --git a/src/features/faqs/faq-item.tsx b/src/features/faqs/faq-item.tsx
@@ -21,7 +21,7 @@ export function FAQItem({ faq, position }: FAQItemProps) {
   return (
     <AccordionItem
       value={`item-${position}`}
-      className="col-span-1 transition-all duration-300 hover:-translate-y-1"
+      className="transition-all duration-300 hover:-translate-y-1"
     >
       <AccordionTrigger>{question}</AccordionTrigger>
       <AccordionContent>{answer}</AccordionContent>

diff --git a/src/features/faqs/faq-list-section.tsx b/src/features/faqs/faq-list-section.tsx
@@ -7,9 +7,19 @@ const faqs = faqsData.faqs as FAQData[]
 
 export function FAQListSection(): React.ReactElement {
   return (
-    <section className="flex w-full laptop:w-10/12 mx-auto">
-      <div className="w-full">
-        <Accordion type="single" collapsible className="grid grid-cols-1 gap-2">
+    <section className="flex flex-col">
+      <h2 className="text-xl font-medium">
+        The most asked
+        <br />
+        questions.
+      </h2>
+
+      <div className="w-full flex mt-10">
+        <Accordion
+          type="single"
+          collapsible
+          className="flex flex-col gap-2 w-full"
+        >
           {faqs.map((faq, index) => (
             <FAQItem faq={faq} position={index + 1} key={index} />
           ))}

diff --git a/src/features/faqs/index.ts b/src/features/faqs/index.ts
@@ -1,3 +1,2 @@
-export * from './ask-section'
 export * from './faq-item'
 export * from './faq-list-section'
diff --git a/src/features/home/bio-data.json b/src/features/home/bio-data.json
@@ -19,32 +19,27 @@
       "isFeatured": true,
       "className": "tablet:row-span-2"
     },
-    {
-      "type": "link",
-      "url": "https://nyomansunima.lemonsqueezy.com?ref=nyomansunima",
-      "label": "Check my goodies"
-    },
     {
       "type": "link",
       "url": "https://tryweebo.one?ref=nyomansunima",
       "label": "My web design business (NEW)",
-      "className": "tablet:row-span-2"
+      "className": "tablet:row-span-3"
     },
     {
       "type": "link",
       "url": "/support",
-      "label": "Suport me by donation"
+      "label": "Suport me"
     },
     {
       "type": "link",
       "url": "/stories",
-      "label": "Learn together with me"
+      "label": "Learn together with me",
+      "className": "tablet:col-span-2"
     },
     {
       "type": "link",
       "url": "https://moono.space?ref=nyomansunima",
-      "label": "My apps collection (NEW)",
-      "className": "tablet:col-span-2"
+      "label": "My apps (NEW)"
     },
     {
       "type": "link",

diff --git a/src/features/home/bio-item.tsx b/src/features/home/bio-item.tsx
@@ -34,7 +34,7 @@ function LinkItem({
       href={href}
       target={isUrl ? '_blank' : '_self'}
       className={`${mergeClass(
-        'col-span-1 bg-surface border border-border p-3 rounded-2xl relative transition-all duration-300 hover:scale-95 group !text-sm !leading-tight text-foreground/90 min-h-16 flex items-center justify-center text-center gap-3 select-none',
+        'col-span-1 bg-surface border border-border p-3 rounded-2xl relative transition-all duration-300 hover:-translate-y-1 group !text-sm !leading-tight text-foreground/90 min-h-16 flex items-center justify-center text-center gap-3 select-none',
         className,
       )}`}
     >

diff --git a/src/features/home/bio-section.tsx b/src/features/home/bio-section.tsx
@@ -1,31 +1,19 @@
-'use client'
-
 import * as React from 'react'
 import { BioItem, BioItemData } from './bio-item'
 import bioData from './bio-data.json'
-import { motion } from 'motion/react'
 
 const bios = bioData.links as BioItemData[]
 
 export function BioSection(): React.ReactElement {
   return (
-    <motion.section
-      initial={{ y: 200, opacity: 0 }}
-      whileInView={{ y: 0, opacity: 1 }}
-      whileHover={{ y: -4 }}
-      transition={{ type: 'spring', duration: '1.2', delay: 0.1 }}
-      viewport={{
-        once: true,
-      }}
-      className="flex flex-col"
-    >
+    <section className="flex flex-col">
       <div className="flex w-full">
         <div className="grid grid-cols-2 tablet:grid-cols-4 gap-2 w-full">
           {bios.map((data, index) => (
             <BioItem data={data} key={index} />
           ))}
         </div>
       </div>
-    </motion.section>
+    </section>
   )
 }