add projects view and template
This commit is contained in:
@@ -13,7 +13,7 @@
|
||||
/>
|
||||
</head>
|
||||
|
||||
<body class="bg-gray-800">
|
||||
<body class="bg-gray-800 scroll-smooth">
|
||||
<div class="flex flex-col h-full min-h-screen text-white">
|
||||
{% include "website/components/navbar.html" %}
|
||||
<div
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
© Gabriel Kaszewski, 2024. All rights reserved.
|
||||
</p>
|
||||
<p>
|
||||
Made with <span class="text-red-500 fa-solid fa-heart"></span> in Poland
|
||||
Made with 💗 in Poland
|
||||
</p>
|
||||
<span class="flex-1"></span>
|
||||
<a href="/projects"> Projects </a>
|
||||
|
||||
@@ -123,51 +123,57 @@
|
||||
</div>
|
||||
<div class="w-full mt-8"></div>
|
||||
<div
|
||||
class="flex flex-col items-center justify-center gap-4 rounded md:w-fit max-w-[60ch] text-[1.25rem] leading-[1.8] text-left p-4 text-pretty"
|
||||
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>
|
||||
<section class="leading-relaxed text-white">
|
||||
<section class="prose text-white md:prose-lg lg:prose-xl">
|
||||
<p>
|
||||
Hi, my name is Gabriel Kaszewski, and I am a Bioinformatics student 🧬 and
|
||||
self-taught full-stack developer 💻.
|
||||
</p>
|
||||
<p>
|
||||
I started coding when I was 11 🚀. I love solving problems and writing
|
||||
software 👨💻.
|
||||
My journey with programming started when I was 11 🚀. I love solving problems and creating software that
|
||||
resolves them 👨💻.
|
||||
</p>
|
||||
<p>
|
||||
Currently, I am working as a Python Developer at digimonkeys.com 🐒. I am
|
||||
very passionate about Computer Science 💾.
|
||||
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 📚.
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
<h3 class="mt-4 mb-2 text-5xl font-bold tracking-tight">Skills 🛠️</h3>
|
||||
{% for skill in skills %} {{ chip::chip(text=skill.name) }} {%endfor%}
|
||||
<section class="flex flex-wrap justify-center w-1/2 gap-4"></section>
|
||||
<h3 class="mt-4 mb-2 text-5xl font-bold tracking-tight">Experience 📈</h3>
|
||||
{% for job in jobs %}
|
||||
<div class="flex flex-col gap-2 p-4 text-black bg-gray-100 rounded-lg">
|
||||
<h4 class="text-2xl">
|
||||
<span class="fas fa-user-circle"></span> {{ job.position }}
|
||||
</h4>
|
||||
<h5 class="text-xl font-light">
|
||||
<span class="fas fa-building"></span> {{ job.company }}
|
||||
</h5>
|
||||
{% if job.still_working %}
|
||||
<h6>
|
||||
<span class="fas fa-clock"></span> {{ job.start_date |
|
||||
date(format="%d-%m-%Y") }} - Present
|
||||
</h6>
|
||||
{% else %}
|
||||
<h6>
|
||||
<span class="fas fa-clock"></span> {{ job.start_date |
|
||||
date(format="%d-%m-%Y") }} - {{ job.end_date | date(format="%d-%m-%Y") }}
|
||||
</h6>
|
||||
{% endif %}
|
||||
<p class="font-bold"><span class="fas fa-microchip"></span> Technologies</p>
|
||||
{% for technology in job.technologies %} {{ chip::chip(text=technology.name)
|
||||
}} {% endfor %}
|
||||
<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>
|
||||
{% for skill in skills %} {{ chip::chip(text=skill.name) }} {%endfor%}
|
||||
</div>
|
||||
<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>
|
||||
{% 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">
|
||||
<h4 class="text-2xl">
|
||||
<span class="fas fa-user-circle"></span> {{ job.position }}
|
||||
</h4>
|
||||
<h5 class="text-xl font-light">
|
||||
<span class="fas fa-building"></span> {{ job.company }}
|
||||
</h5>
|
||||
{% if job.still_working %}
|
||||
<h6>
|
||||
<span class="fas fa-clock"></span> {{ job.start_date |
|
||||
date(format="%d-%m-%Y") }} - Present
|
||||
</h6>
|
||||
{% else %}
|
||||
<h6>
|
||||
<span class="fas fa-clock"></span> {{ job.start_date |
|
||||
date(format="%d-%m-%Y") }} - {{ job.end_date | date(format="%d-%m-%Y") }}
|
||||
</h6>
|
||||
{% endif %}
|
||||
<p class="font-bold"><span class="fas fa-microchip"></span> Technologies</p>
|
||||
<div class="flex flex-wrap items-center w-full gap-2">
|
||||
{% for technology in job.technologies %} {{ chip::chip(text=technology)
|
||||
}} {% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{%endfor%}
|
||||
</div>
|
||||
{%endfor%}
|
||||
<section class="flex flex-col flex-wrap justify-center gap-4 m-4"></section>
|
||||
{% endblock content %}
|
||||
|
||||
16
assets/views/website/macros/image_carousel.html
Normal file
16
assets/views/website/macros/image_carousel.html
Normal file
@@ -0,0 +1,16 @@
|
||||
{% macro image_carousel(id, thumbnails) %}
|
||||
<div id="{{ id }}" class="carousel relative shadow-lg w-full max-w-full md:max-w-[50hw] h-[40rem]">
|
||||
<div class="relative w-full h-full overflow-hidden carousel-inner">
|
||||
{% for thumbnail in thumbnails %}
|
||||
<div class="carousel-item absolute inset-0 w-full h-full {% if forloop.first %}{% else %} opacity-0 {% endif %} transition-opacity ease-in-out delay-250 duration-500">
|
||||
<img alt="slide" src="{{ thumbnail }}" class="object-cover w-full h-full">
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="absolute bottom-0 z-50 flex justify-center w-full gap-2 py-2">
|
||||
{% for thumbnail in thumbnails %}
|
||||
<button class="carousel-button" data-target="{{ forloop.counter0 }}">•</button>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endmacro image_carousel %}
|
||||
98
assets/views/website/macros/project_item.html
Normal file
98
assets/views/website/macros/project_item.html
Normal file
@@ -0,0 +1,98 @@
|
||||
{% import "website/macros/chip.html" as chip %}
|
||||
{% import "website/macros/image_carousel.html" as image_carousel %}
|
||||
{% macro project_item(project) %}
|
||||
<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 flex-col w-full gap-4 m-4 md:w-1/3">
|
||||
<div class="prose">
|
||||
<h1 class="text-white">{{ project.name }}</h1>
|
||||
<p class="text-white whitespace-pre-wrap">{{ project.short_description }}</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap justify-center gap-2 md:justify-start">
|
||||
{% for technology in project.technologies %}
|
||||
{{ chip::chip(text=technology) }}
|
||||
{% endfor %}
|
||||
</div>
|
||||
<a href="/projects/{{ project.name }}"
|
||||
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">
|
||||
{% if project.githubUrl %}
|
||||
<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">
|
||||
<span class="fa-brands fa-github"></span>
|
||||
CODE
|
||||
</a>
|
||||
{% endif %}
|
||||
{% if project.visitUrl %}
|
||||
<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">
|
||||
<span class="fas fa-eye"></span>
|
||||
LIVE
|
||||
</a>
|
||||
{% endif %}
|
||||
{% if project.downloadUrl %}
|
||||
<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">
|
||||
<span class="fas fa-cloud-download-alt"></span>
|
||||
DOWNLOAD
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if project.thumbnails|length > 0 %}
|
||||
<div class="w-full m-2 md:hidden">
|
||||
{% set carousel_id = "carousel-mobile-" ~ project.id %}
|
||||
{{ 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">
|
||||
{% 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>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if project.thumbnails|length > 0 %}
|
||||
<div class="hidden m-2 md:flex md:w-1/2">
|
||||
{% set carousel_id = "carousel-desktop-" ~ project.id %}
|
||||
{{ image_carousel::image_carousel(id=carousel_id, thumbnails=project.thumbnails) }}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if project.thumbnails|length == 0 %}
|
||||
<div class="hidden m-2 md:flex md:w-1/2">
|
||||
<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">
|
||||
{% 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>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endmacro project_item %}
|
||||
@@ -1,6 +1,10 @@
|
||||
{% import "website/macros/project_item.html" as project_item %}
|
||||
{% extends "website/base.html" %} {% block content %}
|
||||
<span class="m-8"></span>
|
||||
<div class="flex flex-col w-full gap-4 m-4">
|
||||
<h1 class="text-5xl font-bold text-center">My projects</h1>
|
||||
{% for project in projects %}
|
||||
{{ project_item::project_item(project=project) }}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endblock content %}
|
||||
|
||||
Reference in New Issue
Block a user