diff --git a/CSS/design-resources-for-developers b/CSS/design-resources-for-developers
new file mode 160000
index 0000000..aaa9bcc
--- /dev/null
+++ b/CSS/design-resources-for-developers
@@ -0,0 +1 @@
+Subproject commit aaa9bcc22d544c5eb09a0b4429b6b8d0dcd79a8e
diff --git a/STYLES.CSS b/STYLES.CSS
index c398d9e..9013615 100644
--- a/STYLES.CSS
+++ b/STYLES.CSS
@@ -1,5 +1,6 @@
 /* css ref file for other pages */
 body{
+    background-color:black;
     height: 100vh;
     padding:0; margin: 0;
 }
@@ -18,6 +19,55 @@ h1, h2, h3, h4, h5, h6, h7, .topnavButton a, p, ol, u, button  {
     font-family: 'Roboto Mono', monospace;
 }
 /* ------------------- */
+            /* COLOR STRIPS AND TEXT */
+            .colorstrip1{
+                width: cover; 
+                @media only screen and (max-height: 844.98px) {
+                    height: 10vh;
+                    };
+                height: 20%;
+                border-style: solid; border-color: #E5E7EB;
+                background-color: #E5E7EB;
+                text-align: center;
+            }
+            .colorstrip1 p {
+                text-shadow: 1px 2px 1px #1F2937;
+                position: relative; top:30%;
+                color: rgb(82, 82, 82);
+                font-family:'Roboto Mono', monospace; 
+                @media only screen and (max-height: 777.98px) {
+                    font-size: 2.5vh;
+                    margin-bottom: 1vh;
+                    };
+                @media only screen and (max-height: 844.98px) and (orientation: portrait) {
+                    font-size: 1.5vh;
+                    };
+                font-size: 1.5vw;
+            }
+            .colorstrip2{
+                margin-top: 2.5%;
+                width: cover; 
+                @media only screen and (max-height: 844.98px) {
+                height: 10vh;
+                };
+                height: 20%;
+                border-style: solid; border-color: #1F2937;
+                background-color: black;
+                border-top: 3px solid white;
+                text-align: center;
+            }
+            .colorstrip2 p{
+                font-family: 'Times New Roman', Times, serif; 
+                @media only screen and (max-height: 777.98px) {
+                    font-size: 2vw;
+                    };
+                @media only screen and (max-height: 844.98px) and (orientation: portrait) {
+                    font-size: 3vw;
+                    };
+                font-size: 1vw;
+                color:#E5E7EB;
+            } 
+            /* --------- */ 
 /* -----ABOUT ME AND BACKGROUND --------- */
 #background {
     position: relative;
@@ -35,7 +85,7 @@ img.portrait{
 #aboutMe{
     position: relative;
     padding-left:5%; padding-right: 5%; padding-bottom: 5%;
-    background-color: #0d1116;
+    background-color: black;
     height: 30%;
 }
 .backgroundMountain {
@@ -61,9 +111,12 @@ img.portrait{
     font-family: Varela;
     font-size: 1.2vw;
     color: white;
+    padding-bottom: 3.5vw;
+    border-bottom: white solid 1px; 
 }
 #aboutMeTop {
-    border: #1F2937 solid 5px; background-color: #1F2937;
+    border-bottom: white solid 3px; 
+    background-color: black;
     border-top: 3px solid #0d1116;
     margin-top: 0%;
     height:20%;
@@ -113,7 +166,7 @@ img.logo:hover{
 }
 .topnavButton a {
     text-decoration: none;
-    background-color: #1F2937;
+    background-color: black;
     color:white;
     padding: 5px 10px;
     text-align: center;
@@ -125,7 +178,7 @@ img.logo:hover{
 }
 .topnavButton {
     text-decoration: none;
-    background-color: #1F2937;
+    background-color: black;
     color:white;
     cursor:pointer;
     transition: transform 1.5s cubic-bezier(0, 1.53, 0.72, 0.83);
@@ -138,28 +191,30 @@ img.logo:hover{
     flex: 0 1 50px;
     flex-direction: row;
     justify-content: center;
-    gap: 30px;
-    border: 3px solid #1F2937; border-radius: 50px;
     margin-right: 12%; margin-left: 12%;
     flex-wrap: wrap;
     animation: fadeOntoPageLogo 2.1s;
     animation-iteration-count: 1;
 }
 .containerTestItem {
+    align-items: center;
     flex: 1 1 100px;
+    margin: auto;
     display: flex;
     border: 3px solid #1F2937; border-radius: 10px;
-    margin-left: auto; margin-right: auto;
+    background-color: white;
     padding: 100px;
     cursor: pointer;
     width: 100px;
+    font-size: 1.5vw;
     transition: transform 1.5s cubic-bezier(0, 1.53, 0.72, 0.83);
 }
 .containerTestItem img{
     width: 100px; height: 100px;
+    margin-left: 1vw;
 }
 .containerTestItem a{
-    margin-left: auto; margin-right: auto; margin-bottom: auto;
+    margin: auto;
     color:black;
     text-decoration: none;
 }
@@ -168,11 +223,12 @@ img.logo:hover{
 }
 .topnav {
     position:fixed; top:0%; width:100%; height:10%;
-    background-color: #1F2937; overflow:hidden;
+    background-color: black; 
+    overflow:hidden;
     align-items: center;
     flex-direction: row;
     display: flex;
-    border-bottom: 3px solid #0d1116;
+    border-bottom: 3px solid white;
     z-index: 999;
 }
 /* ------------- */
@@ -240,4 +296,298 @@ h1{
     25%{opacity: 0.25; margin-right:37.5%;}
     100%{opacity: 1;}
 }
+/* moreAboutMe media screen queries */
+
+/* SIDEWAYS */
+@media only screen and (max-height: 575.98px) and (orientation: landscape){
+    .console { height: 92vh; width: 80vw;
+    border-radius: 5%;
+    z-index: 100;
+    position: relative;
+    margin-left: auto; margin-right: auto; margin-top: 7%;
+    background-color: rgba(60, 60, 60, 1);
+}
+.console .question{
+    margin-left: 1vh;
+    color: white;
+    text-align: left;
+}
+.console .answer{
+    margin-left: 3vh;
+    color: wheat;
+    text-align: left;
+}
+.topConsoleBar {
+    z-index: 101;
+    width: inherit;
+    height: 7vh;
+    background-color: rgba(200, 200, 200, 1)
+}
+.topConsoleBar p{
+    margin-left: 3.5%;
+    margin-top: -2.5vh;
+    color:black;
+}
+
+.dot {
+    margin-top: 1vh;
+    margin-left: 1vh;
+    height: 1.5vh;
+    width: 1.5vh;
+    background-color: black;
+    border-radius: 50%;
+    display: inline-block;
+} 
+.blurb {
+    font-size: 3vw;
+    padding-bottom: 5vh;
+    padding-left: 2vw; padding-right: 2vw;
+}
+}
+/* */
+/* */
+/* Tablets */
+@media only screen and (max-width: 800px) and (orientation:portrait){
+    .console { 
+    font-size: 1.81vh;
+    height: 58vh; width: 80vw;
+    border-radius: 5%;
+    z-index: 100;
+    position: relative;
+    margin-left: auto; margin-right: auto; margin-top: 20%;
+    background-color: rgba(60, 60, 60, 1);
+}
+.console .question{
+    margin-left: 1vh;
+    color: white;
+    text-align: left;
+}
+.console .answer{
+    margin-left: 3vh;
+    color: wheat;
+    text-align: left;
+}
+.topConsoleBar {
+    z-index: 101;
+    width: inherit;
+    height: 3vh;
+    background-color: rgba(200, 200, 200, 1)
+}
+.topConsoleBar p{
+    margin-left: 3.5%;
+    margin-top: -2.5vh;
+    color:black;
+}
+
+.dot {
+    margin-top: 1vh;
+    margin-left: 1vh;
+    height: 1.5vh;
+    width: 1.5vh;
+    background-color: black;
+    border-radius: 50%;
+    display: inline-block;
+} 
+.blurb {
+    text-align: left;
+    margin-top: 10%;
+    font-size: 3vw;
+    padding-bottom: 5vh;
+    padding-left: 2vw; padding-right: 2vw;
+}
+}
+/* Phones  */
+@media only screen and (max-height: 700px) and (orientation:portrait){
+    .console { height: 58vh; width: 80vw;
+    border-radius: 5%;
+    z-index: 100;
+    position: relative;
+    margin-left: auto; margin-right: auto; margin-top: 50%;
+    background-color: rgba(60, 60, 60, 1);
+}
+.console .question{
+    margin-left: 1vh;
+    color: white;
+    text-align: left;
+}
+.console .answer{
+    margin-left: 3vh;
+    color: wheat;
+    text-align: left;
+}
+.topConsoleBar {
+    z-index: 101;
+    width: inherit;
+    height: 3vh;
+    background-color: rgba(200, 200, 200, 1)
+}
+.topConsoleBar p{
+    margin-left: 3.5%;
+    margin-top: -2.5vh;
+    color:black;
+}
+
+.dot {
+    margin-top: 1vh;
+    margin-left: 1vh;
+    height: 1.5vh;
+    width: 1.5vh;
+    background-color: black;
+    border-radius: 50%;
+    display: inline-block;
+} 
+.blurb {
+    text-align: left;
+    font-size: 3vw;
+    padding-bottom: 5vh;
+    padding-left: 2vw; padding-right: 2vw;
+}
+}
 /* */
+
+/* Tablets, portrait */
+@media only screen and (max-width: 913.98px) and (orientation:portrait){
+    .console { 
+    font-size: 1.81vh;
+    height: 58vh; width: 80vw;
+    border-radius: 5%;
+    z-index: 100;
+    position: relative;
+    margin-left: auto; margin-right: auto; margin-top: 20%;
+    background-color: rgba(60, 60, 60, 1);
+}
+.console .question{
+    margin-left: 1vh;
+    color: white;
+    text-align: left;
+}
+.console .answer{
+    margin-left: 3vh;
+    color: wheat;
+    text-align: left;
+}
+.topConsoleBar {
+    z-index: 101;
+    width: inherit;
+    height: 3vh;
+    background-color: rgba(200, 200, 200, 1)
+}
+.topConsoleBar p{
+    margin-left: 3.5%;
+    margin-top: -2.5vh;
+    color:black;
+}
+
+.dot {
+    margin-top: 1vh;
+    margin-left: 1vh;
+    height: 1.5vh;
+    width: 1.5vh;
+    background-color: black;
+    border-radius: 50%;
+    display: inline-block;
+} 
+.blurb {
+    text-align: left;
+    margin-top: 10%;
+    font-size: 3vw;
+    padding-bottom: 5vh;
+    padding-left: 2vw; padding-right: 2vw;
+}
+}
+/* Tablets, landscape */
+@media only screen and (max-height: 800px) and (orientation:landscape){
+    .console { height: 70vh; width: 80vw;
+    border-radius: 5%;
+    z-index: 100;
+    position: relative;
+    margin-left: auto; margin-right: auto; margin-top: 10%;
+    background-color: rgba(60, 60, 60, 1);
+}
+.console .question{
+    margin-left: 1vh;
+    color: white;
+    text-align: left;
+}
+.console .answer{
+    margin-left: 3vh;
+    color: wheat;
+    text-align: left;
+}
+.topConsoleBar {
+    z-index: 101;
+    width: inherit;
+    height: 3vh;
+    background-color: rgba(200, 200, 200, 1)
+}
+.topConsoleBar p{
+    margin-left: 3.5%;
+    margin-top: -2.5vh;
+    color:black;
+}
+
+.dot {
+    margin-top: 1vh;
+    margin-left: 1vh;
+    height: 1.5vh;
+    width: 1.5vh;
+    background-color: black;
+    border-radius: 50%;
+    display: inline-block;
+} 
+.blurb {
+    text-align: left;
+    font-size: 2vw;
+    padding-bottom: 5vh;
+    padding-left: 2vw; padding-right: 2vw;
+}
+}
+/* Surface Pro 7, landscape */
+@media only screen and (max-width: 1368.98px) and (orientation:landscape){
+    .console { 
+    font-size: 2.1vh;
+    height: 70vh; width: 80vw;
+    border-radius: 5%;
+    z-index: 100;
+    position: relative;
+    margin-left: auto; margin-right: auto; margin-top: 10%;
+    background-color: rgba(60, 60, 60, 1);
+}
+.console .question{
+    margin-left: 1vh;
+    color: white;
+    text-align: left;
+}
+.console .answer{
+    margin-left: 3vh;
+    color: wheat;
+    text-align: left;
+}
+.topConsoleBar {
+    z-index: 101;
+    width: inherit;
+    height: 3vh;
+    background-color: rgba(200, 200, 200, 1)
+}
+.topConsoleBar p{
+    margin-left: 3.5%;
+    margin-top: -2.5vh;
+    color:black;
+}
+
+.dot {
+    margin-top: 1vh;
+    margin-left: 1vh;
+    height: 1.5vh;
+    width: 1.5vh;
+    background-color: black;
+    border-radius: 50%;
+    display: inline-block;
+} 
+.blurb {
+    text-align: left;
+    font-size: 2vw;
+    padding-bottom: 5vh;
+    padding-left: 2vw; padding-right: 2vw;
+}
+}
diff --git a/index.html b/index.html
index 7c63883..c9672d0 100644
--- a/index.html
+++ b/index.html
@@ -35,7 +35,7 @@
                 cursor: pointer;
                 flex: 1 1 0;
                 max-width: 50%;
-                border:1px solid #1F2937; border-radius: 10px;
+                border:3.5px solid #1F2937; border-radius: 10px;
                 transition: transform 1.5s cubic-bezier(0, 1.53, 0.72, 0.83);
                 animation: fadeOntoPageLogo 2s;
                 animation-iteration-count: 1;
@@ -76,31 +76,6 @@
 
             /* --------- */
 
-            /* COLOR STRIPS AND TEXT */
-            .colorstrip1{
-                width: cover; height: 20%;
-                border-style: solid; border-color: #E5E7EB;
-                background-color: #E5E7EB;
-                text-align: center;
-            }
-            .colorstrip1 p {
-                text-shadow: 1px 2px 1px #1F2937;
-                position: relative; top:30%;
-                color: rgb(82, 82, 82);
-                font-family:'Roboto Mono', monospace; font-size: 1.5vw;
-            }
-            .colorstrip2{
-                margin-top: 2.5%;
-                width: cover; height: 20%;
-                border-style: solid; border-color: #1F2937;
-                background-color: #1F2937;
-                text-align: center;
-            }
-            .colorstrip2 p{
-                font-family: 'Times New Roman', Times, serif; font-size: 1.7vw;
-                color:#E5E7EB;
-            } 
-            /* --------- */ 
         </style>
         <link rel="stylesheet" href="STYLES.CSS">
         <title>Welcome!</title>
@@ -139,8 +114,8 @@
                    <div class = aboutMeText>
                        <h5 id="aboutMeHey"> About Me </h5>
                        <h1 id="aboutMeHeader"> Let's get acquainted. </h1>
-                       <p id="biography"> <br> I'm a Computer Science student located in California. <br>
-                        Excellent to meet you!
+                       <p id="biography"> <br> I'm a web application developer.
+                         <br> Excellent to meet you!
                                         </p>
                    </div>
                 </div>
@@ -165,42 +140,38 @@ <h1 id="aboutMeHeader"> Let's get acquainted. </h1>
 
                                       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>
-            <br> <br>
             <!-- -->
 
             <!-- GRAY STRIP QUOTE -->
-            <div class="colorstrip1"> <p> <i>" Undefeated in the art of living. "</i></p></div>
-            <br> <br>
             <!-- -->
 
             <!-- CONTENT// ICONS AND LINKS -->
             <h2> View everything you might want to know here! </h2> <br>
             <div class="containerTest">
                 <div class="containerTestItem"> <a href="/pages/academics.html"> <img src="../images/bowloframen.png"  alt = "bor1"> 
-                <p class="CTIText"> Academics </p>
+                <p class="CTIText"> //academics </p>
                 </a>
                 </div>
                 <div class="containerTestItem"> <a href="/pages/resume.html">
                     <img src="../images/bowloframen2.png" alt = "bor2">
-                    <p class="CTIText"> Friends </p>
+                    <p class="CTIText"> //social </p>
                 </a>
                 </div>
                 <div class="containerTestItem"> <a href="/pages/resume.html">
                     <img src="../images/bowloframen3.png" alt = "bor3">
-                    <p class="CTIText"> More About Me  </p>
+                    <p class="CTIText"> //more </p>
                     </div>
                 </a>
-                <div class="containerTestItem"> <a href="/pages/resume.html">
+                <div class="containerTestItem"> <a href='#ContactMe'>
                     <img src="../images/bowloframen4.png" alt = "bor4">
-                    <p class="CTIText"> Contact Me: </p>
+                    <p class="CTIText"> //projects: </p>
                 </a>
                 </div>
             </div>
             <!-- -->
 
             <!-- SOCIALS -->
+            <div id="ContactMe">
             <div class="socials"> 
                 <!-- INSTAGRAM-->
                 <div style ="z-index: 91;" class="socialsAnimation" > <a href="https://www.instagram.com/samuellvo/">
@@ -215,8 +186,11 @@ <h2> View everything you might want to know here! </h2> <br>
                 <div style ="z-index: 89;" class="socialsAnimation"> <a href="mailto:masualov@gmail.com">
                     <img src="images/iconEmail.png" alt="Email Logo"> <br> masualov@gmail.com </div>
              </a></div>
+            </div>
             <!-- -->
-            <div class="colorstrip2"> <br><br><br> <p> &#174 Thanks for dropping by. :]</p></div>
+            <div class="colorstrip2"> <br><br><br> <p> &#169 toothx </p></div>
+
+
             <script>
                 window.addEventListener("scroll", ()=>{
                     var aboutMeContainer = document.getElementById("aboutMeContainer");
diff --git a/pages/Resume.pdf b/pages/Resume.pdf
new file mode 100644
index 0000000..85bfadc
Binary files /dev/null and b/pages/Resume.pdf differ
diff --git a/pages/gavilanLogo.png b/pages/gavilanLogo.png
new file mode 100644
index 0000000..78ca619
Binary files /dev/null and b/pages/gavilanLogo.png differ
diff --git a/pages/moreaboutme.html b/pages/moreaboutme.html
index 28c1130..d1a3a6d 100644
--- a/pages/moreaboutme.html
+++ b/pages/moreaboutme.html
@@ -6,20 +6,53 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <style>
-    #unfinished {position: relative; top: 20%; 
-        text-align: center;
-    }
-    .console { height: 10vh; width: 20vw;
-        z-index: 999;
+    @media only screen and (max-width: 430px) {
+    .console { height: 50vh; width: 80vw;
+        border-radius: 5%;
+        z-index: 100;
         position: relative;
-        margin-left: auto; margin-right: auto; margin-top: 25%;
-        background-color: rgba(101, 100, 100, 0);
+        margin-left: auto; margin-right: auto; margin-top: 20%;
+        background-color: rgba(60, 60, 60, 1);
     }
-
-    .console p{
+    .console .question{
+        margin-left: 1vh;
+        color: white;
+        text-align: left;
+    }
+    .console .answer{
+        margin-left: 3vh;
+        color: wheat;
+        text-align: left;
+    }
+    .topConsoleBar {
+        z-index: 101;
+        width: inherit;
+        height: 3vh;
+        background-color: rgba(200, 200, 200, 1)
+    }
+    .topConsoleBar p{
+        margin-left: 3.5%;
+        margin-top: -2.5vh;
         color:black;
     }
-    
+
+    .dot {
+        margin-top: 1vh;
+        margin-left: 1vh;
+        height: 1.5vh;
+        width: 1.5vh;
+        background-color: black;
+        border-radius: 50%;
+        display: inline-block;
+    } 
+
+    .blurb {
+        text-align: left;
+        font-size: 3vw;
+        padding-bottom: 5vh;
+        padding-left: 2vw; padding-right: 2vw;
+    }
+}
     </style>
     <link rel="stylesheet" href="/STYLES.CSS">
 </head>
@@ -28,14 +61,60 @@
 <div class = "topnav">
     <div style ="z-index: 999;" class = "topnavLogo" > <img class ="logo" src="../images/logo.jpeg" alt="logo"></div>
         <div style ="z-index: 90;" class ="topnavButton">
-                <br> <a href='#aboutMe'>
-                    About Me </a> </div>
-        <div style ="z-index: 91;" class = "topnavButton"><br> <a href='/pages/resume.html'> Resume </a> </div>
+                <br> <a href='/pages/index.html'>
+                    Landing </a> </div>
+        <div style ="z-index: 91;" class = "topnavButton"><br> <a href='/pages/Resume.pdf' download> Resume </a> </div>
         <div style ="z-index: 92;" class = "topnavButton"><br> <a href=https://www.google.com/search?client=opera-gx&q=ramen+places+nearby&sourceid=opera&ie=UTF-8&oe=UTF-8'> Test3 </a> </div>
     </div>
 <!-- -->
-<p id="unfinished"> This page is incomplete! </p>
-<div class = "console"> <p> Test</p>
-</div>
+
+<div class = "console"> 
+    <div class ="topConsoleBar">
+        <span style = "background-color: tomato;" class = "dot"></span>
+        <span style = "background-color: gold;" class = "dot"></span>
+        <span style = "background-color: greenyellow;" class = "dot"></span>
+        <p> Coursework </p>
+    </div> <!-- end of topConsoleBar div -->
+    <p class = "question" >> sam.Mathematics</p>
+    <p class = "answer" > -> Statistics
+        <br> -> Differential Calculus
+        <br> -> Integral Calculus
+        <br> -> Multivariable Calculus
+        <!-- <br> -> Differential Equations -->
+        <!-- <br> -> Linear Algebra -->
+    </p>
+    <p class = "question" >> sam.Physics</p>
+    <p class = "answer"> -> Classical Mechanics
+        <br> -> Electromagnetism
+    </p>
+    <p class = "question" >> sam.CompSci</p>
+    <p class = "answer" > -> C++, C++ II
+        <br> -> Python
+        <br> -> UNIX/LINUX Op. Sys.
+        <br> -> Discrete Struc. & Alg.
+        <br> -> Comp. Architecture
+    </p>
+</div> <!-- end of console div -->
+<div class="colorstrip1" style="margin-top: 2vh; margin-bottom: 2vh;"> <p> Let's get acquainted. </p></div>
+<p class = "blurb" > Above, you'll find any courses that are major-related!
+    <br> <br>
+    I am particularly enthused about logic-based puzzles and their subsequent problem-solving --
+    Unsurprisingly, and resultantly, I enjoy most STEM coursework and fields! <br><br>
+
+    In some of my freetime between my courses, I almost <i>live</i> and <i>breathe</i> tutoring!
+    You'll find me most often either conducting private tutoring sessions or tutoring
+    students at my college's STEM center; from multivariable calculus and it's prerequisites, 
+    Newtonian mechanics, and a plethora of coding topics. I also offer services for a wide variety of AP coursework.
+    <br><br>
+
+    I am a manager of a cafe-bakery local to my area, so I quite enjoy good bread and coffee.
+    Leveraging this position, I also organize schedulings with local organizations &#40e.g school districts, teachers' unions,
+    family centers, homeless shelters, etc.&#41  such that any daily, leftover bakery products can be donated
+    instead of wasting them. <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 class="colorstrip2"> <p> &#174 Sam Vo </p></div>
 </body>
 </html>
\ No newline at end of file