feat: dark mode toggle
This commit is contained in:
Alejandro Laguna
@@ -72,29 +72,29 @@ const experiences = [
|
||||
|
||||
<Layout>
|
||||
<section class="max-w-3xl mb-10 sm:mb-14">
|
||||
<h1 class="text-4xl sm:text-5xl font-bold mb-6 text-neutral-900">About</h1>
|
||||
<p class="text-lg text-neutral-600 leading-relaxed text-justify">
|
||||
<h1 class="text-4xl sm:text-5xl font-bold mb-6 text-neutral-900 dark:text-neutral-100">About</h1>
|
||||
<p class="text-lg text-neutral-600 dark:text-neutral-400 leading-relaxed text-justify">
|
||||
I'm a second year computer science student at the European Institute of Technology, still trying to figure out my place but enjoying the journey through systems programming, webdev and other fields. Outside of code, my favorite writer is Isaac Asimov, my favorite piece of music is Spiegel im Spiegel, and my favorite book is The Witches by Roald Dahl. My favorite star is Vega because it was once our north star and will be again in about 12,000 years - something poetic about that cycle. And that's pretty much everything you need to know about me, except maybe my tea preferences, but we'll save that for another time... </p>
|
||||
</section>
|
||||
|
||||
<section class="mb-12 bg-neutral-50 p-6 rounded-2xl border border-neutral-200">
|
||||
<h2 class="flex items-center gap-2 text-2xl font-semibold text-neutral-900 mb-4">
|
||||
<GraduationCap class="w-6 h-6 text-neutral-500" /> Education
|
||||
<section class="mb-12 bg-neutral-50 dark:bg-neutral-800 p-6 rounded-2xl border border-neutral-200 dark:border-neutral-700">
|
||||
<h2 class="flex items-center gap-2 text-2xl font-semibold text-neutral-900 dark:text-neutral-100 mb-4">
|
||||
<GraduationCap class="w-6 h-6 text-neutral-500 dark:text-neutral-400" /> Education
|
||||
</h2>
|
||||
<ul class="space-y-4">
|
||||
<li>
|
||||
<p class="text-base text-neutral-900 font-medium">Bachelor + Master’s Degree in Computer Science</p>
|
||||
<p class="text-sm text-neutral-600">European Institute of Technology, class of 2029</p>
|
||||
<p class="text-base text-neutral-900 dark:text-neutral-100 font-medium">Bachelor + Master's Degree in Computer Science</p>
|
||||
<p class="text-sm text-neutral-600 dark:text-neutral-400">European Institute of Technology, class of 2029</p>
|
||||
</li>
|
||||
<li>
|
||||
<p class="text-base text-neutral-900 font-medium">Vocational Studies in Networking, Microcomputers and Operative Systems</p>
|
||||
<p class="text-sm text-neutral-600">INS Cendrassos, class of 2024</p>
|
||||
<p class="text-base text-neutral-900 dark:text-neutral-100 font-medium">Vocational Studies in Networking, Microcomputers and Operative Systems</p>
|
||||
<p class="text-sm text-neutral-600 dark:text-neutral-400">INS Cendrassos, class of 2024</p>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section class="mb-12">
|
||||
<h2 class="flex items-center gap-2 text-2xl font-semibold text-neutral-900 mb-4">
|
||||
<Briefcase class="w-6 h-6 text-neutral-500" /> Experience
|
||||
<h2 class="flex items-center gap-2 text-2xl font-semibold text-neutral-900 dark:text-neutral-100 mb-4">
|
||||
<Briefcase class="w-6 h-6 text-neutral-500 dark:text-neutral-400" /> Experience
|
||||
</h2>
|
||||
<div class="grid sm:grid-cols-1 gap-6">
|
||||
{experiences.map(exp => (
|
||||
@@ -103,10 +103,10 @@ const experiences = [
|
||||
</div>
|
||||
</section>
|
||||
<section class="mb-12">
|
||||
<h2 class="flex items-center gap-2 text-2xl font-semibold text-neutral-900 mb-4">
|
||||
<Wrench class="w-6 h-6 text-neutral-500" /> Tools I Use
|
||||
<h2 class="flex items-center gap-2 text-2xl font-semibold text-neutral-900 dark:text-neutral-100 mb-4">
|
||||
<Wrench class="w-6 h-6 text-neutral-500 dark:text-neutral-400" /> Tools I Use
|
||||
</h2>
|
||||
<code class="block bg-neutral-50 p-4 rounded-xl text-neutral-800 overflow-x-auto border border-neutral-200">
|
||||
<code class="block bg-neutral-50 dark:bg-neutral-800 p-4 rounded-xl text-neutral-800 dark:text-neutral-200 overflow-x-auto border border-neutral-200 dark:border-neutral-700">
|
||||
<b>Languages:</b> C, Go, Python, Javascript/Typescript, PHP<br>
|
||||
<b>Frameworks & Libraries:</b> Astro, React, Preact, NextJS, Vue, NuxtJS, Express, FastAPI, TailwindCSS <br>
|
||||
<b>Databases:</b> MongoDB, PostgreSQL, MySQL/MariaDB, ClickHouse <br>
|
||||
@@ -115,8 +115,8 @@ const experiences = [
|
||||
</section>
|
||||
|
||||
<section class="mb-20 sm:mb-28" aria-labelledby="navigation-heading">
|
||||
<h2 class="flex items-center gap-2 text-2xl font-semibold text-neutral-900 mb-4">
|
||||
<Feather class="w-6 h-6 text-neutral-500" /> Projects, posts, thoughts...
|
||||
<h2 class="flex items-center gap-2 text-2xl font-semibold text-neutral-900 dark:text-neutral-100 mb-4">
|
||||
<Feather class="w-6 h-6 text-neutral-500 dark:text-neutral-400" /> Projects, posts, thoughts...
|
||||
</h2>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-3 gap-5">
|
||||
|
||||
@@ -33,10 +33,10 @@ const navItems = [
|
||||
---
|
||||
<Layout>
|
||||
<section class="max-w-4xl mb-20 sm:mb-28">
|
||||
<h2 class="text-4xl sm:text-5xl lg:text-6xl font-bold leading-[1.1] mb-6 text-neutral-900">
|
||||
A <span class="text-neutral-600"> notebook </span> for <br>working things out.
|
||||
<h2 class="text-4xl sm:text-5xl lg:text-6xl font-bold leading-[1.1] mb-6 text-neutral-900 dark:text-neutral-100">
|
||||
A <span class="text-neutral-600 dark:text-neutral-400"> notebook </span> for <br>working things out.
|
||||
</h2>
|
||||
<p class="text-lg sm:text-xl text-neutral-600 leading-relaxed max-w-2xl">
|
||||
<p class="text-lg sm:text-xl text-neutral-600 dark:text-neutral-400 leading-relaxed max-w-2xl">
|
||||
Unpolished notes, working prototypes, honest questions. A space for building understanding from the ground up. Trying to understand the world by writing and building.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
20
src/pages/workshop/[...slug].astro
Normal file
20
src/pages/workshop/[...slug].astro
Normal file
@@ -0,0 +1,20 @@
|
||||
---
|
||||
import { type CollectionEntry, getCollection, render } from 'astro:content';
|
||||
import PostLayout from '../../layouts/PostLayout.astro';
|
||||
|
||||
export async function getStaticPaths() {
|
||||
const posts = await getCollection('workshop');
|
||||
return posts.map((post) => ({
|
||||
params: { slug: post.id },
|
||||
props: post,
|
||||
}));
|
||||
}
|
||||
type Props = CollectionEntry<'workshop'>;
|
||||
|
||||
const post = Astro.props;
|
||||
const { Content } = await render(post);
|
||||
---
|
||||
|
||||
<PostLayout {...post.data}>
|
||||
<Content />
|
||||
</PostLayout>
|
||||
34
src/pages/workshop/index.astro
Normal file
34
src/pages/workshop/index.astro
Normal file
@@ -0,0 +1,34 @@
|
||||
---
|
||||
import "../../styles/global.css"
|
||||
import Layout from "../../layouts/Layout.astro"
|
||||
import { getCollection } from 'astro:content';
|
||||
|
||||
const posts = (await getCollection('workshop')).sort(
|
||||
(a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(),
|
||||
);
|
||||
---
|
||||
|
||||
<Layout>
|
||||
<section class="max-w-3xl mb-10 sm:mb-14">
|
||||
<h1 class="text-4xl sm:text-5xl font-bold mb-6 text-neutral-900 dark:text-neutral-100">Workshop</h1>
|
||||
<p class="text-lg text-neutral-600 dark:text-neutral-400 leading-relaxed text-justify">
|
||||
I'm a second year computer science student at the European Institute of Technology, still trying to figure out my place but enjoying the journey through systems programming, webdev and other fields. Outside of code, my favorite writer is Isaac Asimov, my favorite piece of music is Spiegel im Spiegel, and my favorite book is The Witches by Roald Dahl. My favorite star is Vega because it was once our north star and will be again in about 12,000 years - something poetic about that cycle. And that's pretty much everything you need to know about me, except maybe my tea preferences, but we'll save that for another time... </p>
|
||||
</section>
|
||||
|
||||
<ul class="space-y-4">
|
||||
{posts.map((post) => (
|
||||
<li class="p-4 rounded-xl border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-800 hover:shadow-md transition-shadow">
|
||||
<a href={`/workshop/${post.id}/`} class="block">
|
||||
<h4 class="text-xl font-semibold text-neutral-900 dark:text-neutral-100 hover:text-neutral-700 dark:hover:text-neutral-300 transition-colors">
|
||||
{post.data.title}
|
||||
</h4>
|
||||
{post.data.pubDate && (
|
||||
<p class="text-sm text-neutral-500 dark:text-neutral-400 mt-1">
|
||||
{new Date(post.data.pubDate).toLocaleDateString()}
|
||||
</p>
|
||||
)}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</Layout>
|
||||
Reference in New Issue
Block a user