Enhance website footer and project item display
- Updated footer to include an Itch.io link and improved SVG formatting. - Modified index.html to introduce a Steam preview iframe and refined introductory text. - Enhanced project-item.html for better layout and added glass effect styles. - Updated chip.html to include glass effect styling. - Adjusted tailwind.config.js to extend theme with new colors, gradients, border radius, and box shadow. - Updated package.json to use the latest versions of tailwindcss-motion and @tailwindcss/typography. - Changed bun.lockb permissions for better compatibility.
This commit is contained in:
@@ -2,16 +2,132 @@
|
|||||||
@tailwind components;
|
@tailwind components;
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
|
||||||
@layer utilities {
|
@layer components {
|
||||||
.my-animate {
|
.glossy-effect::before {
|
||||||
opacity: 1 !important;
|
content: "";
|
||||||
transform: translateY(0) !important;
|
position: absolute;
|
||||||
transition: opacity 0.3s ease, transform 0.3s ease;
|
top: 0;
|
||||||
}
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 50%;
|
||||||
|
border-radius: var(--radius); /* Inherit parent's border radius */
|
||||||
|
background: linear-gradient(
|
||||||
|
180deg,
|
||||||
|
rgba(255, 255, 255, 0.4) 0%,
|
||||||
|
rgba(255, 255, 255, 0.1) 100%
|
||||||
|
);
|
||||||
|
opacity: 0.8;
|
||||||
|
pointer-events: none; /* Allow clicks to pass through */
|
||||||
|
z-index: 1; /* Ensure it's above the background but below content */
|
||||||
|
}
|
||||||
|
|
||||||
.hidden-for-animation {
|
.glossy-effect.bottom::after {
|
||||||
opacity: 0;
|
content: "";
|
||||||
transform: translateY(20px);
|
position: absolute;
|
||||||
transition: opacity 0.3s ease, transform 0.3s ease;
|
bottom: 0;
|
||||||
}
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 30%;
|
||||||
|
border-radius: var(--radius);
|
||||||
|
background: linear-gradient(
|
||||||
|
0deg,
|
||||||
|
rgba(0, 0, 0, 0.1) 0%,
|
||||||
|
rgba(0, 0, 0, 0) 100%
|
||||||
|
);
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa-gloss {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa-gloss::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 50%;
|
||||||
|
border-radius: var(--radius);
|
||||||
|
background: linear-gradient(var(--gradient-fa-gloss));
|
||||||
|
opacity: 0.8;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa-gloss.bottom::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 30%;
|
||||||
|
border-radius: var(--radius);
|
||||||
|
background: linear-gradient(
|
||||||
|
0deg,
|
||||||
|
rgba(0, 0, 0, 0.1) 0%,
|
||||||
|
rgba(0, 0, 0, 0) 100%
|
||||||
|
);
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shadow-fa-sm {
|
||||||
|
box-shadow: var(--shadow-fa-sm), var(--fa-inner);
|
||||||
|
}
|
||||||
|
.shadow-fa-md {
|
||||||
|
box-shadow: var(--shadow-fa-md), var(--fa-inner);
|
||||||
|
}
|
||||||
|
.shadow-fa-lg {
|
||||||
|
box-shadow: var(--shadow-fa-lg), var(--fa-inner);
|
||||||
|
}
|
||||||
|
.text-shadow-default {
|
||||||
|
text-shadow: var(--text-shadow-default);
|
||||||
|
}
|
||||||
|
.text-shadow-sm {
|
||||||
|
text-shadow: var(--text-shadow-sm);
|
||||||
|
}
|
||||||
|
.text-shadow-md {
|
||||||
|
text-shadow: var(--text-shadow-md);
|
||||||
|
}
|
||||||
|
.text-shadow-lg {
|
||||||
|
text-shadow: var(--text-shadow-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.glass-effect {
|
||||||
|
@apply bg-transparent backdrop-blur-lg border border-white/20 shadow-fa-lg;
|
||||||
|
clip-path: inset(0 round 1rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gloss-highlight::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 60%;
|
||||||
|
border-radius: inherit; /* This is key for matching the parent's border radius */
|
||||||
|
background: linear-gradient(
|
||||||
|
180deg,
|
||||||
|
rgba(255, 255, 255, 0.5) 0%,
|
||||||
|
rgba(255, 255, 255, 0) 100%
|
||||||
|
);
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@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
@@ -2,24 +2,24 @@
|
|||||||
%} {% block content %}
|
%} {% block content %}
|
||||||
<div class="mt-8"></div>
|
<div class="mt-8"></div>
|
||||||
<div
|
<div
|
||||||
class="flex flex-col items-center justify-center gap-2 p-4 bg-white rounded-lg"
|
class="flex flex-col items-center justify-center gap-2 p-4 bg-white rounded-lg glass-effect glossy-effect bottom gloss-highlight shadow-lg"
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
src="/static/images/ja.jpg"
|
src="/static/images/ja.jpg"
|
||||||
alt="me"
|
alt="me"
|
||||||
width="300"
|
width="300"
|
||||||
height="300"
|
height="300"
|
||||||
class="object-cover rounded-md"
|
class="object-cover rounded-md glossy-effect bottom gloss-highlight shadow-lg"
|
||||||
/>
|
/>
|
||||||
<h2 class="mt-4 text-2xl font-bold text-black">Hello, I'm Gabriel! 👋</h2>
|
<h2 class="mt-4 text-2xl font-bold text-black">Hello, I'm Gabriel! 👋</h2>
|
||||||
</div>
|
</div>
|
||||||
<h1 class="mt-6 text-3xl font-extrabold">More info about me! 💡</h1>
|
<h1 class="mt-6 text-3xl font-extrabold">More info about me! 💡</h1>
|
||||||
<div
|
<div
|
||||||
class="flex flex-col m-4 prose text-white md:text-left md:m-0 md:w-1/2 md:prose-lg lg:prose-xl prose-blue"
|
class="flex flex-col m-4 prose text-white md:text-left md:m-0 md:w-1/2 md:prose-lg lg:prose-xl prose-yellow"
|
||||||
>
|
>
|
||||||
<p>
|
<p>
|
||||||
Hi! I am Gabriel and I am {{ age }} years old. I graduated in Bioinformatics
|
Hi! I am Gabriel and I am {{ age }} years old. I graduated in Bioinformatics
|
||||||
from the University of Gdansk 🏫. I'm fluent in Polish and English and
|
from the University of Gdańsk 🏫. I'm fluent in Polish and English and
|
||||||
currently work as a Python Developer at digimonkeys.com 🐒💻.
|
currently work as a Python Developer at digimonkeys.com 🐒💻.
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
@@ -44,6 +44,114 @@
|
|||||||
Books📚")}} {{ chip::chip(text="Astronomy 🔭")}} {{ chip::chip(text="Sports
|
Books📚")}} {{ chip::chip(text="Astronomy 🔭")}} {{ chip::chip(text="Sports
|
||||||
🏅") }} {{ chip::chip(text="History 🏰")}}
|
🏅") }} {{ chip::chip(text="History 🏰")}}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<h1 class="mt-6 text-3xl font-extrabold">My Philosophy 🧠</h1>
|
||||||
|
<div
|
||||||
|
class="flex flex-col m-4 prose text-white md:text-left md:m-0 md:w-1/2 md:prose-lg lg:prose-xl"
|
||||||
|
>
|
||||||
|
<p>
|
||||||
|
I believe much of today's software is bloated, inefficient, and
|
||||||
|
disrespectful of the user's resources. My passion, which started with a
|
||||||
|
simple curiosity at age 11, is to build a better alternative. I focus on
|
||||||
|
creating software that is
|
||||||
|
<strong class="text-yellow-400"
|
||||||
|
>fast, reliable, and genuinely intuitive</strong
|
||||||
|
>, guided by the principles of clean and efficient code.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 class="mt-6 text-3xl font-extrabold">My Toolkit 🛠️</h1>
|
||||||
|
<div
|
||||||
|
class="bg-transparent glass-effect glossy-effect bottom gloss-highlight rounded-2xl p-4 m-4 md:m-0 md:w-1/2 w-full text-white text-shadow-sm"
|
||||||
|
>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<h3 class="text-xl font-bold">OS & Hardware</h3>
|
||||||
|
<p>Arch Linux</p>
|
||||||
|
<p>Custom-built PC Rig</p>
|
||||||
|
<p>AMD Ryzen 7 5800X3D</p>
|
||||||
|
<p>NVIDIA RTX 4070 Ti</p>
|
||||||
|
<p>48GB RAM</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="text-xl font-bold">Editor</h3>
|
||||||
|
<p>Jetbrains IDEs (Pycharm, Rider)</p>
|
||||||
|
<p>VS Code</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="text-xl font-bold">Primary Languages</h3>
|
||||||
|
<p>Rust, Python, C#, TypeScript</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="text-xl font-bold">Favorite Tech</h3>
|
||||||
|
<p>Axum, Godot, React, TailwindCSS</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 class="mt-6 text-3xl font-extrabold">Future Goals 🚀</h1>
|
||||||
|
<div
|
||||||
|
class="flex flex-col m-4 prose text-white md:text-left md:m-0 md:w-1/2 md:prose-lg lg:prose-xl prose-blue"
|
||||||
|
>
|
||||||
|
<p>
|
||||||
|
I'm always eager to learn and grow. My goal is to continue honing my skills
|
||||||
|
in backend development and system architecture while exploring new creative
|
||||||
|
outlets. Here's what's on my radar:
|
||||||
|
</p>
|
||||||
|
<ul class="list-none p-0">
|
||||||
|
<li class="flex items-center gap-2 not-prose">
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="20"
|
||||||
|
height="20"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
>
|
||||||
|
<polyline points="20 6 9 17 4 12"></polyline>
|
||||||
|
</svg>
|
||||||
|
<span
|
||||||
|
>Deepen my expertise in Rust for high-performance applications.</span
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-center gap-2 not-prose">
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="20"
|
||||||
|
height="20"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
>
|
||||||
|
<polyline points="20 6 9 17 4 12"></polyline>
|
||||||
|
</svg>
|
||||||
|
<span>Contribute to impactful open-source projects.</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-center gap-2 not-prose">
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="20"
|
||||||
|
height="20"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
>
|
||||||
|
<polyline points="20 6 9 17 4 12"></polyline>
|
||||||
|
</svg>
|
||||||
|
<span>Develop and release my first full-fledged indie game.</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
<h1 class="mt-6 text-3xl font-bold">FAQ ❓</h1>
|
<h1 class="mt-6 text-3xl font-bold">FAQ ❓</h1>
|
||||||
<div id="faq" class="flex flex-col gap-2 m-4">
|
<div id="faq" class="flex flex-col gap-2 m-4">
|
||||||
<div>
|
<div>
|
||||||
@@ -58,7 +166,9 @@
|
|||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h6 class="text-xl font-bold">Are you studying Computer Science?</h6>
|
<h6 class="text-xl font-bold">Are you studying Computer Science?</h6>
|
||||||
<p>No, I study Bioinformatics, but it's closely related 🧬💻.</p>
|
<p>
|
||||||
|
No, I have a degree in Bioinformatics, which is a closely related field.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h6 class="text-xl font-bold">
|
<h6 class="text-xl font-bold">
|
||||||
|
|||||||
@@ -3,21 +3,65 @@
|
|||||||
<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 title="github" href="https://github.com/GKaszewski">
|
<a title="github" 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"
|
<svg
|
||||||
stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-github">
|
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
|
<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 title="linkedin" href="https://www.linkedin.com/in/gabriel-kaszewski-5344b3183">
|
<a
|
||||||
<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" class="lucide lucide-linkedin">
|
href="https://www.linkedin.com/in/gabriel-kaszewski-5344b3183"
|
||||||
<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"
|
||||||
|
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" />
|
<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>
|
||||||
</a>
|
</a>
|
||||||
|
<a title="itch.io" href="https://gabrielkaszewski.itch.io/">
|
||||||
|
<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-gamepad"
|
||||||
|
>
|
||||||
|
<rect width="20" height="12" x="2" y="6" rx="2" />
|
||||||
|
<path d="M6 12h4m-2-2v4" />
|
||||||
|
<path d="M16 10h.01M20 10h.01" />
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex gap-2 text-sm">
|
<div class="flex gap-2 text-sm">
|
||||||
<p>Powered by loco.rs & Rust 🦀</p>
|
<p>Powered by loco.rs & Rust 🦀</p>
|
||||||
@@ -26,9 +70,7 @@
|
|||||||
<p class="font-semibold">
|
<p class="font-semibold">
|
||||||
© Gabriel Kaszewski, 2024. All rights reserved.
|
© Gabriel Kaszewski, 2024. All rights reserved.
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>Made with 💗 in Poland</p>
|
||||||
Made with 💗 in Poland
|
|
||||||
</p>
|
|
||||||
<span class="flex-1"></span>
|
<span class="flex-1"></span>
|
||||||
<a href="/projects">Projects</a>
|
<a href="/projects">Projects</a>
|
||||||
<a href="https://blog.gabrielkaszewski.dev/" target="_blank">Blog</a>
|
<a href="https://blog.gabrielkaszewski.dev/" target="_blank">Blog</a>
|
||||||
|
|||||||
@@ -144,8 +144,19 @@
|
|||||||
<section class="prose text-white md:prose-lg lg:prose-xl">
|
<section class="prose text-white md:prose-lg lg:prose-xl">
|
||||||
<p class="motion-preset-pop motion-delay-75">
|
<p class="motion-preset-pop motion-delay-75">
|
||||||
Hi, my name is Gabriel Kaszewski - I'm a Bioinformatics graduate 🧬 and a
|
Hi, my name is Gabriel Kaszewski - I'm a Bioinformatics graduate 🧬 and a
|
||||||
self-taught full-stack developer 💻.
|
self-taught full-stack developer 💻. I love creating software that
|
||||||
|
resolves complex problems, and my most ambitious project yet is my first
|
||||||
|
game. Take a look at the Steam preview below and consider adding it to
|
||||||
|
your wishlist!
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
<iframe
|
||||||
|
src="https://store.steampowered.com/widget/3575090/"
|
||||||
|
frameborder="0"
|
||||||
|
width="646"
|
||||||
|
height="190"
|
||||||
|
></iframe>
|
||||||
|
|
||||||
<p class="motion-preset-pop motion-delay-100">
|
<p class="motion-preset-pop motion-delay-100">
|
||||||
My journey with programming started when I was 11 🚀. I love solving
|
My journey with programming started when I was 11 🚀. I love solving
|
||||||
problems and creating software that resolves them 👨💻.
|
problems and creating software that resolves them 👨💻.
|
||||||
@@ -179,9 +190,9 @@
|
|||||||
<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
|
<div
|
||||||
class="flex flex-col gap-2 p-4 text-black bg-gray-50 rounded-lg w-[20rem] max-w-[20rem] shadow-lg odd:motion-preset-slide-right-md odd:motion-delay-100 even:motion-preset-rebound"
|
class="bg-white glass-effect glossy-effect bottom gloss-highlight flex flex-col gap-2 p-4 text-black w-[20rem] max-w-[20rem] odd:motion-preset-slide-right-md odd:motion-delay-100 even:motion-preset-rebound"
|
||||||
>
|
>
|
||||||
<h4 class="flex items-center gap-1 text-2xl">
|
<h4 class="flex items-center gap-1 text-2xl text-shadow-sm">
|
||||||
<svg
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
width="24"
|
width="24"
|
||||||
@@ -200,7 +211,7 @@
|
|||||||
</svg>
|
</svg>
|
||||||
{{ job.position }}
|
{{ job.position }}
|
||||||
</h4>
|
</h4>
|
||||||
<h5 class="flex items-center gap-1 text-xl font-light">
|
<h5 class="flex items-center gap-1 text-xl font-light text-shadow-sm">
|
||||||
<svg
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
width="24"
|
width="24"
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
{% macro chip(text) %}
|
{% macro chip(text) %}
|
||||||
<p
|
<p
|
||||||
class="text-base text-center rounded-2xl font-semibold tracking-tight text-black shadow-lg bg-yellow-400 p-2 min-w-[4rem] max-w-[12rem]"
|
class="text-base text-center rounded-2xl font-semibold tracking-tight text-black bg-yellow-400 p-2 min-w-[4rem] max-w-[12rem] glass-effect glossy-effect bottom gloss-highlight"
|
||||||
>
|
>
|
||||||
{{ text }}
|
{{ text }}
|
||||||
</p>
|
</p>
|
||||||
|
|||||||
@@ -1,202 +1,343 @@
|
|||||||
{% import "website/macros/chip.html" as chip %}
|
{% import "website/macros/chip.html" as chip %} {% import
|
||||||
{% import "website/macros/image-carousel.html" as image_carousel %}
|
"website/macros/image-carousel.html" as image_carousel %} {% macro
|
||||||
{% macro project_item(project) %}
|
project_item(project) %}
|
||||||
<script src="/static/js/project-item.js"></script>
|
<script src="/static/js/project-item.js"></script>
|
||||||
|
|
||||||
<div class="flex items-center justify-between w-full h-full gap-4 text-white">
|
<div class="flex items-center justify-between w-full h-full gap-4 text-white">
|
||||||
<div class="flex flex-col w-full gap-4 m-4 md:w-1/3">
|
<div class="flex flex-col w-full gap-4 m-4 md:w-1/3">
|
||||||
<div class="prose">
|
<div class="prose">
|
||||||
<h1 class="text-white">{{ project.name }}</h1>
|
<h1 class="text-white">{{ project.name }}</h1>
|
||||||
<p class="text-white whitespace-pre-wrap">{{ project.short_description }}</p>
|
<p class="text-white whitespace-pre-wrap">
|
||||||
</div>
|
{{ project.short_description }}
|
||||||
<div class="flex flex-wrap justify-center gap-2 md:justify-start">
|
</p>
|
||||||
{% for technology in project.technologies %}
|
</div>
|
||||||
{{ chip::chip(text=technology) }}
|
<div class="flex flex-wrap justify-center gap-2 md:justify-start">
|
||||||
{% endfor %}
|
{% for technology in project.technologies %} {{
|
||||||
</div>
|
chip::chip(text=technology) }} {% endfor %}
|
||||||
<a href="/projects/project/{{ project.name }}"
|
</div>
|
||||||
class="w-full p-2 text-center border border-yellow-400 rounded-xl hover:bg-yellow-400">Read more</a>
|
<a
|
||||||
<div class="flex flex-wrap gap-2 sm:justify-center md:justify-start">
|
href="/projects/project/{{ project.name }}"
|
||||||
{% if project.github_url %}
|
class="text-center glass-effect glossy-effect bottom gloss-highlight p-2 rounded-2xl bg-yellow-400 hover:bg-yellow-500 text-black"
|
||||||
<a href="{{ project.github_url }}" target="_blank" rel="noopener noreferrer"
|
>Read more</a
|
||||||
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">
|
>
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
<div class="flex flex-wrap gap-2 sm:justify-center md:justify-start">
|
||||||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
{% if project.github_url %}
|
||||||
class="lucide lucide-github">
|
<a
|
||||||
<path
|
href="{{ project.github_url }}"
|
||||||
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" />
|
target="_blank"
|
||||||
<path d="M9 18c-4.51 2-5-2-7-2" />
|
rel="noopener noreferrer"
|
||||||
</svg>
|
class="flex items-center justify-center w-full gap-1 p-2 text-center glass-effect glossy-effect bottom gloss-highlight rounded-2xl bg-yellow-400 hover:bg-yellow-500 text-black"
|
||||||
CODE
|
>
|
||||||
</a>
|
<svg
|
||||||
{% endif %}
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
{% if project.visit_url %}
|
width="24"
|
||||||
<a href="{{ project.visit_url }}" target="_blank" rel="noopener noreferrer"
|
height="24"
|
||||||
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">
|
viewBox="0 0 24 24"
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
fill="none"
|
||||||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
stroke="currentColor"
|
||||||
class="lucide lucide-eye">
|
stroke-width="2"
|
||||||
<path
|
stroke-linecap="round"
|
||||||
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" />
|
stroke-linejoin="round"
|
||||||
<circle cx="12" cy="12" r="3" />
|
class="lucide lucide-github"
|
||||||
</svg>
|
>
|
||||||
LIVE
|
<path
|
||||||
</a>
|
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"
|
||||||
{% endif %}
|
/>
|
||||||
{% if project.download_url %}
|
<path d="M9 18c-4.51 2-5-2-7-2" />
|
||||||
<a href="{{ project.download_url }}" target="_blank" rel="noopener noreferrer"
|
</svg>
|
||||||
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">
|
CODE
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
</a>
|
||||||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
{% endif %} {% if project.visit_url %}
|
||||||
class="lucide lucide-cloud-download">
|
<a
|
||||||
<path d="M12 13v8l-4-4" />
|
href="{{ project.visit_url }}"
|
||||||
<path d="m12 21 4-4" />
|
target="_blank"
|
||||||
<path d="M4.393 15.269A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.436 8.284" />
|
rel="noopener noreferrer"
|
||||||
</svg>
|
class="flex items-center justify-center w-full gap-1 p-2 text-center glass-effect glossy-effect bottom gloss-highlight rounded-2xl bg-yellow-400 hover:bg-yellow-500 text-black"
|
||||||
DOWNLOAD
|
>
|
||||||
</a>
|
<svg
|
||||||
{% endif %}
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
</div>
|
width="24"
|
||||||
{% if project.thumbnails|length > 0 %}
|
height="24"
|
||||||
<div class="w-full m-2 md:hidden">
|
viewBox="0 0 24 24"
|
||||||
{% set carousel_id = "carousel-mobile-" ~ project.id %}
|
fill="none"
|
||||||
{{ image_carousel::image_carousel(id=carousel_id, thumbnails=project.thumbnails) }}
|
stroke="currentColor"
|
||||||
</div>
|
stroke-width="2"
|
||||||
{% endif %}
|
stroke-linecap="round"
|
||||||
{% if project.thumbnails|length == 0 %}
|
stroke-linejoin="round"
|
||||||
<div class="w-full m-2 md:hidden">
|
class="lucide lucide-eye"
|
||||||
<div
|
>
|
||||||
class="bg-gradient-to-r from-violet-600 to-indigo-600 shadow-lg w-full max-w-full md:max-w-[50hw] h-[40rem] flex items-center justify-center">
|
<path
|
||||||
{% if project.category == "Desktop" %}
|
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"
|
||||||
<svg title="desktop" xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 24 24"
|
/>
|
||||||
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
<circle cx="12" cy="12" r="3" />
|
||||||
class="lucide lucide-app-window">
|
</svg>
|
||||||
<rect x="2" y="4" width="20" height="16" rx="2" />
|
LIVE
|
||||||
<path d="M10 4v4" />
|
</a>
|
||||||
<path d="M2 8h20" />
|
{% endif %} {% if project.download_url %}
|
||||||
<path d="M6 4v4" />
|
<a
|
||||||
</svg>
|
href="{{ project.download_url }}"
|
||||||
{% endif %}
|
target="_blank"
|
||||||
{% if project.category == "Mobile" %}
|
rel="noopener noreferrer"
|
||||||
<svg title="mobile" xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 24 24"
|
class="flex items-center justify-center w-full gap-1 p-2 text-center glass-effect glossy-effect bottom gloss-highlight rounded-2xl bg-yellow-400 hover:bg-yellow-500 text-black"
|
||||||
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
>
|
||||||
class="lucide lucide-smartphone">
|
<svg
|
||||||
<rect width="14" height="20" x="5" y="2" rx="2" ry="2" />
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
<path d="M12 18h.01" />
|
width="24"
|
||||||
</svg>
|
height="24"
|
||||||
{%endif%}
|
viewBox="0 0 24 24"
|
||||||
{% if project.category == "Web" %}
|
fill="none"
|
||||||
<svg title="web" xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 24 24"
|
stroke="currentColor"
|
||||||
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
stroke-width="2"
|
||||||
class="lucide lucide-globe">
|
stroke-linecap="round"
|
||||||
<circle cx="12" cy="12" r="10" />
|
stroke-linejoin="round"
|
||||||
<path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" />
|
class="lucide lucide-cloud-download"
|
||||||
<path d="M2 12h20" />
|
>
|
||||||
</svg>
|
<path d="M12 13v8l-4-4" />
|
||||||
{%endif%}
|
<path d="m12 21 4-4" />
|
||||||
{% if project.category == "Api" %}
|
<path
|
||||||
<svg title="API" xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 24 24"
|
d="M4.393 15.269A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.436 8.284"
|
||||||
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
/>
|
||||||
class="lucide lucide-monitor-cog">
|
</svg>
|
||||||
<path d="M12 17v4" />
|
DOWNLOAD
|
||||||
<path d="m15.2 4.9-.9-.4" />
|
</a>
|
||||||
<path d="m15.2 7.1-.9.4" />
|
{% endif %}
|
||||||
<path d="m16.9 3.2-.4-.9" />
|
|
||||||
<path d="m16.9 8.8-.4.9" />
|
|
||||||
<path d="m19.5 2.3-.4.9" />
|
|
||||||
<path d="m19.5 9.7-.4-.9" />
|
|
||||||
<path d="m21.7 4.5-.9.4" />
|
|
||||||
<path d="m21.7 7.5-.9-.4" />
|
|
||||||
<path d="M22 13v2a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7" />
|
|
||||||
<path d="M8 21h8" />
|
|
||||||
<circle cx="18" cy="6" r="3" />
|
|
||||||
</svg>
|
|
||||||
{%endif%}
|
|
||||||
{% if project.category == "Game" %}
|
|
||||||
<svg title="game" xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 24 24"
|
|
||||||
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
|
||||||
class="lucide lucide-gamepad-2">
|
|
||||||
<line x1="6" x2="10" y1="11" y2="11" />
|
|
||||||
<line x1="8" x2="8" y1="9" y2="13" />
|
|
||||||
<line x1="15" x2="15.01" y1="12" y2="12" />
|
|
||||||
<line x1="18" x2="18.01" y1="10" y2="10" />
|
|
||||||
<path
|
|
||||||
d="M17.32 5H6.68a4 4 0 0 0-3.978 3.59c-.006.052-.01.101-.017.152C2.604 9.416 2 14.456 2 16a3 3 0 0 0 3 3c1 0 1.5-.5 2-1l1.414-1.414A2 2 0 0 1 9.828 16h4.344a2 2 0 0 1 1.414.586L17 18c.5.5 1 1 2 1a3 3 0 0 0 3-3c0-1.545-.604-6.584-.685-7.258-.007-.05-.011-.1-.017-.151A4 4 0 0 0 17.32 5z" />
|
|
||||||
</svg>
|
|
||||||
{%endif%}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
</div>
|
||||||
{% if project.thumbnails|length > 0 %}
|
{% if project.thumbnails|length > 0 %}
|
||||||
<div class="hidden m-2 md:flex md:w-1/2">
|
<div class="w-full m-2 md:hidden">
|
||||||
{% set carousel_id = "carousel-desktop-" ~ project.id %}
|
{% set carousel_id = "carousel-mobile-" ~ project.id %} {{
|
||||||
{{ image_carousel::image_carousel(id=carousel_id, thumbnails=project.thumbnails) }}
|
image_carousel::image_carousel(id=carousel_id,
|
||||||
|
thumbnails=project.thumbnails) }}
|
||||||
|
</div>
|
||||||
|
{% endif %} {% if project.thumbnails|length == 0 %}
|
||||||
|
<div class="w-full m-2 md:hidden">
|
||||||
|
<div
|
||||||
|
class="bg-gradient-to-r from-violet-600 to-indigo-600 shadow-lg w-full max-w-full md:max-w-[50hw] h-[40rem] flex items-center justify-center glass-effect glossy-effect bottom gloss-highlight"
|
||||||
|
>
|
||||||
|
{% if project.category == "Desktop" %}
|
||||||
|
<svg
|
||||||
|
title="desktop"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="256"
|
||||||
|
height="256"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
class="lucide lucide-app-window"
|
||||||
|
>
|
||||||
|
<rect x="2" y="4" width="20" height="16" rx="2" />
|
||||||
|
<path d="M10 4v4" />
|
||||||
|
<path d="M2 8h20" />
|
||||||
|
<path d="M6 4v4" />
|
||||||
|
</svg>
|
||||||
|
{% endif %} {% if project.category == "Mobile" %}
|
||||||
|
<svg
|
||||||
|
title="mobile"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="256"
|
||||||
|
height="256"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
class="lucide lucide-smartphone"
|
||||||
|
>
|
||||||
|
<rect width="14" height="20" x="5" y="2" rx="2" ry="2" />
|
||||||
|
<path d="M12 18h.01" />
|
||||||
|
</svg>
|
||||||
|
{%endif%} {% if project.category == "Web" %}
|
||||||
|
<svg
|
||||||
|
title="web"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="256"
|
||||||
|
height="256"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
class="lucide lucide-globe"
|
||||||
|
>
|
||||||
|
<circle cx="12" cy="12" r="10" />
|
||||||
|
<path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" />
|
||||||
|
<path d="M2 12h20" />
|
||||||
|
</svg>
|
||||||
|
{%endif%} {% if project.category == "Api" %}
|
||||||
|
<svg
|
||||||
|
title="API"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="256"
|
||||||
|
height="256"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
class="lucide lucide-monitor-cog"
|
||||||
|
>
|
||||||
|
<path d="M12 17v4" />
|
||||||
|
<path d="m15.2 4.9-.9-.4" />
|
||||||
|
<path d="m15.2 7.1-.9.4" />
|
||||||
|
<path d="m16.9 3.2-.4-.9" />
|
||||||
|
<path d="m16.9 8.8-.4.9" />
|
||||||
|
<path d="m19.5 2.3-.4.9" />
|
||||||
|
<path d="m19.5 9.7-.4-.9" />
|
||||||
|
<path d="m21.7 4.5-.9.4" />
|
||||||
|
<path d="m21.7 7.5-.9-.4" />
|
||||||
|
<path d="M22 13v2a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7" />
|
||||||
|
<path d="M8 21h8" />
|
||||||
|
<circle cx="18" cy="6" r="3" />
|
||||||
|
</svg>
|
||||||
|
{%endif%} {% if project.category == "Game" %}
|
||||||
|
<svg
|
||||||
|
title="game"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="256"
|
||||||
|
height="256"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
class="lucide lucide-gamepad-2"
|
||||||
|
>
|
||||||
|
<line x1="6" x2="10" y1="11" y2="11" />
|
||||||
|
<line x1="8" x2="8" y1="9" y2="13" />
|
||||||
|
<line x1="15" x2="15.01" y1="12" y2="12" />
|
||||||
|
<line x1="18" x2="18.01" y1="10" y2="10" />
|
||||||
|
<path
|
||||||
|
d="M17.32 5H6.68a4 4 0 0 0-3.978 3.59c-.006.052-.01.101-.017.152C2.604 9.416 2 14.456 2 16a3 3 0 0 0 3 3c1 0 1.5-.5 2-1l1.414-1.414A2 2 0 0 1 9.828 16h4.344a2 2 0 0 1 1.414.586L17 18c.5.5 1 1 2 1a3 3 0 0 0 3-3c0-1.545-.604-6.584-.685-7.258-.007-.05-.011-.1-.017-.151A4 4 0 0 0 17.32 5z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
{%endif%}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% if project.thumbnails|length == 0 %}
|
</div>
|
||||||
<div class="hidden m-2 md:flex md:w-1/2">
|
{% if project.thumbnails|length > 0 %}
|
||||||
<div
|
<div class="hidden m-2 md:flex md:w-1/2">
|
||||||
class="bg-gradient-to-r from-violet-600 to-indigo-600 shadow-lg w-full max-w-full md:max-w-[50hw] h-[40rem] flex items-center justify-center">
|
{% set carousel_id = "carousel-desktop-" ~ project.id %} {{
|
||||||
{% if project.category == "Desktop" %}
|
image_carousel::image_carousel(id=carousel_id,
|
||||||
<svg title="desktop" xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 24 24"
|
thumbnails=project.thumbnails) }}
|
||||||
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
</div>
|
||||||
class="lucide lucide-app-window">
|
{% endif %} {% if project.thumbnails|length == 0 %}
|
||||||
<rect x="2" y="4" width="20" height="16" rx="2" />
|
<div class="hidden m-2 md:flex md:w-1/2">
|
||||||
<path d="M10 4v4" />
|
<div
|
||||||
<path d="M2 8h20" />
|
class="bg-gradient-to-r from-violet-600 to-indigo-600 shadow-lg w-full max-w-full md:max-w-[50hw] h-[40rem] flex items-center justify-center glass-effect glossy-effect bottom gloss-highlight"
|
||||||
<path d="M6 4v4" />
|
>
|
||||||
</svg>
|
{% if project.category == "Desktop" %}
|
||||||
{% endif %}
|
<svg
|
||||||
{% if project.category == "Mobile" %}
|
title="desktop"
|
||||||
<svg title="mobile" xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 24 24"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
width="256"
|
||||||
class="lucide lucide-smartphone">
|
height="256"
|
||||||
<rect width="14" height="20" x="5" y="2" rx="2" ry="2" />
|
viewBox="0 0 24 24"
|
||||||
<path d="M12 18h.01" />
|
fill="none"
|
||||||
</svg>
|
stroke="currentColor"
|
||||||
{%endif%}
|
stroke-width="2"
|
||||||
{% if project.category == "Web" %}
|
stroke-linecap="round"
|
||||||
<svg title="web" xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 24 24" fill="none"
|
stroke-linejoin="round"
|
||||||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
class="lucide lucide-app-window"
|
||||||
class="lucide lucide-globe">
|
>
|
||||||
<circle cx="12" cy="12" r="10" />
|
<rect x="2" y="4" width="20" height="16" rx="2" />
|
||||||
<path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" />
|
<path d="M10 4v4" />
|
||||||
<path d="M2 12h20" />
|
<path d="M2 8h20" />
|
||||||
</svg>
|
<path d="M6 4v4" />
|
||||||
{%endif%}
|
</svg>
|
||||||
{% if project.category == "Api" %}
|
{% endif %} {% if project.category == "Mobile" %}
|
||||||
<svg title="API" xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 24 24" fill="none"
|
<svg
|
||||||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
title="mobile"
|
||||||
class="lucide lucide-monitor-cog">
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
<path d="M12 17v4" />
|
width="256"
|
||||||
<path d="m15.2 4.9-.9-.4" />
|
height="256"
|
||||||
<path d="m15.2 7.1-.9.4" />
|
viewBox="0 0 24 24"
|
||||||
<path d="m16.9 3.2-.4-.9" />
|
fill="none"
|
||||||
<path d="m16.9 8.8-.4.9" />
|
stroke="currentColor"
|
||||||
<path d="m19.5 2.3-.4.9" />
|
stroke-width="2"
|
||||||
<path d="m19.5 9.7-.4-.9" />
|
stroke-linecap="round"
|
||||||
<path d="m21.7 4.5-.9.4" />
|
stroke-linejoin="round"
|
||||||
<path d="m21.7 7.5-.9-.4" />
|
class="lucide lucide-smartphone"
|
||||||
<path d="M22 13v2a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7" />
|
>
|
||||||
<path d="M8 21h8" />
|
<rect width="14" height="20" x="5" y="2" rx="2" ry="2" />
|
||||||
<circle cx="18" cy="6" r="3" />
|
<path d="M12 18h.01" />
|
||||||
</svg>
|
</svg>
|
||||||
{%endif%}
|
{%endif%} {% if project.category == "Web" %}
|
||||||
{% if project.category == "Game" %}
|
<svg
|
||||||
<svg title="game" xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 24 24"
|
title="web"
|
||||||
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
class="lucide lucide-gamepad-2">
|
width="256"
|
||||||
<line x1="6" x2="10" y1="11" y2="11" />
|
height="256"
|
||||||
<line x1="8" x2="8" y1="9" y2="13" />
|
viewBox="0 0 24 24"
|
||||||
<line x1="15" x2="15.01" y1="12" y2="12" />
|
fill="none"
|
||||||
<line x1="18" x2="18.01" y1="10" y2="10" />
|
stroke="currentColor"
|
||||||
<path
|
stroke-width="2"
|
||||||
d="M17.32 5H6.68a4 4 0 0 0-3.978 3.59c-.006.052-.01.101-.017.152C2.604 9.416 2 14.456 2 16a3 3 0 0 0 3 3c1 0 1.5-.5 2-1l1.414-1.414A2 2 0 0 1 9.828 16h4.344a2 2 0 0 1 1.414.586L17 18c.5.5 1 1 2 1a3 3 0 0 0 3-3c0-1.545-.604-6.584-.685-7.258-.007-.05-.011-.1-.017-.151A4 4 0 0 0 17.32 5z" />
|
stroke-linecap="round"
|
||||||
</svg>
|
stroke-linejoin="round"
|
||||||
{%endif%}
|
class="lucide lucide-globe"
|
||||||
</div>
|
>
|
||||||
|
<circle cx="12" cy="12" r="10" />
|
||||||
|
<path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" />
|
||||||
|
<path d="M2 12h20" />
|
||||||
|
</svg>
|
||||||
|
{%endif%} {% if project.category == "Api" %}
|
||||||
|
<svg
|
||||||
|
title="API"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="256"
|
||||||
|
height="256"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
class="lucide lucide-monitor-cog"
|
||||||
|
>
|
||||||
|
<path d="M12 17v4" />
|
||||||
|
<path d="m15.2 4.9-.9-.4" />
|
||||||
|
<path d="m15.2 7.1-.9.4" />
|
||||||
|
<path d="m16.9 3.2-.4-.9" />
|
||||||
|
<path d="m16.9 8.8-.4.9" />
|
||||||
|
<path d="m19.5 2.3-.4.9" />
|
||||||
|
<path d="m19.5 9.7-.4-.9" />
|
||||||
|
<path d="m21.7 4.5-.9.4" />
|
||||||
|
<path d="m21.7 7.5-.9-.4" />
|
||||||
|
<path d="M22 13v2a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7" />
|
||||||
|
<path d="M8 21h8" />
|
||||||
|
<circle cx="18" cy="6" r="3" />
|
||||||
|
</svg>
|
||||||
|
{%endif%} {% if project.category == "Game" %}
|
||||||
|
<svg
|
||||||
|
title="game"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="256"
|
||||||
|
height="256"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
class="lucide lucide-gamepad-2"
|
||||||
|
>
|
||||||
|
<line x1="6" x2="10" y1="11" y2="11" />
|
||||||
|
<line x1="8" x2="8" y1="9" y2="13" />
|
||||||
|
<line x1="15" x2="15.01" y1="12" y2="12" />
|
||||||
|
<line x1="18" x2="18.01" y1="10" y2="10" />
|
||||||
|
<path
|
||||||
|
d="M17.32 5H6.68a4 4 0 0 0-3.978 3.59c-.006.052-.01.101-.017.152C2.604 9.416 2 14.456 2 16a3 3 0 0 0 3 3c1 0 1.5-.5 2-1l1.414-1.414A2 2 0 0 1 9.828 16h4.344a2 2 0 0 1 1.414.586L17 18c.5.5 1 1 2 1a3 3 0 0 0 3-3c0-1.545-.604-6.584-.685-7.258-.007-.05-.011-.1-.017-.151A4 4 0 0 0 17.32 5z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
{%endif%}
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
</div>
|
||||||
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
{% endmacro project_item %}
|
{% endmacro project_item %}
|
||||||
@@ -4,12 +4,12 @@
|
|||||||
"type": "module",
|
"type": "module",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@types/bun": "latest",
|
"@types/bun": "latest",
|
||||||
"tailwindcss-motion": "^0.4.1-beta"
|
"tailwindcss-motion": "^1.1.1"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"typescript": "^5.0.0"
|
"typescript": "^5.0.0"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@tailwindcss/typography": "^0.5.15"
|
"@tailwindcss/typography": "^0.5.16"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -6,7 +6,25 @@ module.exports = {
|
|||||||
'./assets/static/js/*.js',
|
'./assets/static/js/*.js',
|
||||||
],
|
],
|
||||||
theme: {
|
theme: {
|
||||||
extend: {},
|
extend: {
|
||||||
|
colors: {
|
||||||
|
'aero-sky-light': '#74d2ff',
|
||||||
|
'aero-sky-dark': '#008cff',
|
||||||
|
'aero-grass-light': '#a1ff8b',
|
||||||
|
'aero-grass-dark': '#38c172',
|
||||||
|
'aero-glass': 'rgba(255, 255, 255, 0.3)',
|
||||||
|
'aero-border': 'rgba(255, 255, 255, 0.5)',
|
||||||
|
},
|
||||||
|
backgroundImage: {
|
||||||
|
'aero-gradient': 'linear-gradient(to bottom, #74d2ff, #008cff)',
|
||||||
|
'gloss-gradient': 'linear-gradient(to bottom, rgba(255,255,255,0.6), rgba(255,255,255,0.1))',
|
||||||
|
},
|
||||||
|
borderRadius: {
|
||||||
|
'aero': '12px',
|
||||||
|
},
|
||||||
|
boxShadow: {
|
||||||
|
'aero': '0 4px 30px rgba(0, 0, 0, 0.1)',
|
||||||
|
},},
|
||||||
},
|
},
|
||||||
plugins: [require('@tailwindcss/typography'), require('tailwindcss-motion')],
|
plugins: [require('@tailwindcss/typography'), require('tailwindcss-motion')],
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user