taqi/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

frontend: added Experience, Interests, and projects section

Browse Source
This commit is contained in:
Taqi Tahmid
2025-01-06 21:28:48 +02:00
parent bd6539d4b6
commit 72cc387b34
10 changed files with 337 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
frontend/src/components/Navbar.tsx
View File

@ -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