gotechnica · mithrasankar · Jul 24, 2022 · Aug 7, 2022 · Aug 7, 2022 · Aug 7, 2022
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "pwa-chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:8080",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}
diff --git a/home.html b/home.html
@@ -0,0 +1,176 @@
+
+<!DOCTYPE html>
+<html lang = "en-US">
+<head>
+    <link rel="stylesheet" href= "styles.css"/>
+    <script src="script.js"></script>
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
+      <meta charset="utf-8" />
+      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+      <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+
+      <title>
+          mithra's photos
+      </title>
+
+      <div id= "header">
+      <h1 class="title">
+        mithra sankar
+    </h1>
+
+    <div class="nav">
+        <nav>
+          <ul>
+            <li><a href="home.html"> home</a></li>
+            <li><a href="index.html"> about me</a></li>
+          </ul>
+        </nav>
+      </div>
+      </div>
+
+
+    </head>
+    <body>
+        <div class="homeTitle">
+        <h1> gallery </h1>
+        <h2> some of my photos ---</h2>
+    </div>
+
+
+<div class="row"> 
+    <div class="column">
+      <img src="images/indiaGate.jpg" onclick="openLightbox();toSlide(1)" class="hover-shadow preview">
+      <img src="images/reflection.jpg" onclick="openLightbox();toSlide(5)" class="hover-shadow preview" >
+      <img src="images/prayag.jpg" onclick="openLightbox();toSlide(9)" class="hover-shadow preview">
+      <img src="images/rocksOnRocks.jpg" onclick="openLightbox();toSlide(13)" class="hover-shadow preview">
+      <img src="images/insideTrain.jpg" onclick="openLightbox();toSlide(17)" class="hover-shadow preview">
+      <img src="images/soloTree.jpg" onclick="openLightbox();toSlide(21)" class="hover-shadow preview">
+      <img src="images/anotherSeason.jpg" onclick="openLightbox();toSlide(25)" class="hover-shadow preview">
+    </div>
+    <div class="column">
+      <img src="images/blueberries.jpg"  onclick="openLightbox();toSlide(2)" class="hover-shadow preview">
+      <img src="images/myWorld.jpg" onclick="openLightbox();toSlide(6)" class="hover-shadow preview">
+      <img src="images/greyscaleMahal.jpg" onclick="openLightbox();toSlide(10)" class="hover-shadow preview">
+      <img src="images/islandsFar.jpg" onclick="openLightbox();toSlide(14)" class="hover-shadow preview">
+      <img src="images/reservoir.jpg" onclick="openLightbox();toSlide(18)" class="hover-shadow preview">
+      <img src="images/theGates.jpg" onclick="openLightbox();toSlide(22)" class="hover-shadow preview">
+      <img src="images/firework.JPG" onclick="openLightbox();toSlide(26)" class="hover-shadow preview">
+
+    </div> 
+    <div class="column">
+      <img src="images/nyc.jpg"  onclick="openLightbox();toSlide(3)" class="hover-shadow preview">
+      <img src="images/viewFromAfar.jpg" onclick="openLightbox();toSlide(7)" class="hover-shadow preview">
+      <img src="images/philly.jpg" onclick="openLightbox();toSlide(11)" class="hover-shadow preview">
+      <img src="images/hawaMahal.jpg" onclick="openLightbox();toSlide(15)" class="hover-shadow preview">
+      <img src="images/phoneEatsFirst.jpg" onclick="openLightbox();toSlide(19)" class="hover-shadow preview">
+      <img src="images/girl'sSunset.jpg" onclick="openLightbox();toSlide(23)" class="hover-shadow preview">
+      <img src="images/delcastle.JPG" onclick="openLightbox();toSlide(27)" class="hover-shadow preview">
+      <img src="images/islands.jpg" onclick="openLightbox();toSlide(29)" class="hover-shadow preview">
+    </div>
+    <div class="column">
+      <img src="images/tajDistance.JPG"  onclick="openLightbox();toSlide(4)" class="hover-shadow preview">
+      <img src="images/innocence.jpg" onclick="openLightbox();toSlide(8)" class="hover-shadow preview">
+      <img src="images/railroad.jpg" onclick="openLightbox();toSlide(12)" class="hover-shadow preview">
+      <img src="images/threeGirls.jpg" onclick="openLightbox();toSlide(16)" class="hover-shadow preview">
+      <img src="images/theirWindow.jpg" onclick="openLightbox();toSlide(20)" class="hover-shadow preview">
+      <img src="images/ourWindow.jpg" onclick="openLightbox();toSlide(24)" class="hover-shadow preview">
+      <img src="images/contentMan.jpg" onclick="openLightbox();toSlide(28)" class="hover-shadow preview">
+
+    </div>
+  </div>
+  <div id="Lightbox" class="modal">
+
+    <span class="close pointer" onclick="closeLightbox()">&times;</span>
+    <div class="modal-content">
+     <div class="slide">
+      <img src="images/indiaGate.jpg" class="image-slide">
+      </div>
+      <div class="slide">
+        <img src="images/blueberries.jpg" class="image-slide">
+        </div>
+      <div class="slide">
+        <img src="images/nyc.jpg"class="image-slide">
+      </div>
+      <div class="slide">
+        <img src="images/tajDistance.JPG" class="image-slide">
+      </div>
+      <div class="slide">
+        <img src="images/reflection.jpg" class="image-slide">
+      </div>
+      <div class="slide">
+        <img src="images/myWorld.jpg"class="image-slide">
+      </div>
+      <div class="slide">
+        <img src="images/viewFromAfar.jpg"class="image-slide">
+      </div>
+      <div class="slide">
+        <img src="images/innocence.jpg"class="image-slide">
+      </div>
+      <div class="slide">
+        <img src="images/prayag.jpg"class="image-slide">
+      </div>
+      <div class="slide">
+        <img src="images/greyscaleMahal.jpg" class="image-slide">
+      </div> 
+      <div class="slide">
+        <img src="images/philly.jpg"class="image-slide">
+      </div> 
+      <div class="slide">
+        <img src="images/railroad.jpg"class="image-slide">
+      </div>
+      <div class="slide">
+        <img src="images/rocksOnRocks.jpg" class="image-slide">
+      </div>
+      <div class="slide">
+        <img src="images/islandsFar.jpg" class="image-slide">
+      </div>
+      <div class="slide">
+        <img src="images/hawaMahal.jpg"class="image-slide">
+      </div>
+      <div class="slide">
+        <img src="images/threeGirls.jpg" class="image-slide">
+      </div>
+      <div class="slide">
+        <img src="images/insideTrain.jpg"class="image-slide">
+      </div>
+      <div class="slide">
+        <img src="images/reservoir.jpg"class="image-slide">
+      </div>
+      <div class="slide">
+        <img src="images/phoneEatsFirst.jpg"class="image-slide">
+      </div>
+      <div class="slide">
+        <img src="images/theirWindow.jpg" class="image-slide">
+      </div>
+      <div class="slide">
+        <img src="images/soloTree.jpg"class="image-slide">
+      </div>
+      <div class="slide">
+        <img src="images/theGates.jpg"class="image-slide">
+      </div>
+      <div class="slide">
+        <img src="images/girl'sSunset.jpg"class="image-slide">
+      </div>
+      <div class="slide">
+        <img src="images/ourWindow.jpg" class="image-slide">
+      </div>
+      <div class="slide">
+        <img src="images/anotherSeason.jpg"class="image-slide">
+      </div>
+      <div class="slide">
+        <img src="images/firework.JPG"class="image-slide">
+      </div>
+      <div class="slide">
+        <img src="images/delcastle.JPG"class="image-slide">
+      </div>
+      <div class="slide">
+        <img src="images/contentMan.jpg"class="image-slide">
+      </div>
+      <div class="slide">
+        <img src="images/islands.jpg" class="image-slide">
+      </div>
+
+    </div>
+  </div>
+</div>
diff --git a/images/acadiaCliff.jpg b/images/acadiaCliff.jpg
diff --git a/images/anotherSeason.jpg b/images/anotherSeason.jpg
diff --git a/images/blueberries.jpg b/images/blueberries.jpg
diff --git a/images/contentMan.jpg b/images/contentMan.jpg
diff --git a/images/delcastle.JPG b/images/delcastle.JPG
diff --git a/images/firework.JPG b/images/firework.JPG
diff --git a/images/girl'sSunset.jpg b/images/girl'sSunset.jpg
diff --git a/images/girl.jpeg b/images/girl.jpeg
diff --git a/images/greyscaleMahal.jpg b/images/greyscaleMahal.jpg
diff --git a/images/hawaMahal.jpg b/images/hawaMahal.jpg
diff --git a/images/indiaGate.jpg b/images/indiaGate.jpg
diff --git a/images/innocence.jpg b/images/innocence.jpg
diff --git a/images/insideTrain.jpg b/images/insideTrain.jpg
diff --git a/images/islands.jpg b/images/islands.jpg
diff --git a/images/islandsFar.jpg b/images/islandsFar.jpg
diff --git a/images/mithraprofile.jpg b/images/mithraprofile.jpg
diff --git a/images/myWorld.jpg b/images/myWorld.jpg
diff --git a/images/nyc.jpg b/images/nyc.jpg
diff --git a/images/ourWindow.jpg b/images/ourWindow.jpg
diff --git a/images/philly.jpg b/images/philly.jpg
diff --git a/images/phoneEatsFirst.jpg b/images/phoneEatsFirst.jpg
diff --git a/images/prayag.jpg b/images/prayag.jpg
diff --git a/images/railroad.jpg b/images/railroad.jpg
diff --git a/images/reflection.jpg b/images/reflection.jpg
diff --git a/images/reservoir.jpg b/images/reservoir.jpg
diff --git a/images/rocksOnRocks.jpg b/images/rocksOnRocks.jpg
diff --git a/images/soloTree.jpg b/images/soloTree.jpg
diff --git a/images/tajDistance.JPG b/images/tajDistance.JPG
diff --git a/images/tajMahal.JPG b/images/tajMahal.JPG
diff --git a/images/theGates.jpg b/images/theGates.jpg
diff --git a/images/theirWindow.jpg b/images/theirWindow.jpg
diff --git a/images/threeGirls.jpg b/images/threeGirls.jpg
diff --git a/images/throughTrees.jpg b/images/throughTrees.jpg
diff --git a/images/viewFromAfar.jpg b/images/viewFromAfar.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,86 @@
+<html lang = "en-US">
+
+<head>
+<link rel="stylesheet" href= "styles.css"/>
+<script src="script.js"></script>
+<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+
+  <title>
+      mithra sankar
+  </title>
+
+  <div id= "header">
+    <h1 class="title">
+      mithra sankar
+  </h1>
+
+  <div class="nav">
+      <nav>
+        <ul>
+          <li><a href="home.html"> home</a></li>
+          <li><a href="index.html"> about me</a></li>
+        </ul>
+      </nav>
+    </div>
+    </div>
+</head>
+
+<body>
+
+    <div class="flexContainer">
+      <style>
+        img {
+          border-radius: 50%;
+          margin-top: 10px;
+          margin-bottom: 13px;
+          display: block;
+        }
+      </style>
+      <div class="picture">
+        <img
+          src= images/mithraprofile.jpg width="370px"/>
+        <div class = contact >
+          <p>
+          <a href= "https://www.linkedin.com/in/mithrasankar"> <p>more about me --</p> @mithrasankar </a>
+        </p>
+      </div>
+    </div>
+
+
+    <div class="intro">
+        <p>
+            hi! 
+            my name is mithra sankar and I am an incoming honors computer science major at the university of delaware.
+            I enjoy documenting my life and capturing moments and experiences through images. though
+        </p>
+        <p>
+          to learn about me + my experience, refer to "more about me" on the left!
+        </p>
+    </div>
+
+    <div class="footer">
+				<form action="#">
+					<h2>contact me</h2>
+					<label for="email">
+						<h3>your email: </h3>
+						<input type="email" id="email" placeholder="[email protected]" />
+					</label>
+					<label for="message">
+						<h4>your message:</h4>
+						<textarea id="message" placeholder="enter any questions here... "></textarea>
+					</label>
+					<div class="submit-button-wrapper">
+						<input type="submit" value="Send Message" id="submit-button"/>
+					</div>
+				</form>
+		</div>
+
+
+
+</body>
+
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,50 @@
+/*--------contact*/
+
+let submitButton = document. querySelector('#submit-button');
+
+function clickListener (event) {
+event.preventDefault();
+
+let emailInput = document.querySelector ('#email') ;
+let messageInput = document.querySelector ('#message') ;
+
+let emailText = emailInput.value;
+let messageText = messageInput. value;
+
+console.log('email: ', emailText,'message: ', messageText);
+}
+
+submitButton.addEventListener('click', clickListener);
+
+/*--------lightbox*/
+
+var slideIndex = 1;
+showSlide(slideIndex);
+
+function openLightbox() {
+  document.getElementById('Lightbox').style.display = 'block';
+}
+
+function closeLightbox() {
+  document.getElementById('Lightbox').style.display = 'none';
+}
+
+function toSlide(n) {
+	showSlide(slideIndex = n);
+}
+
+function showSlide(n) {
+
+  const slides = document.getElementsByClassName('slide');
+  let modalPreviews = document.getElementsByClassName('modal-preview');
+
+  for (let i = 0; i < slides.length; i++) {
+      slides[i].style.display = "none";
+  }
+  for (let i = 0; i < modalPreviews.length; i++) {
+      modalPreviews[i].className = modalPreviews[i].className.replace(' active', '');
+  }
+
+  slides[slideIndex - 1].style.display = 'block';
+  modalPreviews[slideIndex - 1].className += ' active';
+}