feat(#15): add work experience section

fresh.gen.ts

@@ -4,21 +4,23 @@
 
 import * as $_404 from "./routes/_404.tsx";
 import * as $_app from "./routes/_app.tsx";
-import * as $api_intro from "./routes/api/intro.ts";
+import * as $api_profile from "./routes/api/profile.ts";
 import * as $index from "./routes/index.tsx";
 import * as $Bio from "./islands/Bio.tsx";
+import * as $Experience from "./islands/Experience.tsx";
 import * as $Navbar from "./islands/Navbar.tsx";
 import { type Manifest } from "$fresh/server.ts";
 
 const manifest = {
   routes: {
     "./routes/_404.tsx": $_404,
     "./routes/_app.tsx": $_app,
-    "./routes/api/intro.ts": $api_intro,
+    "./routes/api/profile.ts": $api_profile,
     "./routes/index.tsx": $index,
   },
   islands: {
     "./islands/Bio.tsx": $Bio,
+    "./islands/Experience.tsx": $Experience,
     "./islands/Navbar.tsx": $Navbar,
   },
   baseUrl: import.meta.url,

islands/Bio.tsx

@@ -1,22 +1,74 @@
+const DOB = 1995;
+const JOB_START_YEAR = 2019;
+const CURRENT_ROLE = "Frontend Software Engineer";
+const CURRENT_EMPLOYER = "adidas";
+const CURRENT_EMPLOYER_URL = "https://www.linkedin.com/company/adidas/";
+const CURRENT_LOCATION = "Sittard-Geleen, the Netherlands";
+
 export default function Bio() {
+  const age = new Date().getFullYear() - DOB;
+  const yearOfExperience = new Date().getFullYear() - JOB_START_YEAR;
+
   return (
-    <div class="w-full">
-      <img
-        src="/profile.webp"
-        loading="lazy"
-        height="240"
-        width="240"
-        alt="profile"
-      />
-
-      <p className="text-lg text-red-700">
-        I am a full-time Frontend Software Engineer and fond of working with
-        Javascript frameworks. I mostly love working with React (a UI library),
-        Vue, Next.js and Nuxt.js frameworks. I am also quite familiar (working)
-        with the Javascript backend frameworks such as Express.js and GraphQL.
-        Always enthusiastic about new web trends. And try to make time to learn
-        and gets my hands dirty.
-      </p>
+    <div className="w-full sm:w-1/2">
+      <div
+        className="flex flex-col items-center justify-center gap-2 mt-4 mb-8"
+        title="Binod Nepali"
+      >
+        <img
+          src="/profile.webp"
+          loading="eager"
+          height="240"
+          width="240"
+          alt="profile"
+        />
+
+        <h3 className="text-3xl font-semibold text-teal-500">
+          Binod Nepali
+        </h3>
+
+        <p className="text-lg text-slate-500 dark:text-slate-400">
+          {age} years old | Nepalese-Dutch
+        </p>
+
+        <p
+          className="text-lg text-slate-500 dark:text-slate-400"
+          title="Frontend Software Engineer @ adidas"
+          dangerouslySetInnerHTML={{
+            __html:
+              `${CURRENT_ROLE} @ <a href="${CURRENT_EMPLOYER_URL}" target="_blank" rel="noopener noreferrer"
+              class="decoration-teal-500 dark:decoration-teal-400 hover:underline transition-colors duration-200"
+              >${CURRENT_EMPLOYER}</a>`,
+          }}
+        />
+
+        <p
+          className="text-lg text-slate-500 dark:text-slate-400"
+          title="Sittard-Geleen, Netherlands"
+        >
+          {CURRENT_LOCATION}
+        </p>
+      </div>
+
+      <div>
+        <h4 className="text-2xl font-semibold text-teal-500">About Me</h4>
+
+        <p className="text-lg">
+          {`Frontend Software Engineer with more than ${yearOfExperience} years of experience, I am
+          passionate about creating visually appealing and functional websites
+          using the latest web technologies. Whether working independently or
+          collaboratively as part of a team, I thrive on tackling challenges and
+          delivering exceptional work. I am also a strong believer in
+          contributing to the community, and my personal projects on Github
+          demonstrate my abilities to create example templates and solve complex
+          coding problems. Additionally, my portfolio site and open-source
+          project showcase my expertise in frameworks such as React, Next.js,
+          Vue, Nuxt, and Fresh (a web framework for Deno). I am always eager to
+          learn and take on new challenges, and my collaborative nature and
+          dedication to continuous learning make me a valuable asset to any
+          team.`}
+        </p>
+      </div>
     </div>
   );
 }