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

added menubar and experience section

Browse Source
This commit is contained in:
Taqi Tahmid
2025-01-04 11:59:57 +02:00
parent 2f61020cdc
commit bd6539d4b6
7 changed files with 327 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/Footer.tsx
View File

@ -4,7 +4,7 @@ const Footer = () => {
const currentYear = new Date().getFullYear();
return (
<footer className="mt-12 py-6 border-t border-gray-200 dark:border-gray-800">
<footer className="mt-16 py-6 border-t border-gray-200 dark:border-gray-800">
<div className="max-w-4xl mx-auto px-4">
<div className="flex flex-col items-center gap-4 text-gray-600 dark:text-gray-400 text-sm">
<div className="flex items-center gap-2">

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

@ -1,35 +1,106 @@
import React from "react"
import { Sun, Moon, FileText } from "lucide-react"
import React, { useState, useRef } from 'react';
import { Menu, Sun, Moon, FileText, Mail, Check, Copy } from "lucide-react";
interface NavProps {
darkMode: boolean
toggleDarkMode: () => void
darkMode: boolean;
toggleDarkMode: () => void;
}
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);
setCopied(true);
setTimeout(() => setCopied(false), 2000);
} catch (err) {
console.error('Failed to copy email');
}
};
const menuItem = [
{title: 'Home', href: '/'},
{title: 'Experience', href: '/experience'},
{title: 'Projects', href: '/projects'},
{title: 'Interests', href: '/interests'},
]
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">
<h1>taqitahmid@gmail.com</h1>
<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>
{copied ? (
<Check size={16} className="text-green-500" />
) : (
<Copy size={16} className="opacity-0 group-hover:opacity-100 transition-opacity duration-200" />
)}
<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">
{copied ? 'Copied!' : 'Click to copy'}
</span>
</button>
<ul className="flex items-center">
<li className="transition ease-in-out delay-100 hover:scale-110 duration-300 cursor-pointer"
<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">
<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} />}
<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>
</div>
</li>
<li className="transition ease-in-out delay-150 hover:scale-110 duration-300">
<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"
href="https://www.linkedin.com/in/taqi-tahmid/overlay/1635520467350/single-media-viewer/?profileId=ACoAACDU_GsBCgKtvw2bmzbVwTy2WixBG6-e3JM"
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} />
</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
</span>
</div>
</li>
<li className="p-2 ml-5 cursor-pointer">
<div ref={menuRef} className="group relative">
<button onClick={() => setIsMenuOpen(!isMenuOpen)} className='focus:outline-none'>
<Menu size={24}/>
</button>
{/* Dropdown Menu */}
{isMenuOpen && (
<div className="absolute right-0 mt-3 w-36 rounded-md shadow-lg bg-amber-50 dark:bg-gray-800 ring-1 ring-black ring-opacity-5">
<div className="py-1" role="menu" aria-orientation="vertical">
{menuItem.map((item) => (
<a
key={item.title}
href={item.href}
className="block px-4 py-2 text-sm text-gray-00 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-150"
role='menuitem'
>
{item.title}
</a>
))}
</div>
</div>
)}
</div>
</li>
</ul>
</nav>
</div>
)
}
);
};
export default Navbar
export default Navbar;