YouHaveTrouble/youhavetrouble.github.io
1
0
Fork 0
mirror of https://github.com/YouHaveTrouble/youhavetrouble.github.io.git synced 2026-05-11 22:06:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

lean more into transitions and animations

Browse Source
This commit is contained in:
YouHaveTrouble
2025-11-09 14:01:38 +01:00
parent e486052413
commit 7b5b071203
10 changed files with 457 additions and 358 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+11 -9
View File
@@ -28,7 +28,6 @@
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
"integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
"peer": true,
"dependencies": {
"@jridgewell/gen-mapping": "^0.3.5",
"@jridgewell/trace-mapping": "^0.3.24"
@@ -444,6 +443,7 @@
"version": "7.28.4",
"resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.4.tgz",
"integrity": "sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==",
"peer": true,
"dependencies": {
"@babel/code-frame": "^7.27.1",
"@babel/generator": "^7.28.3",
@@ -2203,6 +2203,7 @@
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-3.1.2.tgz",
"integrity": "sha512-Txsm1tJvtiYeLUVRNqxZGKR/mI+CzuIQuc2gn+YCs9rMTowpNZ2Nqt53JdL8KF9bLhAf2ruR/dr9eZCwdTriRA==",
"peer": true,
"dependencies": {
"@sveltejs/vite-plugin-svelte-inspector": "^2.1.0",
"debug": "^4.3.4",
@@ -2352,6 +2353,7 @@
"version": "8.15.0",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
"integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
"peer": true,
"bin": {
"acorn": "bin/acorn"
},
@@ -2468,6 +2470,7 @@
"version": "4.16.19",
"resolved": "https://registry.npmjs.org/astro/-/astro-4.16.19.tgz",
"integrity": "sha512-baeSswPC5ZYvhGDoj25L2FuzKRWMgx105FetOPQVJFMCAp0o08OonYC7AhwsFdhvp7GapqjnC1Fe3lKb2lupYw==",
"peer": true,
"dependencies": {
"@astrojs/compiler": "^2.10.3",
"@astrojs/internal-helpers": "0.4.1",
@@ -3027,6 +3030,7 @@
"url": "https://github.com/sponsors/ai"
}
],
"peer": true,
"dependencies": {
"baseline-browser-mapping": "^2.8.3",
"caniuse-lite": "^1.0.30001741",
@@ -3203,7 +3207,6 @@
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/code-red/-/code-red-1.0.4.tgz",
"integrity": "sha512-7qJWqItLA8/VPVlKJlFXU+NBlo/qyfs39aJcuMT/2ere32ZqvF5OSxgdM5xOfJJ7O429gg2HM47y8v9P+9wrNw==",
"peer": true,
"dependencies": {
"@jridgewell/sourcemap-codec": "^1.4.15",
"@types/estree": "^1.0.1",
@@ -3293,7 +3296,6 @@
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
"integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
"peer": true,
"dependencies": {
"mdn-data": "2.0.30",
"source-map-js": "^1.0.1"
@@ -4358,7 +4360,6 @@
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.3.tgz",
"integrity": "sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==",
"peer": true,
"dependencies": {
"@types/estree": "^1.0.6"
}
@@ -4487,8 +4488,7 @@
"node_modules/locate-character": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
"integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==",
"peer": true
"integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA=="
},
"node_modules/locate-path": {
"version": "5.0.0",
@@ -4897,8 +4897,7 @@
"node_modules/mdn-data": {
"version": "2.0.30",
"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
"integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
"peer": true
"integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA=="
},
"node_modules/mdurl": {
"version": "2.0.0",
@@ -5885,7 +5884,6 @@
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/periscopic/-/periscopic-3.1.0.tgz",
"integrity": "sha512-vKiQ8RRtkl9P+r/+oefh25C3fhybptkHKCZSPlcXiJux2tJF55GnEj3BVn4A5gKfq9NWWXXrxkHBwVPUfH0opw==",
"peer": true,
"dependencies": {
"@types/estree": "^1.0.0",
"estree-walker": "^3.0.0",
@@ -6687,6 +6685,7 @@
"version": "4.52.0",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.52.0.tgz",
"integrity": "sha512-+IuescNkTJQgX7AkIDtITipZdIGcWF0pnVvZTWStiazUmcGA2ag8dfg0urest2XlXUi9kuhfQ+qmdc5Stc3z7g==",
"peer": true,
"dependencies": {
"@types/estree": "1.0.8"
},
@@ -6773,6 +6772,7 @@
"version": "1.93.0",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.93.0.tgz",
"integrity": "sha512-CQi5/AzCwiubU3dSqRDJ93RfOfg/hhpW1l6wCIvolmehfwgCI35R/0QDs1+R+Ygrl8jFawwwIojE2w47/mf94A==",
"peer": true,
"dependencies": {
"chokidar": "^4.0.0",
"immutable": "^5.0.2",
@@ -7404,6 +7404,7 @@
"version": "5.4.20",
"resolved": "https://registry.npmjs.org/vite/-/vite-5.4.20.tgz",
"integrity": "sha512-j3lYzGC3P+B5Yfy/pfKNgVEg4+UtcIJcVRt2cDjIOmhLourAqPqf8P7acgxeiSgUB7E3p2P8/3gNIgDLpwzs4g==",
"peer": true,
"dependencies": {
"esbuild": "^0.21.3",
"postcss": "^8.4.43",
@@ -7562,6 +7563,7 @@
"version": "3.25.76",
"resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
"integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
"peer": true,
"funding": {
"url": "https://github.com/sponsors/colinhacks"
}
src/components/Header.astro
+23 -13
View File
@@ -2,20 +2,30 @@
import Logo from './Logo.astro'
import Nav from './Nav.astro'
const { current = '' } = Astro.props;
export interface Props {
current?: string;
showLogo?: boolean;
}
const {current = '', showLogo = true} = Astro.props;
---
<header>
{
showLogo && (
<Logo width="50" height="50"/>
)
}
<Nav current={current}/>
</header>
<style>
header {
display: flex;
margin: 0 auto;
max-width: var(--wrap);
padding: 1em;
width: 100%;
}
header {
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
max-width: var(--wrap);
padding: 1em;
width: 100%;
}
</style>
<header>
<Logo width="50" height="50" />
<Nav current={current} />
</header>
src/components/Logo.astro
+4
View File
@@ -11,6 +11,10 @@ const { width, height } = Astro.props;
<style>
img {
view-transition-name: nav-logo;
}
@media screen and (max-width: 520px) {
img {
display: none;
src/components/Nav.astro
+72 -72
View File
@@ -1,81 +1,81 @@
---
const { current = '' } = Astro.props;
---
<style>
@media (orientation: portrait) {
nav {
justify-content: center;
flex-wrap: wrap;
}
.nav-buttons {
flex-wrap: wrap;
justify-content: space-evenly;
}
}
nav {
align-items: center;
display: flex;
flex: 1;
font-family: var(--font-family-sans);
font-weight: 700;
justify-content: flex-end;
text-transform: uppercase;
}
.nav-buttons {
display: flex;
flex-direction: row;
overflow-x: hidden;
}
a {
color: inherit;
text-decoration: none;
padding: 10px 5px;
display: block;
position: relative;
margin-left: 20px;
min-width: 70px;
text-align: center;
}
a:not(.selected) {
opacity: 0.7;
}
a::before {
content: '';
position: absolute;
transition: transform .3s ease;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background: var(--text-secondary);
transform: scaleX(0);
}
a:hover::before,
.selected::before {
transform: scaleX(1);
}
.selected::before {
background: var(--primary-color);
}
.theme-toggle-container {
width: 75px;
}
</style>
<nav>
<div class="nav-buttons">
<a data-astro-prefetch class={current === "" ? "selected" : ""} href='/'>home</a>
<a data-astro-prefetch class={current === "blog" ? "selected" : ""} href='/blog'>blog</a>
</div>
</nav>
<style>
@media (orientation: portrait) {
nav {
justify-content: center;
flex-wrap: wrap;
}
.nav-buttons {
flex-wrap: wrap;
justify-content: space-evenly;
}
}
nav {
align-items: center;
display: flex;
flex: 1;
font-family: var(--font-family-sans);
font-weight: 700;
justify-content: flex-end;
text-transform: uppercase;
min-height: 60px;
}
.nav-buttons {
display: flex;
flex-direction: row;
overflow-x: hidden;
gap: 1rem;
}
a {
color: inherit;
text-decoration: none;
padding: 10px 5px;
display: block;
position: relative;
min-width: 70px;
text-align: center;
}
a:not(.selected) {
opacity: 0.7;
}
a::before {
content: '';
position: absolute;
transition: transform .3s ease;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background: var(--text-secondary);
transform: scaleX(0);
}
a:hover::before,
.selected::before {
transform: scaleX(1);
}
.selected::before {
background: var(--primary-color);
}
.theme-toggle-container {
width: 75px;
}
</style>
src/layouts/BaseLayout.astro
+3 -2
View File
@@ -8,8 +8,9 @@ export interface Props {
description: string;
permalink: string;
current?: string;
showLogo?: boolean;
}
const { title, description, permalink, current } = Astro.props;
const { title, description, permalink, current, showLogo = true } = Astro.props;
---
<html lang="en">
<head>
@@ -17,7 +18,7 @@ const { title, description, permalink, current } = Astro.props;
</head>
<body>
<div class="layout">
<Header current={current} />
<Header current={current} showLogo={showLogo} />
<main>
<slot />
src/pages/about.astro
+49 -37
View File
@@ -7,45 +7,57 @@ const permalink = `${Astro?.site?.href}about`;
---
<BaseLayout title={title} description={description} permalink={permalink} current="about">
<div class="container">
<h1>About me</h1>
<div class="container">
<h1>About me</h1>
<p>My name is <strong>Paweł</strong>, but I'm better known as <strong>YouHaveTrouble</strong> on the internet.</p>
<p>
I currently work as a full-stack web developer. Technologies I usually use for my job are javascript, vuejs,
typescript, sql. I also often actively research and learn about new technologies that could be used to improve my
work.
</p>
<p>
In my spare time I develop plugins for minecraft servers. This is a hobby that initially made me learn how to
code. To this day I help maintain <a href="https://purpurmc.org">Purpur</a> server software along with its
<a href="https://modrinth.com/plugin/purpurextras">official plugin</a>. List of plugins I currently support can be
found <a href="https://modrinth.com/user/YouHaveTrouble/plugins">here</a>.
</p>
<p>
My video game interests are mostly focused on narrative heavy games, but I also enjoy some ARPGs and roguelikes.
You can see my full steam library <a href="https://steamcommunity.com/id/YouHaveTrouble/games/?tab=all">here</a>.
Recommendations from my favourite games would include:
</p>
<ul>
<li><a href="https://store.steampowered.com/app/420530/OneShot/">OneShot</a></li>
<li><a href="https://store.steampowered.com/app/1150690/OMORI/">OMORI</a></li>
<li><a href="https://store.steampowered.com/app/250900/The_Binding_of_Isaac_Rebirth/">The Binding of Isaac: Rebirth</a></li>
<li><a href="https://store.steampowered.com/app/105600/Terraria/">Terraria</a></li>
<li><a href="https://store.steampowered.com/app/582010/Monster_Hunter_World/">Monster Hunter: World</a></li>
<li><a href="https://store.steampowered.com/app/238960/Path_of_Exile/">Path of Exile</a></li>
</ul>
</div>
<p>My name is <strong>Paweł</strong>, but I'm better known as <strong>YouHaveTrouble</strong> on the internet.
</p>
<p>
I currently work as a full-stack web developer. Technologies I usually use for my job are javascript, vuejs,
typescript, sql. I also often actively research and learn about new technologies that could be used to
improve my
work.
</p>
<p>
In my spare time I develop plugins for minecraft servers. This is a hobby that initially made me learn how
to
code. To this day I help maintain <a href="https://purpurmc.org">Purpur</a> server software along with its
<a href="https://modrinth.com/plugin/purpurextras">official plugin</a>. List of plugins I currently support
can be
found <a href="https://modrinth.com/user/YouHaveTrouble/plugins">here</a>.
</p>
<p>
My video game interests are mostly focused on narrative heavy games, but I also enjoy some ARPGs and
roguelikes.
You can see my full steam library <a
href="https://steamcommunity.com/id/YouHaveTrouble/games/?tab=all">here</a>.
Recommendations from my favourite games would include:
</p>
<ul>
<li><a href="https://store.steampowered.com/app/420530/OneShot/">OneShot</a></li>
<li><a href="https://store.steampowered.com/app/1150690/OMORI/">OMORI</a></li>
<li><a href="https://store.steampowered.com/app/250900/The_Binding_of_Isaac_Rebirth/">The Binding of Isaac:
Rebirth</a></li>
<li><a href="https://store.steampowered.com/app/105600/Terraria/">Terraria</a></li>
<li><a href="https://store.steampowered.com/app/582010/Monster_Hunter_World/">Monster Hunter: World</a></li>
<li><a href="https://store.steampowered.com/app/238960/Path_of_Exile/">Path of Exile</a></li>
</ul>
</div>
</BaseLayout>
<style>
ul {
list-style-type: disc;
padding-left: 1.5rem;
margin-block: 0;
}
<style lang="scss" scoped>
ul li {
margin-block: 0;
}
h1 {
view-transition-name: about;
}
ul {
list-style-type: disc;
padding-left: 1.5rem;
margin-block: 0;
}
ul li {
margin-block: 0;
}
</style>
src/pages/blog/[slug].astro
+1 -2
View File
@@ -31,7 +31,7 @@ const permalink = `${Astro?.site?.href}blog/${slug}`;
<BaseLayout title={title} description={description} permalink={permalink} current="blog">
<header>
<p>{publishDate} ~ {readTime}</p>
<h1>{title}</h1>
<h1 style={`view-transition-name: blogpost-${slug}`}>{title}</h1>
<div class="tags" style="justify-content: center">
{tags.map(item => (
<span class="tag">{item}</span>
@@ -55,7 +55,6 @@ const permalink = `${Astro?.site?.href}blog/${slug}`;
margin-bottom: 0.7em;
display: flex;
justify-content: center;
view-transition-name: blog-title;
width: fit-content;
margin-inline: auto;
}
src/pages/blog/index.astro
+7 -2
View File
@@ -21,7 +21,7 @@ const allPosts= posts.sort((a, b) => new Date(b.data.publishDate).valueOf() - ne
{ index !== 0 && <hr /> }
<div class="post-item">
<h2>
<a data-astro-prefetch href={href}>{post.data.title}</a>
<a data-astro-prefetch href={href} style={`view-transition-name: blogpost-${post.slug}`}>{post.data.title}</a>
</h2>
<div class="tags">
{post.data.tags.map(item => (
@@ -39,7 +39,12 @@ const allPosts= posts.sort((a, b) => new Date(b.data.publishDate).valueOf() - ne
</div>
</BaseLayout>
<style>
<style lang="scss" scoped>
h1 {
view-transition-name: blog;
}
h2,
.post-item-footer {
font-family: var(--font-family-sans);
src/pages/index.astro
+283 -221
View File
@@ -1,272 +1,334 @@
---
import BaseLayout from '../layouts/BaseLayout.astro';
import {getCollection} from "astro:content";
import logoImage from '../assets/img/yht_logo.png';
import {Image} from 'astro:assets';
import ActivityWidget from "../components/ActivityWidget.astro";
import ViewCounter from "../components/ViewCounter.astro";
import SocialsWidget from "../components/SocialsWidget.astro";
import ProjectsFeature from "../components/ProjectsFeature.astro";
import {getCollection} from "astro:content";
const title = 'Home';
const description = 'My little corner of the internet.';
const permalink = Astro?.site?.href ?? '/';
const latestBlogPost = await getCollection("posts")
.then(posts => posts.sort(
(a, b) => new Date(b.data.publishDate).getTime() - new Date(a.data.publishDate).getTime()
)
).then(sortedBlogPosts => sortedBlogPosts.length > 0 ? sortedBlogPosts[0] : null);
.then(posts => posts.sort(
(a, b) => new Date(b.data.publishDate).getTime() - new Date(a.data.publishDate).getTime()
)
).then(sortedBlogPosts => sortedBlogPosts.length > 0 ? sortedBlogPosts[0] : null);
---
<BaseLayout title={title} description={description} permalink={permalink}>
<div class="home-container">
<div class="window home-copy" data-title="Welcome" id="welcome">
<div>
<h1>Welcome to my little corner of the interwebs</h1>
<p>Feel free to check out what I got in store!</p>
</div>
</div>
<div class="window-row">
<div class="window visitor-counter" data-title="Visitors counter" id="visitor-counter"
aria-label="Visitors counter">
<ViewCounter/>
</div>
<div class="window activity" data-title="Activity" id="activity" aria-label="Activity">
<ActivityWidget/>
</div>
</div>
<div class="window-row">
<div class="window socials" data-title="Socials" id="socials" aria-label="Socials">
<SocialsWidget/>
</div>
<div class="window blog" aria-label="Blog" id="blog" data-title="Blog">
<span>Latest article:</span>
{
latestBlogPost === null ? (
<div class="latest-article">
<span class="title">No articles yet</span>
<span class="excerpt">Come back later to check for new articles!</span>
</div>
) : null
}
<div class="latest-article">
<span class="title">{latestBlogPost?.data.title}</span>
<span class="excerpt">{latestBlogPost?.data.description}</span>
<BaseLayout
title={title}
description={description}
permalink={permalink}
showLogo={false}
>
<div class="hero">
<div class="thought-bubble">
<div class="thoughts">
<div class="latest-blogpost">
{
latestBlogPost ? (
<span>Latest blog post:</span>
<a href={`/blog/${latestBlogPost.slug}`} style={`view-transition-name: blogpost-${latestBlogPost.slug}`}>
{latestBlogPost.data.title}
</a>
) : (
<span>No blog posts yet.</span>
)
}
</div>
<div class="visitor-count">
<ViewCounter />
</div>
</div>
<div class="thoughts-list">
<label>
<input
type="radio"
name="thoughts"
id="latest-blogpost"
aria-label="Latest blog post"
checked
/>
</label>
<label>
<input
type="radio"
name="thoughts"
id="visitor-count"
aria-label="Activity"
/>
</label>
</div>
</div>
<div class="actions">
{
latestBlogPost !== null && (
<a href={`/blog/${latestBlogPost?.slug}`} class="button">Read more</a>
<a href="/blog" class="button secondary">All articles</a>
)
}
</div>
<div class="buttons">
<div class="rss">
<a
href="/rss.xml"
target="_blank"
aria-label="RSS feed"
title="RSS feed"
>
<svg height="14px" width="14px" xmlns="http://www.w3.org/2000/svg"
viewBox="-271 273 256 256" xml:space="preserve">
<g>
<path fill="white" d="M-271,360v48.9c31.9,0,62.1,12.6,84.7,35.2c22.6,22.6,35.1,52.8,35.1,84.8v0.1h49.1c0-46.6-19-88.7-49.6-119.4
C-182.2,379-224.4,360.1-271,360z"/>
<path fill="white" d="M-237,460.9c-9.4,0-17.8,3.8-24,10s-10,14.6-10,24c0,9.3,3.8,17.7,10,23.9c6.2,6.1,14.6,9.9,24,9.9s17.8-3.7,24-9.9
s10-14.6,10-23.9c0-9.4-3.8-17.8-10-24C-219.2,464.7-227.6,460.9-237,460.9z"/>
<path fill="white" d="M-90.1,348.1c-46.3-46.4-110.2-75.1-180.8-75.1v48.9C-156.8,322-64.1,414.9-64,529h49C-15,458.4-43.7,394.5-90.1,348.1z"/>
</g>
</svg>
</a>
</div>
<div class="hero-body">
<div class="hero-nav">
<a class="option about" href="/about">About</a>
<a class="option projects" href="/projects">Projects</a>
<a class="option blog" href="/blog">Blog</a>
</div>
<Image
src={logoImage}
alt="Logo displaying a stylized character with brown hair wearing purple hoodie on a light blue circle background"
width={150}
height={150}
loading="eager"
class="main-logo"
draggable="false"
/>
</div>
</div>
</div>
<div class="window-row">
<div class="window" data-title="Projects" id="projects" aria-label="Projects">
<div class="buttons">
<button popovertarget="projects-info" popovertargetaction="show" tabindex="0" aria-label="Projects info">
<span class="icon">ℹ️</span>
</button>
</div>
<div popover="auto" id="projects-info" class="window">
<div class="buttons">
<button popovertarget="projects-info" popovertargetaction="hide" tabindex="0"
aria-label="Close projects info">
<span class="icon">❌</span>
</button>
</div>
<h2>Projects</h2>
<p>
Here are some of the projects I'm working on. Most of them are open source, so feel free to check them out!
<br>
Projects presented here are what I consider in presentable and/or finished state. They might or might not
get
updates.
<br>
Most logos generated using <a href="https://huggingface.co/spaces/dalle-mini/dalle-mini" target="_blank">DALL-E
mini</a>.
<br>
Inviter logo by <a href="https://slyfoxart.artstation.com/projects" target="_blank">SlyFox</a>
</p>
</div>
<ProjectsFeature/>
</div>
</div>
</div>
</div>
</BaseLayout>
<style lang="scss">
#projects-info {
position: fixed;
}
.visitor-counter {
padding: 1.5rem 2rem 0 2rem;
display: flex;
justify-content: center;
align-items: center;
min-width: min(15rem, 100%);
flex: 1;
width: 100%;
}
.socials {
padding: 2rem 1rem 0 1rem;
flex: 2;
min-width: min(25rem, 100%);
}
.activity {
min-width: min(100%, 16rem);
flex: 2;
}
#projects {
width: 100%;
display: flex;
flex: 1;
padding-top: 1.5rem;
}
.blog {
padding: 2rem 1rem 0.75rem 1rem;
.hero {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-width: min(25rem, 100%);
width: 100%;
gap: 0.5rem;
flex: 1;
container-type: inline-size;
container-name: hero;
.latest-article {
.hero-body {
display: flex;
justify-content: center;
flex-direction: column-reverse;
width: 100%;
align-items: center;
gap: 0.5rem;
position: relative;
z-index: 1;
}
.hero-nav {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin-bottom: 0.5rem;
background: rgba(255,255,255, 0.05);
padding: 0.5rem;
border-radius: 0.25rem;
.title {
font-weight: 600;
font-size: 1.1rem;
view-transition-name: blog-title;
}
.excerpt {
font-size: 0.9rem;
color: var(--text-secondary);
}
}
.actions {
display: flex;
gap: 0.5rem;
}
}
.buttons {
.rss {
display: flex;
height: 100%;
justify-content: center;
align-items: center;
aspect-ratio: 1/1;
padding-bottom: 4px;
a {
height: 100%;
width: 100%;
gap: 0.5rem;
width: 100%;
.option {
border-width: 1px;
border-style: solid;
border-color: var(--text-main);
display: flex;
justify-content: center;
align-items: center;
}
}
}
font-size: 0.8rem;
text-decoration: none;
padding: 0.5rem;
width: 100%;
border-radius: 1rem;
background-color: var(--background-body);
.window-row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 1.5rem;
width: 100%;
justify-content: center;
}
&.about {
view-transition-name: about;
}
.home-container {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
margin: 2em 0;
gap: 1.5rem;
&.projects {
view-transition-name: projects;
}
.home-copy {
flex: 1;
display: flex;
width: 100%;
padding-top: 3rem;
padding-inline: 0.5rem;
h1 {
font-weight: 700;
margin-bottom: 0.5em;
line-height: 1.3;
font-size: 2rem;
text-align: center;
&.blog {
view-transition-name: blog;
}
}
p {
text-align: center;
font-size: 1.2rem;
}
.thought-bubble {
position: relative;
width: min(100%, 15rem);
min-height: 5rem;
background-color: var(--text-main);
margin-bottom: 0.75rem;
border-radius: 1rem;
border: 2px solid black;
opacity: 0;
z-index: 5;
animation: fadeIn 1s linear forwards;
animation-delay: 0.25s;
&:has(input#latest-blogpost:checked) {
.thoughts {
.latest-blogpost {
display: flex;
}
}
}
&:has(input#visitor-count:checked) {
.thoughts {
.visitor-count {
display: flex;
}
}
}
.thoughts {
display: flex;
flex-direction: row;
height: 5rem;
& > * {
display: none;
}
.latest-blogpost {
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
color: var(--background-body);
a {
color: var(--background-body);
text-decoration: underline;
}
}
.visitor-count {
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
color: var(--background-body)
}
.activity {
overflow: hidden;
}
}
.thoughts-list {
display: flex;
flex-direction: row;
justify-content: center;
gap: 0.5rem;
}
&::before {
position: absolute;
content: '';
bottom: -2.25rem;
right: 25%;
width: 2rem;
height: 2rem;
background-color: var(--text-main);
border: 2px solid black;
border-radius: 50%;
z-index: 5;
}
&::after {
position: absolute;
content: '';
bottom: -3.25rem;
right: 33%;
width: 1rem;
height: 1rem;
background-color: var(--text-main);
border: 2px solid black;
border-radius: 50%;
z-index: 5;
}
}
@container hero (width >= 320px) {
.hero-body {
flex-direction: row;
}
.hero-nav {
animation-name: animateNavIn;
animation-duration: 0.5s;
animation-fill-mode: forwards;
animation-delay: 0.1s;
position: absolute;
opacity: 0;
.option {
position: absolute;
width: 4rem;
height: 4rem;
border-radius: 50%;
&.about {
animation-name: animateNavAboutIn;
animation-duration: 0.75s;
animation-fill-mode: forwards;
animation-delay: 0.25s;
}
&.blog {
animation-name: animateNavBlogIn;
animation-duration: 0.75s;
animation-fill-mode: forwards;
animation-delay: 0.25s;
}
}
}
}
}
@media (max-width: 1200px) {
p {
font-size: 1.2em;
.main-logo {
border-radius: 50%;
view-transition-name: nav-logo;
}
@keyframes animateNavIn {
0% {
bottom: 50%;
left: auto;
right: auto;
opacity: 0;
}
100% {
left: auto;
right: auto;
bottom: -2.5rem;
opacity: 1;
}
}
@keyframes animateNavBlogIn {
0% {
transform: translateX(0) translateY(0);
}
100% {
transform: translateX(calc(100% + 0.25rem)) translateY(-1.5rem);
}
}
@media (max-width: 800px) {
.home-container {
flex-direction: column;
@keyframes animateNavAboutIn {
0% {
transform: translateX(0) translateY(0);
}
100% {
transform: translateX(calc(-100% - 0.25rem)) translateY(-1.5rem);
}
}
.home-copy {
flex: 0;
padding-bottom: 2em;
text-align: center;
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
src/pages/projects.astro
+4
View File
@@ -85,6 +85,10 @@ for (const project of projectsCollection) {
margin-bottom: 3.25rem;
}
h1 {
view-transition-name: projects;
}
h2 {
text-transform: capitalize;
}