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 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,207 +33,190 @@ 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}"
|
<div class="grid grid-cols-[5rem_auto] gap-x-2 gap-y-4">
|
||||||
class="shadow-lg p-2 bg-c-bg-2 rounded-md max-w-[50rem] border border-slate-600 dark:border-transparent"
|
<img
|
||||||
>
|
class="inline-block p-2"
|
||||||
<h2
|
src="/img/ts-logo.png"
|
||||||
class="text-2xl font-bold py-2 pl-2 cursor-pointer hover:underline sticky top-0 border-b border-b-slate-600"
|
alt="TS logo"
|
||||||
@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>
|
|
||||||
<p>
|
<p>
|
||||||
In general I like to try new languages, explore new
|
<span
|
||||||
concepts and see new ways to solve problems.
|
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>
|
</p>
|
||||||
</div>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user