frontend: initial commit for the frontend

frontend/src/components/Introduction.tsx

@@ -0,0 +1,26 @@
+import {
+  AiFillGithub,
+  AiFillLinkedin
+} from "react-icons/ai";
+
+const Introduction = () => {
+  const BoldStyle = "text-blue-900 dark:text-blue-400"
+  return (
+    <div className="text-center p-2">
+      <h2 className="text-5xl text-blue-900 dark:text-blue-400 py-2 font-medium font-burtons">Taqi Tahmid</h2>
+      <h3 className="text-2xl py-2 font-burtons dark:text-blue-200">Test Automation and DevOps Engineer</h3>
+      <p className="text-md py-5 leading-8 text-gray-800 dark:text-gray-300 mx-auto max-w-2xl md:text-xl">
+        I am a <span className={BoldStyle}>Test Automation</span> and <span className={BoldStyle}>DevOps Engineer </span>
+        with a Bachelor’s from Khulna University of Engineering & Technology (KUET) and a Master’s from Tampere University.
+        <br/><br/>I specialize in designing CI/CD pipelines and test automation for diverse applications and architectures
+        with four years of industry experience. 
+      </p>
+      <div className="text-5xl flex justify-center gap-16 py-3 text-blue-900">
+            <a href="https://www.linkedin.com/in/taqi-tahmid/" target="_blank" rel="noreferrer"><AiFillLinkedin className="hover:text-sky-600"/></a>
+            <a href="https://github.com/TheTaqiTahmid" target="_blank" rel="noreferrer"><AiFillGithub className="hover:text-sky-600"/></a>
+      </div>
+  </div>
+  )
+}
+
+export default Introduction

frontend/src/components/Navbar.tsx

@@ -0,0 +1,33 @@
+import React from "react"
+
+interface NavProps {
+  darkMode: boolean
+  toggleDarkMode: () => void
+}
+
+const Navbar: React.FC<NavProps> = ( {toggleDarkMode, darkMode} ) => {
+  const mode = darkMode ? "Light" : "Dark"
+  return (
+    <>
+      <nav className="py-5 mb-12 flex justify-between dark:text-white">
+          <h1>taqitahmid@gmail.com</h1>
+          <ul className="flex items-center">
+              <li className="transition ease-in-out delay-100 hover:scale-110 duration-300 cursor-pointer dark:text-white"
+              onClick={toggleDarkMode}>
+                <div className="bg-gradient-to-r from-blue-900 to-sky-600 text-white px-4 py-2 rounded-md ml-8" >
+                  {mode}
+                </div>
+              </li>
+              <li className="transition ease-in-out delay-150 hover:scale-110 duration-300">
+                  <a className="bg-gradient-to-r from-blue-900 to-sky-600 text-white px-4 py-2 rounded-md ml-8" 
+                  href="https://www.linkedin.com/in/taqi-tahmid/overlay/1635520467350/single-media-viewer/?profileId=ACoAACDU_GsBCgKtvw2bmzbVwTy2WixBG6-e3JM" 
+                  target="_blank" 
+                  rel="noreferrer">Resume</a>
+              </li>
+          </ul>
+      </nav>
+    </>
+  )
+}
+
+export default Navbar

frontend/src/components/Photo.tsx

@@ -0,0 +1,12 @@
+import taqimugshot from "../../src/assets/PhotoRoom_20201011_002118.jpg";
+
+const Photo = () => {
+  return (
+    <div className="py-3">
+        <img className="relative mx-auto rounded-full w-80 h-80 object-cover" 
+        src={taqimugshot} 
+        alt="mugshot"/>
+  </div>
+  )
+}
+export default Photo

frontend/src/components/Skills.tsx

@@ -0,0 +1,46 @@
+import pythonIcon from "../assets/python.svg"
+import bashIcon from "../assets/bash-icon.svg"
+import goIcon from "../assets/go-original.svg"
+import reactIcon from "../assets/react.svg"
+import ansibleIcon from "../assets/ansible.svg"
+import terraformIcon from "../assets/terraform-icon.svg"
+import jenkinsIcon from "../assets/jenkins.svg"
+import gitIcon from "../assets/git-icon.svg"
+import dockerIcon from "../assets/docker-icon.svg"
+import kubernetesIcon from "../assets/kubernetes.svg"
+import prometheusIcon from "../assets/prometheus.svg"
+import grafanaIcon from "../assets/grafana.svg"
+
+
+const Skills = () => {
+  const skills = [
+    { name: 'Python', icon: pythonIcon},
+    { name: 'Golang', icon: goIcon },
+    { name: 'React', icon: reactIcon },
+    { name: 'Bash', icon: bashIcon},
+    { name: 'Ansible', icon: ansibleIcon},
+    { name: 'Terraform', icon: terraformIcon },
+    { name: 'Jenkins', icon: jenkinsIcon},
+    { name: 'Git', icon: gitIcon},
+    { name: 'Docker', icon: dockerIcon },
+    { name: 'Kubernetes', icon: kubernetesIcon},
+    { name: 'Prometheus', icon: prometheusIcon},
+    { name: 'Grafana', icon: grafanaIcon},
+  ];
+
+  return (
+    <div>
+        <h1 className="text-2xl py-5 font-burtons dark:text-blue-200">Tools and Languages</h1>
+        <div className="grid grid-cols-4 gap-6 text-md py-5 leading-8 text-gray-800 dark:text-gray-300 mx-auto max-w-2xl md:text-xl">
+        {skills.map((skill) => (
+            <div key={skill.name} className="flex flex-col items-center">
+                <img src={skill.icon} alt={skill.name} className="h-10 w-10" />
+                <p className="mt-2 text-center">{skill.name}</p>
+            </div>
+        ))}
+        </div>
+    </div>
+  );
+};
+
+export default Skills;