Adding responsive behavior on the app

src/app/desktop-page.tsx → src/app/-/desktop-page.tsx

@@ -79,7 +79,7 @@ const data: Item[] = [
 
 export default function DesktopPage() {
   return (
-    <div className="p-8 flex flex-col gap-14 overflow-x-hidden w-full">
+    <div className="p-8 hidden sm:flex flex-col gap-14 overflow-x-hidden w-full">
       <header className="flex flex-col gap-1">
         <TextAnimate
           as="h1"

src/app/-/mobile-page.tsx

@@ -0,0 +1,141 @@
+import Waves from "@components/ui/waves";
+import Link from "next/link";
+import Image from "next/image";
+import { Profile } from "@components/profile";
+import ContactForm from "@components/contact-form";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import MokaPot from "@components/3d/moka-pot";
+import { BoxReveal } from "@components/magicui/box-reveal";
+import { TextAnimate } from "@components/magicui/text-animate";
+import { BlurFade } from "@components/magicui/blur-fade";
+
+export default function MobilePage() {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  });
+
+  return (
+    <div className="sm:hidden h-full w-full">
+      <header className="flex items-center justify-between w-full p-8">
+        <Image
+          src="/images/coffee.png"
+          alt="Latté logo"
+          width={40}
+          height={40}
+        />
+        <Image src="/images/github.svg" alt="Menu" width={40} height={40} />
+      </header>
+      <div className="flex flex-col justify-start w-full px-8 gap-5 py-4">
+        <TextAnimate
+          as="h1"
+          className="text-6xl text-[#9C6644]"
+          animation="slideLeft"
+          by="word"
+          startOnView={false}
+        >
+          Latté
+        </TextAnimate>
+        <TextAnimate
+          as="h2"
+          className="text-5xl text-primary"
+          animation="slideLeft"
+          by="word"
+          startOnView={false}
+        >
+          DevOps & Automation
+        </TextAnimate>
+      </div>
+      <Waves colorTop="" colorBottom="#7f5539" height="20%" />
+      <div className="bg-primary flex flex-col gap-5 w-full h-fit">
+        <div className="flex flex-col gap-4 px-8 flex-wrap items-start">
+          <BoxReveal boxColor={"hsl(30 51% 80%)"}>
+            <h3 className="text-3xl text-[#e6ccb2]">Who are we ?</h3>
+          </BoxReveal>
+          <div className="flex flex-col text-secondary text-xl items-end w-full">
+            <TextAnimate
+              animation="fadeIn"
+              by="line"
+              as="p"
+              className="text-xl text-secondary"
+              startOnView={false}
+            >
+              We are 2 DevOps Engineer
+            </TextAnimate>
+            <Link href="/about" className="underline text-secondary self-end">
+              More about us
+            </Link>
+          </div>
+        </div>
+        <div className="flex flex-col gap-4 px-8 flex-wrap items-start">
+          <BoxReveal boxColor={"hsl(30 51% 80%)"}>
+            <h3 className="text-3xl text-[#e6ccb2]">What do we do ?</h3>
+          </BoxReveal>
+          <div className="flex flex-col text-secondary text-xl items-end w-full">
+            <TextAnimate
+              animation="fadeIn"
+              by="line"
+              as="p"
+              className="text-xl text-secondary text-end"
+              startOnView={false}
+            >
+              {`Automation, CI/CD,\nWeb development &\nCloud deployment`}
+            </TextAnimate>
+          </div>
+        </div>
+        <hr className="border-[#e6ccb2] w-10/12 self-center" />
+        <div className="flex flex-col gap-4 px-8">
+          <Profile
+            fullName="Louis Labeyrie"
+            trigram="lla"
+            role={["Cloud Architect", "Solution Engineer"]}
+            gravatarUrl="labeyrielouis"
+            githubUsername="razano26"
+          />
+          <Profile
+            fullName="Dorian Tetu"
+            trigram="dte"
+            role={["Lead Developer", "Solution Engineer"]}
+            gravatarUrl="doriantetu34"
+            githubUsername="Nayrode"
+          />
+        </div>
+      </div>
+      <Waves colorTop="#7f5539" colorBottom="#e6ccb2" height="20%" />
+      <QueryClientProvider client={queryClient}>
+        <div className="px-8" id="contact">
+          <ContactForm />
+        </div>
+      </QueryClientProvider>
+      <div className="text-center lg:text-left mx-auto xl:block w-full max-w-96 pt-10 px-8">
+        <BoxReveal boxColor={"hsl(30 52% 72%)"} duration={0.4}>
+          <h2 className="text-3xl text-primary mb-4">
+            We&apos;re here to help
+          </h2>
+        </BoxReveal>
+        <TextAnimate
+          animation="fadeIn"
+          by="line"
+          as="p"
+          className="text-secondary mb-6 text-justify"
+          startOnView={false}
+        >
+          {`Our team is ready to bring your ideas to life.\nLet's create something amazing together!`}
+        </TextAnimate>
+        <BlurFade key="submit" delay={0.4} inView>
+          <div className="w-64 m-auto h-64">
+            <MokaPot />
+          </div>
+        </BlurFade>
+      </div>
+      <footer className="flex justify-center">
+        <p className="text-primary text-sm pb-8">
+          © LATTECORPORATION.CO, All Right Reserved.
+        </p>
+      </footer>
+    </div>
+  );
+}

src/app/contact/page.tsx

@@ -16,8 +16,8 @@ export default function Page() {
   });
 
   return (
-    <div className="container py-12 px-8 h-full mx-0">
-      <div className="flex gap-8 items-center justify-center h-full">
+    <div className="container px-8 h-full mx-0 w-full">
+      <div className="flex gap-8 items-center justify-center h-full w-full">
         <QueryClientProvider client={queryClient}>
           <ContactForm />
         </QueryClientProvider>

src/app/page.tsx

@@ -1,10 +1,12 @@
 "use client";
-import DesktopPage from "./desktop-page";
+import MobilePage from "./-/mobile-page";
+import DesktopPage from "./-/desktop-page";
 
 export default function Page() {
   return (
     <>
       <DesktopPage />
+      <MobilePage />
     </>
   );
 }

src/components/3d/moka-pot.jsx

@@ -33,6 +33,7 @@ export default function MokaPot() {
           <OrbitControls
             enableZoom={false}
             enableRotate={true}
+            enablePan={false}
             target={[0, 0, 0]}
           />
         </group>

src/components/contact-form.tsx

@@ -8,7 +8,7 @@ import { useMutation } from "@tanstack/react-query";
 import axios, { AxiosError } from "axios";
 import Form from "next/form";
 import { useMemo, useState } from "react";
-import { Button } from "./ui/button";
+import { Button } from "@components/ui/button";
 
 export default function ContactForm() {
   const [formData, setFormData] = useState({
@@ -72,15 +72,20 @@ export default function ContactForm() {
 
   const headerAnimation = useMemo(
     () => (
-      <TextAnimate animation="slideLeft" by="character" key="header">
+      <TextAnimate
+        animation="slideLeft"
+        by="word"
+        key="header"
+        startOnView={false}
+      >
         Let&apos;s work together!
       </TextAnimate>
     ),
     [],
   );
 
   return (
-    <div className="space-y-12 xl:max-w-xl min-w-[535px] flex flex-col items-center xl:items-start justify-center w-fit">
+    <div className="space-y-12 xl:max-w-xl flex flex-col items-center xl:items-start justify-center w-full">
       <div className="space-y-4">
         <h1 className="text-primary text-6xl ">{headerAnimation}</h1>
       </div>
@@ -158,7 +163,7 @@ export default function ContactForm() {
           />
         </div>
         <div className="w-full flex justify-end">
-          <BlurFade key="submit" delay={0.2} inView>
+          <BlurFade key="submit" delay={0.2}>
             <Button
               type="submit"
               className="bg-[#DDB892] hover:bg-[#EDE0D4]/90 text-primary"

src/components/github-calendar.tsx

@@ -3,7 +3,7 @@
 import React, { useEffect, useState } from "react";
 import MuiTooltip from "@mui/material/Tooltip";
 import GitHubCalendar from "react-github-calendar";
-import { BlurFade } from "./magicui/blur-fade";
+import { BlurFade } from "@components/magicui/blur-fade";
 
 export default function MyGitHubCalendar({ username }) {
   const [loading, setLoading] = useState(true);

src/components/profile.tsx

@@ -30,43 +30,81 @@ export function Profile({
   };
 
   return (
-    <div
-      id={trigram}
-      className="flex flex-row gap-6 items-center h-fit w-full justify-center 2xl:justify-between overflow-x-clip"
-    >
-      <div id="infos" className="flex flex-row max-w-[380px]">
-        <BlurFade key="submit" inView>
+    <>
+      {/* Desktop */}
+      <div
+        id={trigram}
+        className="hidden sm:flex flex-row gap-6 items-center h-fit w-full justify-center 2xl:justify-between overflow-x-clip"
+      >
+        <div id="infos" className="flex flex-row max-w-[380px]">
+          <BlurFade key="submit" inView>
+            <Image
+              src={`/images/${trigram}.svg`}
+              alt={trigram}
+              width={300}
+              height={225}
+              className="flex-none"
+            />
+          </BlurFade>
+          <div className="flex flex-col items-end justify-between gap-5 flex-none">
+            <div className="flex flex-col items-end">
+              <h3 className="text-3xl text-primary">{fullName}</h3>
+              <TextAnimate
+                animation="fadeIn"
+                by="line"
+                as="p"
+                className="text-2xl text-secondary text-end"
+              >
+                {role.join("\n")}
+              </TextAnimate>
+            </div>
+            <Button
+              className="bg-[#DDB892] w-28"
+              onClick={() =>
+                openInNewTab(`https://gravatar.com/${gravatarUrl}`)
+              }
+            >
+              Gravatar
+            </Button>
+          </div>
+        </div>
+        <div className="grow hidden 2xl:flex flex-row justify-center text-primary">
+          <MyGitHubCalendar username={githubUsername} />
+        </div>
+      </div>
+      {/* Mobile */}
+      <div id={trigram} className="flex flex-col sm:hidden gap-5 items-center">
+        <div className="flex items-center w-full h-full justify-between">
           <Image
-            src={`/images/${trigram}.svg`}
+            src={`/images/${trigram}-mobile.svg`}
             alt={trigram}
-            width={300}
-            height={225}
-            className="flex-none"
+            width={180}
+            height={180}
           />
-        </BlurFade>
-        <div className="flex flex-col items-end justify-between gap-5 flex-none">
-          <div className="flex flex-col items-end">
-            <h3 className="text-3xl text-primary">{fullName}</h3>
-            <TextAnimate
-              animation="fadeIn"
-              by="line"
-              as="p"
-              className="text-2xl text-secondary text-end"
+          <div className="flex flex-col items-end h-full gap-4">
+            <div className="flex flex-col items-end">
+              <h3 className="text-xl text-[#e6ccb2]">{fullName}</h3>
+              <TextAnimate
+                animation="fadeIn"
+                by="line"
+                as="p"
+                className="text-md text-secondary text-center w-full flex flex-col items-end"
+              >
+                {role.join("\n")}
+              </TextAnimate>
+            </div>
+            <Button
+              className="bg-[#DDB892]"
+              onClick={() =>
+                openInNewTab(`https://gravatar.com/${gravatarUrl}`)
+              }
+              size="sm"
             >
-              {role.join("\n")}
-            </TextAnimate>
+              Gravatar
+            </Button>
           </div>
-          <Button
-            className="bg-[#DDB892] w-28"
-            onClick={() => openInNewTab(`https://gravatar.com/${gravatarUrl}`)}
-          >
-            Gravatar
-          </Button>
         </div>
       </div>
-      <div className="grow hidden 2xl:flex flex-row justify-center text-primary">
-        <MyGitHubCalendar username={githubUsername} />
-      </div>
-    </div>
+    </>
   );
 }

src/components/sidebar.tsx

@@ -9,7 +9,7 @@ export default function Sidebar() {
   const pathname = usePathname().split("/")[1];
 
   return (
-    <div className="flex flex-col min-w-64 max-w-64 bg-backgroundSidebar text-primary">
+    <div className="hidden sm:flex flex-col min-w-64 max-w-64 w-64 bg-backgroundSidebar text-primary">
       <div className="bg-primary w-full p-5">
         <h1 className="text-xl font-bold text-[#EDE0D4]">Latté</h1>
       </div>

src/components/ui/waves.tsx

@@ -1,14 +1,18 @@
-export default function Waves() {
+export default function Waves({
+  colorTop = "#7f5539",
+  colorBottom = "#DDB892",
+  height = "5%",
+}) {
   return (
     <svg
       width="100%"
-      height="5%"
+      height={height}
       viewBox="0 0 1000 1000"
       xmlns="http://www.w3.org/2000/svg"
       preserveAspectRatio="none"
       overflow="auto"
       shapeRendering="auto"
-      className="bg-primary"
+      style={{ backgroundColor: colorTop }}
     >
       <defs>
         <path
@@ -18,7 +22,7 @@ export default function Waves() {
         <path id="motionpath" d="M -300 0 0 0" />
       </defs>
       <g>
-        <use xlinkHref="#wavepath" y="-25" fill="#DDB892">
+        <use xlinkHref="#wavepath" y="-25" fill={colorBottom}>
           <animateMotion dur="5s" repeatCount="indefinite">
             <mpath xlinkHref="#motionpath" />
           </animateMotion>