Uploaded portfolio template by artofpilgrim

pixelstoriez · Jun 25, 2024 · 346fbc8 · 346fbc8
commit 346fbc8
Show file tree

Hide file tree

Showing 47 changed files with 3,182 additions and 0 deletions.
diff --git a/CSS/aboutstyle.css b/CSS/aboutstyle.css
@@ -0,0 +1,184 @@
+/* Basic reset for margin and padding */
+html, body {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+}
+
+*, *::before, *::after {
+    box-sizing: inherit;
+}
+
+body {
+    font-family: Montserrat, sans-serif;
+    background-color: #121212;
+    color: #d7d7d7;
+    display: flex;
+    flex-direction: column;
+    height: 100vh; /* Full viewport height */
+    overflow: auto; /* Enable scrolling for the whole body */
+}
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+html::-webkit-scrollbar {
+    display: none;
+}
+
+/* Hide scrollbar for IE and Edge */
+html {
+    -ms-overflow-style: none;  /* IE and Edge */
+}
+
+body {
+    overflow-y: scroll; /* Allows vertical scrolling */
+}
+
+h1 {
+    font-size: 20px;
+    margin: 0;
+    margin-bottom: 5px;
+    color: white;
+    -webkit-user-select: none; /* Safari */
+    user-select: none;
+    font-weight: 400;
+    text-align: left; /* Ensure all h1 elements are aligned to the left */
+}
+
+h2 {
+    font-size: 16px;
+    margin: 0;
+    color: grey;
+    font-family: 'Poppins', sans-serif;
+    font-weight: 400;
+    -webkit-user-select: none; /* Safari */
+    user-select: none;
+}
+
+.top-container {
+    flex: 0 0 auto; /* Adjust the height as needed */
+    display: flex;
+    flex-direction: column-reverse;
+    justify-content: flex-end;
+    align-items: center;
+    padding-top: 10px;
+    border-bottom: 1px solid #2e2e2e;
+}
+
+hr {
+    opacity: .05;
+}
+
+.bottom-container {
+    flex: 1; /* Take up remaining space */
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 20px;
+    background-color: #151515;
+    width: 100%;
+    gap: 10px;
+    border-radius: 5px;
+}
+
+.horizontal-container {
+    width: 65%; /* Adjust the width as needed */
+    margin: auto;
+}
+
+.panel-title {
+    font-size: 24px;
+    margin-bottom: 10px;
+    color: #d7d7d7;
+    text-align: left; /* Align panel titles to the left */
+}
+
+p {
+    font-size: 16px;
+    line-height: 1.4;
+    color: grey;
+}
+
+.summary-panel p {
+    text-align: justify;
+}
+
+.navigation-buttons {
+    display: flex;
+    gap: 1rem;
+    justify-content: center; /* Ensure buttons are centered */
+    padding-bottom: 0; /* No padding at the bottom */
+}
+
+.nav-button {
+    background-color: inherit;
+    border: none;
+    color: grey;
+    font-family: 'Poppins', sans-serif;
+    text-decoration: none;
+    cursor: pointer;
+    padding: 10px;
+    margin-right: 10px;
+    font-size: 14px;
+    border-radius: .9em .9em 0 0;
+    transition: ease 0.5s;
+}
+
+.nav-button.active, .nav-button:hover {
+    background-color: #171717;
+    color: #f5ba13;
+}
+
+@media (max-width: 600px) {
+    body {
+        font-size: 14px; /* Adjust the base font size for better readability on small screens */
+    }
+
+    h1 {
+        font-size: 18px; /* Smaller font size for headings on mobile */
+        text-align: center; /* Center align headings for better presentation on mobile */
+    }
+
+    h2 {
+        font-size: 14px; /* Smaller font size for subheadings on mobile */
+        text-align: center; /* Center align subheadings for better presentation on mobile */
+    }
+
+    .top-container {
+        padding-top: 10px;
+        border-bottom: 1px solid #2e2e2e;
+    }
+
+    .bottom-container {
+        padding: 10px; /* Reduce padding for better fit on mobile */
+        gap: 5px; /* Reduce gap for better fit on mobile */
+    }
+
+    .horizontal-container {
+        width: 90%; /* Increase width to better fit mobile screens */
+        margin: 0 5%; /* Center the container */
+    }
+
+    .panel-title {
+        font-size: 20px; /* Adjust font size for panel titles on mobile */
+        text-align: center; /* Center align panel titles for better presentation on mobile */
+    }
+
+    p {
+        font-size: 14px; /* Adjust font size for paragraphs on mobile */
+        line-height: 1.6; /* Increase line height for better readability on mobile */
+    }
+
+    .navigation-buttons {
+        flex-direction: row; /* Stack navigation buttons vertically on mobile */
+        gap: 0.5rem; /* Adjust gap for better spacing on mobile */
+    }
+
+    .nav-button {
+        font-size: 12px; /* Adjust font size for navigation buttons on mobile */
+        padding: 8px; /* Reduce padding for better fit on mobile */
+        margin-right: 0; /* Remove margin for better fit on mobile */
+        border-radius: .5em .5em 0 0; /* Adjust border radius for better look on mobile */
+    }
+}
diff --git a/CSS/b2t.css b/CSS/b2t.css
@@ -0,0 +1,19 @@
+.back-to-top-button {
+    display: none; /* Initially hidden */
+    position: fixed;
+    bottom: 20px;
+    z-index: 100;
+    background-color: #3333337a;
+    color: #fff;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 16px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
+    transition: background-color 0.3s;
+  }
+
+  .back-to-top-button:hover {
+    background-color: #121212;
+  }
diff --git a/CSS/indexstyle.css b/CSS/indexstyle.css
@@ -0,0 +1,157 @@
+/* General Reset */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+/* Hide scrollbar for Chrome, Safari, and Opera */
+html::-webkit-scrollbar {
+  display: none;
+}
+
+/* Hide scrollbar for IE, Edge */
+html {
+  -ms-overflow-style: none;  /* IE and Edge */
+}
+
+
+/* Body Styling */
+html, body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden; /* Prevent horizontal overflow */
+  box-sizing: border-box;
+}
+
+body {
+  font-family: Montserrat, sans-serif;
+  background-color: #121212;
+  color: #d7d7d7;
+  display: flex;
+  flex-direction: column;
+}
+
+h1 {
+  font-size: 20px;
+  margin: 0;
+  margin-bottom: 5px;
+  color: #d7d7d7;
+  -webkit-user-select: none; /* Safari */
+  user-select: none;
+}
+
+h2 {
+  font-size: 16px;
+  margin: 0;
+  color: grey;
+  font-family: 'Poppins', sans-serif;
+  font-weight: 400;
+  -webkit-user-select: none; /* Safari */
+  user-select: none;
+}
+
+.main-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  flex: 1;
+  overflow-y: auto; /* Ensure main container scrolls if necessary */
+}
+
+.top-container {
+  flex: 0 0 auto; /* Adjust the height as needed */
+  display: flex;
+  flex-direction: column-reverse;
+  justify-content: flex-end;
+  align-items: center;
+  padding-top: 10px;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  border-bottom: 1px solid #2e2e2e;
+}
+
+.navigation-buttons {
+  display: flex;
+  gap: 0.5rem;
+  justify-content: center; /* Ensure buttons are centered */
+  padding-bottom: 0; /* No padding at the bottom */
+}
+
+.nav-button {
+  background-color: inherit;
+  border: none;
+  color: grey;
+  font-family: 'Poppins', sans-serif;
+  text-decoration: none;
+  cursor: pointer;
+  padding: 10px;
+  margin-right: 10px;
+  font-size: 14px;
+  border-radius: .9em .9em 0 0;
+  transition: ease 0.5s;
+}
+
+.nav-button.active, .nav-button:hover {
+  background-color: #171717;
+  color: #edb049;
+}
+
+.bottom-container {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  padding: 10px;
+  background-color: #151515;
+  border-radius: 5px;
+  width: 100%;
+  margin-top: 0; /* No margin at the top */
+}
+
+@media (max-width: 600px) {
+  body {
+    font-size: 14px; /* Adjust the base font size for better readability on small screens */
+  }
+
+  h1 {
+      font-size: 18px; /* Adjust font size for mobile */
+      text-align: center; /* Center align text for better readability on mobile */
+  }
+
+  h2 {
+      font-size: 14px; /* Adjust font size for mobile */
+      text-align: center; /* Center align text for better readability on mobile */
+  }
+
+  .main-container {
+      overflow-y: auto; /* Ensure main container scrolls if necessary */
+      padding-top: 5px;/* Add padding for better spacing on mobile */
+  }
+
+  .top-container {
+      padding-top: 5px; /* Adjust padding for mobile */
+      border-bottom: 1px solid #2e2e2e;
+  }
+
+  .navigation-buttons {
+    flex-direction: row; /* Stack navigation buttons vertically on mobile */
+    gap: 0.5rem; /* Adjust gap for better spacing on mobile */
+}
+
+.nav-button {
+    font-size: 12px; /* Adjust font size for navigation buttons on mobile */
+    padding: 8px; /* Reduce padding for better fit on mobile */
+    margin-right: 0; /* Remove margin for better fit on mobile */
+    border-radius: .5em .5em 0 0; /* Adjust border radius for better look on mobile */
+}
+
+  .bottom-container {
+      background-color: #171717;
+      padding: 8px; /* Adjust padding for mobile */
+      border-radius: 5px; /* Maintain border radius for consistent look */
+      margin-top: 0; /* Add margin at the top for spacing */
+  }
+}
diff --git a/CSS/main.css b/CSS/main.css
@@ -0,0 +1,13 @@
+/* main.css */
+@import url('projectsstyle.css');
+@import url('userinformationstyle.css');
+@import url('tagsstyle.css');
+@import url('statsstyle.css');
+@import url('b2t.css');
+@import url('navigation.css');
+@import url('slider.css');
+@import url('readmore.css');
+@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0');
+@import url('https://fonts.googleapis.com/css2?family=Material+Icons');
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
+@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css');