removed about me and added experience cards

ulteridon · Jan 12, 2025 · 227824d · 227824d
1 parent b75a7e4
commit 227824d
Show file tree

Hide file tree

Showing 3 changed files with 117 additions and 19 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -111,16 +111,69 @@ nav a:hover {
 }
 
 .hero {
-    height: 100vh;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 4rem;
+    gap: 4rem;
+}
+
+.hero-content {
+    flex: 1;
     display: flex;
     flex-direction: column;
-    justify-content: center;
-    align-items: flex-start;
+    gap: 2rem;
+}
+
+.role-title {
+    font-size: 3.5rem;
+    font-weight: 700;
+    color: var(--primary-color);
+    line-height: 1.2;
+    margin-bottom: 2rem;
+}
+
+.stats-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 1.5rem;
+}
+
+.stat-card {
+    background: white;
+    border-radius: 15px;
+    padding: 1.5rem;
     text-align: center;
-    padding: 0 1rem;
-    background: var(--bg-color);
+    box-shadow: var(--card-shadow);
+    transition: transform 0.3s ease;
 }
 
+.stat-card:hover {
+    transform: translateY(-5px);
+}
+
+.stat-number {
+    font-size: 2.5rem;
+    font-weight: 700;
+    color: var(--accent-color);
+    margin-bottom: 0.5rem;
+}
+
+.stat-label {
+    font-size: 1rem;
+    color: var(--text-color);
+    line-height: 1.4;
+}
+
+[data-theme="dark"] .stat-card {
+    background: var(--dark-card-bg);
+}
+
+[data-theme="dark"] .stat-label {
+    color: var(--dark-text);
+}
+
+
 .profile-img {
     width: 300px;
     height: 300px;
@@ -405,13 +458,27 @@ section {
     background-position: 0 88%;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 1024px) {
     nav {
         top: auto;
         bottom: 2rem;
         right: 50%;
         transform: translateX(50%);
     }
+
+    .hero {
+        flex-direction: column;
+        padding: 2rem;
+        text-align: center;
+    }
+
+    .role-title {
+        font-size: 2.5rem;
+    }
+
+    .stats-grid {
+        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    }
 
     .hero h1 {
         font-size: 2.5rem;

diff --git a/index.html b/index.html
@@ -24,7 +24,6 @@ <h2 class="card-name">Akash Sinha</h2>
             <div class="card-social-links">
                 <a href="https://github.com/ulteridon" target="_blank" title="GitHub">
                     <i class="fab fa-github"></i>
-
                 </a>
                 <a href="https://www.linkedin.com/in/akash-sinha-63234819b/" target="_blank" title="LinkedIn">
                     <i class="fab fa-linkedin"></i>
@@ -34,18 +33,23 @@ <h2 class="card-name">Akash Sinha</h2>
                 </a>
             </div>
         </div>
-    </section>
-
-    <section id="about" class="about">
-        <h2 class="section-title">About Me</h2>
-        <div class="about-content">
-            <p>Hey there! I'm a Technical Lead who's found my sweet spot in the world of mobile game development. Over the past two years, I've been crafting experiences that don't just entertain – they perform exceptionally well. I take pride in having helped achieve over 269,000 downloads while keeping our games running smoothly at 60 FPS, even on older devices.</p>
-
-            <p>What really drives me is the challenge of optimization. I get a particular thrill from making games more efficient – like when I managed to slash our build sizes by 74%. Working with tools like Cocos Creator and Unity, I've learned that great gaming experiences come from the perfect balance of performance and creativity.</p>
-
-            <p>Leading teams has taught me that magic happens when technical excellence meets creative collaboration. Whether I'm working with artists to integrate assets or delegating tasks to meet tight deadlines, I believe in bringing out the best in every team member.</p>
-
-            <p>Beyond games, I've had the chance to work on some fascinating projects. I've built a Ground Station project for nano-satellite reception and developed an Air Canvas application that lets users interact without touch – just using hand gestures. These diverse experiences have shown me that technology's real power lies in creating meaningful connections and experiences.</p>
+
+        <div class="hero-content">
+            <h1 class="role-title">Technical Developer/<br>Game Developer</h1>
+            <div class="stats-grid">
+                <div class="stat-card">
+                    <div class="stat-number">2+</div>
+                    <div class="stat-label">Years of Experience</div>
+                </div>
+                <div class="stat-card">
+                    <div class="stat-number">4+</div>
+                    <div class="stat-label">Shipped Projects</div>
+                </div>
+                <div class="stat-card">
+                    <div class="stat-number">300k+</div>
+                    <div class="stat-label">Users Engaged</div>
+                </div>
+            </div>
         </div>
     </section>
 

diff --git a/js/main.js b/js/main.js
@@ -27,4 +27,31 @@ document.querySelectorAll('nav a').forEach(anchor => {
         const section = document.querySelector(this.getAttribute('href'));
         section.scrollIntoView({ behavior: 'smooth' });
     });
+});
+
+const statsObserver = new IntersectionObserver((entries) => {
+    entries.forEach(entry => {
+        if (entry.isIntersecting) {
+            entry.target.classList.add('animate-stat');
+            statsObserver.unobserve(entry.target);
+        }
+    });
+}, {
+    threshold: 0.5
+});
+
+// Observe all stat cards
+document.querySelectorAll('.stat-card').forEach(card => {
+    statsObserver.observe(card);
+});
+
+// Add hover effect to stat cards
+document.querySelectorAll('.stat-card').forEach(card => {
+    card.addEventListener('mouseenter', () => {
+        card.style.transform = 'translateY(-10px)';
+    });
+
+    card.addEventListener('mouseleave', () => {
+        card.style.transform = 'translateY(0)';
+    });
 });