feat: make portifolio/HomeSection responsive

mateusfg7 · Dec 23, 2022 · fe10e48 · fe10e48
1 parent aa93919
commit fe10e48
Showing 1 changed file with 15 additions and 8 deletions.
diff --git a/src/components/portifolio/HomeSection.tsx b/src/components/portifolio/HomeSection.tsx
@@ -1,19 +1,26 @@
 export function HomeSection() {
   return (
-    <div id="home" className="min-h-screen flex justify-center items-center">
-      <div className="content-w flex justify-between items-center gap-12">
+    <div
+      id="home"
+      className="min-h-screen flex justify-center items-center relative"
+    >
+      <div className="md:hidden absolute h-full w-full bg-[url(/assets/portifolio/code-type.svg)] bg-no-repeat bg-center bg-fixed opacity-10" />
+      <div className="content-w flex justify-center md:justify-between items-center gap-12">
         <div className="flex flex-col gap-4">
-          <span className="text-neutral-50 text-7xl font-bold">
+          <span className="text-neutral-50 text-7xl font-bold w-min md:w-max">
             Eu sou Mateus,
           </span>
-          <span className="text-neutral-400 text-3xl flex items-center ">
-            <span className="inline-block overflow-hidden whitespace-nowrap animate-typing">
-              <span>Desenvolvedor full-stack.</span>
+          <span className="text-neutral-400 text-2xl md:text-3xl flex items-center ">
+            <span className="md:inline-block md:overflow-hidden md:whitespace-nowrap md:animate-typing">
+              <span>
+                Desenvolvedor full-stack.
+                <span className="md:hidden animate-cursor">|</span>
+              </span>
             </span>
-            <span className="animate-cursor">|</span>
+            <span className="hidden md:inline animate-cursor">|</span>
           </span>
         </div>
-        <div className="flex-1">
+        <div className="hidden md:block w-64 flex-1">
           <img src="/assets/portifolio/code-type.svg" className="w-full" />
         </div>
       </div>