Merge pull request #1 from tedgravlin/website-redesign

Website redesign

css/main.css

@@ -0,0 +1,334 @@
+:root {
+  font-family: Arial;
+  -webkit-tap-highlight-color: transparent;
+  scroll-behavior: smooth;
+  --page-width: 65vw;
+  --body-bg-color: #0f0f0f;
+  --card-bg-color: #222;
+  --accent-color: #448D44;
+  --accent-filter: invert(48%) sepia(69%) saturate(397%) hue-rotate(71deg) brightness(84%) contrast(82%);
+  --accent-filter-inverse: invert(48%) sepia(69%) saturate(397%) hue-rotate(71deg) brightness(0%) contrast(82%);
+  --text-color: rgb(212, 212, 212);
+  color: var(--text-color);
+}
+
+@font-face {
+  src: url("../assets/fonts/ProductSans-Regular.ttf");
+  font-family: "productsans";
+  font-weight: normal;
+  font-display: swap;
+}
+
+/* ----- Body ----- */
+body {
+  overflow: scroll;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  padding: 0;
+  margin: 0;
+  background-color: var(--body-bg-color);
+  background-image: radial-gradient(var(--accent-color), 1px, transparent 1px);
+  background-size: 5vh 5vh;
+}
+
+main {
+  display: grid;
+  grid-template-columns: 100vw;
+}
+
+/* ----- Header ----- */
+header {
+  font-family: productsans;
+  width: var(--page-width);
+  margin: auto auto 1em auto;
+  color: white;
+}
+
+div.header-card {
+  padding: 2em;
+  border-radius: 100px;
+  background-color: var(--card-bg-color);
+  display: grid;
+  grid-template-columns: 25% 75%;
+  align-items: center;
+  animation-name: enterFromTop;
+  animation-duration: 1.5s;
+}
+
+@keyframes enterFromTop {
+  0% {
+    translate: 0px -300px;
+  }
+
+  100% {
+    translate: 0px;
+  }
+}
+
+header img {
+  width: 7.5vw;
+  border-radius: 100%;
+}
+
+header h1 {
+  margin: 0;
+  font-size: 3.5vw;
+}
+
+.header-name {
+  color: var(--accent-color);
+}
+
+/* ----- About/Project Container ----- */
+div.main-content {
+  width: var(--page-width);
+  margin: auto;
+  display: grid;
+  grid-template-columns: 35% 65%;
+  animation-name: enterFromBottom;
+  animation-duration: 1.5s;
+}
+
+div.card {
+  height: 41vh;
+  border-radius: 32px;
+  padding: 2em;
+  background-color: var(--card-bg-color);
+  overflow: scroll;
+  will-change: translate;
+}
+
+div.card h3 {
+  margin-top: 0;
+  font-size: 2.25vh;
+  color: var(--accent-color);
+}
+
+.left {
+  animation-name: enterFromLeft;
+  animation-duration: 1.5s;
+}
+
+.right {
+  margin-left: 1em;
+  animation-name: enterFromBottom;
+  animation-duration: 1.5s;
+}
+
+@keyframes enterFromLeft {
+  0% {
+    translate: -300px 0px 1px;
+  }
+
+  100% {
+    translate: 0px 0px 0px;
+  }
+}
+
+@keyframes enterFromBottom {
+  0% {
+    translate: 0px 300px;
+  }
+
+  100% {
+    translate: 0px;
+  }
+}
+
+/* ----- About Card ----- */
+div.about-button-container {
+  display: grid;
+  grid-template-columns: 0.5fr 0.5fr;
+  column-gap: 1vh;
+  row-gap: 1vh;
+}
+
+a.button-background {
+  background-color: var(--body-bg-color);
+  color: var(--accent-color);
+  border-radius: 24vw;
+  justify-items: center;
+  text-decoration: none;
+  transition: background-color 0.25s ease-in;
+  will-change: background-color;
+}
+
+/* Only show hover effects on devices with cursors (not mobile) */
+@media (hover: hover) and (pointer: fine) {
+  a.button-background:hover {
+    background-color: var(--accent-color);
+    color: black;
+  }
+
+  a.button-background:hover img {
+    filter: var(--accent-filter-inverse);
+  }
+}
+
+div.button-contents {
+  width: min-content;
+  margin: auto;
+  display: grid;
+  grid-template-columns: 0.25fr min-content;
+  align-items: center;
+  column-gap: 0.25em;
+  font-size: 1vw;
+  font-weight: bold;
+}
+
+div.button-contents img {
+  justify-self: right;
+  filter: var(--accent-filter);
+  will-change: filter;
+  width: 1.5vw;
+}
+
+p.about-text {
+  font-size: 2.25vh;
+}
+
+/* ----- Projects Card ----- */
+div.project-card-container {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  column-gap: 1em;
+  row-gap: 1em;
+}
+
+a.project-card {
+  width: 100%;
+  height: 100%;
+  text-decoration: none;
+  color: white;
+  position: relative;
+}
+
+a.project-card img {
+  border-radius: 24px;
+  width: 100%;
+  height: 100%;
+  border: 2px solid rgba(255, 255, 255, 0.125);
+}
+
+a.project-card h4 {
+  margin-top: 0.5em;
+  font-size: 1vw;
+}
+
+div.project-overlay {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 100%;
+  width: 100%;
+  opacity: 0;
+  transition: 0.25s;
+  background-color: rgba(17, 25, 40, 0.75);
+  color: white;
+  border-radius: 24px;
+  backdrop-filter: blur(25px) saturate(100%);
+  border: 2px solid rgba(255, 255, 255, 0.125);
+}
+
+/* Only show hover effects on devices with cursors (not mobile) */
+@media (hover: hover) and (pointer: fine) {
+  a.project-card:hover div.project-overlay {
+    opacity: 1;
+  }
+}
+
+div.project-info {
+  text-align: center;
+  padding: 1em;
+  font-size: 0.9vw;
+}
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+div.card::-webkit-scrollbar,
+body::-webkit-scrollbar {
+  display: none;
+}
+
+/* Hide scrollbar for IE, Edge and Firefox */
+div.card {
+  -ms-overflow-style: none;
+  /* IE and Edge */
+  scrollbar-width: none;
+  /* Firefox */
+}
+
+/* Mobile layout */
+@media (max-width: 500px) {
+  :root {
+    --page-width: 90vw;
+  }
+
+  body {
+    display: block;
+    background-size: 4vh 4vh;
+  }
+
+  main {
+    grid-template-columns: 1fr;
+  }
+
+  div.header-card {
+    column-gap: 1em;
+    padding: 1em;
+    will-change: translate;
+    animation-duration: 1s;
+  }
+
+  header {
+    margin-top: 2em;
+  }
+
+  header img {
+    width: 15vw;
+  }
+
+  header h1 {
+    font-size: 6vw;
+  }
+
+  div.main-content {
+    grid-template-columns: 1fr;
+    row-gap: 1em;
+    will-change: translate;
+    animation-duration: 1s;
+  }
+
+  div.card {
+    height: fit-content;
+  }
+
+  .left {
+    animation-name: enterFromBottom;
+    animation-duration: 1s;
+  }
+
+  .right {
+    margin-left: 0;
+    margin-bottom: 2em;
+    animation-duration: 1.25s;
+  }
+
+  div.project-card-container {
+    grid-template-columns: 1fr;
+  }
+
+  div.button-contents {
+    font-size: 3vw;
+  }
+
+  div.button-contents img {
+    width: 5vw;
+  }
+}