diff --git a/bun.lockb b/bun.lockb index 19ffb20..77769e6 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/content/profile/aungmyatmoe.mdx b/content/profile/aungmyatmoe.mdx new file mode 100644 index 0000000..9cbc21d --- /dev/null +++ b/content/profile/aungmyatmoe.mdx @@ -0,0 +1,29 @@ +--- +name: Aung Myat Moe +description: I'm a Tech Lead and building sustainable Microservices. +image: "https://avatars.githubusercontent.com/u/65492233?s=400&u=ce98093c5b78320d3b7e7d11918dc627390b1f4d&v=4" +tags: + - JavaScript + - PHP + - Tailwind + - Golang + - Rust + - Clang + - Python + - BASH +--- + +
+ + +
\ No newline at end of file diff --git a/package.json b/package.json index 1ebe558..07fab4a 100644 --- a/package.json +++ b/package.json @@ -50,6 +50,7 @@ "sass": "^1.69.4", "shiki": "^0.14.5", "tailwind-merge": "^1.14.0", + "three": "^0.157.0", "typed.js": "^2.0.16" }, "devDependencies": { diff --git a/src/styles/globals.scss b/src/styles/globals.scss index 25d6bc4..5639751 100644 --- a/src/styles/globals.scss +++ b/src/styles/globals.scss @@ -14,3 +14,7 @@ @import "profiles/lwinmoepaing"; @import "profiles/vince"; +@import "profiles/aungmyatmoe"; + + + diff --git a/src/styles/profiles/_aungmyatmoe.scss b/src/styles/profiles/_aungmyatmoe.scss new file mode 100644 index 0000000..4c0e469 --- /dev/null +++ b/src/styles/profiles/_aungmyatmoe.scss @@ -0,0 +1,149 @@ +@property --scroll-position { + syntax: ""; + inherits: true; + initial-value: 0; +} +@property --scroll-position-delayed { + syntax: ""; + inherits: true; + initial-value: 0; +} + +@keyframes adjust-pos { + to { + --scroll-position: 1; + --scroll-position-delayed: 1; + } +} + +:root { + animation: adjust-pos linear both; + animation-timeline: scroll(root); +} + +body { + transition: --scroll-position-delayed 0.15s linear; + --scroll-velocity: calc(var(--scroll-position) - var(--scroll-position-delayed)); +} + + +html { + background: #666; +} + +html { + scroll-snap-type: y mandatory; +} + +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +ul { + list-style: none; + pointer-events: none; + line-height: 1; + display: block; +} + +ul li { + display: block; + line-height: 1; +} + +.panel { + scroll-snap-align: center; + height: 80dvh; + border: 2px solid #333; + background: rgb(0 0 0 / 0.15); + z-index: -1; +} + +.panel img { + display: block; + width: 100%; + height: 100%; + object-fit: cover; + filter: brightness(30%); +} + +@keyframes slide-up { + to { + translate: 0 var(--end-pos); + } +} + +.titles { + position: fixed; + z-index: 2; + top: 50dvh; + font-size: 25dvh; + left: 0; + right: 0; + text-align: center; + + animation: slide-up linear; + animation-timeline: scroll(root block); + + font-family: impact; + text-transform: uppercase; + letter-spacing: 1px; + + /* Calculate the part each child can occupy. + For 8 children, that’s 12.5% + */ + --num-children: 8; + --num-children-1: calc(var(--num-children) - 1); + --size-per-child: calc(100% / var(--num-children)); + + /* Because the text needs to be in the dead center, + we need to shift up the whole thing by half the size per child. + If not, it would start with the top edge of the whole box + aligned to the center. We want the text to be centered. + So in the case of 8 items that is from -6.25% to to -(100% - 6.25%). + This range still spans 100% in total, but it is slightly shifted up. + */ + --half-size-per-child: calc(var(--size-per-child) / 2); + --start-pos: calc(var(--half-size-per-child) * -1); + --end-pos: calc(-100% + var(--half-size-per-child)); + translate: 0 var(--start-pos); +} + +.titles.transparent { + color: transparent; + -webkit-text-stroke: 1px rgb(255 255 255 / 0.7); + text-stroke: 1px rgb(255 255 255 / 0.7); +} + +.titles.fill { + color: hotpink; + + /* Determine which element is currently in view. We do this based + on the current scroll-distance (exposed via --y-pos) and how + much space each child takes up. + */ + --y-per-child: calc(1 / var(--num-children)); + --cur-child: calc((var(--scroll-position) / var(--y-per-child)) + 1); + --cur-child-1: calc(var(--cur-child) - 1); + + /* To adjust the clip path we need to adjust the total range + that is spanned. + */ + --clip-min: 0; + --clip-max: calc(100% - var(--size-per-child)); + --clip-per-child: calc(var(--clip-max) / var(--num-children)); + --fix: calc(var(--clip-per-child) / 8); /* Not sure why I need a fix like this ¯\_(ツ)_/¯ */ + --extra: 1%; + clip-path: inset( + calc((var(--cur-child-1) * var(--clip-per-child)) - var(--extra)) 0% calc((100% - (var(--cur-child) * var(--clip-per-child)) - var(--fix)) - var(--extra)) 0% + ); +} + +/* And now, for the late scrolling part …*/ +.titles li { + will-change: transform; + transform-origin: 50% 50%; + transform: skewY(calc(var(--scroll-velocity) * -75deg)); +}