michalvankodev/michalvankodev-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Responsive design for index page

Browse Source
This commit is contained in:
Michal Vanko 2024-09-12 15:00:20 +02:00
parent 4305da1d0c
commit 255536c681
6 changed files with 255 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

133
axum_server/styles/output.css
View File

@ -1,5 +1,5 @@
/* /*
! tailwindcss v3.4.10 | MIT License | https://tailwindcss.com ! tailwindcss v3.4.11 | MIT License | https://tailwindcss.com
*/ */
/* /*
@ -554,6 +554,10 @@ video {
--tw-contain-style: ; --tw-contain-style: ;
} }
.col-span-2 {
grid-column: span 2 / span 2;
}
.row-span-3 { .row-span-3 {
grid-row: span 3 / span 3; grid-row: span 3 / span 3;
} }
@ -629,6 +633,11 @@ video {
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
.my-auto {
margin-top: auto;
margin-bottom: auto;
}
.mb-1 { .mb-1 {
margin-bottom: 0.25rem; margin-bottom: 0.25rem;
} }
@ -721,6 +730,10 @@ video {
width: 100%; width: 100%;
} }
.max-w-maxindex {
max-width: 100rem;
}
.max-w-read { .max-w-read {
max-width: 64rem; max-width: 64rem;
} }
@ -773,6 +786,24 @@ video {
gap: 1rem; gap: 1rem;
} }
.gap-8 {
gap: 2rem;
}
.gap-x-64 {
-moz-column-gap: 16rem;
column-gap: 16rem;
}
.gap-y-8 {
row-gap: 2rem;
}
.gap-x-32 {
-moz-column-gap: 8rem;
column-gap: 8rem;
}
.overflow-hidden { .overflow-hidden {
overflow: hidden; overflow: hidden;
} }
@ -982,6 +1013,11 @@ video {
color: rgb(80 7 36 / var(--tw-text-opacity)); color: rgb(80 7 36 / var(--tw-text-opacity));
} }
.text-slate-800 {
--tw-text-opacity: 1;
color: rgb(30 41 59 / var(--tw-text-opacity));
}
.no-underline { .no-underline {
text-decoration-line: none; text-decoration-line: none;
} }
@ -1456,24 +1492,119 @@ a {
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.md\:grid {
display: grid;
}
.md\:h-16 {
height: 4rem;
}
.md\:w-16 {
width: 4rem;
}
.md\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.md\:items-stretch {
align-items: stretch;
}
.md\:justify-stretch {
justify-content: stretch;
}
.md\:text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
.md\:text-3xl {
font-size: 1.875rem;
line-height: 2.25rem;
}
.md\:text-4xl { .md\:text-4xl {
font-size: 2.25rem; font-size: 2.25rem;
line-height: 2.5rem; line-height: 2.5rem;
} }
.md\:text-base {
font-size: 1rem;
line-height: 1.5rem;
}
.md\:text-lg { .md\:text-lg {
font-size: 1.125rem; font-size: 1.125rem;
line-height: 1.75rem; line-height: 1.75rem;
} }
.md\:text-xl {
font-size: 1.25rem;
line-height: 1.75rem;
}
} }
@media (min-width: 1024px) { @media (min-width: 1024px) {
.lg\:col-span-2 {
grid-column: span 2 / span 2;
}
.lg\:row-start-2 {
grid-row-start: 2;
}
.lg\:mt-20 { .lg\:mt-20 {
margin-top: 5rem; margin-top: 5rem;
} }
.lg\:grid {
display: grid;
}
.lg\:hidden {
display: none;
}
.lg\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.lg\:gap-x-32 {
-moz-column-gap: 8rem;
column-gap: 8rem;
}
.lg\:gap-y-8 {
row-gap: 2rem;
}
.lg\:text-6xl { .lg\:text-6xl {
font-size: 3.75rem; font-size: 3.75rem;
line-height: 1; line-height: 1;
} }
} }
@media (min-width: 1280px) {
.xl\:col-auto {
grid-column: auto;
}
.xl\:row-span-2 {
grid-row: span 2 / span 2;
}
.xl\:row-start-auto {
grid-row-start: auto;
}
.xl\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.xl\:grid-cols-\[1fr_2fr\] {
grid-template-columns: 1fr 2fr;
}
}

4
axum_server/tailwind.config.js
View File

@ -1,17 +1,19 @@
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
module.exports = { module.exports = {
content: ["./templates/**/*.html"], content: ["./templates/**/**.html"],
theme: { theme: {
extend: { extend: {
spacing: { spacing: {
note: "60rem", note: "60rem",
read: "64rem", read: "64rem",
image: "70rem", image: "70rem",
maxindex: "100rem",
}, },
width: { width: {
note: "60rem", note: "60rem",
read: "64rem", read: "64rem",
image: "70rem", image: "70rem",
maxindex: "100rem",
}, },
}, },
}, },

4
axum_server/templates/components/blog_post_preview.html
View File

@ -8,9 +8,9 @@
{% endmatch %} {% endmatch %}
</aside> </aside>
<header> <header>
<h3 class="text-lg font-bold mb-1">{{post.metadata.title}}</h3> <h3 class="text-lg font-bold mb-1 md:text-3xl">{{post.metadata.title}}</h3>
</header> </header>
<section class="text-base leading-5 text-gray-800">{{post.body|description_filter|safe}}</section> <section class="text-base leading-5 text-gray-800 md:text-xl">{{post.body|description_filter|safe}}</section>
<footer class="text-sm"> <footer class="text-sm">
<ul class="inline-block"> <ul class="inline-block">
{% for tag in post.metadata.tags %} {% for tag in post.metadata.tags %}

10
axum_server/templates/components/project_preview_card.html
View File

@ -1,6 +1,6 @@
<article class="border rounded-md bg-white m-4 p-4"> <article class="border rounded-md bg-white m-4 p-4">
<header class="px-4 mb-3"> <header class="px-4 mb-3">
<h2 class="text-xl font-semibold text-blue-900"> <h2 class="text-xl font-semibold text-blue-900 md:text-2xl">
{% match project.metadata.link %} {% match project.metadata.link %}
{% when Some with (href) %} {% when Some with (href) %}
<a href="{{href}}" class="text-blue-900 no-underline"> <a href="{{href}}" class="text-blue-900 no-underline">
@ -10,9 +10,9 @@
{{project.metadata.title}} {{project.metadata.title}}
{% endmatch %} {% endmatch %}
</h2> </h2>
<p class="text-gray-800 text-lg my-2"> <section class="description text-slate-800 my-2 md:text-xl">
{{project.metadata.description|safe}} {{project.metadata.description|safe}}
</p> </section>
</header> </header>
<!-- <hr class="border-blue-950 my-5"> --> <!-- <hr class="border-blue-950 my-5"> -->
@ -33,8 +33,8 @@
{% endmatch %} {% endmatch %}
<footer class="text-sm px-4"> <footer class="text-sm px-4 md:text-base">
<h3 class="text-xl font-semibold text-blue-900 my-2"> <h3 class="text-xl font-semibold text-blue-900 my-2 md:text-2xl">
{{crate::projects::project_model::translate_classification(project.metadata.classification)}} {{crate::projects::project_model::translate_classification(project.metadata.classification)}}
</h3> </h3>
<ul class="inline-block"> <ul class="inline-block">

6
axum_server/templates/components/talent_card.html
View File

@ -2,15 +2,15 @@
<section class="flex border rounded bg-white m-4 p-3"> <section class="flex border rounded bg-white m-4 p-3">
<aside class="flex justify-center items-center pr-3"> <aside class="flex justify-center items-center pr-3">
<svg aria-hidden="true" class="h-12 w-12 fill-blue-950"> <svg aria-hidden="true" class="fill-blue-950 h-12 w-12 md:h-16 md:w-16">
<use xlink:href="/svg/icons-sprite.svg#{{svg}}" /> <use xlink:href="/svg/icons-sprite.svg#{{svg}}" />
</svg> </svg>
</aside> </aside>
<section> <section>
<header> <header>
<h3 class="text-lg font-medium mb-1">{{heading}}</h3> <h3 class="text-lg font-medium mb-1 md:text-2xl">{{heading}}</h3>
</header> </header>
<p class="text-sm leading-5 text-gray-800">{{description|safe}}</p> <p class="text-sm leading-5 text-gray-800 md:text-lg">{{description|safe}}</p>
</section> </section>
</section> </section>

216
axum_server/templates/index.html
View File

@ -5,131 +5,135 @@
{% block title %}Introduction{% endblock %} {% block title %}Introduction{% endblock %}
{% block content %} {% block content %}
<header class="index-header hidden"> <section class="index-container lg:grid lg:grid-cols-2 xl:grid-cols-[1fr_2fr] lg:gap-y-8 lg:gap-x-32 max-w-maxindex mx-auto">
<figure class="profile-pic"> <section id="about-me">
<picture> <header class="index-header hidden">
<img <figure class="profile-pic">
alt="Portrait" <picture>
{# TODO generate `srcset` for optimal image #} <img
{# TODO Take a new photo #} alt="Portrait"
src="/images/profile-portugal-landscape.jpg" {# TODO generate `srcset` for optimal image #}
/> {# TODO Take a new photo #}
</picture> src="/images/profile-portugal-landscape.jpg"
</figure> />
</picture>
</figure>
<p class="motto"> <p class="motto">
<cite>“Let your ambition carry you.”</cite> <cite>“Let your ambition carry you.”</cite>
<span class="cite-owner">- La Flame</span> <span class="cite-owner">- La Flame</span>
</p> </p>
</header> </header>
<h2 class="text-blue-950 font-semibold text-2xl m-5">About me</h2> <h2 class="text-blue-950 font-semibold text-2xl m-5 md:text-4xl">About me</h2>
<p class="mx-5"> <p class="mx-5 md:text-xl">
Welcome to my personal website. My name is Welcome to my personal website. My name is
<strong>Michal&nbsp;Vanko</strong> <strong>Michal&nbsp;Vanko</strong>
and I'm a and I'm a
<em> <a href="https://en.wikipedia.org/wiki/Programmer">programmer</a> </em> <em> <a href="https://en.wikipedia.org/wiki/Programmer">programmer</a> </em>
. I am developing software for more than half of my life and <strong>I love it!</strong> Sometimes I stream working on my side projects and building a <a href="https://discord.gg/2cGg7kwZEh">community of like minded people</a>. Here you can find blogs of my thoughts and journeys, as well as links to my socials where you can see other content.</p> . I am developing software for more than half of my life and <strong>I love it!</strong> Sometimes I stream working on my side projects and building a <a href="https://discord.gg/2cGg7kwZEh">community of like minded people</a>. Here you can find blogs of my thoughts and journeys, as well as links to my socials where you can see other content.</p>
<section id="talent-cards"> <section id="talent-cards">
{% call tc::talent_card("code", "Web development", "Extensive expertise in creating performant, live web applications and websites") %} {% call tc::talent_card("code", "Web development", "Extensive expertise in creating performant, live web applications and websites") %}
{% call tc::talent_card("gamepad", "Game development", "Extensive expertise in creating performant, live web applications and websites") %} {% call tc::talent_card("gamepad", "Game development", "Extensive expertise in creating performant, live web applications and websites") %}
{% call tc::talent_card("person-chalkboard", "Mentoring & Consulting", "I offer consulting sessions to assist you in developing <strong>higher-quality software</strong> and share insights from crafting robust, professional web applications. <a href=\"TODO callendly\">Schedule a session with me</a> and elevate your projects together.") %} {% call tc::talent_card("person-chalkboard", "Mentoring & Consulting", "I offer consulting sessions to assist you in developing <strong>higher-quality software</strong> and share insights from crafting robust, professional web applications. <a href=\"TODO callendly\">Schedule a session with me</a> and elevate your projects together.") %}
</section </section>
</section>
<section id="blog" class="lg:col-span-2 lg:row-start-2 xl:col-auto xl:row-start-auto xl:row-span-2">
<h2 class="text-blue-950 font-semibold text-2xl md:text-4xl m-5">Blog</h2>
<section id="blog-tags">
<ul class="mx-5">
{% for tag in blog_tags %}
<li class="inline-block mx-0.5 p-0.5 md:text-xl">
<a href="/blog/tags/{{tag}}" class="text-pink-950">#{{tag|capitalize}}</a>
</li>
{% endfor %}
</ul>
</section>
<hr class="border-blue-950 m-5">
<section id="blog">
<h2 class="text-blue-950 font-semibold text-2xl m-5">Blog</h2>
<section id="blog-tags">
<ul class="mx-5"> <ul class="mx-5">
{% for tag in blog_tags %} {% for post in featured_blog_posts %}
<li class="inline-block mx-0.5 p-0.5"> <li>
<a href="/blog/tags/{{tag}}" class="text-pink-950">#{{tag|capitalize}}</a> {% include "components/blog_post_preview.html" %}
<hr class="border-blue-950 my-5">
</li> </li>
{% endfor %} {% endfor %}
</ul> </ul>
</section> </section>
<hr class="border-blue-950 m-5">
<ul class="mx-5"> <section id="socials">
{% for post in featured_blog_posts %} <h2 class="text-blue-950 font-semibold text-2xl m-5 md:text-4xl">Socials</h2>
<li> {% call sc::social_card_start("twitch", "I stream (almost) regularly on <em>twitch.tv</em>") %}
{% include "components/blog_post_preview.html" %} <!-- <script src= "https://player.twitch.tv/js/embed/v1.js"></script> -->
<hr class="border-blue-950 my-5"> <!-- <div id="twitch-player" class="h-64 aspect-video rounded overflow-hidden"></div> -->
</li> <!-- <script type="text/javascript"> -->
{% endfor %} <!-- var options = { -->
</ul> <!-- width: "100%", -->
</section> <!-- height: "100%", -->
<!-- channel: "michalvankodev", -->
<!-- parent: ["localhost"] -->
<!-- }; -->
<!-- var player = new Twitch.Player("twitch-player", options); -->
<!-- player.setVolume(0.5); -->
</script>
{% call sc::social_card_end() %}
<section id="socials"> {% call sc::social_card_start("tiktok", "Highlights can be found on <em>TikTok</em>") %}
<h2 class="text-blue-950 font-semibold text-2xl m-5">Socials</h2> <!-- STYLES needed to overwrite tiktok embed css -->
{% call sc::social_card_start("twitch", "I stream (almost) regularly on <em>twitch.tv</em>") %} <!-- <blockquote -->
<!-- <script src= "https://player.twitch.tv/js/embed/v1.js"></script> --> <!-- class="h-64 aspect-video overflow-hidden p-0 m-0 tiktok-embed bg-pink-200" -->
<!-- <div id="twitch-player" class="h-64 aspect-video rounded overflow-hidden"></div> --> <!-- cite="https://www.tiktok.com/@michalvankodev" -->
<!-- <script type="text/javascript"> --> <!-- data-unique-id="michalvankodev" -->
<!-- var options = { --> <!-- data-embed-from="embed_page" -->
<!-- width: "100%", --> <!-- data-embed-type="creator" -->
<!-- height: "100%", --> <!-- style="max-width:780px; min-width:288px; margin: 0; padding: 0; border-radius: 8px" -->
<!-- channel: "michalvankodev", --> <!-- > -->
<!-- parent: ["localhost"] --> <!-- <section> -->
<!-- }; --> <!-- <a target="_blank" href="https://www.tiktok.com/@michalvankodev?refer=creator_embed">@michalvankodev</a> -->
<!-- var player = new Twitch.Player("twitch-player", options); --> <!-- </section> -->
<!-- player.setVolume(0.5); --> <!-- </blockquote> -->
</script> <!-- <script async src="https://www.tiktok.com/embed.js"></script> -->
{% call sc::social_card_end() %} {% call sc::social_card_end() %}
{% call sc::social_card_start("tiktok", "Highlights can be found on <em>TikTok</em>") %} {% call sc::social_card_start("youtube", "Vlogs and highlights can be found on <em>YouTube</em>") %}
<!-- STYLES needed to overwrite tiktok embed css --> <!-- TODO create our own youtube widget which will populate this window on build -->
<!-- <blockquote --> <!-- <iframe -->
<!-- class="h-64 aspect-video overflow-hidden p-0 m-0 tiktok-embed bg-pink-200" --> <!-- class="h-64 aspect-video" -->
<!-- cite="https://www.tiktok.com/@michalvankodev" --> <!-- id="ytplayer" -->
<!-- data-unique-id="michalvankodev" --> <!-- type="text/html" -->
<!-- data-embed-from="embed_page" --> <!-- width="100%" -->
<!-- data-embed-type="creator" --> <!-- height="100%" -->
<!-- style="max-width:780px; min-width:288px; margin: 0; padding: 0; border-radius: 8px" --> <!-- src="https://www.youtube.com/embed/?listType=playlist&list=PLjUl8tFKyR8rCsckLn93PAwQg6tf0cyBl&enablejsapi=1&color=white" -->
<!-- > --> <!-- frameborder="0" -->
<!-- <section> --> <!-- allowfullscreen -->
<!-- <a target="_blank" href="https://www.tiktok.com/@michalvankodev?refer=creator_embed">@michalvankodev</a> --> <!-- ></iframe> -->
<!-- </section> --> {% call sc::social_card_end() %}
<!-- </blockquote> -->
<!-- <script async src="https://www.tiktok.com/embed.js"></script> -->
{% call sc::social_card_end() %}
{% call sc::social_card_start("youtube", "Vlogs and highlights can be found on <em>YouTube</em>") %}
<!-- TODO create our own youtube widget which will populate this window on build -->
<!-- <iframe -->
<!-- class="h-64 aspect-video" -->
<!-- id="ytplayer" -->
<!-- type="text/html" -->
<!-- width="100%" -->
<!-- height="100%" -->
<!-- src="https://www.youtube.com/embed/?listType=playlist&list=PLjUl8tFKyR8rCsckLn93PAwQg6tf0cyBl&enablejsapi=1&color=white" -->
<!-- frameborder="0" -->
<!-- allowfullscreen -->
<!-- ></iframe> -->
{% call sc::social_card_end() %}
{% call sc::social_card_start("instagram", "Photos and stories shared on <em>Instagram</em>") %} {% call sc::social_card_start("instagram", "Photos and stories shared on <em>Instagram</em>") %}
<!-- <blockquote class="instagram-media aspect-video h-64" data-instgrm-permalink="https://www.instagram.com/michalvankodev/" data-instgrm-version="12" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:540px; min-width:326px; padding:0; width:99.375%; height:256px; max-height:100%;"></blockquote><script async src="https://www.instagram.com/embed.js"></script> --> <!-- <blockquote class="instagram-media aspect-video h-64" data-instgrm-permalink="https://www.instagram.com/michalvankodev/" data-instgrm-version="12" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:540px; min-width:326px; padding:0; width:99.375%; height:256px; max-height:100%;"></blockquote><script async src="https://www.instagram.com/embed.js"></script> -->
{% call sc::social_card_end() %} {% call sc::social_card_end() %}
</section> </section>
<hr class="border-blue-950 m-5"> <hr class="border-blue-950 m-5 lg:hidden">
<section id="showcase"> <section id="showcase" class="col-span-2">
<h2 class="text-blue-950 font-semibold text-2xl m-5">Showcase</h2> <h2 class="text-blue-950 font-semibold text-2xl m-5 md:text-4xl">Showcase</h2>
<ul class="mx-5"> <ul class="mx-5 md:grid md:grid-cols-2 md:justify-stretch md:items-stretch xl:grid-cols-3">
{% for project in featured_projects %} {% for project in featured_projects %}
<li class="my-2"> <li class="my-2">
{% include "components/project_preview_card.html" %} {% include "components/project_preview_card.html" %}
</li> </li>
{% endfor %} {% endfor %}
</ul> </ul>
</section> </section>
</section> <!-- /.index-container -->
{% endblock %} {% endblock %}