feat: add tablet styles (768-1023px)

app/Section/Characters.tsx

@@ -21,8 +21,8 @@ const links = [
 export const Characters = () => {
   return (
     <Section>
-      <div className="flex flex-col gap-2">
+      <div className="flex flex-col gap-2 mt-2 md:flex-row md:justify-between md:items-center">
-        <h2 className="text-4xl">Characters</h2>
+        <h2 className="text-4xl md:text-5xl">Characters</h2>
         <div className="flex items-center gap-4">
           {links.map((item) => (
             <Link href={item.url} key={`photos.link.${item.text}`}>
@@ -35,7 +35,7 @@ export const Characters = () => {
           ))}
         </div>
       </div>
-      <div className="flex flex-col gap-4 mt-2">
+      <div className="flex flex-col gap-4 mt-2 md:hidden">
         <CharacterImage
           name="Kentai"
           species="Red Panda"
@@ -49,6 +49,37 @@ export const Characters = () => {
           image="/images/protogen.png"
         />
       </div>
+      <div className="flex-col gap-8 mt-2 hidden md:flex">
+        <div className="flex gap-4">
+          <CharacterImage
+            name="Kentai"
+            species="Red Panda"
+            gender="Male"
+            image="/images/red_panda.png"
+          />
+          <div className="flex flex-col">
+            <p className="text-5xl">Kentai</p>
+            <p className="mt-2 text-3xl">Red Panda</p>
+            <p className="text-3xl">Male</p>
+            <div className="flex-1"></div>
+            <button className="rounded-full bg-[#491f1f] px-4 py-2 text-3xl">
+              about
+            </button>
+          </div>
+        </div>
+        <div className="flex gap-4">
+          <CharacterImage
+            name=""
+            species="Protogen"
+            gender="Male"
+            image="/images/protogen.png"
+          />
+          <div className="flex flex-col">
+            <p className="mt-2 text-3xl">Protogen</p>
+            <p className="text-3xl">Male</p>
+          </div>
+        </div>
+      </div>
     </Section>
   );
 };

app/Section/Contacts.tsx

@@ -32,8 +32,8 @@ const links = [
 export const Contacts = () => {
   return (
     <Section>
-      <h2 className="text-4xl">Contacts</h2>
+      <h2 className="text-4xl md:text-5xl">Contacts</h2>
-      <div className="grid grid-cols-2 gap-4">
+      <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
         {links.map((item) => {
           if (item.url) {
             return (

app/Section/Intro.tsx

@@ -2,15 +2,19 @@ export const Intro = () => {
   return (
     <div className="flex gap-4 flex-col">
       <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-8xl">
+        <h1 className="text-[#FFB1CD] tracking-tight font-bold text-8xl md:text-[128px]">
           Radiquum
         </h1>
       </div>
-      <div className="w-full flex items-center justify-center py-24 bg-[#161213] rounded-bl-[128px] rounded-tr-[128px]">
+      <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]">
-        <div className="flex flex-col">
+        <div className="flex flex-col md:flex-row md:gap-8 md:flex-wrap md:justify-center">
-          <p className="text-[#C8E8FE] font-medium text-4xl">Photographer</p>
+          <p className="text-[#C8E8FE] font-medium text-4xl md:text-5xl">
-          <p className="text-[#FF8686] font-medium text-4xl">Developer</p>
+            Photographer
-          <p className="text-[#FF851A] font-medium text-4xl">
+          </p>
+          <p className="text-[#FF8686] font-medium text-4xl md:text-5xl">
+            Developer
+          </p>
+          <p className="text-[#FF851A] font-medium text-4xl md:text-5xl">
             Self-Hosting admirer
           </p>
         </div>

app/Section/Photos.tsx

@@ -40,8 +40,8 @@ export const Photos = () => {
   return (
     <div className="flex flex-col gap-4">
       <Section>
-        <div className="flex flex-col gap-2">
+        <div className="flex flex-col gap-2 md:flex-row md:justify-between md:items-center">
-          <h2 className="text-4xl">Photos</h2>
+          <h2 className="text-4xl md:text-5xl">Photos</h2>
           <div className="flex items-center gap-4">
             {links.map((item) => (
               <Link href={item.url} key={`photos.link.${item.text}`}>

app/Section/Projects.tsx

@@ -50,8 +50,8 @@ const links = [
 export const Projects = () => {
   return (
     <Section>
-      <h2 className="text-4xl">Projects</h2>
+      <h2 className="text-4xl md:text-5xl">Projects</h2>
-      <div className="grid grid-cols-1 gap-2">
+      <div className="grid grid-cols-1 gap-2 md:grid-cols-2">
         {links.map((item) => (
           <Link href={item.url} key={`socials.link.${item.text}`}>
             <IconWithText icon={item.icon} text={item.text} desc={item.desc} />

app/Section/Socials.tsx

@@ -50,8 +50,8 @@ const links = [
 export const Socials = () => {
   return (
     <Section>
-      <h2 className="text-4xl">Socials</h2>
+      <h2 className="text-4xl md:text-5xl">Socials</h2>
-      <div className="grid grid-cols-2 gap-x-12 gap-y-2">
+      <div className="grid grid-cols-2 md:grid-cols-3 gap-x-12 gap-y-2">
         {links.map((item) => (
           <Link href={item.url} key={`socials.link.${item.text}`}>
             <IconWithText icon={item.icon} text={item.text} desc={item.desc} />

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" />
+      <img src={image} alt="" className="rounded-4xl md:w-[288px] aspect-square" />
-      <div className="absolute left-0 right-0 bottom-0 from-[#131314] to-[#131314]/0 bg-gradient-to-t">
+      <div className="absolute left-0 right-0 bottom-0 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">

app/components/Section.tsx

@@ -2,7 +2,7 @@ export const Section = ({
   children,
 }: Readonly<{ children: React.ReactNode }>) => {
   return (
-    <div className="max-w-[400px] w-full mx-auto flex flex-col gap-2">
+    <div className="max-w-[400px] md:max-w-[542px] w-full mx-auto flex flex-col gap-2">
       {children}
     </div>
   );

app/globals.css

@@ -41,7 +41,7 @@ body {
 /* embla styles */
 
 .embla {
-  max-width: 48rem;
+  max-width: 100%;
   margin: auto;
   --slide-height: 144px;
   --slide-spacing: 8px;
@@ -87,3 +87,11 @@ body {
   -o-object-fit: cover;
   object-fit: cover;
 }
+
+@media (min-width: 768px) {
+  .embla {
+    --slide-height: 288px;
+    --slide-spacing: 16px;
+    --slide-size: 512px;
+  }
+}

app/page.tsx

@@ -7,14 +7,14 @@ import { Socials } from "./Section/Socials";
 
 export default function Home() {
   return (
-    <main className="flex flex-col gap-4 overflow-hidden">
+    <main className="flex flex-col gap-4 md:gap-8 overflow-hidden">
-      <div className="flex flex-col gap-8 overflow-hidden">
+      <div className="flex flex-col gap-8 md:gap-16 overflow-hidden">
         <Intro />
         <Socials />
         <Photos />
         <Projects />
       </div>
-      <div className="flex flex-col gap-8 overflow-hidden bg-[#131314] rounded-t-4xl pt-4 pb-8">
+      <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">
         <Characters />
         <Contacts />
       </div>