remove font awesome and optimize images

This commit is contained in:
2024-11-10 06:20:08 +01:00
parent e206765044
commit 5d267af600
14 changed files with 189 additions and 124 deletions

View File

@@ -1,3 +1,17 @@
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
@layer utilities {
.my-animate {
opacity: 1 !important;
transform: translateY(0) !important;
transition: opacity 0.3s ease, transform 0.3s ease;
}
.hidden-for-animation {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
}

File diff suppressed because one or more lines are too long

Binary file not shown.

After

Width:  |  Height:  |  Size: 654 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 42 KiB

23
assets/static/js/home.js Normal file
View File

@@ -0,0 +1,23 @@
document.addEventListener('DOMContentLoaded', function () {
const sections = document.querySelectorAll('.reveal-on-scroll');
console.log(sections);
const observer = new IntersectionObserver(
(entries, observer) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
const paragraphs = entry.target.querySelectorAll('p');
console.log(paragraphs);
paragraphs.forEach((paragraph) => {
paragraph.classList.add('my-animate');
// paragraph.classList.remove('hidden-for-animation');
});
observer.unobserve(entry.target); // Stop observing after animation triggers
}
});
},
{ threshold: 0.1 }
);
sections.forEach((section) => observer.observe(section));
});

View File

@@ -5,12 +5,8 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Gabriel Kaszewski</title> <title>Gabriel Kaszewski</title>
<link rel="icon" href="/static/images/favicon.ico" type="image/x-icon" /> <link rel="icon" href="/static/images/favicon.webp" type="image/x-icon" />
<link rel="stylesheet" href="/static/css/main.css" /> <link rel="stylesheet" href="/static/css/main.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
/>
</head> </head>
<body class="bg-gray-800 scroll-smooth"> <body class="bg-gray-800 scroll-smooth">

View File

@@ -2,11 +2,23 @@
<div class="flex gap-2"> <div class="flex gap-2">
<h1 class="text-xl">Gabriel Kaszewski</h1> <h1 class="text-xl">Gabriel Kaszewski</h1>
<span class="flex-1"></span> <span class="flex-1"></span>
<a href="https://github.com/GKaszewski" class="fa-brands fa-github"> </a> <a href="https://github.com/GKaszewski">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-github">
<path
d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" />
<path d="M9 18c-4.51 2-5-2-7-2" />
</svg>
</a>
<a <a
href="https://www.linkedin.com/in/gabriel-kaszewski-5344b3183" href="https://www.linkedin.com/in/gabriel-kaszewski-5344b3183"
class="fa-brands fa-linkedin"
> >
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-linkedin">
<path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z" />
<rect width="4" height="12" x="2" y="9" />
<circle cx="4" cy="4" r="2" />
</svg>
</a> </a>
</div> </div>
<div class="flex gap-2 text-sm"> <div class="flex gap-2 text-sm">

View File

@@ -2,99 +2,49 @@
%} {% block content %} %} {% block content %}
<div class="w-full"> <div class="w-full">
<div class="relative inline-block w-full min-w-full"> <div class="relative inline-block w-full min-w-full">
<img <img src="/static/images/optimized-75.webp" alt="Background"
src="/static/images/optimized.jpg" class="object-cover w-full max-h-full pointer-events-none" />
alt="Background"
class="object-cover w-full max-h-full pointer-events-none"
/>
<div <div
class="absolute inset-0 flex flex-col items-center justify-center w-full gap-4 md:items-start md:justify-start md:p-16 lg:p-20" class="absolute inset-0 flex flex-col items-center justify-center w-full gap-4 md:items-start md:justify-start md:p-16 lg:p-20">
>
<div> <div>
<h1 <h1
class="mb-4 text-2xl font-bold tracking-tight text-white md:text-4xl lg:text-6xl md:mb-0" class="mb-4 text-2xl font-bold tracking-tight text-white md:text-4xl lg:text-6xl md:mb-0 -motion-translate-x-in-100 motion-translate-y-in-75">
>
Gabriel Kaszewski Gabriel Kaszewski
</h1> </h1>
<h2 <h2
class="mt-8 text-lg font-light tracking-tight text-white md:text-xl lg:text-2xl md:mt-0" class="mt-8 text-lg font-light tracking-tight text-white md:text-xl lg:text-2xl md:mt-0 motion-preset-slide-right motion-duration-1000">
>
Full-Stack Developer Full-Stack Developer
</h2> </h2>
</div> </div>
<div class="items-center hidden gap-2 md:flex"> <div class="items-center hidden gap-2 md:flex motion-preset-slide-right motion-duration-2000">
<a href="/api/data/cv.pdf" title="My CV"> <a href="/api/data/cv.pdf" title="My CV">
<svg <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
xmlns="http://www.w3.org/2000/svg" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M14 2v4a2 2 0 0 0 2 2h4" /> <path d="M14 2v4a2 2 0 0 0 2 2h4" />
<path d="M15 18a3 3 0 1 0-6 0" /> <path d="M15 18a3 3 0 1 0-6 0" />
<path <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z" />
d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z"
/>
<circle cx="12" cy="13" r="2" /> <circle cx="12" cy="13" r="2" />
</svg> </svg>
</a> </a>
<a href="https://github.com/GKaszewski" title="GitHub"> <a href="https://github.com/GKaszewski" title="GitHub">
<svg <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
xmlns="http://www.w3.org/2000/svg" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path <path
d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" />
/>
<path d="M9 18c-4.51 2-5-2-7-2" /> <path d="M9 18c-4.51 2-5-2-7-2" />
</svg> </svg>
</a> </a>
<a href="mailto: gabrielkaszewski@gmail.com" title="My email"> <a href="mailto: gabrielkaszewski@gmail.com" title="My email">
<svg <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
xmlns="http://www.w3.org/2000/svg" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="4" /> <circle cx="12" cy="12" r="4" />
<path d="M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-4 8" /> <path d="M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-4 8" />
</svg> </svg>
</a> </a>
<a <a href="https://www.linkedin.com/in/gabriel-kaszewski-5344b3183" title="LinkedIn">
href="https://www.linkedin.com/in/gabriel-kaszewski-5344b3183" <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
title="LinkedIn" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
> <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z" />
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"
/>
<rect width="4" height="12" x="2" y="9" /> <rect width="4" height="12" x="2" y="9" />
<circle cx="4" cy="4" r="2" /> <circle cx="4" cy="4" r="2" />
</svg> </svg>
@@ -104,17 +54,13 @@
<div class="absolute bottom-0 p-2 text-sm"> <div class="absolute bottom-0 p-2 text-sm">
<span class="flex gap-1"> <span class="flex gap-1">
Photo by Photo by
<a <a class="underline"
class="underline" href="https://unsplash.com/@federize?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">
href="https://unsplash.com/@federize?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash"
>
Federico Beccari Federico Beccari
</a> </a>
on on
<a <a class="underline"
class="underline" href="https://unsplash.com/photos/red-moon-eGJg5iRGlg8?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">
href="https://unsplash.com/photos/red-moon-eGJg5iRGlg8?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash"
>
Unsplash Unsplash
</a> </a>
</span> </span>
@@ -122,21 +68,18 @@
</div> </div>
</div> </div>
<div class="w-full mt-8"></div> <div class="w-full mt-8"></div>
<div <div id="who-am-i" class="flex flex-col items-center justify-center gap-4 p-4 rounded md:w-fit">
id="who-am-i"
class="flex flex-col items-center justify-center gap-4 p-4 rounded md:w-fit"
>
<h3 class="mt-4 mb-2 text-5xl font-bold tracking-tight">Who am I? 🤔</h3> <h3 class="mt-4 mb-2 text-5xl font-bold tracking-tight">Who am I? 🤔</h3>
<section class="prose text-white md:prose-lg lg:prose-xl"> <section class="prose text-white md:prose-lg lg:prose-xl">
<p> <p class="motion-preset-pop motion-delay-75">
Hi, my name is Gabriel Kaszewski, and I am a Bioinformatics student 🧬 and Hi, my name is Gabriel Kaszewski, and I am a Bioinformatics student 🧬 and
self-taught full-stack developer 💻. self-taught full-stack developer 💻.
</p> </p>
<p> <p class="motion-preset-pop motion-delay-100">
My journey with programming started when I was 11 🚀. I love solving problems and creating software that My journey with programming started when I was 11 🚀. I love solving problems and creating software that
resolves them 👨‍💻. resolves them 👨‍💻.
</p> </p>
<p> <p class="motion-preset-pop motion-delay-200">
Currently, I am working as a Python Developer at digimonkeys.com 🐒. In my free time I like to read about Currently, I am working as a Python Developer at digimonkeys.com 🐒. In my free time I like to read about
new technologies and work on my projects 📚. new technologies and work on my projects 📚.
</p> </p>
@@ -144,30 +87,74 @@
</div> </div>
<div id="skills" class="flex flex-col items-center justify-center gap-4 p-4 rounded md:w-fit"> <div id="skills" class="flex flex-col items-center justify-center gap-4 p-4 rounded md:w-fit">
<h3 class="mt-4 mb-2 text-5xl font-bold tracking-tight">Skills 🛠️</h3> <h3 class="mt-4 mb-2 text-5xl font-bold tracking-tight">Skills 🛠️</h3>
{% for skill in skills %} {{ chip::chip(text=skill.name) }} {%endfor%} {% for skill in skills %} <div class="odd:motion-preset-slide-left even:motion-preset-slide-right odd:motion-delay-100">
{{
chip::chip(text=skill.name) }}</div>{%endfor%}
</div> </div>
<div id="experience" class="flex flex-col items-center justify-center gap-4 p-4 rounded md:w-fit"> <div id="experience" class="flex flex-col items-center justify-center gap-4 p-4 rounded md:w-fit">
<h3 class="mt-4 mb-2 text-5xl font-bold tracking-tight">Experience 📈</h3> <h3 class="mt-4 mb-2 text-5xl font-bold tracking-tight">Experience 📈</h3>
{% for job in jobs %} {% for job in jobs %}
<div class="flex flex-col gap-2 p-4 text-black bg-gray-50 rounded-lg max-w-[20rem] shadow-lg"> <div
<h4 class="text-2xl"> class="flex flex-col gap-2 p-4 text-black bg-gray-50 rounded-lg max-w-[20rem] shadow-lg odd:motion-preset-slide-right-md odd:motion-delay-100 even:motion-preset-rebound">
<span class="fas fa-user-circle"></span> {{ job.position }} <h4 class="flex items-center gap-1 text-2xl">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-user-round">
<path d="M18 20a6 6 0 0 0-12 0" />
<circle cx="12" cy="10" r="4" />
<circle cx="12" cy="12" r="10" />
</svg> {{ job.position }}
</h4> </h4>
<h5 class="text-xl font-light"> <h5 class="flex items-center gap-1 text-xl font-light">
<span class="fas fa-building"></span> {{ job.company }} <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-building">
<rect width="16" height="20" x="4" y="2" rx="2" ry="2" />
<path d="M9 22v-4h6v4" />
<path d="M8 6h.01" />
<path d="M16 6h.01" />
<path d="M12 6h.01" />
<path d="M12 10h.01" />
<path d="M12 14h.01" />
<path d="M16 10h.01" />
<path d="M16 14h.01" />
<path d="M8 10h.01" />
<path d="M8 14h.01" />
</svg> {{ job.company }}
</h5> </h5>
{% if job.still_working %} {% if job.still_working %}
<h6> <h6 class="flex items-center gap-1">
<span class="fas fa-clock"></span> {{ job.start_date | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock">
<circle cx="12" cy="12" r="10" />
<polyline points="12 6 12 12 16 14" />
</svg> {{ job.start_date |
date(format="%d-%m-%Y") }} - Present date(format="%d-%m-%Y") }} - Present
</h6> </h6>
{% else %} {% else %}
<h6> <h6 class="flex items-center gap-1">
<span class="fas fa-clock"></span> {{ job.start_date | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock">
<circle cx="12" cy="12" r="10" />
<polyline points="12 6 12 12 16 14" />
</svg> {{ job.start_date |
date(format="%d-%m-%Y") }} - {{ job.end_date | date(format="%d-%m-%Y") }} date(format="%d-%m-%Y") }} - {{ job.end_date | date(format="%d-%m-%Y") }}
</h6> </h6>
{% endif %} {% endif %}
<p class="font-bold"><span class="fas fa-microchip"></span> Technologies</p> <p class="flex items-center gap-1 font-bold"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-microchip">
<path d="M18 12h2" />
<path d="M18 16h2" />
<path d="M18 20h2" />
<path d="M18 4h2" />
<path d="M18 8h2" />
<path d="M4 12h2" />
<path d="M4 16h2" />
<path d="M4 20h2" />
<path d="M4 4h2" />
<path d="M4 8h2" />
<path
d="M8 2a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-1.5c-.276 0-.494.227-.562.495a2 2 0 0 1-3.876 0C9.994 2.227 9.776 2 9.5 2z" />
</svg> Technologies</p>
<div class="flex flex-wrap items-center w-full gap-2"> <div class="flex flex-wrap items-center w-full gap-2">
{% for technology in job.technologies %} {{ chip::chip(text=technology) {% for technology in job.technologies %} {{ chip::chip(text=technology)
}} {% endfor %} }} {% endfor %}

View File

@@ -17,24 +17,38 @@
<a href="/projects/project/{{ project.name }}" <a href="/projects/project/{{ project.name }}"
class="w-full p-2 text-center border border-yellow-400 rounded-xl hover:bg-yellow-400">Read more</a> class="w-full p-2 text-center border border-yellow-400 rounded-xl hover:bg-yellow-400">Read more</a>
<div class="flex flex-wrap gap-2 sm:justify-center md:justify-start"> <div class="flex flex-wrap gap-2 sm:justify-center md:justify-start">
{% if project.githubUrl %} {% if project.github_url %}
<a href="{{ project.github_url }}" target="_blank" rel="noopener noreferrer" <a href="{{ project.github_url }}" target="_blank" rel="noopener noreferrer"
class="w-full p-2 text-center border border-yellow-400 rounded-xl hover:bg-yellow-400"> class="flex items-center justify-center w-full gap-1 p-2 text-center border border-yellow-400 jus rounded-xl hover:bg-yellow-400">
<span class="fa-brands fa-github"></span> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-github">
<path
d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" />
<path d="M9 18c-4.51 2-5-2-7-2" />
</svg>
CODE CODE
</a> </a>
{% endif %} {% endif %}
{% if project.visitUrl %} {% if project.visit_url %}
<a href="{{ project.visit_url }}" target="_blank" rel="noopener noreferrer" <a href="{{ project.visit_url }}" target="_blank" rel="noopener noreferrer"
class="w-full p-2 text-center border border-yellow-400 rounded-xl hover:bg-yellow-400"> class="flex items-center justify-center w-full gap-1 p-2 text-center border border-yellow-400 rounded-xl hover:bg-yellow-400">
<span class="fas fa-eye"></span> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-eye">
<path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" />
<circle cx="12" cy="12" r="3" />
</svg>
LIVE LIVE
</a> </a>
{% endif %} {% endif %}
{% if project.downloadUrl %} {% if project.download_url %}
<a href="{{ project.download_url }}" target="_blank" rel="noopener noreferrer" <a href="{{ project.download_url }}" target="_blank" rel="noopener noreferrer"
class="w-full p-2 text-center border border-yellow-400 rounded-xl hover:bg-yellow-400"> class="flex justify-center gap-1 p-2 text-center border border-yellow-400 items-centerw-full rounded-xl hover:bg-yellow-400">
<span class="fas fa-cloud-download-alt"></span> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-cloud-download">
<path d="M12 13v8l-4-4" />
<path d="m12 21 4-4" />
<path d="M4.393 15.269A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.436 8.284" />
</svg>
DOWNLOAD DOWNLOAD
</a> </a>
{% endif %} {% endif %}

View File

@@ -34,21 +34,39 @@
<h1>Links</h1> <h1>Links</h1>
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
{% if project.github_url %} {% if project.github_url %}
<a href="{{ project.github_url }}" target="_blank" <a href="{{ project.github_url }}" target="_blank" rel="noopener noreferrer"
class="w-full p-2 text-center text-white no-underline border border-yellow-400 hover:text-white rounded-xl hover:bg-yellow-400"> class="flex items-center justify-center w-full gap-1 p-2 text-center border border-yellow-400 jus rounded-xl hover:bg-yellow-400">
<span class="fab fa-github"></span> CODE <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-github">
<path
d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" />
<path d="M9 18c-4.51 2-5-2-7-2" />
</svg>
CODE
</a> </a>
{% endif %} {% endif %}
{% if project.visit_url %} {% if project.visit_url %}
<a href="{{ project.visit_url }}" target="_blank" <a href="{{ project.visit_url }}" target="_blank" rel="noopener noreferrer"
class="w-full p-2 text-center text-white no-underline border border-yellow-400 hover:text-white rounded-xl hover:bg-yellow-400"> class="flex items-center justify-center w-full gap-1 p-2 text-center border border-yellow-400 rounded-xl hover:bg-yellow-400">
<span class="fas fa-eye"></span> LIVE <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-eye">
<path
d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" />
<circle cx="12" cy="12" r="3" />
</svg>
LIVE
</a> </a>
{% endif %} {% endif %}
{% if project.download_url %} {% if project.download_url %}
<a href="{{ project.download_url }}" target="_blank" <a href="{{ project.download_url }}" target="_blank" rel="noopener noreferrer"
class="w-full p-2 text-center text-white no-underline border border-yellow-400 hover:text-white rounded-xl hover:bg-yellow-400"> class="flex justify-center gap-1 p-2 text-center border border-yellow-400 items-centerw-full rounded-xl hover:bg-yellow-400">
<span class="fas fa-cloud-download-alt"></span> DOWNLOAD <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-cloud-download">
<path d="M12 13v8l-4-4" />
<path d="m12 21 4-4" />
<path d="M4.393 15.269A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.436 8.284" />
</svg>
DOWNLOAD
</a> </a>
{% endif %} {% endif %}
</div> </div>

BIN
bun.lockb

Binary file not shown.

View File

@@ -3,7 +3,8 @@
"module": "index.ts", "module": "index.ts",
"type": "module", "type": "module",
"devDependencies": { "devDependencies": {
"@types/bun": "latest" "@types/bun": "latest",
"tailwindcss-motion": "^0.4.1-beta"
}, },
"peerDependencies": { "peerDependencies": {
"typescript": "^5.0.0" "typescript": "^5.0.0"

View File

@@ -8,5 +8,5 @@ module.exports = {
theme: { theme: {
extend: {}, extend: {},
}, },
plugins: [require('@tailwindcss/typography')], plugins: [require('@tailwindcss/typography'), require('tailwindcss-motion')],
}; };