Merge pull request #3 from NukeVdnt/test

site updated with my latest projects

index.html

@@ -37,15 +37,14 @@
           <div class="hero-text">
             <h5 class="'designation">
               <div>Hi I'm</div>
-              <span class="input">Aspiring Front-End Developer</span>
+              <span class="input">Front-End Developer</span>
             </h5>
             <h1>Vedant Nukte</h1>
             <p>
               I'm a student at Sinhgad Academy of Engineering, currently pursing
-              Computer Science. I'm an aspiring Front-End Developer and
-              passionate about Cybersecurity. Strange Combination but I cannot
-              really favor one of the two, trying to be as best as I can in both
-              the fields.
+              Computer Science. I'm a Front-End Developer and
+              an aspiring IT Security Researcher. Strange Combination but I cannot
+              really favor one of the two.
             </p>
             <div class="btn-grp">
               <a href="#projects" class="btn active">Projects</a>
@@ -152,12 +151,52 @@ <h3>
           </div>
         </div>
       </div>
+      <div class="card">
+        <div class="face face1">
+          <div class="content">
+            <div class="icon">
+              <img
+                src="img/moderncalculator.png"
+                class="proj-img"
+                alt="calculator app"
+              />
+            </div>
+          </div>
+        </div>
+        <div class="face face2">
+          <div class="content">
+            <h3>
+              <a
+                href="https://github.com/NukeVdnt/ModernCalculatorAPP"
+                target="_blank"
+                >ModernCalculatorAPP 
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.5"
+                  stroke="currentColor"
+                  class="share-icon"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                  /></a
+              >
+            </h3>
+            <p>
+              Minimal calculator app for Android.
+            </p>
+          </div>
+        </div>
+      </div>
     </div>
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.10/typed.min.js"></script>
     <script>
       var typed = new Typed(".input", {
-        strings: ["Aspiring Front-End Developer", "Cybersecurity Enthusiast"],
+        strings: ["Front-End Developer", "Aspiring IT Security Researcher", "Passionate about Android"],
         typedSpeed: 70,
         backSpeed: 65,
         loop: true,

styles/styles.css

@@ -70,7 +70,7 @@ header {
 }
 
 .container .hero-pic {
-  width: 247px;
+  width: 240px;
   height: 300px;
   border-radius: 20%;
   overflow: hidden;
@@ -282,6 +282,35 @@ header {
   margin-left: -4px;
 }
 
+@media (max-width: 1300px) {
+  .container {
+    flex-direction: column;
+    padding: 2rem;
+  }
+  .card-container {
+    flex-direction: column;
+    padding: 4rem;
+    width: 100%;
+    justify-content: center;
+    align-items: center;
+  }
+  .hero-text {
+    padding: 80px 0;
+  }
+  .btn-grp {
+    display: flex;
+    flex-direction: column;
+  }
+  .card,
+  .face {
+    max-width: 100%;
+  }
+  .proj-img {
+    max-width: 100%;
+    max-height: auto;
+  }
+}
+
 @media (max-width: 956px) {
   .container {
     flex-direction: column;