add a profile pic, wip

src/web/src/components/hero/content.jsx

@@ -1,13 +1,40 @@
 "use client"
 
 import Typewriter from 'typewriter-effect';
-import React from 'react';
+import { motion } from 'framer-motion';
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
 
+function Portrait() {
+  const fadeInAnimation = {
+    hidden: { opacity: 0 },
+    visible: { opacity: 1, transition: { duration: 1 } },
+  };
+
+  return (
+    <motion.div
+      initial="hidden"
+      animate="visible"
+      variants={fadeInAnimation}
+      className="w-32 h-32 relative rounded-full overflow-hidden"
+    >
+      <Image
+        src="/profile.png"
+        alt="Portrait"
+        width="90"
+        height="90"
+        className="w-full h-full rounded-full"
+      />
+    </motion.div>
+  );
+}
 
 function Content() {
   return (
+    <>
       <div className="relative h-screen overflow-y-scroll font-bold text-4xl">
         <div className="h-screen flex flex-col items-center justify-center">
+          <Portrait />
           <div className="relative h-48 overflow-y-auto">
             <Typewriter
               options={{
@@ -58,6 +85,7 @@ function Content() {
           </div>
         </div>
       </div>
+    </>
   );
 };