diff --git a/index.html b/index.html
index 3b356c4..bbcefc0 100644
--- a/index.html
+++ b/index.html
@@ -136,8 +136,119 @@
             </div>
         </section>
         
+        <!-- Technologies & Stack Section -->
+        <section id="technologies" class="section-padding">
+            <div class="container">
+                <h2>Technologies & Tools</h2>
+                <div class="row g-4 row-cols-2 row-cols-md-3 row-cols-lg-4">
+                    <!-- HTML5 -->
+                    <div class="col">
+                        <div class="tech-card">
+                            <div class="tech-icon-wrapper">
+                                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                    <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
+                                </svg>
+                            </div>
+                            <h3 class="tech-name">HTML5</h3>
+                            <p class="tech-desc">Semantic Markup</p>
+                        </div>
+                    </div>
+                    <!-- CSS3 -->
+                    <div class="col">
+                        <div class="tech-card">
+                            <div class="tech-icon-wrapper">
+                                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                    <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
+                                </svg>
+                            </div>
+                            <h3 class="tech-name">CSS3</h3>
+                            <p class="tech-desc">Modern Styling</p>
+                        </div>
+                    </div>
+                    <!-- JavaScript -->
+                    <div class="col">
+                        <div class="tech-card">
+                            <div class="tech-icon-wrapper">
+                                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                    <path d="M16 18l6-6-6-6"/>
+                                    <path d="M8 6l-6 6 6 6"/>
+                                </svg>
+                            </div>
+                            <h3 class="tech-name">JavaScript</h3>
+                            <p class="tech-desc">Interactive Logic</p>
+                        </div>
+                    </div>
+                    <!-- Bootstrap -->
+                    <div class="col">
+                        <div class="tech-card">
+                            <div class="tech-icon-wrapper">
+                                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                    <path d="M12 2l9 4.9V17L12 22l-9-4.9V7z"/>
+                                </svg>
+                            </div>
+                            <h3 class="tech-name">Bootstrap 5</h3>
+                            <p class="tech-desc">Responsive UI</p>
+                        </div>
+                    </div>
+                    <!-- Vite -->
+                    <div class="col">
+                        <div class="tech-card">
+                            <div class="tech-icon-wrapper">
+                                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                    <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
+                                </svg>
+                            </div>
+                            <h3 class="tech-name">Vite</h3>
+                            <p class="tech-desc">Fast Build Tool</p>
+                        </div>
+                    </div>
+                    <!-- Git -->
+                    <div class="col">
+                        <div class="tech-card">
+                            <div class="tech-icon-wrapper">
+                                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                    <line x1="6" y1="3" x2="6" y2="15"></line>
+                                    <circle cx="18" cy="6" r="3"></circle>
+                                    <circle cx="6" cy="18" r="3"></circle>
+                                    <path d="M18 9a9 9 0 0 1-9 9"></path>
+                                </svg>
+                            </div>
+                            <h3 class="tech-name">Git</h3>
+                            <p class="tech-desc">Version Control</p>
+                        </div>
+                    </div>
+                    <!-- SEO -->
+                    <div class="col">
+                        <div class="tech-card">
+                            <div class="tech-icon-wrapper">
+                                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                    <circle cx="11" cy="11" r="8"></circle>
+                                    <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+                                </svg>
+                            </div>
+                            <h3 class="tech-name">SEO</h3>
+                            <p class="tech-desc">Search Visibility</p>
+                        </div>
+                    </div>
+                    <!-- Accessibility -->
+                    <div class="col">
+                        <div class="tech-card">
+                            <div class="tech-icon-wrapper">
+                                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                    <circle cx="12" cy="5" r="1"></circle>
+                                    <path d="M12 22V8M5 12H2a10 10 0 0 0 20 0h-3"/>
+                                </svg>
+                            </div>
+                            <h3 class="tech-name">Accessibility</h3>
+                            <p class="tech-desc">Inclusive Design</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+        
         <!-- Portfolio Section -->
-        <section id="portfolio" class="section-padding">
+        <section id="portfolio" class="section-padding section-alt">
             <div class="container">
                 <h2>Portfolio</h2>
                 <div class="row g-4">
@@ -207,7 +318,7 @@
         </section>
         
         <!-- Testimonials Section -->
-        <section id="testimonials" class="section-padding section-alt">
+        <section id="testimonials" class="section-padding">
             <div class="container">
                 <h2>Testimonials</h2>
                 <div class="row g-4">
@@ -239,7 +350,7 @@
         </section>
 
         <!-- Contact Section -->
-        <section id="contact" class="section-padding">
+        <section id="contact" class="section-padding section-alt">
             <div class="container">
                 <h2>Contact Us</h2>
                 <div class="row justify-content-center">
diff --git a/styles.css b/styles.css
index 334e6c2..89cccbc 100644
--- a/styles.css
+++ b/styles.css
@@ -262,6 +262,56 @@ footer {
     }
 }
 
+/* Tech Stack Cards */
+.tech-card {
+    padding: 2rem 1.5rem;
+    border-radius: 12px;
+    background-color: var(--bg-surface);
+    border: 1px solid var(--border-subtle);
+    text-align: center;
+    height: 100%;
+    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
+}
+
+.tech-card:hover {
+    transform: translateY(-5px);
+    box-shadow: var(--shadow-soft);
+    border-color: var(--color-secondary);
+}
+
+.tech-icon-wrapper {
+    width: 64px;
+    height: 64px;
+    border-radius: 50%;
+    background-color: var(--bg-section-alt);
+    color: var(--color-primary);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 1.25rem;
+    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.tech-card:hover .tech-icon-wrapper {
+    background-color: var(--color-primary);
+    color: white;
+    transform: scale(1.1) rotate(5deg);
+}
+
+.tech-name {
+    font-weight: 700;
+    font-size: 1.1rem;
+    margin-bottom: 0.5rem;
+    color: var(--text-body);
+}
+
+.tech-desc {
+    font-size: 0.9rem;
+    opacity: 0.8;
+    margin: 0;
+    line-height: 1.4;
+}
+
 /* Animations */
 @keyframes fade-in-up {
     from {