Compare commits
5 Commits
b3c377f62d
...
2.15.1
| Author | SHA1 | Date | |
|---|---|---|---|
| c5cda006bb | |||
| 959d3bd71d | |||
| f3b8d10106 | |||
| 0c63c6bef4 | |||
| 5e37e2bb53 |
@@ -22,7 +22,7 @@ WORKDIR /app
|
||||
COPY --from=prod-deps /app/node_modules /app/node_modules
|
||||
COPY --from=build /app/dist /app/dist
|
||||
|
||||
LABEL version="2.14.1"
|
||||
LABEL version="2.15.1"
|
||||
LABEL description="Astro based personal website"
|
||||
|
||||
ENV HOST=0.0.0.0
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "site-profile",
|
||||
"type": "module",
|
||||
"version": "2.14.1",
|
||||
"version": "2.15.1",
|
||||
"homepage": "https://www.alexlebens.dev",
|
||||
"bugs": {
|
||||
"url": "https://gitea.alexlebens.dev/alexlebens/site-profile/issues",
|
||||
|
||||
@@ -11,7 +11,6 @@ const currentPath = pathname.slice(1);
|
||||
id="nav"
|
||||
class="fixed flex flex-wrap md:flex-nowrap md:justify-start inset-x-0 top-0 w-full z-50"
|
||||
>
|
||||
<div class="bg-linear-to-b from-background from-65% to-transparent to-90% absolute top-0 bottom-0 left-0 w-full h-36 z-0"/>
|
||||
<nav
|
||||
class="nav-base relative md:flex md:items-center md:justify-between rounded-[36px] w-full px-4 mx-2 py-3 mt-4"
|
||||
aria-label="Global"
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
---
|
||||
import { Icon } from 'astro-icon/components';
|
||||
import Logo from "@components/images/Logo.astro"
|
||||
|
||||
interface Props {
|
||||
|
||||
@@ -78,7 +78,7 @@ const experiences = ((await directus.request(
|
||||
</div>
|
||||
)}
|
||||
{(experience.responsibilities || experience.achievements) && (
|
||||
<div class="relative flex flex-col gap-4 after:absolute after:bottom-0 after:h-12 after:w-full after:bg-linear-to-t after:from-neutral-200 dark:after:from-stone-700 after:content-[''] " :class="expanded ? 'after:hidden' : ''" x-show="expanded" x-collapse.min.50px>
|
||||
<div class="relative flex flex-col gap-4" :class="expanded ? '' : 'mask-[linear-gradient(to_bottom,black_50%,transparent)]'" x-show="expanded" x-collapse.min.50px>
|
||||
{experience.responsibilities && (
|
||||
<div class="flex flex-col gap-1">
|
||||
<h4 class="text-header font-semibold">
|
||||
|
||||
@@ -18,8 +18,8 @@ const skills = ((await directus.request(
|
||||
<h3 class="smooth-reveal card-text-header flex relative items-center w-full gap-3 pb-5">
|
||||
Skills
|
||||
</h3>
|
||||
<div class="">
|
||||
<div class="tech-stack-slider relative overflow-hidden py-4 sm:py-8">
|
||||
<div>
|
||||
<div class="tech-stack-slider relative overflow-hidden py-4 sm:py-8 mask-[linear-gradient(to_right,transparent,black_10%,black_90%,transparent)]">
|
||||
<!-- Main slider container -->
|
||||
<div class="slider-track animate-slide flex">
|
||||
{[...skills, ...skills, ...skills].map((skill: Skill) => {
|
||||
@@ -54,9 +54,6 @@ const skills = ((await directus.request(
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<!-- Gradient overlays -->
|
||||
<div class="bg-linear-to-r from-neutral-200 to-transparent dark:from-stone-700 absolute top-0 bottom-0 left-0 z-10 w-12 sm:w-24"/>
|
||||
<div class="bg-linear-to-l from-neutral-200 to-transparent dark:from-stone-700 absolute top-0 bottom-0 right-0 z-10 w-12 sm:w-24"/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -66,21 +66,21 @@ const normalizeTitle = !title ? global.name : `${title} | ${global.name}`;
|
||||
data-site-id={global.rybbit_site_id}
|
||||
defer
|
||||
/>
|
||||
|
||||
</head>
|
||||
|
||||
<body class="bg-background selection:bg-yellow-400">
|
||||
<!-- Disabled texture background for now
|
||||
<div class="fixed inset-0 -z-10">
|
||||
<div class="bg-grid-pattern absolute inset-0 mask-[radial-gradient(white,transparent_85%)] bg-position-[center_top_-1px]"/>
|
||||
</div>
|
||||
-->
|
||||
|
||||
<body class="bg-background selection:bg-yellow-400 m-0 p-0 overflow-x-hidden">
|
||||
|
||||
<!-- Sliding backgrounds -->
|
||||
<div class="bg"/>
|
||||
<div class="bg bg2"/>
|
||||
<div class="bg bg3"/>
|
||||
|
||||
<!-- Layout -->
|
||||
<div class="grow w-full max-w-(--breakpoint-2xl) px-4 sm:px-6 lg:px-8 py-20 mx-auto">
|
||||
|
||||
|
||||
<Header />
|
||||
|
||||
<main class="min-h-screen">
|
||||
<main class="has-js scroll-fade-container min-h-screen">
|
||||
<slot />
|
||||
</main>
|
||||
|
||||
@@ -91,14 +91,84 @@ const normalizeTitle = !title ? global.name : `${title} | ${global.name}`;
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<script>
|
||||
document.addEventListener('astro:page-load', () => {
|
||||
const onScroll = () => {
|
||||
document.documentElement.style.setProperty('--scroll-offset', `${window.scrollY}px`);
|
||||
document.documentElement.classList.add('has-js');
|
||||
};
|
||||
|
||||
window.removeEventListener('scroll', onScroll);
|
||||
window.addEventListener('scroll', onScroll, { passive: true });
|
||||
|
||||
onScroll();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.bg-grid-pattern {
|
||||
background-size: 24px 24px;
|
||||
background-image: radial-gradient(circle, rgba(0, 0, 0, 0.2) 1px, transparent 1px);
|
||||
transition: background-image 0.7s cubic-bezier(0.65, 0, 0.35, 1);
|
||||
/* Fade away content below header when scrolling */
|
||||
.has-js .scroll-fade-container {
|
||||
-webkit-mask-image: linear-gradient(
|
||||
to bottom,
|
||||
transparent 0px,
|
||||
transparent 16px,
|
||||
black 80px,
|
||||
black 100%
|
||||
);
|
||||
|
||||
mask-image: linear-gradient(
|
||||
to bottom,
|
||||
transparent 0px,
|
||||
transparent 16px,
|
||||
black 80px,
|
||||
black 100%
|
||||
);
|
||||
|
||||
-webkit-mask-size: 100vw 100vh;
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
|
||||
-webkit-mask-position-y: var(--scroll-offset);
|
||||
mask-position-y: var(--scroll-offset);
|
||||
}
|
||||
|
||||
:global(.dark) .bg-grid-pattern {
|
||||
background-image: radial-gradient(circle, rgba(255, 255, 255, 0.25) 1px, transparent 1px);
|
||||
/* Background that creates the "glimmer" effect */
|
||||
.bg {
|
||||
animation: slide 20s ease-in-out infinite alternate;
|
||||
background-image: linear-gradient(-60deg, var(--bg-primary) 33.3%, var(--bg-secondary) 33.3%, var(--bg-secondary) 66.6%, var(--bg-tertiary) 66.6%);
|
||||
filter: blur(80px);
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: -50%;
|
||||
right: -50%;
|
||||
opacity: .5;
|
||||
position: fixed;
|
||||
z-index: -1;
|
||||
--bg-primary: #e5e5e5;
|
||||
--bg-secondary: #d9d9d9;
|
||||
--bg-tertiary: #ededed;
|
||||
}
|
||||
|
||||
:global(.dark) .bg {
|
||||
--bg-primary: #292524;
|
||||
--bg-secondary: #44403c;
|
||||
--bg-tertiary: #57534e;
|
||||
}
|
||||
|
||||
.bg2 {
|
||||
animation-direction: alternate-reverse;
|
||||
animation-duration: 30s;
|
||||
}
|
||||
|
||||
.bg3 {
|
||||
animation-duration: 25s;
|
||||
}
|
||||
|
||||
@keyframes slide {
|
||||
0% {
|
||||
transform:translateX(-25%);
|
||||
}
|
||||
100% {
|
||||
transform:translateX(25%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -50,8 +50,9 @@
|
||||
:root {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
--theme-transition: 0.3s ease;
|
||||
color-scheme: light;
|
||||
--scroll-offset: 0px;
|
||||
}
|
||||
|
||||
:root:where(.dark, .dark *) {
|
||||
@@ -73,9 +74,6 @@
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow-x: hidden;
|
||||
--swup-fade-theme-duration: 0.2s;
|
||||
}
|
||||
|
||||
|
||||
@@ -74,9 +74,9 @@
|
||||
}
|
||||
|
||||
@utility card-hover-icon-scale {
|
||||
@apply transition-all duration-300
|
||||
@apply transition-transform duration-300 will-change-transform
|
||||
drop-shadow-md dark:drop-shadow-xl dark:drop-shadow-neutral-500/60
|
||||
group-hover:scale-110
|
||||
group-hover:scale-3d group-hover:scale-110
|
||||
}
|
||||
|
||||
@utility card-text-header {
|
||||
|
||||
Reference in New Issue
Block a user