From a8358f7f3dab27e1d326c8cc8a35b985fd0e040e Mon Sep 17 00:00:00 2001
From: YUAN-TSUNG <satoshi.liu@icloud.com>
Date: Thu, 25 Apr 2024 11:49:29 +0900
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20new=20post?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/navBarCommon/index.module.scss     |  19 +-
 src/components/common/navBarCommon/index.tsx  |  13 +-
 .../blog/blogPageContent/index.module.scss    |   1 +
 src/posts/codepen-works-review-01.mdx         | 131 ++++++++++
 src/posts/javascript-note-class.mdx           | 116 ---------
 src/posts/javascript-note.mdx                 | 240 ------------------
 src/styles/globals.scss                       |   4 +-
 7 files changed, 159 insertions(+), 365 deletions(-)
 create mode 100644 src/posts/codepen-works-review-01.mdx
 delete mode 100644 src/posts/javascript-note-class.mdx
 delete mode 100644 src/posts/javascript-note.mdx

diff --git a/src/components/common/navBarCommon/index.module.scss b/src/components/common/navBarCommon/index.module.scss
index a1dc16d..b05da90 100644
--- a/src/components/common/navBarCommon/index.module.scss
+++ b/src/components/common/navBarCommon/index.module.scss
@@ -5,7 +5,7 @@
   left: 0;
   z-index: 1000;
   width: min(100%, 700px);
-  padding: 12px;
+  padding: 8px;
   margin: 10px auto;
   font-family: utils.$font-serif;
   font-size: 16px;
@@ -30,14 +30,19 @@
   @extend %center-items-grid;
 
   z-index: 100;
-  grid-template-columns: repeat(5, 1fr);
+  grid-template-columns: 1fr 1fr 40px 1fr 1fr;
+  gap: 8px;
   padding: 0;
   margin: 0 auto;
   list-style: none;
 }
 
-.icons {
-  height: 30px;
+.nav-item {
+  @extend %center-items-grid;
+
+  width: 100%;
+  height: 100%;
+  border-radius: 100px;
 }
 
 .c-mark-nav {
@@ -51,4 +56,10 @@
 
 .text-link {
   position: relative;
+
+  &.-active {
+    // layer won't work for this
+    text-decoration: underline;
+    text-underline-offset: 4px;
+  }
 }
diff --git a/src/components/common/navBarCommon/index.tsx b/src/components/common/navBarCommon/index.tsx
index 5dc1f10..cfc1ab9 100644
--- a/src/components/common/navBarCommon/index.tsx
+++ b/src/components/common/navBarCommon/index.tsx
@@ -27,7 +27,7 @@ export const NavBarCommon = () => {
   return (
     <nav className={styles['nav-bar']}>
       <ul className={styles['nav-items']}>
-        <li>
+        <li className={styles['nav-item']}>
           <Link
             href="/blog"
             className={classNames(
@@ -38,7 +38,7 @@ export const NavBarCommon = () => {
             BLOG
           </Link>
         </li>
-        <li>
+        <li className={styles['nav-item']}>
           <Link
             href="/portfolio"
             className={classNames(
@@ -65,6 +65,11 @@ export const NavBarCommon = () => {
                 clipRule="evenodd"
                 d="M9.58568 17.5166L-0.000732422 14.4482L2.27473 7.43875L11.8914 10.5168V0.422546H19.3081V10.4873L28.9582 7.33985L31.2727 14.3367L21.6002 17.4915L27.6016 25.6592L21.6101 30L15.6021 21.8235L9.64406 29.9451L3.64918 25.6089L9.58568 17.5166Z"
                 fill={fill}
+                whileHover={{
+                  rotate: 360,
+                  scale: 0.8,
+                  transition: { duration: 1 },
+                }}
                 style={{
                   pathLength,
                 }}
@@ -73,7 +78,7 @@ export const NavBarCommon = () => {
           </Link>
         </li>
 
-        <li>
+        <li className={styles['nav-item']}>
           <Link
             href="/about-me"
             className={classNames(
@@ -84,7 +89,7 @@ export const NavBarCommon = () => {
             ABOUT ME
           </Link>
         </li>
-        <li>
+        <li className={styles['nav-item']}>
           <Link
             href="/and"
             className={classNames(
diff --git a/src/components/pages/blog/blogPageContent/index.module.scss b/src/components/pages/blog/blogPageContent/index.module.scss
index a169e7a..ecde106 100644
--- a/src/components/pages/blog/blogPageContent/index.module.scss
+++ b/src/components/pages/blog/blogPageContent/index.module.scss
@@ -25,6 +25,7 @@
     font-size: 4rem;
     font-weight: 600;
     line-height: 1;
+    cursor: pointer;
     opacity: 0.5;
     transition: all 0.3s ease-in-out;
 
diff --git a/src/posts/codepen-works-review-01.mdx b/src/posts/codepen-works-review-01.mdx
new file mode 100644
index 0000000..4dd7982
--- /dev/null
+++ b/src/posts/codepen-works-review-01.mdx
@@ -0,0 +1,131 @@
+---
+title: Note | CodePen Works Review 01
+date: 2024-04-25 11:39:00
+language: English
+tags:
+  - Programming
+  - Front-end
+  - CSS
+---
+
+I've done quite a bit of Pen this month (mostly because I just started a new job at a different company and have too much time on my hands), including some of the new CSS features mentioned in last year's [CSS Wrapped](https://developer.chrome.com/blog/css-wrapped-2023), some of the features I'm interested in, and simple copies of fancy Pens I saw someone else do online.
+
+## `grid-template-xxx: subgrid`
+
+Subgrid has been a highly discussed topic recently. The alignment needs to be the same within a group, but since the content is dynamically variable, developers have to put in assumptions and worse, dynamically obtain the size of the content. But subgrid solves this problem by making it easy for container components that have no way of knowing each other's content to maintain the same alignment and keep the same content aligned at all times.
+
+Let's look at the following example first.
+
+<PostFrame
+  height="500"
+  scrolling="no"
+  scrolling="no"
+  title="Subgrid"
+  src="https://codepen.io/yuancong-liu/embed/oNOyNRd?default-tab=result&theme-id=dark"
+  frameBorder="no"
+  loading="lazy"
+  allowFullScreen
+/>
+
+When defining column templates or row templates, as opposed to the usual practice of defining a grid for an entire container, when using the subgrid feature, we need to define the grid for each piece of content.
+
+```scss
+// parent container containing the card components
+.container {
+  // ...
+  grid-template-rows: auto auto 200px auto auto;
+  // ...
+}
+
+// card component should take 5 grids vertically
+.card {
+  // ...
+  grid-row: span 5;
+  // ...
+}
+```
+
+## `@starting-style` and transitions for discrete attributes
+
+Using only CSS, markup engineers can't or have a hard time defining the animations and transitions of elements entering or leaving the screen, and often need to resort to JS or animation libraries like framer-motion and GSAP (`autoAlpha` and such). But CSS's new provision of `@starting-style` and support for transition effects on discrete attributes goes some way to solving this problem as in the example below.
+
+<PostFrame
+  height="500"
+  scrolling="no"
+  scrolling="no"
+  title="`@starting-style` and transitions for discrete attributes"
+  src="https://codepen.io/yuancong-liu/embed/eYoKmoK?default-tab=result&theme-id=dark"
+  frameBorder="no"
+  loading="lazy"
+  allowFullScreen
+/>
+
+For the element's entry effect (the transition from `display: none;`), we can now specify it with `@starting-style`.
+
+```scss
+@starting-style {
+  .card {
+    opacity: 0;
+    height: 0;
+  }
+}
+```
+
+For elements leaving the page, there is also native CSS support for transitions to `display: none;`. No need for extra @rules, it's easy to write directly into the properties.
+
+```scss
+@keyframes fade-out {
+  100% {
+    opacity: 0;
+    display: none;
+  }
+}
+```
+
+## Cards with glowing edges
+
+The development of the new company's project uses nuxt.js. I was browsing through the home pages of the various nuxt.js modules and noticed that these cards with glowing edges are everywhere (is it a design guideline from the nuxt organisation...?). . So I made a simple copy.
+
+The main idea behind this kind of card development is to use the `::after` pseudo-class of the card itself and the card container element while tracking the cursor position and assigning values to CSS variables in real time.
+
+<PostFrame
+  height="500"
+  scrolling="no"
+  title="Cards with glowing edges"
+  src="https://codepen.io/yuancong-liu/embed/XWQPjdK?default-tab=result&theme-id=dark"
+  frameBorder="no"
+  loading="lazy"
+  allowFullScreen
+/>
+
+This kind of real-time assignment of values to CSS variables shows up in all sorts of fancy web effects, so why haven't I ever tried it...?
+
+## Variable fonts
+
+Variable fonts also seem to be a pretty popular topic these days (although it's rare to see anyone actually putting them into production).
+
+Variable fonts give front-end engineers finer control over font-weight, slant, font width, and other font properties. For example, the control of font-weight is no longer in steps of 100 but can be in steps of 1. With this feature, the font property, which normally wouldn't do much for it, can now be used to achieve very smooth transitions.
+
+As can be seen by the example below, the axes provided by the font itself can be controlled very granularly.
+
+<PostFrame
+  height="500"
+  scrolling="no"
+  title="Variable fonts"
+  src="https://codepen.io/yuancong-liu/embed/yLrGEJL?default-tab=result&theme-id=dark"
+  frameBorder="no"
+  loading="lazy"
+  allowFullScreen
+/>
+
+Similarly, the cursor position acquisition and CSS variable assignment methods described above can be used to achieve a very stylish font distortion effect.
+
+<PostFrame
+  height="500"
+  scrolling="no"
+  title="Variable fonts with cursor tracking"
+  src="https://codepen.io/yuancong-liu/embed/eYobKaW?default-tab=result&theme-id=dark"
+  frameBorder="no"
+  loading="lazy"
+  allowFullScreen
+/>
diff --git a/src/posts/javascript-note-class.mdx b/src/posts/javascript-note-class.mdx
deleted file mode 100644
index 452781b..0000000
--- a/src/posts/javascript-note-class.mdx
+++ /dev/null
@@ -1,116 +0,0 @@
----
-title: Note | Javascript Note (Class)
-date: 2021-09-18 23:04:50
-language: English
-tags:
-  - Programming
-  - Javascript
-  - Front-end
----
-
-## Basic
-
-```javascript
-class Rectangle {
-  // Setup
-  constructor(_width, _height, _colour) {
-    // whem an instance is generated.
-    this.width = _width;
-    this.height = _height;
-    this.colour = _colour;
-  }
-
-  getArea() {
-    return this.width * this.height;
-  }
-
-  printDescription() {
-    console.log(
-      `I am a rectangle of ${this.width} and ${this.height} and I am ${this.colour}.`,
-    );
-  }
-
-  // Something like a property
-  get twoTimesArea() {
-    return 2 * this.height * this.width;
-  }
-
-  set twoTimesArea(twoTimesArea) {
-    /*
-            For example, if an area is passed to this method,
-            this.width and this.height should be modified respectively.
-
-         */
-  }
-
-  // Example of a static method
-  static equal(a, b) {
-    /*
-            call static method as below:
-            Rectangle.equal(rectangle1, rectangle2);
-            ↑ name of the class
-
-         */
-    return a.width * a.height === b.width * b.height;
-  }
-
-  // This is a static method without instances
-  static isValidDimensions(width, height) {
-    return width === height;
-  }
-}
-```
-
-## Parent and child class
-
-```javascript
-class Person {
-  constructor(_name, _age) {
-    this.name = _name;
-    this.age = _age;
-  }
-
-  describe() {
-    console.log(`I am ${this.name}.`);
-  }
-}
-
-class Programmer extends Person {
-  constructor(_name, _age, _yearOfExperience) {
-    super(_name, _age);
-
-    // New property (Class Person doesn't have this)
-    this.yearOfExperience = _yearOfExperience;
-  }
-
-  // Class Person doesn't have this method
-  code() {
-    console.log(`${this.name} is coding.`);
-  }
-}
-```
-
-## Polymorphism
-
-```javascript
-class Animal {
-  constructor(name) {
-    this.name = name;
-  }
-
-  makeSound() {
-    console.log('Generic animal sound!');
-  }
-}
-
-class Dog extends Animal {
-  constructor(name) {
-    super(name);
-  }
-
-  makeSound() {
-    super.makeSound();
-    console.log('Woof! Woof!');
-  }
-}
-```
diff --git a/src/posts/javascript-note.mdx b/src/posts/javascript-note.mdx
deleted file mode 100644
index b227cc4..0000000
--- a/src/posts/javascript-note.mdx
+++ /dev/null
@@ -1,240 +0,0 @@
----
-title: Note | Javascript Note (Basic)
-date: 2021-09-16 01:04:50
-language: English
-tags:
-  - Programming
-  - Javascript
-  - Front-end
----
-
-## New variable
-
-```javascript
-var myName = 'LYC';
-let ourName = 'some name';
-const pi = 3.14; // not changeable
-```
-
-## Function
-
-```javascript
-function myFunction(times) {
-  for (let i = 0; i < times; i++) {
-    console.log('Heyya!');
-  }
-}
-```
-
-## List operations
-
-```javascript
-myArray = [1, 2, 3];
-myArray.push([4, 5, 6]);
-myArray.shift();
-myArray.unshift([“Hahahaha”, “you”]);
-myArray.pop();
-```
-
-## Scopes
-
-```javascript
-var global = 10; // this is a global variable
-
-function func1() {
-  oopsGlobal = 10; // no "var" so this is also a global variable
-  var local = 10; // this is a local variable
-}
-func1();
-```
-
-## `==` and `===`
-
-```javascript
-let two = 3 == '3'; // true
-let three = 3 === '3'; // false
-let notTwo = 3 != '3'; // false
-let notThree = 3 !== '3'; // true
-```
-
-## `Switch` statement
-
-```javascript
-function caseInSwitch(val) {
-    var ans = ‘’;
-    switch (val) {
-        case 1:
-            ans = ‘alpha’;
-            break;
-        case 2:
-            ans = ‘beta’;
-            break;
-        case 3:
-            ans = ‘delta’;
-            break;
-        case 4:
-            ans = ‘gamma’;
-            break;
-        default:
-            ans = ‘stuff’;
-            break;
-    }
-    return ans;
-}
-```
-
-## Objects → hash table
-
-```javascript
-var ourDog = {
-    “name”: “Camper”,
-    “legs”: 4,
-    “tails”: 1,
-    “family name”: “Potter”,
-    “friends”: [“everything!”]
-};
-
-var myDog = {
-    “name”: “Quincy”,
-    “legs”: 3,
-    “tails”: 1,
-    “friends”: []
-};
-
-// access
-myDog.legs;
-ourDog[“family name”];
-
-// add new properties
-myDog.bark = “bow-wow”;
-ourDog[‘bark’] = “woof”;
-
-// delete properties
-delete myDog.tails; // return “undefined”
-
-// objects can be nested in arrays and objects (vice versa)
-```
-
-## `do while` and `while`
-
-```javascript
-function twoLoops() {
-  do {
-    // operations
-  } while (true);
-
-  while (true) {
-    // operations
-  }
-}
-```
-
-## Anonymous function → arrow function
-
-```javascript
-const magic = () => new Date();
-const myConcat = (arr1, arr2) => arr1.concat(arr2)
-const squareList = (arr) => {
-    const squaredIntegers = arr.filter(num => Number.isInteger(num) && num > 0).map(x => x * x);
-    return squaredIntegers;
-}
-// ???
-const sum = (function() {
-    return function sum(…args) {
-        return args.reduce((a, b) => a + b, 0);
-    }
-}) ()
-```
-
-## Make copy of an array
-
-```javascript
-const arr1 = [‘JAN’, ‘FEB’, ‘MAR’];
-let arr2;
-(function () {
-    arr2 = […arr1]; // make copy
-    arr1[0] = ‘potato’;
-}) ();
-```
-
-## Assign from objects
-
-```javascript
-var voxel = {x: 3, y: 4, z: 5};
-const {x: a, y: b, z: c} = voxel; // a = 3, b = 4, c = 5
-const [alpha, beta, , gamma] = [1, 2, 3, 4] // 1, 2, 4
-
-let first = 8, second = 6;
-(() => {
-    “use strict”;
-    [first, second] = [second, first]
-}) ();
-
-const source = [1, 2, 3, 4, 5, 6];
-function removeFirstTwo(list) {
-    const [ , , …arr] = list;
-    return arr
-} // arr = [3, 4, 5, 6]
-
-const stats= {
-    max: 100,
-    mid: 50,
-    min: 0
-};
-const half = (function () {
-    return function half({ max, min }) {
-        return (max + min) / 2;
-    };
-}) (); // console.log(half(stats))
-```
-
-## Template literals
-
-```javascript
-const person = {
-    name: “Zodiac Hasbro”,
-    age: 56
-}
-const greeting = `Hello, my name is ${person.name}! I am ${person.age} years old.`;
-
-// create a person
-const createPerson = (name, age, gender) => ( { name, age, gender});
-
-// class
-class SpaceShuttle {
-    constructor(targetPlanet) {
-        this.targetPlanet = targetPlanet;
-    }
-}
-```
-
-## Create an object
-
-```javascript
-const createPerson = (name, age, gender) => ({ name, age, gender });
-```
-
-## Class
-
-```javascript
-class SpaceShuttle {
-  constructor(targetPlanet) {
-    this.targetPlanet = targetPlanet;
-  }
-}
-
-// setter and getter
-class book {
-  constructor(author) {
-    this._author = author;
-  }
-  // getter
-  get writer() {
-    return this._author;
-  }
-  // setter
-  set writer(updatedAuthor) {
-    this._author = updatedAuthor;
-  }
-}
-```
diff --git a/src/styles/globals.scss b/src/styles/globals.scss
index 836e18d..92386fd 100644
--- a/src/styles/globals.scss
+++ b/src/styles/globals.scss
@@ -27,6 +27,8 @@ body {
 *,
 ::before,
 ::after {
+  @include remove-scrollbar;
+
   box-sizing: inherit;
   margin: 0;
   line-height: inherit;
@@ -82,4 +84,4 @@ a {
     linear-gradient(90deg, transparent 80px, rgba(241 180 187 / 20%) 81px);
   background-position: center;
   background-size: 81px 81px;
-}
\ No newline at end of file
+}