From 7991f706ad8e544d8b2f5e4ba7f5736217fc5dea Mon Sep 17 00:00:00 2001 From: Sayiddd Date: Wed, 11 Mar 2026 21:47:11 +0700 Subject: [PATCH 01/17] CSS Resets (global unocss theme for transition property & timing functions) --- src/styles/main.css | 15 +++++++++++++-- uno.config.ts | 20 ++++++++++++++++---- 2 files changed, 29 insertions(+), 6 deletions(-) diff --git a/src/styles/main.css b/src/styles/main.css index 21d367b..1eed380 100755 --- a/src/styles/main.css +++ b/src/styles/main.css @@ -1,5 +1,7 @@ :root, :host { + --transition-composite: transform, translate, scale, rotate, opacity; + --color-primary: rgba(253, 253, 31, 1); --color-background: rgba(250, 255, 255, 1); --color-foreground: rgba(23, 23, 23, 1); @@ -7,6 +9,12 @@ --image-graph-paper: url('/assets/patterns/graph-paper.svg'); --image-diagonal-lines: url('/assets/patterns/diagonal-lines.svg'); --image-texture: url('/assets/patterns/texture.svg'); + + /* curves */ + --ease-io-quint: cubic-bezier(0.83, 0, 0.17, 1); + --ease-io-circ: cubic-bezier(0.85, 0, 0.15, 1); + --ease-o-expo: cubic-bezier(0.16, 1, 0.3, 1); + --ease-o-back: cubic-bezier(0.34, 1.56, 0.64, 1); } :focus-visible { @@ -60,7 +68,8 @@ html.dark { /* named transitions */ .fade-enter-active, .fade-leave-active { - transition: opacity 0.5s; + transition-property: var(--transition-composite); + transition-duration: 0.5s; } .fade-enter-from, @@ -108,7 +117,9 @@ html.dark { .slide-y-enter-active, .slide-y-leave-active { - transition: all 0.1s ease; + transition-property: var(--transition-composite); + transition-duration: 0.1s; + transition-timing-function: ease; } .slide-y-enter-from { diff --git a/uno.config.ts b/uno.config.ts index 0b0fb55..a2b6f48 100644 --- a/uno.config.ts +++ b/uno.config.ts @@ -18,13 +18,22 @@ export default defineConfig({ ['heading-2', 'text-xl lg:text-3xl md:text-2xl'], ['heading-3', 'text-lg lg:text-2xl md:text-xl'], ['heading-4', 'text-base lg:text-xl md:text-lg'], + ['section-idx', 'p-4 flex snap-(always center) h-full'], ], theme: { colors: { primary: 'var(--color-primary)', background: 'var(--color-background)', foreground: 'var(--color-foreground)', - subtle: 'var(--color-subtle)', + }, + property: { + composite: 'var(--transition-composite)', + }, + ease: { + 'io-quint': 'var(--ease-io-quint)', + 'io-circ': 'var(--ease-io-circ)', + 'o-expo': 'var(--ease-o-expo)', + 'o-back': 'var(--ease-o-back)', }, }, presets: [ @@ -39,13 +48,13 @@ export default defineConfig({ manrope: [ { name: 'Manrope', - weights: ['200', '400', '800'], + weights: ['200', '400', '500', '800'], }, ], jetBMono: [ { name: 'JetBrains Mono', - weights: ['800'], + weights: ['400', '800'], }, ], fugazOne: 'Fugaz One', @@ -61,5 +70,8 @@ export default defineConfig({ transformerDirectives(), transformerVariantGroup(), ], - safelist: 'prose prose-sm m-auto text-left'.split(' '), + safelist: [ + ...'prose prose-sm m-auto text-left'.split(' '), + ...Array.from({ length: 20 }, (_, i) => `duration-${300 + 100 * i}`), + ], }) From dd38705dbd62a2684e0fffa040c469654e8a0c12 Mon Sep 17 00:00:00 2001 From: Sayiddd Date: Wed, 11 Mar 2026 21:52:24 +0700 Subject: [PATCH 02/17] Add explicit hostname for sitemap generation --- vite.config.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/vite.config.ts b/vite.config.ts index 502deb2..eaab3f4 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -100,7 +100,9 @@ export default defineConfig({ reduceInlineStyles: false, }, onFinished() { - generateSitemap() + generateSitemap({ + hostname: 'https://sikhlas.com/', + }) }, }, From 7b46f58288dc1c4d1e507ca1f1dfeb397f0ee5f1 Mon Sep 17 00:00:00 2001 From: Sayiddd Date: Thu, 12 Mar 2026 05:44:17 +0700 Subject: [PATCH 03/17] Change lightmode foreground color & primary color to match arisu kei tone --- public/assets/patterns/diagonal-lines.svg | 2 +- public/assets/patterns/graph-paper.svg | 2 +- public/assets/patterns/texture.svg | 2 +- src/styles/main.css | 22 ++++++++++++++++++---- 4 files changed, 21 insertions(+), 7 deletions(-) diff --git a/public/assets/patterns/diagonal-lines.svg b/public/assets/patterns/diagonal-lines.svg index c5f3ef1..52787e0 100644 --- a/public/assets/patterns/diagonal-lines.svg +++ b/public/assets/patterns/diagonal-lines.svg @@ -4,7 +4,7 @@ Artboard 3 Copy 2 Created with Sketch. - + diff --git a/public/assets/patterns/graph-paper.svg b/public/assets/patterns/graph-paper.svg index 81574a9..886cb55 100644 --- a/public/assets/patterns/graph-paper.svg +++ b/public/assets/patterns/graph-paper.svg @@ -1,6 +1,6 @@ - + diff --git a/public/assets/patterns/texture.svg b/public/assets/patterns/texture.svg index 7a436e3..1b26fa1 100644 --- a/public/assets/patterns/texture.svg +++ b/public/assets/patterns/texture.svg @@ -1,3 +1,3 @@ - + diff --git a/src/styles/main.css b/src/styles/main.css index 1eed380..e43ca18 100755 --- a/src/styles/main.css +++ b/src/styles/main.css @@ -2,9 +2,9 @@ :host { --transition-composite: transform, translate, scale, rotate, opacity; - --color-primary: rgba(253, 253, 31, 1); - --color-background: rgba(250, 255, 255, 1); - --color-foreground: rgba(23, 23, 23, 1); + --color-primary: rgba(255, 115, 185, 1); + --color-background: rgba(236, 237, 238, 1); + --color-foreground: rgba(18, 18, 18, 1); --image-graph-paper: url('/assets/patterns/graph-paper.svg'); --image-diagonal-lines: url('/assets/patterns/diagonal-lines.svg'); @@ -24,7 +24,7 @@ } html.dark { - --color-primary: rgba(34, 187, 255, 1); + --color-primary: rgba(102, 255, 217, 1); --color-background: rgba(19, 20, 21, 1); --color-foreground: rgba(237, 237, 237, 1); @@ -65,6 +65,20 @@ html.dark { height: 1rem; } +/* custom */ +.composite-property { + transition-property: var(--transition-composite); +} + +.on-visible-stretch { + transform-origin: bottom; + transition-property: var(--transition-composite); + transition-duration: 0.5s; + transition-timing-function: var(--ease-o-back); + opacity: 0; + transform: scaleY(0); +} + /* named transitions */ .fade-enter-active, .fade-leave-active { From 80c574a62ed13e976ea87b40a7f769ff486a92ef Mon Sep 17 00:00:00 2001 From: Sayiddd Date: Thu, 12 Mar 2026 05:45:32 +0700 Subject: [PATCH 04/17] Change unocss ease prefixes --- uno.config.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/uno.config.ts b/uno.config.ts index a2b6f48..18046ec 100644 --- a/uno.config.ts +++ b/uno.config.ts @@ -30,10 +30,10 @@ export default defineConfig({ composite: 'var(--transition-composite)', }, ease: { - 'io-quint': 'var(--ease-io-quint)', - 'io-circ': 'var(--ease-io-circ)', - 'o-expo': 'var(--ease-o-expo)', - 'o-back': 'var(--ease-o-back)', + 'in-out-quint': 'var(--ease-io-quint)', + 'in-out-circ': 'var(--ease-io-circ)', + 'out-expo': 'var(--ease-o-expo)', + 'out-back': 'var(--ease-o-back)', }, }, presets: [ From c39edad8ef67d454a6f4d17e194670a1d8d7da9a Mon Sep 17 00:00:00 2001 From: Sayiddd Date: Thu, 12 Mar 2026 06:50:58 +0700 Subject: [PATCH 05/17] Replace TheHeader component with NavOverlay --- src/components/NavOverlay.vue | 32 +++++ src/components/TheHeader.vue | 216 ---------------------------------- 2 files changed, 32 insertions(+), 216 deletions(-) create mode 100644 src/components/NavOverlay.vue delete mode 100644 src/components/TheHeader.vue diff --git a/src/components/NavOverlay.vue b/src/components/NavOverlay.vue new file mode 100644 index 0000000..e317993 --- /dev/null +++ b/src/components/NavOverlay.vue @@ -0,0 +1,32 @@ + + +
+ + +
+ + + + +
+
+ + diff --git a/src/components/TheHeader.vue b/src/components/TheHeader.vue deleted file mode 100644 index 84017b1..0000000 --- a/src/components/TheHeader.vue +++ /dev/null @@ -1,216 +0,0 @@ - - - - - From fedde44992b1da8b27688b2277927ae1384df11b Mon Sep 17 00:00:00 2001 From: Sayiddd Date: Thu, 12 Mar 2026 06:53:06 +0700 Subject: [PATCH 06/17] Replace AboutFooter component with global FooterOverlay --- src/components/FooterOverlay.vue | 18 ++++++++++++++++++ src/components/partials/about/AboutFooter.vue | 15 --------------- 2 files changed, 18 insertions(+), 15 deletions(-) create mode 100644 src/components/FooterOverlay.vue delete mode 100644 src/components/partials/about/AboutFooter.vue diff --git a/src/components/FooterOverlay.vue b/src/components/FooterOverlay.vue new file mode 100644 index 0000000..8492e73 --- /dev/null +++ b/src/components/FooterOverlay.vue @@ -0,0 +1,18 @@ + + + diff --git a/src/components/partials/about/AboutFooter.vue b/src/components/partials/about/AboutFooter.vue deleted file mode 100644 index decaced..0000000 --- a/src/components/partials/about/AboutFooter.vue +++ /dev/null @@ -1,15 +0,0 @@ - From 5a1afea11651ca706d423c9c7ac11f0eb2276bd4 Mon Sep 17 00:00:00 2001 From: Sayiddd Date: Thu, 12 Mar 2026 07:54:45 +0700 Subject: [PATCH 07/17] Add partial component FooterBackground for FooterOverlay decoration background --- src/components/partials/FooterBackground.vue | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 src/components/partials/FooterBackground.vue diff --git a/src/components/partials/FooterBackground.vue b/src/components/partials/FooterBackground.vue new file mode 100644 index 0000000..8742c25 --- /dev/null +++ b/src/components/partials/FooterBackground.vue @@ -0,0 +1,3 @@ + From c5efa3587bb27d905b5ec0c98b248e2a54ea20ef Mon Sep 17 00:00:00 2001 From: Sayiddd Date: Thu, 12 Mar 2026 07:56:31 +0700 Subject: [PATCH 08/17] Add global component AppLogo as logo --- src/components/AppLogo.vue | 79 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 79 insertions(+) create mode 100644 src/components/AppLogo.vue diff --git a/src/components/AppLogo.vue b/src/components/AppLogo.vue new file mode 100644 index 0000000..48f6c3e --- /dev/null +++ b/src/components/AppLogo.vue @@ -0,0 +1,79 @@ + + + + + From 9a777313572ae7865905af7c0a20bb7b345d90bf Mon Sep 17 00:00:00 2001 From: Sayiddd Date: Thu, 12 Mar 2026 08:08:08 +0700 Subject: [PATCH 09/17] Add global component HeaderOverlay --- src/components/HeaderOverlay.vue | 163 +++++++++++++++++++++++++++++++ 1 file changed, 163 insertions(+) create mode 100644 src/components/HeaderOverlay.vue diff --git a/src/components/HeaderOverlay.vue b/src/components/HeaderOverlay.vue new file mode 100644 index 0000000..33ff2bc --- /dev/null +++ b/src/components/HeaderOverlay.vue @@ -0,0 +1,163 @@ + + + + + From 86c0fa95ec2095478102f358057029db51477a42 Mon Sep 17 00:00:00 2001 From: Sayiddd Date: Thu, 12 Mar 2026 10:20:58 +0700 Subject: [PATCH 10/17] Update about page with separate components Partial component changes: +AboutSection, +SocialCard, +DefaultCard, -ExternalIndicator --- src/components.d.ts | 10 ++++- .../partials/about/AboutSection.vue | 40 +++++++++++++++++++ .../partials/about/BackgroundText.vue | 6 +-- src/components/partials/about/DefaultCard.vue | 15 +++++++ .../partials/about/ExternalIndicator.vue | 12 ------ src/components/partials/about/SocialCard.vue | 13 ++++++ src/pages/about.vue | 22 +++------- 7 files changed, 85 insertions(+), 33 deletions(-) create mode 100644 src/components/partials/about/AboutSection.vue create mode 100644 src/components/partials/about/DefaultCard.vue delete mode 100644 src/components/partials/about/ExternalIndicator.vue create mode 100644 src/components/partials/about/SocialCard.vue diff --git a/src/components.d.ts b/src/components.d.ts index 6e1f7e7..b6f7aac 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -8,13 +8,19 @@ export {} /* prettier-ignore */ declare module 'vue' { export interface GlobalComponents { - AboutFooter: typeof import('./components/partials/about/AboutFooter.vue')['default'] + AboutSection: typeof import('./components/partials/about/AboutSection.vue')['default'] + AppLogo: typeof import('./components/AppLogo.vue')['default'] BackgroundText: typeof import('./components/partials/about/BackgroundText.vue')['default'] - ExternalIndicator: typeof import('./components/partials/about/ExternalIndicator.vue')['default'] + DefaultCard: typeof import('./components/partials/about/DefaultCard.vue')['default'] + FooterBackground: typeof import('./components/partials/FooterBackground.vue')['default'] + FooterOverlay: typeof import('./components/FooterOverlay.vue')['default'] + HeaderOverlay: typeof import('./components/HeaderOverlay.vue')['default'] LayoutDivider: typeof import('./components/partials/LayoutDivider.vue')['default'] + NavOverlay: typeof import('./components/NavOverlay.vue')['default'] PreviousButton: typeof import('./components/partials/PreviousButton.vue')['default'] RouterLink: typeof import('vue-router')['RouterLink'] RouterView: typeof import('vue-router')['RouterView'] + SocialCard: typeof import('./components/partials/about/SocialCard.vue')['default'] SocialLink: typeof import('./components/partials/about/SocialLink.vue')['default'] TheHeader: typeof import('./components/TheHeader.vue')['default'] ToggleButton: typeof import('./components/partials/ToggleButton.vue')['default'] diff --git a/src/components/partials/about/AboutSection.vue b/src/components/partials/about/AboutSection.vue new file mode 100644 index 0000000..47f4a13 --- /dev/null +++ b/src/components/partials/about/AboutSection.vue @@ -0,0 +1,40 @@ + + + + + diff --git a/src/components/partials/about/BackgroundText.vue b/src/components/partials/about/BackgroundText.vue index 5f9ad70..8265cbb 100644 --- a/src/components/partials/about/BackgroundText.vue +++ b/src/components/partials/about/BackgroundText.vue @@ -10,8 +10,8 @@ const isVisible = useElementVisibility(ref) From 31b5e34bde316f4a4a02e78b79d164ddf5c98048 Mon Sep 17 00:00:00 2001 From: Sayiddd Date: Thu, 12 Mar 2026 10:27:13 +0700 Subject: [PATCH 11/17] Modify default layout styles, 'overlay' components & useScroll state additions --- src/layouts/default.vue | 93 +++++++++++++++++++++++++++++------------ 1 file changed, 66 insertions(+), 27 deletions(-) diff --git a/src/layouts/default.vue b/src/layouts/default.vue index 05428b4..f5bc349 100644 --- a/src/layouts/default.vue +++ b/src/layouts/default.vue @@ -1,46 +1,84 @@ diff --git a/src/pages/index.vue b/src/pages/index.vue index 6878425..67f89bd 100644 --- a/src/pages/index.vue +++ b/src/pages/index.vue @@ -1,28 +1,10 @@ + + + + diff --git a/src/typed-router.d.ts b/src/typed-router.d.ts index f44a37a..8dcef89 100644 --- a/src/typed-router.d.ts +++ b/src/typed-router.d.ts @@ -21,5 +21,6 @@ declare module 'vue-router/auto-routes' { '/': RouteRecordInfo<'/', '/', Record, Record>, '/[...all]': RouteRecordInfo<'/[...all]', '/:all(.*)', { all: ParamValue }, { all: ParamValue }>, '/about': RouteRecordInfo<'/about', '/about', Record, Record>, + '/work/[slug]': RouteRecordInfo<'/work/[slug]', '/work/:slug', { slug: ParamValue }, { slug: ParamValue }>, } } From ee531a3f54130882ba0a978f675523479e8ec5e3 Mon Sep 17 00:00:00 2001 From: Sayiddd Date: Thu, 12 Mar 2026 11:51:06 +0700 Subject: [PATCH 15/17] Remove & replace explicit global class 'composite-property' with true global transition-property --- src/components/HeaderOverlay.vue | 4 ++-- src/components/partials/PreviousButton.vue | 19 +++++++++++++------ src/components/partials/ToggleButton.vue | 10 ++++++---- .../partials/about/BackgroundText.vue | 2 +- src/components/partials/about/SocialCard.vue | 2 +- .../partials/index/IndexThirdSection.vue | 2 +- src/styles/main.css | 14 -------------- 7 files changed, 24 insertions(+), 29 deletions(-) diff --git a/src/components/HeaderOverlay.vue b/src/components/HeaderOverlay.vue index 33ff2bc..84b592f 100644 --- a/src/components/HeaderOverlay.vue +++ b/src/components/HeaderOverlay.vue @@ -91,7 +91,7 @@ const notTopBottom = computed(() => {