jasterv/jaster.xyz
1
0
Fork 0
mirror of https://codeberg.org/JasterV/jaster.xyz.git synced 2026-04-27 02:15:40 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

[feat] New release with simplified codebase and design

Browse source
This commit is contained in:
JasterV 2025-06-02 03:33:13 +02:00
commit d2b2738a1d
17 changed files with 123 additions and 166 deletions
Download patch file Download diff file Expand all files Collapse all files

10
astro.config.mjs
View file

@ -1,6 +1,16 @@
import { defineConfig } from "astro/config"; import { defineConfig } from "astro/config";
import icon from "astro-icon";
// https://astro.build/config // https://astro.build/config
export default defineConfig({ export default defineConfig({
site: "https://jaster.xyz", site: "https://jaster.xyz",
integrations: [
icon({
include: {
// Include only three `mdi` icons in the bundle
// Otherwise, Astro Icons could include every single icon in the mdi package and result in a huge bundle size
mdi: ["github", "linkedin"],
},
}),
],
}); });

BIN
bun.lockb
View file

Binary file not shown.

2
package.json
View file

@ -14,9 +14,11 @@
"dependencies": { "dependencies": {
"@astrojs/check": "^0.9.4", "@astrojs/check": "^0.9.4",
"astro": "^5.8.1", "astro": "^5.8.1",
"astro-icon": "^1.1.5",
"typescript": "^5.8.3" "typescript": "^5.8.3"
}, },
"devDependencies": { "devDependencies": {
"@iconify-json/mdi": "^1.2.3",
"prettier": "^3.1.1", "prettier": "^3.1.1",
"prettier-plugin-astro": "^0.12.3", "prettier-plugin-astro": "^0.12.3",
"sass": "^1.70.0" "sass": "^1.70.0"

0
src/assets/night.jpg → src/assets/blog-bg.jpg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 43 KiB

After

Width:  |  Height:  |  Size: 43 KiB

Before After
Before After

0
src/assets/background-mario.jpg → src/assets/home-bg.jpg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 170 KiB

After

Width:  |  Height:  |  Size: 170 KiB

Before After
Before After

BIN
src/assets/profile.jpeg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 694 KiB

5
src/components/Hamburger.astro
View file

@ -1,5 +0,0 @@
<div class="hamburger">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>

28
src/components/LinkButton.astro
View file

@ -1,28 +0,0 @@
---
interface Props {
href: string | URL;
text: string;
}
const { href, text } = Astro.props;
---
<a class="link-button" href={href}>{text}</a>
<style>
.link-button {
text-decoration: none;
margin: 0.25em;
padding: 0.25em 1em;
border: 1px solid var(--text-color);
position: relative;
background: transparent;
font-size: 1.4rem;
font-weight: bold;
color: var(--text-color);
}
.link-button:hover {
top: 2px;
}
</style>

8
src/components/Navigation.astro
View file

@ -1,8 +0,0 @@
---
import LinkButton from "./LinkButton.astro";
---
<nav class="nav-links">
<LinkButton href="/" text="Home" />
<LinkButton href="/blog" text="Blog" />
</nav>

4
src/components/PostCard.astro
View file

@ -37,4 +37,8 @@ const { post } = Astro.props;
border: 1px solid var(--text-color); border: 1px solid var(--text-color);
padding: 1rem; padding: 1rem;
} }
a {
text-decoration: none;
}
</style> </style>

25
src/components/PostCards.astro
View file

@ -1,25 +0,0 @@
---
import PostCard from "@components/PostCard.astro";
import type { BlogPost } from "../types/BlogPost.ts";
interface Props {
posts: BlogPost[];
}
const { posts } = Astro.props;
---
<div class="post-cards">
{posts.map((post) => <PostCard post={post} />)}
</div>
<style>
.post-cards {
display: flex;
flex-direction: column;
gap: 1rem;
margin: 1rem 0rem;
align-items: center;
justify-content: center;
}
</style>

118
src/layouts/BaseLayout.astro
View file

@ -1,8 +1,8 @@
--- ---
import Hamburger from "@components/Hamburger.astro";
import Navigation from "@components/Navigation.astro";
import type { ImageMetadata } from "astro"; import type { ImageMetadata } from "astro";
import { getImage } from "astro:assets"; import { getImage, Image } from "astro:assets";
import profileImage from "@assets/profile.jpeg";
import { Icon } from "astro-icon/components";
import "@styles/global.scss"; import "@styles/global.scss";
@ -13,10 +13,9 @@ interface Props {
const { title, backgroundImage } = Astro.props; const { title, backgroundImage } = Astro.props;
// Optimize for common screen width const optimizedBgImage = await getImage({ src: backgroundImage });
const optimizedImage = await getImage({ src: backgroundImage });
const backgroundImageUrl = `url('${optimizedImage.src}')`; const backgroundImageUrl = `url('${optimizedBgImage.src}')`;
--- ---
<html lang="en"> <html lang="en">
@ -30,19 +29,46 @@ const backgroundImageUrl = `url('${optimizedImage.src}')`;
<body> <body>
<div class="wrapper"> <div class="wrapper">
<header> <header>
<Hamburger /> <div class="profile">
<Navigation /> <a href="/">
<div class="profile-image-wrapper">
<Image
src={profileImage}
alt="profile image"
class="profile-image"
/>
</div>
</a>
<div>
<h2>Victor Martinez</h2>
<nav>
<a href="/">Home</a>
<a href="/blog">Blog</a>
</nav>
</div>
</div>
<div class="social-media">
<a href="https://github.com/JasterV">
<Icon name="mdi:github" />
</a>
<a href="https://linkedin.com/in/jaster-victor/">
<Icon name="mdi:linkedin" />
</a>
</div>
</header> </header>
<main> <main>
<slot /> <slot />
</main> </main>
<footer> <footer>
<p>Built with <a href="https://astro.build/">Astro</a> ♥</p> <p>Built with <a href="https://astro.build/">Astro</a> ♥</p>
<p> <p>
Color palette from Color palette from
<a href="https://github.com/craftzdog/solarized-osaka.nvim/"> <a href="https://github.com/craftzdog/solarized-osaka.nvim/"
Craftzdog >Craftzdog</a
</a>♥ > ♥
</p> </p>
<p>© 2024 Victor Martínez. All Rights Reserved.</p> <p>© 2024 Victor Martínez. All Rights Reserved.</p>
</footer> </footer>
@ -62,12 +88,16 @@ const backgroundImageUrl = `url('${optimizedImage.src}')`;
font-size: var(--font-size-m); font-size: var(--font-size-m);
} }
header { .wrapper {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; width: 80ch;
gap: 1rem; min-height: calc(100vh - 1rem);
margin-bottom: 1rem; border: 2px solid white;
background: rgba(29, 31, 33, 0.95);
backdrop-filter: blur(10px);
padding: 2rem 1.5rem;
margin: 0.5rem;
} }
main { main {
@ -85,26 +115,50 @@ const backgroundImageUrl = `url('${optimizedImage.src}')`;
gap: 0.5rem; gap: 0.5rem;
} }
.wrapper { header {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 80ch; gap: 1rem;
min-height: calc(100vh - 1rem); margin-bottom: 1rem;
border: 2px solid white;
background: rgba(29, 31, 33, 0.95);
backdrop-filter: blur(10px);
padding: 2rem 1.5rem;
margin: 0.5rem;
} }
.page-title { .social-media {
font-size: 3rem; display: flex;
text-align: center; flex-direction: row;
gap: 1rem;
}
nav {
padding-top: 0.3rem;
display: flex;
flex-direction: row;
gap: 1rem;
}
.profile {
display: flex;
flex-direction: row;
gap: 1.5rem;
align-items: start;
}
.profile-image-wrapper {
width: 50px;
height: 50px;
border: 2px solid white;
border-radius: 50%;
position: relative;
overflow: hidden;
}
.profile-image-wrapper:hover {
border-color: var(--violet300);
cursor: pointer;
}
.profile-image {
width: 100%;
height: auto;
margin-top: -35%;
} }
</style> </style>
<script>
document.querySelector(".hamburger")?.addEventListener("click", () => {
document.querySelector(".nav-links")?.classList.toggle("expanded");
});
</script>

2
src/layouts/PostLayout.astro
View file

@ -1,7 +1,7 @@
--- ---
import type { Frontmatter } from "../types/BlogPost.ts"; import type { Frontmatter } from "../types/BlogPost.ts";
import BaseLayout from "./BaseLayout.astro"; import BaseLayout from "./BaseLayout.astro";
import backgroundImage from "../assets/night.jpg"; import backgroundImage from "@assets/blog-bg.jpg";
interface Props { interface Props {
frontmatter: Frontmatter; frontmatter: Frontmatter;

21
src/pages/blog.astro
View file

@ -1,14 +1,27 @@
--- ---
import type { BlogPost } from "../types/BlogPost.ts"; import type { BlogPost } from "../types/BlogPost.ts";
import PostCards from "@components/PostCards.astro"; import PostCard from "@components/PostCard.astro";
import Layout from "@layouts/BaseLayout.astro"; import Layout from "@layouts/BaseLayout.astro";
import backgroundImage from "../assets/night.jpg"; import backgroundImage from "@assets/blog-bg.jpg";
const allPosts = Object.values( const posts = Object.values(
import.meta.glob<BlogPost>("../pages/posts/*.md", { eager: true }), import.meta.glob<BlogPost>("../pages/posts/*.md", { eager: true }),
); );
--- ---
<Layout title="Blog" , backgroundImage={backgroundImage}> <Layout title="Blog" , backgroundImage={backgroundImage}>
<PostCards posts={allPosts} /> <div class="post-cards">
{posts.map((post) => <PostCard post={post} />)}
</div>
</Layout> </Layout>
<style>
.post-cards {
display: flex;
flex-direction: column;
gap: 1rem;
margin: 1rem 0rem;
align-items: center;
justify-content: center;
}
</style>

21
src/pages/index.astro
View file

@ -1,6 +1,6 @@
--- ---
import Layout from "@layouts/BaseLayout.astro"; import Layout from "@layouts/BaseLayout.astro";
import backgroundImage from "../assets/background-mario.jpg"; import backgroundImage from "@assets/home-bg.jpg";
--- ---
<Layout title="Home" backgroundImage={backgroundImage}> <Layout title="Home" backgroundImage={backgroundImage}>
@ -26,23 +26,4 @@ import backgroundImage from "../assets/background-mario.jpg";
public because I hope that whatever I write might be useful to someone else public because I hope that whatever I write might be useful to someone else
:) :)
</p> </p>
<br />
<p>Find me:</p>
<ul>
<li>
<a href="https://github.com/JasterV">Github</a>
</li>
<li><a href="https://linkedin.com/in/jaster-victor/">Linkedin</a></li>
</ul>
<br />
</Layout> </Layout>
<style>
h2 {
margin-bottom: 1rem;
}
</style>

44
src/styles/global.scss
View file

@ -157,56 +157,14 @@ ol {
} }
a { a {
text-decoration: none;
color: var(--violet100); color: var(--violet100);
font-weight: bold;
} }
a:hover { a:hover {
color: var(--violet300); color: var(--violet300);
} }
/* nav */
.hamburger {
cursor: pointer;
display: flex;
flex-direction: column;
margin: 0 auto 0 0;
gap: 10px;
}
.hamburger .line {
display: block;
width: 40px;
height: 5px;
background-color: var(--text-color);
}
.nav-links {
display: none;
flex-direction: column;
}
.expanded {
display: flex;
flex-direction: row;
justify-content: center;
}
@media screen and (min-width: 636px) {
.hamburger {
display: none;
}
.nav-links {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
gap: 1rem;
}
}
/* Posts */ /* Posts */
.post-content { .post-content {

3
tsconfig.json
View file

@ -12,7 +12,8 @@
"paths": { "paths": {
"@components/*": ["src/components/*"], "@components/*": ["src/components/*"],
"@layouts/*": ["src/layouts/*"], "@layouts/*": ["src/layouts/*"],
"@styles/*": ["src/styles/*"] "@styles/*": ["src/styles/*"],
"@assets/*": ["src/assets/*"]
}, },
"verbatimModuleSyntax": true, "verbatimModuleSyntax": true,
"plugins": [ "plugins": [