feat: finished basic introduction text and image placement

src/components/pages/Front.page.js

@@ -17,6 +17,8 @@ import Introduction from '../sections/Introduction';
 // Component
 //============================================================
 
+const DELAY = 0;
+
 const FrontPage = () => {
   return (
     <>
@@ -25,23 +27,23 @@ const FrontPage = () => {
           <Cdiv className="w-full h-full gap-2">
             <Cdiv className="flex-1 h-full">
               <AppearText
-                className="font-mono text-2xl text-snow-storm-300 cursor-pointer hover:text-3xl hover:text-snow-storm-100"
+                className="font-display text-2xl text-snow-storm-300 cursor-pointer hover:text-3xl hover:text-snow-storm-100"
                 text="Option #1"
-                delay={2500}
+                delay={DELAY * 2.5}
               />
             </Cdiv>
             <Cdiv className="flex-1 h-full">
               <AppearText
-                className="font-mono text-2xl text-snow-storm-300 cursor-pointer hover:text-3xl hover:text-snow-storm-100"
+                className="font-display text-2xl text-snow-storm-300 cursor-pointer hover:text-3xl hover:text-snow-storm-100"
                 text="Option #2"
-                delay={2500}
+                delay={DELAY * 2.5}
               />
             </Cdiv>
             <Cdiv className="flex-1 h-full">
               <AppearText
-                className="font-mono text-2xl text-snow-storm-300 cursor-pointer hover:text-3xl hover:text-snow-storm-100"
+                className="font-display text-2xl text-snow-storm-300 cursor-pointer hover:text-3xl hover:text-snow-storm-100"
                 text="Option #3"
-                delay={2500}
+                delay={DELAY * 2.5}
               />
             </Cdiv>
           </Cdiv>
@@ -51,16 +53,16 @@ const FrontPage = () => {
             <AppearText
               className="font-display font-bold text-7xl text-frost-400"
               text="JOHN COSTA"
-              delay={750}
+              delay={DELAY}
             />
             <AppearText
               className="font-display font-bold text-5xl text-frost-200"
               text="DEVELOPER"
-              delay={1500}
+              delay={DELAY * 2}
             />
           </div>
         </div>
-        <FadeComponent delay={2500}>
+        <FadeComponent delay={DELAY * 2.5}>
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
             <path
               className="fill-frost-200"
@@ -68,7 +70,7 @@ const FrontPage = () => {
               d="M0,96L80,85.3C160,75,320,53,480,58.7C640,64,800,96,960,101.3C1120,107,1280,85,1360,74.7L1440,64L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z"></path>
           </svg>
         </FadeComponent>
-        <FadeComponent delay={2500}>
+        <FadeComponent delay={DELAY * 2.5}>
           <Introduction />
         </FadeComponent>
       </div>

src/components/sections/Introduction.js

@@ -11,13 +11,23 @@ import React from 'react';
 const Introduction = () => {
   return (
     <div className="w-full flex justify-center bg-frost-200">
-      <div className="w-full max-w-5xl flex flex-col">
+      <div className="w-full flex md:flex-row flex-col p-4 max-w-5xl gap-4">
-        <h1 className="text-7xl font-display font-bold text-polar-night-400">Hi, I'm John</h1>
+        <div className="w-full">
-        <br />
+          <h1 className="text-7xl font-display font-bold text-polar-night-400">Hi, I'm John</h1>
-        <p className="text-xl text-polar-night-400">
+          <br />
-          Eu eu laborum in ea enim. Anim reprehenderit quis magna sint nulla aliquip ullamco aliquip
+          <p className="text-xl font-display text-polar-night-400">
-          ad cillum nisi tempor id. Ea eu et irure cupidatat. Amet duis in id cupidatat.
+            I am a BSc Computer Science student who loves to program. I a most intrested in
-        </p>
+            full-stack development - taking an idea all the way to the end and creating a full
+            application, I love working as part of a team and making project with friends. I am also
+            a Linux Enthusiat and I run Garuda Linux as my main OS on all my machines.
+          </p>
+        </div>
+        <div className="md:w-1/2 w-full flex justify-center">
+          <img
+            src="https://i.imgur.com/dlD9BZc.jpeg"
+            className="rounded-full object-contain max-h-[50vh]"
+          />
+        </div>
       </div>
     </div>
   );

src/index.css

@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;