update image sizes

scripts/parse.mjs

@@ -53,10 +53,10 @@ class ImageConfig {
     this._placeholderFileSuffix = '';
 
     this._imageFileExtension = 'webp';
-    this._outputImageQuality = 75;
+    this._outputImageQuality = 90;
     this._resizeOptions = {
-      width: 1120,
-      height: 630,
+      width: 1071,
+      height: 459,
     };
     this._outputImageSize = 1;
 

src/data/json/section-overviews-data.json

@@ -1,4 +1,4 @@
 {
-  "projects": "I've chosen four projects from both the beginning and current stage of my learning. By including early works like the Google Calendar Clone, I am in no way trying to showcase the quality of code, but rather, who I am as a developer, and my consistency in delivering high quality work, regardless of whether or not I have the immediate knowledge to do so.",
-  "skills": "My skills as a front-end web developer are a reflection of my relentless effort to push the very basics of web technologies to their limits. I made a conscious decision early to build a foundation that will last, and after two years of daily effort, I began to utilize modern frameworks and libraries like React, Typescript, and Next.js. Although I only have a year and a half of experience with these technologies, I have never felt disadvantaged when working with them, they have only enhanced my ability to build robust, scalable, and maintainable web applications."
+  "projects": "Highlights of my last two years of development.",
+  "skills": "Technologies I've worked with and am proficient in."
 }

src/partials/sections/projects/project-menu.hbs

@@ -25,4 +25,6 @@
       </a>
     </li>
   </ul>
+
+  <span class="span-br-float"></span>
 </div>

src/partials/sections/projects/section-projects.hbs

@@ -5,7 +5,7 @@
   </div>
 
   <div class="section-excerpt" data-section-excerpt="projects">
-    <p class="skeleton-excerpt">lorem</p>
+    <p class="skeleton-excerpt">Polished projects I've worked on in the past few years.</p>
   </div>
 
   {{> sections/projects/project-menu }}
@@ -21,5 +21,5 @@
 
     {{> sections/projects/project-card-no-tabs }}
   </div>
-  
+
 </article>

src/styles/aside/floatingMenu.css

@@ -3,8 +3,10 @@
   width: 100%;
   max-width: var(--max-width-md);
   height: auto;
-  padding: 1rem 0;
-  margin: 1rem auto 3rem auto;
+  padding: 1rem .5rem;
+
+  /* background-color: rgba(6,6,6,.5); */
+  margin: 0 auto 3rem auto;
 }
 
 [data-floating-menu-loaded="false"] * {
@@ -33,8 +35,10 @@
   height: auto;
   min-height: 70px;
   align-items: center;
-  padding: 0 .25rem;
+  padding: .5rem;
+  border: 1px solid var(--black1);
   background: transparent;
+
 }
 
 .float-options li a {
@@ -44,17 +48,18 @@
   align-items: flex-start;
   justify-content: center;
   padding: .5rem;
-  color: var(--white1);
+  color: var(--white3);
   cursor: pointer;
   font-size: 1rem;
   font-weight: 500;
   line-height: 1.2;
+  opacity: .9;
   transition: background .15s ease;
 }
 
 .float-options li a span:first-child::before {
   position: absolute;
-  left: 0;
+  left: .25rem;
   content: attr(data-proj-title-index);
   font-weight: 400;
   letter-spacing: -.05em;
@@ -79,3 +84,9 @@
   transition-property: background, border, text-shadow;
   transition-timing-function: cubic-bezier(.4, 0, .2, 1);
 }
+
+.span-br-float {
+  width: 100%;
+  height: 4px;
+  background: var(--black2);
+}

src/styles/gradients/dividerGradient.css

@@ -28,5 +28,6 @@
 }
 
 .theme__light .section-gradient--l {
+  filter: grayscale(1);
   opacity: .6;
 }

src/styles/header.css

@@ -7,10 +7,13 @@
   max-width: 100vw;
   height: var(--header-height);
   border-bottom: 1px solid rgba(80, 85, 90, 0.15);
+
   /* backdrop-filter: blur(8px); */
+
   /* backdrop-filter: saturate(180%) blur(8px); */
   background: rgba(8,8,8,.9);
-  box-shadow: 0 12px 36px rgba(1, 57, 72, .15);
+
+  /* box-shadow: 0 12px 36px rgba(1, 57, 72, .15); */
 }
 
 .header-wrapper {
@@ -98,9 +101,7 @@
   box-shadow: none;
   color: #fff;
   cursor: pointer;
-  font-size: .875rem;
-
-  /* font-weight: 500; */
+  font-size: .93rem;
   letter-spacing: .02em;
   opacity: .9;
   text-align: center;

src/styles/main.css

@@ -31,7 +31,7 @@
   padding: .5rem;
   color: var(--white3);
   font-family: var(--secondaryFont);
-  font-size: var(--fs4);
+  font-size: var(--fs3);
   font-weight: 900;
   line-height: .65;
   white-space: nowrap;
@@ -44,7 +44,7 @@
 .section-title h3 {
   background-clip: text;
   color: transparent;
-  -webkit-text-stroke: 1px var(--white2);
+  -webkit-text-stroke: 1px var(--grey8);
 
 }
 
@@ -70,7 +70,7 @@
 }
 
 .section-excerpt p {
-  min-height: 160px;
+  min-height: 70px;
   padding: 0 1rem 1rem 0;
   font-size: 1rem;
 }

src/styles/root.css

@@ -29,37 +29,26 @@ I'm using block font-display for basement because it's decorative and scales hor
   src: url('../assets/fonts/neue/NeueMontreal-Medium.woff2') format('woff2');
 }
 
-/* @font-face {
-  font-display: swap;
-  font-family: Inter;
-  font-style: normal;
-  font-weight: 400;
-  src: url('../assets/fonts/inter/inter-v12-latin-regular.woff2') format('woff2');
-}
-
-@font-face {
-  font-display: swap;
-  font-family: Inter;
-  font-style: normal;
-  font-weight: 500;
-  src: url('../assets/fonts/inter/inter-v12-latin-500.woff2') format('woff2');
-} */
-
-
-
 :root {
-  /* --primaryFont: Inter, sans-serif, -apple-system, ui-sans-serif, system-ui, blinkmacsystemfont, segoe ui, roboto, helvetica neue, arial, noto sans, sans-serif, monospace; */
-
   --primaryFont: "Neue", sans-serif, -apple-system, ui-sans-serif, system-ui, blinkmacsystemfont, segoe ui, roboto, helvetica neue, arial, noto sans, sans-serif, monospace;
   --secondaryFont: "basement", georgia, sans-serif, -apple-system, ui-sans-serif, system-ui, blinkmacsystemfont, segoe ui, roboto, helvetica neue, arial, noto sans, sans-serif, monospace;
 
   /* ********************************** */
 
   /* aspect ratio: large project images */
-  --wtvw: 1600px;
-  --htvh: 900px;
-  --wt: 1600;
-  --ht: 900;
+  --wtvw: 1071px;
+  --htvh: 459px;
+  --wt: 1071;
+  --ht: 459;
+
+  /* --wtvw: 1280px;
+  --htvh: 720px;
+  --wt: 1280;
+  --ht: 720; */
+
+  /* --wt: 1600; */
+
+  /* --ht: 900; */
   --ap: calc(var(--wt)/var(--ht));
   --ap2: calc(100% * (var(--ht)/var(--wt)));
 
@@ -115,14 +104,14 @@ I'm using block font-display for basement because it's decorative and scales hor
   /* ********************************** */
 
   /* constants */
+  --intro-offset: 18vh;
+  --header-height: 4rem;
+  --max-width-md: 1080px;
+  --max-width-lg: 1280px;
 
-  /* intro-offset: value to subtract from intro height */
-  --intro-offset: 25vh;
+  /* --max-width-md: 1140px;/ */
 
-  /* --header-height: 68px; */
-  --header-height: 3.85rem;
-  --max-width-md: 1140px;
-  --max-width-lg: 1280px;
+  /* --max-width-lg: 1280px; */
   --br-1: 5px;
   --br-2: 8px;
   --br-3: 10px;
@@ -158,16 +147,20 @@ I'm using block font-display for basement because it's decorative and scales hor
 }
 
 html {
-  font-size: 18px;
+  font-size: 16px;
   line-height: 1.15;
+  scroll-behavior: smooth;
   tab-size: 4;
   text-size-adjust: 100%;
 }
 
 body {
   position: relative;
+
   /* width hack for mobile */
-  width: calc(100vw - calc(100vw - 100%));
+  width: 100%;
+
+  /* width: calc(100vw - calc(100vw - 100%)); */
   background: var(--black0);
   color: var(--white1);
   font-family: var(--primaryFont);
@@ -178,6 +171,8 @@ body {
   line-height: inherit;
   overflow-x: hidden;
   overflow-y: scroll;
+
+  /* -webkit-overflow-scrolling: touch; */
 }
 
 /* GENERAL RESETS
@@ -521,11 +516,12 @@ a[disabled] {
 
 /* adaptive font sizes
 ===================================== */
-@media screen and (max-width: 1020px) {
+
+/* @media screen and (max-width: 1020px) {
   html {
     font-size: 16px;
   }
-}
+} */
 
 /* @media screen and (max-width: 720px) {
   html {

src/styles/sections/sectionprojects/projectCard.css

@@ -2,18 +2,16 @@
   position: relative;
   z-index: 500;
   display: flex;
+  overflow:hidden;
   width: 100%;
   max-width: 100%;
   flex-direction: column;
   padding-top: .5rem;
   border: 1px solid var(--grey2);
   border-radius: var(--br-4);
   margin: 0 auto 0 auto;
-  background: var(--black0);
-  box-shadow: 4px 4px 12px rgba(39, 42, 43, 0.125);
+  box-shadow: 0 24px 43px 0 rgba(173, 179, 192, 0.05);
   scroll-margin-top: 4rem;
-
-  /* overflow:hidden; */
 }
 
 [data-project-cell-loaded="false"] * {
@@ -42,23 +40,24 @@
   width: 100%;
   height: 100%;
   flex-direction: column;
-
 }
 
 .project-content__header {
   position: relative;
   display: grid;
   width: 100%;
-  height: 3.5rem;
+  height: 3rem;  
   align-items: center;
   justify-content: center;
-  padding: .5rem;
+  padding: .25rem .5rem;
   grid-template-columns: 1fr;
 }
 
 .subheader-sm {
   height: 3rem !important;
-  padding: 0 .5rem !important;
+  padding: 0 !important;
+
+  /* padding: 0 .25rem !important; */
 }
 
 /* TABS
@@ -90,8 +89,9 @@
   border-top: 0;
   color: var(--accent-7);
   cursor: pointer;
-  font-size: .9rem;
-  font-weight: 500;
+  font-size: .85rem;
+
+  /* font-weight: 500; */
   letter-spacing: -.03em;
   outline: 1px dotted transparent;
   text-align: center;
@@ -104,12 +104,12 @@
 }
 
 .pc__header-tabs span:last-child label {
-  border-radius: 0 var(--br-2) 0 0;
+  /* border-radius: 0 var(--br-2) 0 0; */
   border-right: none;
 }
 
 .pc__header-tabs span:first-child label {
-  border-radius: var(--br-2) 0 0 0;
+  /* border-radius: var(--br-2) 0 0 0; */
   border-left: none !important;
 }
 
@@ -153,7 +153,7 @@
   width: 100%;
   align-items: flex-start;
   justify-content: space-between;
-  padding: 0 .5rem .5rem .5rem;
+  padding: .25rem .5rem;
 }
 
 .project-content__published {
@@ -267,8 +267,6 @@
   border: 1px solid #111;
   border-radius: var(--br-1);
   background: linear-gradient(to bottom, #222, #111);
-
-  /* background: linear-gradient(to bottom, var(--primary3), #111); */
   color: #fff;
   font-size: .875rem;
   font-weight: 400;