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,6 +25,11 @@ function App() {
         <main className="bg-amber-50 px-10 dark:bg-gray-900">
           <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">
+                <Sidebar />
+              </div>
+              <div className="flex-1">
                 <Router>
                   <Routes>
                     <Route path="/" element={<Home />} />
@@ -32,6 +38,8 @@ function App() {
                     <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