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

Create a Card component

main
Araozu 2024-05-01 15:00:46 -05:00
parent 0cd241c539
commit 9e3cb51b85
2 changed files with 201 additions and 198 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/Card.astro Normal file
View File

@ -0,0 +1,19 @@
---
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"
>
<h2
class="text-2xl font-bold bg-c-bg-2 py-2 pl-2 cursor-pointer hover:underline sticky top-0 border-b border-b-slate-600"
@click="open = !open"
>
{title}
<i x-bind:class="open? 'ph ph-caret-down': 'ph ph-caret-right'"></i>
</h2>
<div class="rounded-bl-lg border-slate-600 pt-4 pl-1 pb-2" x-show="open">
<slot />
</div>
</div>

44
src/pages/index.astro
View File

@ -1,6 +1,7 @@
---
import LangLogo from "../components/LangLogo.astro";
import Sidebar from "../components/Sidebar.astro";
import Card from "../components/Card.astro";
---
<html lang="en">
@ -32,23 +33,7 @@ import Sidebar from "../components/Sidebar.astro";
<div class="p-2 lg:grid lg:grid-cols-[20rem_auto] lg:gap-4">
<Sidebar />
<div class="2xl:grid 2xl:grid-cols-2 2xl:gap-2">
<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"
>
<h2
class="text-2xl font-bold py-2 pl-2 cursor-pointer hover:underline sticky top-0 border-b border-b-slate-600"
@click="open = !open"
>
Languages
<i
x-bind:class="open? 'ph ph-caret-down': 'ph ph-caret-right'"
></i>
</h2>
<div
class="rounded-bl-lg border-slate-600 pt-4 pl-1 pb-2"
x-show="open"
>
<Card title="Languages">
<div class="grid grid-cols-[5rem_auto] gap-x-2 gap-y-4">
<img
class="inline-block p-2"
@ -61,8 +46,8 @@ import Sidebar from "../components/Sidebar.astro";
>
JS/TS
</span>
: Being the lingua franca of the web, I've used a
lot of JS/TS, vanilla and with frameworks.
: Being the lingua franca of the web, I've used a lot
of JS/TS, vanilla and with frameworks.
</p>
<img
class="inline-block p-2"
@ -75,9 +60,9 @@ import Sidebar from "../components/Sidebar.astro";
>
Java/Kotlin
</span>
: The language I learned in university, along with
JS/TS is the language I've used the most. I've mostly
written DSAs and backends with it (JSP/Spring).
: The language I learned in university, along with JS/TS
is the language I've used the most. I've mostly written
DSAs and backends with it (JSP/Spring).
</p>
<img
class="inline-block p-2"
@ -90,8 +75,8 @@ import Sidebar from "../components/Sidebar.astro";
>
Rust
</span>
: Currently my favorite language, I began learning
it in late 2022. I've written a backend and I'm currently
: Currently my favorite language, I began learning it
in late 2022. I've written a backend and I'm currently
writing a programming language.
</p>
<img
@ -105,14 +90,14 @@ import Sidebar from "../components/Sidebar.astro";
>
Go
</span>
: I'm currently learning Go through advent of code,
and I hope to use it for some projects in the future.
: I'm currently learning Go through advent of code, and
I plan to use it for some projects in the future.
</p>
</div>
<p class="my-4">
<span class="font-medium text-lg">Others</span>:
Other languages I've used (mostly at uni):
<span class="font-medium text-lg">Others</span>: Other
languages I've used (mostly at uni):
<br />
<div class="text-center">
<LangLogo
@ -231,8 +216,7 @@ import Sidebar from "../components/Sidebar.astro";
In general I like to try new languages, explore new
concepts and see new ways to solve problems.
</p>
</div>
</div>
</Card>
</div>
</div>
</body>