249 lines
7.4 KiB
HTML
249 lines
7.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Url Short</title>
|
|
<link rel="stylesheet" href="/css/main.css">
|
|
<link rel="stylesheet" href="/css/styles.css">
|
|
|
|
</head>
|
|
<body>
|
|
<main>
|
|
|
|
<nav class="bg-gray-800 fixed w-full top-0 z-3">
|
|
<div class="mx-auto px-4">
|
|
<div class="flex items-center justify-between h-16">
|
|
<div class="flex items-center">
|
|
<a href="/" class="text-white font-bold text-xl"
|
|
>Fede Landing Site</a
|
|
>
|
|
</div>
|
|
|
|
<div class="hidden md:flex">
|
|
<a
|
|
href="/git"
|
|
target="_blank"
|
|
class="text-gray-300 hover:text-white px-3 py-2"
|
|
>Git</a
|
|
>
|
|
<a
|
|
class="text-gray-300 hover:text-white px-3 py-2 muted"
|
|
href="https://fedesrv.ddns.net/git/fede/CV/media/branch/master/Federico_Polidoro_CV.pdf"
|
|
target="_blank"
|
|
>CV</a
|
|
>
|
|
<a
|
|
href="https://github.com/fedpo2"
|
|
target="_blank"
|
|
class="text-gray-300 hover:text-white px-3 py-2"
|
|
>GitHub</a
|
|
>
|
|
<a
|
|
href="mailto:federico.nicolas.polidoro@gmail.com"
|
|
target="_blank"
|
|
class="text-gray-300 hover:text-white px-3 py-2"
|
|
>Email</a
|
|
>
|
|
<a
|
|
href="https://www.linkedin.com/in/federico-polidoro-40137a25b/"
|
|
target="_blank"
|
|
class="text-gray-300 hover:text-white px-3 py-2"
|
|
>LinkedIn</a
|
|
>
|
|
</div>
|
|
|
|
<div class="md:hidden cursor-context-menu">
|
|
<button
|
|
onclick="toggleOffCanvas()"
|
|
class="border px-2 py-1 rounded text-white"
|
|
>
|
|
<svg
|
|
class="h-6 w-6"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M0 6h25M0 12h25M0 18h25"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
id="offCanvas"
|
|
class="fixed top-16 right-0 w-64 h-screen bg-gray-800 transform translate-x-full transition-transform duration-200 ease-in-out"
|
|
>
|
|
<div class="flex flex-col p-4">
|
|
<a
|
|
href="/git"
|
|
target="_blank"
|
|
class="text-gray-300 hover:text-white px-3 py-2"
|
|
>Git</a
|
|
>
|
|
<a
|
|
class="text-gray-300 hover:text-white px-3 py-2 muted"
|
|
href="https://fedesrv.ddns.net/git/fede/CV/media/branch/master/Federico_Polidoro_CV.pdf"
|
|
target="_blank"
|
|
>CV</a
|
|
>
|
|
<a
|
|
href="https://github.com/fedpo2"
|
|
target="_blank"
|
|
class="text-gray-300 hover:text-white px-3 py-2"
|
|
>GitHub</a
|
|
>
|
|
<a
|
|
href="mailto:federico.nicolas.polidoro@gmail.com"
|
|
target="_blank"
|
|
class="text-gray-300 hover:text-white px-3 py-2"
|
|
>Email</a
|
|
>
|
|
<a
|
|
href="https://www.linkedin.com/in/federico-polidoro-40137a25b/"
|
|
target="_blank"
|
|
class="text-gray-300 hover:text-white px-3 py-2"
|
|
>LinkedIn</a
|
|
>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<script>
|
|
function toggleOffCanvas() {
|
|
const offCanvas = document.getElementById("offCanvas");
|
|
offCanvas.classList.toggle("translate-x-full");
|
|
}
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<style>
|
|
@font-face {
|
|
font-family: 'MiFuente';
|
|
src: url('/calamity.ttf') format('truetype');
|
|
}
|
|
header{
|
|
font-family: 'MiFuente', sans-serif;
|
|
}
|
|
</style>
|
|
<div class="mt-16 bg-sky-300">
|
|
<header class="text-center text-6xl pt-5">Url Short</header>
|
|
|
|
<div class="flex justify-center">
|
|
<div class="flex w-100 ">
|
|
<hr class="w-[50%] mt-6">
|
|
<p class="text-4xl">
|
|
|
|
o
|
|
|
|
</p>
|
|
<hr class="w-[50%] mt-6">
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="flex flex-col justify-center w-fit mx-auto mt-2">
|
|
<div class="rounded-t-full bg-sky-600">.</div>
|
|
<div class="flex justify-center gap-2 p-8 bg-sky-600">
|
|
|
|
<button class="p-1 rounded bg-white transform hover:scale-120
|
|
transition-all duration-100 ease-linear border-2 hover:z-2 active:z-0" onclick="openmodal("1.gif")">
|
|
<img src="1.gif" alt="Carousel Image" class="
|
|
h-[20rem] rounded">
|
|
</button>
|
|
|
|
<button class="p-1 rounded bg-white transform hover:scale-120
|
|
transition-all duration-100 ease-linear border-2 hover:z-2 active:z-0" onclick="openmodal("image.png")">
|
|
<img src="image.png" alt="Carousel Image" class="
|
|
h-[20rem] rounded">
|
|
</button>
|
|
|
|
</div>
|
|
<div class="rounded-b-full bg-sky-600 shadow-xl/30 mb-4">.</div>
|
|
|
|
|
|
<dialog id="1.gif" class="fixed inset-0 flex items-center justify-center
|
|
z-50 w-full h-full bg-black bg-opacity-50"
|
|
style="background-color: rgba(0,0,0,0.2);" onclick="openmodal("1.gif")" hidden>
|
|
<img src="1.gif" alt="Carousel Image" class="
|
|
mt-2 p-1 bg-white border-2
|
|
h-[80%] rounded-md opacity-100">
|
|
</dialog>
|
|
|
|
<dialog id="image.png" class="fixed inset-0 flex items-center justify-center
|
|
z-50 w-full h-full bg-black bg-opacity-50"
|
|
style="background-color: rgba(0,0,0,0.2);" onclick="openmodal("image.png")" hidden>
|
|
<img src="image.png" alt="Carousel Image" class="
|
|
mt-2 p-1 bg-white border-2
|
|
h-[80%] rounded-md opacity-100">
|
|
</dialog>
|
|
|
|
<script>
|
|
function openmodal(id){
|
|
let dialog = document.getElementById(id);
|
|
dialog.toggleAttribute("hidden");
|
|
}
|
|
</script>
|
|
|
|
</div>
|
|
<div class="flex justify-center">
|
|
<div class="flex w-100 ">
|
|
<hr class="w-[50%] mt-6">
|
|
<p class="text-4xl">
|
|
|
|
o
|
|
|
|
</p>
|
|
<hr class="w-[50%] mt-6">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex justify-center mt-2">
|
|
<article><p>Finalmente me decidi por realizar mi primer proyecto usando go. Este es un acortador de urls el cual permite registar las urls en una base de datos sqlite3 y recuperar la url normal al acceder a la api.</p>
|
|
<h2 id="funcionalidades">Funcionalidades</h2>
|
|
<ul>
|
|
<li>Acortar Urls dando una id random Uint64 casteada a int64.</li>
|
|
<li>Enviar un 301 a la pagina que necesites redireccionar.</li>
|
|
</ul>
|
|
<p>El <a href="https://fedesrv.ddns.net/git/fede/url-short">Fuente</a> se encuentra en ese link.</p>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
<div class="bg-sky-300 rounded-b-full shadow-md">
|
|
<p>.</p>
|
|
</div>
|
|
|
|
|
|
</main>
|
|
<br>
|
|
<footer class="text-center text-sm text-gray-500 mt-12 py-6 border-t">
|
|
© 2026 Federico Polidoro
|
|
</footer>
|
|
</body>
|
|
</html>
|