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

added experiences and skills

Browse source
This commit is contained in:
liyunze 2025-05-30 14:19:34 +10:00
parent a7733018a7
commit 7267c82972
4 changed files with 377 additions and 288 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/sections/ExperienceComponent.astro
View file

@ -30,6 +30,10 @@ import Line from "../elements/NetworkLine.astro";
<li>C#</li> <li>C#</li>
<li>Vue.JS</li> <li>Vue.JS</li>
</ul> </ul>
<ul class="list-inside list-disc">
<li>MongoDB</li>
<li>PostgreSQL</li>
</ul>
</div> </div>
</div> </div>
</Card> </Card>
@ -38,7 +42,7 @@ import Line from "../elements/NetworkLine.astro";
<div class="card-content px-4 py-4 md:px-8 md:py-8"> <div class="card-content px-4 py-4 md:px-8 md:py-8">
<div class="mb-3 flex w-full flex-col justify-start gap-1"> <div class="mb-3 flex w-full flex-col justify-start gap-1">
<h2 class="text-xl font-bold"> <h2 class="text-xl font-bold">
Lead Frontend Web Developer Lead Full Stack Developer
</h2> </h2>
<h3 class="font-bold">@ JW BizTech</h3> <h3 class="font-bold">@ JW BizTech</h3>
<h3>Dec 2024 - Present</h3> <h3>Dec 2024 - Present</h3>

123
src/components/sections/MoreSkills.astro Normal file
View file

@ -0,0 +1,123 @@
---
import Card from "../elements/Card.astro";
import Line from "../elements/NetworkLine.astro";
---
<div id="Experience" class="h-fit">
<div class="flex flex-col items-center">
<div class="w-[90%] md:w-[600px]">
<Line height="50px" />
<div class="mx-auto w-[90%] md:w-[600px]">
<Card primaryColor="#9D76C1">
<div class="card-content">
<div class="justify-left flex w-full flex-col">
<h2 class="text-2xl font-bold">Content Creation</h2>
</div>
<hr class="w-full" />
<p class="text-left">
Since I was little, I loved watching YouTube videos
and the idea of bringing joy and laughter to a wider
audience. Thus, I began my journey in content
creation through YouTube videos and Twitch
streaming. I typically do coworking & study streams
to keep myself accountable and encourage
productivity amongst viewers. I also do software and
game development streams where I showcase my
workflow.
</p>
<div
class="flex w-full flex-row flex-wrap justify-start"
>
<div
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#141414] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#141414] hover:text-white md:bg-gray-500"
>
OBS
</div>
<div
class="my-1 mr-1 w-fit cursor-default rounded-full bg-gray-50 px-3 py-1 text-black transition-colors duration-300 hover:bg-gray-50 hover:text-black md:bg-gray-500 md:text-white"
>
DaVinci Resolve
</div>
<div
class="my-1 mr-1 w-fit cursor-default rounded-full bg-purple-500 px-3 py-1 text-white transition-colors duration-300 hover:bg-purple-500 md:bg-gray-500"
>
Twitch
</div>
<div
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#ff0000] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#ff0000] hover:text-white md:bg-gray-500"
>
YouTube
</div>
</div>
</div>
</Card>
</div>
<Line height="50px" />
<div class="mx-auto w-[90%] md:w-[600px]">
<Card primaryColor="#9D76C1">
<div class="card-content">
<div class="justify-left flex w-full flex-col">
<h2 class="text-2xl font-bold">
Mobile Development
</h2>
</div>
<hr class="w-full" />
<p class="text-left">
In my Mobile App Development unit in University, I
am tasked to develop Android apps using Android
Studio. The final app project I had developed was a
LLM-powered quiz app with features such as choosing
your own topics, viewing your question attempt
history afterwards, and upgrading your tier with
Google Pay.
</p>
<p class="text-left">
The marking tutor was impressed with my work, and
offered me to join a research lab because I had good
potential.
</p>
<div
class="flex w-full flex-row flex-wrap justify-start"
>
<div
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#106539] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#106539] hover:text-white md:bg-gray-500"
>
Android
</div>
<div
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#ED8B00] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#ED8B00] md:bg-gray-500"
>
Java
</div>
<div
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#7F52FF] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#7F52FF] md:bg-gray-500"
>
Kotlin
</div>
</div>
</div>
</Card>
</div>
</div>
</div>
</div>
<style>
.card-content {
display: flex;
flex-direction: column;
gap: 1rem;
background-image: radial-gradient(
rgba(255, 255, 255, 0.1) 1px,
transparent 1px
);
background-position: 50% 50%;
background-size: 1.1rem 1.1rem;
padding-top: 2rem;
padding-left: 2rem;
padding-right: 2rem;
padding-bottom: 0.5rem;
border-radius: 1.25rem;
overflow: hidden;
}
</style>

441
src/components/sections/SkillsComponent.astro
View file

@ -4,225 +4,230 @@ import Line from "../elements/NetworkLine.astro";
--- ---
<div class="h-fit w-full pt-20"> <div class="h-fit w-full pt-20">
<h1 class="text-center text-5xl">Skills</h1> <h1 class="text-center text-5xl">Skills</h1>
<div class="flex flex-col items-center"> <div class="flex flex-col items-center">
<div class="w-[90%] pt-10 md:w-[600px]"> <div class="w-[90%] pt-10 md:w-[600px]">
<Card primaryColor="#19a7ce"> <Card primaryColor="#19a7ce">
<div class="card-content"> <div class="card-content">
<div class="justify-left flex w-full flex-col"> <div class="justify-left flex w-full flex-col">
<h2 class="text-2xl font-bold">Frontend Development</h2> <h2 class="text-2xl font-bold">Frontend Development</h2>
</div> </div>
<hr class="w-full" /> <hr class="w-full" />
<p class="text-left"> <p class="text-left">
I started my web development journey by building I started my web development journey by building
websites and widgets using vanilla HTML, CSS, Javascript websites and widgets using vanilla HTML, CSS, Javascript
and Express. As I learnt more about the fundamentals of and Express. As I learnt more about the fundamentals of
web development, I delved into frontend frameworks such web development, I delved into frontend frameworks such
as Svelte, React and Astro. as Svelte, React and Astro.
</p> </p>
<div class="flex w-full flex-row flex-wrap justify-start"> <div class="flex w-full flex-row flex-wrap justify-start">
<div <div
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#B11700] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#B11700] md:bg-gray-500" class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#B11700] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#B11700] md:bg-gray-500"
> >
HTML HTML
</div> </div>
<div <div
class="my-1 mr-1 w-fit cursor-default rounded-full bg-blue-700 px-3 py-1 text-white transition-colors duration-300 hover:bg-blue-700 md:bg-gray-500" class="my-1 mr-1 w-fit cursor-default rounded-full bg-blue-700 px-3 py-1 text-white transition-colors duration-300 hover:bg-blue-700 md:bg-gray-500"
> >
CSS CSS
</div> </div>
<div <div
class="my-1 mr-1 w-fit cursor-default rounded-full bg-yellow-400 px-3 py-1 text-black transition-colors duration-300 hover:bg-yellow-400 md:bg-gray-500 md:text-white md:hover:text-black" class="my-1 mr-1 w-fit cursor-default rounded-full bg-yellow-400 px-3 py-1 text-black transition-colors duration-300 hover:bg-yellow-400 md:bg-gray-500 md:text-white md:hover:text-black"
> >
Javascript Javascript
</div> </div>
<div <div
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#3178C6] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#3178C6] md:bg-gray-500 md:text-white md:hover:text-white" class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#3178C6] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#3178C6] md:bg-gray-500 md:text-white md:hover:text-white"
> >
TypeScript TypeScript
</div> </div>
<div <div
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#B11700] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#B11700] md:bg-gray-500" class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#B11700] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#B11700] md:bg-gray-500"
> >
Svelte Svelte
</div> </div>
<div <div
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#00D8FF] px-3 py-1 text-black transition-colors duration-300 hover:bg-[#00D8FF] md:bg-gray-500 md:text-white md:hover:text-black" class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#00D8FF] px-3 py-1 text-black transition-colors duration-300 hover:bg-[#00D8FF] md:bg-gray-500 md:text-white md:hover:text-black"
> >
React React
</div> </div>
<div <div
class="my-1 mr-1 w-fit cursor-default rounded-full bg-green-500 px-3 py-1 text-black transition-colors duration-300 hover:bg-green-500 md:bg-gray-500 md:text-white md:hover:text-black" class="my-1 mr-1 w-fit cursor-default rounded-full bg-green-500 px-3 py-1 text-black transition-colors duration-300 hover:bg-green-500 md:bg-gray-500 md:text-white md:hover:text-black"
> >
Vue Vue
</div> </div>
<div <div
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#21759B] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#21759B] md:bg-gray-500" class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#21759B] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#21759B] md:bg-gray-500"
> >
WordPress WordPress
</div> </div>
<div <div
class="my-1 mr-1 w-fit cursor-default rounded-full bg-white px-3 py-1 text-black transition-colors duration-300 hover:bg-white md:bg-gray-500 md:text-white md:hover:text-black" class="my-1 mr-1 w-fit cursor-default rounded-full bg-white px-3 py-1 text-black transition-colors duration-300 hover:bg-white md:bg-gray-500 md:text-white md:hover:text-black"
> >
Astro Astro
</div> </div>
<div <div
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#3366CC] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#3366CC] hover:text-white md:bg-gray-500" class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#3366CC] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#3366CC] hover:text-white md:bg-gray-500"
> >
HTMX HTMX
</div> </div>
<div <div
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#07B6D4] px-3 py-1 text-black transition-colors duration-300 hover:bg-[#07B6D4] md:bg-gray-500 md:text-white md:hover:text-black" class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#07B6D4] px-3 py-1 text-black transition-colors duration-300 hover:bg-[#07B6D4] md:bg-gray-500 md:text-white md:hover:text-black"
> >
TailwindCSS TailwindCSS
</div> </div>
</div> </div>
</div> </div>
</Card> </Card>
<Line height="50px" /> <Line height="50px" />
<Card primaryColor="#474F7A"> <Card primaryColor="#474F7A">
<div class="card-content"> <div class="card-content">
<div class="justify-left flex w-full flex-col"> <div class="justify-left flex w-full flex-col">
<h2 class="text-2xl font-bold">Backend Development</h2> <h2 class="text-2xl font-bold">Backend Development</h2>
</div> </div>
<hr class="w-full" /> <hr class="w-full" />
<p class="text-left"> <p class="text-left">
In the beginning, I used my Python skills to entertain In the beginning, I used my Python skills to entertain
and to automate the boring stuff, such as using Selenium and to automate the boring stuff, such as using Selenium
for automation + web scraping, play chess by automating for automation + web scraping, play chess by automating
mouse controls and build Discord bots. Now, I am mouse controls and build Discord bots. Now, I am
experienced with backend web development, managing experienced with backend web development, managing
databases and building performant applications. databases and building performant applications.
</p> </p>
<div class="flex w-full flex-row flex-wrap justify-start"> <div class="flex w-full flex-row flex-wrap justify-start">
<div <div
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#3776AB] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#3776AB] md:bg-gray-500" class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#3776AB] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#3776AB] md:bg-gray-500"
> >
Python Python
</div> </div>
<div <div
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#672079] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#672079] md:bg-gray-500" class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#672079] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#672079] md:bg-gray-500"
> >
C# C#
</div> </div>
<div <div
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#ED8B00] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#ED8B00] md:bg-gray-500" class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#ED8B00] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#ED8B00] md:bg-gray-500"
> >
Java Java
</div> </div>
<div <div
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#7F52FF] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#7F52FF] md:bg-gray-500" class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#7F52FF] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#7F52FF] md:bg-gray-500"
> >
Kotlin Kotlin
</div> </div>
<div <div
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#3D5694] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#3D5694] md:bg-gray-500" class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#3D5694] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#3D5694] md:bg-gray-500"
> >
PHP PHP
</div> </div>
<div <div
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#006080] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#006080] md:bg-gray-500" class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#006080] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#006080] md:bg-gray-500"
> >
Go Go
</div> </div>
<div <div
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#B11700] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#B11700] md:bg-gray-500" class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#B11700] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#B11700] md:bg-gray-500"
> >
Rust Rust
</div> </div>
<div <div
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#316192] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#4479A1] md:bg-gray-500" class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#316192] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#4479A1] md:bg-gray-500"
> >
PostgreSQL PostgreSQL
</div> </div>
<div <div
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#4479A1] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#4479A1] md:bg-gray-500" class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#4479A1] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#4479A1] md:bg-gray-500"
> >
MySQL MySQL
</div> </div>
</div> <div
</div> class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#09934E] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#09934E] md:bg-gray-500"
</Card> >
<Line height="50px" /> MongoDB
<Card primaryColor="#a1eebd"> </div>
<div class="card-content"> </div>
<div class="justify-left flex w-full flex-col"> </div>
<h2 class="text-2xl font-bold">Data Science</h2> </Card>
</div> <Line height="50px" />
<hr class="w-full" /> <Card primaryColor="#a1eebd">
<p class="text-left"> <div class="card-content">
My first exposure to data science was through learning <div class="justify-left flex w-full flex-col">
Computer Vision. I learn how to use OpenCV in Python to <h2 class="text-2xl font-bold">Data Science</h2>
open a webcam and detect faces. Later on, I took a </div>
Diploma course that is focused in data science, where I <hr class="w-full" />
learnt how to do the fundamentals of data science such <p class="text-left">
as extracting, transforming and loading data, as well as My first exposure to data science was through learning
data visualisation. Computer Vision. I learn how to use OpenCV in Python to
</p> open a webcam and detect faces. Later on, I took a
<div class="flex w-full flex-row flex-wrap justify-start"> Diploma course that is focused in data science, where I
<div learnt how to do the fundamentals of data science such
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#3776AB] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#3776AB] md:bg-gray-500" as extracting, transforming and loading data, as well as
> data visualisation.
Python </p>
</div> <div class="flex w-full flex-row flex-wrap justify-start">
<div <div
class="my-1 mr-1 w-fit cursor-default rounded-full bg-cyan-500 px-3 py-1 text-white transition-colors duration-300 hover:bg-cyan-500 md:bg-gray-500" class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#3776AB] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#3776AB] md:bg-gray-500"
> >
R Python
</div> </div>
<div <div
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#10652F] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#10652F] md:bg-gray-500" class="my-1 mr-1 w-fit cursor-default rounded-full bg-cyan-500 px-3 py-1 text-white transition-colors duration-300 hover:bg-cyan-500 md:bg-gray-500"
> >
OpenCV R
</div> </div>
<div <div
class="my-1 mr-1 w-fit cursor-default rounded-full bg-blue-500 px-3 py-1 text-black transition-colors duration-300 hover:bg-blue-500 md:bg-gray-500 md:text-white md:hover:text-black" class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#10652F] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#10652F] md:bg-gray-500"
> >
SAS OpenCV
</div> </div>
<div <div
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#4479A1] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#4479A1] md:bg-gray-500" class="my-1 mr-1 w-fit cursor-default rounded-full bg-blue-500 px-3 py-1 text-black transition-colors duration-300 hover:bg-blue-500 md:bg-gray-500 md:text-white md:hover:text-black"
> >
MySQL SAS
</div> </div>
<div <div
class="my-1 mr-1 w-fit cursor-default rounded-full bg-blue-800 px-3 py-1 text-white transition-colors duration-300 hover:bg-blue-800 md:bg-gray-500" class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#4479A1] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#4479A1] md:bg-gray-500"
> >
Pandas MySQL
</div> </div>
<div <div
class="my-1 mr-1 w-fit cursor-default rounded-full bg-green-700 px-3 py-1 text-white transition-colors duration-300 hover:bg-green-700 md:bg-gray-500" class="my-1 mr-1 w-fit cursor-default rounded-full bg-blue-800 px-3 py-1 text-white transition-colors duration-300 hover:bg-blue-800 md:bg-gray-500"
> >
Selenium Pandas
</div> </div>
<div <div
class="my-1 mr-1 w-fit cursor-default rounded-full bg-gray-200 px-3 py-1 text-black transition-colors duration-300 hover:bg-gray-200 md:bg-gray-500 md:text-white md:hover:text-black" class="my-1 mr-1 w-fit cursor-default rounded-full bg-green-700 px-3 py-1 text-white transition-colors duration-300 hover:bg-green-700 md:bg-gray-500"
> >
BeautifulSoup4 Selenium
</div> </div>
</div> <div
</div> class="my-1 mr-1 w-fit cursor-default rounded-full bg-gray-200 px-3 py-1 text-black transition-colors duration-300 hover:bg-gray-200 md:bg-gray-500 md:text-white md:hover:text-black"
</Card> >
</div> BeautifulSoup4
</div> </div>
</div>
</div>
</Card>
</div>
</div>
</div> </div>
<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>

95
src/pages/skills.astro
View file

@ -2,81 +2,38 @@
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 SkillsComponent from "../components/sections/SkillsComponent.astro"; import SkillsComponent from "../components/sections/SkillsComponent.astro";
import Line from "../components/elements/NetworkLine.astro"; import MoreSkills from "../components/sections/MoreSkills.astro";
import Card from "../components/elements/Card.astro";
import Footer from "../components/sections/FooterComponent.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" /> <MoreSkills />
<div class="mx-auto w-[90%] md:w-[600px]"> </div>
<Card primaryColor="#9D76C1"> <Footer />
<div class="card-content">
<div class="justify-left flex w-full flex-col">
<h2 class="text-2xl font-bold">Content Creation</h2>
</div>
<hr class="w-full" />
<p class="text-left">
Since I was little, I loved watching YouTube videos and
the idea of bringing joy and laughter to a wider
audience. Thus, I began my journey in content creation
through YouTube videos and Twitch streaming. I typically
do coworking & study streams to keep myself accountable
and encourage productivity amongst viewers. I also do
software and game development streams where I showcase
my workflow.
</p>
<div class="flex w-full flex-row flex-wrap justify-start">
<div
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#141414] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#141414] hover:text-white md:bg-gray-500"
>
OBS
</div>
<div
class="my-1 mr-1 w-fit cursor-default rounded-full bg-gray-50 px-3 py-1 text-black transition-colors duration-300 hover:bg-gray-50 hover:text-black md:bg-gray-500 md:text-white"
>
DaVinci Resolve
</div>
<div
class="my-1 mr-1 w-fit cursor-default rounded-full bg-purple-500 px-3 py-1 text-white transition-colors duration-300 hover:bg-purple-500 md:bg-gray-500"
>
Twitch
</div>
<div
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#ff0000] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#ff0000] hover:text-white md:bg-gray-500"
>
YouTube
</div>
</div>
</div>
</Card>
</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>