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

Compare commits

base: fernando:0cd241c539733e0fd346f69a1c0c5420af7c116b
Branches Tags
fernando:main
...
compare: fernando:7665bb2b07225bb0e18e339aac7149fa5404b83b
Branches Tags
fernando:main

3 Commits
0cd241c539 ... 7665bb2b07

Author SHA1 Message Date
Araozu 7665bb2b07 Add new section 2024-05-04 11:38:32 -05:00
Araozu 0fd914ac96 Adjust styles, use a centered layout 2024-05-04 08:20:29 -05:00
Araozu 9e3cb51b85 Create a Card component 2024-05-01 15:00:46 -05:00
15 changed files with 286 additions and 211 deletions
Show Stats Expand all files Collapse all files

6
public/global.css
View File

@ -18,5 +18,9 @@
html {
background-color: var(--c-bg);
color: var(--c-on-bg);
font-family: Inter, sans-serif;
}
body {
font-family: "JetBrains Mono", monospace;
font-optical-sizing: auto;
}

3
public/img/tools/docker.svg Normal file
View File

@ -0,0 +1,3 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg xmlns="http://www.w3.org/2000/svg" aria-label="Docker" role="img" viewBox="0 0 512 512"><rect width="512" height="512" rx="15%" fill="#ffffff"/><path stroke="#066da5" stroke-width="38" d="M296 226h42m-92 0h42m-91 0h42m-91 0h41m-91 0h42m8-46h41m8 0h42m7 0h42m-42-46h42"/><path fill="#066da5" d="m472 228s-18-17-55-11c-4-29-35-46-35-46s-29 35-8 74c-6 3-16 7-31 7H68c-5 19-5 145 133 145 99 0 173-46 208-130 52 4 63-39 63-39"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 554 B

1
public/img/tools/git.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="92pt" height="92pt" viewBox="0 0 92 92"><defs><clipPath id="a"><path d="M0 .113h91.887V92H0Zm0 0"/></clipPath></defs><g clip-path="url(#a)"><path style="stroke:none;fill-rule:nonzero;fill:#f03c2e;fill-opacity:1" d="M90.156 41.965 50.036 1.848a5.918 5.918 0 0 0-8.372 0l-8.328 8.332 10.566 10.566a7.03 7.03 0 0 1 7.23 1.684 7.034 7.034 0 0 1 1.669 7.277l10.187 10.184a7.028 7.028 0 0 1 7.278 1.672 7.04 7.04 0 0 1 0 9.957 7.05 7.05 0 0 1-9.965 0 7.044 7.044 0 0 1-1.528-7.66l-9.5-9.497V59.36a7.04 7.04 0 0 1 1.86 11.29 7.04 7.04 0 0 1-9.957 0 7.04 7.04 0 0 1 0-9.958 7.06 7.06 0 0 1 2.304-1.539V33.926a7.049 7.049 0 0 1-3.82-9.234L29.242 14.272 1.73 41.777a5.925 5.925 0 0 0 0 8.371L41.852 90.27a5.925 5.925 0 0 0 8.37 0l39.934-39.934a5.925 5.925 0 0 0 0-8.371"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 819 B

1
public/img/tools/gitea.svg Normal file
View File

@ -0,0 +1 @@
<svg version="1.1" id="main_outline" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" style="enable-background:new 0 0 640 640;" xml:space="preserve" viewBox="5.67 143.05 628.65 387.55"> <g> <path id="teabag" style="fill:#FFFFFF" d="M395.9,484.2l-126.9-61c-12.5-6-17.9-21.2-11.8-33.8l61-126.9c6-12.5,21.2-17.9,33.8-11.8 c17.2,8.3,27.1,13,27.1,13l-0.1-109.2l16.7-0.1l0.1,117.1c0,0,57.4,24.2,83.1,40.1c3.7,2.3,10.2,6.8,12.9,14.4 c2.1,6.1,2,13.1-1,19.3l-61,126.9C423.6,484.9,408.4,490.3,395.9,484.2z"/> <g> <g> <path style="fill:#609926" d="M622.7,149.8c-4.1-4.1-9.6-4-9.6-4s-117.2,6.6-177.9,8c-13.3,0.3-26.5,0.6-39.6,0.7c0,39.1,0,78.2,0,117.2 c-5.5-2.6-11.1-5.3-16.6-7.9c0-36.4-0.1-109.2-0.1-109.2c-29,0.4-89.2-2.2-89.2-2.2s-141.4-7.1-156.8-8.5 c-9.8-0.6-22.5-2.1-39,1.5c-8.7,1.8-33.5,7.4-53.8,26.9C-4.9,212.4,6.6,276.2,8,285.8c1.7,11.7,6.9,44.2,31.7,72.5 c45.8,56.1,144.4,54.8,144.4,54.8s12.1,28.9,30.6,55.5c25,33.1,50.7,58.9,75.7,62c63,0,188.9-0.1,188.9-0.1s12,0.1,28.3-10.3 c14-8.5,26.5-23.4,26.5-23.4s12.9-13.8,30.9-45.3c5.5-9.7,10.1-19.1,14.1-28c0,0,55.2-117.1,55.2-231.1 C633.2,157.9,624.7,151.8,622.7,149.8z M125.6,353.9c-25.9-8.5-36.9-18.7-36.9-18.7S69.6,321.8,60,295.4 c-16.5-44.2-1.4-71.2-1.4-71.2s8.4-22.5,38.5-30c13.8-3.7,31-3.1,31-3.1s7.1,59.4,15.7,94.2c7.2,29.2,24.8,77.7,24.8,77.7 S142.5,359.9,125.6,353.9z M425.9,461.5c0,0-6.1,14.5-19.6,15.4c-5.8,0.4-10.3-1.2-10.3-1.2s-0.3-0.1-5.3-2.1l-112.9-55 c0,0-10.9-5.7-12.8-15.6c-2.2-8.1,2.7-18.1,2.7-18.1L322,273c0,0,4.8-9.7,12.2-13c0.6-0.3,2.3-1,4.5-1.5c8.1-2.1,18,2.8,18,2.8 l110.7,53.7c0,0,12.6,5.7,15.3,16.2c1.9,7.4-0.5,14-1.8,17.2C474.6,363.8,425.9,461.5,425.9,461.5z"/> <path style="fill:#609926" d="M326.8,380.1c-8.2,0.1-15.4,5.8-17.3,13.8c-1.9,8,2,16.3,9.1,20c7.7,4,17.5,1.8,22.7-5.4 c5.1-7.1,4.3-16.9-1.8-23.1l24-49.1c1.5,0.1,3.7,0.2,6.2-0.5c4.1-0.9,7.1-3.6,7.1-3.6c4.2,1.8,8.6,3.8,13.2,6.1 c4.8,2.4,9.3,4.9,13.4,7.3c0.9,0.5,1.8,1.1,2.8,1.9c1.6,1.3,3.4,3.1,4.7,5.5c1.9,5.5-1.9,14.9-1.9,14.9 c-2.3,7.6-18.4,40.6-18.4,40.6c-8.1-0.2-15.3,5-17.7,12.5c-2.6,8.1,1.1,17.3,8.9,21.3c7.8,4,17.4,1.7,22.5-5.3 c5-6.8,4.6-16.3-1.1-22.6c1.9-3.7,3.7-7.4,5.6-11.3c5-10.4,13.5-30.4,13.5-30.4c0.9-1.7,5.7-10.3,2.7-21.3 c-2.5-11.4-12.6-16.7-12.6-16.7c-12.2-7.9-29.2-15.2-29.2-15.2s0-4.1-1.1-7.1c-1.1-3.1-2.8-5.1-3.9-6.3c4.7-9.7,9.4-19.3,14.1-29 c-4.1-2-8.1-4-12.2-6.1c-4.8,9.8-9.7,19.7-14.5,29.5c-6.7-0.1-12.9,3.5-16.1,9.4c-3.4,6.3-2.7,14.1,1.9,19.8 C343.2,346.5,335,363.3,326.8,380.1z"/> </g> </g> </g> </svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

1
public/img/tools/google_cloud.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64"><path d="M40.728 20.488l2.05.035 5.57-5.57.27-2.36C44.2 8.657 38.367 6.26 31.993 6.26c-11.54 0-21.28 7.852-24.163 18.488.608-.424 1.908-.106 1.908-.106l11.13-1.83s.572-.947.862-.9A13.88 13.88 0 0 1 32 17.375c3.3.007 6.34 1.173 8.728 3.102z" fill="#ea4335"/><path d="M56.17 24.77c-1.293-4.77-3.958-8.982-7.555-12.177l-7.887 7.887c3.16 2.55 5.187 6.452 5.187 10.82v1.392c3.837 0 6.954 3.124 6.954 6.954 0 3.837-3.124 6.954-6.954 6.954H32.007L30.615 48v8.346l1.392 1.385h13.908A18.11 18.11 0 0 0 64 39.647c-.007-6.155-3.1-11.6-7.83-14.876z" fill="#4285f4"/><path d="M18.085 57.74h13.9V46.6h-13.9a6.89 6.89 0 0 1-2.862-.622l-2.007.615-5.57 5.57-.488 1.88a18 18 0 0 0 10.926 3.689z" fill="#34a853"/><path d="M18.085 21.57A18.11 18.11 0 0 0 0 39.654c0 5.873 2.813 11.095 7.166 14.403l8.064-8.064a6.96 6.96 0 0 1-4.099-6.339c0-3.837 3.124-6.954 6.954-6.954 2.82 0 5.244 1.7 6.34 4.1l8.064-8.064c-3.307-4.353-8.53-7.166-14.403-7.166z" fill="#fbbc05"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1012 B

3
public/img/tools/jenkins.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

2
public/img/tools/jira.svg Normal file
View File

@ -0,0 +1,2 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="256px" height="256px" viewBox="0 0 256 256" version="1.1" preserveAspectRatio="xMidYMid"><defs><linearGradient x1="98.0308675%" y1="0.160599572%" x2="58.8877062%" y2="40.7655246%" id="linearGradient-1"><stop stop-color="#0052CC" offset="18%"/><stop stop-color="#2684FF" offset="100%"/></linearGradient><linearGradient x1="100.665247%" y1="0.45503212%" x2="55.4018095%" y2="44.7269807%" id="linearGradient-2"><stop stop-color="#0052CC" offset="18%"/><stop stop-color="#2684FF" offset="100%"/></linearGradient></defs><g><path d="M244.657778,0 L121.706667,0 C121.706667,14.7201046 127.554205,28.837312 137.962891,39.2459977 C148.371577,49.6546835 162.488784,55.5022222 177.208889,55.5022222 L199.857778,55.5022222 L199.857778,77.3688889 C199.877391,107.994155 224.699178,132.815943 255.324444,132.835556 L255.324444,10.6666667 C255.324444,4.77562934 250.548815,3.60722001e-16 244.657778,0 Z" fill="#2684FF"/><path d="M183.822222,61.2622222 L60.8711111,61.2622222 C60.8907238,91.8874888 85.7125112,116.709276 116.337778,116.728889 L138.986667,116.728889 L138.986667,138.666667 C139.025905,169.291923 163.863607,194.097803 194.488889,194.097778 L194.488889,71.9288889 C194.488889,66.0378516 189.71326,61.2622222 183.822222,61.2622222 Z" fill="url(#linearGradient-1)"/><path d="M122.951111,122.488889 L0,122.488889 C3.75391362e-15,153.14192 24.8491913,177.991111 55.5022222,177.991111 L78.2222222,177.991111 L78.2222222,199.857778 C78.241767,230.45532 103.020285,255.265647 133.617778,255.324444 L133.617778,133.155556 C133.617778,127.264518 128.842148,122.488889 122.951111,122.488889 Z" fill="url(#linearGradient-2)"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

6
public/img/tools/linux.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

20
public/img/tools/postgres.svg Normal file
View File

@ -0,0 +1,20 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="432.071pt" height="445.383pt" viewBox="0 0 432.071 445.383" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<g id="orginal" style="fill-rule:nonzero;clip-rule:nonzero;stroke:#000000;stroke-miterlimit:4;">
</g>
<g id="Layer_x0020_3" style="fill-rule:nonzero;clip-rule:nonzero;fill:none;stroke:#FFFFFF;stroke-width:12.4651;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;">
<path style="fill:#000000;stroke:#000000;stroke-width:37.3953;stroke-linecap:butt;stroke-linejoin:miter;" d="M323.205,324.227c2.833-23.601,1.984-27.062,19.563-23.239l4.463,0.392c13.517,0.615,31.199-2.174,41.587-7c22.362-10.376,35.622-27.7,13.572-23.148c-50.297,10.376-53.755-6.655-53.755-6.655c53.111-78.803,75.313-178.836,56.149-203.322 C352.514-5.534,262.036,26.049,260.522,26.869l-0.482,0.089c-9.938-2.062-21.06-3.294-33.554-3.496c-22.761-0.374-40.032,5.967-53.133,15.904c0,0-161.408-66.498-153.899,83.628c1.597,31.936,45.777,241.655,98.47,178.31 c19.259-23.163,37.871-42.748,37.871-42.748c9.242,6.14,20.307,9.272,31.912,8.147l0.897-0.765c-0.281,2.876-0.157,5.689,0.359,9.019c-13.572,15.167-9.584,17.83-36.723,23.416c-27.457,5.659-11.326,15.734-0.797,18.367c12.768,3.193,42.305,7.716,62.268-20.224 l-0.795,3.188c5.325,4.26,4.965,30.619,5.72,49.452c0.756,18.834,2.017,36.409,5.856,46.771c3.839,10.36,8.369,37.05,44.036,29.406c29.809-6.388,52.6-15.582,54.677-101.107"/>
<path style="fill:#336791;stroke:none;" d="M402.395,271.23c-50.302,10.376-53.76-6.655-53.76-6.655c53.111-78.808,75.313-178.843,56.153-203.326c-52.27-66.785-142.752-35.2-144.262-34.38l-0.486,0.087c-9.938-2.063-21.06-3.292-33.56-3.496c-22.761-0.373-40.026,5.967-53.127,15.902 c0,0-161.411-66.495-153.904,83.63c1.597,31.938,45.776,241.657,98.471,178.312c19.26-23.163,37.869-42.748,37.869-42.748c9.243,6.14,20.308,9.272,31.908,8.147l0.901-0.765c-0.28,2.876-0.152,5.689,0.361,9.019c-13.575,15.167-9.586,17.83-36.723,23.416 c-27.459,5.659-11.328,15.734-0.796,18.367c12.768,3.193,42.307,7.716,62.266-20.224l-0.796,3.188c5.319,4.26,9.054,27.711,8.428,48.969c-0.626,21.259-1.044,35.854,3.147,47.254c4.191,11.4,8.368,37.05,44.042,29.406c29.809-6.388,45.256-22.942,47.405-50.555 c1.525-19.631,4.976-16.729,5.194-34.28l2.768-8.309c3.192-26.611,0.507-35.196,18.872-31.203l4.463,0.392c13.517,0.615,31.208-2.174,41.591-7c22.358-10.376,35.618-27.7,13.573-23.148z"/>
<path d="M215.866,286.484c-1.385,49.516,0.348,99.377,5.193,111.495c4.848,12.118,15.223,35.688,50.9,28.045c29.806-6.39,40.651-18.756,45.357-46.051c3.466-20.082,10.148-75.854,11.005-87.281"/>
<path d="M173.104,38.256c0,0-161.521-66.016-154.012,84.109c1.597,31.938,45.779,241.664,98.473,178.316c19.256-23.166,36.671-41.335,36.671-41.335"/>
<path d="M260.349,26.207c-5.591,1.753,89.848-34.889,144.087,34.417c19.159,24.484-3.043,124.519-56.153,203.329"/>
<path style="stroke-linejoin:bevel;" d="M348.282,263.953c0,0,3.461,17.036,53.764,6.653c22.04-4.552,8.776,12.774-13.577,23.155c-18.345,8.514-59.474,10.696-60.146-1.069c-1.729-30.355,21.647-21.133,19.96-28.739c-1.525-6.85-11.979-13.573-18.894-30.338 c-6.037-14.633-82.796-126.849,21.287-110.183c3.813-0.789-27.146-99.002-124.553-100.599c-97.385-1.597-94.19,119.762-94.19,119.762"/>
<path d="M188.604,274.334c-13.577,15.166-9.584,17.829-36.723,23.417c-27.459,5.66-11.326,15.733-0.797,18.365c12.768,3.195,42.307,7.718,62.266-20.229c6.078-8.509-0.036-22.086-8.385-25.547c-4.034-1.671-9.428-3.765-16.361,3.994z"/>
<path d="M187.715,274.069c-1.368-8.917,2.93-19.528,7.536-31.942c6.922-18.626,22.893-37.255,10.117-96.339c-9.523-44.029-73.396-9.163-73.436-3.193c-0.039,5.968,2.889,30.26-1.067,58.548c-5.162,36.913,23.488,68.132,56.479,64.938"/>
<path style="fill:#FFFFFF;stroke-width:4.155;stroke-linecap:butt;stroke-linejoin:miter;" d="M172.517,141.7c-0.288,2.039,3.733,7.48,8.976,8.207c5.234,0.73,9.714-3.522,9.998-5.559c0.284-2.039-3.732-4.285-8.977-5.015c-5.237-0.731-9.719,0.333-9.996,2.367z"/>
<path style="fill:#FFFFFF;stroke-width:2.0775;stroke-linecap:butt;stroke-linejoin:miter;" d="M331.941,137.543c0.284,2.039-3.732,7.48-8.976,8.207c-5.238,0.73-9.718-3.522-10.005-5.559c-0.277-2.039,3.74-4.285,8.979-5.015c5.239-0.73,9.718,0.333,10.002,2.368z"/>
<path d="M350.676,123.432c0.863,15.994-3.445,26.888-3.988,43.914c-0.804,24.748,11.799,53.074-7.191,81.435"/>
<path style="stroke-width:3;" d="M0,60.232"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

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 mb-2"
>
<h2
class="text-2xl font-bold bg-c-bg-2 py-2 pl-2 cursor-pointer hover:underline sticky top-0"
@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 border-t border-t-slate-600" x-show="open">
<slot />
</div>
</div>

26
src/components/ToolIcon.astro Normal file
View File

@ -0,0 +1,26 @@
---
const { name, icon, href, size } = Astro.props;
let tailwindSize = "h-8";
if (size === "big") {
tailwindSize = "h-24";
} else if (size === "medium") {
tailwindSize = "h-16";
}
---
<a
href={href}
target="_blank"
class="inline-block py-2 px-2 hover:bg-zinc-200 dark:hover:bg-zinc-800 transition-colors rounded text-center"
>
<img
class={`"inline-block ${tailwindSize} px-1 my-1"`}
src={`/img/tools/${icon}.svg`}
alt={`${name} logo`}
title={`${name} logo`}
/>
<br />
<span class="font-bold">{name}</span>
</a>

149
src/components/index/Languages.astro Normal file
View File

@ -0,0 +1,149 @@
---
import Card from "../Card.astro";
import LangLogo from "../LangLogo.astro";
---
<Card title="Programming 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>
<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>
<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>

20
src/components/index/Tools.astro Normal file
View File

@ -0,0 +1,20 @@
---
import Card from "../Card.astro"
import ToolIcon from "../ToolIcon.astro"
---
<Card title="Tools">
<p>
I've used a lot of tools, some of them are:
</p>
<div class="text-center">
<ToolIcon name="Git" icon="git" href="https://git-scm.com" size="big" />
<ToolIcon name="Jira" icon="jira" href="https://www.atlassian.com/jira" size="big" />
<ToolIcon name="Docker" icon="docker" href="https://www.docker.com/" size="big" />
<ToolIcon name="Jenkins" icon="jenkins" href="https://www.jenkins.io/" size="big" />
<br>
<ToolIcon name="Linux" icon="linux" href="" size="medium" />
<ToolIcon name="Postgres" icon="postgres" href="" size="medium" />
<ToolIcon name="GCloud" icon="google_cloud" href="" size="medium" />
</div>
</Card>

218
src/pages/index.astro
View File

@ -1,6 +1,7 @@
---
import LangLogo from "../components/LangLogo.astro";
import Sidebar from "../components/Sidebar.astro";
import Languages from "../components/index/Languages.astro";
import Tools from "../components/index/Tools.astro";
---
<html lang="en">
@ -14,11 +15,7 @@ import Sidebar from "../components/Sidebar.astro";
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500;600;700;800;900&family=Fira+Code&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap"
href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap"
rel="stylesheet"
/>
<link
@ -29,210 +26,13 @@ import Sidebar from "../components/Sidebar.astro";
<script src="//unpkg.com/alpinejs" defer></script>
</head>
<body>
<div class="p-2 lg:grid lg:grid-cols-[20rem_auto] lg:gap-4">
<div
class="container mx-auto 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>
<p>
In general I like to try new languages, explore new
concepts and see new ways to solve problems.
</p>
</div>
</div>
<div>
<Languages />
<Tools />
</div>
</div>
</body>

22
tailwind.config.mjs
View File

@ -10,5 +10,25 @@ export default {
},
},
},
plugins: [],
plugins: [
function ({ addComponents }) {
addComponents({
'.container': {
width: '98%',
'@screen sm': {
maxWidth: '640px',
},
'@screen md': {
maxWidth: '768px',
},
'@screen lg': {
maxWidth: '1024px',
},
'@screen xl': {
maxWidth: '1400px',
},
},
})
}
],
}