initial-commit

2026-06-02 12:23:34 -04:00 · 2026-06-02 12:23:34 -04:00 · c679e0b967
commit c679e0b967
42 changed files with 6275 additions and 0 deletions
--- a/.env
+++ b/.env
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,36 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.tsbuildinfo
+
+.eslintcache
+
+# Cypress
+/cypress/videos/
+/cypress/screenshots/
+
+# Vitest
+__screenshots__/
--- a/.nvmrc
+++ b/.nvmrc
@ -0,0 +1 @@
+24
--- a/README.md
+++ b/README.md
@ -0,0 +1,38 @@
+# nicwands.com
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VS Code](https://code.visualstudio.com/) + [Vue (Official)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+
+## Recommended Browser Setup
+
+- Chromium-based browsers (Chrome, Edge, Brave, etc.):
+    - [Vue.js devtools](https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)
+    - [Turn on Custom Object Formatter in Chrome DevTools](http://bit.ly/object-formatters)
+- Firefox:
+    - [Vue.js devtools](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/)
+    - [Turn on Custom Object Formatter in Firefox DevTools](https://fxdx.dev/firefox-devtools-custom-object-formatters/)
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vite.dev/config/).
+
+## Project Setup
+
+```sh
+npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+### Compile and Minify for Production
+
+```sh
+npm run build
+```
--- a/index.html
+++ b/index.html
@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="">
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" href="/favicon.png" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Vite App</title>
+    </head>
+    <body>
+        <div id="app"></div>
+        <script type="module" src="/src/main.js"></script>
+    </body>
+</html>
--- a/jsconfig.json
+++ b/jsconfig.json
@ -0,0 +1,8 @@
+{
+    "compilerOptions": {
+        "paths": {
+            "@/*": ["./src/*"]
+        }
+    },
+    "exclude": ["node_modules", "dist"]
+}
--- a/copy.json
+++ b/copy.json
@ -0,0 +1,41 @@
+{
+    "name": "nicwands.com",
+    "version": "0.0.0",
+    "private": true,
+    "type": "module",
+    "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+    },
+    "prettier": {
+        "tabWidth": 4,
+        "semi": false,
+        "singleQuote": true
+    },
+    "scripts": {
+        "dev": "vite",
+        "build": "vite-ssg build",
+        "preview": "vite preview",
+        "format": "prettier --write src/"
+    },
+    "dependencies": {
+        "@fuzzco/font-loader": "^1.0.2",
+        "@unhead/vue": "^2.0.19",
+        "@vueuse/core": "^14.1.0",
+        "gsap": "^3.13.0",
+        "lenis": "^1.3.15",
+        "lodash": "^4.17.21",
+        "sass": "^1.94.2",
+        "sass-embedded": "^1.93.3",
+        "tempus": "^1.0.0-dev.17",
+        "unplugin-vue-components": "^30.0.0",
+        "vite-ssg": "^28.2.2",
+        "vue": "^3.5.22",
+        "vue-router": "^4.6.3"
+    },
+    "devDependencies": {
+        "@vitejs/plugin-vue": "^6.0.1",
+        "prettier": "3.6.2",
+        "vite": "^7.1.11",
+        "vite-plugin-vue-devtools": "^8.0.3"
+    }
+}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,41 @@
+{
+    "name": "nicwands.com",
+    "version": "0.0.0",
+    "private": true,
+    "type": "module",
+    "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+    },
+    "prettier": {
+        "tabWidth": 4,
+        "semi": false,
+        "singleQuote": true
+    },
+    "scripts": {
+        "dev": "vite",
+        "build": "vite-ssg build",
+        "preview": "vite preview",
+        "format": "prettier --write src/"
+    },
+    "dependencies": {
+        "@fuzzco/font-loader": "^1.0.2",
+        "@unhead/vue": "^2.0.19",
+        "@vueuse/core": "^14.1.0",
+        "gsap": "^3.13.0",
+        "lenis": "^1.3.15",
+        "lodash": "^4.17.21",
+        "sass": "^1.94.2",
+        "sass-embedded": "^1.93.3",
+        "tempus": "^1.0.0-dev.17",
+        "unplugin-vue-components": "^30.0.0",
+        "vite-ssg": "^28.2.2",
+        "vue": "^3.5.22",
+        "vue-router": "^4.6.3"
+    },
+    "devDependencies": {
+        "@vitejs/plugin-vue": "^6.0.1",
+        "prettier": "3.6.2",
+        "vite": "^7.1.11",
+        "vite-plugin-vue-devtools": "^8.0.3"
+    }
+}
--- a/public/favicon.png
+++ b/public/favicon.png
--- a/public/fonts/OfficeTimesRound-Regular.woff
+++ b/public/fonts/OfficeTimesRound-Regular.woff
--- a/public/fonts/OfficeTimesRound-Regular.woff2
+++ b/public/fonts/OfficeTimesRound-Regular.woff2
--- a/src/App.vue
+++ b/src/App.vue
@ -0,0 +1,59 @@
+<template>
+    <lenis root :options="{ duration: 1 }">
+        <div :class="classes" :style="styles">
+            <suspense>
+                <layout />
+            </suspense>
+        </div>
+    </lenis>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import loadFonts from '@fuzzco/font-loader'
+import { useWindowSize } from '@vueuse/core'
+
+const { height } = useWindowSize()
+
+const classes = computed(() => [
+    'container',
+    { 'fonts-ready': !fontsLoading.value },
+    'theme-light',
+])
+
+const fontsLoading = ref(true)
+onMounted(async () => {
+    // Load fonts
+    loadFonts([
+        {
+            name: 'Office Times',
+            weights: [400],
+        },
+    ])
+        .then(() => {
+            fontsLoading.value = false
+        })
+        .catch(() => {
+            fontsLoading.value = false
+        })
+})
+
+const styles = computed(() => ({
+    '--vh': height.value ? height.value / 100 + 'px' : '100vh',
+}))
+</script>
+
+<style lang="scss">
+.container {
+    min-height: calc(100 * var(--vh));
+    max-width: 100vw;
+    overflow-x: clip;
+    background: var(--theme-bg);
+    color: var(--theme-fg);
+    transition: opacity 1000ms;
+
+    &:not(.fonts-ready) {
+        opacity: 0;
+    }
+}
+</style>
--- a/src/components.d.ts
+++ b/src/components.d.ts
@ -0,0 +1,20 @@
+/* eslint-disable */
+// @ts-nocheck
+// biome-ignore lint: disable
+// oxlint-disable
+// ------
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    Layout: typeof import('./components/Layout.vue')['default']
+    Lenis: typeof import('./components/Lenis.vue')['default']
+    LoadingSpinner: typeof import('./components/LoadingSpinner.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+  }
+}
--- a/src/components/Layout.vue
+++ b/src/components/Layout.vue
@ -0,0 +1,20 @@
+<template>
+    <div class="layout">
+        <h1>nicwands.com</h1>
+    </div>
+</template>
+
+<script setup>
+import { useSeoMeta } from '@unhead/vue'
+import { computed } from 'vue'
+
+// SEO
+// const seo = computed(() => content.value?.seo?.[0])
+// useSeoMeta({
+//     title: seo.value?.title || '',
+//     description: seo.value.description || '',
+//     ogImage: {
+//         url: seo.value.og_image?.filename || '',
+//     },
+// })
+</script>
--- a/src/components/Lenis.vue
+++ b/src/components/Lenis.vue
@ -0,0 +1,69 @@
+<template>
+    <div v-if="!root" class="lenis" ref="wrapper">
+        <div ref="content">
+            <slot />
+        </div>
+    </div>
+
+    <slot v-else />
+</template>
+
+<script setup>
+import Lenis from 'lenis'
+import Tempus from 'tempus'
+import { onBeforeUnmount, onMounted, provide, ref, shallowRef } from 'vue'
+
+const { root, instance, options } = defineProps({
+    root: {
+        type: Boolean,
+        default: () => false,
+    },
+    instance: { type: String },
+    options: {
+        type: Object,
+        default: () => ({
+            duration: 1.2,
+        }),
+    },
+})
+
+const lenis = shallowRef()
+const wrapper = ref()
+const content = ref()
+const removeRaf = ref()
+
+// Provide instance for useLenis composable
+const instanceKey = `lenis${instance ? `-${instance}` : ''}`
+provide(instanceKey, lenis)
+
+// Initialize with Tempus
+const initLenis = () => {
+    if (lenis.value) return
+
+    lenis.value = new Lenis({
+        ...options,
+        ...(!root
+            ? {
+                  wrapper: wrapper.value,
+                  content: content.value,
+                  eventsTarget: wrapper.value,
+              }
+            : {}),
+    })
+
+    removeRaf.value = Tempus.add((time) => {
+        lenis.value.raf(time)
+    })
+}
+
+onMounted(() => {
+    if (!lenis.value) {
+        initLenis()
+    }
+})
+// Kill lenis before unmount
+onBeforeUnmount(() => {
+    lenis.value?.destroy()
+    removeRaf.value?.()
+})
+</script>
--- a/src/components/LoadingSpinner.vue
+++ b/src/components/LoadingSpinner.vue
@ -0,0 +1,32 @@
+<template>
+    <svg
+        class="loading-spinner"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        style="margin: auto; display: block"
+        width="18px"
+        height="18px"
+        viewBox="0 0 100 100"
+        preserveAspectRatio="xMidYMid"
+    >
+        <circle
+            cx="50"
+            cy="50"
+            r="40"
+            stroke-width="4"
+            stroke="currentColor"
+            stroke-dasharray="62 62"
+            fill="none"
+            stroke-linecap="round"
+        >
+            <animateTransform
+                attributeName="transform"
+                type="rotate"
+                repeatCount="indefinite"
+                dur="1s"
+                keyTimes="0;1"
+                values="0 50 50;360 50 50"
+            ></animateTransform>
+        </circle>
+    </svg>
+</template>
--- a/src/composables/useLenis.js
+++ b/src/composables/useLenis.js
@ -0,0 +1,14 @@
+import { inject, onBeforeUnmount } from 'vue'
+
+export default (callback = () => {}, instanceId) => {
+    const instanceKey = `lenis${instanceId ? `-${instanceId}` : ''}`
+    const lenis = inject(instanceKey)
+
+    if (lenis.value) {
+        lenis.value.on('scroll', callback)
+    }
+
+    onBeforeUnmount(() => lenis.value?.off('scroll', callback))
+
+    return lenis
+}
--- a/src/composables/useRelativeSize.js
+++ b/src/composables/useRelativeSize.js
@ -0,0 +1,29 @@
+import { useWindowSize } from '@vueuse/core'
+import { viewports } from '@/libs/theme'
+
+const { width: wWidth, height: wHeight } = useWindowSize()
+
+export default () => {
+    // Desktop
+    const dvw = (pixels) => {
+        return (pixels / viewports.desktop.width) * wWidth.value
+    }
+    const dvh = (pixels) => {
+        return (pixels / viewports.desktop.height) * wHeight.value
+    }
+
+    // Mobile
+    const mvw = (pixels) => {
+        return (pixels / viewports.mobile.width) * wWidth.value
+    }
+    const mvh = (pixels) => {
+        return (pixels / viewports.mobile.height) * wHeight.value
+    }
+
+    return {
+        dvw,
+        dvh,
+        mvw,
+        mvh,
+    }
+}
--- a/src/composables/useScrollProgress.js
+++ b/src/composables/useScrollProgress.js
@ -0,0 +1,46 @@
+import {
+    useElementBounding,
+    useIntersectionObserver,
+    useWindowSize,
+} from '@vueuse/core'
+import { ref } from 'vue'
+import { mapRange, clamp } from '@/libs/math'
+import useLenis from '@/composables/useLenis'
+
+const { height: wHeight } = useWindowSize()
+
+export const useScrollProgress = (el, callback, entry = 0.5, exit = 0.5) => {
+    const isActive = ref(true)
+    const smoothProgress = ref(0)
+
+    const { height, top } = useElementBounding(el)
+
+    const isIntersected = ref(false)
+    const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
+        isIntersected.value = isIntersecting
+    })
+
+    useLenis(({ scroll }) => {
+        if (!isActive.value) return
+        if (!height.value || !wHeight.value) return
+        if (!isIntersected.value) return
+
+        const pageTop = scroll + top.value
+
+        const start = pageTop - wHeight.value * entry
+        const end = pageTop + height.value - wHeight.value * exit
+
+        let rawProgress = mapRange(start, end, scroll, 0, 1)
+        rawProgress = clamp(0, rawProgress, 1)
+
+        smoothProgress.value += (rawProgress - smoothProgress.value) * 0.1
+        callback?.(smoothProgress.value)
+    })
+
+    const destroy = () => {
+        isActive.value = false
+        stop?.()
+    }
+
+    return { destroy }
+}
--- a/src/composables/useSmoothMouse.js
+++ b/src/composables/useSmoothMouse.js
@ -0,0 +1,89 @@
+import gsap from 'gsap'
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { useWindowSize, useEventListener } from '@vueuse/core'
+
+/**
+ * Shared global raw mouse state (only set up once)
+ */
+const rawMouse = {
+    x: ref(0),
+    y: ref(0),
+    initialized: false,
+    cleanup: null,
+}
+
+const useGlobalMouseListener = () => {
+    if (!rawMouse.initialized && !import.meta.env.SSR) {
+        rawMouse.initialized = true
+        rawMouse.cleanup = useEventListener(window, 'mousemove', (e) => {
+            rawMouse.x.value = e.clientX
+            rawMouse.y.value = e.clientY
+        })
+    }
+}
+
+/**
+ * Composable for smoothed mouse position with customizable smoothing and normalization.
+ */
+export default (options) => {
+    const smoothFactor = options?.smoothFactor ?? 0.1
+    const normalize = options?.normalize ?? false
+    const callback = options?.onUpdate
+
+    const { width: wWidth, height: wHeight } = useWindowSize()
+
+    const sx = ref(0)
+    const sy = ref(0)
+
+    useGlobalMouseListener()
+
+    const getTargetX = () =>
+        normalize ? rawMouse.x.value / wWidth.value : rawMouse.x.value
+    const getTargetY = () =>
+        normalize ? rawMouse.y.value / wHeight.value : rawMouse.y.value
+
+    let tween
+    onMounted(() => {
+        if (tween) tween.kill
+
+        // Start smoothing tween
+        tween = gsap.to(
+            { x: sx.value, y: sy.value },
+            {
+                duration: 1,
+                ease: 'linear',
+                repeat: -1,
+                onUpdate: () => {
+                    const newX = gsap.utils.interpolate(
+                        sx.value,
+                        getTargetX(),
+                        smoothFactor,
+                    )
+                    const newY = gsap.utils.interpolate(
+                        sy.value,
+                        getTargetY(),
+                        smoothFactor,
+                    )
+
+                    sx.value = newX
+                    sy.value = newY
+
+                    callback?.({ sx: sx.value, sy: sy.value })
+                },
+            },
+        )
+    })
+
+    onBeforeUnmount(() => {
+        tween?.kill()
+        rawMouse.cleanup()
+        rawMouse.initialized = false
+    })
+
+    return {
+        sx,
+        sy,
+        rawX: rawMouse.x,
+        rawY: rawMouse.y,
+    }
+}
--- a/src/composables/useSubmitForm.js
+++ b/src/composables/useSubmitForm.js
@ -0,0 +1,34 @@
+import { ref } from 'vue'
+
+export default (url) => {
+    const loading = ref(false)
+    const success = ref(false)
+    const error = ref('')
+
+    const submit = async (headers = {}, body = {}) => {
+        loading.value = true
+
+        try {
+            await fetch(url, {
+                method: 'POST',
+                headers,
+                body: new URLSearchParams(body),
+            })
+
+            success.value = true
+            error.value = ''
+        } catch (err) {
+            console.error(err)
+            error.value = err.toString().split('Error: ')[1]
+        }
+
+        loading.value = false
+    }
+
+    return {
+        loading,
+        success,
+        error,
+        submit,
+    }
+}
--- a/src/composables/useTimelineTransition.js
+++ b/src/composables/useTimelineTransition.js
@ -0,0 +1,37 @@
+import gsap from 'gsap'
+
+export default (timelineSetup = () => {}) => {
+    const timelines = new WeakMap()
+    const getTimeline = (el) => {
+        if (!timelines.has(el)) {
+            const tl = gsap.timeline({ paused: true })
+
+            timelines.set(el, tl)
+        }
+        return timelines.get(el)
+    }
+    const onEnter = (el, done) => {
+        const tl = getTimeline(el)
+
+        tl.clear()
+        timelineSetup?.(tl, el)
+
+        tl.eventCallback('onReverseComplete', null)
+        tl.eventCallback('onComplete', done)
+        tl.play()
+    }
+    const onLeave = (el, done) => {
+        el.style.pointerEvents = 'none'
+
+        const tl = getTimeline(el)
+
+        tl.eventCallback('onComplete', null)
+        tl.eventCallback('onReverseComplete', done)
+        tl.reverse()
+    }
+
+    return {
+        onEnter,
+        onLeave,
+    }
+}
--- a/src/libs/math.js
+++ b/src/libs/math.js
@ -0,0 +1,22 @@
+export function clamp(min, input, max) {
+    return Math.max(min, Math.min(input, max))
+}
+
+export function mapRange(in_min, in_max, input, out_min, out_max) {
+    return (
+        ((input - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min
+    )
+}
+
+export function lerp(start, end, amt) {
+    return (1 - amt) * start + amt * end
+}
+
+export function truncate(value, decimals) {
+    return parseFloat(value.toFixed(decimals))
+}
+
+export function wrapValue(value, lowBound, highBound) {
+    const range = highBound - lowBound
+    return ((((value - lowBound) % range) + range) % range) + lowBound
+}
--- a/src/libs/sass-utils/index.js
+++ b/src/libs/sass-utils/index.js
@ -0,0 +1,220 @@
+// https://github.com/dawaltconley/sass-cast/blob/main/index.js
+
+import * as sass from 'sass-embedded'
+import { isQuoted, unquoteString, parseString, getAttr } from './utils'
+import { List, OrderedMap } from 'immutable'
+
+/**
+ * Converts any Javascript object to an equivalent Sass value.
+ *
+ * This method is recursive and will convert the values of any array or object,
+ * as well as the array or object itself.
+ *
+ * @example
+ * const { toSass } = require('sass-cast');
+ *
+ * const string = toSass('a simple string');
+ * // quoted SassString => '"a simple string"'
+ *
+ * const map = toSass({
+ *   key: 'value',
+ *   nested: {
+ *     'complex//:key': [ null, 4 ],
+ *   }
+ * });
+ * // SassMap => '("key": "value", "nested": ("complex//:key": (null, 4)))'
+ *
+ * @param {*} value - the value to be converted
+ * @param {Object} options
+ * @param {boolean} [options.parseUnquotedStrings=false] - whether to parse unquoted strings for colors or numbers with units
+ * @param {boolean|*[]} [options.resolveFunctions=false] - if true, resolve functions and attempt to cast their return values. if an array, pass as arguments when resolving
+ * @param {boolean} [options.quotes=true] - controls whether returned SassStrings are quoted. input strings that contain quotes will always return a quoted SassString even if this flag is false.
+ * @return {Value} - a {@link https://sass-lang.com/documentation/js-api/classes/Value Sass value}
+ */
+
+export const toSass = (value, options = {}) => {
+    let {
+        parseUnquotedStrings = false,
+        resolveFunctions = false,
+        quotes = true,
+    } = options
+    if (value instanceof sass.Value) {
+        return value
+    } else if (value === null || value === undefined) {
+        return sass.sassNull
+    } else if (typeof value === 'boolean') {
+        return value ? sass.sassTrue : sass.sassFalse
+    } else if (typeof value === 'number') {
+        return new sass.SassNumber(value)
+    } else if (typeof value === 'string') {
+        const valueIsQuoted = isQuoted(value)
+        if (parseUnquotedStrings && !valueIsQuoted) {
+            let parsed = parseString(value)
+            if (
+                parsed instanceof sass.SassColor ||
+                parsed instanceof sass.SassNumber
+            )
+                return parsed
+        }
+        return new sass.SassString(value, {
+            quotes: valueIsQuoted || quotes,
+        })
+    } else if (typeof value === 'object') {
+        if (Array.isArray(value)) {
+            let sassList = value.map((value) => toSass(value, options))
+            return new sass.SassList(sassList)
+        } else {
+            let sassMap = OrderedMap(value).mapEntries(([key, value]) => [
+                new sass.SassString(key, { quotes: true }),
+                toSass(value, options),
+            ])
+            return new sass.SassMap(sassMap)
+        }
+    } else if (resolveFunctions && typeof value === 'function') {
+        const args = Array.isArray(resolveFunctions) ? resolveFunctions : []
+        return toSass(value(...args), options)
+    }
+    return sass.sassNull
+}
+
+const colorProperties = [
+    'red',
+    'green',
+    'blue',
+    'hue',
+    'lightness',
+    'saturation',
+    'whiteness',
+    'blackness',
+    'alpha',
+]
+
+/**
+ * Converts Sass values to their Javascript equivalents.
+ *
+ * @example
+ * const { fromSass, toSass } = require('sass-cast');
+ *
+ * const sassString = toSass('a sass string object');
+ * const string = fromSass(sassString);
+ * // 'a sass string object'
+ *
+ * @param {Value} object - a {@link https://sass-lang.com/documentation/js-api/classes/Value Sass value}
+ * @param {Object} options
+ * @param {boolean} [options.preserveUnits=false] - By default, only the values of numbers are returned, not their units. If true, `fromSass` will return numbers as a two-item Array, i.e. [ value, unit ]
+ * @param {boolean} [options.rgbColors=false] - By default, colors are returned as strings. If true, `fromSass` will return colors as an object with `r`, `g`, `b`, and `a`, properties.
+ * @param {boolean} [options.preserveQuotes=false] - By default, quoted Sass strings return their inner text as a string. If true, `fromSass` will preserve the quotes in the returned string value.
+ * @return {*} - a Javascript value corresponding to the Sass input
+ */
+
+export const fromSass = (object, options = {}) => {
+    let {
+        preserveUnits = false,
+        rgbColors = false,
+        preserveQuotes = false,
+    } = options
+    if (object instanceof sass.SassBoolean) {
+        return object.value
+    } else if (object instanceof sass.SassNumber) {
+        if (preserveUnits) {
+            return [
+                object.value,
+                object.numeratorUnits.toArray(),
+                object.denominatorUnits.toArray(),
+            ]
+        } else if (object.numeratorUnits.size || object.denominatorUnits.size) {
+            return object.toString()
+        }
+        return object.value
+    } else if (object instanceof sass.SassColor) {
+        if (rgbColors) {
+            return colorProperties.reduce((colorObj, p) => {
+                colorObj[p] = object[p]
+                return colorObj
+            }, {})
+        }
+        return object.toString()
+    } else if (object instanceof sass.SassString) {
+        return preserveQuotes ? object.text : unquoteString(object.text)
+    } else if (object instanceof sass.SassList || List.isList(object)) {
+        let list = []
+        for (
+            let i = 0, value = object.get(i);
+            value !== undefined;
+            i++, value = object.get(i)
+        ) {
+            list.push(fromSass(value, options))
+        }
+        return list
+    } else if (object instanceof sass.SassMap) {
+        return object.contents
+            .mapEntries(([k, v]) => [k.text, fromSass(v, options)])
+            .toObject()
+    } else {
+        return object.realNull
+    }
+}
+
+/**
+ * An object defining Sass utility functions.
+ *
+ * @example <caption>Pass to sass using the JS API</caption>
+ * const { sassFunctions } = require('sass-cast');
+ * const sass = require('sass');
+ *
+ * sass.compile('main.scss', { functions: sassFunctions });
+ */
+export const sassFunctions = {
+    /**
+     * Sass function for importing data from Javascript or JSON files.
+     * Calls the CommonJS `require` function under the hood.
+     *
+     * #### Examples
+     *
+     * ```scss
+     * // import config info from tailwindcss
+     * $tw: require('./tailwind.config.js', $parseUnquotedStrings: true);
+     * $tw-colors: map.get($tw, theme, extend, colors);
+     * ```
+     * @name require
+     * @memberof sassFunctions
+     * @param {SassString} $module - Path to the file or module. Relative paths are relative to the Node process running Sass compilation.
+     * @param {SassList} [$properties=()] - List of properties, if you only want to parse part of the module data.
+     * @param {SassBoolean} [$parseUnquotedStrings=false] - Passed as an option to {@link #tosass toSass}.
+     * @param {SassBoolean} [$resolveFunctions=false] - Passed as an option to {@link #tosass toSass}.
+     * @param {SassBoolean} [$quotes=true] - Passed as an option to {@link #tosass toSass}.
+     * @return {Value} - a {@link https://sass-lang.com/documentation/js-api/classes/Value Sass value}
+     */
+    'require($module, $properties: (), $parseUnquotedStrings: false, $resolveFunctions: false, $quotes: true)':
+        (args) => {
+            const moduleName = args[0].assertString('module').text
+            const properties = args[1].realNull && fromSass(args[1].asList)
+            const parseUnquotedStrings = args[2].isTruthy
+            const resolveFunctions = args[3].isTruthy
+            const quotes = args[4].isTruthy
+            const options = {
+                parseUnquotedStrings,
+                resolveFunctions,
+                quotes,
+            }
+            const convert = (data) =>
+                toSass(properties ? getAttr(data, properties) : data, options)
+
+            let mod,
+                paths = [moduleName, `${process.cwd()}/${moduleName}`]
+            for (let path of paths) {
+                try {
+                    mod = require(path)
+                    break
+                } catch (e) {
+                    if (e.code !== 'MODULE_NOT_FOUND') throw e
+                    continue
+                }
+            }
+            if (!mod) throw new Error(`Couldn't find module: ${moduleName}`)
+
+            if (resolveFunctions && typeof mod === 'function') mod = mod()
+            if (mod instanceof Promise) return mod.then(convert)
+            return convert(mod)
+        },
+}
--- a/src/libs/sass-utils/utils.js
+++ b/src/libs/sass-utils/utils.js
@ -0,0 +1,108 @@
+// https://github.com/dawaltconley/sass-cast/blob/main/utils.js
+
+import * as sass from 'sass-embedded'
+
+/**
+ * Check if string is quoted
+ * @private
+ * @param {string} str
+ * @return {boolean}
+ */
+export const isQuoted = (str) => /^['"].*['"]$/.test(str)
+
+/**
+ * Surrounds a string with quotes
+ * @private
+ * @param {string} str
+ * @param {string} q - quotes, double or single
+ * @return {string}
+ */
+export const quoteString = (str, q) => {
+    if (!q) return str
+    if (isQuoted(str)) {
+        q = str[0]
+        str = str.slice(1, -1)
+    }
+    let r = new RegExp(q, 'g')
+    return q + str.replace(r, '\\' + q) + q
+}
+
+/**
+ * Unquotes a string
+ * @private
+ * @param {string} str
+ * @return {string}
+ */
+export const unquoteString = (str) => (isQuoted(str) ? str.slice(1, -1) : str)
+
+/**
+ * Parse a string as a Sass object
+ * cribbed from davidkpiano/sassport
+ *
+ * @private
+ * @param {string} str
+ * @return {Value}
+ */
+export const parseString = (str) => {
+    let result
+
+    try {
+        sass.compileString(`$_: ___(${str});`, {
+            functions: {
+                '___($value)': (args) => {
+                    result = args[0]
+                    return result
+                },
+            },
+        })
+    } catch (e) {
+        return str
+    }
+
+    return result
+}
+
+/**
+ * Parse a string as a legacy Sass object
+ * cribbed from davidkpiano/sassport
+ *
+ * @private
+ * @param {string} str
+ * @return {LegacyObject}
+ */
+export const parseStringLegacy = (str) => {
+    let result
+
+    try {
+        sass.renderSync({
+            data: `$_: ___((${str}));`,
+            functions: {
+                '___($value)': (value) => {
+                    result = value
+                    return value
+                },
+            },
+        })
+    } catch (e) {
+        return str
+    }
+
+    return result
+}
+
+/**
+ * Function to handle 'toString()' methods with legacy API.
+ *
+ * @private
+ * @param {LegacyObject} obj
+ * @return {string}
+ */
+export const legacyToString = (obj) => (obj.dartValue || obj).toString()
+
+/**
+ * Return a value from an object and a list of keys.
+ * @private
+ * @param {Object|Array} obj
+ * @param {*[]} attrs
+ */
+export const getAttr = (obj, attrs) => attrs.reduce((o, attr) => o[attr], obj)
--- a/src/libs/theme.js
+++ b/src/libs/theme.js
@ -0,0 +1,43 @@
+const colors = {
+    black: '#000000',
+    white: '#d9d9d9',
+    pink: '#DAC3C3',
+    green: '#D8E3D3',
+    cream: '#F2F1F1',
+    grey: '#2B2B2B',
+}
+
+const themes = {
+    light: {
+        bg: colors.white,
+        fg: colors.black,
+    },
+    dark: {
+        bg: colors.black,
+        fg: colors.white,
+    },
+}
+
+const breakpoints = {
+    mobile: 800,
+}
+
+const viewports = {
+    mobile: {
+        width: 440,
+        height: 956,
+    },
+    desktop: {
+        width: 1728,
+        height: 1117,
+    },
+}
+
+export { colors, themes, breakpoints, viewports }
+
+export default {
+    colors,
+    themes,
+    breakpoints,
+    viewports,
+}
--- a/src/main.js
+++ b/src/main.js
@ -0,0 +1,7 @@
+import './styles/main.scss'
+import App from './App.vue'
+import { ViteSSG } from 'vite-ssg/single-page'
+
+export const createApp = ViteSSG(App, ({ app }) => {
+    // Plugins
+})
--- a/src/styles/_colors.scss
+++ b/src/styles/_colors.scss
@ -0,0 +1,7 @@
+@use 'sass:color';
+
+:root {
+    @each $name, $color in getColors() {
+        --#{$name}: #{$color};
+    }
+}
--- a/src/styles/_easings.scss
+++ b/src/styles/_easings.scss
@ -0,0 +1,22 @@
+:root {
+    --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+    --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
+    --ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
+    --ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
+    --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
+    --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
+    --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
+    --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
+    --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
+    --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
+    --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
+    --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
+    --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
+    --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
+    --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
+
+    --ease-custom: cubic-bezier(0.315, 0.365, 0.23, 0.985);
+}
--- a/src/styles/_font-style.scss
+++ b/src/styles/_font-style.scss
@ -0,0 +1,31 @@
+@use 'functions' as *;
+
+@mixin size-font($ds, $ms) {
+    font-size: mobile-vw($ms);
+
+    &.vh {
+        font-size: mobile-vh($ms);
+    }
+
+    @include desktop {
+        font-size: desktop-vw($ds);
+
+        &.vh {
+            font-size: desktop-vh($ds);
+        }
+    }
+}
+
+@mixin h1 {
+    font-family: var(--font-times);
+    font-weight: 400;
+    letter-spacing: 0.1em;
+    @include size-font(42px, 27px);
+}
+
+@mixin p {
+    font-family: var(--font-times);
+    font-weight: 400;
+    letter-spacing: 0.03em;
+    @include size-font(25px, 18px);
+}
--- a/src/styles/_fonts.scss
+++ b/src/styles/_fonts.scss
@ -0,0 +1,26 @@
+/*
+    Font Weights:
+        100 - Thin
+        200 - Extra Light (Ultra Light)
+        300 - Light
+        400 - Normal
+        500 - Medium
+        600 - Semi Bold (Demi Bold)
+        700 - Bold
+        800 - Extra Bold (Ultra Bold)
+        900 - Black (Heavy)
+*/
+
+/* OFFICE TIMES */
+@font-face {
+    font-family: 'Office Times';
+    font-style: normal;
+    font-weight: 400;
+    src:
+        url('/fonts/OfficeTimesRound-Regular.woff2') format('woff2'),
+        url('/fonts/OfficeTimesRound-Regular.woff') format('woff');
+}
+
+:root {
+    --font-times: 'Office Times', monospace;
+}
--- a/src/styles/_functions.scss
+++ b/src/styles/_functions.scss
@ -0,0 +1,187 @@
+@use 'sass:math';
+
+/* Breakpoints */
+$mobile-breakpoint: get('breakpoints.mobile');
+
+// Viewport Sizes
+$desktop-width: get('viewports.desktop.width');
+$desktop-height: get('viewports.desktop.height');
+
+$mobile-width: get('viewports.mobile.width');
+$mobile-height: get('viewports.mobile.height');
+
+// Breakpoint
+@mixin mobile {
+    @media (max-width: #{$mobile-breakpoint * 1px - 1px}) {
+        @content;
+    }
+}
+
+@mixin desktop {
+    @media (min-width: #{$mobile-breakpoint * 1px}) {
+        @content;
+    }
+}
+
+@function mobile-vw($pixels, $base-vw: $mobile-width) {
+    $px: math.div($pixels, $base-vw);
+    $perc: math.div($px, 1px);
+    @return calc($perc * 100vw);
+}
+
+@function mobile-vh($pixels, $base-vh: $mobile-height) {
+    $px: math.div($pixels, $base-vh);
+    $perc: math.div($px, 1px);
+    @return calc($perc * 100vh);
+}
+
+@function desktop-vw($pixels, $base-vw: $desktop-width) {
+    $px: math.div($pixels, $base-vw);
+    $perc: math.div($px, 1px);
+    @return calc($perc * 100vw);
+}
+
+@function desktop-vh($pixels, $base-vh: $desktop-height) {
+    $px: math.div($pixels, $base-vh);
+    $perc: math.div($px, 1px);
+    @return calc($perc * 100vh);
+}
+
+@function columns($columns) {
+    @return calc(
+        (#{$columns} * var(--layout-column-width)) +
+            ((#{$columns} - 1) * var(--layout-column-gap))
+    );
+}
+
+@mixin child-grid($columns) {
+    grid-template-columns: repeat($columns, minmax(0, 1fr));
+    column-gap: var(--layout-columns-gap);
+    display: grid;
+}
+
+@mixin reduced-motion {
+    @media (prefers-reduced-motion: reduce) {
+        @content;
+    }
+}
+
+@mixin fill($position: absolute) {
+    position: #{$position};
+    bottom: 0;
+    right: 0;
+    left: 0;
+    top: 0;
+}
+
+@mixin fade-on-ready($class: 'ready', $duration: 400ms) {
+    opacity: 0;
+    transition: opacity $duration ease;
+
+    &.#{$class} {
+        opacity: 1;
+    }
+}
+
+// Clamp text block to number of lines
+@mixin line-clamp($lines: 3, $mobile-lines: $lines) {
+    display: -webkit-box;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: $lines;
+
+    @include mobile {
+        -webkit-line-clamp: $mobile-lines;
+    }
+}
+
+// Flip animations
+@keyframes flip-r {
+    50% {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+    51% {
+        transform: translateX(-100%);
+        opacity: 0;
+    }
+}
+@keyframes flip-l {
+    50% {
+        transform: translateX(-100%);
+        opacity: 0;
+    }
+    51% {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+}
+@keyframes flip-d {
+    50% {
+        transform: translateY(100%);
+        opacity: 0;
+    }
+    51% {
+        transform: translateY(-100%);
+        opacity: 0;
+    }
+}
+@keyframes flip-u {
+    50% {
+        transform: translateY(-100%);
+        opacity: 0;
+    }
+    51% {
+        transform: translateY(100%);
+        opacity: 0;
+    }
+}
+
+@mixin flip-animation(
+    $direction: 'r',
+    $duration: 600ms,
+    $easing: var(--ease-out-expo),
+    $iteration-count: 1
+) {
+    overflow: hidden;
+    animation: flip-#{$direction} $duration $easing $iteration-count forwards;
+}
+
+@mixin link-hover {
+    position: relative;
+
+    &::before {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 1px;
+        background: var(--theme-fg);
+        transform-origin: left;
+        transform: scaleX(0);
+        transition: transform 300ms var(--ease-out-quad);
+    }
+    @include desktop {
+        &:hover::before {
+            transform: scaleX(1);
+        }
+    }
+}
+
+@mixin stagger-animate($stagger: 100, $num-children: 10, $base-delay: 0) {
+    @for $i from 0 through $num-children {
+        &:nth-child(#{$i + 1}) {
+            transition-delay: #{$stagger * $i + $base-delay}ms;
+        }
+    }
+}
+
+@mixin hover {
+    @include desktop {
+        &:hover {
+            @content;
+        }
+    }
+}
--- a/src/styles/_layers.scss
+++ b/src/styles/_layers.scss
@ -0,0 +1,7 @@
+// z-index
+.lily-cursor {
+    z-index: 20;
+}
+.site-header {
+    z-index: 10;
+}
--- a/src/styles/_layout.scss
+++ b/src/styles/_layout.scss
@ -0,0 +1,91 @@
+@use 'sass:list';
+@use 'functions' as *;
+
+// css variables exposed globally:
+// --layout-column-count: columns count in the layout
+// --layout-column-gap: gap size between columns
+// --layout-margin: layout margin size (left or right)
+// --layout-width: 100vw minus 2 * --layout-margin
+// --layout-column-width: size of a single column
+
+// css classes exposed globally:
+// .layout-block: element takes the whole layout width
+// .layout-block-inner: same as .layout-block but using padding instead of margin
+// .layout-grid: extends .layout-block with grid behaviour using layout settings
+// .layout-grid-inner: same as .layout-grid but using padding instead of margin
+
+@use 'sass:map';
+
+// config to fill
+// 'variable': (mobile, desktop)
+$layout: (
+    'columns-count': (
+        5,
+        18,
+    ),
+    'columns-gap': (
+        20px,
+        20px,
+    ),
+    'margin': (
+        30px,
+        60px,
+    ),
+);
+
+//internal process, do not touch
+:root {
+    --layout-column-count: #{list.nth(map.get($layout, 'columns-count'), 1)};
+    --layout-column-gap: #{mobile-vw(
+            list.nth(map.get($layout, 'columns-gap'), 1)
+        )};
+    --layout-margin: #{mobile-vw(list.nth(map.get($layout, 'margin'), 1))};
+    --layout-width: calc(100vw - (2 * var(--layout-margin)));
+    --layout-column-width: calc(
+        (
+                var(--layout-width) -
+                    (
+                        (var(--layout-column-count) - 1) *
+                            var(--layout-column-gap)
+                    )
+            ) /
+            var(--layout-column-count)
+    );
+
+    @include desktop {
+        --layout-column-count: #{list.nth(map.get($layout, 'columns-count'), 2)};
+        --layout-column-gap: #{desktop-vw(
+                list.nth(map.get($layout, 'columns-gap'), 2)
+            )};
+        --layout-margin: #{desktop-vw(list.nth(map.get($layout, 'margin'), 2))};
+    }
+}
+
+.layout-block {
+    max-width: var(--layout-width);
+    margin-left: auto;
+    margin-right: auto;
+    width: 100%;
+}
+
+.layout-block-inner {
+    padding-left: var(--layout-margin);
+    padding-right: var(--layout-margin);
+    width: 100%;
+}
+
+.layout-grid {
+    @extend .layout-block;
+
+    display: grid;
+    grid-template-columns: repeat(var(--layout-column-count), minmax(0, 1fr));
+    grid-gap: var(--layout-column-gap);
+}
+
+.layout-grid-inner {
+    @extend .layout-block-inner;
+
+    display: grid;
+    grid-template-columns: repeat(var(--layout-column-count), minmax(0, 1fr));
+    grid-gap: var(--layout-column-gap);
+}
--- a/src/styles/_reset.scss
+++ b/src/styles/_reset.scss
@ -0,0 +1,99 @@
+/***
+    The new CSS reset - version 1.9 (last updated 19.6.2023)
+    GitHub page: https://github.com/elad2412/the-new-css-reset
+***/
+
+/*
+    Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
+    - The "symbol *" part is to solve Firefox SVG sprite bug
+    - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36)
+ */
+*:where(
+        :not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)
+    ) {
+    all: unset;
+    display: revert;
+}
+
+/* Preferred box-sizing value */
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+/* Reapply the pointer cursor for anchor tags */
+a,
+button {
+    cursor: revert;
+}
+
+/* For images to not be able to exceed their container */
+img {
+    max-inline-size: 100%;
+    max-block-size: 100%;
+}
+
+/* removes spacing between cells in tables */
+table {
+    border-collapse: collapse;
+}
+
+/* Safari - solving issue when using user-select:none on the <body> text input doesn't working */
+input,
+textarea {
+    -webkit-user-select: auto;
+}
+
+/* revert the 'white-space' property for textarea elements on Safari */
+textarea {
+    white-space: revert;
+}
+
+/* minimum style to allow to style meter element */
+meter {
+    -webkit-appearance: revert;
+    appearance: revert;
+}
+
+/* preformatted text - use only for this feature */
+:where(pre) {
+    all: revert;
+}
+
+/* reset default text opacity of input placeholder */
+::placeholder {
+    color: unset;
+}
+
+/* remove default dot (•) sign */
+::marker {
+    content: initial;
+}
+
+/* fix the feature of 'hidden' attribute.
+ display:revert; revert to element instead of attribute */
+:where([hidden]) {
+    display: none;
+}
+
+/* revert for bug in Chromium browsers
+ - fix for the content editable attribute will work properly.
+ - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/
+:where([contenteditable]:not([contenteditable='false'])) {
+    -moz-user-modify: read-write;
+    -webkit-user-modify: read-write;
+    overflow-wrap: break-word;
+    -webkit-line-break: after-white-space;
+    -webkit-user-select: auto;
+}
+
+/* apply back the draggable feature - exist only in Chromium and Safari */
+:where([draggable='true']) {
+    -webkit-user-drag: element;
+}
+
+/* Revert Modal native behavior */
+:where(dialog:modal) {
+    all: revert;
+}
--- a/src/styles/_scroll.scss
+++ b/src/styles/_scroll.scss
@ -0,0 +1,34 @@
+html {
+    &:not(.dev) {
+        &,
+        * {
+            scrollbar-width: none !important;
+            -ms-overflow-style: none !important;
+
+            &::-webkit-scrollbar {
+                width: 0 !important;
+                height: 0 !important;
+            }
+        }
+    }
+}
+
+html.lenis {
+    height: auto;
+}
+
+.lenis.lenis-smooth {
+    scroll-behavior: auto;
+}
+
+.lenis.lenis-smooth [data-lenis-prevent] {
+    overscroll-behavior: contain;
+}
+
+.lenis.lenis-stopped {
+    overflow: hidden;
+}
+
+.lenis.lenis-scrolling iframe {
+    pointer-events: none;
+}
--- a/src/styles/_themes.scss
+++ b/src/styles/_themes.scss
@ -0,0 +1,11 @@
+@use 'sass:color';
+
+:root {
+    @each $name, $theme in getThemes() {
+        .theme-#{$name} {
+            @each $name, $color in $theme {
+                --theme-#{$name}: #{$color};
+            }
+        }
+    }
+}
--- a/src/styles/_transitions.scss
+++ b/src/styles/_transitions.scss
@ -0,0 +1,43 @@
+// Fades
+.fade-enter-active,
+.fade-leave-active {
+    transition: opacity 400ms;
+}
+.fade-enter-from,
+.fade-leave-to {
+    opacity: 0;
+}
+.quick-fade-enter-active,
+.quick-fade-leave-active {
+    transition: opacity 100ms;
+}
+.quick-fade-enter-from,
+.quick-fade-leave-to {
+    opacity: 0;
+}
+.slow-fade-enter-active,
+.slow-fade-leave-active {
+    transition: opacity 600ms;
+}
+.slow-fade-enter-from,
+.slow-fade-leave-to {
+    opacity: 0;
+}
+
+// Slides
+.slide-up-enter-active,
+.slide-up-leave-active {
+    transition: transform 400ms var(--ease-out-quad);
+}
+.slide-up-enter-from,
+.slide-up-leave-to {
+    transform: translateY(-100%);
+}
+.slide-left-enter-active,
+.slide-left-leave-active {
+    transition: transform 400ms var(--ease-out-quad);
+}
+.slide-left-enter-from,
+.slide-left-leave-to {
+    transform: translateX(-100%);
+}
--- a/src/styles/_utils.scss
+++ b/src/styles/_utils.scss
@ -0,0 +1,42 @@
+@use 'functions' as *;
+
+.full-width {
+    width: 100vw;
+    position: relative;
+    left: 50%;
+    right: 50%;
+    margin-left: -50vw;
+    margin-right: -50vw;
+}
+
+.overflow-hidden {
+    overflow: hidden;
+}
+
+.relative {
+    position: relative;
+}
+
+.mobile-only {
+    @include desktop {
+        display: none !important;
+    }
+}
+
+.desktop-only {
+    @include mobile {
+        display: none !important;
+    }
+}
+
+html:not(.has-scroll-smooth) {
+    .hide-on-native-scroll {
+        display: none;
+    }
+}
+
+html.has-scroll-smooth {
+    .hide-on-smooth-scroll {
+        display: none;
+    }
+}
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@ -0,0 +1,111 @@
+@use 'colors' as *;
+@use 'themes' as *;
+@use 'easings' as *;
+@use 'reset' as *;
+@use 'layers' as *;
+@use 'functions' as *;
+@use 'utils' as *;
+@use 'fonts' as *;
+@use 'font-style' as *;
+@use 'layout' as *;
+@use 'scroll' as *;
+@use 'transitions' as *;
+
+:root {
+    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+
+    background: var(--white);
+    color: var(--black);
+
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+    margin: 0;
+    min-height: 100vh;
+}
+
+// Type
+.h1,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    @include h1;
+}
+.p,
+p,
+a,
+button,
+input,
+pre {
+    @include p;
+}
+
+.entry {
+    img {
+        max-width: 100%;
+        height: auto;
+    }
+    p {
+        min-height: 1px;
+    }
+    a {
+        text-decoration: underline;
+    }
+    & > * {
+        margin-bottom: 1em;
+        margin-top: 1em;
+    }
+    & > *:first-child {
+        margin-top: 0;
+    }
+    & > *:last-child {
+        margin-bottom: 0;
+    }
+
+    ul,
+    ol {
+        li {
+            margin-bottom: 1em;
+            width: desktop-vw(577px);
+        }
+    }
+    ul {
+        list-style: disc;
+        padding-left: 1em;
+    }
+}
+
+#app {
+    min-height: 100vh;
+}
+
+@keyframes blink {
+    5% {
+        opacity: 0;
+    }
+    40% {
+        opacity: 0;
+    }
+    60% {
+        opacity: 1;
+    }
+    95% {
+        opacity: 1;
+    }
+}
+
+@keyframes bonk {
+    0% {
+        transform: rotate(calc(var(--bonk-angle) * -1));
+    }
+    50% {
+        transform: rotate(var(--bonk-angle));
+    }
+}
--- a/vite.config.js
+++ b/vite.config.js
@ -0,0 +1,55 @@
+import { fileURLToPath, URL } from 'node:url'
+
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import Components from 'unplugin-vue-components/vite'
+import { toSass } from './src/libs/sass-utils'
+import theme from './src/libs/theme'
+
+export default defineConfig({
+    plugins: [
+        vue(),
+        Components({
+            dirs: ['src/components'],
+            extensions: ['vue'],
+            deep: true,
+            dts: 'src/components.d.ts',
+            directoryAsNamespace: true,
+        }),
+    ],
+    resolve: {
+        alias: {
+            '@': fileURLToPath(new URL('./src', import.meta.url)),
+        },
+    },
+    server: {
+        port: 3000,
+    },
+    css: {
+        preprocessorOptions: {
+            scss: {
+                api: 'modern-compiler',
+                additionalData:
+                    '@use "/src/styles/_functions.scss" as *; @use "/src/styles/_font-style.scss" as *;',
+                functions: {
+                    'get($keys)': function (keys) {
+                        keys = keys.toString().replace(/['"]+/g, '').split('.')
+
+                        let result = theme
+                        for (let i = 0; i < keys.length; i++) {
+                            result = result[keys[i]]
+                        }
+
+                        return toSass(result)
+                    },
+                    'getColors()': function () {
+                        return toSass(theme.colors)
+                    },
+                    'getThemes()': function () {
+                        return toSass(theme.themes)
+                    },
+                },
+            },
+        },
+    },
+})