Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

iteration #57

Merged
merged 2 commits into from
Oct 11, 2024
Merged

iteration #57

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b1e53c9
wip
nahiyankhan Oct 11, 2024
b10e8d4
wip
nahiyankhan Oct 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 0 additions & 6 deletions src/alpine.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,12 +53,6 @@ export default (Alpine: Alpine) => {
},
} as ThemeStore);

Alpine.store('header', {
headerHeight: 0,
headerNKHeight: 0,
introNKHeight: 0,
})

Alpine.store('settings', {
open: false,
scale: 1,
Expand Down
30 changes: 13 additions & 17 deletions src/components/Intro.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,38 +1,34 @@
---
import Nahiyan from "@/assets/nahiyan.svg?raw";
import Khan from "@/assets/khan.svg?raw";
import { Icon } from "astro-icon/components";
import AboutSneak from "@/assets/about.gif";
import ThisIsFine from "@/assets/thisisfine.gif";
import BoxLines from "./BoxLines.astro";
import EasterEgg from "./EasterEgg.astro";
---

<div x-data class="nk-transition border-x">
<div
x-data="{ scrollPos: window.pageYOffset }"
@scroll.window="scrollPos = window.pageYOffset"
class="nk-transition overflow-hidden border-x"
>
<div class="flex min-h-[50vh] flex-col">
<div class="mb-14 w-full sm:mb-40">
<div
class="[&_svg]:nk-transition relative -mt-[1px] mb-2 flex w-[fit-content] flex-wrap text-textProminent sm:mb-8 [&_svg]:ml-[-1px] [&_svg]:h-full [&_svg]:w-screen sm:[&_svg]:max-w-screen-sm md:[&_svg]:max-w-screen-md lg:[&_svg]:max-w-screen-lg xl:[&_svg]:max-w-screen-xl 2xl:[&_svg]:max-w-screen-2xl"
x-ref="introNK"
x-init="$store.header.introNKHeight = $refs.introNK.getBoundingClientRect().height"
x-resize="$store.header.introNKHeight = $height"
>
<!-- <div
class="[&_svg]:nk-transition relative -mt-[1px] mb-2 flex w-[fit-content] flex-wrap text-textProminent sm:mb-8 [&_svg]:h-14 sm:[&_svg]:h-[5.5rem] md:[&_svg]:h-[6.5rem] lg:[&_svg]:h-36 xl:[&_svg]:h-[11.5rem] 2xl:[&_svg]:h-56"
x-ref="introNK"
x-init="$store.header.introNKHeight = $refs.introNK.getBoundingClientRect().height"
x-resize="$store.header.introNKHeight = $height"
> -->
<!-- <Fragment set:html={NahiyanKhan} /> -->
<div class="relative mb-2 sm:mb-4 sm:mr-4">
<BoxLines />
<div class="animate-[fadein_.5s_cubic-bezier(0.55,0,1,0.45)_1s_forwards] opacity-0">
<div
class="animate-[fadein_.5s_cubic-bezier(0.55,0,1,0.45)_1s_forwards] opacity-0"
:style="{ transform: `translateX(-${scrollPos}px)` }"
>
<Fragment set:html={Nahiyan} />
</div>
</div>
<div class="relative">
<BoxLines />
<div class="animate-[fadein_.5s_cubic-bezier(0.55,0,1,0.45)_1s_forwards] opacity-0">
<div
class="animate-[fadein_.5s_cubic-bezier(0.55,0,1,0.45)_1s_forwards] opacity-0"
:style="{ transform: `translateX(${scrollPos}px)` }"
>
<Fragment set:html={Khan} />
</div>
</div>
Expand Down
33 changes: 12 additions & 21 deletions src/components/layout/Header.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,54 +1,45 @@
---
import { Icon } from "astro-icon/components";
import NahiyanKhan from "@/assets/nahiyankhan_chonk.svg?raw";
import Nahiyan from "@/assets/nahiyan.svg?raw";
import Khan from "@/assets/khan.svg?raw";
import BoxLines from "../BoxLines.astro";
---

<header
class="nk-transition fixed z-10 h-12 w-full origin-top-left border-y bg-bgColor sm:h-24"
x-ref="header"
x-data="{ endScroll: false, headerHeight: $refs.header.getBoundingClientRect().height, headerNKHeight: $refs.headerNK.getBoundingClientRect().height, scroll: this.headerHeight }"
x-init="$store.header.headerHeight = $refs.header.getBoundingClientRect().height"
x-resize="headerHeight = $height, $store.header.headerHeight = $refs.header.getBoundingClientRect().height"
@scroll.window="scroll = headerHeight - (window.scrollY*headerNKHeight/$store.header.introNKHeight); endScroll = scroll < 0"
x-data
class="nk-transition z-10 mx-2 h-12 w-auto origin-top-left border-y bg-bgColor sm:fixed sm:mx-auto sm:h-24 sm:w-full"
:style="$store.settings.open ? { transform: `translateX(-320px)` } : { transform: `translateX(0px)` }"
>
<div
class="nk-transition container mx-auto flex h-full flex-row justify-between overflow-hidden border-x"
>
<div
class="flex h-full"
:class="{ 'translate-y-[100%]': !endScroll, 'translate-y-0': endScroll }"
:style="!endScroll && { transform: `translateY(${scroll}px)` }"
x-cloak
class="flex h-full opacity-0 sm:animate-[fadein_.5s_cubic-bezier(0.55,0,1,0.45)_1s_forwards]"
>
<div
class="relative flex flex-col justify-between text-textProminent sm:justify-start [&_svg]:h-5 sm:[&_svg]:h-6"
x-ref="headerNK"
x-resize="headerNKHeight = $height"
class="relative flex flex-col justify-between overflow-hidden text-textProminent sm:justify-start [&_svg]:h-5 sm:[&_svg]:h-6"
>
<div class="relative w-max sm:mb-1">
<BoxLines small />
<!-- <BoxLines small /> -->
<Fragment set:html={Nahiyan} />
</div>
<div class="relative mb-[-1px] w-max sm:mb-0">
<BoxLines small />
<!-- <BoxLines small /> -->
<Fragment set:html={Khan} />
</div>
</div>
</div>
<div x-cloak>
<div class="">
<!-- <ThemeToggle /> -->
<div class="w-5 justify-center sm:w-7 md:flex">
<div
class="h-[calc(3rem-2px)] w-[calc(3rem-2px)] animate-[fadein_.5s_cubic-bezier(0.55,0,1,0.45)_1s_forwards] opacity-0 sm:h-7 sm:w-7 md:flex"
>
<button
class="relative h-5 w-5 text-textProminent sm:h-7 sm:w-7"
class="relative flex h-full w-full items-center justify-center text-textProminent sm:h-7 sm:w-7"
type="button"
x-data
@click="$store.settings.toggle()"
>
<Icon aria-hidden="true" class="h-5 w-5 sm:h-7 sm:w-7" focusable="false" name="mdi:cog" />
<Icon aria-hidden="true" class="h-6 w-6 sm:h-7 sm:w-7" focusable="false" name="mdi:cog" />
</button>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/layouts/Base.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ const {
<main
x-data
id="main"
class="nk-transition min-h-screen w-full origin-left pt-12 tracking-wider sm:pt-24"
class="nk-transition min-h-screen w-full origin-left px-2 tracking-wider sm:pt-24"
:style="$store.settings.open ? { transform: `translateX(-320px)` } : { transform: `translateX(0px)` }"
>
<div
Expand Down
Loading