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