add sidebar to portfolio

frontend/src/App.tsx

@@ -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>
+            <div className="flex flex-row h-full">
-              <Routes>
+              <div className="w-1/4 max-w-[260px] border-2">
-                <Route path="/" element={<Home />} />
+                <Sidebar />
-                <Route path="/experience" element={<Experience />} />
+              </div>
-                <Route path="/projects" element={<Projects />} />
+              <div className="flex-1">
-                <Route path="/Interests" element={<Interests />} />
+                <Router>
-              </Routes>
+                  <Routes>
-            </Router>
+                    <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>

frontend/src/components/Sidebar.tsx

@@ -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