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

changed from SPA to MPA

Browse source
This commit is contained in:
liyunze 2024-01-19 14:42:33 +08:00
parent 2c9a63589c
commit e691c3058c
17 changed files with 459 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
package-lock.json generated
View file

@ -11,7 +11,6 @@
"@astrojs/svelte": "^4.0.2",
"@astrojs/tailwind": "^5.0.0",
"astro": "^3.2.0",
"astro-spa": "^1.3.9",
"svelte": "^4.2.1",
"tailwindcss": "^3.3.3"
},
@ -1222,11 +1221,6 @@
"sharp": "^0.32.5"
}
},
"node_modules/astro-spa": {
"version": "1.3.9",
"resolved": "https://registry.npmjs.org/astro-spa/-/astro-spa-1.3.9.tgz",
"integrity": "sha512-VmXMUsKNHA1gjJYq/SO5EqRAmqifOhBOpOAaXnlH5skgTy0tq9fwANJhh1LJpaahPBGqXAaoIw6Gdq/SBRz9Ww=="
},
"node_modules/autoprefixer": {
"version": "10.4.16",
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.16.tgz",

1
package.json
View file

@ -13,7 +13,6 @@
"@astrojs/svelte": "^4.0.2",
"@astrojs/tailwind": "^5.0.0",
"astro": "^3.2.0",
"astro-spa": "^1.3.9",
"svelte": "^4.2.1",
"tailwindcss": "^3.3.3"
},

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

@ -1,8 +1,8 @@
---
interface Props {
primaryColor: string;
bgColor: string;
scaleOnHover: boolean;
bgColor?: string | undefined;
scaleOnHover?: boolean | undefined;
}
const { primaryColor, bgColor = "#282828", scaleOnHover = false } = Astro.props;

0
src/components/sections/Contact.astro → src/components/sections/ContactComponent.astro
View file

8
src/components/sections/Education.astro → src/components/sections/EducationComponent.astro
View file

@ -7,7 +7,7 @@ import Line from "../elements/NetworkLine.astro";
<h1 class="text-5xl text-center">Education</h1>
<div class="flex flex-col items-center pt-10">
<div class="w-[90%] md:w-[600px]">
<Card primaryColor="#EFB495" bgColor="#303030" scaleOnHover={false}>
<Card primaryColor="#FFAC21">
<div class="card-content">
<div class="flex flex-col justify-left w-full mb-3">
<h2 class="font-bold text-xl">
@ -26,8 +26,8 @@ import Line from "../elements/NetworkLine.astro";
</ul>
</div>
</Card>
<Line height="100px" />
<Card primaryColor="#FF8080" bgColor="#303030" scaleOnHover={false}>
<Line height="50px" />
<Card primaryColor="#EEBB00">
<div class="card-content">
<div class="flex flex-col justify-left w-full mb-3">
<h2 class="font-bold text-xl">Cambridge IGCSE</h2><h3>
@ -38,7 +38,7 @@ import Line from "../elements/NetworkLine.astro";
<h3 class="mb-1 font-bold text-lg">Achievements</h3>
<ul class="list-disc list-inside">
<li>IGCSE 5 A*s, 3 A's</li>
<li>President of Technology Society</li>
<li>President of Magnus Technology Society</li>
<li>Technology Manager of Prefects' Board</li>
</ul>
</div>

15
src/components/sections/Intro.svelte → src/components/sections/IntroComponent.svelte
View file

@ -94,7 +94,7 @@
text-white
flex flex-col"
>
<div class="px-1 lg:px-10 pt-10 pb-2 card-content w-full">
<div class="px-2 lg:px-10 pt-10 pb-2 card-content w-full">
<div class="flex flex-row h-20">
<div class="w-20 mr-1 flex justify-center items-center">
<img
@ -116,17 +116,18 @@
Good {greeting}, <br class="sm:hidden" />I'm Ryan!
</div>
<p class="text-left lg:text-justify">
I am born and raised in Malaysia, fluent in Mandarin and English.
I was born and raised in Malaysia, and fluent in Mandarin and
English.
<br /><br />
I'm passionate in developing open source projects to benefit others,
with vast experience in leadership roles.
I'm passionate about developing open source projects that benefit others,
and I have extensive experience in leadership roles.
<br /><br />
I'm also
<b
>well networked with various Twitch streamers and content
>well-connected with various Twitch streamers and content
creators</b
>, with prominent projects that positively impacted the streaming
community. I'm strongly motivated in the fields of
>, thanks to prominent projects that have had a positive impact on
the streaming community. I'm strongly motivated in the fields of
<b> web development</b>, <b>computer vision</b> and
<b>data science</b>.
</p>

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

@ -2,6 +2,8 @@
<label
class="fixed flex hamburger-menu bg-primary border-2 border-solid border-gray-100 rounded-lg"
aria-label="Menu"
transition:persist
transition:name="hamburger"
>
<span class="top-bun"></span>
<input type="checkbox" aria-label="Toggle menu" />
@ -11,27 +13,27 @@
<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">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="#education">Education</a
href="education">Education</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="contact">Contact</a
>
</nav>
</aside>
@ -39,6 +41,7 @@
id="navbar"
class="fixed z-50 top-0 w-full hidden md:flex justify-center
bg-[linear-gradient(180deg,_rgba(32,32,32,1)_70%,_rgba(32,32,32,0)_100%)]"
transition:name="navBar"
>
<div
id="navbar-div"
@ -46,28 +49,28 @@
>
<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">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="#education">education</a
href="education">education</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="contact">contact</a
>
</div>
</div>
@ -90,6 +93,8 @@
.hamburger-menu {
--x-width: calc(var(--hamburger-height) * 1.41421356237);
display: none;
translate: 0 -20px;
flex-direction: column;
@ -172,6 +177,12 @@
max-width: 10rem;
min-height: 100vh;
}
@media (max-width: 767px) {
.hamburger-menu {
display: flex;
}
}
</style>
<script defer is:inline>

0
src/components/sections/Projects.svelte → src/components/sections/ProjectsComponent.svelte
View file

24
src/components/sections/Skills.astro → src/components/sections/SkillsComponent.astro
View file

@ -7,7 +7,7 @@ import Line from "../elements/NetworkLine.astro";
<h1 class="text-center text-5xl">Skills</h1>
<div class="flex flex-col items-center">
<div class="w-[90%] md:w-[600px] pt-10">
<Card primaryColor="#9EDDFF" bgColor="#282828" scaleOnHover={false}>
<Card primaryColor="#19a7ce">
<div class="card-content">
<div class="flex flex-col justify-left w-full">
<h2 class="font-bold text-2xl">Web Development</h2>
@ -24,6 +24,7 @@ import Line from "../elements/NetworkLine.astro";
<div
class="w-fit text-white bg-gray-500 hover:bg-orange-700
rounded-full px-3 py-1 mr-1 my-1
cursor-default
transition-colors duration-300"
>
HTML
@ -31,6 +32,7 @@ import Line from "../elements/NetworkLine.astro";
<div
class="w-fit text-white bg-gray-500 hover:bg-blue-700
rounded-full px-3 py-1 mr-1 my-1
cursor-default
transition-colors duration-300"
>
CSS
@ -38,6 +40,7 @@ import Line from "../elements/NetworkLine.astro";
<div
class="w-fit text-white bg-gray-500 hover:bg-yellow-400 hover:text-black
rounded-full px-3 py-1 mr-1 my-1
cursor-default
transition-colors duration-300"
>
Javascript
@ -45,6 +48,7 @@ import Line from "../elements/NetworkLine.astro";
<div
class="w-fit text-white bg-gray-500 hover:bg-blue-400 hover:text-black
rounded-full px-3 py-1 mr-1 my-1
cursor-default
transition-colors duration-300"
>
TypeScript
@ -52,6 +56,7 @@ import Line from "../elements/NetworkLine.astro";
<div
class="w-fit text-white bg-gray-500 hover:bg-[#617CBE]
rounded-full px-3 py-1 mr-1 my-1
cursor-default
transition-colors duration-300"
>
PHP
@ -59,6 +64,7 @@ import Line from "../elements/NetworkLine.astro";
<div
class="w-fit text-white bg-gray-500 hover:bg-yellow-500 hover:text-black
rounded-full px-3 py-1 mr-1 my-1
cursor-default
transition-colors duration-300"
>
Express
@ -66,6 +72,7 @@ import Line from "../elements/NetworkLine.astro";
<div
class="w-fit text-white bg-gray-500 hover:bg-orange-500
rounded-full px-3 py-1 mr-1 my-1
cursor-default
transition-colors duration-300"
>
Svelte
@ -73,6 +80,7 @@ import Line from "../elements/NetworkLine.astro";
<div
class="w-fit text-white bg-gray-500 hover:bg-[#00D8FF] hover:text-black
rounded-full px-3 py-1 mr-1 my-1
cursor-default
transition-colors duration-300"
>
React
@ -80,6 +88,7 @@ import Line from "../elements/NetworkLine.astro";
<div
class="w-fit text-white bg-gray-500 hover:bg-green-500 hover:text-black
rounded-full px-3 py-1 mr-1 my-1
cursor-default
transition-colors duration-300"
>
Vue
@ -87,6 +96,7 @@ import Line from "../elements/NetworkLine.astro";
<div
class="w-fit text-white bg-gray-500 hover:bg-white hover:text-black
rounded-full px-3 py-1 mr-1 my-1
cursor-default
transition-colors duration-300"
>
Astro
@ -94,6 +104,7 @@ import Line from "../elements/NetworkLine.astro";
<div
class="w-fit text-white bg-gray-500 hover:bg-[#07B6D4] hover:text-black
rounded-full px-3 py-1 mr-1 my-1
cursor-default
transition-colors duration-300"
>
TailwindCSS
@ -101,6 +112,7 @@ import Line from "../elements/NetworkLine.astro";
<div
class="w-fit text-white bg-gray-500 hover:bg-[#8500C7]
rounded-full px-3 py-1 mr-1 my-1
cursor-default
transition-colors duration-300"
>
Vite
@ -109,7 +121,7 @@ import Line from "../elements/NetworkLine.astro";
</div>
</Card>
<Line height="50px" />
<Card primaryColor="#B0D9B1" bgColor="#282828" scaleOnHover={false}>
<Card primaryColor="#a1eebd">
<div class="card-content">
<div class="flex flex-col justify-left w-full">
<h2 class="font-bold text-2xl">Data Science</h2>
@ -128,6 +140,7 @@ import Line from "../elements/NetworkLine.astro";
<div
class="w-fit text-white bg-gray-500 hover:text-white hover:bg-blue-700
rounded-full px-3 py-1 mr-1 my-1
cursor-default
transition-colors duration-300"
>
Python
@ -135,6 +148,7 @@ import Line from "../elements/NetworkLine.astro";
<div
class="w-fit text-white bg-gray-500 hover:bg-cyan-500
rounded-full px-3 py-1 mr-1 my-1
cursor-default
transition-colors duration-300"
>
R
@ -142,6 +156,7 @@ import Line from "../elements/NetworkLine.astro";
<div
class="w-fit text-white bg-gray-500 hover:bg-green-600
rounded-full px-3 py-1 mr-1 my-1
cursor-default
transition-colors duration-300"
>
OpenCV
@ -149,6 +164,7 @@ import Line from "../elements/NetworkLine.astro";
<div
class="w-fit text-white bg-gray-500 hover:bg-blue-500 hover:text-black
rounded-full px-3 py-1 mr-1 my-1
cursor-default
transition-colors duration-300"
>
SAS
@ -156,6 +172,7 @@ import Line from "../elements/NetworkLine.astro";
<div
class="w-fit text-white bg-gray-500 hover:bg-orange-700
rounded-full px-3 py-1 mr-1 my-1
cursor-default
transition-colors duration-300"
>
MySQL
@ -163,6 +180,7 @@ import Line from "../elements/NetworkLine.astro";
<div
class="w-fit text-white bg-gray-500 hover:bg-blue-800
rounded-full px-3 py-1 mr-1 my-1
cursor-default
transition-colors duration-300"
>
Pandas
@ -170,6 +188,7 @@ import Line from "../elements/NetworkLine.astro";
<div
class="w-fit text-white bg-gray-500 hover:bg-green-700
rounded-full px-3 py-1 mr-1 my-1
cursor-default
transition-colors duration-300"
>
Selenium
@ -177,6 +196,7 @@ import Line from "../elements/NetworkLine.astro";
<div
class="w-fit text-white bg-gray-500 hover:bg-gray-200 hover:text-black
rounded-full px-3 py-1 mr-1 my-1
cursor-default
transition-colors duration-300"
>
BeautifulSoup4

7
src/components/sections/WhatIDo.astro → src/components/sections/WhatIDoComponent.astro
View file

@ -6,12 +6,11 @@ import Card from "../elements/Card.astro";
<div
class="w-full h-fit flex flex-col justify-center items-center max-w-[1440px]"
>
<div class="h-[1px] w-1/3 bg-[#404040] mb-10"></div>
<h1 class="text-center text-5xl mb-10">What I Do</h1>
<div
class="grid grid-cols-1 w-[90%] sm:w-[350px] lg:w-[90%] lg:grid-cols-3 place-content-center justify-center xl:w-4/5 gap-5 xl:gap-12"
>
<Card primaryColor="#B0D9B1" bgColor="#282828" scaleOnHover={true}>
<Card primaryColor="#19a7ce" scaleOnHover={true}>
<div class="card-content">
<h2 class="font-bold text-xl text-center">
Web Development
@ -24,7 +23,7 @@ import Card from "../elements/Card.astro";
</div>
</Card>
<Card primaryColor="#40F8FF" bgColor="#282828" scaleOnHover={true}>
<Card primaryColor="#a1eebd" scaleOnHover={true}>
<div class="card-content">
<h2 class="font-bold text-xl text-center">Data Science</h2>
<hr class="w-full" />
@ -36,7 +35,7 @@ import Card from "../elements/Card.astro";
</div>
</Card>
<Card primaryColor="#9D76C1" bgColor="#282828" scaleOnHover={true}>
<Card primaryColor="#9D76C1" scaleOnHover={true}>
<div class="card-content">
<h2 class="font-bold text-xl text-center">
Content Creation

14
src/layouts/Layout.astro
View file

@ -1,22 +1,18 @@
---
// @ts-ignore
import { Spa } from "astro-spa";
interface Props {
title: string;
description: string;
}
const { title } = Astro.props;
const { title, description } = Astro.props;
import { ViewTransitions } from "astro:transitions";
---
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="description"
content="Ryan is a software developer, streamer and Computer Science undergraduate. Learn more about him and his skills here!"
/>
<meta name="description" content={description} />
<meta name="viewport" content="width=device-width" /><meta
name="keywords"
content="Rython, student, developer, frontend, web developer, streamer, coworking"
@ -29,7 +25,7 @@ const { title } = Astro.props;
</head>
<body>
<slot />
<Spa />
<ViewTransitions />
</body>
</html>
<style is:global>

55
src/pages/contact.astro Normal file
View file

@ -0,0 +1,55 @@
---
import NavBar from "../components/sections/NavBar.astro";
import Layout from "../layouts/Layout.astro";
import ContactComponent from "../components/sections/ContactComponent.astro";
import Card from "../components/elements/Card.astro";
---
<Layout
title="Contact"
description="Find out how to contact RythonDev, for sponsorship offers or collaboration opportunities!"
>
<NavBar />
<div id="what-i-do" class="mt-10 pt-20">
<h1 class="text-center text-5xl">Contact</h1>
<div class="mt-10 flex justify-center items-center">
<div class="w-[90%] md:w-[600px]">
<Card primaryColor="#40A2D8">
<div class="card-content">
<div class="flex flex-col justify-left w-full mb-3">
<h2 class="font-bold text-xl text-center">
Seeking a young dev with fresh ideas and a
hunger to make a difference?
</h2>
</div>
<hr class="w-full mb-3" />
<div class="text-center">
Whether it's sponsorships or collaboration
opportunities, drop me a line and let's spark some
digital magic!
</div>
</div>
</Card>
</div>
</div>
<div class="mt-10">
<ContactComponent />
</div>
</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;
padding: 2rem 2rem;
border-radius: 1.25rem;
overflow: hidden;
}
</style>

12
src/pages/education.astro Normal file
View file

@ -0,0 +1,12 @@
---
import NavBar from "../components/sections/NavBar.astro";
import Layout from "../layouts/Layout.astro";
import EducationComponent from "../components/sections/EducationComponent.astro";
---
<Layout title="Education" description="Find out RythonDev's previous education">
<NavBar />
<div id="Education" class="mt-10">
<EducationComponent />
</div>
</Layout>

23
src/pages/index.astro
View file

@ -2,27 +2,30 @@
import NavBar from "../components/sections/NavBar.astro";
import Layout from "../layouts/Layout.astro";
import NetworkLine from "../components/elements/NetworkLine.astro";
import WhatIDo from "../components/sections/WhatIDo.astro";
import Intro from "../components/sections/Intro.svelte";
import Projects from "../components/sections/Projects.svelte";
import Education from "../components/sections/Education.astro";
import Skills from "../components/sections/Skills.astro";
import Contact from "../components/sections/Contact.astro";
import WhatIDo from "../components/sections/WhatIDoComponent.astro";
import Intro from "../components/sections/IntroComponent.svelte";
import Projects from "../components/sections/ProjectsComponent.svelte";
import Education from "../components/sections/EducationComponent.astro";
import Skills from "../components/sections/SkillsComponent.astro";
import Contact from "../components/sections/ContactComponent.astro";
import Card from "../components/elements/Card.astro";
---
<Layout title="Ryan's Portfolio">
<Layout
title="Ryan's Portfolio"
description="Ryan is a software developer, streamer and Computer Science undergraduate. Learn more about him and his skills here!"
>
<NavBar />
<div id="home" class="pt-20 flex justify-center items-center">
<div class="w-[90%] xl:w-1/2 lg:w-1/2 max-w-[1080px]">
<Card bgColor="#252525" primaryColor="#BEADFA" scaleOnHover={false}>
<Card bgColor="#252525" primaryColor="#BEADFA">
<Intro client:load />
</Card>
</div>
</div>
<div id="what-i-do">
<NetworkLine height="70px" />
<div id="what-i-do">
<div class="h-[1px] w-1/3 bg-[#404040] mb-10 mx-auto"></div>
<WhatIDo />
</div>
<div id="projects">

12
src/pages/projects.astro Normal file
View file

@ -0,0 +1,12 @@
---
import NavBar from "../components/sections/NavBar.astro";
import Layout from "../layouts/Layout.astro";
import ProjectsComponent from "../components/sections/ProjectsComponent.svelte";
---
<Layout title="Projects" description="View what projects RythonDev has made">
<NavBar />
<div id="what-i-do" class="mt-10 pb-20">
<ProjectsComponent />
</div>
</Layout>

92
src/pages/skills.astro Normal file
View file

@ -0,0 +1,92 @@
---
import NavBar from "../components/sections/NavBar.astro";
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";
---
<Layout
title="Skills"
description="Learn what skills RythonDev has honed in the past few years"
>
<NavBar />
<div id="skills" class="mt-10 pb-20">
<SkillsComponent />
<Line height="50px" />
<div class="w-[90%] md:w-[600px] mx-auto">
<Card primaryColor="#9D76C1">
<div class="card-content">
<div class="flex flex-col justify-left w-full">
<h2 class="font-bold text-2xl">Content Creation</h2>
</div>
<hr class="w-full" />
<p class="text-left lg:text-justify">
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 work flow.
</p>
<div class="w-full flex flex-row flex-wrap justify-start">
<div
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
cursor-default
transition-colors duration-300"
>
OBS
</div>
<div
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
cursor-default
transition-colors duration-300"
>
DaVinci Resolve
</div>
<div
class="w-fit text-white bg-gray-500 hover:bg-purple-500
rounded-full px-3 py-1 mr-1 my-1
cursor-default
transition-colors duration-300"
>
Twitch
</div>
<div
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
cursor-default
transition-colors duration-300"
>
YouTube
</div>
</div>
</div>
</Card>
</div>
</div>
</Layout>
<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>

208
src/pages/what-i-do.astro Normal file
View file

@ -0,0 +1,208 @@
---
import NavBar from "../components/sections/NavBar.astro";
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";
---
<Layout
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 pt-20 pb-20">
<WhatIDoComponent />
<div class="mx-auto w-[90%] md:w-[750px] mt-20">
<Card primaryColor="#19a7ce">
<div class="card-content">
<h2
id="web-dev"
class="font-bold text-2xl animate-gradient"
>
Web Development
</h2>
<hr class="w-full mb-3 mt-3" />
<div class="mb-5">
<h3 class="font-bold text-xl">Websites</h3>
<p class="mt-1 md:text-justify 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 weave your unique
narrative into every strand of your website.
</p>
</div>
<div class="mb-5">
<h3 class="font-bold text-xl">Web Apps</h3>
<p class="mt-1 md:text-justify 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
transform complex ideas into elegant tools that
seamlessly integrate into your ecosystem.
</p>
</div>
<div>
<h3 class="font-bold text-xl">Widgets</h3>
<p class="mt-1 md:text-justify text-left">
Leveraging my web development skills, I built stream
widgets to level up the stream! Easy to use and
customize, my work have been used by 100+ streamers
from pomodoro timers to to-do lists!
</p>
</div>
</div>
</Card>
<Line height="50px" />
<Card primaryColor="#a1eebd">
<div class="card-content">
<h2
id="data-science"
class="font-bold text-2xl animate-gradient"
>
Data Science
</h2>
<hr class="w-full mb-3 mt-3" />
<div class="mb-5">
<h3 class="font-bold text-xl">
Data Analysis and Visualization
</h3>
<p class="mt-1 md:text-justify text-left">
I'm your data artist, translating numbers into works
of art that inform, inspire, and guide
decision-making. We'll create visually compelling
narratives that turn dry statistics into captivating
stories using Python and R.
</p>
</div>
<div class="mb-5">
<h3 class="font-bold text-xl">
Statistics and Probability
</h3>
<p class="mt-1 md:text-justify text-left">
Every number tells a story, but it takes the
language of statistics and probability to truly
understand it. Our world is awash in data, but it's
only through these powerful tools that we can
transform it into meaningful insights and actionable
intelligence.
</p>
</div>
<div>
<h3 class="font-bold text-xl">Machine Learning</h3>
<p class="mt-1 md:text-justify 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="font-bold text-2xl animate-gradient"
>
Content Creation
</h2>
<hr class="w-full mb-3 mt-3" />
<div class="mb-5">
<h3 class="font-bold text-xl">Streaming</h3>
<p class="mt-1 md:text-justify text-left">
Streaming isn't just about entertainment, it's about
building a brand that resonates and inspires.
Streaming allows me to enhance my marketing skills
and the ability to entertain and engage with viewers
in real time.
</p>
</div>
<div class="mb-5">
<h3 class="font-bold text-xl">Video Editing</h3>
<p class="mt-1 md:text-justify 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="font-bold text-xl">Personality</h3>
<p class="mt-1 md:text-justify text-left">
I believe content should be an adventure, not a
formula. my world is a vibrant playground of
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>
</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;
padding: 2rem 2rem;
border-radius: 1.25rem;
overflow: hidden;
}
#web-dev {
background: linear-gradient(
90deg,
#afd3e2 0%,
#19a7ce 45%,
#a5d7e8 100%
);
background-size: 300%;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
#data-science {
background: linear-gradient(
90deg,
#a1eebd 0%,
#7bd3ea 45%,
#f6f7c4 100%
);
background-size: 300%;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
#content-creation {
background: linear-gradient(90deg, #9d76c1 40%, #ff6868 90%);
background-size: 300%;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>