mirror of
https://codeberg.org/JasterV/jaster.xyz.git
synced 2026-04-26 18:10:01 +00:00
production ready
This commit is contained in:
Victor Martinez
parent
a7c9b59273
commit
72f5b2ea93
32 changed files with 554 additions and 315 deletions
4
.vscode/extensions.json
vendored
4
.vscode/extensions.json
vendored
|
|
@ -1,4 +0,0 @@
|
|||
{
|
||||
"recommendations": ["astro-build.astro-vscode"],
|
||||
"unwantedRecommendations": []
|
||||
}
|
||||
11
.vscode/launch.json
vendored
11
.vscode/launch.json
vendored
|
|
@ -1,11 +0,0 @@
|
|||
{
|
||||
"version": "0.2.0",
|
||||
"configurations": [
|
||||
{
|
||||
"command": "./node_modules/.bin/astro dev",
|
||||
"name": "Development server",
|
||||
"request": "launch",
|
||||
"type": "node-terminal"
|
||||
}
|
||||
]
|
||||
}
|
||||
55
README.md
55
README.md
|
|
@ -1,54 +1,3 @@
|
|||
# Astro Starter Kit: Basics
|
||||
# My Website
|
||||
|
||||
```sh
|
||||
npm create astro@latest -- --template basics
|
||||
```
|
||||
|
||||
[](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics)
|
||||
[](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/basics)
|
||||
[](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/basics/devcontainer.json)
|
||||
|
||||
> 🧑🚀 **Seasoned astronaut?** Delete this file. Have fun!
|
||||
|
||||
|
||||
|
||||
## 🚀 Project Structure
|
||||
|
||||
Inside of your Astro project, you'll see the following folders and files:
|
||||
|
||||
```text
|
||||
/
|
||||
├── public/
|
||||
│ └── favicon.svg
|
||||
├── src/
|
||||
│ ├── components/
|
||||
│ │ └── Card.astro
|
||||
│ ├── layouts/
|
||||
│ │ └── Layout.astro
|
||||
│ └── pages/
|
||||
│ └── index.astro
|
||||
└── package.json
|
||||
```
|
||||
|
||||
Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
|
||||
|
||||
There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
|
||||
|
||||
Any static assets, like images, can be placed in the `public/` directory.
|
||||
|
||||
## 🧞 Commands
|
||||
|
||||
All commands are run from the root of the project, from a terminal:
|
||||
|
||||
| Command | Action |
|
||||
| :------------------------ | :----------------------------------------------- |
|
||||
| `npm install` | Installs dependencies |
|
||||
| `npm run dev` | Starts local dev server at `localhost:4321` |
|
||||
| `npm run build` | Build your production site to `./dist/` |
|
||||
| `npm run preview` | Preview your build locally, before deploying |
|
||||
| `npm run astro ...` | Run CLI commands like `astro add`, `astro check` |
|
||||
| `npm run astro -- --help` | Get help using the Astro CLI |
|
||||
|
||||
## 👀 Want to learn more?
|
||||
|
||||
Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).
|
||||
My personal website & blog
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
import { defineConfig } from 'astro/config';
|
||||
import { defineConfig } from "astro/config";
|
||||
|
||||
// https://astro.build/config
|
||||
export default defineConfig({});
|
||||
export default defineConfig({
|
||||
site: "https://jaster-astro-tutorial.netlify.app/",
|
||||
});
|
||||
|
|
|
|||
BIN
bun.lockb
BIN
bun.lockb
Binary file not shown.
|
|
@ -10,10 +10,12 @@
|
|||
"astro": "astro"
|
||||
},
|
||||
"dependencies": {
|
||||
"@astrojs/rss": "^4.0.2",
|
||||
"astro": "^4.1.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"prettier": "^3.1.1",
|
||||
"prettier-plugin-astro": "^0.12.3"
|
||||
"prettier-plugin-astro": "^0.12.3",
|
||||
"sass": "^1.70.0"
|
||||
}
|
||||
}
|
||||
BIN
public/favicon.png
Normal file
BIN
public/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 462 B |
|
|
@ -1,9 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
|
||||
<path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
|
||||
<style>
|
||||
path { fill: #000; }
|
||||
@media (prefers-color-scheme: dark) {
|
||||
path { fill: #FFF; }
|
||||
}
|
||||
</style>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 749 B |
BIN
public/fonts/BillyBold.woff2
Normal file
BIN
public/fonts/BillyBold.woff2
Normal file
Binary file not shown.
BIN
public/fonts/BillyRegular.woff2
Normal file
BIN
public/fonts/BillyRegular.woff2
Normal file
Binary file not shown.
BIN
public/fonts/IBMPlexMono-Regular.woff2
Normal file
BIN
public/fonts/IBMPlexMono-Regular.woff2
Normal file
Binary file not shown.
BIN
public/images/me.png
Normal file
BIN
public/images/me.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
BIN
public/images/pokewallpaper.png
Normal file
BIN
public/images/pokewallpaper.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 202 KiB |
|
|
@ -1,61 +0,0 @@
|
|||
---
|
||||
interface Props {
|
||||
title: string;
|
||||
body: string;
|
||||
href: string;
|
||||
}
|
||||
|
||||
const { href, title, body } = Astro.props;
|
||||
---
|
||||
|
||||
<li class="link-card">
|
||||
<a href={href}>
|
||||
<h2>
|
||||
{title}
|
||||
<span>→</span>
|
||||
</h2>
|
||||
<p>
|
||||
{body}
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<style>
|
||||
.link-card {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
padding: 1px;
|
||||
background-color: #23262d;
|
||||
background-image: none;
|
||||
background-size: 400%;
|
||||
border-radius: 7px;
|
||||
background-position: 100%;
|
||||
transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
.link-card > a {
|
||||
width: 100%;
|
||||
text-decoration: none;
|
||||
line-height: 1.4;
|
||||
padding: calc(1.5rem - 1px);
|
||||
border-radius: 8px;
|
||||
color: white;
|
||||
background-color: #23262d;
|
||||
opacity: 0.8;
|
||||
}
|
||||
h2 {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
p {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.link-card:is(:hover, :focus-within) {
|
||||
background-position: 0;
|
||||
background-image: var(--accent-gradient);
|
||||
}
|
||||
.link-card:is(:hover, :focus-within) h2 {
|
||||
color: rgb(var(--accent-light));
|
||||
}
|
||||
</style>
|
||||
5
src/components/Hamburger.astro
Normal file
5
src/components/Hamburger.astro
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<div class="hamburger">
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
</div>
|
||||
23
src/components/LinkButton.astro
Normal file
23
src/components/LinkButton.astro
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
---
|
||||
const { href, text } = Astro.props;
|
||||
---
|
||||
|
||||
<a class="link-button" href={href}>{text}</a>
|
||||
|
||||
<style>
|
||||
.link-button {
|
||||
text-decoration: none;
|
||||
margin: 0.25em;
|
||||
padding: 0.5em 1em;
|
||||
border: 1px solid var(--text-color);
|
||||
position: relative;
|
||||
background: transparent;
|
||||
font-size: 1.4rem;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.link-button:hover {
|
||||
top: 2px;
|
||||
font-weight: normal;
|
||||
}
|
||||
</style>
|
||||
9
src/components/Navigation.astro
Normal file
9
src/components/Navigation.astro
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
import LinkButton from "./LinkButton.astro";
|
||||
---
|
||||
|
||||
<nav class="nav-links">
|
||||
<LinkButton href="/" text="Home" />
|
||||
<LinkButton href="/blog" text="Blog" />
|
||||
<LinkButton href="/tags" text="Tags" />
|
||||
</nav>
|
||||
26
src/components/PostCard.astro
Normal file
26
src/components/PostCard.astro
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
---
|
||||
const { post } = Astro.props;
|
||||
---
|
||||
|
||||
<article class="post-card">
|
||||
<h2>
|
||||
<a href={post.url} rel="bookmark">
|
||||
{post.frontmatter.title}
|
||||
</a>
|
||||
</h2>
|
||||
<p>{post.frontmatter.description}</p>
|
||||
<time datetime={post.frontmatter.pubDate}>
|
||||
{post.frontmatter.pubDate.slice(0, 10)}
|
||||
</time>
|
||||
</article>
|
||||
|
||||
<style>
|
||||
.post-card {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
border: 1px solid var(--text-color);
|
||||
padding: 1rem;
|
||||
}
|
||||
</style>
|
||||
20
src/components/PostCards.astro
Normal file
20
src/components/PostCards.astro
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
---
|
||||
import PostCard from "../components/PostCard.astro";
|
||||
|
||||
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>
|
||||
16
src/components/Tags.astro
Normal file
16
src/components/Tags.astro
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
---
|
||||
import LinkButton from "./LinkButton.astro";
|
||||
|
||||
const { tags } = Astro.props;
|
||||
---
|
||||
|
||||
<div class="tags">
|
||||
{tags.map((tag) => <LinkButton href={`/tags/${tag}`} text={tag} />)}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
</style>
|
||||
2
src/env.d.ts
vendored
2
src/env.d.ts
vendored
|
|
@ -1 +1 @@
|
|||
/// <reference types="astro/client" />
|
||||
/// <reference types="astro/client" />
|
||||
99
src/layouts/BaseLayout.astro
Normal file
99
src/layouts/BaseLayout.astro
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
---
|
||||
import Hamburger from "../components/Hamburger.astro";
|
||||
import Navigation from "../components/Navigation.astro";
|
||||
|
||||
import "../styles/global.scss";
|
||||
|
||||
const { title } = Astro.props;
|
||||
---
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" type="image/png" href="/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<title>{title}</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<header>
|
||||
<Hamburger />
|
||||
<Navigation />
|
||||
</header>
|
||||
<h1 class="page-title">{title}</h1>
|
||||
<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>♥
|
||||
</p>
|
||||
<p>© 2024 Victor Martínez. All Rights Reserved.</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<style>
|
||||
body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
color: var(--text-color);
|
||||
background: url("/images/pokewallpaper.png") no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-attachment: fixed;
|
||||
font-size: var(--font-size-m);
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 1.5rem 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 1rem;
|
||||
color: var(--text-color-light);
|
||||
font-size: 1rem;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
border: 2px solid var(--text-color);
|
||||
background: rgba(0, 20, 26, 0.7);
|
||||
backdrop-filter: blur(10px);
|
||||
max-width: 70ch;
|
||||
padding: 2rem 1.5rem;
|
||||
margin: 1rem 0.5rem;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 3rem;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
document.querySelector(".hamburger").addEventListener("click", () => {
|
||||
document.querySelector(".nav-links").classList.toggle("expanded");
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1,51 +0,0 @@
|
|||
---
|
||||
interface Props {
|
||||
title: string;
|
||||
}
|
||||
|
||||
const { title } = Astro.props;
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="description" content="Astro description" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<title>{title}</title>
|
||||
</head>
|
||||
<body>
|
||||
<slot />
|
||||
</body>
|
||||
</html>
|
||||
<style is:global>
|
||||
:root {
|
||||
--accent: 136, 58, 234;
|
||||
--accent-light: 224, 204, 250;
|
||||
--accent-dark: 49, 10, 101;
|
||||
--accent-gradient: linear-gradient(
|
||||
45deg,
|
||||
rgb(var(--accent)),
|
||||
rgb(var(--accent-light)) 30%,
|
||||
white 60%
|
||||
);
|
||||
}
|
||||
html {
|
||||
font-family: system-ui, sans-serif;
|
||||
background: #13151a;
|
||||
background-size: 224px;
|
||||
}
|
||||
code {
|
||||
font-family:
|
||||
Menlo,
|
||||
Monaco,
|
||||
Lucida Console,
|
||||
Liberation Mono,
|
||||
DejaVu Sans Mono,
|
||||
Bitstream Vera Sans Mono,
|
||||
Courier New,
|
||||
monospace;
|
||||
}
|
||||
</style>
|
||||
47
src/layouts/PostLayout.astro
Normal file
47
src/layouts/PostLayout.astro
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
---
|
||||
import BaseLayout from "./BaseLayout.astro";
|
||||
import Tags from "../components/Tags.astro";
|
||||
|
||||
const { frontmatter } = Astro.props;
|
||||
---
|
||||
|
||||
<BaseLayout title={frontmatter.title}>
|
||||
<article>
|
||||
<header>
|
||||
<time datetime={frontmatter.pubDate}
|
||||
>{frontmatter.pubDate.slice(0, 10)}</time
|
||||
>
|
||||
<p class="description">{frontmatter.description}</p>
|
||||
</header>
|
||||
<img src={frontmatter.image.url} width="200" alt={frontmatter.image.alt} />
|
||||
<main class="post-content">
|
||||
<slot />
|
||||
</main>
|
||||
<footer>
|
||||
<h2>Tags</h2>
|
||||
<Tags tags={frontmatter.tags} />
|
||||
</footer>
|
||||
</article>
|
||||
</BaseLayout>
|
||||
|
||||
<style>
|
||||
header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
font-style: italic;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
time {
|
||||
color: var(--text-color-light);
|
||||
}
|
||||
|
||||
footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 2rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
</style>
|
||||
13
src/pages/blog.astro
Normal file
13
src/pages/blog.astro
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
---
|
||||
import PostCards from "../components/PostCards.astro";
|
||||
import Layout from "../layouts/BaseLayout.astro";
|
||||
|
||||
const allPosts = await Astro.glob("../pages/posts/*.md");
|
||||
|
||||
const pageTitle = "My Blog";
|
||||
---
|
||||
|
||||
<Layout title={pageTitle}>
|
||||
<p>Here you can check my articles, enjoy!</p>
|
||||
<PostCards posts={allPosts} />
|
||||
</Layout>
|
||||
|
|
@ -1,127 +1,66 @@
|
|||
---
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
import Card from "../components/Card.astro";
|
||||
import Layout from "../layouts/BaseLayout.astro";
|
||||
|
||||
// Page variables
|
||||
const pageTitle = "Hello there!";
|
||||
---
|
||||
|
||||
<Layout title="Welcome to Astro.">
|
||||
<main>
|
||||
<svg
|
||||
class="astro-a"
|
||||
width="495"
|
||||
height="623"
|
||||
viewBox="0 0 495 623"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M167.19 364.254C83.4786 364.254 0 404.819 0 404.819C0 404.819 141.781 19.4876 142.087 18.7291C146.434 7.33701 153.027 0 162.289 0H332.441C341.703 0 348.574 7.33701 352.643 18.7291C352.92 19.5022 494.716 404.819 494.716 404.819C494.716 404.819 426.67 364.254 327.525 364.254L264.41 169.408C262.047 159.985 255.147 153.581 247.358 153.581C239.569 153.581 232.669 159.985 230.306 169.408L167.19 364.254ZM160.869 530.172C160.877 530.18 160.885 530.187 160.894 530.195L160.867 530.181C160.868 530.178 160.868 530.175 160.869 530.172ZM136.218 411.348C124.476 450.467 132.698 504.458 160.869 530.172C160.997 529.696 161.125 529.242 161.248 528.804C161.502 527.907 161.737 527.073 161.917 526.233C165.446 509.895 178.754 499.52 195.577 500.01C211.969 500.487 220.67 508.765 223.202 527.254C224.141 534.12 224.23 541.131 224.319 548.105C224.328 548.834 224.337 549.563 224.347 550.291C224.563 566.098 228.657 580.707 237.264 593.914C245.413 606.426 256.108 615.943 270.749 622.478C270.593 621.952 270.463 621.508 270.35 621.126C270.045 620.086 269.872 619.499 269.685 618.911C258.909 585.935 266.668 563.266 295.344 543.933C298.254 541.971 301.187 540.041 304.12 538.112C310.591 533.854 317.059 529.599 323.279 525.007C345.88 508.329 360.09 486.327 363.431 457.844C364.805 446.148 363.781 434.657 359.848 423.275C358.176 424.287 356.587 425.295 355.042 426.275C351.744 428.366 348.647 430.33 345.382 431.934C303.466 452.507 259.152 455.053 214.03 448.245C184.802 443.834 156.584 436.019 136.218 411.348Z"
|
||||
fill="url(#paint0_linear_1805_24383)"></path>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="paint0_linear_1805_24383"
|
||||
x1="247.358"
|
||||
y1="0"
|
||||
x2="247.358"
|
||||
y2="622.479"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-opacity="0.9"></stop>
|
||||
<stop offset="1" stop-opacity="0.2"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
<h1>Welcome to <span class="text-gradient">My site!</span></h1>
|
||||
<p class="instructions">
|
||||
To get started, open the directory <code>src/pages</code> in your project.<br
|
||||
/>
|
||||
<strong>Code Challenge:</strong> Tweak the "Welcome to Astro" message above.
|
||||
</p>
|
||||
<ul role="list" class="link-card-grid">
|
||||
<Card
|
||||
href="https://docs.astro.build/"
|
||||
title="Documentation"
|
||||
body="Learn how Astro works and explore the official API docs."
|
||||
/>
|
||||
<Card
|
||||
href="https://astro.build/integrations/"
|
||||
title="Integrations"
|
||||
body="Supercharge your project with new frameworks and libraries."
|
||||
/>
|
||||
<Card
|
||||
href="https://astro.build/themes/"
|
||||
title="Themes"
|
||||
body="Explore a galaxy of community-built starter themes."
|
||||
/>
|
||||
<Card
|
||||
href="https://astro.build/chat/"
|
||||
title="Community"
|
||||
body="Come say hi to our amazing Discord community. ❤️"
|
||||
/>
|
||||
</ul>
|
||||
</main>
|
||||
<Layout title={pageTitle}>
|
||||
<p>
|
||||
I'm Victor Martinez, a Software Developer based in Germany with a passion
|
||||
for computers and solving problems with code. And this is my website!
|
||||
</p>
|
||||
|
||||
<br />
|
||||
|
||||
<p>
|
||||
I am going to be posting content about my learnings on software design,
|
||||
programming principles, linux, new tools... I don't really know for sure
|
||||
yet, let's see where this goes!
|
||||
</p>
|
||||
|
||||
<br />
|
||||
|
||||
<h2>Interests</h2>
|
||||
|
||||
<ul>
|
||||
<li>Music (Especially Jazz, Hip Hop, Funk, Rock and metal)</li>
|
||||
<li>Pixel Art</li>
|
||||
<li>
|
||||
Playing bass guitar (I love to go and play in Jam sessions, I'd say is one
|
||||
of my favourite things to do)
|
||||
</li>
|
||||
<li>
|
||||
Messing up with my linux machine and configure my programming environment
|
||||
(I use Nvim btw)
|
||||
</li>
|
||||
<li>Programming in Rust and static-typed languages in general</li>
|
||||
</ul>
|
||||
|
||||
<br />
|
||||
|
||||
<h2>Follow me!</h2>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://github.com/JasterV">Github</a> (Check out my projects in here)
|
||||
</li>
|
||||
<li><a href="https://linkedin.com/in/jaster-victor/">Linkedin</a></li>
|
||||
</ul>
|
||||
|
||||
<br />
|
||||
|
||||
<h2>RSS Feed</h2>
|
||||
|
||||
<p>
|
||||
Don't miss any updates from my <a href="/blog">Blog</a>. Check out my RSS
|
||||
Feed
|
||||
<a href="/rss.xml">here</a>.
|
||||
</p>
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
main {
|
||||
margin: auto;
|
||||
padding: 1rem;
|
||||
width: 800px;
|
||||
max-width: calc(100% - 2rem);
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.astro-a {
|
||||
position: absolute;
|
||||
top: -32px;
|
||||
left: 50%;
|
||||
transform: translatex(-50%);
|
||||
width: 220px;
|
||||
height: auto;
|
||||
z-index: -1;
|
||||
}
|
||||
h1 {
|
||||
font-size: 4rem;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.text-gradient {
|
||||
background-image: var(--accent-gradient);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-size: 400%;
|
||||
background-position: 0%;
|
||||
}
|
||||
.instructions {
|
||||
margin-bottom: 2rem;
|
||||
border: 1px solid rgba(var(--accent-light), 25%);
|
||||
background: linear-gradient(
|
||||
rgba(var(--accent-dark), 66%),
|
||||
rgba(var(--accent-dark), 33%)
|
||||
);
|
||||
padding: 1.5rem;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.instructions code {
|
||||
font-size: 0.8em;
|
||||
font-weight: bold;
|
||||
background: rgba(var(--accent-light), 12%);
|
||||
color: rgb(var(--accent-light));
|
||||
border-radius: 4px;
|
||||
padding: 0.3em 0.4em;
|
||||
}
|
||||
.instructions strong {
|
||||
color: rgb(var(--accent-light));
|
||||
}
|
||||
.link-card-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
|
||||
gap: 2rem;
|
||||
padding: 0;
|
||||
h2 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
51
src/pages/posts/HelloWorld.md
Normal file
51
src/pages/posts/HelloWorld.md
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
---
|
||||
layout: ../../layouts/PostLayout.astro
|
||||
title: "Hello World"
|
||||
pubDate: 2024-01-20
|
||||
description: "Welcome to my new blog!"
|
||||
image:
|
||||
url: "/images/me.png"
|
||||
alt: "Just me hanging out"
|
||||
tags: ["blogging", "HelloWorld"]
|
||||
---
|
||||
|
||||
So this is my first post in here, I'm quite excited :D
|
||||
|
||||
This is just an introductory post where I will explain a little bit more
|
||||
what is this and the purpose of it.
|
||||
|
||||
## What is this about?
|
||||
|
||||
The goal of this blog is to have my own space where I can write about anything
|
||||
I'd like to share in the moment that could be useful for
|
||||
someone else (And for my future self!).
|
||||
|
||||
It will be mainly focused in programming and software development,
|
||||
but I don't want to constrain myself to just that
|
||||
so let's see where all of this goes.
|
||||
|
||||
Also you can notice how my goal is not to make this a space to sell myself as a developer.
|
||||
|
||||
My main purpose is to enjoy the process, to have fun while
|
||||
building this website and writing posts and most important to feel
|
||||
comfortable and represented by what I build.
|
||||
|
||||
## A few more notes
|
||||
|
||||
The fact that the website is pixel art themed and contains purple-ish colors
|
||||
is merely because I love pixel art and because that's my favourite color :)
|
||||
|
||||
The color palette comes from the same theme I use in my Neovim setup.
|
||||
It was developed by [craftzdog](https://www.craftz.dog/),
|
||||
I am a big fan of his work. Go check out his [Youtube channel](https://www.youtube.com/devaslife)!
|
||||
|
||||
The whole website was built using [Astro](https://astro.build/).
|
||||
I've had a blast of a time with this framework,
|
||||
it is definitely the right tool if you are looking to build a blog!
|
||||
|
||||
And that's it for today folks, I hope to be here soon with new content!
|
||||
|
||||
One thing I can already tell is that there will
|
||||
be a lot of content related to Rust programming 🦀.
|
||||
|
||||
**Stay tuned!**
|
||||
11
src/pages/rss.xml.js
Normal file
11
src/pages/rss.xml.js
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
import rss, { pagesGlobToRssItems } from "@astrojs/rss";
|
||||
|
||||
export async function GET(context) {
|
||||
return rss({
|
||||
title: "Astro Learner | Blog",
|
||||
description: "My journey learning Astro",
|
||||
site: context.site,
|
||||
items: await pagesGlobToRssItems(import.meta.glob("./**/*.md")),
|
||||
customData: `<language>en-us</language>`,
|
||||
});
|
||||
}
|
||||
30
src/pages/tags/[tag].astro
Normal file
30
src/pages/tags/[tag].astro
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
---
|
||||
import PostCards from "../../components/PostCards.astro";
|
||||
import BaseLayout from "../../layouts/BaseLayout.astro";
|
||||
|
||||
export async function getStaticPaths() {
|
||||
const allPosts = await Astro.glob("../posts/*.md");
|
||||
|
||||
const uniqueTags = [
|
||||
...new Set(allPosts.map((post) => post.frontmatter.tags).flat()),
|
||||
];
|
||||
|
||||
return uniqueTags.map((tag) => {
|
||||
const filteredPosts = allPosts.filter((post) =>
|
||||
post.frontmatter.tags.includes(tag),
|
||||
);
|
||||
return {
|
||||
params: { tag },
|
||||
props: { posts: filteredPosts },
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
const { tag } = Astro.params;
|
||||
const { posts } = Astro.props;
|
||||
---
|
||||
|
||||
<BaseLayout title={tag}>
|
||||
<p>Posts tagged with <strong>{tag}</strong></p>
|
||||
<PostCards posts={posts} />
|
||||
</BaseLayout>
|
||||
14
src/pages/tags/index.astro
Normal file
14
src/pages/tags/index.astro
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
---
|
||||
import BaseLayout from "../../layouts/BaseLayout.astro";
|
||||
import Tags from "../../components/Tags.astro";
|
||||
|
||||
const allPosts = await Astro.glob("../posts/*.md");
|
||||
|
||||
const tags = [...new Set(allPosts.map((post) => post.frontmatter.tags).flat())];
|
||||
|
||||
const pageTitle = "Tags";
|
||||
---
|
||||
|
||||
<BaseLayout title={pageTitle}>
|
||||
<Tags tags={tags} />
|
||||
</BaseLayout>
|
||||
122
src/styles/global.scss
Normal file
122
src/styles/global.scss
Normal file
|
|
@ -0,0 +1,122 @@
|
|||
@font-face {
|
||||
font-family: "BillyRegular";
|
||||
src: url("/fonts/BillyRegular.woff2") format("woff2");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "IBMPlexMono-Regular.woff2";
|
||||
src: url("/fonts/IBMPlexMono-Regular.woff2") format("woff2");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
:root {
|
||||
--base-color: #00141a;
|
||||
--text-color: #fdf6e3;
|
||||
--text-color-light: #657b83;
|
||||
--yellow100: #ffe999;
|
||||
--violet300: #9ca0ed;
|
||||
--violet100: #cccfff;
|
||||
--font-size-m: 20px;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: "IBMPlexMono-Regular", sans-serif;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
a {
|
||||
font-family: "BillyRegular", "IBMPlexMono-Regular", sans-serif;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: square inside none;
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--violet100);
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 636px) {
|
||||
.hamburger {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
gap: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Posts */
|
||||
|
||||
.post-content {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
li > p {
|
||||
display: contents;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
{
|
||||
"extends": "astro/tsconfigs/base"
|
||||
}
|
||||
Loading…
Reference in a new issue