MicrosoftStudentChapter · MG07-stack · Nov 5, 2025 · Nov 5, 2025 · Nov 5, 2025 · Nov 5, 2025
diff --git a/submissions/MG07-stack/README.md b/submissions/MG07-stack/README.md
@@ -0,0 +1,26 @@
+Hi! 👋 I'm **Manaswi Goyal**, and this is my first ever web project.  
+It's a simple interactive portfolio page I built while learning HTML, CSS, and JavaScript — with help from ChatGPT (for generating, understanding, and improving code).
+
+---
+
+## 🌐 Overview
+
+This project is a **personal portfolio webpage** that includes:
+- My name and a short tagline.
+- A **link to my LinkedIn profile**.
+- A **dynamic background color system** that changes when you click different buttons.
+- An **"About Me"** section that appears when you click the hexagon-shaped "About Me" button, with a back arrow to return.
+
+Even though it looks simple, I’ve been experimenting with concepts like:
+- `clip-path` shapes (for the hexagonal button),
+- gradients and transitions in CSS,
+- DOM manipulation in JavaScript,
+- and a general understanding of how all three files (HTML, CSS, JS) work together.
+
+---
+
+## 🧭 How to Use
+
+### 🔗 Access my LinkedIn
+On the home page, click my **name** (“Manaswi Goyal”).  
+It’s a hyperlink that opens my LinkedIn profile in a new tab
diff --git a/submissions/MG07-stack/index.html b/submissions/MG07-stack/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>My Portfolio</title>
+        <link rel="stylesheet" href="style.css" />
+    </head>
+    <body>
+
+        <div class="top-box">My Portfolio</div>
+        <div class="container">
+              <div id="home-view">
+            <h1 id="name"><a href="https://www.linkedin.com/in/manaswi-goyal-45844337a/" class="link" target="_blank">Manaswi Goyal</a></h1>
+                    <button class="about-btn" onclick="showAbout()">About Me</button>
+            <p class="tagline">Expert at pressing buttons I shouldn't.</p>
+            <div class="buttons">
+                <button onclick="changeBackground('#f5f984ff')">Calm Yellow</button>
+                 <button onclick="changeBackground('#00b894')">Soothing Green</button>
+                 <button onclick="changeBackground('#7777ff')">Relaxing Blue</button>
+            </div>
+        </div>
+          <div id="about-view" style="display: none;">
+        <div class="back-arrow" onclick="goBack()">←</div>
+        <h2>About Me</h2>
+        <p>
+Hi, I’m <strong>Manaswi Goyal</strong> — a curious learner who loves exploring new ideas in technology and mathematics. I enjoy blending logic and creativity to understand how things work beneath the surface. I’m currently exploring the fields of cybersecurity. <br>
+I also love helping others with tech-related problems — whether it’s suggesting the right laptop, troubleshooting hardware or software issues, or just figuring out why something broke. If it involves tech, I’m always up for the challenge!
+        </p>
+      </div>
+    </div>
+        <script src="script.js"></script>
+    </body>
+</html> 
diff --git a/submissions/MG07-stack/script.js b/submissions/MG07-stack/script.js
@@ -0,0 +1,33 @@
+document.addEventListener("DOMContentLoaded", () => {
+  const aboutBtn = document.querySelector(".about-btn");
+  aboutBtn.style.background = "linear-gradient(90deg, #6a11cb, #2575fc)";
+});
+function changeBackground(color) {
+  document.body.style.backgroundColor = color;
+
+  const aboutBtn = document.querySelector(".about-btn");
+
+  switch (color) {
+    case "#f5f984ff": 
+      aboutBtn.style.background = "linear-gradient(90deg, #f9d423, #ff4e50)";
+      break;
+    case "#00b894":
+      aboutBtn.style.background = "linear-gradient(90deg, #2ed867ff, #13dfbaff)";
+      break;
+    case "#7777ff":
+      aboutBtn.style.background = "linear-gradient(90deg, #6a11cb, #2575fc)";
+      break;
+    default:
+      aboutBtn.style.background = "linear-gradient(90deg, #6a11cb, #2575fc)";
+  }
+
+}
+function showAbout() {
+  document.getElementById('home-view').style.display = 'none';
+  document.getElementById('about-view').style.display = 'block';
+}
+
+function goBack() {
+  document.getElementById('about-view').style.display = 'none';
+  document.getElementById('home-view').style.display = 'block';
+}
diff --git a/submissions/MG07-stack/style.css b/submissions/MG07-stack/style.css
@@ -0,0 +1,136 @@
+body {
+  margin: 0;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  background-color: #7777ff;
+  color: #333;
+  text-align: center;
+  transition: background-color 0.5s;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.top-box {
+  background: linear-gradient(90deg, #ffaefc, #f953ff);
+  color: rgb(0, 0, 0);
+  padding: 1.2rem 3rem;
+  font-size: 40px;
+  font-weight: bold;  
+  display: flex;
+  justify-content: center; 
+  align-items: center;    
+  height: 200px;      
+  font-family: Montserrat;
+  text-align: center;
+  border-radius: 50px;
+  width: 15rem;
+  height: 4rem;
+  margin: 2rem auto;
+  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25);
+  letter-spacing: 1px;
+}
+
+.container {
+    max-width: 600px;
+    padding: 2.1rem;
+    background: linear-gradient(0deg, #ffffff, #727374);
+    border-radius: 15px;
+    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
+    margin-top: 6rem;
+}
+h1 {
+  font-size: 2.5rem;
+  margin-bottom: 0.3rem;}
+
+  .link {
+  color: inherit; 
+  text-decoration: none;
+}
+
+.link:hover {
+  text-decoration: underline; 
+}
+
+.link:visited {
+  color: #333;           
+}
+  .tagline {
+  font-size: 1.2rem;
+  color: #666;
+  margin-bottom: 2rem;}
+
+  button {
+  background: #333;
+  color: white;
+  border: none;
+  padding: 0.7rem 1.2rem;
+  margin: 0.5rem;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background 0.3s ease;
+}
+
+  button:hover {
+  background: #555;
+}
+.about-btn {
+  display: inline-block;
+  background: linear-gradient(135deg, #6a11cb, #2575fc);
+  color: white;
+  font-size: 1.2rem;
+  font-weight: 600;
+  border: none;
+  font-family: Montserrat;
+  padding: 1rem 3rem;
+  margin: 1.5rem auto;
+  cursor: pointer;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  transition: all 0.3s ease, transform 0.2s ease;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
+  clip-path: polygon(
+    10% 0%,
+    90% 0%,  
+    100% 25%,
+    100% 75%,
+    90% 100%, 
+    10% 100%, 
+    0% 75%,  
+    0% 25%  
+  );
+}
+
+.about-btn:hover {
+ font-size: 1.4rem;
+ filter: brightness(1.1);
+}
+
+
+.back-arrow {
+  font-size: 2.5rem;
+  color: #333;
+  cursor: pointer;
+  text-align: left;
+  margin-bottom: 0rem;
+  transition: transform 0.2s ease;
+}
+
+.back-arrow:hover {
+  transform: translateX(-4px)
+}
+
+#about-view h2 {
+  margin-bottom: 1.4rem;
+  margin-top: -1rem;
+  font-family:Montserrat ;
+}
+
+#about-view p {
+  font-size: 1.1rem;
+  line-height: 1.6;
+  color: #444;
+}
+
+h2 {
+  font-size: 2.5rem;
+  margin-bottom: 0.3rem;}
diff --git a/submissions/README.md b/submissions/README.md