YouHaveTrouble/youhavetrouble.github.io
1
0
Fork 0
mirror of https://github.com/YouHaveTrouble/youhavetrouble.github.io.git synced 2026-05-12 14:26:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

switch to Astro

Browse Source
This commit is contained in:
YouHaveTrouble
2024-05-03 22:49:29 +02:00
parent 0aa328cc09
commit 4405754d1d
70 changed files with 9077 additions and 825 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/about.astro
+51
View File
@@ -0,0 +1,51 @@
---
import BaseLayout from '../layouts/BaseLayout.astro';
const title = 'About';
const description = 'About your blog.';
const permalink = `${Astro.site.href}about`;
---
<BaseLayout title={title} description={description} permalink={permalink} current="about">
<div class="container">
<h1>About me</h1>
<p>My name is <strong>Paweł</strong>, but I'm better known as <strong>YouHaveTrouble</strong> on the internet.</p>
<p>
I currently work as a full-stack web developer. Technologies I usually use for my job are javascript, vuejs,
typescript, sql. I also often actively research and learn about new technologies that could be used to improve my
work.
</p>
<p>
In my spare time I develop plugins for minecraft servers. This is a hobby that initially made me learn how to
code. To this day I help maintain <a href="https://purpurmc.org">Purpur</a> server software along with its
<a href="https://modrinth.com/plugin/purpurextras">official plugin</a>. List of plugins I currently support can be
found <a href="https://modrinth.com/user/YouHaveTrouble/plugins">here</a>.
</p>
<p>
My video game interests are mostly focused on narrative heavy games, but I also enjoy some ARPGs and roguelikes.
You can see my full steam library <a href="https://steamcommunity.com/id/YouHaveTrouble/games/?tab=all">here</a>.
Recommendations from my favourite games would include:
</p>
<ul>
<li><a href="https://store.steampowered.com/app/420530/OneShot/">OneShot</a></li>
<li><a href="https://store.steampowered.com/app/1150690/OMORI/">OMORI</a></li>
<li><a href="https://store.steampowered.com/app/250900/The_Binding_of_Isaac_Rebirth/">The Binding of Isaac: Rebirth</a></li>
<li><a href="https://store.steampowered.com/app/105600/Terraria/">Terraria</a></li>
<li><a href="https://store.steampowered.com/app/582010/Monster_Hunter_World/">Monster Hunter: World</a></li>
<li><a href="https://store.steampowered.com/app/238960/Path_of_Exile/">Path of Exile</a></li>
</ul>
</div>
</BaseLayout>
<style>
ul {
list-style-type: disc;
padding-left: 1.5rem;
margin-block: 0;
}
ul li {
margin-block: 0;
}
</style>
src/pages/blog/[slug].astro
+60
View File
@@ -0,0 +1,60 @@
---
import BaseLayout from '../../layouts/BaseLayout.astro';
import Bio from '../../components/Bio.astro';
import getPostData from '../../utils/getPostData';
export async function getStaticPaths() {
const posts = await Astro.glob('../../data/blog-posts/*.md');
return posts.map(p => ({
params: { slug: p.file.split('/').pop().split('.').shift() },
props: { post: p },
}));
}
const { Content, frontmatter } = Astro.props.post;
const { title, description, publishDate, tags } = frontmatter;
const { slug, readingTime } = getPostData(Astro.props.post);
const permalink = `${Astro.site.href}blog/${slug}`;
---
<BaseLayout title={title} description={description} permalink={permalink} current="blog">
<header>
<p>{publishDate} ~ {readingTime}</p>
<h1>{title}</h1>
<div class="tags" style="justify-content: center">
{tags.map(item => (
<span class="tag">{item}</span>
))}
</div>
<hr />
</header>
<div class="container">
<article class="content">
<Content />
</article>
<hr />
<Bio />
</div>
</BaseLayout>
<style>
header {
text-align: center;
}
header h1 {
margin-bottom: 0.7em;
}
header p {
color: var(--text-secondary);
text-transform: uppercase;
font-family: var(--font-family-sans);
font-weight: 600;
}
header hr {
min-width: 100px;
width: 30%;
}
</style>
src/pages/blog/index.astro
+63
View File
@@ -0,0 +1,63 @@
---
import BaseLayout from '../../layouts/BaseLayout.astro';
const title = 'Blog';
const description = 'Latest articles.';
const permalink = `${Astro.site.href}blog`;
let allPosts = [];
try {
allPosts = await Astro.glob('../../data/blog-posts/*.md');
} catch (error) {
console.error('No blog posts found');
}
allPosts = allPosts.sort((a, b) => new Date(b.frontmatter.publishDate).valueOf() - new Date(a.frontmatter.publishDate).valueOf());
---
<BaseLayout title={title} description={description} permalink={permalink} current="blog">
<div class="container">
<h1>Blog</h1>
{allPosts.length === 0 && <p>No posts as of yet, hop back later!</p>}
{allPosts.map((post, index) => {
const href = `/blog/${post.file.split('/').pop().split('.').shift()}`;
return (
<div>
{ index !== 0 && <hr /> }
<div class="post-item">
<h2>
<a href={href}>{post.frontmatter.title}</a>
</h2>
<div class="tags">
{post.frontmatter.tags.map(item => (
<span class="tag">{item}</span>
))}
</div>
<p>{post.frontmatter.description}</p>
<div class="post-item-footer">
<span class="post-item-date">— {post.frontmatter.publishDate}</span>
</div>
</div>
</div>
)
})}
</div>
</BaseLayout>
<style>
h2,
.post-item-footer {
font-family: var(--font-family-sans);
font-weight: 700;
}
.post-item-date {
color: var(--text-secondary);
text-align: left;
text-transform: uppercase;
margin-right: 16px;
}
hr {
margin: 60px auto;
}
</style>
src/pages/index.astro
+144
View File
@@ -0,0 +1,144 @@
---
import BaseLayout from '../layouts/BaseLayout.astro';
const title = 'Home';
const description = 'My little corner of the internet.';
const permalink = Astro.site.href;
---
<BaseLayout title={title} description={description} permalink={permalink}>
<div class="home-container">
<div class="home-copy">
<h1>Welcome to my little corner of the interwebs</h1>
<p>Feel free to check out what I got in store!</p>
</div>
<div class="hero-socials-grid">
<a href="https://github.com/YouHaveTrouble" class="social-link" target="_blank" rel="external">
<img src="assets/icons/github.svg" alt="GitHub" draggable="false" loading="lazy">
<span>GitHub</span>
</a>
<a href="https://discord.youhavetrouble.me" class="social-link" target="_blank" rel="external">
<img src="assets/icons/discord.svg" alt="Discord" draggable="false" loading="lazy">
<span>Discord</span>
</a>
<a href="https://ko-fi.com/youhavetrouble" class="social-link" target="_blank" rel="external">
<img src="assets/icons/kofi.svg" alt="Ko-fi" draggable="false" loading="lazy">
<span>Ko-fi</span>
</a>
<a href="https://steamcommunity.com/id/YouHavetrouble" class="social-link" target="_blank" rel="external">
<img src="assets/icons/steam.svg" alt="Steam" draggable="false" loading="lazy">
<span>Steam</span>
</a>
<a href="https://www.youtube.com/@YouHaveTrouble" class="social-link" target="_blank" rel="external">
<img src="assets/icons/youtube.svg" alt="YouTube" draggable="false" loading="lazy">
<span>YouTube</span>
</a>
<a href="https://modrinth.com/user/YouHaveTrouble" class="social-link" target="_blank" rel="external">
<img src="assets/icons/modrinth.svg" alt="Modrinth" draggable="false" loading="lazy">
<span>Modrinth</span>
</a>
<a href="https://wakatime.com/@YouHaveTrouble" class="social-link" target="_blank" rel="external">
<img src="assets/icons/wakatime.svg" alt="WakaTime" draggable="false" loading="lazy">
<span>WakaTime</span>
</a>
<a href="https://open.spotify.com/user/11144490753" class="social-link" target="_blank" rel="external">
<img src="assets/icons/spotify.svg" alt="Spotify" draggable="false" loading="lazy">
<span>Spotify</span>
</a>
<a href="https://www.linkedin.com/in/pawel-youhavetrouble-michalewski/" class="social-link" target="_blank" rel="external">
<img src="assets/icons/linkedin.svg" alt="LinkedIn" draggable="false" loading="lazy">
<span>LinkedIn</span>
</a>
<a href="mailto://contact@youhavetrouble.me" class="social-link" target="_blank" rel="external">
<img src="assets/icons/email.svg" alt="Email" draggable="false" loading="lazy">
<span>Email</span>
</a>
</div>
</div>
</BaseLayout>
<style>
.home-container {
align-items: center;
display: flex;
flex: 1;
justify-content: center;
margin: 2em 0;
min-height: 400px;
}
.home-copy {
flex: 1;
padding: 0 1em;
}
.home-copy h1 {
font-weight: 700;
margin-bottom: 0.5em;
line-height: 1.3;
}
.home-copy p {
font-size: 1.4em;
}
.hero-socials-grid {
margin: 0 1em;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
width: 100%;
max-width: min(100%, 450px);
gap: 0.75rem;
}
.hero-socials-grid a {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 5.5rem;
height: 5.5rem;
text-decoration: none;
border-width: 1px;
border-style: solid;
border-color: transparent;
padding: 0.5rem;
gap: 0.25rem;
border-radius: 0.25rem;
}
.hero-socials-grid a:hover {
color: var(--text-main);
border-color: var(--text-main);
}
html:not(.theme-dark) .hero-socials-grid a img {
filter: invert(0.8);
}
.hero-socials-grid a img {
width: 3rem;
height: 3rem;
}
@media (max-width: 1200px) {
p {
font-size: 1.2em;
}
}
@media (max-width: 800px) {
.home-container {
flex-direction: column;
}
.home-copy {
flex: 0;
padding-bottom: 2em;
text-align: center;
}
}
</style>