frontend: added Experience, Interests, and projects section
This commit is contained in:
@ -1,7 +1,8 @@
|
||||
import { Linkedin, Github, Award } from "lucide-react";
|
||||
import { COLORS } from "../constants";
|
||||
|
||||
const Introduction = () => {
|
||||
const BoldStyle = "text-blue-900 dark:text-blue-400 font-semibold";
|
||||
const BoldStyle = "text-blue-900 dark:text-blue-300 font-semibold";
|
||||
|
||||
const socialLinks = [
|
||||
{
|
||||
@ -23,15 +24,15 @@ const Introduction = () => {
|
||||
|
||||
return (
|
||||
<div className="text-center p-4 max-w-4xl mx-auto">
|
||||
<h1 className="text-5xl text-blue-900 dark:text-blue-400 py-2 font-medium font-burtons">
|
||||
<h1 className={`text-5xl py-2 ${COLORS.PRIMARY} ${COLORS.DARK_PRIMARY} font-medium font-mono tracking-wide`}>
|
||||
Taqi Tahmid
|
||||
</h1>
|
||||
|
||||
<h2 className="text-2xl py-2 font-burtons dark:text-blue-200">
|
||||
<h2 className={`text-2xl py-2 font-burtons ${COLORS.PRIMARY} ${COLORS.DARK_PRIMARY}`}>
|
||||
Test Automation and DevOps Engineer
|
||||
</h2>
|
||||
|
||||
<div className="text-md py-5 leading-8 text-gray-800 dark:text-gray-300 md:text-xl space-y-4">
|
||||
<div className={`text-md py-5 ${COLORS.TEXT} ${COLORS.DARK_TEXT} leading-8 md:text-xl space-y-4`}>
|
||||
<p>
|
||||
I am a <span className={BoldStyle}>DevOps</span> and{" "}
|
||||
<span className={BoldStyle}>Test Automation</span> engineer with a{" "}
|
||||
@ -56,7 +57,7 @@ const Introduction = () => {
|
||||
href={link.href}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="text-blue-900 dark:text-blue-400 hover:text-sky-600 dark:hover:text-sky-500 transition-colors duration-200"
|
||||
className={`${COLORS.PRIMARY} ${COLORS.DARK_PRIMARY} hover:text-sky-600 dark:hover:text-sky-500 transition-colors duration-200`}
|
||||
aria-label={link.label}
|
||||
>
|
||||
{link.icon}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import React, { useState, useRef } from 'react';
|
||||
import React, { useEffect, useState, useRef } from 'react';
|
||||
import { Menu, Sun, Moon, FileText, Mail, Check, Copy } from "lucide-react";
|
||||
import { COLORS, EMAIL } from '../constants';
|
||||
|
||||
interface NavProps {
|
||||
darkMode: boolean;
|
||||
@ -9,12 +10,11 @@ interface NavProps {
|
||||
const Navbar: React.FC<NavProps> = ({toggleDarkMode, darkMode}) => {
|
||||
const [copied, setCopied] = useState(false);
|
||||
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
||||
const email = "taqitahmid@gmail.com";
|
||||
const menuRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const handleCopyEmail = async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(email);
|
||||
await navigator.clipboard.writeText(EMAIL);
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
} catch (err) {
|
||||
@ -22,6 +22,10 @@ const Navbar: React.FC<NavProps> = ({toggleDarkMode, darkMode}) => {
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
localStorage.setItem('DARK_MODE', String(darkMode))
|
||||
},[darkMode])
|
||||
|
||||
const menuItem = [
|
||||
{title: 'Home', href: '/'},
|
||||
{title: 'Experience', href: '/experience'},
|
||||
@ -31,14 +35,13 @@ const Navbar: React.FC<NavProps> = ({toggleDarkMode, darkMode}) => {
|
||||
|
||||
return (
|
||||
<div className="w-full flex justify-center">
|
||||
<nav className="py-5 mb-12 flex justify-between dark:text-white w-full max-w-5xl px-4">
|
||||
<nav className="py-5 mb-6 flex justify-between dark:text-white w-full max-w-5xl px-4">
|
||||
<button
|
||||
onClick={handleCopyEmail}
|
||||
className="flex items-center space-x-2 hover:bg-gray-100 dark:hover:bg-gray-800 px-3 py-2 rounded-lg transition-colors duration-200 group relative"
|
||||
>
|
||||
<Mail size={20} className="text-blue-500" />
|
||||
<span className="hidden sm:inline">{email}</span>
|
||||
<span className="sm:hidden">Email</span>
|
||||
<Mail size={25} className={`${COLORS.DARK_PRIMARY}`} />
|
||||
<span>Email</span>
|
||||
{copied ? (
|
||||
<Check size={16} className="text-green-500" />
|
||||
) : (
|
||||
@ -52,8 +55,8 @@ const Navbar: React.FC<NavProps> = ({toggleDarkMode, darkMode}) => {
|
||||
<ul className="flex items-center">
|
||||
<li className="transition ease-in-out delay-50 duration-100 cursor-pointer"
|
||||
onClick={toggleDarkMode}>
|
||||
<div className="bg-blue-900 hover:bg-blue-1000 dark:bg-blue-500 dark:hover:bg-blue-600 text-white p-2 rounded-lg ml-8 shadow-sm group relative">
|
||||
{darkMode ? <Sun size={24} /> : <Moon size={24} />}
|
||||
<div className="group relative">
|
||||
{darkMode ? <Sun className='text-amber-400 hover:scale-110' size={30} /> : <Moon size={24} />}
|
||||
<span className="pointer-events-none absolute -bottom-8 left-1/2 -translate-x-1/2 whitespace-nowrap rounded bg-slate-800 px-2 py-1 text-xs text-slate-100 opacity-0 transition before:absolute before:left-1/2 before:top-full before:-translate-x-1/2 before:border-4 before:border-transparent before:border-t-slate-800 before:content-[''] group-hover:opacity-100">
|
||||
{darkMode ? "Light Mode": "Dark Mode"}
|
||||
</span>
|
||||
@ -61,11 +64,11 @@ const Navbar: React.FC<NavProps> = ({toggleDarkMode, darkMode}) => {
|
||||
</li>
|
||||
<li className="transition ease-in-out delay-50 duration-100">
|
||||
<div className="group relative">
|
||||
<a className="bg-blue-900 hover:bg-blue-1000 dark:bg-blue-500 dark:hover:bg-blue-600 text-white p-2 rounded-lg ml-8 shadow-sm inline-flex"
|
||||
<a className="text-white p-2 ml-8 inline-flex"
|
||||
href="https://www.linkedin.com/in/taqi-tahmid/details/featured/1735981754176/single-media-viewer/?profileId=ACoAACDU_GsBCgKtvw2bmzbVwTy2WixBG6-e3JM"
|
||||
target="_blank"
|
||||
rel="noreferrer">
|
||||
<FileText size={24} />
|
||||
<FileText className="hover:scale-110 text-gray-800 dark:text-white" size={30} />
|
||||
</a>
|
||||
<span className="pointer-events-none absolute -bottom-8 left-1/2 -translate-x-1/2 whitespace-nowrap rounded bg-slate-800 px-2 py-1 text-xs text-slate-100 opacity-0 transition before:absolute before:left-1/2 before:top-full before:-translate-x-1/2 before:border-4 before:border-transparent before:border-t-slate-800 before:content-[''] group-hover:opacity-100">
|
||||
Resume
|
||||
|
||||
@ -10,6 +10,7 @@ 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";
|
||||
import { COLORS } from "../constants";
|
||||
|
||||
const Skills = () => {
|
||||
const skills = [
|
||||
@ -29,10 +30,10 @@ const Skills = () => {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1 className="text-2xl py-5 font-burtons dark:text-blue-200">
|
||||
<h1 className={`text-2xl py-5 font-burtons ${COLORS.PRIMARY} ${COLORS.DARK_PRIMARY}`}>
|
||||
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">
|
||||
<div className={`grid grid-cols-4 gap-6 text-md py-5 leading-8 ${COLORS.TEXT} ${COLORS.DARK_TEXT} 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" />
|
||||
|
||||
Reference in New Issue
Block a user