CodeMacrocosm · shreyamalogi · Oct 19, 2025 · Oct 16, 2025
diff --git a/readme files/resources.md b/readme files/resources.md
@@ -130,4 +130,6 @@ I [Prachi Vaishnav](https://github.com/vaishnavprachi98) would like to recommend
 
 I [Areen](https://github.com/Areen161) would like to recommend [Sololearn](https://www.sololearn.com/)
 
-I [Muteeb](https://github.com/Muteeb489) would like to recommend [Meta](https://www.coursera.org/professional-certificates/meta-front-end-developer?utm_medium=sem&utm_source=gg&utm_campaign=b2c_apac_meta-front-end-developer_meta_ftcof_professional-certificates_cx_dr_bau_gg_pmax_pr_s2-v2_en_m_hyb_25-08_x&campaignid=22913750309&adgroupid=&device=c&keyword=&matchtype=&network=x&devicemodel=&creativeid=&assetgroupid=6603183056&targetid=&extensionid=&placement=&gad_source=1&gad_campaignid=22913754413&gbraid=0AAAAADdKX6bultO1bjGu4nTeIzAF97mdY&gclid=CjwKCAjw6P3GBhBVEiwAJPjmLhCIA0JKc3aJB1sb1d8-e8M9eXYktBnoau5yDkjbiz1S1VmST7sHCBoCBP8QAvD_BwE)
+I [Muteeb](https://github.com/Muteeb489) would like to recommend [Meta](https://www.coursera.org/professional-certificates/meta-front-end-developer?utm_medium=sem&utm_source=gg&utm_campaign=b2c_apac_meta-front-end-developer_meta_ftcof_professional-certificates_cx_dr_bau_gg_pmax_pr_s2-v2_en_m_hyb_25-08_x&campaignid=22913750309&adgroupid=&device=c&keyword=&matchtype=&network=x&devicemodel=&creativeid=&assetgroupid=6603183056&targetid=&extensionid=&placement=&gad_source=1&gad_campaignid=22913754413&gbraid=0AAAAADdKX6bultO1bjGu4nTeIzAF97mdY&gclid=CjwKCAjw6P3GBhBVEiwAJPjmLhCIA0JKc3aJB1sb1d8-e8M9eXYktBnoau5yDkjbiz1S1VmST7sHCBoCBP8QAvD_BwE)
+
+I [Himanshu Sharma](https://github.com/Himma08) recommend [w33schools](https://www.w3schools.com/)
diff --git a/readme files/suggestions.md b/readme files/suggestions.md
@@ -54,4 +54,6 @@ I [Harpreet Madaan] (https://github.com/harpreet199) I would like to suggest for
 I [Prateek](https://github.com/Ocoderdude) suggest you to not memorizing the solutions to the competetive problems, instead understand the logic or the pattern used in the problem. Try to make your code optimised always with good space and time complexity.
 
 I [Muteeb](https://github.com/Muteeb489) would like to suggest you to pick up a project
-and try to start coding it. Tutorials are nice and all but to make exponential progress you need hands on practice at some point. So use building projects as your learning model instead of getting stuck in tutorial hell.
+and try to start coding it. Tutorials are nice and all but to make exponential progress you need hands on practice at some point. So use building projects as your learning model instead of getting stuck in tutorial hell.
+
+I [Himanshu Sharma](https://github.com/Himma08) suggests you to never stop learning.
diff --git a/web/Images/Himanshu.JPG b/web/Images/Himanshu.JPG
diff --git a/web/pages/Himanshu.html b/web/pages/Himanshu.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Profile Card</title>
+
+  <!-- Google Font -->
+  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
+
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
+
+  <!-- Styles -->
+  <link rel="stylesheet" href="/Web-a-Thon/web/stylesheet/Himanshu.css">
+</head>
+
+<body>
+  <main class="wrapper">
+    <div class="profile-card">
+      <div class="highlight"></div>
+      <div class="inner">
+        <div class="avatar">
+          <img src="/Web-a-Thon/web/images/Himanshu.JPG" alt="Profile photo">
+        </div>
+        <h2 class="name">Himanshu Sharma</h2>
+        <h4 class="role">Frontend Engineer</h4>
+
+        <ul class="tech-list">
+          <li>Next.js</li>
+          <li>Tailwind</li>
+          <li>Node.js</li>
+          <li>MongoDB</li>
+          <li>TypeScript</li>
+        </ul>
+
+        <div class="socials">
+          <a href="https://github.com/Himma08"><i class="fa-brands fa-github"></i></a>
+          <a href="https://www.linkedin.com/in/himanshu-sharma-574977365/"><i class="fa-brands fa-linkedin"></i></a>
+          <a href="#"><i class="fa-brands fa-x-twitter"></i></a>
+          <a href="#"><i class="fa-solid fa-envelope"></i></a>
+        </div>
+      </div>
+    </div>
+  </main>
+
+  <script src="/Web-a-Thon/web/scripts/Himanshu.js"></script>
+</body>
+</html>
diff --git a/web/scripts/Himanshu.js b/web/scripts/Himanshu.js
@@ -0,0 +1,36 @@
+document.addEventListener('DOMContentLoaded', () => {
+  const wrapper = document.querySelector('.wrapper');
+  const card = document.querySelector('.profile-card');
+  const glow = document.querySelector('.highlight');
+
+  const MAX_TILT = 18; // degrees
+
+  function getTilt(event, element) {
+    const rect = element.getBoundingClientRect();
+    const x = event.clientX - rect.left;
+    const y = event.clientY - rect.top;
+    const midX = rect.width / 2;
+    const midY = rect.height / 2;
+
+    const rotY = ((x - midX) / midX) * MAX_TILT;
+    const rotX = -((y - midY) / midY) * MAX_TILT;
+
+    return { rotX, rotY };
+  }
+
+  wrapper.addEventListener('mousemove', (e) => {
+    const { rotX, rotY } = getTilt(e, card);
+    card.style.transform = `rotateX(${rotX}deg) rotateY(${rotY}deg)`;
+
+    // move glow center
+    const rect = card.getBoundingClientRect();
+    const gx = ((e.clientX - rect.left) / rect.width) * 100;
+    const gy = ((e.clientY - rect.top) / rect.height) * 100;
+    glow.style.left = `${gx}%`;
+    glow.style.top = `${gy}%`;
+  });
+
+  wrapper.addEventListener('mouseleave', () => {
+    card.style.transform = 'rotateX(0deg) rotateY(0deg)';
+  });
+});
diff --git a/web/stylesheet/Himanshu.css b/web/stylesheet/Himanshu.css
@@ -0,0 +1,143 @@
+:root {
+  --bg: #0c0e17;
+  --card-bg: rgba(255, 255, 255, 0.08);
+  --card-border: rgba(255, 255, 255, 0.25);
+  --text-main: #f8f8f8;
+  --accent:#0c0e17;
+  --font: 'Poppins', sans-serif;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  min-height: 100vh;
+  font-family: var(--font);
+  display: grid;
+  place-items: center;
+  background: var(--bg);
+  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.05) 1px, transparent 0);
+  background-size: 22px 22px;
+  color: var(--text-main);
+}
+
+.wrapper {
+  perspective: 1200px;
+}
+
+/* --- Card --- */
+.profile-card {
+  width: 360px;
+  height: 500px;
+  padding: 2.2rem;
+  background: var(--card-bg);
+  background-color: #39539c;
+  border: 1px solid var(--card-border);
+  border-radius: 20px;
+  backdrop-filter: blur(18px);
+  -webkit-backdrop-filter: blur(18px);
+  position: relative;
+  transition: transform 0.4s ease;
+  transform-style: preserve-3d;
+  box-shadow: 0 18px 40px rgba(0,0,0,0.35);
+}
+
+.inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.3rem;
+  transform: translateZ(40px);
+}
+
+/* --- Highlight Glow --- */
+.highlight {
+  position: absolute;
+  width: 240px;
+  height: 240px;
+  background: radial-gradient(circle, var(--accent) 0%, transparent 65%);
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  filter: blur(70px);
+  opacity: 0;
+  border-radius: 50%;
+  pointer-events: none;
+  transition: opacity 0.4s ease;
+}
+
+/* --- Avatar --- */
+.avatar {
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
+  overflow: hidden;
+  border: 3px solid var(--card-border);
+  box-shadow: 0 0 25px rgba(0,0,0,0.5);
+  animation: scaleIn 0.7s ease forwards;
+}
+
+.avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* --- Text --- */
+.name {
+  font-size: 1.8rem;
+  font-weight: 600;
+  letter-spacing: 0.4px;
+}
+
+.role {
+  font-weight: 300;
+  color: rgba(255,255,255,0.7);
+}
+
+/* --- Tech List --- */
+.tech-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  justify-content: center;
+  list-style: none;
+}
+
+.tech-list li {
+  padding: 0.4rem 0.9rem;
+  font-size: 0.85rem;
+  border-radius: 12px;
+  background: rgba(255,255,255,0.08);
+}
+
+/* --- Socials --- */
+.socials {
+  display: flex;
+  gap: 1.4rem;
+  font-size: 1.5rem;
+}
+
+.socials a {
+  color: var(--text-main);
+  transition: color 0.3s ease, transform 0.3s ease;
+}
+
+.socials a:hover {
+  color: var(--accent);
+  transform: translateY(-4px) scale(1.15);
+}
+
+/* --- Animations --- */
+@keyframes scaleIn {
+  from { transform: scale(0.8); opacity: 0; }
+  to { transform: scale(1); opacity: 1; }
+}
+
+/* Hover Glow */
+.wrapper:hover .highlight {
+  opacity: 0.22;
+}