update index and style

desaisoham0 · Mar 13, 2024 · 185cf72 · 185cf72
1 parent 67d2dd6
commit 185cf72
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 26 deletions.
diff --git a/index.html b/index.html
@@ -1,8 +1,11 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 	<head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta name="description" content="Soham Desai's Professional Portfolio - Computer Science student at Rutgers University showcasing projects, skills, and work experience.">
+        <title>SOHAM DESAI</title>
 		<link href="style.css" rel="stylesheet">
-		<title>SOHAM DESAI</title>
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
 	</head>
 
@@ -19,18 +22,20 @@ <h1>SOHAM DESAI</h1>
 				<section>
 					<h2>CONTACT</h2>
 					<!-- contact info including social media -->
-                    <p>
-                        <i class="fa fa-envelope" aria-hidden="true"></i>
-                        <a href="mailto:[email protected]">[email protected]</a>
-                    </p>
-                    <p>
-                        <i class="fab fa-github" aria-hidden="true"></i>
-                        <a href="github.com/desaisoham0">desaisoham0</a>
-                    </p>
-                    <p>
-                        <i class="fab fa-linkedin" aria-hidden="true"></i>
-                        <a href="linkedin.com/soham-desai-068952212">soham-desai-068952212</a>
-                    </p>
+                    <address>
+                        <p>
+                            <i class="fa fa-envelope" aria-hidden="true"></i>
+                            <a href="mailto:[email protected]">[email protected]</a>
+                        </p>
+                        <p>
+                            <i class="fab fa-github" aria-hidden="true"></i>
+                            <a href="https://github.com/desaisoham0">desaisoham0</a>
+                        </p>
+                        <p>
+                            <i class="fab fa-linkedin" aria-hidden="true"></i>
+                            <a href="https://www.linkedin.com/in/soham-desai-068952212/">soham-desai-068952212</a>
+                     </p>
+                    </address>
 				</section>
 				<section>
 					<h2>SKILLS</h2>
@@ -43,7 +48,7 @@ <h3>Computer Science</h3>
                         Rutgers University - Newark
                     </p>
                     <p>
-                        2023 - Present
+                        <time datetime="2023">2023 - Present</time>
                     </p>
 				</section>
                 <section>
@@ -74,14 +79,14 @@ <h3>Personal Portfolio Website</h3>
 					<h2>WORK EXPERIENCE</h2>
                     <h3>Delivery Driver</h3>
                     <p>
-                        Amazon | 2023 - present
+                        Amazon | <time datetime="2023">2023 - Present</time>
                     </p>
                     <p>
                         Ensured timely and accurate delivery of orders, enhancing customer satisfaction.
                     </p>
                     <h3>Tech Associate</h3>
                     <p>
-                        Staples | 2021 - 2022
+                        Staples | <time datetime="2021">2021 - 2022</time>
                     </p>
                     <p>
                         Resolved troubleshooting issues with computers, printers, and routers, effectively reducing return rates.

diff --git a/style.css b/style.css
@@ -1,28 +1,40 @@
 body {
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    font-size: 12px;
+    font-size: calc(12px + 0.5vw);;
     max-width: 960px;
     margin: auto;
 }
+h1, h2, h3 {
+    font-weight: 100;
+    margin-bottom: 0;
+}
 h1 {
-    font-size: 3em;
+    font-size: 4vw;
     letter-spacing: .6em;
     padding-top: 1em;
     padding-bottom: 1em;
 }
 h2 {
-    font-size: 1.5em;
+    font-size: 2vw;;
     padding-bottom: 1em;
 }
 h3 {
-    font-size: 1em;
+    font-size: 1.5vw;;
     padding-bottom: 1em;
 }
 main { 
     display: grid;
-    grid-template-columns: 40% 60%;
+    grid-template-columns: 1fr 1.5fr;;
     margin-top: 3em;
 }
+@media (max-width: 768px) {
+    main {
+        grid-template-columns: 1fr; /* Stack columns on smaller screens */
+    }
+    h1 {
+        font-size: 5vw;
+    }
+}
 header {
     text-align: center;
     margin: auto 2em;
@@ -46,10 +58,6 @@ hr {
     height: 1px;
 }
 
-h1, h2, h3 {
-    font-weight: 100;
-    margin-bottom: 0;
-}
 #mainLeft {
     border-right: 1px solid lightgray;
 }