add links to sidebar
This commit is contained in:
14428
frontend/package-lock.json
generated
14428
frontend/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -18,7 +18,8 @@
|
||||
"react-dom": "^18.3.1",
|
||||
"react-icons": "^5.3.0",
|
||||
"react-markdown": "^9.0.3",
|
||||
"react-router-dom": "^7.1.1"
|
||||
"react-router-dom": "^7.1.1",
|
||||
"styled-component": "^2.8.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.9.0",
|
||||
|
||||
@ -26,7 +26,7 @@ function App() {
|
||||
<section className="min-h-screen">
|
||||
<Navbar toggleDarkMode={toggleDarkMode} darkMode={darkMode} />
|
||||
<div className="flex flex-row h-full">
|
||||
<div className="w-1/4 max-w-[260px] border-2">
|
||||
<div className="w-1/4 max-w-[260px] max-h-[928px] border-2 border-gray-300 dark:border-gray-700 rounded-lg shadow-sm">
|
||||
<Sidebar />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
|
||||
@ -4,7 +4,7 @@ const Footer = () => {
|
||||
const currentYear = new Date().getFullYear()
|
||||
|
||||
return (
|
||||
<footer className="mt-16 py-6 border-t border-gray-200 dark:border-gray-800">
|
||||
<footer className="mt-24 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">
|
||||
@ -29,7 +29,7 @@ const Footer = () => {
|
||||
|
||||
<div className="flex items-center gap-2 text-xs">
|
||||
<Coffee size={14} className="inline-block" />
|
||||
<span>Powered by coffee and countless hours of debugging</span>
|
||||
<span>Powered by coffee and Love</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,28 +1,8 @@
|
||||
import { Linkedin, Github, Award } from 'lucide-react'
|
||||
import { COLORS } from '../constants'
|
||||
import { Tooltip } from './Tooltip'
|
||||
|
||||
const Introduction = () => {
|
||||
const BoldStyle = 'text-blue-900 dark:text-blue-300 font-semibold'
|
||||
|
||||
const socialLinks = [
|
||||
{
|
||||
icon: <Linkedin size={32} />,
|
||||
href: 'https://www.linkedin.com/in/taqi-tahmid/',
|
||||
label: 'LinkedIn',
|
||||
},
|
||||
{
|
||||
icon: <Github size={32} />,
|
||||
href: 'https://github.com/TheTaqiTahmid',
|
||||
label: 'GitHub',
|
||||
},
|
||||
{
|
||||
icon: <Award size={32} />,
|
||||
href: 'https://ti-user-certificates.s3.amazonaws.com/e0df7fbf-a057-42af-8a1f-590912be5460/3da54db2-f994-4148-a0ca-705ae1d748cd-mohammad-taqi-tahmid-094cf8b4-0db8-4a9f-b787-b4efbb2a90fe-certificate.pdf',
|
||||
label: 'CKA Certificate',
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<div className="text-center p-4 max-w-4xl mx-auto">
|
||||
<h1
|
||||
@ -54,24 +34,6 @@ const Introduction = () => {
|
||||
and infrastructure automation to implementing robust testing frameworks.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center gap-8 py-3">
|
||||
{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>
|
||||
</Tooltip>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,47 +1,123 @@
|
||||
import { Github, Linkedin, Mail, Twitter, Globe, Calendar } from 'lucide-react'
|
||||
import { Aperture, Award, Github, Instagram, Linkedin, Mail, Globe, ScrollText } from 'lucide-react'
|
||||
import { COLORS } from '../constants'
|
||||
|
||||
const Sidebar = () => {
|
||||
interface LinkProps {
|
||||
href: string
|
||||
children: React.ReactNode
|
||||
icon: React.ReactNode
|
||||
}
|
||||
|
||||
const Link: React.FC<LinkProps> = ({ icon, href, children }) => {
|
||||
return (
|
||||
<div className="p-4 max-w-xs mx-auto">
|
||||
<h2 className="text-blue-800 dark:text-blue-600 mb-2">Contact</h2>
|
||||
<div className="mb-4 bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-sm text-sm">
|
||||
<div className="flex items-center">
|
||||
<Mail size={18} className="text-blue-600 dark:text-blue-400 mr-2" />
|
||||
<a href="mailto:taqitahmid@gmail.com" className="text-blue-600 dark:text-blue-400">
|
||||
taqitahmid@gmail.com
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mb-4 bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-sm text-sm">
|
||||
<div className="flex items-center">
|
||||
<Globe size={18} className="text-blue-600 dark:text-blue-400 mr-2" />
|
||||
<a href="https://portfolio.tahmidcloud.com" className="text-blue-600 dark:text-blue-400">
|
||||
My Website
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<h2 className="text-blue-800 dark:text-blue-600 mb-2">Connect</h2>
|
||||
<div className="mb-4 bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-sm text-sm">
|
||||
<div className="flex items-center">
|
||||
<Linkedin size={18} className="text-blue-600 dark:text-blue-400 mr-2" />
|
||||
<a
|
||||
href="https://www.linkedin.com/in/taqi-tahmid/"
|
||||
className="text-blue-600 dark:text-blue-400"
|
||||
>
|
||||
Taqi Tahmid
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mb-4 bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-sm text-sm">
|
||||
<div className="flex items-center">
|
||||
<Github size={18} className="text-blue-600 dark:text-blue-400 mr-2" />
|
||||
<a href="https://github.com/TheTaqiTahmid" className="text-blue-600 dark:text-blue-400">
|
||||
TheTaqiTahmid
|
||||
</a>
|
||||
</div>
|
||||
<div className="transition-all duration-200 hover:translate-x-1">
|
||||
<div className="mb-2 border border-gray-200 dark:border-gray-700 p-3 rounded-lg hover:shadow-md">
|
||||
<a
|
||||
href={href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400"
|
||||
>
|
||||
{icon}
|
||||
<span className="text-sm font-medium hidden md:inline">{children}</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const Sidebar = () => {
|
||||
const iconClass = 'text-blue-600 dark:text-blue-400 mr-3'
|
||||
|
||||
const links = {
|
||||
contact: [
|
||||
{
|
||||
icon: <Mail size={20} className={iconClass} />,
|
||||
href: 'mailto:taqitahmid@gmail.com',
|
||||
text: 'Email Me',
|
||||
},
|
||||
{
|
||||
icon: <Globe size={20} className={iconClass} />,
|
||||
href: 'https://portfolio.tahmidcloud.com/',
|
||||
text: 'My Website',
|
||||
},
|
||||
],
|
||||
connect: [
|
||||
{
|
||||
icon: <Linkedin size={20} className={iconClass} />,
|
||||
href: 'https://www.linkedin.com/in/taqi-tahmid/',
|
||||
text: 'LinkedIn',
|
||||
},
|
||||
{
|
||||
icon: <Github size={20} className={iconClass} />,
|
||||
href: 'https://github.com/theTaqiTahmid',
|
||||
text: 'GitHub',
|
||||
},
|
||||
],
|
||||
follow: [
|
||||
{
|
||||
icon: <Aperture size={20} className={iconClass} />,
|
||||
href: 'https://500px.com/p/taqi1203050?view=photos',
|
||||
text: 'My Photography',
|
||||
},
|
||||
{
|
||||
icon: <Instagram size={20} className={iconClass} />,
|
||||
href: 'https://www.instagram.com/tahmidtaqi/',
|
||||
text: 'Instagram',
|
||||
},
|
||||
],
|
||||
publications: [
|
||||
{
|
||||
icon: <Award size={20} className={iconClass} />,
|
||||
href: 'https://www.credly.com/badges/abb049aa-d811-4954-a460-8c7351ceba3e/public_url',
|
||||
text: 'CKA Certification',
|
||||
},
|
||||
{
|
||||
icon: <ScrollText size={20} className={iconClass} />,
|
||||
href: 'https://scholar.google.fi/citations?user=w3BoP0AAAAAJ&hl=en',
|
||||
text: 'Google Scholar',
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
const SectionTitle = ({ children }: { children: React.ReactNode }) => (
|
||||
<h2 className={`mt-6 mb-4 text-lg font-semibold ${COLORS.PRIMARY} ${COLORS.DARK_PRIMARY}`}>
|
||||
{children}
|
||||
</h2>
|
||||
)
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`p-6 max-w-xs mx-auto ${COLORS.PRIMARY} ${COLORS.DARK_PRIMARY} rounded-xl shadow-sm`}
|
||||
>
|
||||
<SectionTitle>Contact</SectionTitle>
|
||||
{links.contact.map((link, index) => (
|
||||
<Link key={index} icon={link.icon} href={link.href}>
|
||||
{link.text}
|
||||
</Link>
|
||||
))}
|
||||
|
||||
<SectionTitle>Connect</SectionTitle>
|
||||
{links.connect.map((link, index) => (
|
||||
<Link key={index} icon={link.icon} href={link.href}>
|
||||
{link.text}
|
||||
</Link>
|
||||
))}
|
||||
|
||||
<SectionTitle>Follow</SectionTitle>
|
||||
{links.follow.map((link, index) => (
|
||||
<Link key={index} icon={link.icon} href={link.href}>
|
||||
{link.text}
|
||||
</Link>
|
||||
))}
|
||||
|
||||
<SectionTitle>Achievements</SectionTitle>
|
||||
{links.publications.map((link, index) => (
|
||||
<Link key={index} icon={link.icon} href={link.href}>
|
||||
{link.text}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Sidebar
|
||||
|
||||
Reference in New Issue
Block a user