mirror of
https://codeberg.org/JasterV/jaster.xyz.git
synced 2026-04-26 18:10:01 +00:00
[feat] New release with simplified codebase and design
This commit is contained in:
JasterV
parent
90cb6536e3
commit
d2b2738a1d
17 changed files with 124 additions and 167 deletions
|
|
@ -1,6 +1,16 @@
|
|||
import { defineConfig } from "astro/config";
|
||||
import icon from "astro-icon";
|
||||
|
||||
// https://astro.build/config
|
||||
export default defineConfig({
|
||||
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
BIN
bun.lockb
Binary file not shown.
|
|
@ -14,9 +14,11 @@
|
|||
"dependencies": {
|
||||
"@astrojs/check": "^0.9.4",
|
||||
"astro": "^5.8.1",
|
||||
"astro-icon": "^1.1.5",
|
||||
"typescript": "^5.8.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@iconify-json/mdi": "^1.2.3",
|
||||
"prettier": "^3.1.1",
|
||||
"prettier-plugin-astro": "^0.12.3",
|
||||
"sass": "^1.70.0"
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 43 KiB After Width: | Height: | Size: 43 KiB |
|
Before Width: | Height: | Size: 170 KiB After Width: | Height: | Size: 170 KiB |
BIN
src/assets/profile.jpeg
Normal file
BIN
src/assets/profile.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 694 KiB |
|
|
@ -1,5 +0,0 @@
|
|||
<div class="hamburger">
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
</div>
|
||||
|
|
@ -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>
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
---
|
||||
import LinkButton from "./LinkButton.astro";
|
||||
---
|
||||
|
||||
<nav class="nav-links">
|
||||
<LinkButton href="/" text="Home" />
|
||||
<LinkButton href="/blog" text="Blog" />
|
||||
</nav>
|
||||
|
|
@ -37,4 +37,8 @@ const { post } = Astro.props;
|
|||
border: 1px solid var(--text-color);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
import Hamburger from "@components/Hamburger.astro";
|
||||
import Navigation from "@components/Navigation.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";
|
||||
|
||||
|
|
@ -13,10 +13,9 @@ interface Props {
|
|||
|
||||
const { title, backgroundImage } = Astro.props;
|
||||
|
||||
// Optimize for common screen width
|
||||
const optimizedImage = await getImage({ src: backgroundImage });
|
||||
const optimizedBgImage = await getImage({ src: backgroundImage });
|
||||
|
||||
const backgroundImageUrl = `url('${optimizedImage.src}')`;
|
||||
const backgroundImageUrl = `url('${optimizedBgImage.src}')`;
|
||||
---
|
||||
|
||||
<html lang="en">
|
||||
|
|
@ -30,19 +29,46 @@ const backgroundImageUrl = `url('${optimizedImage.src}')`;
|
|||
<body>
|
||||
<div class="wrapper">
|
||||
<header>
|
||||
<Hamburger />
|
||||
<Navigation />
|
||||
<div class="profile">
|
||||
<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>
|
||||
|
||||
<main>
|
||||
<slot />
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p>Built with <a href="https://astro.build/">Astro</a> ♥</p>
|
||||
<p>
|
||||
Color palette from
|
||||
<a href="https://github.com/craftzdog/solarized-osaka.nvim/">
|
||||
Craftzdog
|
||||
</a>♥
|
||||
<a href="https://github.com/craftzdog/solarized-osaka.nvim/"
|
||||
>Craftzdog</a
|
||||
> ♥
|
||||
</p>
|
||||
<p>© 2024 Victor Martínez. All Rights Reserved.</p>
|
||||
</footer>
|
||||
|
|
@ -62,12 +88,16 @@ const backgroundImageUrl = `url('${optimizedImage.src}')`;
|
|||
font-size: var(--font-size-m);
|
||||
}
|
||||
|
||||
header {
|
||||
.wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
width: 80ch;
|
||||
min-height: calc(100vh - 1rem);
|
||||
border: 2px solid white;
|
||||
background: rgba(29, 31, 33, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
padding: 2rem 1.5rem;
|
||||
margin: 0.5rem;
|
||||
}
|
||||
|
||||
main {
|
||||
|
|
@ -85,26 +115,50 @@ const backgroundImageUrl = `url('${optimizedImage.src}')`;
|
|||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 80ch;
|
||||
min-height: calc(100vh - 1rem);
|
||||
border: 2px solid white;
|
||||
background: rgba(29, 31, 33, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
padding: 2rem 1.5rem;
|
||||
margin: 0.5rem;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 3rem;
|
||||
text-align: center;
|
||||
.social-media {
|
||||
display: flex;
|
||||
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>
|
||||
|
||||
<script>
|
||||
document.querySelector(".hamburger")?.addEventListener("click", () => {
|
||||
document.querySelector(".nav-links")?.classList.toggle("expanded");
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
import type { Frontmatter } from "../types/BlogPost.ts";
|
||||
import BaseLayout from "./BaseLayout.astro";
|
||||
import backgroundImage from "../assets/night.jpg";
|
||||
import backgroundImage from "@assets/blog-bg.jpg";
|
||||
|
||||
interface Props {
|
||||
frontmatter: Frontmatter;
|
||||
|
|
|
|||
|
|
@ -1,14 +1,27 @@
|
|||
---
|
||||
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 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 }),
|
||||
);
|
||||
---
|
||||
|
||||
<Layout title="Blog" , backgroundImage={backgroundImage}>
|
||||
<PostCards posts={allPosts} />
|
||||
<div class="post-cards">
|
||||
{posts.map((post) => <PostCard post={post} />)}
|
||||
</div>
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
.post-cards {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
margin: 1rem 0rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
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}>
|
||||
|
|
@ -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
|
||||
:)
|
||||
</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>
|
||||
|
||||
<style>
|
||||
h2 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -157,56 +157,14 @@ ol {
|
|||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--violet100);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
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 */
|
||||
|
||||
.post-content {
|
||||
|
|
|
|||
|
|
@ -12,7 +12,8 @@
|
|||
"paths": {
|
||||
"@components/*": ["src/components/*"],
|
||||
"@layouts/*": ["src/layouts/*"],
|
||||
"@styles/*": ["src/styles/*"]
|
||||
"@styles/*": ["src/styles/*"],
|
||||
"@assets/*": ["src/assets/*"]
|
||||
},
|
||||
"verbatimModuleSyntax": true,
|
||||
"plugins": [
|
||||
|
|
|
|||
Loading…
Reference in a new issue