Create a Card component
This commit is contained in:
parent
0cd241c539
commit
9e3cb51b85
19
src/components/Card.astro
Normal file
19
src/components/Card.astro
Normal 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>
|
||||
@ -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,207 +33,190 @@ 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"
|
||||
>
|
||||
<div class="grid grid-cols-[5rem_auto] gap-x-2 gap-y-4">
|
||||
<img
|
||||
class="inline-block p-2"
|
||||
src="/img/ts-logo.png"
|
||||
alt="TS logo"
|
||||
/>
|
||||
<p>
|
||||
<span
|
||||
class="text-yellow-600 dark:text-yellow-400 font-medium text-lg"
|
||||
>
|
||||
JS/TS
|
||||
</span>
|
||||
: 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"
|
||||
src="/img/java-logo.png"
|
||||
alt="Java logo"
|
||||
/>
|
||||
<p>
|
||||
<span
|
||||
class="text-purple-700 dark:text-purple-500 font-medium text-lg"
|
||||
>
|
||||
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).
|
||||
</p>
|
||||
<img
|
||||
class="inline-block p-2"
|
||||
src="/img/rust-logo.svg"
|
||||
alt="Rust logo"
|
||||
/>
|
||||
<p>
|
||||
<span
|
||||
class="text-amber-800 dark:text-amber-600 font-medium text-lg"
|
||||
>
|
||||
Rust
|
||||
</span>
|
||||
: 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
|
||||
class="inline-block p-2"
|
||||
src="/img/go-logo.svg"
|
||||
alt="Go logo"
|
||||
/>
|
||||
<p>
|
||||
<span
|
||||
class="text-sky-600 dark:text-sky-400 font-medium text-lg"
|
||||
>
|
||||
Go
|
||||
</span>
|
||||
: I'm currently learning Go through advent of code,
|
||||
and I hope 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):
|
||||
<br />
|
||||
<div class="text-center">
|
||||
<LangLogo
|
||||
href="https://www.iso.org/standard/74528.html"
|
||||
lang="C"
|
||||
icon="c"
|
||||
/>
|
||||
<LangLogo
|
||||
href="https://isocpp.org/std/the-standard"
|
||||
lang="C++"
|
||||
icon="cpp"
|
||||
/>
|
||||
<LangLogo
|
||||
href="https://learn.microsoft.com/en-us/dotnet/csharp/"
|
||||
lang="Microsoft Java"
|
||||
icon="c-sharp"
|
||||
/>
|
||||
<LangLogo
|
||||
href="https://www.php.net/"
|
||||
lang="PHP"
|
||||
icon="php"
|
||||
/>
|
||||
<LangLogo
|
||||
href="https://www.python.org/"
|
||||
lang="Python"
|
||||
icon="python"
|
||||
/>
|
||||
<LangLogo
|
||||
href="https://dart.dev/"
|
||||
lang="Dart"
|
||||
icon="dart"
|
||||
/>
|
||||
</div>
|
||||
<br />
|
||||
Other languages I've tried for fun:
|
||||
<br />
|
||||
<div class="text-center">
|
||||
<LangLogo
|
||||
href="https://elixir-lang.org/"
|
||||
lang="Elixir"
|
||||
icon="elixir"
|
||||
/>
|
||||
<LangLogo
|
||||
href="https://www.erlang.org/"
|
||||
lang="Erlang"
|
||||
icon="erlang"
|
||||
/>
|
||||
<LangLogo
|
||||
href="https://gleam.run/"
|
||||
lang="Gleam"
|
||||
icon="gleam"
|
||||
/>
|
||||
<LangLogo
|
||||
href="https://coffeescript.org/"
|
||||
lang="CoffeeScript"
|
||||
icon="coffeescript"
|
||||
/>
|
||||
<LangLogo
|
||||
href="https://racket-lang.org/"
|
||||
lang="Racket"
|
||||
icon="racket"
|
||||
/>
|
||||
<LangLogo
|
||||
href="https://ziglang.org/"
|
||||
lang="Zig"
|
||||
icon="zig"
|
||||
/>
|
||||
<LangLogo
|
||||
href="https://learn.microsoft.com/en-us/dotnet/fsharp/what-is-fsharp"
|
||||
lang="F#"
|
||||
icon="f-sharp"
|
||||
/>
|
||||
<LangLogo
|
||||
href="https://www.haskell.org/"
|
||||
lang="Haskell"
|
||||
icon="haskell"
|
||||
/>
|
||||
<LangLogo
|
||||
href="https://ocaml.org/"
|
||||
lang="OCaml"
|
||||
icon="ocaml"
|
||||
/>
|
||||
<LangLogo
|
||||
href="https://rescript-lang.org/"
|
||||
lang="Rescript"
|
||||
icon="rescript"
|
||||
/>
|
||||
<LangLogo
|
||||
href="https://www.swift.org/"
|
||||
lang="Swift"
|
||||
icon="swift"
|
||||
/>
|
||||
<LangLogo
|
||||
href="https://www.scala-lang.org/"
|
||||
lang="Scala"
|
||||
icon="scala"
|
||||
/>
|
||||
<LangLogo
|
||||
href="https://clojure.org/"
|
||||
lang="Clojure"
|
||||
icon="clojure"
|
||||
/>
|
||||
<LangLogo
|
||||
href="https://www.gnu.org/software/bash/"
|
||||
lang="Bash"
|
||||
icon="bash"
|
||||
/>
|
||||
<LangLogo
|
||||
href="https://www.lua.org/"
|
||||
lang="Lua"
|
||||
icon="lua"
|
||||
/>
|
||||
</div>
|
||||
</p>
|
||||
<Card title="Languages">
|
||||
<div class="grid grid-cols-[5rem_auto] gap-x-2 gap-y-4">
|
||||
<img
|
||||
class="inline-block p-2"
|
||||
src="/img/ts-logo.png"
|
||||
alt="TS logo"
|
||||
/>
|
||||
<p>
|
||||
In general I like to try new languages, explore new
|
||||
concepts and see new ways to solve problems.
|
||||
<span
|
||||
class="text-yellow-600 dark:text-yellow-400 font-medium text-lg"
|
||||
>
|
||||
JS/TS
|
||||
</span>
|
||||
: 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"
|
||||
src="/img/java-logo.png"
|
||||
alt="Java logo"
|
||||
/>
|
||||
<p>
|
||||
<span
|
||||
class="text-purple-700 dark:text-purple-500 font-medium text-lg"
|
||||
>
|
||||
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).
|
||||
</p>
|
||||
<img
|
||||
class="inline-block p-2"
|
||||
src="/img/rust-logo.svg"
|
||||
alt="Rust logo"
|
||||
/>
|
||||
<p>
|
||||
<span
|
||||
class="text-amber-800 dark:text-amber-600 font-medium text-lg"
|
||||
>
|
||||
Rust
|
||||
</span>
|
||||
: 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
|
||||
class="inline-block p-2"
|
||||
src="/img/go-logo.svg"
|
||||
alt="Go logo"
|
||||
/>
|
||||
<p>
|
||||
<span
|
||||
class="text-sky-600 dark:text-sky-400 font-medium text-lg"
|
||||
>
|
||||
Go
|
||||
</span>
|
||||
: I'm currently learning Go through advent of code, and
|
||||
I plan to use it for some projects in the future.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="my-4">
|
||||
<span class="font-medium text-lg">Others</span>: Other
|
||||
languages I've used (mostly at uni):
|
||||
<br />
|
||||
<div class="text-center">
|
||||
<LangLogo
|
||||
href="https://www.iso.org/standard/74528.html"
|
||||
lang="C"
|
||||
icon="c"
|
||||
/>
|
||||
<LangLogo
|
||||
href="https://isocpp.org/std/the-standard"
|
||||
lang="C++"
|
||||
icon="cpp"
|
||||
/>
|
||||
<LangLogo
|
||||
href="https://learn.microsoft.com/en-us/dotnet/csharp/"
|
||||
lang="Microsoft Java"
|
||||
icon="c-sharp"
|
||||
/>
|
||||
<LangLogo
|
||||
href="https://www.php.net/"
|
||||
lang="PHP"
|
||||
icon="php"
|
||||
/>
|
||||
<LangLogo
|
||||
href="https://www.python.org/"
|
||||
lang="Python"
|
||||
icon="python"
|
||||
/>
|
||||
<LangLogo
|
||||
href="https://dart.dev/"
|
||||
lang="Dart"
|
||||
icon="dart"
|
||||
/>
|
||||
</div>
|
||||
<br />
|
||||
Other languages I've tried for fun:
|
||||
<br />
|
||||
<div class="text-center">
|
||||
<LangLogo
|
||||
href="https://elixir-lang.org/"
|
||||
lang="Elixir"
|
||||
icon="elixir"
|
||||
/>
|
||||
<LangLogo
|
||||
href="https://www.erlang.org/"
|
||||
lang="Erlang"
|
||||
icon="erlang"
|
||||
/>
|
||||
<LangLogo
|
||||
href="https://gleam.run/"
|
||||
lang="Gleam"
|
||||
icon="gleam"
|
||||
/>
|
||||
<LangLogo
|
||||
href="https://coffeescript.org/"
|
||||
lang="CoffeeScript"
|
||||
icon="coffeescript"
|
||||
/>
|
||||
<LangLogo
|
||||
href="https://racket-lang.org/"
|
||||
lang="Racket"
|
||||
icon="racket"
|
||||
/>
|
||||
<LangLogo
|
||||
href="https://ziglang.org/"
|
||||
lang="Zig"
|
||||
icon="zig"
|
||||
/>
|
||||
<LangLogo
|
||||
href="https://learn.microsoft.com/en-us/dotnet/fsharp/what-is-fsharp"
|
||||
lang="F#"
|
||||
icon="f-sharp"
|
||||
/>
|
||||
<LangLogo
|
||||
href="https://www.haskell.org/"
|
||||
lang="Haskell"
|
||||
icon="haskell"
|
||||
/>
|
||||
<LangLogo
|
||||
href="https://ocaml.org/"
|
||||
lang="OCaml"
|
||||
icon="ocaml"
|
||||
/>
|
||||
<LangLogo
|
||||
href="https://rescript-lang.org/"
|
||||
lang="Rescript"
|
||||
icon="rescript"
|
||||
/>
|
||||
<LangLogo
|
||||
href="https://www.swift.org/"
|
||||
lang="Swift"
|
||||
icon="swift"
|
||||
/>
|
||||
<LangLogo
|
||||
href="https://www.scala-lang.org/"
|
||||
lang="Scala"
|
||||
icon="scala"
|
||||
/>
|
||||
<LangLogo
|
||||
href="https://clojure.org/"
|
||||
lang="Clojure"
|
||||
icon="clojure"
|
||||
/>
|
||||
<LangLogo
|
||||
href="https://www.gnu.org/software/bash/"
|
||||
lang="Bash"
|
||||
icon="bash"
|
||||
/>
|
||||
<LangLogo
|
||||
href="https://www.lua.org/"
|
||||
lang="Lua"
|
||||
icon="lua"
|
||||
/>
|
||||
</div>
|
||||
</p>
|
||||
<p>
|
||||
In general I like to try new languages, explore new
|
||||
concepts and see new ways to solve problems.
|
||||
</p>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user