Core Site

css/style.css

@@ -0,0 +1,263 @@
+@charset "UTF-8";
+
+/* Color */
+:root {
+  --dark-1: #041C32;
+  --dark-2: #04293A;
+  --dark-3: #064663;
+  --accent: #F6AE2D;
+}
+
+.bg-dark-1 {
+  background-color: var(--dark-1);
+}
+
+.bg-dark-2 {
+  background-color: var(--dark-2);
+}
+
+.bg-dark-3 {
+  background-color: var(--dark-3);
+}
+
+.text-accent {
+  color: var(--accent);
+}
+
+.text-white-65 {
+  color: rgba(255, 255, 255, 0.65) !important;
+}
+/* ------------ */
+
+html {
+  height: 100%;
+  scroll-padding-top: calc(4.5rem - 1px);
+}
+
+body {
+  font-family: 'Roboto', sans-serif;
+  overflow: overlay;
+  width: 100%;
+  height: 100%;
+}
+
+/* Link */
+a {
+  text-decoration: none;
+  color: rgba(255, 255, 255, 0.65);
+}
+
+a:hover {
+  color: var(--accent);
+}
+/* ------------ */
+
+/* Button */
+.btn {
+  border-radius: 30px;
+  font-size: 20px;
+  font-weight: 500;
+  overflow: hidden;
+  border-color: var(--accent);
+  background-color: var(--accent);
+  color: white;
+}
+
+.btn.mod {
+  width: 33%;
+}
+
+.btn-block {
+  display: block;
+  width: 100%;
+}
+
+.btn:hover {
+  background-color: var(--accent);
+  border-color: var(--accent);
+  color: white;
+  transition: all 0.3s ease;
+}
+
+.btn:focus {
+  background-color: var(--accent);
+  border-color: var(--accent);
+  color: white;
+}
+
+.btn span {
+  cursor: pointer;
+  display: inline-block;
+  position: relative;
+  transition: 0.5s;
+}
+
+.btn span:after {
+  content: '\00bb';
+  position: absolute;
+  opacity: 0;
+  top: 0;
+  right: -20px;
+  transition: 0.5s;
+}
+
+.btn:hover span {
+  padding-right: 25px;
+}
+
+.btn:hover span:after {
+  opacity: 1;
+  right: 0;
+}
+/* ------------ */
+
+.page-section {
+  padding: 4rem;
+}
+
+.badge:hover {
+  background-color: white;
+  color: black;
+}
+
+.modal-content {
+  background-color: var(--dark-2);
+}
+
+/* Header Section */
+
+@media (min-width: 992px) {
+  header.masthead {
+    height: 100vh;
+    min-height: 40rem;
+    padding-top: 4.5rem;
+    padding-bottom: 0;
+  }
+  header.masthead p {
+    font-size: 1.15rem;
+  }
+  header.masthead h1, header.masthead .h1 {
+    font-size: 3rem;
+  }
+}
+@media (min-width: 1200px) {
+  header.masthead h1, header.masthead .h1 {
+    font-size: 3.5rem;
+  }
+}
+
+@media screen and (max-width: 1200px) {
+  header.masthead {
+    height: 100vh;
+  }
+
+  .head-row {
+    align-content: center;
+  }
+}
+
+/* About Section */
+.about {
+  background-color: var(--dark-2);
+}
+
+/* Skills Section */
+.skills {
+  background-color: var(--dark-1);
+}
+
+.skill .i {
+  color: var(--accent);
+  background-color: var(--accent);
+}
+
+/* Projects Section */
+.projects {
+  background-color: var(--dark-2);
+  width: 100%;
+  padding-left: 10px;
+  padding-right: 10px;
+}
+
+.project {
+  background-color: var(--dark-3);
+  margin: 2rem;
+  padding-left: 0;
+  border-radius: 6px;
+  box-shadow: 0 6px 10px rgba(0,0,0,.08), 0 0 6px rgba(0,0,0,.05);
+      transition: .3s transform cubic-bezier(.155,1.105,.295,1.12),.3s box-shadow,.3s -webkit-transform cubic-bezier(.155,1.105,.295,1.12);
+  cursor: pointer;
+}
+
+.project:hover {
+  transform: scale(1.05);
+  box-shadow: 0 10px 20px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
+}
+
+.project img {
+  max-width:100%;
+  padding: 0;
+}
+
+.project-image {
+  border-top-left-radius: 6px;
+  border-bottom-left-radius: 6px;
+}
+
+.project-text {
+  position: relative;
+  padding-top: 1rem;
+  padding-right: 1rem;
+}
+
+.project-icon {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  justify-content: center;
+}
+
+/* Footer Section */
+.footer {
+  background-color: var(--dark-1);
+}
+
+.fa.test {
+  font-size: 22px;
+  padding: 2rem;
+  padding-bottom: 0rem;
+  color: #7e7e7e;
+}
+
+.fa.test:hover {
+  color: var(--accent);
+}
+
+.social{
+  margin-bottom: 2rem;
+}
+/* ------------------------------------- */
+
+.text-white-75 {
+  color: rgba(255, 255, 255, 0.75) !important;
+}
+
+.divider {
+  height: 0.2rem !important;
+  max-width: 3.25rem;
+  margin: 1.5rem auto;
+  background-color: var(--accent);
+  opacity: 1;
+}
+
+/* Scrollbar */
+::-webkit-scrollbar {
+  width: .45rem;
+}
+::-webkit-scrollbar-thumb {
+  background-color: rgba(255, 255, 255, 0.5);
+  border-radius: 3px;
+}
+::-webkit-scrollbar-track{
+  background: transparent;
+}