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

add sidebar to portfolio

Browse Source
This commit is contained in:
Taqi Tahmid
2025-04-20 13:21:28 +03:00
parent 71b095a0e4
commit a50caacfce
2 changed files with 63 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
frontend/src/App.tsx
View File

@ -4,6 +4,7 @@ import { Routes, Route } from 'react-router-dom'
import './App.css'
import Home from './pages/Home'
import Navbar from './components/Navbar'
import Sidebar from './components/Sidebar'
import Footer from './components/Footer'
import Experience from './pages/Experience'
import Projects from './pages/Projects'
@ -24,14 +25,21 @@ function App() {
<main className="bg-amber-50 px-10 dark:bg-gray-900">
<section className="min-h-screen">
<Navbar toggleDarkMode={toggleDarkMode} darkMode={darkMode} />
<Router>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/experience" element={<Experience />} />
<Route path="/projects" element={<Projects />} />
<Route path="/Interests" element={<Interests />} />
</Routes>
</Router>
<div className="flex flex-row h-full">
<div className="w-1/4 max-w-[260px] border-2">
<Sidebar />
</div>
<div className="flex-1">
<Router>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/experience" element={<Experience />} />
<Route path="/projects" element={<Projects />} />
<Route path="/Interests" element={<Interests />} />
</Routes>
</Router>
</div>
</div>
<Footer />
</section>
</main>

47
frontend/src/components/Sidebar.tsx Normal file
View File

@ -0,0 +1,47 @@
import { Github, Linkedin, Mail, Twitter, Globe, Calendar } from 'lucide-react'
const Sidebar = () => {
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>
</div>
)
}
export default Sidebar