🌸 style: simplify looks and feel

src/app/contact/page.tsx

@@ -21,8 +21,16 @@ export const metadata: Metadata = {
 export default function ContactPage(): React.ReactElement {
   return (
     <div className="flex flex-col">
-      <ContactList />
-      <SocialMediaList />
+      <h3 className="text-lg font-medium !leading-tight">
+        Get in touch & build
+        <br />
+        things together.
+      </h3>
+
+      <div className="flex flex-col mt-10">
+        <ContactList />
+        <SocialMediaList />
+      </div>
     </div>
   )
 }

src/app/layout.tsx

@@ -58,7 +58,7 @@ export default function RootLayout({
             <AnimationProvider>
               <CenteredLayout>
                 <Header />
-                <main className="min-h-screen py-20 tablet:pb-56">
+                <main className="min-h-screen pb-28 tablet:pb-56">
                   {children}
                 </main>
                 <Footer />

src/app/privacy/page.tsx

@@ -25,7 +25,9 @@ export default function PrivacyPage(): React.ReactElement {
       <ArticleContent>
         <h1>Privacy policy</h1>
 
-        <strong>Effective Date: Friday, 12 April 2024</strong>
+        <p>
+          <i>Effective Date: Friday, 12 April 2024</i>
+        </p>
 
         <p>
           This privacy policy outlines the information practices and procedures
@@ -43,15 +45,19 @@ export default function PrivacyPage(): React.ReactElement {
 
         <h2>Information We Collect</h2>
 
-        <h3>Personal Information</h3>
+        <p>
+          <i>Personal Information:</i>
+        </p>
 
         <p>
           We may collect personal information that you voluntarily provide to us
           when you interact with our Website, such as your name, email address,
           and any other information you choose to provide.
         </p>
 
-        <h3>Usage Information</h3>
+        <p>
+          <i>Usage Information:</i>
+        </p>
 
         <p>
           When you visit our Website, we may automatically collect certain

src/features/about/activity-section.tsx

@@ -7,7 +7,9 @@ export function ActivitySection(): React.ReactElement {
       <br />
 
       <h2>
-        From ideation, research, planning, design, code to ship the best product
+        From ideation, research, planning, design, code
+        <br />
+        to ship the best product
       </h2>
 
       <p>

src/features/about/indie-section.tsx

@@ -6,7 +6,9 @@ export function IndieSection(): React.ReactElement {
       <br />
 
       <h2>
-        Playing with concept and bring into a real product or proven business
+        Playing with concept and bring into a real
+        <br />
+        product or proven business
       </h2>
 
       <p>

src/features/crafts/craft-item.tsx

@@ -34,7 +34,7 @@ export function CraftItem({ craft }: CraftItemProps): React.ReactElement {
       target="_blank"
       className="col-span-1"
     >
-      <div className="flex flex-col 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/features/crafts/craft-list-section.tsx

@@ -7,7 +7,12 @@ const crafts = craftsData.crafts as CraftData[]
 export function CraftListSection(): React.ReactElement {
   return (
     <div className="flex flex-col">
-      <div className="grid grid-cols-1 tablet:grid-cols-2 w-full gap-2 tablet:gap-3">
+      <h3 className="text-lg font-medium !leading-tight">
+        Good products build with
+        <br />
+        feeling and heart.
+      </h3>
+      <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} />
         ))}

src/features/crafts/crafts-data.json

@@ -3,35 +3,35 @@
     {
       "title": "Weebo",
       "description": "Unlimited web design for startups, agency, and enterprises",
-      "publisher": "Business",
+      "publisher": "Agency",
       "image": "https://cdn.hashnode.com/res/hashnode/image/upload/v1729704496490/7d3949ae-e901-4714-8df9-b4e0355d6d90.png",
       "link": "https://tryweebo.one?ref=nyomansunima"
     },
     {
       "title": "Moono",
       "description": "Apps collections for my works, contain simple and useful apps",
-      "publisher": "Business",
+      "publisher": "Team",
       "image": "https://cdn.hashnode.com/res/hashnode/image/upload/v1729706783589/06a931f0-e37b-4672-a97d-4e7d99eecf1f.png",
       "link": "https://moono.space?ref=nyomansunima"
     },
     {
       "title": "Weecraft",
       "description": "Tiny resources for developer that create tools, ui, and goodies",
-      "publisher": "Projects",
+      "publisher": "Product",
       "image": "https://cdn.hashnode.com/res/hashnode/image/upload/v1729706888234/066b8470-3aab-4e11-9d38-82284e607f1a.png",
       "link": "https://weecraft.club?ref=nyomansunima"
     },
     {
       "title": "Brook Code Theme",
-      "description": "Simple, clean and elegant code editor theme that support zed, vscode, and jetbrains",
-      "publisher": "Projects",
+      "description": "Simple and clean code editor theme that support zed, vscode, and jetbrains",
+      "publisher": "Product",
       "image": "https://cdn.hashnode.com/res/hashnode/image/upload/v1733478371769/4ec2ddcb-440c-4cbe-b8a1-3e8d457ad8f5.png",
       "link": "https://brookcodetheme.vercel.app?ref=nyomansunima"
     },
     {
       "title": "Dev Crates",
       "description": "Thousands of developer resources, promos, sponsors, and more",
-      "publisher": "Projects",
+      "publisher": "Product",
       "image": "https://cdn.hashnode.com/res/hashnode/image/upload/v1733929141883/afa49f0c-7a26-496e-8f5d-384021654627.png",
       "link": "https://www.devcrates.site?ref=nyomansunima"
     }

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 text-foreground/90 min-h-16 flex items-center justify-center text-center gap-3',
+        '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',
         className,
       )}`}
     >

src/features/home/hero-section.tsx

@@ -8,7 +8,6 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from '@shared/components'
-import { motion } from 'motion/react'
 
 function OpenWorkBadge(): React.ReactElement {
   return (
@@ -17,7 +16,7 @@ function OpenWorkBadge(): React.ReactElement {
         <TooltipTrigger asChild>
           <Link
             href={'/contact'}
-            className="flex justify-center items-center px-3 h-9 rounded-xl bg-fuchsia-100 dark:bg-fuchsia-400/10 border border-fuchsia-200 dark:border-fuchsia-200/20 text-fuchsia-800 dark:text-fuchsia-400 text-xs gap-2 font-medium transition-all duration-300 hover:scale-95 cursor-pointer"
+            className="flex justify-center items-center px-3 h-9 rounded-xl bg-fuchsia-100 dark:bg-fuchsia-400/10 border border-fuchsia-200 dark:border-fuchsia-200/20 text-fuchsia-800 dark:text-fuchsia-400 text-xs gap-2 font-medium transition-all duration-300 hover:-translate-y-1 cursor-pointer select-none"
           >
             <i className="fi fi-rr-coffee-heart" />
             Open to work
@@ -38,7 +37,7 @@ function NewBadge(): React.ReactElement {
             href={'https://devcrates.site?ref=nyomansunima'}
             target="_blank"
             className="flex gap-5 justify-between h-9 px-4 items-center rounded-xl bg-orange-100 text-orange-700 text-xs font-medium border border-orange-200
-     dark:bg-orange-400/10 dark:text-orange-400 dark:border-orange-200/20 transition-all duration-300 hover:scale-95"
+     dark:bg-orange-400/10 dark:text-orange-400 dark:border-orange-200/20 transition-all duration-300 hover:-translate-y-1 select-none"
           >
             <span>New craft: Developer Resources</span>
             <i className="fi fi-rr-broken-chain-link-wrong" />
@@ -53,58 +52,57 @@ function NewBadge(): React.ReactElement {
 export function HeroSection(): React.ReactElement {
   return (
     <section className="flex flex-col">
-      <div className="flex items-center gap-3 flex-wrap">
+      <div className="flex items-center gap-2 flex-wrap">
         <OpenWorkBadge />
         <NewBadge />
       </div>
 
-      <div className="flex flex-col text-2xl tablet:text-3xl laptop:text-3xl !leading-normal font-medium gap-6 laptop:gap-12 mt-12">
-        <motion.h2
-          initial={{ opacity: 0 }}
-          whileInView={{ y: 0, opacity: 1 }}
-          transition={{ type: 'spring', duration: '1.2', delay: 0.1 }}
-          viewport={{
-            once: true,
-            margin: '-300px 0px',
-          }}
-        >
+      <div className="flex flex-col gap-6 text-base !leading-7 text-pretty mt-10">
+        <p>
           Hello, I am a{' '}
-          <span className="cursor-pointer text-rose-600 dark:text-rose-400">
+          <span className="cursor-pointer inline-flex transition-all duration-300 hover:text-foreground text-fuchsia-500 dark:text-fuchsia-300">
             product designer
           </span>
-          {', '}
-          <span className="cursor-pointer text-orange-600 dark:text-orange-400">
+          ,{' '}
+          <span className="cursor-pointer inline-flex transition-all duration-300 hover:text-foreground text-red-500 dark:text-red-300">
             software engineer
-          </span>
-          {' & '}
-          <span className="cursor-pointer text-indigo-600 dark:text-indigo-400">
+          </span>{' '}
+          &{' '}
+          <span className="cursor-pointer inline-flex transition-all duration-300 hover:text-foreground text-blue-500 dark:text-blue-300">
             creator
           </span>{' '}
-          loves to craft solutions for global audiences.
-        </motion.h2>
-        <motion.h2
-          initial={{ opacity: 0 }}
-          whileInView={{ y: 0, opacity: 1 }}
-          transition={{ type: 'spring', duration: '1.2', delay: 0.1 }}
-          viewport={{
-            once: true,
-            margin: '-300px 0px',
-          }}
-        >
-          Focus to shipping great, effective & impactful products, services,
-          saas, goodies, sites & contents.
-        </motion.h2>
-        <motion.h2
-          initial={{ opacity: 0 }}
-          whileInView={{ y: 0, opacity: 1 }}
-          transition={{ type: 'spring', duration: '1.2', delay: 0.1 }}
-          viewport={{
-            once: true,
-            margin: '-300px 0px',
-          }}
-        >
-          Talks about indie hacking, product shipping, and business.
-        </motion.h2>
+          that loves to craft solutions for global audiences. Focus to shipping
+          great, effective & impactful products, services, saas, goodies, sites
+          & contents. Talks about indie hacking, product shipping, and business.
+        </p>
+        <p>
+          Currently working as product designer, and developer to craft a
+          product, services at{' '}
+          <Link
+            href={'https://www.tryweebo.one'}
+            target="_blank"
+            className="text-blue-500 dark:text-blue-300 cursor-pointer inline-flex transition-all duration-300 hover:text-foreground"
+          >
+            weebo
+          </Link>
+          {', '}
+          <Link
+            href={'https://www.moono.space'}
+            target="_blank"
+            className="text-blue-500 dark:text-blue-300 cursor-pointer inline-flex transition-all duration-300 hover:text-foreground"
+          >
+            moono
+          </Link>
+          {' & '}
+          <Link
+            href={'https://www.weecraft.club'}
+            target="_blank"
+            className="text-blue-500 dark:text-blue-300 cursor-pointer inline-flex transition-all duration-300 hover:text-foreground"
+          >
+            weecraft
+          </Link>{' '}
+          also building the brands. Open for collaborations and contributions.
+        </p>
       </div>
     </section>
   )

src/features/journeys/experience-section.tsx

@@ -9,7 +9,7 @@ const experiences = [
 export function ExperienceSection(): React.ReactElement {
   return (
     <section className="flex flex-col">
-      <div className="flex flex-col w-full tablet:w-10/12 mx-auto gap-4">
+      <div className="flex flex-col w-full tablet:w-11/12 mx-auto gap-4">
         <h3 className="text-lg font-medium flex-grow tablet:flex-grow-0">
           Experiences: Career & contributions
         </h3>

src/features/journeys/log-list.tsx

@@ -7,7 +7,7 @@ const logGroups = [...journeysData.logs].reverse() as LogGroupData[]
 export function LogListSection(): React.ReactElement {
   return (
     <section className="flex flex-col">
-      <div className="flex flex-col w-full tablet:w-10/12 mx-auto gap-14">
+      <div className="flex flex-col w-full tablet:w-11/12 mx-auto gap-14">
         {logGroups.map((group, groupIndex) => (
           <LogGroup group={group} key={groupIndex} />
         ))}

src/features/stories/recent-item.tsx

@@ -8,7 +8,6 @@ const MotionLink = motion.create(Link)
 
 export interface RecentData {
   title: string
-  publisher: string
   timeline: string
   url: string
 }
@@ -18,7 +17,7 @@ interface RecentItemProps {
 }
 
 export function RecentItem({ recent }: RecentItemProps): React.ReactElement {
-  const { title, publisher, timeline, url } = recent
+  const { title, timeline, url } = recent
 
   return (
     <MotionLink
@@ -33,14 +32,13 @@ export function RecentItem({ recent }: RecentItemProps): React.ReactElement {
     >
       <div className="flex items-start tablet:items-center flex-col tablet:flex-row px-4 py-3 gap-2 rounded-2xl bg-surface border border-border group transition-all duration-300 hover:-translate-y-1">
         <div className="flex items-center gap-2 flex-grow">
-          <i className="fi fi-rr-circle-small" />
+          <i className="fi fi-sr-circle-small" />
 
           <h3 className="text-sm font-medium text-pretty !leading-tight line-clamp-1 flex-grow">
             {title}
           </h3>
         </div>
         <div className="flex gap-2 text-sm text-foreground/50">
-          <span className="transition-all">{publisher}</span>
           <span className="transition-all duration-300 group-hover:text-foreground">
             {timeline}
           </span>

src/features/stories/stories-data.json

@@ -48,19 +48,16 @@
   "recents": [
     {
       "title": "How to create a better README",
-      "publisher": "Hashnode",
       "timeline": "Jun 3, 2023",
       "url": "https://nyomansunima.hashnode.dev/how-to-create-a-better-readme?ref=nyomansunima"
     },
     {
       "title": "How to make your GitHub project better",
-      "publisher": "Hashnode",
       "timeline": "Jun 5, 2023",
       "url": "https://nyomansunima.hashnode.dev/how-to-make-your-github-project-better?ref=nyomansunima"
     },
     {
       "title": "Turn Nest.Js into Serverless with Nitric in a few seconds",
-      "publisher": "Hashnode",
       "timeline": "Aug 27, 2023",
       "url": "https://nyomansunima.hashnode.dev/turn-nestjs-into-serverless-with-nitric-in-a-few-seconds?ref=nyomansunima"
     }

src/features/support/support-section.tsx

@@ -8,7 +8,13 @@ export function SupportSection(): React.ReactElement {
   return (
     <section className="flex">
       <div className="flex flex-col">
-        <div className="flex">
+        <h3 className="text-lg font-medium !leading-tight">
+          Support me to create
+          <br />
+          good things.
+        </h3>
+
+        <div className="flex mt-10">
           <div className="grid grid-cols-1 tablet:grid-cols-2 gap-3">
             {supports.map((support, index) => (
               <SupportItem data={support} key={index} />