MicrosoftStudentChapter · voshubh6421-afk · Nov 17, 2025
diff --git a/submissions/# Portfolio Project.md b/submissions/# Portfolio Project.md
@@ -0,0 +1,38 @@
+# Portfolio Project
+
+This is a simple portfolio webpage created using **HTML**, **CSS**, and **JavaScript**.
+
+## Features
+- Displays your **name** and **tagline**
+- Includes an **About Me** section
+- Has contact information (Email)
+- Styled with custom CSS for fonts, colors, and layout
+- Three buttons that **change the background color** using JavaScript
+
+## Files Included
+### 1. `index.html`
+Contains the main structure of your portfolio webpage.
+
+### 2. `style.css`
+Contains styling for:
+- Layout
+- Fonts
+- Colors
+- Buttons
+
+### 3. `script.js`
+Contains JavaScript function:
+- `changeColor(color)` – changes the background color of the webpage
+
+## How to Use
+1. Place all files in the same folder:
+```
+/portfolio
+   ├── index.html
+   ├── style.css
+   └── script.js
+```
+2. Open **index.html** in your browser.
+
+## Contact
+Email: **voshubh.6421@gmail.com**
diff --git a/submissions/index.html b/submissions/index.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Voshubh Portfolio</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+            text-align: center;
+            background-color: #f4f4f4;
+        }
+        header {
+            padding: 40px;
+            background: #222;
+            color: white;
+        }
+        section {
+            padding: 20px;
+        }
+        a {
+            color: blue;
+            text-decoration: none;
+            font-weight: bold;
+        }
+        button {
+            margin: 10px;
+            padding: 10px 20px;
+            font-size: 16px;
+            cursor: pointer;
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <h1>Voshubh</h1>
+        <p>Web Developer | Learner | Creator</p>
+    </header>
+
+    <section>
+        <h2>About Me</h2>
+        <p>Hello! I am Voshubh, a passionate learner exploring web development. This is my simple portfolio page created using HTML, CSS, and JavaScript.</p>
+
+        <h3>Contact</h3>
+        <p>Email: <a href="mailto:voshubh.6421@gmail.com">voshubh.6421@gmail.com</a></p>
+    </section>
+
+    <section>
+        <h2>Change Background Color</h2>
+        <button onclick="changeColor('lightblue')">Light Blue</button>
+        <button onclick="changeColor('lightgreen')">Light Green</button>
+        <button onclick="changeColor('lightyellow')">Light Yellow</button>
+    </section>
+
+    <script>
+        function changeColor(color) {
+            document.body.style.backgroundColor = color;
+        }
+    </script>
+</body>
+</html>
diff --git a/submissions/script.js b/submissions/script.js
@@ -0,0 +1,36 @@
+// ---------------------------
+// Background Color Changer
+// ---------------------------
+function changeBackground(color) {
+    document.body.style.backgroundColor = color;
+}
+
+// ---------------------------
+// Smooth Scrolling to Sections
+// ---------------------------
+document.querySelectorAll('a[href^="#"]').forEach(link => {
+    link.addEventListener('click', function (e) {
+        e.preventDefault();
+        document.querySelector(this.getAttribute('href')).scrollIntoView({
+            behavior: "smooth"
+        });
+    });
+});
+
+// ---------------------------
+// Dynamic Greeting
+// ---------------------------
+function showGreeting() {
+    const greeting = document.getElementById("greeting");
+    const hour = new Date().getHours();
+
+    if (hour < 12) {
+        greeting.innerText = "Good Morning 🌅";
+    } else if (hour < 18) {
+        greeting.innerText = "Good Afternoon ☀️";
+    } else {
+        greeting.innerText = "Good Evening 🌙";
+    }
+}
+
+showGreeting();
diff --git a/submissions/style.css b/submissions/style.css
@@ -0,0 +1,35 @@
+/* ===== style.css ===== */
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    text-align: center;
+    background-color: #f4f4f4;
+}
+header {
+    padding: 40px;
+    background: #222;
+    color: white;
+}
+section {
+    padding: 20px;
+}
+a {
+    color: blue;
+    text-decoration: none;
+    font-weight: bold;
+}
+button {
+    margin: 10px;
+    padding: 10px 20px;
+    font-size: 16px;
+    cursor: pointer;
+}
+
+/* ===== script.js (Below) ===== */
+/* Copy this part into a separate script.js file */
+/*
+function changeColor(color) {
+    document.body.style.backgroundColor = color;
+}
+*/