homepage responsive

Author: Dowdow

src/components/App.tsx

@@ -18,12 +18,12 @@ export default function App() {
   return (
     <>
       <header className="flex items-center w-full h-14 px-4 border-b border-b-prim/5">
-        <div className="container mx-auto flex flex-row items-center gap-6 md:gap-12">
-          <Link to="/" className="flex flex-col text-xl font-bold">
+        <div className="container mx-auto flex flex-row items-center gap-3 md:gap-12">
+          <Link to="/" className="flex flex-col text-sm md:text-xl font-bold">
             Léo Riera
             <span className="text-xs font-normal text-prim/60">Developer/</span>
           </Link>
-          <nav className="flex flex-row gap-3 md:gap-6 grow text-prim/60 *:hover:text-prim/80">
+          <nav className="flex flex-row gap-2 md:gap-6 grow text-prim/60 *:hover:text-prim/80">
             <Link to="/" className="text-base">
               Home
             </Link>
@@ -42,7 +42,11 @@ export default function App() {
               rel="noreferrer"
               className="p-2 hover:bg-prim/15 rounded-md"
             >
-              <img src={github} alt="Dowdow GitHub page" className="w-6" />
+              <img
+                src={github}
+                alt="Dowdow GitHub page"
+                className="min-w-4 w-6"
+              />
             </a>
             <a
               href="https://www.linkedin.com/in/l%C3%A9o-riera-36383189/"
@@ -53,7 +57,7 @@ export default function App() {
               <img
                 src={linkedin}
                 alt="Léo Riera LinkedIn page"
-                className="w-6"
+                className="min-w-4 w-6"
               />
             </a>
             <a
@@ -65,7 +69,7 @@ export default function App() {
               <img
                 src={spotify}
                 alt="Buzz les Snares Spotify page"
-                className="w-6"
+                className="min-w-4 w-6"
               />
             </a>
           </div>

src/components/Home.tsx

@@ -7,9 +7,13 @@ export default function Home() {
   return (
     <>
       <ImageViewer />
-      <div className="flex justify-between items-center gap-20 m-20">
-        <div className="min-w-80">
-          <img src={me} alt="Léo Riera" className="w-80 rounded" />
+      <div className="flex flex-col md:flex-row justify-between items-center md:items-start lg:items-center gap-5 md:gap-10 lg:gap-20 my-5 md:my-20 mx-0 md:mx-10 lg:mx-20">
+        <div className="min-w-60 md:min-w-40 lg:min-w-80">
+          <img
+            src={me}
+            alt="Léo Riera"
+            className="w-60 md:w-40 lg:w-80 rounded"
+          />
         </div>
         <div className="grow">
           <h1 className="text-5xl font-bold tracking-tighter">Léo Riera</h1>
@@ -45,7 +49,7 @@ export default function Home() {
         <div className="flex justify-center">
           <h2 className="text-6xl font-bold tracking-tighter">Projects</h2>
         </div>
-        <div className="grid grid-cols-3 gap-10 mt-10">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10 mt-10">
           {projects.map((p, index) => (
             <Project
               key={index}