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

refactor sidebar component

Browse Source
This commit is contained in:
Taqi Tahmid
2025-04-20 21:35:53 +03:00
parent 672d3df1af
commit 92913fb20f
2 changed files with 58 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
frontend/src/components/Sidebar.tsx
View File

@ -1,5 +1,4 @@
import { Aperture, Award, Github, Instagram, Linkedin, Mail, Globe, ScrollText } from 'lucide-react'
import { COLORS } from '../constants'
import { COLORS, SOCIALLINKS } from '../constants'
interface LinkProps {
href: string
@ -26,59 +25,6 @@ const Link: React.FC<LinkProps> = ({ icon, href, children }) => {
}
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}
@ -90,28 +36,28 @@ const Sidebar = () => {
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) => (
{SOCIALLINKS.contact.map((link, index) => (
<Link key={index} icon={link.icon} href={link.href}>
{link.text}
</Link>
))}
<SectionTitle>Connect</SectionTitle>
{links.connect.map((link, index) => (
{SOCIALLINKS.connect.map((link, index) => (
<Link key={index} icon={link.icon} href={link.href}>
{link.text}
</Link>
))}
<SectionTitle>Follow</SectionTitle>
{links.follow.map((link, index) => (
{SOCIALLINKS.follow.map((link, index) => (
<Link key={index} icon={link.icon} href={link.href}>
{link.text}
</Link>
))}
<SectionTitle>Achievements</SectionTitle>
{links.publications.map((link, index) => (
{SOCIALLINKS.publications.map((link, index) => (
<Link key={index} icon={link.icon} href={link.href}>
{link.text}
</Link>

56
frontend/src/constants.tsx
View File

@ -1,4 +1,5 @@
import { Linkedin, Github, Award, Link } from 'lucide-react'
import { Aperture, Instagram, Mail, Globe, ScrollText } from 'lucide-react'
import { Camera, Plane, Film, Server, Cpu, Trophy, Car, Gamepad2 } from 'lucide-react'
import pythonIcon from './assets/python.svg'
import robotIcon from './assets/robotframework-svgrepo-com.svg'
@ -87,23 +88,58 @@ export const PROJECTS = [
},
]
export const SOCIALLINKS = [
export const iconClass = 'text-blue-600 dark:text-blue-400 mr-3'
export const SOCIALLINKS = {
contact: [
{
icon: <Linkedin size={32} />,
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/',
label: 'LinkedIn',
text: 'LinkedIn',
},
{
icon: <Github size={32} />,
href: 'https://github.com/TheTaqiTahmid',
label: 'GitHub',
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: <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',
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',
},
],
}
export const SKILLS = [
{ name: 'Python', icon: pythonIcon },