finish, I think

ttran293 · Aug 25, 2021 · af74227 · af74227
1 parent c18eb30
commit af74227
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 31 deletions.
diff --git a/css/images/circle-cropped.png b/css/images/circle-cropped.png
diff --git a/css/styles.css b/css/styles.css
@@ -3,6 +3,15 @@ box-sizing: border-box;
   border: 1px solid red;
 } */
 /* --------------- Main Design ---------------*/
+
+*,
+*:after,
+*:before{
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
 header {
   height: 70px;
   display: flex;
@@ -56,11 +65,12 @@ hr {
 
 .navMenu a {
   float: left;
-  color: #1e2023;
+  color: black;
   text-align: center;
   padding: 12px 14px;
   text-decoration: none;
   font-size: 17px;
+  font-weight: bold;
 }
 
 .navMenu a:hover {
@@ -75,6 +85,7 @@ box-shadow: 0 0 1px rgba(0, 0, 0, 0);
 transition-duration: 0.4s;
 -webkit-transition-property: border-radius;
 transition-property: border-radius;
+font-weight: bold;
 }
 
 .navMenu a.active {
@@ -83,7 +94,7 @@ transition-property: border-radius;
 
 /* --------------- Introduction Homepage Design ---------------*/
 .introduction {
-  background-color: #1e2023;
+  background-color: #121315;
   height: 790px;
   color: white;
   display: flex;
@@ -259,7 +270,7 @@ transition-property: border-radius;
 
 #skills {
   /* margin-top: 200px; */
-  background-color: #1e2023;
+  background-color: #121315;
 }
 
 .skill-header {
@@ -299,7 +310,8 @@ transition-property: border-radius;
   border-radius: 4px;
   position: relative;
   box-shadow: 0 0 40px -10px #000;
-  color: #505050
+  color: black;
+  font-weight: bold;
 }
 
 [class*="subjects-"]{
@@ -313,7 +325,7 @@ transition-property: border-radius;
   background: #fff;
   border-radius: 4px;
   box-shadow: 0 0 40px -10px #000;
-  color: #505050;
+  color: black;
   margin-top: 24px;
   max-height: 0;
   overflow: hidden;
@@ -362,9 +374,10 @@ p:hover {
   background: #06953E;
   -webkit-transform: scale(1.05);
   color: rgba(255, 255, 255, 0.8);
-  box-shadow: 0 0 30px -10px #000
+  box-shadow: 0 0 30px -10px #000;
 }
 
+
 .language {}
 
 .project {}
@@ -387,9 +400,7 @@ p:hover {
 }
 
 a {
-  color: #fff;
-  text-decoration: none;
-
+  font-weight: bold;
 }
 
 .p-menu1 {
@@ -512,7 +523,7 @@ a {
   }
 
   .introduction {
-    height: 50vh;
+    height: 70vh;
     width: 100%;
   }
 
@@ -524,6 +535,9 @@ a {
     width: 100%;
     margin: 0 auto 10px;
   }
+
+  #more {display: none;}
+
   #exp-header {
     display: block;
     white-space: normal;
@@ -567,4 +581,5 @@ a {
   .skill-outer {
     display: grid;
   }
+
 }
diff --git a/dropdown-menu.js b/dropdown-menu.js
@@ -6,7 +6,7 @@ function f() {
   if (document.getElementsByClassName('dropdown-1')[0].classList.contains('down')) {
     setTimeout(function() {
       document.getElementsByClassName('dropdown-1')[0].style.overflow = 'visible'
-    }, 500)
+    }, 100)
   } else {
     document.getElementsByClassName('dropdown-1')[0].style.overflow = 'hidden'
   }
@@ -18,7 +18,7 @@ function f2() {
   if (document.getElementsByClassName('dropdown-2')[0].classList.contains('down')) {
     setTimeout(function() {
       document.getElementsByClassName('dropdown-2')[0].style.overflow = 'visible'
-    }, 500)
+    }, 100)
   } else {
     document.getElementsByClassName('dropdown-2')[0].style.overflow = 'hidden'
   }
@@ -30,7 +30,7 @@ function f3() {
   if (document.getElementsByClassName('dropdown-3')[0].classList.contains('down')) {
     setTimeout(function() {
       document.getElementsByClassName('dropdown-3')[0].style.overflow = 'visible'
-    }, 500)
+    }, 100)
   } else {
     document.getElementsByClassName('dropdown-3')[0].style.overflow = 'hidden'
   }
@@ -41,7 +41,7 @@ function f4() {
   if (document.getElementsByClassName('dropdown-4')[0].classList.contains('down')) {
     setTimeout(function() {
       document.getElementsByClassName('dropdown-4')[0].style.overflow = 'visible'
-    }, 500)
+    }, 100)
   } else {
     document.getElementsByClassName('dropdown-4')[0].style.overflow = 'hidden'
   }
@@ -52,7 +52,7 @@ function f5() {
   if (document.getElementsByClassName('dropdown-5')[0].classList.contains('down')) {
     setTimeout(function() {
       document.getElementsByClassName('dropdown-5')[0].style.overflow = 'visible'
-    }, 500)
+    }, 100)
   } else {
     document.getElementsByClassName('dropdown-5')[0].style.overflow = 'hidden'
   }
@@ -63,7 +63,7 @@ function f6() {
   if (document.getElementsByClassName('dropdown-6')[0].classList.contains('down')) {
     setTimeout(function() {
       document.getElementsByClassName('dropdown-6')[0].style.overflow = 'visible'
-    }, 500)
+    }, 100)
   } else {
     document.getElementsByClassName('dropdown-6')[0].style.overflow = 'hidden'
   }

diff --git a/index.html b/index.html
@@ -65,11 +65,14 @@
       <h2 class="about-h">About Me</h2>
     </div>
     <div class="about">
-      <h2 class="name">My name is Thanh Nam Tran</h2>
-      <p id="tet">"You are the product of your environment". As an International Student from Vietnam and as the first generation in my family to pursue Bachelor and higher education,
-        I have always been valued my studying abroad as a life-changing experience.
-        Ever since I started college in 2016, Computer Science has gradually become my interest subject.
-        Analytical thinking, data structures, Algorithms, applications intrigue my curiosity and creativity. So, here I am...</p>
+      <h2 class="name">My name is Nam Tran</h2>
+      <p id="tet">"You are the product of your environment".
+        As an International Student from Vietnam and as the first generation in my family to pursue a Bachelor and higher education,
+        I have always been valued my study abroad as a life-changing experience.
+        Ever since I started college in 2016, Computer Science has gradually become my subject of interest.
+        Through data structures, algorithms, data science and visualization, AI, etc... I am able to practice my independent and collaborative work and study.
+        I learn to admire those who master the craftsmanship of creating, designing, and implementing a website or an application.
+        Hopefully, in the near future, I shall too become one of them.</p>
     </div>
     <hr id="bm">
 
@@ -116,8 +119,8 @@ <h2 class="skill-h">Skills & Projects</h2>
           </div>
           <div class="dropdown-1">
             <p class="">C++, C, C#, Python, Java<i class="fa fa-code"></i></p>
-            <p>Project: Adjency Lists<i class="fa fa-github-square"></i></p>
-            <p>Project: Skew Heap Priority Queue<i class="fa fa-github-square "></i></p>
+            <a href="https://github.com/ttran293/Adjacency-Lists"><p>Project: Adjency Lists<i class="fa fa-github-square"></i></p></a>
+            <a href="https://github.com/ttran293/Skew-Heap-Priority-Queue"><p>Project: Skew Heap Priority Queue<i class="fa fa-github-square"></i></p></a>
           </div>
         </div>
 
@@ -127,8 +130,9 @@ <h2 class="skill-h">Skills & Projects</h2>
           </div>
           <div class="dropdown-2">
             <p class="">MySQL, HTML, CSS, JScript<i class="fa fa-code"></i></p>
-            <p>Project: Pluto Realty Database Application<i class="fa fa-database"></i></p>
-            <p>Project: My Website<i class="fa fa-file-code-o"></i></p>
+            <a href="https://github.com/ttran293/my-website"><p>Project: My Website<i class="fa fa-github-square"></i></p></a>
+            <a href="https://github.com/ttran293/pluto-realty-dbms"><p>Project: Pluto Realty Database<i class="fa fa-github-square"></i></p></a>
+
           </div>
         </div>
 
@@ -138,7 +142,7 @@ <h2 class="skill-h">Skills & Projects</h2>
           </div>
           <div class="dropdown-3">
             <p class="">Boostrap, NodeJS, ReactJS<i class="fa fa-code"></i></p>
-            <p>Project:(WIP)<i class="fa fa-file-code-o"></i></p>
+            <p>Project: (WIP)<i class="fa fa-file-code-o"></i></p>
           </div>
         </div>
 
@@ -148,7 +152,7 @@ <h2 class="skill-h">Skills & Projects</h2>
           </div>
           <div class="dropdown-4">
             <p class="">X86-64 Assembly<i class="fa fa-code"></i></p>
-            <p>Project: Tic Tac Toe<i class="fas fa-microchip"></i></p>
+            <a href="https://github.com/ttran293/tictactoe-nasmx86-64"><p>Project: Tic Tac Toe<i class="fa fa-github-square"></i></p></a>
           </div>
         </div>
 
@@ -158,7 +162,7 @@ <h2 class="skill-h">Skills & Projects</h2>
           </div>
           <div class="dropdown-5">
             <p class="">Jira, Confluence, Zephyr Testing<i class="fas fa-wrench"></i></p>
-            <p>Project: Image Pro Capture Interfaces<i class="fas fa-microscope"></i></p>
+            <a href="https://www.mediacy.com/company/news/508-image-pro-now-supports-all-jenoptik-gryphax-cameras"><p>Project: Capture Interfaces<i class="fa fa-camera"></i></p></a>
           </div>
         </div>
 
@@ -167,8 +171,8 @@ <h2 class="skill-h">Skills & Projects</h2>
             <div class="arrow-6"></div>
           </div>
           <div class="dropdown-6">
-            <p class="">Davinci Resolve, Adobe Premiere Pro<i class="fas fa-film"></i></p>
-            <p>Project: Personal Youtube Channel (WIP)<i class="fab fa-youtube"></i></p>
+            <p class="">Davinci Resolve, Adobe Premiere<i class="fas fa-film"></i></p>
+            <p>Project: Personal Channel (WIP)<i class="fab fa-youtube"></i></p>
           </div>
         </div>
 
@@ -183,7 +187,6 @@ <h2 class="skill-h">Skills & Projects</h2>
 
   <script type="text/javascript" src="hello-effect.js"></script>
   <script type="text/javascript" src="dropdown-menu.js"></script>
-
 </body>
 
 <footer>