RESPONSIVENESS

Finally working on implementing responsiveness. TO DO: - Still flesh out other pages - Homepage needs finalizations with mobile responsiveness. - Planned implementation of media queries with next update.
samuellvo · Jun 6, 2023 · c5e14cc · c5e14cc
1 parent 38eeac2
commit c5e14cc
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 62 deletions.
diff --git a/STYLES.CSS b/STYLES.CSS
@@ -18,28 +18,23 @@ h1, h2, h3, h4, h5, h6, h7, .topnavButton a, p, ol, u, button  {
     font-family: 'Roboto Mono', monospace;
 }
 /* ------------------- */
-/* -------------- */
+/* -----ABOUT ME AND BACKGROUND --------- */
 #background {
     position: relative;
     overflow:hidden;
 }
-.crop {
-    width: 150px; height: 150px;
-    position: absolute; overflow: hidden; top:35%;
-    border-radius: 150px; border: 3px solid #ED4A3D;
-    left:15%;
-}
-.crop img.portrait{
-    display: inline;
-    margin: 0 auto;
-    margin-left: -5%;
-    height: 100%;
-    width: auto;
 
+img.portrait{
+    object-fit: cover;
+    max-height: 150px;
+    max-width: 150px;
+    margin-top: 10%;
+    border-radius: 50%;
+    border: 3px solid #ED4A3D;
 }
 #aboutMe{
     position: relative;
-    padding:7.5%;
+    padding-left:5%; padding-right: 5%; padding-bottom: 5%;
     background-color: #0d1116;
     height: 30%;
 }
@@ -50,10 +45,51 @@ h1, h2, h3, h4, h5, h6, h7, .topnavButton a, p, ol, u, button  {
     width: 100%;
 }
 #aboutMeContainer{
-    position:relative; top: -50%;
+    display: flex;
+    flex-direction: row;
+    gap: 10%;
+    margin-right: 15%;
+    justify-content: center;
+    position:relative;
     transition: ease-in-out;
     opacity: 0;
 }
+.aboutMeText {
+    margin-top: 0;
+}
+#biography {
+    font-family: Varela;
+    font-size: 1.2vw;
+    color: white;
+}
+#aboutMeTop {
+    border: #1F2937 solid 5px; background-color: #1F2937;
+    border-top: 3px solid #0d1116;
+    margin-top: 0%;
+    height:20%;
+}
+.bigText {
+    text-shadow: 3px 4px 1px #1F2937;
+    position: absolute; top: 37.5%; right:20%; left:20%;
+    font-family: Varela;
+    color:white;
+    font-size: 5vw;
+    animation: fadeOntoPage 1s ease-in-out;
+    animation-iteration-count: 1;
+    transition: 0.75s ease-in-out;
+}
+
+#aboutMeHey {
+    font-family:Varela;
+    color:#ED4A3D;
+    font-size: 2vw;
+    position:relative;
+}
+#aboutMeHeader {
+    color:white;
+    font-size: 3vw;
+
+}
 /* ---------------/
 /*TOPNAV BAR*/
 .socialsAnimation:hover, .containerTestItem:hover, .topnavButton:hover, .bigText:hover
@@ -205,34 +241,3 @@ h1{
     100%{opacity: 1;}
 }
 /* */
-#aboutMeTop {
-    border: #1F2937 solid 5px; background-color: #1F2937;
-    border-top: 3px solid #0d1116;
-    margin-top: 0%;
-    height:20%;
-}
-.bigText {
-    text-shadow: 3px 4px 1px #1F2937;
-    position: absolute; top: 37.5%; right:20%; left:20%;
-    font-family: Varela;
-    color:white;
-    font-size: 50px;
-    animation: fadeOntoPage 1s ease-in-out;
-    animation-iteration-count: 1;
-    transition: 0.75s ease-in-out;
-}
-
-#aboutMeHey {
-    font-family:Varela;
-    color:#ED4A3D;
-    font-size: 15px;
-    position:relative;
-}
-#aboutMeHeader {
-    color:white;
-    position:relative;
-}
-#biography {
-    font-family: Varela;
-    color: white;
-}
diff --git a/images/samvoResume.pdf b/images/samvoResume.pdf
diff --git a/index.html b/index.html
@@ -6,6 +6,7 @@
         <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
         <link rel="manifest" href="/site.webmanifest">
         <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
+        <meta name="viewport" content="width=device-width", initial-scale="1.0">
         <meta name="msapplication-TileColor" content="#da532c">
         <meta name="theme-color" content="#ffffff">
         <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -18,7 +19,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <style>
             p.test, .socials, .socials a{
-                text-align: center; text-decoration: none; color:black; font-size: 20px;
+                text-align: center; text-decoration: none; color:black; font-size: 1.5vw;
                 font-family: 'Roboto Mono', monospace;
                 margin-top:5%;
             }
@@ -42,8 +43,8 @@
 
             .socials {
                 display: flex; justify-content: center;
-                height: 20%;
-                padding:10px; width: 75%; margin-left: auto; margin-right: auto;
+                max-height: 20%;
+                padding:10px; max-width: 75%; margin-left: auto; margin-right: auto;
                 margin-bottom: 10px;
                 border: 1px solid black; border-radius: 20px;
                 animation: fadeOntoPageLogo 2s;
@@ -86,7 +87,7 @@
                 text-shadow: 1px 2px 1px #1F2937;
                 position: relative; top:30%;
                 color: rgb(82, 82, 82);
-                font-family:'Roboto Mono', monospace; font-size: 20px;
+                font-family:'Roboto Mono', monospace; font-size: 1.5vw;
             }
             .colorstrip2{
                 margin-top: 2.5%;
@@ -96,7 +97,7 @@
                 text-align: center;
             }
             .colorstrip2 p{
-                font-family: 'Times New Roman', Times, serif; font-size: 15px;
+                font-family: 'Times New Roman', Times, serif; font-size: 1.7vw;
                 color:#E5E7EB;
             } 
             /* --------- */ 
@@ -134,10 +135,19 @@
             <!-- ABOUT ME -->
             <div id="aboutMe">
                 <div id="aboutMeContainer">
-                   <div class="crop"> <img class="portrait" src="../images/IMG_8245.png" alt="portrait"> </div>
-                   <h5 id="aboutMeHey"> About</h5>
-                   <h1 id="aboutMeHeader"> Let's get acquainted. </h1>
-                   <p id="biography"> <br> I'm a concurrent computer science student located in California! <br>
+                   <img class="portrait" src="../images/IMG_8245.png" alt="portrait">
+                   <div class = aboutMeText>
+                       <h5 id="aboutMeHey"> About</h5>
+                       <h1 id="aboutMeHeader"> Let's get acquainted. </h1>
+                       <p id="biography"> <br> I'm a concurrent computer science student located in California. <br>
+                        Excellent to meet you!
+                                        </p>
+                   </div>
+                </div>
+            </div>
+            <!-- -->
+            <!-- REPLACE TEXT ELSEWHERE -->               
+            <!-- I'm a concurrent computer science student located in California! <br>
                                       I am particularly enthused about logic-based puzzles and their subsequent problem-solving -- <br>
                                       Unsurprisingly, and resultantly, I enjoy most STEM coursework and fields! <br><br>
 
@@ -153,13 +163,7 @@ <h1 id="aboutMeHeader"> Let's get acquainted. </h1>
                                       family centers, homeless shelters, etc.&#41  such that any daily, leftover bakery products can be donated<br>
                                       instead of wasting them! <br> <br> <br>
 
-                                      Needless to say, if I live and breathe tutoring, you'll find that I enjoy coding and computer science at least as much.
-
-                 </p>
-                </div>
-            </div>
-            <!-- -->
-
+                                      Needless to say, if I live and breathe tutoring, you'll find that I enjoy coding and computer science at least as much. -->
             <!-- LANDING TEXT -->
             <br> <br>
             <p class="test">" landing. "</p>