diff --git a/submissions/# Portfolio Project.md b/submissions/# Portfolio Project.md new file mode 100644 index 0000000..344803f --- /dev/null +++ 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 new file mode 100644 index 0000000..6b6a813 --- /dev/null +++ b/submissions/index.html @@ -0,0 +1,63 @@ + + + + + + Voshubh Portfolio + + + +
+

Voshubh

+

Web Developer | Learner | Creator

+
+ +
+

About Me

+

Hello! I am Voshubh, a passionate learner exploring web development. This is my simple portfolio page created using HTML, CSS, and JavaScript.

+ +

Contact

+

Email: voshubh.6421@gmail.com

+
+ +
+

Change Background Color

+ + + +
+ + + + diff --git a/submissions/script.js b/submissions/script.js new file mode 100644 index 0000000..10c3972 --- /dev/null +++ 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 new file mode 100644 index 0000000..caea665 --- /dev/null +++ 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; +} +*/