mirror of
https://github.com/liyunze-coding/RythonDev.git
synced 2026-09-22 07:44:26 +00:00
text content update
This commit is contained in:
liyunze
parent
4b43bcc578
commit
f542b11d41
3 changed files with 282 additions and 280 deletions
3
.gitignore
vendored
3
.gitignore
vendored
|
|
@ -19,3 +19,6 @@ pnpm-debug.log*
|
|||
|
||||
# macOS-specific files
|
||||
.DS_Store
|
||||
|
||||
# Other files
|
||||
todo.md
|
||||
|
|
@ -4,107 +4,108 @@ import Line from "../elements/NetworkLine.astro";
|
|||
---
|
||||
|
||||
<div id="Experience" class="h-fit">
|
||||
<h1 class="text-center text-5xl">Experience</h1>
|
||||
<div class="flex flex-col items-center pt-10">
|
||||
<div class="w-[90%] md:w-[600px]">
|
||||
<Card primaryColor="#F6DFD8">
|
||||
<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">
|
||||
<h2 class="text-xl font-bold">
|
||||
Bachelor of Computer Science student
|
||||
</h2>
|
||||
<h3>July 2024 - Present</h3>
|
||||
</div>
|
||||
<hr class="mb-3 w-full" />
|
||||
<p class="mb-3">
|
||||
Currently pursuing my Bachelor's degree in Computer
|
||||
Science in Melbourne as a Vice-Chancellor 50%
|
||||
Scholarship Awardee.
|
||||
</p>
|
||||
<h3 class="mb-1 text-lg font-bold">Relevant skills:</h3>
|
||||
<div
|
||||
class="flex flex-col items-start justify-start gap-0 md:flex-row md:gap-10"
|
||||
>
|
||||
<ul class="list-inside list-disc">
|
||||
<li>C#</li>
|
||||
<li>Vue.JS</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
<Line height="50px" />
|
||||
<Card primaryColor="#F6DFD8">
|
||||
<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">
|
||||
<h2 class="text-xl font-bold">
|
||||
Lead Frontend Web Developer
|
||||
</h2>
|
||||
<h3 class="font-bold">@ JW BizTech</h3>
|
||||
<h3>Dec 2024 - Present</h3>
|
||||
</div>
|
||||
<hr class="mb-3 w-full" />
|
||||
<p class="mb-3">
|
||||
Led implementation of frontend technology stack for
|
||||
websites. Worked closely with UI/UX designers to
|
||||
translate designs into code, and with backend developers
|
||||
to ensure smooth integration with CMS.
|
||||
</p>
|
||||
<h3 class="mb-1 text-lg font-bold">Relevant skills:</h3>
|
||||
<h1 class="text-center text-5xl">Experience</h1>
|
||||
<div class="flex flex-col items-center pt-10">
|
||||
<div class="w-[90%] md:w-[600px]">
|
||||
<Card primaryColor="#F6DFD8">
|
||||
<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">
|
||||
<h2 class="text-xl font-bold">
|
||||
Bachelor of Computer Science student
|
||||
</h2>
|
||||
<h3>July 2024 - Present</h3>
|
||||
</div>
|
||||
<hr class="mb-3 w-full" />
|
||||
<p class="mb-3">
|
||||
Currently pursuing my Bachelor's degree in Computer
|
||||
Science in Australia as a 50% Vice-Chancellor Scholar.
|
||||
</p>
|
||||
<h3 class="mb-1 text-lg font-bold">Relevant skills:</h3>
|
||||
<div
|
||||
class="flex flex-col items-start justify-start gap-0 md:flex-row md:gap-10"
|
||||
>
|
||||
<ul class="list-inside list-disc">
|
||||
<li>Java</li>
|
||||
<li>Kotlin</li>
|
||||
<li>C#</li>
|
||||
<li>Vue.JS</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
<Line height="50px" />
|
||||
<Card primaryColor="#F6DFD8">
|
||||
<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">
|
||||
<h2 class="text-xl font-bold">
|
||||
Lead Frontend Web Developer
|
||||
</h2>
|
||||
<h3 class="font-bold">@ JW BizTech</h3>
|
||||
<h3>Dec 2024 - Present</h3>
|
||||
</div>
|
||||
<hr class="mb-3 w-full" />
|
||||
<p class="mb-3">
|
||||
Led implementation of frontend technology stack for
|
||||
websites. Worked closely with UI/UX designers to
|
||||
translate designs into code, and with backend developers
|
||||
to ensure smooth integration with CMS.
|
||||
</p>
|
||||
<h3 class="mb-1 text-lg font-bold">Relevant skills:</h3>
|
||||
|
||||
<ul class="list-inside list-disc">
|
||||
<li>Astro</li>
|
||||
<li>Typescript</li>
|
||||
<li>TailwindCSS</li>
|
||||
</ul>
|
||||
</div>
|
||||
</Card>
|
||||
<Line height="50px" />
|
||||
<Card primaryColor="#F6DFD8">
|
||||
<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">
|
||||
<h2 class="text-xl font-bold">
|
||||
Frontend Web Developer Intern
|
||||
</h2>
|
||||
<h3>Jan 2024 - April 2024</h3>
|
||||
</div>
|
||||
<hr class="mb-3 w-full" />
|
||||
<p class="mb-3">
|
||||
During my internship, I learnt how to build WordPress
|
||||
sites and further enhance my skills in PHP. I also
|
||||
learnt how to closely work with UI/UX designers and pay
|
||||
close attention to details with the designs I am given.
|
||||
</p>
|
||||
<h3 class="mb-1 text-lg font-bold">Relevant skills:</h3>
|
||||
<div
|
||||
class="flex flex-col items-start justify-start gap-0 md:flex-row md:gap-10"
|
||||
>
|
||||
<ul class="list-inside list-disc">
|
||||
<li>WordPress & PHP</li>
|
||||
<li>Typescript</li>
|
||||
<li>TailwindCSS</li>
|
||||
</ul>
|
||||
<ul class="list-inside list-disc">
|
||||
<li>Adobe XD</li>
|
||||
<li>NextJS & React</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="list-inside list-disc">
|
||||
<li>Astro</li>
|
||||
<li>Typescript</li>
|
||||
<li>TailwindCSS</li>
|
||||
</ul>
|
||||
</div>
|
||||
</Card>
|
||||
<Line height="50px" />
|
||||
<Card primaryColor="#F6DFD8">
|
||||
<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">
|
||||
<h2 class="text-xl font-bold">
|
||||
Frontend Web Developer Intern
|
||||
</h2>
|
||||
<h3>Jan 2024 - April 2024</h3>
|
||||
</div>
|
||||
<hr class="mb-3 w-full" />
|
||||
<p class="mb-3">
|
||||
During my internship, I learnt how to build WordPress
|
||||
sites and further enhance my skills in PHP. I also
|
||||
learnt how to closely work with UI/UX designers and pay
|
||||
close attention to details with the designs I am given.
|
||||
</p>
|
||||
<h3 class="mb-1 text-lg font-bold">Relevant skills:</h3>
|
||||
<div
|
||||
class="flex flex-col items-start justify-start gap-0 md:flex-row md:gap-10"
|
||||
>
|
||||
<ul class="list-inside list-disc">
|
||||
<li>WordPress & PHP</li>
|
||||
<li>Typescript</li>
|
||||
<li>TailwindCSS</li>
|
||||
</ul>
|
||||
<ul class="list-inside list-disc">
|
||||
<li>Adobe XD</li>
|
||||
<li>NextJS & React</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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;
|
||||
}
|
||||
.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>
|
||||
|
|
|
|||
|
|
@ -8,202 +8,200 @@ import Footer from "../components/sections/FooterComponent.astro";
|
|||
---
|
||||
|
||||
<Layout
|
||||
title="What I Do"
|
||||
description="What Ryan's skillsets are, in Data Science, Web Development and Content Creation"
|
||||
title="What I Do"
|
||||
description="What Ryan's skillsets are, in Data Science, Web Development and Content Creation"
|
||||
>
|
||||
<NavBar />
|
||||
<div id="what-i-do" class="mt-10 pb-20 pt-20">
|
||||
<WhatIDoComponent />
|
||||
<NavBar />
|
||||
<div id="what-i-do" class="mt-10 pb-20 pt-20">
|
||||
<WhatIDoComponent />
|
||||
|
||||
<div class="mx-auto mt-20 w-[90%] md:w-[750px]">
|
||||
<Card primaryColor="#19a7ce">
|
||||
<div class="card-content">
|
||||
<h2
|
||||
id="web-dev"
|
||||
class="animate-gradient text-2xl font-bold"
|
||||
>
|
||||
Web Development
|
||||
</h2>
|
||||
<hr class="mb-3 mt-3 w-full" />
|
||||
<div class="mb-5">
|
||||
<h3 class="text-xl font-bold">Websites</h3>
|
||||
<p class="mt-1 text-left">
|
||||
I go beyond coding; I'm a developer who translates
|
||||
your vision into a captivating online presence.
|
||||
Through custom designs, intuitive user experiences,
|
||||
and special attention to detail, I bring your brand
|
||||
to life online.
|
||||
</p>
|
||||
</div>
|
||||
<div class="mb-5">
|
||||
<h3 class="text-xl font-bold">Web Apps</h3>
|
||||
<p class="mt-1 text-left">
|
||||
I craft solutions that streamline workflows, boost
|
||||
efficiency, and empower your users to achieve more.
|
||||
With a focus on intuitive interfaces, powerful
|
||||
functionality, and data-driven optimization, I
|
||||
design and develop robust, scalable applications
|
||||
that align with your business objectives.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-bold">Widgets</h3>
|
||||
<p class="mt-1 text-left">
|
||||
Leveraging my web development skills, I built stream
|
||||
widgets to level up livestreams on Twitch and
|
||||
YouTube. Easy to use and customize, my work have
|
||||
been used by 100+ Twitch streamers!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
<Line height="50px" />
|
||||
<Card primaryColor="#a1eebd">
|
||||
<div class="card-content">
|
||||
<h2
|
||||
id="data-science"
|
||||
class="animate-gradient text-2xl font-bold"
|
||||
>
|
||||
Data Science
|
||||
</h2>
|
||||
<hr class="mb-3 mt-3 w-full" />
|
||||
<div class="mb-5">
|
||||
<h3 class="text-xl font-bold">
|
||||
Data Analysis and Visualization
|
||||
</h3>
|
||||
<p class="mt-1 text-left">
|
||||
Translating numbers into works of art that inform,
|
||||
inspire, and guide decision-making. I can create
|
||||
visually compelling narratives that turn dry
|
||||
statistics into captivating stories.
|
||||
</p>
|
||||
</div>
|
||||
<div class="mb-5">
|
||||
<h3 class="text-xl font-bold">
|
||||
Statistics and Probability
|
||||
</h3>
|
||||
<p class="mt-1 text-left">
|
||||
Every number tells a story, but it takes the
|
||||
language of statistics and probability to truly
|
||||
understand it. Our world is full of data, but it's
|
||||
only through powerful tools that we can transform it
|
||||
into meaningful insights and actionable
|
||||
intelligence.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-bold">Machine Learning</h3>
|
||||
<p class="mt-1 text-left">
|
||||
Machine learning isn't just about mimicking human
|
||||
intelligence, it's about surpassing it. We push the
|
||||
boundaries of what's possible, collaborating with
|
||||
code to solve problems beyond human capabilities.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
<Line height="50px" />
|
||||
<Card primaryColor="#9D76C1">
|
||||
<div class="card-content">
|
||||
<h2
|
||||
id="content-creation"
|
||||
class="animate-gradient text-2xl font-bold"
|
||||
>
|
||||
Content Creation
|
||||
</h2>
|
||||
<hr class="mb-3 mt-3 w-full" />
|
||||
<div class="mb-5">
|
||||
<h3 class="text-xl font-bold">Streaming</h3>
|
||||
<p class="mt-1 text-left">
|
||||
Streaming isn't just about entertainment, it's about
|
||||
building a brand that resonates and inspires.
|
||||
Streaming allows me to engage with viewers in real
|
||||
time, developing their trust and allows me to build
|
||||
a community of like-minded people.
|
||||
</p>
|
||||
</div>
|
||||
<div class="mb-5">
|
||||
<h3 class="text-xl font-bold">Video Editing</h3>
|
||||
<p class="mt-1 text-left">
|
||||
I may be at the beginning of my video editing
|
||||
adventure, but I'm committed to making your vision a
|
||||
reality. I'll learn, adapt, and work tirelessly to
|
||||
translate your ideas into compelling videos that
|
||||
resonate with your audience.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-bold">Personality</h3>
|
||||
<p class="mt-1 text-left">
|
||||
I believe content should be an adventure, not a
|
||||
formula. My livestreams revolve around unscripted
|
||||
interactions, quirky challenges, and raw emotional
|
||||
moments. It's messy, it's exhilarating, and it's
|
||||
uniquely me.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
<Footer />
|
||||
<div class="mx-auto mt-20 w-[90%] md:w-[750px]">
|
||||
<Card primaryColor="#19a7ce">
|
||||
<div class="card-content">
|
||||
<h2
|
||||
id="web-dev"
|
||||
class="animate-gradient text-2xl font-bold"
|
||||
>
|
||||
Web Development
|
||||
</h2>
|
||||
<hr class="mb-3 mt-3 w-full" />
|
||||
<div class="mb-5">
|
||||
<h3 class="text-xl font-bold">Websites</h3>
|
||||
<p class="mt-1 text-left">
|
||||
I am beyond just a programmer; I'm a developer who
|
||||
can turn your vision into a clickable product.
|
||||
Through custom designs, intuitive user experiences,
|
||||
and special attention to detail, I can bring your
|
||||
brand to life online.
|
||||
</p>
|
||||
</div>
|
||||
<div class="mb-5">
|
||||
<h3 class="text-xl font-bold">Web Apps</h3>
|
||||
<p class="mt-1 text-left">
|
||||
With a growing dislike against tools with premium
|
||||
features stuck behind a subscription service, I
|
||||
design and craft solutions that solves problems and
|
||||
improves my workflow.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-bold">Widgets</h3>
|
||||
<p class="mt-1 text-left">
|
||||
Leveraging my web development skills, I built stream
|
||||
widgets to level up livestreams on Twitch and
|
||||
YouTube. Easy to use and customize, my work have
|
||||
been used by 100+ Twitch streamers!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
<Line height="50px" />
|
||||
<Card primaryColor="#a1eebd">
|
||||
<div class="card-content">
|
||||
<h2
|
||||
id="data-science"
|
||||
class="animate-gradient text-2xl font-bold"
|
||||
>
|
||||
Data Science
|
||||
</h2>
|
||||
<hr class="mb-3 mt-3 w-full" />
|
||||
<div class="mb-5">
|
||||
<h3 class="text-xl font-bold">
|
||||
Data Analysis and Visualization
|
||||
</h3>
|
||||
<p class="mt-1 text-left">
|
||||
Translating numbers into works of art that inform,
|
||||
inspire, and guide decision-making. I can create
|
||||
visually compelling narratives that turn dry
|
||||
statistics into captivating stories.
|
||||
</p>
|
||||
</div>
|
||||
<div class="mb-5">
|
||||
<h3 class="text-xl font-bold">
|
||||
Statistics and Probability
|
||||
</h3>
|
||||
<p class="mt-1 text-left">
|
||||
Every number tells a story, but it takes the
|
||||
language of statistics and probability to truly
|
||||
understand it. Our world is full of data, but it's
|
||||
only through powerful tools that we can transform it
|
||||
into meaningful insights and actionable
|
||||
intelligence.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-bold">Machine Learning</h3>
|
||||
<p class="mt-1 text-left">
|
||||
Machine learning isn't just about mimicking human
|
||||
intelligence, it's about surpassing it. We push the
|
||||
boundaries of what's possible, collaborating with
|
||||
code to solve problems beyond human capabilities.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
<Line height="50px" />
|
||||
<Card primaryColor="#9D76C1">
|
||||
<div class="card-content">
|
||||
<h2
|
||||
id="content-creation"
|
||||
class="animate-gradient text-2xl font-bold"
|
||||
>
|
||||
Content Creation
|
||||
</h2>
|
||||
<hr class="mb-3 mt-3 w-full" />
|
||||
<div class="mb-5">
|
||||
<h3 class="text-xl font-bold">Streaming</h3>
|
||||
<p class="mt-1 text-left">
|
||||
Streaming isn't just about entertainment, it's about
|
||||
building a brand that resonates and inspires.
|
||||
Streaming allows me to engage with viewers in real
|
||||
time, developing their trust and allows me to build
|
||||
a community of like-minded people.
|
||||
</p>
|
||||
</div>
|
||||
<div class="mb-5">
|
||||
<h3 class="text-xl font-bold">Video Marketing</h3>
|
||||
<p class="mt-1 text-left">
|
||||
In this world where brand marketing centres around
|
||||
short videos (Instagram reels, Tiktok videos,
|
||||
YouTube shorts...), I aim to craft and produce
|
||||
videos that will engage with your targeted audience
|
||||
while maintaining a brand friendly identity.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-bold">Personality</h3>
|
||||
<p class="mt-1 text-left">
|
||||
I believe content should be an adventure, not a
|
||||
formula. My livestreams revolve around unscripted
|
||||
interactions, quirky challenges, and raw emotional
|
||||
moments. It's messy, it's exhilarating, and it's
|
||||
uniquely me.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
<Footer />
|
||||
</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;
|
||||
padding: 2rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
.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;
|
||||
padding: 2rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#web-dev {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
#afd3e2 0%,
|
||||
#19a7ce 45%,
|
||||
#a5d7e8 100%
|
||||
);
|
||||
#web-dev {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
#afd3e2 0%,
|
||||
#19a7ce 45%,
|
||||
#a5d7e8 100%
|
||||
);
|
||||
|
||||
background-size: 300%;
|
||||
background-size: 300%;
|
||||
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
#data-science {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
#a1eebd 0%,
|
||||
#7bd3ea 45%,
|
||||
#f6f7c4 100%
|
||||
);
|
||||
#data-science {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
#a1eebd 0%,
|
||||
#7bd3ea 45%,
|
||||
#f6f7c4 100%
|
||||
);
|
||||
|
||||
background-size: 300%;
|
||||
background-size: 300%;
|
||||
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
#content-creation {
|
||||
background: linear-gradient(90deg, #9d76c1 40%, #ff6868 90%);
|
||||
#content-creation {
|
||||
background: linear-gradient(90deg, #d09dff 40%, #ff6868 90%);
|
||||
|
||||
background-size: 300%;
|
||||
background-size: 300%;
|
||||
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue