From 94e55edf4ce77e61abdd35be3d5d89625f7637a8 Mon Sep 17 00:00:00 2001
From: Radiquum <kentai.waah@gmail.com>
Date: Sat, 26 Jul 2025 21:46:28 +0500
Subject: [PATCH] refactor: intro

---
 app/Section/Intro.tsx             | 36 ++++++-------------------------
 app/components/CharacterImage.tsx |  4 ++--
 app/components/IconWithText.tsx   |  2 +-
 app/page.tsx                      | 10 ++++-----
 4 files changed, 15 insertions(+), 37 deletions(-)

diff --git a/app/Section/Intro.tsx b/app/Section/Intro.tsx
index 693fb9a..e275c76 100644
--- a/app/Section/Intro.tsx
+++ b/app/Section/Intro.tsx
@@ -10,35 +10,13 @@ export const Intro = () => {
   }, []);
 
   return (
-    <div className="flex gap-4 flex-col xl:gap-8">
-      <div className="w-full flex items-center justify-center py-24 bg-[#101316] rounded-tl-[256px] rounded-br-[256px]">
-        <h1 className="text-[#FFB1CD] tracking-tight font-bold text-[80px] text-center md:text-[128px] xl:text-[200px]">
-          Radiquum
-        </h1>
-      </div>
-      <div className="w-full flex items-center justify-center py-24 bg-[#161213] rounded-bl-[128px] rounded-tr-[128px] md:rounded-bl-[256px] md:rounded-tr-[256px] overflow-hidden">
-        <div className="flex flex-col md:flex-row md:gap-8 md:flex-wrap md:justify-center 2xl:gap-16">
-          <p
-            className={`text-[#C8E8FE] ${
-              isAnimated ? "translate-y-0" : "translate-y-64 md:translate-y-96"
-            } font-medium text-4xl md:text-5xl xl:text-8xl transition-transform duration-1000 ease-out`}
-          >
-            Photographer
-          </p>
-          <p
-            className={`text-[#FF8686] ${
-              isAnimated ? "translate-y-0" : "translate-y-64 md:translate-y-96"
-            } font-medium text-4xl md:text-5xl xl:text-8xl transition-transform delay-150 duration-1000 ease-out`}
-          >
-            Developer
-          </p>
-          <p
-            className={`text-[#FF851A] ${
-              isAnimated ? "translate-y-0" : "translate-y-64 md:translate-y-96"
-            } font-medium text-4xl md:text-5xl xl:text-8xl transition-transform delay-300 duration-1000 ease-out`}
-          >
-            Self-Hosting admirer
-          </p>
+    <div>
+      <div className="flex flex-col mx-auto max-w-fit md:items-center justify-center h-fit py-16 gap-4">
+        <h1 className="text-4xl md:text-8xl font-medium">Hi, I&apos;m <span className="bg-clip-text bg-gradient-to-br from-[#FFB1CD] via-[#C8E8FE] to-white text-transparent font-bold">Radiquum</span></h1>
+        <div className="flex flex-col md:flex-row md:gap-8 overflow-hidden">
+          <p className={`text-2xl md:text-4xl text-[#C8E8FE] ${isAnimated ? "translate-y-0 opacity-100" : "translate-y-full opacity-0"} transition-[transform_opacity] duration-1000 ease-out`}>Developer</p>
+          <p className={`text-2xl md:text-4xl text-[#FF8686] ${isAnimated ? "translate-y-0 opacity-100" : "translate-y-full opacity-0"} transition-[transform_opacity] duration-1000 ease-out delay-150`}>Amateur Photographer</p>
+          <p className={`text-2xl md:text-4xl text-[#FF851A] ${isAnimated ? "translate-y-0 opacity-100" : "translate-y-full opacity-0"} transition-[transform_opacity] duration-1000 ease-out delay-300`}>Self-Hosting Admirer</p>
         </div>
       </div>
     </div>
diff --git a/app/components/CharacterImage.tsx b/app/components/CharacterImage.tsx
index dd836d8..57f1683 100644
--- a/app/components/CharacterImage.tsx
+++ b/app/components/CharacterImage.tsx
@@ -14,8 +14,8 @@ export const CharacterImage = ({
 }: CharacterImageProps) => {
   return (
     <div className="relative rounded-4xl overflow-hidden">
-      <img src={image} alt="" className="rounded-4xl w-full md:w-[288px] aspect-square" />
-      <div className="absolute left-0 right-0 bottom-0 z-10 from-[#131314] to-[#131314]/0 bg-gradient-to-t md:hidden">
+      <img src={image} alt="" className="w-full md:w-[288px] aspect-square" />
+      <div className="absolute left-0 right-0 -bottom-[12px] z-10 from-[#131314] to-[#131314]/0 bg-gradient-to-t md:hidden">
         <div className="p-4 flex gap-2 justify-between items-end">
           <p className="text-5xl">{name}</p>
           <p className="flex-1 text-right text-3xl">
diff --git a/app/components/IconWithText.tsx b/app/components/IconWithText.tsx
index ef38369..b600b52 100644
--- a/app/components/IconWithText.tsx
+++ b/app/components/IconWithText.tsx
@@ -15,7 +15,7 @@ export const IconWithText = ({
 }: IconWithTextProps) => {
   return (
     <div
-      className={`flex items-start gap-2 border-1 px-3 py-1.5 rounded-xl border-white/5 bg-[var(--bg-color)]/[var(--bg-opacity)] transition-[scale] hover:scale-105 duration-100 ease-in-out`}
+      className={`flex items-start gap-1 border-1 px-3 py-1.5 rounded-xl border-white/5 bg-[var(--bg-color)]/[var(--bg-opacity)] transition-[scale] hover:scale-105 duration-100 ease-in-out`}
       style={
         {
           "--bg-color": backgroundColor || "#161213",
diff --git a/app/page.tsx b/app/page.tsx
index 50981a7..a991bf2 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -10,18 +10,18 @@ import { Socials } from "./Section/Socials";
 export default function Home() {
   return (
     <main>
+      <Intro />
       <div className="flex flex-col gap-4 md:gap-8 overflow-hidden bg-[#090909]">
         <div className="flex flex-col gap-8 md:gap-16 overflow-hidden">
-          <Intro />
           <Socials />
-          <Photos />
           <Skills />
           <Projects />
-        </div>
-        <div className="flex flex-col gap-8 md:gap-16 overflow-hidden bg-[#131314] rounded-t-4xl md:rounded-t-[128px] pt-4 md:pt-8 pb-8 md:pb-16 xl:rounded-t-4xl 2xl:rounded-t-[128px]">
-          <Characters />
           <Contacts />
         </div>
+        <div className="flex flex-col gap-8 overflow-hidden bg-[#131314] rounded-t-4xl md:rounded-t-[128px] pt-4 md:pt-8 pb-8 md:pb-16 xl:rounded-t-4xl 2xl:rounded-t-[128px]">
+          <Photos />
+          <Characters />
+        </div>
       </div>
       <div className="bg-[#131314]">
         <Footer />