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

added some formatting

Browse Source
This commit is contained in:
Taqi Tahmid
2025-04-12 09:28:00 +03:00
parent 62ecb06422
commit e4f9282d7d
15 changed files with 55 additions and 659 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/src/components/Introduction.tsx
View File

@ -59,15 +59,15 @@ const Introduction = () => {
{socialLinks.map((link, index) => (
<div key={index} className="group relative">
<Tooltip label={link.label} position="top">
<a
href={link.href}
target="_blank"
rel="noreferrer"
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}
</a>
<a
href={link.href}
target="_blank"
rel="noreferrer"
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}
</a>
</Tooltip>
</div>
))}

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

@ -51,28 +51,28 @@ const Navbar: React.FC<NavProps> = ({ toggleDarkMode, darkMode }) => {
return (
<div className="w-full flex justify-center">
<nav className="py-5 mb-6 flex justify-between dark:text-white w-full max-w-5xl px-4">
<Tooltip label={copyText} position='bottom'>
<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={25} className={`${COLORS.DARK_PRIMARY}`} />
{copied ? (
<Check size={16} className="text-green-500" />
) : (
<Copy
size={16}
className="opacity-0 group-hover:opacity-100 transition-opacity duration-200"
/>
)}
</button>
<Tooltip label={copyText} position="bottom">
<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={25} className={`${COLORS.DARK_PRIMARY}`} />
{copied ? (
<Check size={16} className="text-green-500" />
) : (
<Copy
size={16}
className="opacity-0 group-hover:opacity-100 transition-opacity duration-200"
/>
)}
</button>
</Tooltip>
<ul className="flex items-center">
<li
className="transition ease-in-out delay-50 duration-100 cursor-pointer"
onClick={toggleDarkMode}
>
<Tooltip label={darkMode ? 'Light Mode' : 'Dark Mode'} position='bottom'>
<Tooltip label={darkMode ? 'Light Mode' : 'Dark Mode'} position="bottom">
<div className="flex items-center space-x-2 mr-4">
{darkMode ? (
<Sun className="text-amber-400 hover:scale-110" size={30} />
@ -83,7 +83,7 @@ const Navbar: React.FC<NavProps> = ({ toggleDarkMode, darkMode }) => {
</Tooltip>
</li>
<li className="transition ease-in-out delay-50 duration-100">
<Tooltip label="Resume" position='bottom'>
<Tooltip label="Resume" position="bottom">
<a
className="text-white flex items-center space-x-2 ml-4"
href={RESUME}

6
frontend/src/components/Tooltip.tsx
View File

@ -11,15 +11,13 @@ export const Tooltip: React.FC<TooltipProps> = ({ children, label, position }) =
left: 'right-full top-1/2 -translate-y-1/2',
right: 'left-full top-1/2 -translate-y-1/2',
}
const tooltipPosition:string = tooltipStyles[position]
const tooltipPosition: string = tooltipStyles[position]
const tooltipClass = `pointer-events-none absolute mt-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 ${tooltipPosition}`
return (
<div className="group relative">
{children}
<span className={tooltipClass}>
{label}
</span>
<span className={tooltipClass}>{label}</span>
</div>
)
}