MicrosoftStudentChapter · Anurag12shukla · Nov 22, 2025 · Nov 22, 2025 · Nov 22, 2025
diff --git a/.github/workflows/jekyll-gh-pages.yml b/.github/workflows/jekyll-gh-pages.yml
@@ -0,0 +1,51 @@
+# Sample workflow for building and deploying a Jekyll site to GitHub Pages
+name: Deploy Jekyll with GitHub Pages dependencies preinstalled
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["main"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+      - name: Build with Jekyll
+        uses: actions/jekyll-build-pages@v1
+        with:
+          source: ./
+          destination: ./_site
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
diff --git a/Anurag12shukla/README.md b/Anurag12shukla/README.md
@@ -0,0 +1,25 @@
+# Anurag Shukla — Workshop Portfolio
+
+This folder contains my submission for the Microsoft Student Chapter Version Control & Web Dev workshop.
+
+## What's Inside
+
+- `index.html` — a single-page portfolio with my name, tagline, about section, and contact links.
+- `style.css` — global styling for typography, layout, and responsive tweaks.
+- `script.js` — three interactive buttons that toggle between Daylight, Sunset, and Midnight color schemes and a small footer update.
+
+## How It Works
+
+1. Open `index.html` in any modern browser.
+2. Use the theme buttons to switch background colors on the fly.
+3. Review the about section and contact links to learn more about me.
+
+## Workshop Checklist
+
+- [x] Name and tagline
+- [x] About section and optional links
+- [x] CSS for fonts, colors, and spacing
+- [x] Three JavaScript buttons to change the background color
+- [x] README explaining the submission
+
+Thanks for reviewing my work!
diff --git a/Anurag12shukla/index.html b/Anurag12shukla/index.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Anurag Shukla | Portfolio</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <header class="hero">
+      <div>
+        <p class="eyebrow">Hello, I am</p>
+        <h1>Anurag Shukla</h1>
+        <p class="tagline">Building thoughtful experiences for the web.</p>
+      </div>
+      <div class="actions">
+        <button data-theme="daylight">Daylight</button>
+        <button data-theme="sunset">Sunset</button>
+        <button data-theme="midnight">Midnight</button>
+      </div>
+    </header>
+
+    <main>
+      <section class="about" id="about">
+        <h2>About Me</h2>
+        <p>
+          I am a curious web developer who enjoys crafting clean, accessible
+          interfaces. I focus on responsive layouts, purposeful typography, and
+          micro-interactions that make the web feel personable.
+        </p>
+      </section>
+
+      <section class="links" aria-label="Contact Links">
+        <h2>Get in Touch</h2>
+        <ul>
+          <li>
+            <a href="mailto:anuragshukla.vivo@gmail.com">anuragshukla.vivo@gmail.com</a>
+          </li>
+          <li>
+            <a href="https://www.linkedin.com/in/anurag-shukla-7065a6384" target="_blank" rel="noreferrer"
+              >LinkedIn</a
+            >
+          </li>
+        </ul>
+      </section>
+    </main>
+
+    <footer>
+      <p>© <span id="year"></span> Anurag Shukla · Version Control & Web Dev Workshop</p>
+    </footer>
+
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/Anurag12shukla/script.js b/Anurag12shukla/script.js
@@ -0,0 +1,48 @@
+const themes = {
+  daylight: {
+    bg: '#f8fafc',
+    text: '#0f172a',
+    accent: '#2563eb'
+  },
+  sunset: {
+    bg: '#fff1f2',
+    text: '#4c0519',
+    accent: '#db2777'
+  },
+  midnight: {
+    bg: '#020617',
+    text: '#e0e7ff',
+    accent: '#38bdf8'
+  }
+};
+
+function applyTheme(themeKey) {
+  const theme = themes[themeKey];
+  if (!theme) return;
+
+  document.documentElement.style.setProperty('--bg', theme.bg);
+  document.documentElement.style.setProperty('--text', theme.text);
+  document.documentElement.style.setProperty('--accent', theme.accent);
+}
+
+function registerThemeButtons() {
+  const buttons = document.querySelectorAll('button[data-theme]');
+  buttons.forEach((button) => {
+    button.addEventListener('click', () => {
+      const key = button.getAttribute('data-theme');
+      applyTheme(key);
+    });
+  });
+}
+
+function setYear() {
+  const footerYear = document.getElementById('year');
+  if (footerYear) {
+    footerYear.textContent = new Date().getFullYear();
+  }
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  registerThemeButtons();
+  setYear();
+});
diff --git a/Anurag12shukla/style.css b/Anurag12shukla/style.css
@@ -0,0 +1,122 @@
+:root {
+  color-scheme: light dark;
+  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
+  --text: #0f172a;
+  --muted: #475569;
+  --bg: #f8fafc;
+  --card: #ffffff;
+  --accent: #2563eb;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  font-family: var(--font-body);
+  background-color: var(--bg);
+  color: var(--text);
+  line-height: 1.6;
+  display: flex;
+  flex-direction: column;
+}
+
+main {
+  width: min(900px, 90vw);
+  margin: 0 auto;
+  flex: 1;
+}
+
+.hero {
+  width: min(900px, 90vw);
+  margin: 0 auto;
+  padding: 4rem 0 2rem;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1.5rem;
+}
+
+.eyebrow {
+  letter-spacing: 0.3em;
+  text-transform: uppercase;
+  font-size: 0.75rem;
+  margin-bottom: 0.2rem;
+  color: var(--muted);
+}
+
+.hero h1 {
+  font-size: clamp(2.5rem, 5vw, 3.5rem);
+  margin: 0;
+}
+
+.tagline {
+  font-size: 1.2rem;
+  color: var(--muted);
+  margin-top: 0.3rem;
+}
+
+.actions {
+  display: flex;
+  gap: 0.75rem;
+}
+
+button {
+  border: none;
+  border-radius: 999px;
+  padding: 0.7rem 1.5rem;
+  font-size: 1rem;
+  cursor: pointer;
+  background-color: var(--accent);
+  color: #fff;
+  transition: transform 200ms ease, background 200ms ease;
+}
+
+button:hover {
+  transform: translateY(-2px);
+  background-color: #1d4ed8;
+}
+
+section {
+  padding: 2rem 0;
+}
+
+.about p {
+  margin-top: 0.8rem;
+  font-size: 1.05rem;
+}
+
+.links ul {
+  list-style: none;
+  padding: 0;
+  margin-top: 0.8rem;
+  display: flex;
+  gap: 1.5rem;
+}
+
+.links a {
+  color: var(--accent);
+  text-decoration: none;
+  font-weight: 600;
+}
+
+.links a:hover {
+  text-decoration: underline;
+}
+
+footer {
+  text-align: center;
+  padding: 2rem 0 3rem;
+  color: var(--muted);
+}
+
+@media (max-width: 640px) {
+  .actions {
+    width: 100%;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+  }
+}