rythondev/RythonDev
1
0
Fork 0
mirror of https://github.com/liyunze-coding/RythonDev.git synced 2026-09-22 07:44:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

added blog post

Browse source
This commit is contained in:
liyunze 2024-10-08 19:09:58 +11:00
parent 86ffa54538
commit a36e029a80
17 changed files with 491 additions and 172 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

116
src/components/elements/Card.astro
View file

@ -1,72 +1,78 @@
--- ---
interface Props { interface Props {
primaryColor: string; primaryColor: string;
bgColor?: string | undefined; bgColor?: string | undefined;
scaleOnHover?: boolean | undefined; scaleOnHover?: boolean | undefined;
pixelHeight?: string | undefined;
} }
const { primaryColor, bgColor = "#282828", scaleOnHover = false } = Astro.props; const {
primaryColor,
bgColor = "#282828",
scaleOnHover = false,
pixelHeight = "70px",
} = Astro.props;
--- ---
<div class="card z-10" class:list={[{ scale: scaleOnHover }]}> <div class="card z-10" class:list={[{ scale: scaleOnHover }]}>
<slot /> <slot />
</div> </div>
<style define:vars={{ primaryColor, bgColor }}> <style define:vars={{ primaryColor, bgColor, pixelHeight }}>
* { * {
box-sizing: border-box; box-sizing: border-box;
} }
h1, h1,
h2, h2,
h3, h3,
p { p {
margin: 0rem; margin: 0rem;
} }
.card { .card {
height: inherit; height: inherit;
position: relative; position: relative;
background-color: var(--bgColor); background-color: var(--bgColor);
border: 1px solid rgb(255 255 255 / 5%); border: 1px solid rgb(255 255 255 / 5%);
border-radius: 1.5rem; border-radius: 1.5rem;
padding: 0.5rem; padding: 0.5rem;
box-shadow: 0px 5px 5px 5px #141414; box-shadow: 0px 5px 5px 5px #141414;
} }
.card:after { .card:after {
content: ""; content: "";
height: 70px; height: var(--pixelHeight);
width: 1px; width: 1px;
position: absolute; position: absolute;
left: -1px; left: -1px;
top: 65%; top: 65%;
transition: top, opacity; transition: top, opacity;
transition-duration: 600ms; transition-duration: 600ms;
transition-timing-function: ease; transition-timing-function: ease;
background: linear-gradient( background: linear-gradient(
transparent, transparent,
var(--primaryColor), var(--primaryColor),
transparent transparent
); );
opacity: 0; opacity: 0;
} }
.card:after { .card:after {
top: 65%; top: 65%;
opacity: 0; opacity: 0;
} }
.card:hover:after { .card:hover:after {
top: 25%; top: 25%;
opacity: 1; opacity: 1;
} }
.card.scale { .card.scale {
transition: transform 0.5s ease; transition: transform 0.5s ease;
} }
.card.scale:hover { .card.scale:hover {
transform: scale(1.05); transform: scale(1.05);
} }
</style> </style>

21
src/components/sections/ContactComponent.svelte
View file

@ -2,9 +2,7 @@
import Socials from "../elements/Socials.svelte"; import Socials from "../elements/Socials.svelte";
</script> </script>
<div <div class="w-full h-fit flex flex-col justify-center items-center relative">
class="w-full h-fit pb-40 flex flex-col justify-center items-center relative"
>
<div class="flex flex-col justify-center items-center"> <div class="flex flex-col justify-center items-center">
<div <div
id="title" id="title"
@ -21,19 +19,10 @@
href="mailto:rythondev@gmail.com" href="mailto:rythondev@gmail.com"
><span class="text-3xl mr-2">&#9993;</span> Send me an email</a ><span class="text-3xl mr-2">&#9993;</span> Send me an email</a
> >
</div>
<div <div class="text-white flex flex-row py-10">
class="absolute bottom-20 left-1/2 -translate-x-1/2 text-white flex flex-row" <Socials />
> </div>
<Socials />
</div>
<div
class="absolute sm:bottom-10 bottom-5 left-1/2
-translate-x-1/2
text-gray-300
flex flex-row text-center"
>
© 2023-{new Date().getFullYear()} RythonDev
</div> </div>
</div> </div>

5
src/components/sections/FooterComponent.astro Normal file
View file

@ -0,0 +1,5 @@
<div class="w-full flex justify-center items-center pb-16">
<div class="text-center">
Copyright © 2023-{new Date().getFullYear()} RythonDev. All Rights Reserved.
</div>
</div>

32
src/components/sections/NavBar.astro
View file

@ -13,27 +13,31 @@
<nav class="flex flex-col capitalize" role="navigation"> <nav class="flex flex-col capitalize" role="navigation">
<a <a
class="sidebar-url px-5 py-2 mt-10 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-300" class="sidebar-url px-5 py-2 mt-10 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-300"
href="../">Home</a href="/">Home</a
> >
<a <a
class="sidebar-url px-5 py-2 mt-2 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-300" class="sidebar-url px-5 py-2 mt-2 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-300"
href="../what-i-do">What I Do</a href="/what-i-do">What I Do</a
> >
<a <a
class="sidebar-url px-5 py-2 mt-2 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-300" class="sidebar-url px-5 py-2 mt-2 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-300"
href="../projects">Projects</a href="/projects">Projects</a
> >
<a <a
class="sidebar-url px-5 py-2 mt-2 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-300" class="sidebar-url px-5 py-2 mt-2 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-300"
href="../skills">Skills</a href="/skills">Skills</a
> >
<a <a
class="sidebar-url px-5 py-2 mt-2 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-300" class="sidebar-url px-5 py-2 mt-2 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-300"
href="../experience">Experience</a href="/experience">Experience</a
> >
<a <a
class="sidebar-url px-5 py-2 mt-2 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-300" class="sidebar-url px-5 py-2 mt-2 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-300"
href="../contact">Contact</a href="/Blog">Blog</a
>
<a
class="sidebar-url px-5 py-2 mt-2 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-300"
href="/contact">Contact</a
> >
</nav> </nav>
</aside> </aside>
@ -49,28 +53,32 @@
> >
<a <a
class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-300 rounded-md" class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-300 rounded-md"
href="../">home</a href="/">home</a
> >
<a <a
class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-300 rounded-md" class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-300 rounded-md"
href="../what-i-do">What I Do</a href="/what-i-do">What I Do</a
> >
<a <a
class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-300 rounded-md" class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-300 rounded-md"
href="../projects">projects</a href="/projects">projects</a
> >
<a <a
class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-300 rounded-md" class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-300 rounded-md"
href="../skills">skills</a href="/skills">skills</a
> >
<a <a
class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-300 rounded-md" class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-300 rounded-md"
href="../experience">experience</a href="/experience">experience</a
> >
<a <a
class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-300 rounded-md" class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-300 rounded-md"
href="../contact">contact</a href="/blog">blog</a
>
<a
class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-300 rounded-md"
href="/contact">contact</a
> >
</div> </div>
</div> </div>

36
src/content/blog/welcome.md Normal file
View file

@ -0,0 +1,36 @@
---
title: "Welcome to my blog"
author: "RythonDev"
pubDate: 2024-10-08T8:06:00
description: The start of my blog posts. Where I share my plans on what type of blogs are to be shared here.
tags:
- Introduction
- Web Dev
- Streaming
---
## Introduction
This is my first blog post, where I share my plans on what type of blogs are to be shared here. The purpose of the blog is for me to share what I know without having to create a video about it.
The types of blogs that I will share here will be, but not limited to:
- Tutorials, Tips & Tricks
- Streaming
- Web Development
- Python
- News & Opinions
## Who am I?
Well, if you don't know who I am, you can find out on my website [here](/). But if you want me to put it in short, I would say that I am mainly a:
- Streamer
- Software Developer
## What's special about this blog?
In my experience, when I wanted to look at blogs from medium or article sites, it would either be flooded with ads, get prompted to disable ad blocker, or be completely locked behind a paywall. Although there are ways to bypass those, I find that searching for information has been inconvenient.
Hence, I want my blog to be minimal, without any ads nor paywalls. I believe that information and knowledge should be free, and easy to consume.

17
src/content/config.ts Normal file
View file

@ -0,0 +1,17 @@
import { z, defineCollection } from "astro:content";
const blogCollection = defineCollection({
type: "content",
schema: z.object({
title: z.string(),
color: z.string().optional(),
description: z.string(),
author: z.string(),
tags: z.array(z.string()).optional(),
pubDate: z.date(),
}),
});
export const collections = {
blog: blogCollection,
};

1
src/env.d.ts vendored
View file

@ -1 +1,2 @@
/// <reference path="../.astro/types.d.ts" />
/// <reference types="astro/client" /> /// <reference types="astro/client" />

139
src/pages/blog/[...slug].astro Normal file
View file

@ -0,0 +1,139 @@
---
import { getCollection } from "astro:content";
import NavBar from "../../components/sections/NavBar.astro";
import Layout from "../../layouts/Layout.astro";
import Footer from "../../components/sections/FooterComponent.astro";
export async function getStaticPaths() {
const blogEntries = await getCollection("blog");
return blogEntries.map((entry) => ({
params: { slug: entry.slug },
props: { entry },
}));
}
const { entry } = Astro.props;
const { Content } = await entry.render();
---
<Layout
title="Blog"
description="Find out how to contact RythonDev, for sponsorship offers or collaboration opportunities!"
>
<NavBar />
<div id="blog-content-component" class="mt-10 pt-10 mx-auto">
<h1 class="text-left text-4xl">{entry.data.title}</h1>
<p class="text-gray-200 mt-3 text-lg">
Published
{
new Date(entry.data.pubDate).toLocaleDateString("en-UK", {
day: "numeric",
month: "long",
year: "numeric",
})
}
</p>
<p class="text-gray-200 text-lg">by {entry.data.author}</p>
<p class="text-white text-lg">{entry.data.description}</p>
<div class="flex flex-row flex-wrap justify-start items-start">
{
entry.data.tags?.map((tag) => (
<div
class="mr-2 px-3 py-1 rounded-xl bg-[#282828]
border-2 border-solid border-gray-500
hover:border-white hover:bg-gray-300 hover:text-black
transition-colors duration-150"
>
{tag}
</div>
))
}
</div>
<hr class="my-5" />
<Content />
</div>
<div class="mt-10">
<Footer />
</div>
</Layout>
<style is:inline>
#blog-content-component {
width: clamp(310px, 60vw, 800px);
}
a:not(#navbar-div a) {
color: lightskyblue;
text-decoration: underline;
cursor: pointer;
}
p {
display: block;
font-size: 1.1rem;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
}
h1 {
display: block;
font-size: 2em;
margin-top: 0.67em;
margin-bottom: 0.67em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
h2 {
display: block;
font-size: 1.5em;
margin-top: 0.83em;
margin-bottom: 0.83em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
h3 {
display: block;
font-size: 1.17em;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
ul {
display: block;
list-style-type: disc;
margin-left: 0;
margin-right: 0;
margin-bottom: 0.5em;
padding-left: 40px;
}
ul:not(ul ul) {
margin-top: 0.5em;
}
li {
display: list-item;
}
ol {
display: block;
list-style-type: decimal;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
}
</style>

88
src/pages/blog/index.astro Normal file
View file

@ -0,0 +1,88 @@
---
import NavBar from "../../components/sections/NavBar.astro";
import Layout from "../../layouts/Layout.astro";
import Card from "../../components/elements/Card.astro";
import Footer from "../../components/sections/FooterComponent.astro";
import { getCollection } from "astro:content";
const blogPosts = await getCollection("blog");
---
<Layout
title="Blog"
description="Find out how to contact RythonDev, for sponsorship offers or collaboration opportunities!"
>
<NavBar />
<div id="blog-component" class="mt-10 pt-20">
<h1 class="text-center text-5xl">Blog</h1>
<div class="mt-10 flex flex-col justify-center items-center">
<div style="width: clamp(310px, 50vw, 800px);" class="mb-10">
<p class="text-center text-lg">
This is where I upload my blogs. No paywalls, no ads, no
bullshit.
</p>
</div>
<!-- Series of blog posts -->
<div style="width: clamp(310px, 50vw, 800px);">
{
blogPosts.map((blog) => (
<a class="mb-5 group" href={`/blog/${blog.slug}`}>
<Card
primaryColor={
blog.data.color ?? "rgba(0,0,0,0)"
}
pixelHeight="50px"
>
<div class="card-content py-3 px-8 text-left relative">
<h2 class="font-bold text-xl mb-1">
{blog.data.title}
</h2>
<p class="line-clamp-2">
{blog.data.description}
</p>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
class="size-6
absolute top-3 right-3
group-hover:top-2 group-hover:right-2
stroke-white group-hover:stroke-green-400
transition-all duration-150"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25"
/>
</svg>
</div>
</Card>
</a>
))
}
</div>
</div>
</div>
<div class="mt-10">
<Footer />
</div>
</Layout>
<style>
.card-content {
display: flex;
flex-direction: column;
background-image: radial-gradient(
rgba(255, 255, 255, 0.1) 1px,
transparent 1px
);
background-position: 50% 50%;
background-size: 1.1rem 1.1rem;
border-radius: 1.25rem;
overflow: hidden;
}
</style>

2
src/pages/contact.astro
View file

@ -3,6 +3,7 @@ import NavBar from "../components/sections/NavBar.astro";
import Layout from "../layouts/Layout.astro"; import Layout from "../layouts/Layout.astro";
import ContactComponent from "../components/sections/ContactComponent.svelte"; import ContactComponent from "../components/sections/ContactComponent.svelte";
import Card from "../components/elements/Card.astro"; import Card from "../components/elements/Card.astro";
import Footer from "../components/sections/FooterComponent.astro";
--- ---
<Layout <Layout
@ -36,6 +37,7 @@ import Card from "../components/elements/Card.astro";
<ContactComponent /> <ContactComponent />
</div> </div>
</div> </div>
<Footer />
</Layout> </Layout>
<style> <style>

2
src/pages/experience.astro
View file

@ -2,6 +2,7 @@
import NavBar from "../components/sections/NavBar.astro"; import NavBar from "../components/sections/NavBar.astro";
import Layout from "../layouts/Layout.astro"; import Layout from "../layouts/Layout.astro";
import EducationComponent from "../components/sections/ExperienceComponent.astro"; import EducationComponent from "../components/sections/ExperienceComponent.astro";
import Footer from "../components/sections/FooterComponent.astro";
--- ---
<Layout <Layout
@ -12,4 +13,5 @@ import EducationComponent from "../components/sections/ExperienceComponent.astro
<div id="Experience" class="mt-10"> <div id="Experience" class="mt-10">
<EducationComponent /> <EducationComponent />
</div> </div>
<Footer />
</Layout> </Layout>

44
src/pages/faq.astro
View file

@ -1,6 +1,7 @@
--- ---
import Layout from "../layouts/Layout.astro"; import Layout from "../layouts/Layout.astro";
import Card from "../components/elements/Card.astro"; import Card from "../components/elements/Card.astro";
import Footer from "../components/sections/FooterComponent.astro";
--- ---
<Layout title="Socials" description="Check out Ryan's socials"> <Layout title="Socials" description="Check out Ryan's socials">
@ -16,47 +17,62 @@ import Card from "../components/elements/Card.astro";
<p> <p>
I'm Ryan, I am a software developer and a coworking & study I'm Ryan, I am a software developer and a coworking & study
streamer. streamer.
<br /> <br/> <br />
<br />
See my website <a See my website <a
target="_blank" target="_blank"
href="https://rython.dev/" href="https://rython.dev/"
class="text-blue-400 underline">here</a class="text-blue-400 underline">here</a
> to learn more about me, including my software development portfolio and my content creation projects. > to learn more about me, including my software development portfolio
and my content creation projects.
</p> </p>
<hr class="my-2" /> <hr class="my-2" />
<h2 class="font-bold text-xl">Where are you from? What languages do you speak?</h2> <h2 class="font-bold text-xl">
Where are you from? What languages do you speak?
</h2>
<p> <p>
I'm born and raised in Malaysia, studying in Australia. I speak English, Mandarin Chinese, and some Malay. I can read both traditional and simplified Chinese characters. I'm born and raised in Malaysia, studying in Australia. I
speak English, Mandarin Chinese, and some Malay. I can read
both traditional and simplified Chinese characters.
</p> </p>
<hr class="my-2" /> <hr class="my-2" />
<!-- How to pronounce? --> <!-- How to pronounce? -->
<h2 class="font-bold text-xl">How to pronounce your username?</h2> <h2 class="font-bold text-xl">
How to pronounce your username?
</h2>
<p> <p>
Try to pronounce Python, and then replace the "Py" with "Ry". You can also call me "Ry" or "Ryan" if you prefer. Try to pronounce Python, and then replace the "Py" with
"Ry". You can also call me "Ry" or "Ryan" if you prefer.
</p> </p>
<hr class="my-2" /> <hr class="my-2" />
<!-- What is a coworking stream? --> <!-- What is a coworking stream? -->
<h2 class="font-bold text-xl">What is a coworking stream?</h2> <h2 class="font-bold text-xl">What is a coworking stream?</h2>
<p> <p>
That question is answered <a target="_blank" That question is answered <a
class="text-blue-400 underline" target="_blank"
href="https://coworking-guide.vercel.app/get-started/introduction#what-are-coworking-streams">here</a>. class="text-blue-400 underline"
href="https://coworking-guide.vercel.app/get-started/introduction#what-are-coworking-streams"
>here</a
>.
</p> </p>
<hr class="my-2" /> <hr class="my-2" />
<!-- What is a coworking stream? --> <!-- What is a coworking stream? -->
<h2 class="font-bold text-xl">Why are you muted? Why aren't you reading chat?</h2> <h2 class="font-bold text-xl">
Why are you muted? Why aren't you reading chat?
</h2>
<p> <p>
During work time, I am muted and not reading chat to focus on my work. I will try to catch up on chat during break time. During work time, I am muted and not reading chat to focus
on my work. I will try to catch up on chat during break
time.
</p> </p>
<hr class="my-2" /> <hr class="my-2" />
<!-- What is a coworking stream? --> <!-- What is a coworking stream? -->
<h2 class="font-bold text-xl">Is that a keychron?</h2> <h2 class="font-bold text-xl">Is that a keychron?</h2>
<p> <p>No. It's an Epomaker GK64x modded with black switches.</p>
No. It's an Epomaker GK64x modded with black switches.
</p>
<hr class="my-2" /> <hr class="my-2" />
</div> </div>
</Card> </Card>
<Footer />
</div> </div>
<style> <style>
.card-content { .card-content {

20
src/pages/index.astro
View file

@ -9,6 +9,7 @@ import Education from "../components/sections/ExperienceComponent.astro";
import Skills from "../components/sections/SkillsComponent.astro"; import Skills from "../components/sections/SkillsComponent.astro";
import Contact from "../components/sections/ContactComponent.svelte"; import Contact from "../components/sections/ContactComponent.svelte";
import Card from "../components/elements/Card.astro"; import Card from "../components/elements/Card.astro";
import Footer from "../components/sections/FooterComponent.astro";
--- ---
<Layout <Layout
@ -43,13 +44,14 @@ import Card from "../components/elements/Card.astro";
<div id="contact"> <div id="contact">
<Contact client:visible /> <Contact client:visible />
</div> </div>
<script is:inline> <Footer />
location.search.includes("?uwu") &&
document.documentElement.classList.add("uwu");
</script>
<style is:global>
.uwu #uwu {
display: flex;
}
</style>
</Layout> </Layout>
<script is:inline>
location.search.includes("?uwu") &&
document.documentElement.classList.add("uwu");
</script>
<style is:global>
.uwu #uwu {
display: flex;
}
</style>

2
src/pages/projects.astro
View file

@ -3,6 +3,7 @@ import NavBar from "../components/sections/NavBar.astro";
import Layout from "../layouts/Layout.astro"; import Layout from "../layouts/Layout.astro";
import ProjectsComponent from "../components/sections/ProjectsComponent.svelte"; import ProjectsComponent from "../components/sections/ProjectsComponent.svelte";
import MoreProjects from "../components/sections/MoreProjects.svelte"; import MoreProjects from "../components/sections/MoreProjects.svelte";
import Footer from "../components/sections/FooterComponent.astro";
--- ---
<Layout title="Projects" description="View what projects RythonDev has made"> <Layout title="Projects" description="View what projects RythonDev has made">
@ -15,6 +16,7 @@ import MoreProjects from "../components/sections/MoreProjects.svelte";
<div class="pb-20"> <div class="pb-20">
<ProjectsComponent client:load /> <ProjectsComponent client:load />
</div> </div>
<Footer />
</Layout> </Layout>
<style> <style>

134
src/pages/skills.astro
View file

@ -4,89 +4,91 @@ import Layout from "../layouts/Layout.astro";
import SkillsComponent from "../components/sections/SkillsComponent.astro"; import SkillsComponent from "../components/sections/SkillsComponent.astro";
import Line from "../components/elements/NetworkLine.astro"; import Line from "../components/elements/NetworkLine.astro";
import Card from "../components/elements/Card.astro"; import Card from "../components/elements/Card.astro";
import Footer from "../components/sections/FooterComponent.astro";
--- ---
<Layout <Layout
title="Skills" title="Skills"
description="Learn what skills RythonDev has honed in the past few years" description="Learn what skills RythonDev has honed in the past few years"
> >
<NavBar /> <NavBar />
<div id="skills" class="mt-10 pb-20"> <div id="skills" class="mt-10 pb-20">
<SkillsComponent /> <SkillsComponent />
<Line height="50px" /> <Line height="50px" />
<div class="w-[90%] md:w-[600px] mx-auto"> <div class="w-[90%] md:w-[600px] mx-auto">
<Card primaryColor="#9D76C1"> <Card primaryColor="#9D76C1">
<div class="card-content"> <div class="card-content">
<div class="flex flex-col justify-left w-full"> <div class="flex flex-col justify-left w-full">
<h2 class="font-bold text-2xl">Content Creation</h2> <h2 class="font-bold text-2xl">Content Creation</h2>
</div> </div>
<hr class="w-full" /> <hr class="w-full" />
<p class="text-left"> <p class="text-left">
Since I was little, I loved watching YouTube videos and Since I was little, I loved watching YouTube videos and
the idea of bringing joy and laughter to a wider the idea of bringing joy and laughter to a wider
audience. Thus, I began my journey in content creation audience. Thus, I began my journey in content creation
through YouTube videos and Twitch streaming. I typically through YouTube videos and Twitch streaming. I typically
do coworking & study streams to keep myself accountable do coworking & study streams to keep myself accountable
and encourage productivity amongst viewers. I also do and encourage productivity amongst viewers. I also do
software and game development streams where I showcase software and game development streams where I showcase
my work flow. my work flow.
</p> </p>
<div class="w-full flex flex-row flex-wrap justify-start"> <div class="w-full flex flex-row flex-wrap justify-start">
<div <div
class="w-fit text-white bg-gray-500 hover:bg-[#141414] hover:text-white class="w-fit text-white bg-gray-500 hover:bg-[#141414] hover:text-white
rounded-full px-3 py-1 mr-1 my-1 rounded-full px-3 py-1 mr-1 my-1
cursor-default cursor-default
transition-colors duration-300" transition-colors duration-300"
> >
OBS OBS
</div> </div>
<div <div
class="w-fit text-white bg-gray-500 hover:bg-gray-50 hover:text-black class="w-fit text-white bg-gray-500 hover:bg-gray-50 hover:text-black
rounded-full px-3 py-1 mr-1 my-1 rounded-full px-3 py-1 mr-1 my-1
cursor-default cursor-default
transition-colors duration-300" transition-colors duration-300"
> >
DaVinci Resolve DaVinci Resolve
</div> </div>
<div <div
class="w-fit text-white bg-gray-500 hover:bg-purple-500 class="w-fit text-white bg-gray-500 hover:bg-purple-500
rounded-full px-3 py-1 mr-1 my-1 rounded-full px-3 py-1 mr-1 my-1
cursor-default cursor-default
transition-colors duration-300" transition-colors duration-300"
> >
Twitch Twitch
</div> </div>
<div <div
class="w-fit text-white bg-gray-500 hover:bg-red-600 hover:text-white class="w-fit text-white bg-gray-500 hover:bg-red-600 hover:text-white
rounded-full px-3 py-1 mr-1 my-1 rounded-full px-3 py-1 mr-1 my-1
cursor-default cursor-default
transition-colors duration-300" transition-colors duration-300"
> >
YouTube YouTube
</div> </div>
</div> </div>
</div> </div>
</Card> </Card>
</div> </div>
</div> </div>
<Footer />
</Layout> </Layout>
<style> <style>
.card-content { .card-content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1rem; gap: 1rem;
background-image: radial-gradient( background-image: radial-gradient(
rgba(255, 255, 255, 0.1) 1px, rgba(255, 255, 255, 0.1) 1px,
transparent 1px transparent 1px
); );
background-position: 50% 50%; background-position: 50% 50%;
background-size: 1.1rem 1.1rem; background-size: 1.1rem 1.1rem;
padding-top: 2rem; padding-top: 2rem;
padding-left: 2rem; padding-left: 2rem;
padding-right: 2rem; padding-right: 2rem;
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
border-radius: 1.25rem; border-radius: 1.25rem;
overflow: hidden; overflow: hidden;
} }
</style> </style>

2
src/pages/socials.astro
View file

@ -1,6 +1,7 @@
--- ---
import Layout from "../layouts/Layout.astro"; import Layout from "../layouts/Layout.astro";
import StreamScheduleComponent from "../components/sections/StreamSchedule.svelte"; import StreamScheduleComponent from "../components/sections/StreamSchedule.svelte";
import Footer from "../components/sections/FooterComponent.astro";
--- ---
<Layout title="Socials" description="Check out Ryan's socials"> <Layout title="Socials" description="Check out Ryan's socials">
@ -726,6 +727,7 @@ import StreamScheduleComponent from "../components/sections/StreamSchedule.svelt
</div> </div>
</div> </div>
</div> </div>
<Footer />
</Layout> </Layout>
<style> <style>

2
src/pages/what-i-do.astro
View file

@ -4,6 +4,7 @@ import Layout from "../layouts/Layout.astro";
import WhatIDoComponent from "../components/sections/WhatIDoComponent.astro"; import WhatIDoComponent from "../components/sections/WhatIDoComponent.astro";
import Card from "../components/elements/Card.astro"; import Card from "../components/elements/Card.astro";
import Line from "../components/elements/NetworkLine.astro"; import Line from "../components/elements/NetworkLine.astro";
import Footer from "../components/sections/FooterComponent.astro";
--- ---
<Layout <Layout
@ -146,6 +147,7 @@ import Line from "../components/elements/NetworkLine.astro";
</Card> </Card>
</div> </div>
</div> </div>
<Footer />
</Layout> </Layout>
<style> <style>