feat: add picture of me in about page

This commit is contained in:
Jozef Steinhübl 2024-08-01 21:44:20 +02:00
parent 0c7f7ff712
commit 2d79b5c152
No known key found for this signature in database
GPG key ID: E6BC90C91973B08F
3 changed files with 49 additions and 35 deletions

BIN
src/assets/me.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

View file

@ -21,6 +21,8 @@ import Container from "@components/atoms/Container.astro";
import Navbar from "@components/widgets/Navbar.astro"; import Navbar from "@components/widgets/Navbar.astro";
import TechIcon from "@components/widgets/TechIcon.astro"; import TechIcon from "@components/widgets/TechIcon.astro";
import Layout from "@layouts/Layout.astro"; import Layout from "@layouts/Layout.astro";
import { Image } from "astro:assets";
import me from "@assets/me.png";
import { SKILLS } from "~/config"; import { SKILLS } from "~/config";
--- ---
@ -45,20 +47,30 @@ import { SKILLS } from "~/config";
}} }}
> >
<Navbar /> <Navbar />
<h1 class="w-full py-32 text-center text-5xl font-extrabold text-white"> <h1
class="w-full py-20 lg:py-32 text-center text-5xl font-extrabold text-white"
>
About Me About Me
</h1> </h1>
<Container class="pb-4"> <Container class="pb-4">
<main class="text-2xl text-white"> <main class="text-2xl text-white">
<section> <section class="flex flex-col lg:flex-row items-center">
<Image
src={me}
alt="me"
width={250}
class="rounded-full mb-4 lg:mb-0 lg:mr-8 h-[250px] w-[250px]"
/>
<div>
<p class="mb-4"> <p class="mb-4">
Hey, my name is <span class="text-gold-500">Jozef Steinhübl</span> ("bl" Hey, my name is <span class="text-gold-500">Jozef Steinhübl</span> ("bl"
- not "bel", I'm not a bell), alias <span class="text-gold-500" - not "bel", I'm not a bell), alias <span class="text-gold-500"
>Hyro, xHyroM, or general_kubo >Hyro, xHyroM, or general_kubo
</span>. I am <span class="text-gold-500">15</span> years old developer </span>. I am <span class="text-gold-500">15</span> years old developer
with a passion for creating innovative solutions, and I am currently engaged with a passion for creating innovative solutions, and I am currently
in various projects. Most of my work is open-source and on <a engaged in various projects. Most of my work is open-source and on <a
class="text-gold-500" class="text-gold-500"
href="https://github.com/xHyroM">GitHub</a href="https://github.com/xHyroM">GitHub</a
>. You can also check <a class="text-gold-500" href="/projects" >. You can also check <a class="text-gold-500" href="/projects"
@ -75,12 +87,14 @@ import { SKILLS } from "~/config";
class="text-gold-500" class="text-gold-500"
href="https://discord.com/api/oauth2/authorize?client_id=720321585625694239&permissions=8&scope=applications.commands%20bot" href="https://discord.com/api/oauth2/authorize?client_id=720321585625694239&permissions=8&scope=applications.commands%20bot"
>Mr. Infinity</a >Mr. Infinity</a
>, <a class="text-gold-500" href="http://github.com/xHyroM/roles-bot" >, <a
>Roles Bot</a class="text-gold-500"
href="http://github.com/xHyroM/roles-bot">Roles Bot</a
> and for different youtubers. My keen interest in the latest technologies > and for different youtubers. My keen interest in the latest technologies
motivates me to contribute to diverse projects on Github, where I hone motivates me to contribute to diverse projects on Github, where I hone
my skills and expand my knowledge base. my skills and expand my knowledge base.
</p> </p>
</div>
</section> </section>
<section> <section>

View file

@ -253,7 +253,7 @@ class SnowStorm {
window.scrollY || window.scrollY ||
document.documentElement.scrollTop || document.documentElement.scrollTop ||
(noFixed ? document.body.scrollTop : 0), (noFixed ? document.body.scrollTop : 0),
10 10,
); );
if (isNaN(scrollY)) { if (isNaN(scrollY)) {
scrollY = 0; // Netscape 6 scroll fix scrollY = 0; // Netscape 6 scroll fix
@ -589,7 +589,7 @@ class SnowStorm {
var i; var i;
for (i = 0; i < limit; i++) { for (i = 0; i < limit; i++) {
storm.flakes[storm.flakes.length] = new storm.SnowFlake( storm.flakes[storm.flakes.length] = new storm.SnowFlake(
parseInt(rnd(flakeTypes), 10) parseInt(rnd(flakeTypes), 10),
); );
if (allowInactive || i > storm.flakesMaxActive) { if (allowInactive || i > storm.flakesMaxActive) {
storm.flakes[storm.flakes.length - 1].active = -1; storm.flakes[storm.flakes.length - 1].active = -1;
@ -627,7 +627,7 @@ class SnowStorm {
storm.events.add( storm.events.add(
isIE ? document : window, isIE ? document : window,
"mousemove", "mousemove",
storm.mouseMove storm.mouseMove,
); );
} }
storm.animationInterval = Math.max(20, storm.animationInterval); storm.animationInterval = Math.max(20, storm.animationInterval);
@ -646,7 +646,7 @@ class SnowStorm {
storm.targetElement = document.getElementById(targetID); storm.targetElement = document.getElementById(targetID);
if (!storm.targetElement) { if (!storm.targetElement) {
throw new Error( throw new Error(
'Snowstorm: Unable to get targetElement "' + targetID + '"' 'Snowstorm: Unable to get targetElement "' + targetID + '"',
); );
} }
} }
@ -692,7 +692,7 @@ class SnowStorm {
storm.events.remove( storm.events.remove(
isIE ? document : window, isIE ? document : window,
"mousemove", "mousemove",
doDelayedStart doDelayedStart,
); );
} }