next

package.json

@@ -16,6 +16,7 @@
     "clsx": "^2.1.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-icons": "^5.3.0",
     "react-markdown": "^9.0.1"
   },
   "devDependencies": {

src/App.tsx

@@ -7,25 +7,38 @@ import "@fontsource/montserrat/400.css"; // Specify weight
 import "@fontsource/montserrat/500.css"; // Specify weight
 import "@fontsource/montserrat/600.css"; // Specify weight
 import "@fontsource/montserrat/700.css"; // Specify weight
+import { FaEnvelope, FaLinkedinIn, FaCity } from "react-icons/fa";
 
 import img from "./assets/fa_photo.jpg"
 
 function App() {
 
   return (
     <>
-      <div className="font-montserrat flex gap-4 justify-center px-4 md:px-12 py-12 md:py-24">
+      <div className="font-montserrat flex flex-col justify-between gap-4 px-4 md:px-12 pt-12 md:pt-24">
           <div className="w-full flex gap-8 max-w-[80rem] flex-col lg:flex-row">
               <div className="flex w-fit justify-start flex-col items-start gap-4">
                   <div className=" sticky top-12 pt-2 flex flex-col gap-6">
                   <img className="rounded-full object-cover w-24 h-24 lg:h-32 lg:w-32" src={img}  alt="Filip Akkad Image"/>
-                  <h1 className="text-left whitespace-nowrap text-2xl md:text-4xl">Filip Akkad</h1>
+                      <div className="text-left flex flex-col gap-2">
+                          <h1 className="text-left whitespace-nowrap text-2xl md:text-4xl">Filip Akkad</h1>
+                          <a className="text-xs flex gap-2 items-center"
+                             href="mailto:[email protected]"><FaEnvelope/> [email protected]</a>
+                          <a className="text-xs flex gap-2 items-center"
+                             href="https://www.linkedin.com/in/filip-akkad/"><FaLinkedinIn/>@filipakkad</a>
+                          <span className="text-xs flex gap-2 items-center"><FaCity/> Warsaw</span>
+                      </div>
                   </div>
               </div>
               <div className="flex w-full justify-start">
-                  <Offer />
+                  <Offer/>
               </div>
           </div>
+          <footer>
+              <div className="px-4 py-12 w-full font-light">
+                  designed and implemented by Filip Akkad
+              </div>
+          </footer>
       </div>
     </>
   )

src/Offer.tsx

@@ -26,6 +26,7 @@ export const Offer = () => {
     return (
         <div className="flex gap-8 w-full flex-col lg:flex-row">
             <div className="w-full prose dark:prose-invert prose-sm prose-stone !max-w-none text-white prose-amber text-left">
+                <h1 className="whitespace-nowrap"><span className="text-blue-500">(Filip as)</span> Lead Frontend Engineer 🚀</h1>
                 <h3 className="sc-1npqnwg-4 sc-1npqnwg-5 sc-1uwf3m5-0 nNByh custom-css-style-job-description">
                     Job description
                 </h3>