fernando/araozu.dev
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: fernando:18c420b90b1674097f1c2093ca22ae6bb0a1fa24
Branches Tags
fernando:main
...
compare: fernando:0bc0ef3ba86325da93428667c0c9af8c84cbd187
Branches Tags
fernando:main

2 Commits
18c420b90b ... 0bc0ef3ba8

Author SHA1 Message Date
Araozu
0bc0ef3ba8 Change landing page 2024-10-06 17:31:31 -05:00
Araozu
d8ab18d285 Adjust fonts 2024-10-05 21:06:04 -05:00
14 changed files with 963 additions and 762 deletions
Show Stats Expand all files Collapse all files

22
Jenkinsfile vendored
View File

@ -1,25 +1,29 @@
pipeline {
agent any
environment {
PATH = "/var/lib/jenkins/.nvm/versions/node/v20.9.0/bin:/var/lib/jenkins/bin:${env.PATH}"
agent {
docker {
image 'node:22'
}
}
stages {
stage('Install deps') {
stage('Install pnpm') {
steps {
sh 'npm i -g pnpm'
}
}
stage('Install dependencies') {
steps {
sh 'pnpm i'
}
}
stage('Build') {
environment {
PATH = "${env.WORKSPACE}/node_modules/.bin:${env.PATH}"
}
stage('Buid') {
steps {
sh 'pnpm build'
}
}
stage('Deploy') {
steps {
sh 'cp -r ./dist/* /var/www/araozu.dev/'
sh 'rm -rf /var/www/dev.araozu/*'
sh 'mv -f dist/* /var/www/dev.araozu/'
}
}
}

8
package.json
View File

@ -10,11 +10,11 @@
"astro": "astro"
},
"dependencies": {
"@astrojs/check": "^0.5.10",
"@astrojs/mdx": "^3.1.2",
"@astrojs/tailwind": "^5.1.0",
"@astrojs/check": "^0.9.4",
"@astrojs/mdx": "^3.1.7",
"@astrojs/tailwind": "^5.1.1",
"@types/node": "^22.3.0",
"astro": "^4.11.5",
"astro": "^4.15.11",
"tailwindcss": "^3.4.5",
"typescript": "^5.5.3"
},

1481
pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff

6
public/blog.css
View File

@ -1,5 +1,5 @@
:not(pre)>code {
font-family: "Iosevka Fixed Web", Iosevka, monospace;
font-family: var(--font-mono);
border: solid 1px var(--c-border-2);
padding: 0 0.25rem;
border-radius: 0.25rem;
@ -33,7 +33,7 @@ pre.astro-code>code .line::before {
#blog h2 {
font-size: 1.5rem;
font-family: "Iosevka Etoile Web", serif;
font-family: var(--font-display);
font-weight: 900;
margin-top: 3rem;
margin-bottom: 1.5rem;
@ -41,7 +41,7 @@ pre.astro-code>code .line::before {
#blog h3 {
font-size: 1.25rem;
font-family: "Iosevka Etoile Web", serif;
font-family: var(--font-display);
font-weight: 900;
margin-top: 2.25rem;
margin-bottom: 1.5rem;

24
public/global.css
View File

@ -8,24 +8,6 @@
src: url("/Iosevka/Regular.woff2") format("woff2");
}
@font-face {
font-family: 'Iosevka Fixed Web';
font-display: swap;
font-weight: 700;
font-stretch: normal;
font-style: normal;
src: url('/Iosevka/Bold.woff2') format('woff2');
}
@font-face {
font-family: 'Iosevka Etoile Web';
font-display: swap;
font-weight: 900;
font-stretch: normal;
font-style: normal;
src: url('/IosevkaEtoile/Heavy.woff2') format('woff2');
}
/* Iosevka from Xe Iaso: https://xeiaso.net/ https://github.com/Xe/iosevka */
@font-face {
font-family: "Iosevka Iaso";
@ -43,6 +25,10 @@
--c-bg-2: #18181b;
--c-border-1: transparent;
--c-border-2: #606060;
--font-display: "Atkinson Hyperlegible", sans-serif;
--font-body: "Iosevka Iaso", "Iosevka Fixed Web", sans-serif;
--font-mono: "Iosevka Fixed Web", Iosevka, sans-serif;
}
@media (prefers-color-scheme: light) {
@ -62,6 +48,6 @@ html {
}
body {
font-family: "Iosevka Iaso", "Iosevka Fixed Web", sans-serif;
font-family: var(--font-body);
font-optical-sizing: auto;
}

2
src/components/Card.astro
View File

@ -4,7 +4,7 @@ const { title } = Astro.props;
<div
x-data="{open: true}"
class="shadow-lg p-2 bg-c-bg-2 rounded-md max-w-[50rem] border border-slate-600 dark:border-transparent mb-2"
class="shadow-lg p-2 bg-c-bg-2 rounded-md max-w-[50rem] border border-zinc-600 dark:border-zinc-900 mb-2"
>
<h2
class="text-2xl font-bold bg-c-bg-2 py-2 pl-2 cursor-pointer hover:underline sticky top-0 font-etoile"

23
src/components/Navigation.astro
View File

@ -1,9 +1,10 @@
<div class="h-screen">
<nav
class="fixed top-0 left-0 bg-white text-black rotate-[-90deg] font-display
w-[100vh] translate-y-[100vh] px-8 py-2 shadow shadow-zinc-500"
class="fixed top-0 left-0 rotate-[-90deg] font-display w-[100vh] translate-y-[100vh] p-2"
style="transform-origin: 0% 0%;"
>
<div class="shadow hover:shadow-md transition-shadow bg-c-bg-2 py-2 px-4 border border-zinc-600 dark:border-zinc-900 rounded-md">
<a class="font-semibold inline-block text-2xl hover:underline" href="/">
Fernando Araoz
</a>
@ -14,22 +15,6 @@
>
<a class="ml-6 inline-block hover:underline" href="/blog/es">Es Blog</a>
<svg width="1.5rem" height="1.5rem" class="absolute -bottom-6 right-0">
<filter id='shadow' color-interpolation-filters="sRGB">
<feDropShadow dx="1" dy="1" stdDeviation="2"
flood-opacity="1"
flood-color="#71717a"
/>
</filter>
<g filter="url(#shadow)">
<path d="m 0 0 h 24 v 24 c 0 -12, -12 -24, -24 -24" fill="white" />
</g>
</svg>
<svg width="1.5rem" height="1.5rem" class="absolute -bottom-6 left-0">
<g filter="url(#shadow)">
<path d="m 24 0 h -24 v 24 c 0 -12, 12 -24, 24 -24" fill="white" />
</g>
</svg>
</div>
</nav>
</div>

18
src/components/Sidebar.astro
View File

@ -1,18 +1,12 @@
<div class="lg:px-1">
<h1 class="text-xl font-light py-4">
Hi 👋! I'm
<br />
<span class="font-bold text-3xl">Fernando Araoz</span>
</h1>
<div class="text-center">
<div class="inline-block w-28 h-28 lg:w-40 lg:h-40 rounded-full bg-slate-500"></div>
</div>
<p class="text-center">
I'm a (human) software engineer passionate about web technologies. I
love building things and learning new stuff.
<h1 class="text-xl font-light py-4">
<span class="font-display font-bold text-3xl">Fernando Araoz</span>
</h1>
<p class="font-display">
Human software engineer based in Peru
</p>
<div class="text-center py-4">
<a class="inline-block py-2 px-4 rounded bg-blue-600 text-white" href="/blog/en/">Blog (en)</a>
<a class="inline-block py-2 px-4 rounded bg-indigo-600 text-white" href="/blog/es/">Blog (es)</a>
</div>
</div>

32
src/components/index/EsBlogIndex.astro Normal file
View File

@ -0,0 +1,32 @@
---
import Card from "../Card.astro"
const allPosts = await Astro.glob("../../pages/blog/en/*.md");
---
<Card title="en blog">
<div class="font-display">
<p>
Things I've thought about, about programming.
</p>
<ul class="py-4">
{
allPosts
.toSorted((x, y) =>
x.frontmatter.pubDate > y.frontmatter.pubDate ? -1 : 1,
)
.map((post) => {
return (
<li class="py-1">
{post.frontmatter.pubDate} -
<a class="underline text-lg" href={post.url}>
{post.frontmatter.title}
</a>
</li>
);
})
}
</ul>
</div>
</Card>

1
src/env.d.ts vendored
View File

@ -1 +1,2 @@
/// <reference path="../.astro/types.d.ts" />
/// <reference types="astro/client" />

29
src/layouts/BlogLayout.astro
View File

@ -15,12 +15,10 @@ lang = lang ?? "en";
<link rel="stylesheet" href="/global.css" />
<link rel="stylesheet" href="/blog.css" />
<title>Blog - Fernando Araoz</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap"
rel="stylesheet"
/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link
rel="stylesheet"
type="text/css"
@ -34,7 +32,7 @@ lang = lang ?? "en";
<div class="py-6">
{
frontmatter?.title && (
<h1 class="font-etoile text-center text-4xl py-2">
<h1 class="font-display font-bold text-center text-4xl py-2">
{frontmatter.title}
</h1>
)
@ -64,26 +62,15 @@ lang = lang ?? "en";
}
</div>
<div class="text-base">
<slot />
</div>
<div class="pt-4 border-t border-c-on-bg">
<h3>Comments/Comentarios</h3>
<section id="isso-thread"
<div
class="text-base shadow-lg p-2 bg-c-bg-2 rounded-md border border-slate-600 dark:border-transparent mb-2"
>
<noscript>Javascript needs to be activated to view comments.</noscript>
</section>
<slot />
</div>
<div class="min-h-40"></div>
</div>
</NavigationLayout>
<script data-isso="https://comments.araozu.dev/"
data-isso-lang={lang}
src="https://comments.araozu.dev/js/embed.min.js"
></script>
</body>
</html>

9
src/layouts/SideProject.astro
View File

@ -22,12 +22,9 @@ const images_str = JSON.stringify(images);
<link rel="stylesheet" href="/global.css" />
<link rel="stylesheet" href="/blog.css" />
<title>Side projects - Fernando Araoz</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap"
rel="stylesheet"
/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link
rel="stylesheet"
type="text/css"

12
src/pages/index.astro
View File

@ -1,9 +1,7 @@
---
import Sidebar from "../components/Sidebar.astro";
import Languages from "../components/index/Languages.astro";
import Learning from "../components/index/Learning.astro";
import Tools from "../components/index/Tools.astro";
import NavigationLayout from "../layouts/NavigationLayout.astro";
import EsBlogIndex from "../components/index/EsBlogIndex.astro";
---
<!doctype html>
@ -14,6 +12,10 @@ import NavigationLayout from "../layouts/NavigationLayout.astro";
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<link rel="stylesheet" href="/global.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<title>Fernando Araoz</title>
<link
rel="stylesheet"
@ -29,9 +31,7 @@ import NavigationLayout from "../layouts/NavigationLayout.astro";
>
<Sidebar />
<div>
<Languages />
<Learning />
<Tools />
<EsBlogIndex />
</div>
</div>
</NavigationLayout>

4
tailwind.config.mjs
View File

@ -9,8 +9,8 @@ export default {
'c-bg-2': 'var(--c-bg-2)',
},
fontFamily: {
"etoile": ["'Iosevka Etoile Web'", "serif"],
"display": ["'Outfit'", "sans-serif"],
"etoile": ["var(--font-display)"],
"display": ["var(--font-display)"],
}
},
},