Small size bootstrap

tin0312 · Sep 24, 2023 · 45a0a2c · 45a0a2c
1 parent 8c15920
commit 45a0a2c
Show file tree

Hide file tree

Showing 7 changed files with 188 additions and 160 deletions.
diff --git a/index.html b/index.html
@@ -7,7 +7,6 @@
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Syne&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@700&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Poppins&family=Roboto:wght@300;700&family=Space+Grotesk&display=swap" rel="stylesheet">
-
     <!-- Bootstrap CSS -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
 
@@ -18,7 +17,6 @@
   <body>
     <div id="root"></div>
     <script type="module" src="/src/main.jsx"></script>
-    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

diff --git a/src/App.css b/src/App.css
@@ -7,9 +7,12 @@ body {
   color: white;
   background-color: #151515;
   font-family: "Syne", sans-serif;
-  height: auto;
 }
-
+.site-wrapper{
+  position: relative;
+  min-height: 100vh;
+  padding-bottom: 6%;
+}
 /* Navigation Bar */
 header {
   display: flex;
@@ -19,10 +22,14 @@ header {
   width: 80%;
   margin: 2% auto 0;
 }
-.nav-bar {
+
+.nav-bar{
   width: 50%;
-  display: flex;
-  justify-content: flex-end;
+  padding-right: 0;
+}
+#custom-toogle{
+  background-color: white;
+  margin-left: auto;
 }
 header .brand-name {
   width: 50%;
@@ -32,7 +39,7 @@ header .brand-name {
   font-weight: 700;
   font-size: 32px;
   color: white;
-  transition: color 3s ease; /* Add a transition for the color property */
+  transition: color 3s ease; 
   text-decoration: none;
   cursor: pointer;
 }
@@ -43,17 +50,17 @@ header a {
   font-weight: 600;
   padding: 1.5rem;
 }
-nav a {
-  color: white;
-  text-shadow: 0 0 20px #00cc00, 0 0 40px #00cc00, 0 0 60px #00cc00;
-  animation: glow 2s infinite;
-  transition: color 1s ease;
-}
 header .brand-name:hover {
   color: green;
 }
-nav a:hover {
-  color: white;
+.nav-bar a {
+  text-shadow: 0 0 20px #00cc00;
+  animation: glow 2s infinite;
+  transition: color 1s ease;
+  padding-right: 0;
+}
+.nav-bar a:hover {
+  color: white !important; 
   text-decoration: none;
   cursor: pointer;
 }
@@ -62,7 +69,17 @@ nav a:hover {
   display: flex;
   align-items: center;
   width: 80%;
-  margin: 7% auto 0;
+  height: auto;
+  margin: 10% auto 0;
+  padding-right: 0;
+  padding-left: 0;
+}
+.home-row{
+  display: flex;
+  justify-content: space-around;
+  margin-right: 0;
+  margin-left: 0;
+  margin-bottom: 20%;
 }
 .greeting {
   font-family: "Space Grotesk", sans-serif;
@@ -94,27 +111,18 @@ nav a:hover {
     width: 100%;
   }
 }
-
-.introduction-container,
-.image-container {
-  height: 100%;
-  width: 50%;
-}
 .introduction-container {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
-  height: 100%;
-  width: 100%;
 }
-.image-container {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
+.avatar-container {
+  padding-right: 0;
+  height: 100%;
 }
 .avatar {
-  width: 420px;
+  width: 60%;
   height: 90%;
   overflow: hidden;
   border-radius: 100px;
@@ -153,51 +161,52 @@ nav a:hover {
 .skill-set-container{
   display: flex;
   margin-top: 5%;
-  height: 80vh;
+  height: 60vh;
 }
 .skill-set-container-one,
 .skill-set-container-two
 {
-  width: 50%;
-  height: 100%;
   display: flex;
   flex-direction: column;
-  gap: 5%;
+  justify-content: space-around;
 }
 .progress-container{
   display: flex;
   gap: 3%;
   align-items: center;
   width: 100%;
 }
-.two{
+/* .two{
   justify-content: flex-end;
-}
+} */
 .progress-bar{
   width: 50% ;
   background-color:#00cc00
 }
 /* Project section*/
 .project-page {
   width: 100vw;
-  margin: 5% auto;
+  margin: 5% auto 0;
   height: auto;
 }
 .project-header {
   width: 80%;
   margin: 0 auto;
+  font-family: "Space Grotesk" sans-serif;
+  font-size: 40px;
+  font-weight: 700;
+  line-height: 88px;
+  letter-spacing: -2.5px;
 }
 .project-container {
   display: flex;
   justify-content: space-between;
   width: 80%;
-  height: auto;
   margin: 2% auto 0;
 }
-.project-section {
-  margin-bottom: 3%;
-  width: 18%;
-  height: 100%;
+.project-section{
+  display: flex;
+  flex-direction: column;
 }
 .image-container{
   width: 100%;
@@ -256,18 +265,17 @@ nav a:hover {
   justify-content: space-around;
   align-items: center;
   background-color: #242424;
-  width: 90%;
-  height: 60vh;
-  margin: 8% auto 0;
+  width: 80%;
+  height: auto;
+  margin: 10% auto 18%;
 }
 .contact-greeting {
-  width: 50%;
-  margin-left: 4%;
+  align-self: center;
 }
 .form-container {
   display: flex;
   justify-content: center;
-  width: 50%;
+  align-items: center;
 }
 .contact-header {
   color: #fff;
@@ -334,12 +342,12 @@ button[type="submit"]::after {
 
 /* Footer */
 .footer-container {
-  position: fixed;
-  bottom: 2%;
+  position: absolute;
+  bottom: 0;
   width: 100%;
   display: flex;
   justify-content: center;
-  gap: 50px;
+  gap: 5%;
   text-shadow: 0 0 20px #00cc00, 0 0 40px #00cc00, 0 0 60px #00cc00;
   animation: glow 2s infinite;
 }