Idk

kubgus · May 31, 2024 · 5a5a0ca · 5a5a0ca
1 parent 1b982cd
commit 5a5a0ca
Show file tree

Hide file tree

Showing 11 changed files with 48 additions and 46 deletions.
diff --git a/public/favicon.png b/public/favicon.png
diff --git a/public/favicon.svg b/public/favicon.svg
diff --git a/public/laiqrect.png b/public/laiqrect.png
diff --git a/src/components/socials-bar.astro b/src/components/socials-bar.astro
@@ -1,29 +1,29 @@
 ---
 ---
 
-<figure class="flex flex-row gap-6 text-xl">
+<figure class="flex flex-row gap-4 text-md">
 
-    <a href="mailto:[email protected]" title="Email" target="_blank">
+    <a href="mailto:[email protected]" aria-label="Email" target="_blank">
         <i class="fas fa-envelope"></i>
     </a>
 
-    <a href="https://github.com/kubgus" title="GitHub" target="_blank">
+    <a href="https://github.com/kubgus" aria-label="GitHub" target="_blank">
         <i class="fab fa-github"></i>
     </a>
 
-    <a href="https://www.linkedin.com/in/kubgus/" title="LinkedIn" target="_blank">
+    <a href="https://www.linkedin.com/in/kubgus/" aria-label="LinkedIn" target="_blank">
         <i class="fab fa-linkedin"></i>
     </a>
 
-    <a href="https://twitter.com/gustafik_dev" title="Twitter" target="_blank">
+    <a href="https://twitter.com/gustafik_dev" aria-label="Twitter" target="_blank">
         <i class="fab fa-twitter"></i>
     </a>
 
-    <a href="https://discord.com/users/643898809193332786/" title="Discord" target="_blank">
+    <a href="https://discord.com/users/643898809193332786/" aria-label="Discord" target="_blank">
         <i class="fab fa-discord"></i>
     </a>
 
-    <a href="https://patreon.com/user?u=96061849&utm_medium=clipboard_copy&utm_source=copyLink&utm_campaign=creatorshare_creator&utm_content=join_link" title="Patreon" target="_blank">
+    <a href="https://patreon.com/user?u=96061849&utm_medium=clipboard_copy&utm_source=copyLink&utm_campaign=creatorshare_creator&utm_content=join_link" aria-label="Patreon" target="_blank">
         <i class="fab fa-patreon"></i>
     </a>
 

diff --git a/src/layouts/base-layout.astro b/src/layouts/base-layout.astro
@@ -9,7 +9,7 @@ import "../styles/general.css";
 		<meta name="generator" content={Astro.generator} />
 
         <!-- Favicon -->
-        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+        <link rel="icon" type="image/png" href="/favicon.png" />
         <!-- Google Fonts -->
         <link rel="preconnect" href="https://fonts.googleapis.com">
         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

diff --git a/src/layouts/blog-layout.astro b/src/layouts/blog-layout.astro
@@ -25,7 +25,7 @@ img {
 
 <BaseLayout>
     <header class="z-20 flex flex-row justify-between sticky top-0 left-0 w-full px-6 py-3 bg-brand-gray font-dela-gothic-one text-lg">
-        <nav class="flex flex-row gap-12">
+        <nav class="flex flex-row gap-6">
             <a href="/blog">← Go back</a>
             <SocialsBar />
         </nav>
@@ -36,7 +36,7 @@ img {
     <article>
         <img src={frontmatter.image.url} alt={frontmatter.image.alt} class="w-[100%] h-[30vh] object-cover rounded-lg" />
         <div id="info" class="flex flex-col gap-6 mb-6">
-            <h1 class="text-[5.5rem]">{frontmatter.title}</h1>
+            <h1 class="text-[5.5rem] leading-[5.5rem]">{frontmatter.title}</h1>
             <p class="text-2xl opacity-80 mt-6">{frontmatter.description}</p>
             <span id="date" class="opacity-50">{frontmatter.author} • {new Date(frontmatter.pubDate).toDateString()}</span>
         </div>

diff --git a/src/layouts/navbar-layout.astro b/src/layouts/navbar-layout.astro
@@ -5,10 +5,12 @@ import SocialsBar from "../components/socials-bar.astro";
 ---
 
 <BaseLayout>
-    <header class="z-20 flex flex-row justify-between sticky top-0 left-0 w-full px-6 py-3 bg-brand-black font-dela-gothic-one text-lg">
-        <figure class="flex flex-row gap-12">
-            <a href="/" title="Jakub Gustafik"><h5 class="scale-125">JG</h5></a>
-            <SocialsBar />
+    <header class="z-20 flex flex-row justify-between items-center sticky top-0 left-0 w-full px-6 py-3 bg-brand-black font-dela-gothic-one text-md">
+        <figure class="flex flex-row gap-6">
+            <a href="/" title="Jakub Gustafik"><h5>JG</h5></a>
+            <div class="translate-y-0.5">
+                <SocialsBar />
+            </div>
         </figure>
         <nav class="ml-auto">
             <ul class="flex flex-row gap-8">

diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
@@ -7,11 +7,11 @@ posts.sort((a, b) => Date.parse(b.frontmatter.pubDate) - Date.parse(a.frontmatte
 
 <style>
 section {
-    @apply flex flex-col gap-6 mt-12 p-8 rounded-lg bg-brand-black
+    @apply flex flex-col gap-6 mt-12
 }
 
 figure {
-    @apply flex flex-col gap-1 bg-brand-gray rounded-lg p-6
+    @apply flex flex-col gap-1 p-6 rounded-lg bg-brand-black
 }
 
 figure h2 {
@@ -26,12 +26,12 @@ figure span#date {
 <NavbarLayout>
     <h1>Blog</h1>
     <section>
-        { posts.map((post) => 
-            <figure> 
+        { posts.map((post) =>
+            <figure>
                 <a href={post.url} class="flex flex-row gap-4 items-center">
-                    <h2>{post.frontmatter.title}</h2>
+                    <h3>{post.frontmatter.title}</h3>
                 </a>
-                <span id="date">{post.frontmatter.author} • {new Date(post.frontmatter.pubDate).toDateString()}</span>
+                <span id="date" class="opacity-40">{post.frontmatter.author} • {new Date(post.frontmatter.pubDate).toDateString()}</span>
             </figure>
         ) }
     </section>

diff --git a/src/pages/blog/post/preview.md b/src/pages/blog/post/preview.md
@@ -6,7 +6,7 @@ description: "This post doesn't hold any relevance, it's just a preview to test
 author: "Jakub Gustafik"
 image:
     url: "https://st2.depositphotos.com/1592314/10545/i/450/depositphotos_105455422-stock-photo-nice-mediterranean-sea-france.jpg"
-    alt: "Astro logo"
+    alt: "Seaside France"
 ---
 
 # Heading 1
@@ -25,7 +25,7 @@ This is a paragraph with a [link](https://astro.build).
 
 This is a paragraph with an image:
 
-![Picture of seaside France](https://st2.depositphotos.com/1592314/10545/i/450/depositphotos_105455422-stock-photo-nice-mediterranean-sea-france.jpg)
+![Seaside France](https://st2.depositphotos.com/1592314/10545/i/450/depositphotos_105455422-stock-photo-nice-mediterranean-sea-france.jpg)
 
 This is a paragraph with a code block:
 

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -7,14 +7,14 @@ posts.splice(3);
 ---
 
 <NavbarLayout>
-    <article class="flex flex-col xl:flex-row justify-center gap-6 md:gap-12">
-        <figure class="md:grid md:grid-cols-1 md:grid-rows-[1fr_0.3fr_6fr]">
+    <article class="flex flex-col xl:flex-row justify-center gap-3 md:gap-6">
+        <figure class="md:grid md:grid-cols-1 md:grid-rows-[1fr_0.3fr_6fr] h-full">
             <h1>Jakub Gustafik</h1>
-            <span class="text-2xl text-brand-teal">Student, Freelancer • Software development, Web development, IT</span>
-            <section class="w-full mt-7 flex flex-col md:flex-row gap-6 md:gap-12">
+            <span class="text-xl text-brand-teal">Student, Freelancer • Software development, Web development, IT</span>
+            <section class="mt-4 flex flex-col md:flex-row gap-3 md:gap-6">
                 <figure class="flex flex-col gap-4 bg-brand-black w-full rounded-md p-6">
                     <h2>Skills</h2>
-                    <ul class="text-xl flex flex-col gap-2 [&_li]:list-disc pl-7">
+                    <ul class="text-md flex flex-col gap-2 [&_li]:list-disc pl-7">
                         <li>English/Slovak bilingual</li>
                         <li>Conversational German</li>
                         <li>Programming</li>
@@ -26,7 +26,7 @@ posts.splice(3);
                 </figure>
                 <figure class="flex flex-col gap-4 bg-brand-black w-full rounded-md p-6">
                     <h2>Knowledge</h2>
-                    <ul class="text-xl flex flex-col gap-2 [&_li]:list-disc pl-7">
+                    <ul class="text-md flex flex-col gap-2 [&_li]:list-disc pl-7">
                         <li>C++, C#</li>
                         <li>HTML, CSS, JavaScript, Typescript</li>
                         <li>Node.js, Vue.js, Nuxt.js, Astro</li>
@@ -37,18 +37,23 @@ posts.splice(3);
                 </figure>
             </section>
         </figure>
-        <figure class="flex flex-col gap-6 h-full xl:w-[50%] p-6 bg-brand-black rounded-md">
+        <figure class="flex flex-col gap-3 h-full xl:w-[50%] p-6 bg-brand-black rounded-md">
             <h2>Bio</h2>
-            <span class="text-lg">Volám sa Jakub a študujem na strednej škole v Pezinku. Už od pomerne nízkeho veku mám veľký zápal pre programovanie a digitálnu tvorbu, čo vo mne prerástlo v nezanedbateľnú skúsenosť s vývojom softvéru a webových aplikácií a riešení.
-            Mimo profesionálnych skúseností mám dlhodobú skúsenosť s tvorbou vlastných "passion" projektov, ktoré spravujem a publikujem na svojej webstránke a GitHub profile.
-            Medzi moje záľuby patrí (samozrejme) programovanie, cvičenie a učenie sa hre na gitare, no taktiež sa dlhodobo venujem skautingu v dobrovoľníckej organizácii SLSK a pomáham aj s organizáciou a eventami CoderDojo.
-            Som otvorený novým pracovným vzťahom a skúsenostiam.</span>
+            <span class="text-md">
+            My name is Jakub and I am a student from Slovakia also working as
+            a freelancer. I picked up coding when I was young and I've been
+            passionate about it ever since. I am always interested in IT,
+            software development, web development, and personal development.
+            I am bilingual in English
+            and Slovak and I am also learning German. If you're interested in
+            working with me, feel free to <a href="/contact">contact me</a>.
+            </span>
             <h2>Latest Articles</h2>
-            <div class="grid grid-cols-3 gap-3">
+            <div class="grid grid-cols-1 2xl:grid-cols-3 gap-3">
                 { posts.map((post) =>
                     <figure class="flex flex-col gap-2 p-3 bg-brand-gray rounded-md">
-                        <a href={post.url}><h3>{post.frontmatter.title}</h3></a>
-                        <span id="date">{post.frontmatter.author} • {new Date(post.frontmatter.pubDate).toDateString()}</span>
+                        <a href={post.url}><h4>{post.frontmatter.title}</h3></a>
+                        <span id="date" class="text-sm opacity-60">{post.frontmatter.author} • {new Date(post.frontmatter.pubDate).toDateString()}</span>
                     </figure>
                 ) }
             </div>

diff --git a/src/styles/general.css b/src/styles/general.css
@@ -19,7 +19,7 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 h1 {
-    @apply text-6xl;
+    @apply text-4xl;
 }
 
 h2 {
@@ -38,6 +38,10 @@ h5 {
     @apply text-lg;
 }
 
+a {
+    @apply selection:bg-brand-teal selection:text-brand-white;
+}
+
 a:hover {
     @apply text-brand-teal;
 }