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

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

@ -3,16 +3,22 @@ interface Props {
primaryColor: string;
bgColor?: string | 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 }]}>
<slot />
</div>
<style define:vars={{ primaryColor, bgColor }}>
<style define:vars={{ primaryColor, bgColor, pixelHeight }}>
* {
box-sizing: border-box;
}
@ -36,7 +42,7 @@ const { primaryColor, bgColor = "#282828", scaleOnHover = false } = Astro.props;
.card:after {
content: "";
height: 70px;
height: var(--pixelHeight);
width: 1px;
position: absolute;
left: -1px;

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

@ -2,9 +2,7 @@
import Socials from "../elements/Socials.svelte";
</script>
<div
class="w-full h-fit pb-40 flex flex-col justify-center items-center relative"
>
<div class="w-full h-fit flex flex-col justify-center items-center relative">
<div class="flex flex-col justify-center items-center">
<div
id="title"
@ -21,19 +19,10 @@
href="mailto:rythondev@gmail.com"
><span class="text-3xl mr-2">&#9993;</span> Send me an email</a
>
</div>
<div
class="absolute bottom-20 left-1/2 -translate-x-1/2 text-white flex flex-row"
>
<div class="text-white flex flex-row py-10">
<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>

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">
<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"
href="../">Home</a
href="/">Home</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="../what-i-do">What I Do</a
href="/what-i-do">What I Do</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="../projects">Projects</a
href="/projects">Projects</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="../skills">Skills</a
href="/skills">Skills</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="../experience">Experience</a
href="/experience">Experience</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
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>
</aside>
@ -49,28 +53,32 @@
>
<a
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
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
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
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
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
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>

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" />

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

2
src/pages/experience.astro
View file

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

42
src/pages/faq.astro
View file

@ -1,6 +1,7 @@
---
import Layout from "../layouts/Layout.astro";
import Card from "../components/elements/Card.astro";
import Footer from "../components/sections/FooterComponent.astro";
---
<Layout title="Socials" description="Check out Ryan's socials">
@ -16,47 +17,62 @@ import Card from "../components/elements/Card.astro";
<p>
I'm Ryan, I am a software developer and a coworking & study
streamer.
<br /> <br/>
<br />
<br />
See my website <a
target="_blank"
href="https://rython.dev/"
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>
<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>
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>
<hr class="my-2" />
<!-- 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>
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>
<hr class="my-2" />
<!-- What is a coworking stream? -->
<h2 class="font-bold text-xl">What is a coworking stream?</h2>
<p>
That question is answered <a target="_blank"
That question is answered <a
target="_blank"
class="text-blue-400 underline"
href="https://coworking-guide.vercel.app/get-started/introduction#what-are-coworking-streams">here</a>.
href="https://coworking-guide.vercel.app/get-started/introduction#what-are-coworking-streams"
>here</a
>.
</p>
<hr class="my-2" />
<!-- 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>
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>
<hr class="my-2" />
<!-- What is a coworking stream? -->
<h2 class="font-bold text-xl">Is that a keychron?</h2>
<p>
No. It's an Epomaker GK64x modded with black switches.
</p>
<p>No. It's an Epomaker GK64x modded with black switches.</p>
<hr class="my-2" />
</div>
</Card>
<Footer />
</div>
<style>
.card-content {

12
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 Contact from "../components/sections/ContactComponent.svelte";
import Card from "../components/elements/Card.astro";
import Footer from "../components/sections/FooterComponent.astro";
---
<Layout
@ -43,13 +44,14 @@ import Card from "../components/elements/Card.astro";
<div id="contact">
<Contact client:visible />
</div>
<script is:inline>
<Footer />
</Layout>
<script is:inline>
location.search.includes("?uwu") &&
document.documentElement.classList.add("uwu");
</script>
<style is:global>
</script>
<style is:global>
.uwu #uwu {
display: flex;
}
</style>
</Layout>
</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 ProjectsComponent from "../components/sections/ProjectsComponent.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">
@ -15,6 +16,7 @@ import MoreProjects from "../components/sections/MoreProjects.svelte";
<div class="pb-20">
<ProjectsComponent client:load />
</div>
<Footer />
</Layout>
<style>

2
src/pages/skills.astro
View file

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

2
src/pages/socials.astro
View file

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