mirror of
https://github.com/liyunze-coding/RythonDev.git
synced 2026-09-22 15:53:57 +00:00
massive update: moved to Bun, modified content
This commit is contained in:
liyunze
parent
2bd51de3ad
commit
f7aad3af6c
22 changed files with 750 additions and 7407 deletions
47
.github/workflows/deploy.yml
vendored
47
.github/workflows/deploy.yml
vendored
|
|
@ -1,39 +1,48 @@
|
||||||
|
# Simple workflow for deploying static content to GitHub Pages
|
||||||
name: Deploy to GitHub Pages
|
name: Deploy to GitHub Pages
|
||||||
|
|
||||||
on:
|
on:
|
||||||
# Trigger the workflow every time you push to the `main` branch
|
# Runs on pushes targeting the default branch
|
||||||
# Using a different branch name? Replace `main` with your branch’s name
|
|
||||||
push:
|
push:
|
||||||
branches: [main]
|
branches: ["main"]
|
||||||
# Allows you to run this workflow manually from the Actions tab on GitHub.
|
|
||||||
|
# Allows you to run this workflow manually from the Actions tab
|
||||||
workflow_dispatch:
|
workflow_dispatch:
|
||||||
|
|
||||||
# Allow this job to clone the repo and create a page deployment
|
# Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages
|
||||||
permissions:
|
permissions:
|
||||||
contents: read
|
contents: read
|
||||||
pages: write
|
pages: write
|
||||||
id-token: write
|
id-token: write
|
||||||
|
|
||||||
jobs:
|
# Allow one concurrent deployment
|
||||||
build:
|
concurrency:
|
||||||
runs-on: ubuntu-latest
|
group: "pages"
|
||||||
steps:
|
cancel-in-progress: true
|
||||||
- name: Checkout your repository using git
|
|
||||||
uses: actions/checkout@v3
|
|
||||||
- name: Install, build, and upload your site
|
|
||||||
uses: withastro/action@v1
|
|
||||||
# with:
|
|
||||||
# path: . # The root location of your Astro project inside the repository. (optional)
|
|
||||||
# node-version: 18 # The specific version of Node that should be used to build your site. Defaults to 18. (optional)
|
|
||||||
# package-manager: pnpm@latest # The Node package manager that should be used to install dependencies and build your site. Automatically detected based on your lockfile. (optional)
|
|
||||||
|
|
||||||
|
jobs:
|
||||||
|
# Single deploy job since we're just deploying
|
||||||
deploy:
|
deploy:
|
||||||
needs: build
|
|
||||||
runs-on: ubuntu-latest
|
|
||||||
environment:
|
environment:
|
||||||
name: github-pages
|
name: github-pages
|
||||||
url: ${{ steps.deployment.outputs.page_url }}
|
url: ${{ steps.deployment.outputs.page_url }}
|
||||||
|
runs-on: ubuntu-latest
|
||||||
steps:
|
steps:
|
||||||
|
- name: Checkout
|
||||||
|
uses: actions/checkout@v4
|
||||||
|
- name: Set up Bun
|
||||||
|
uses: oven-sh/setup-bun@v1
|
||||||
|
- name: Install dependencies
|
||||||
|
run: bun install
|
||||||
|
- name: Build
|
||||||
|
run: bun run build
|
||||||
|
- name: Setup Pages
|
||||||
|
uses: actions/configure-pages@v3
|
||||||
|
- name: Upload artifact
|
||||||
|
uses: actions/upload-pages-artifact@v1
|
||||||
|
with:
|
||||||
|
# Upload dist repository
|
||||||
|
path: "./dist"
|
||||||
- name: Deploy to GitHub Pages
|
- name: Deploy to GitHub Pages
|
||||||
id: deployment
|
id: deployment
|
||||||
uses: actions/deploy-pages@v1
|
uses: actions/deploy-pages@v1
|
||||||
|
|
|
||||||
BIN
bun.lockb
Normal file
BIN
bun.lockb
Normal file
Binary file not shown.
6711
package-lock.json
generated
6711
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -1,7 +1,7 @@
|
||||||
{
|
{
|
||||||
"name": "dev-portfolio",
|
"name": "dev-portfolio",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"version": "2.0.0",
|
"version": "3.0.0",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "astro dev",
|
"dev": "astro dev",
|
||||||
"start": "astro dev",
|
"start": "astro dev",
|
||||||
|
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 49 KiB After Width: | Height: | Size: 230 KiB |
BIN
public/images/projects/twitchplays.webp
Normal file
BIN
public/images/projects/twitchplays.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
6
public/images/socials/instagram.svg
Normal file
6
public/images/socials/instagram.svg
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||||
|
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 18C15.3137 18 18 15.3137 18 12C18 8.68629 15.3137 6 12 6C8.68629 6 6 8.68629 6 12C6 15.3137 8.68629 18 12 18ZM12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16Z" fill="#0F0F0F"/>
|
||||||
|
<path d="M18 5C17.4477 5 17 5.44772 17 6C17 6.55228 17.4477 7 18 7C18.5523 7 19 6.55228 19 6C19 5.44772 18.5523 5 18 5Z" fill="#0F0F0F"/>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.65396 4.27606C1 5.55953 1 7.23969 1 10.6V13.4C1 16.7603 1 18.4405 1.65396 19.7239C2.2292 20.8529 3.14708 21.7708 4.27606 22.346C5.55953 23 7.23969 23 10.6 23H13.4C16.7603 23 18.4405 23 19.7239 22.346C20.8529 21.7708 21.7708 20.8529 22.346 19.7239C23 18.4405 23 16.7603 23 13.4V10.6C23 7.23969 23 5.55953 22.346 4.27606C21.7708 3.14708 20.8529 2.2292 19.7239 1.65396C18.4405 1 16.7603 1 13.4 1H10.6C7.23969 1 5.55953 1 4.27606 1.65396C3.14708 2.2292 2.2292 3.14708 1.65396 4.27606ZM13.4 3H10.6C8.88684 3 7.72225 3.00156 6.82208 3.0751C5.94524 3.14674 5.49684 3.27659 5.18404 3.43597C4.43139 3.81947 3.81947 4.43139 3.43597 5.18404C3.27659 5.49684 3.14674 5.94524 3.0751 6.82208C3.00156 7.72225 3 8.88684 3 10.6V13.4C3 15.1132 3.00156 16.2777 3.0751 17.1779C3.14674 18.0548 3.27659 18.5032 3.43597 18.816C3.81947 19.5686 4.43139 20.1805 5.18404 20.564C5.49684 20.7234 5.94524 20.8533 6.82208 20.9249C7.72225 20.9984 8.88684 21 10.6 21H13.4C15.1132 21 16.2777 20.9984 17.1779 20.9249C18.0548 20.8533 18.5032 20.7234 18.816 20.564C19.5686 20.1805 20.1805 19.5686 20.564 18.816C20.7234 18.5032 20.8533 18.0548 20.9249 17.1779C20.9984 16.2777 21 15.1132 21 13.4V10.6C21 8.88684 20.9984 7.72225 20.9249 6.82208C20.8533 5.94524 20.7234 5.49684 20.564 5.18404C20.1805 4.43139 19.5686 3.81947 18.816 3.43597C18.5032 3.27659 18.0548 3.14674 17.1779 3.0751C16.2777 3.00156 15.1132 3 13.4 3Z" fill="#0F0F0F"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.1 KiB |
BIN
public/images/socials/kofi.webp
Normal file
BIN
public/images/socials/kofi.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
67
src/components/elements/Socials.svelte
Normal file
67
src/components/elements/Socials.svelte
Normal file
|
|
@ -0,0 +1,67 @@
|
||||||
|
<a href="https://github.com/liyunze-coding" target="_blank">
|
||||||
|
<div
|
||||||
|
class="bg-white rounded-full w-7 h-7 flex justify-center items-center mr-3 hover:invert transition-[filter] duration-150"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src="/images/socials/github.svg"
|
||||||
|
alt="github"
|
||||||
|
class="aspect-square max-w-full"
|
||||||
|
width="20"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="https://codepen.io/liyunze-coding" target="_blank">
|
||||||
|
<div
|
||||||
|
class="bg-white rounded-full w-7 h-7 flex justify-center items-center mr-3 hover:invert transition-[filter] duration-150"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src="/images/socials/codepen.svg"
|
||||||
|
alt="codepen"
|
||||||
|
class="w-5 h-5 aspect-square"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="https://youtube.com/@RythonDev" target="_blank">
|
||||||
|
<div
|
||||||
|
class="bg-white rounded-full w-7 h-7 flex justify-center items-center mr-3 transition-[filter,background-color] duration-150 hover:invert hover:bg-[#00ffff]"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src="/images/socials/youtube.svg"
|
||||||
|
alt="youtube"
|
||||||
|
class="w-5 h-5 aspect-square"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="https://twitch.tv/RythonDev" target="_blank">
|
||||||
|
<div
|
||||||
|
class="bg-white rounded-full w-7 h-7 flex justify-center items-center mr-3 transition-[filter,background-color] duration-150 hover:invert hover:bg-[#6eb900]"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src="/images/socials/twitch.svg"
|
||||||
|
alt="twitch"
|
||||||
|
class="w-4 h-4 aspect-square"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="https://instagram.com/RythonDev" target="_blank">
|
||||||
|
<div
|
||||||
|
class="bg-white rounded-full w-7 h-7 flex justify-center items-center mr-3 transition-[filter,background-color] duration-150 hover:invert hover:bg-[#1bbfa0]"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src="/images/socials/instagram.svg"
|
||||||
|
alt="twitch"
|
||||||
|
class="w-4 h-4 aspect-square"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="https://ko-fi.com/rython" target="_blank">
|
||||||
|
<div
|
||||||
|
class="bg-white rounded-full w-7 h-7 flex justify-center items-center mr-3 hover:bg-[#FF5E5B] transition-colors duration-150"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src="/images/socials/kofi.webp"
|
||||||
|
alt="twitch"
|
||||||
|
class="w-4 h-4 aspect-square translate-x-[1px] scale-125"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
@ -1,96 +0,0 @@
|
||||||
<div
|
|
||||||
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
|
|
||||||
id="title"
|
|
||||||
class="animate-gradient text-3xl text-center font-bold mb-3"
|
|
||||||
>
|
|
||||||
Get in Touch with me!
|
|
||||||
</div>
|
|
||||||
<div class="text-lg text-center mb-10 px-5">
|
|
||||||
I'm always open to new opportunities and collaborations!
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<a
|
|
||||||
class="text-center flex flex-row justify-center items-center border-2 border-blue-300 text-blue-300 px-5 py-5 hover:bg-blue-300 hover:text-black transition-colors duration-500 ease-in-out rounded-xl"
|
|
||||||
href="mailto:rythondev@gmail.com"
|
|
||||||
><span class="text-3xl mr-2">✉</span> Send me an email</a
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="absolute bottom-20 left-1/2 -translate-x-1/2 text-white flex flex-row"
|
|
||||||
>
|
|
||||||
<a href="https://github.com/liyunze-coding" target="_blank">
|
|
||||||
<div
|
|
||||||
class="bg-gray-300 rounded-full w-7 h-7 flex justify-center items-center mr-3 hover:bg-gray-200"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
src="/images/socials/github.svg"
|
|
||||||
alt="github"
|
|
||||||
class="aspect-square max-w-full"
|
|
||||||
width="20"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<a href="https://codepen.io/liyunze-coding" target="_blank">
|
|
||||||
<div
|
|
||||||
class="bg-gray-300 rounded-full w-7 h-7 flex justify-center items-center mr-3 hover:bg-gray-200 transition-colors duration-150"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
src="/images/socials/codepen.svg"
|
|
||||||
alt="codepen"
|
|
||||||
class="w-5 h-5 aspect-square"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<a href="https://youtube.com/@RythonDev" target="_blank">
|
|
||||||
<div
|
|
||||||
class="bg-gray-300 rounded-full w-7 h-7 flex justify-center items-center mr-3 hover:bg-red-400 transition-colors duration-150"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
src="/images/socials/youtube.svg"
|
|
||||||
alt="youtube"
|
|
||||||
class="w-5 h-5 aspect-square"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<a href="https://twitch.tv/RythonDev" target="_blank">
|
|
||||||
<div
|
|
||||||
class="bg-gray-300 rounded-full w-7 h-7 flex justify-center items-center mr-3 hover:bg-purple-400 transition-colors duration-150"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
src="/images/socials/twitch.svg"
|
|
||||||
alt="twitch"
|
|
||||||
class="w-4 h-4 aspect-square"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</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-2024 RythonDev
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
#title {
|
|
||||||
background: linear-gradient(
|
|
||||||
90deg,
|
|
||||||
#85e6c5 0%,
|
|
||||||
#a084e8 45%,
|
|
||||||
#33bbc5 100%
|
|
||||||
);
|
|
||||||
|
|
||||||
background-size: 300%;
|
|
||||||
|
|
||||||
background-clip: text;
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
56
src/components/sections/ContactComponent.svelte
Normal file
56
src/components/sections/ContactComponent.svelte
Normal file
|
|
@ -0,0 +1,56 @@
|
||||||
|
<script lang="ts">
|
||||||
|
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="flex flex-col justify-center items-center">
|
||||||
|
<div
|
||||||
|
id="title"
|
||||||
|
class="animate-gradient text-3xl text-center font-bold mb-3"
|
||||||
|
>
|
||||||
|
Get in Touch with me!
|
||||||
|
</div>
|
||||||
|
<div class="text-lg text-center mb-10 px-5">
|
||||||
|
I'm always open to new opportunities and collaborations!
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a
|
||||||
|
class="text-center flex flex-row justify-center items-center border-2 border-blue-300 text-blue-300 px-5 py-5 hover:bg-blue-300 hover:text-black transition-colors duration-300 ease-in-out rounded-xl"
|
||||||
|
href="mailto:rythondev@gmail.com"
|
||||||
|
><span class="text-3xl mr-2">✉</span> Send me an email</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="absolute bottom-20 left-1/2 -translate-x-1/2 text-white flex flex-row"
|
||||||
|
>
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
#title {
|
||||||
|
background: linear-gradient(
|
||||||
|
90deg,
|
||||||
|
#85e6c5 0%,
|
||||||
|
#a084e8 45%,
|
||||||
|
#33bbc5 100%
|
||||||
|
);
|
||||||
|
|
||||||
|
background-size: 300%;
|
||||||
|
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,64 +0,0 @@
|
||||||
---
|
|
||||||
import Card from "../elements/Card.astro";
|
|
||||||
import Line from "../elements/NetworkLine.astro";
|
|
||||||
---
|
|
||||||
|
|
||||||
<div id="Experience" class="h-fit py-20">
|
|
||||||
<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="#FFAC21">
|
|
||||||
<div class="card-content">
|
|
||||||
<div class="flex flex-col justify-left w-full mb-3">
|
|
||||||
<h2 class="font-bold text-xl">
|
|
||||||
Diploma in Computer Science
|
|
||||||
</h2><h3>Jan 2022 - 2024</h3>
|
|
||||||
</div>
|
|
||||||
<hr class="w-full mb-3" />
|
|
||||||
<h3 class="mb-1 font-bold text-lg">Achievements</h3>
|
|
||||||
<ul class="list-disc list-inside">
|
|
||||||
<li>
|
|
||||||
4-time Dean's List Award recipient (>3.5 GPA)
|
|
||||||
</li>
|
|
||||||
<li>3.8 CGPA</li>
|
|
||||||
<li>President of Computer Programming Club</li>
|
|
||||||
<li>Vice President of Diploma Union</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
<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>
|
|
||||||
Sep 2016 - June 2021
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
<hr class="w-full mb-3" />
|
|
||||||
<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 Magnus Technology Society</li>
|
|
||||||
<li>Technology Manager of Prefects' Board</li>
|
|
||||||
</ul>
|
|
||||||
</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;
|
|
||||||
padding: 2rem 2rem;
|
|
||||||
border-radius: 1.25rem;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
73
src/components/sections/ExperienceComponent.astro
Normal file
73
src/components/sections/ExperienceComponent.astro
Normal file
|
|
@ -0,0 +1,73 @@
|
||||||
|
---
|
||||||
|
import Card from "../elements/Card.astro";
|
||||||
|
import Line from "../elements/NetworkLine.astro";
|
||||||
|
---
|
||||||
|
|
||||||
|
<div id="Experience" class="h-fit py-20">
|
||||||
|
<h1 class="text-5xl text-center">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 md:px-8 md:py-8 px-4 py-4">
|
||||||
|
<div class="flex flex-col justify-start w-full mb-3 gap-1">
|
||||||
|
<h2 class="font-bold text-xl">
|
||||||
|
Frontend Web Developer Intern
|
||||||
|
</h2>
|
||||||
|
<h3 class="font-bold">@ Studio20 Malaysia</h3>
|
||||||
|
<h3>Jan - April 2024</h3>
|
||||||
|
</div>
|
||||||
|
<hr class="w-full mb-3" />
|
||||||
|
<p class="mb-3">
|
||||||
|
During my internship, I learnt how to do WordPress and
|
||||||
|
further enhanced my skills in PHP. I also learnt how to
|
||||||
|
closely work with UI/UX designers and pay close
|
||||||
|
attention to details with the design I am given.
|
||||||
|
</p>
|
||||||
|
<h3 class="mb-1 font-bold text-lg">Relevant skills:</h3>
|
||||||
|
<ul class="list-disc list-inside">
|
||||||
|
<li>WordPress & PHP</li>
|
||||||
|
<li>NextJS</li>
|
||||||
|
<li>Typescript</li>
|
||||||
|
<li>TailwindCSS</li>
|
||||||
|
<li>Adobe XD</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
<Line height="50px" />
|
||||||
|
<Card primaryColor="#FFAC21">
|
||||||
|
<div class="card-content md:px-8 md:py-8 px-4 py-4">
|
||||||
|
<div class="flex flex-col justify-start w-full mb-3 gap-1">
|
||||||
|
<h2 class="font-bold text-xl">
|
||||||
|
Diploma in Computer Science
|
||||||
|
</h2><h3>Jan 2022 - 2024</h3>
|
||||||
|
</div>
|
||||||
|
<hr class="w-full mb-3" />
|
||||||
|
<h3 class="mb-1 font-bold text-lg">Achievements</h3>
|
||||||
|
<ul class="list-disc list-inside">
|
||||||
|
<li>
|
||||||
|
4-time Dean's List Award recipient (>3.5 GPA)
|
||||||
|
</li>
|
||||||
|
<li>3.8 CGPA</li>
|
||||||
|
<li>President of Computer Programming Club</li>
|
||||||
|
<li>Vice President of Diploma Union</li>
|
||||||
|
</ul>
|
||||||
|
</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;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,5 +1,6 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { onMount } from "svelte";
|
import { onMount } from "svelte";
|
||||||
|
import Socials from "../elements/Socials.svelte";
|
||||||
|
|
||||||
// Greeting
|
// Greeting
|
||||||
let date = new Date();
|
let date = new Date();
|
||||||
|
|
@ -134,51 +135,7 @@
|
||||||
<b>data science</b>.
|
<b>data science</b>.
|
||||||
</p>
|
</p>
|
||||||
<div class="flex flex-row justify-center items-center mt-5">
|
<div class="flex flex-row justify-center items-center mt-5">
|
||||||
<a href="https://github.com/liyunze-coding" target="_blank">
|
<Socials />
|
||||||
<div
|
|
||||||
class="bg-gray-300 rounded-full w-7 h-7 flex justify-center items-center mr-3 hover:bg-gray-200"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
src="/images/socials/github.svg"
|
|
||||||
alt="github"
|
|
||||||
class="aspect-square max-w-full"
|
|
||||||
width="20"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<a href="https://codepen.io/liyunze-coding" target="_blank">
|
|
||||||
<div
|
|
||||||
class="bg-gray-300 rounded-full w-7 h-7 flex justify-center items-center mr-3 hover:bg-gray-200 transition-colors duration-150"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
src="/images/socials/codepen.svg"
|
|
||||||
alt="codepen"
|
|
||||||
class="w-5 h-5 aspect-square"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<a href="https://youtube.com/@RythonDev" target="_blank">
|
|
||||||
<div
|
|
||||||
class="bg-gray-300 rounded-full w-7 h-7 flex justify-center items-center mr-3 hover:bg-red-400 transition-colors duration-150"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
src="/images/socials/youtube.svg"
|
|
||||||
alt="youtube"
|
|
||||||
class="w-5 h-5 aspect-square"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<a href="https://twitch.tv/RythonDev" target="_blank">
|
|
||||||
<div
|
|
||||||
class="bg-gray-300 rounded-full w-7 h-7 flex justify-center items-center mr-3 hover:bg-purple-400 transition-colors duration-150"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
src="/images/socials/twitch.svg"
|
|
||||||
alt="twitch"
|
|
||||||
class="w-4 h-4 aspect-square"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -29,7 +29,7 @@
|
||||||
>
|
>
|
||||||
<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="../education">Education</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"
|
||||||
|
|
@ -66,7 +66,7 @@
|
||||||
>
|
>
|
||||||
<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="../education">education</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"
|
||||||
|
|
|
||||||
|
|
@ -289,37 +289,83 @@
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="w-full h-fit lg:w-1/2 lg:h-[340px] flex flex-col justify-center lg:px-10 items-center"
|
class="w-full h-fit lg:w-1/2 lg:h-[340px] flex flex-col justify-center lg:px-10 items-center lg:items-start"
|
||||||
>
|
>
|
||||||
<h2 class="text-3xl font-bold mb-5 text-center">
|
<h2 class="text-3xl font-bold mb-5 text-center lg:text-left">
|
||||||
Coworking Guide
|
Coworking Guide
|
||||||
</h2>
|
</h2>
|
||||||
<p
|
<p
|
||||||
class="text-xl text-center lg:text-left lg:max-w-none max-w-lg"
|
class="text-xl text-center lg:text-left lg:max-w-none max-w-lg text-balance"
|
||||||
>
|
>
|
||||||
A guide to coworking streams for Twitch streamers, covers
|
A guide to coworking streams for streamers, covers wide
|
||||||
wide range of topics from tips on how to get started with
|
range of topics from tips on how to get started with setting
|
||||||
setting up stream to how to grow your audience!
|
up stream to how to grow your audience!
|
||||||
</p>
|
</p>
|
||||||
|
<div class="w-full flex flex-row flex-wrap mt-5">
|
||||||
|
<div
|
||||||
|
class="w-fit bg-white text-black
|
||||||
|
rounded-full px-3 py-1 mr-1 my-1
|
||||||
|
transition-colors duration-300"
|
||||||
|
>
|
||||||
|
Astro
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="w-fit bg-[#3178C6] text-white
|
||||||
|
rounded-full px-3 py-1 mr-1 my-1
|
||||||
|
transition-colors duration-300"
|
||||||
|
>
|
||||||
|
TypeScript
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="w-fit bg-black text-white
|
||||||
|
rounded-full px-3 py-1 mr-1 my-1
|
||||||
|
transition-colors duration-300"
|
||||||
|
>
|
||||||
|
Markdown
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="flex flex-col-reverse lg:flex-row justify-center h-fit w-full px-10 lg:px-16 mt-10"
|
class="flex flex-col-reverse lg:flex-row justify-center h-fit w-full px-10 lg:px-16 mt-10"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="w-full h-fit lg:w-1/2 lg:h-[340px] flex flex-col justify-center lg:px-10 items-center"
|
class="w-full h-fit lg:w-1/2 lg:h-[340px] flex flex-col justify-center lg:px-10 items-center lg:items-end"
|
||||||
>
|
>
|
||||||
<h2 class="text-3xl font-bold mb-5 lg:text-right text-center">
|
<h2 class="text-3xl font-bold mb-5 lg:text-right text-center">
|
||||||
Chat-Task-Tic Widget
|
Chat-Task-Tic Widget
|
||||||
</h2>
|
</h2>
|
||||||
<p
|
<p
|
||||||
class="text-xl lg:text-right text-center lg:max-w-none max-w-lg"
|
class="text-xl lg:text-right text-center lg:max-w-none max-w-lg text-balance"
|
||||||
>
|
>
|
||||||
Used by 100+ Twitch streamers, allow viewers and streamers
|
Used by 100+ Twitch streamers, allow viewers and streamers
|
||||||
to add their own tasks to the widget for accountability!
|
to add their own tasks to the widget for accountability!
|
||||||
Easy to setup and the customization possibilities are
|
Easy to setup and the customization possibilities are
|
||||||
endless!
|
endless!
|
||||||
</p>
|
</p>
|
||||||
|
<div class="w-full flex flex-row flex-wrap justify-end mt-5">
|
||||||
|
<div
|
||||||
|
class="w-fit bg-[#E34F26] text-white
|
||||||
|
rounded-full px-3 py-1 mr-1 my-1
|
||||||
|
transition-colors duration-300"
|
||||||
|
>
|
||||||
|
HTML
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="w-fit bg-blue-700 text-white
|
||||||
|
rounded-full px-3 py-1 mr-1 my-1
|
||||||
|
transition-colors duration-300"
|
||||||
|
>
|
||||||
|
CSS
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="w-fit bg-yellow-400 text-black
|
||||||
|
rounded-full px-3 py-1 mr-1 my-1
|
||||||
|
transition-colors duration-300"
|
||||||
|
>
|
||||||
|
Javascript
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="lg:hidden flex justify-center items-center mb-10">
|
<div class="lg:hidden flex justify-center items-center mb-10">
|
||||||
<a
|
<a
|
||||||
|
|
@ -361,7 +407,7 @@
|
||||||
>
|
>
|
||||||
{#each streamers as { streamer, task }}
|
{#each streamers as { streamer, task }}
|
||||||
<div
|
<div
|
||||||
class="w-full px-5 py-1 bg-white text-black my-2 rounded-full
|
class="w-full px-5 py-1 bg-[#404040] text-white my-2 rounded-md
|
||||||
whitespace-nowrap overflow-hidden overflow-ellipsis"
|
whitespace-nowrap overflow-hidden overflow-ellipsis"
|
||||||
>
|
>
|
||||||
O {streamer} : {task}
|
O {streamer} : {task}
|
||||||
|
|
@ -373,7 +419,7 @@
|
||||||
>
|
>
|
||||||
{#each streamers as { streamer, task }}
|
{#each streamers as { streamer, task }}
|
||||||
<div
|
<div
|
||||||
class="w-full px-5 py-1 bg-white text-black my-2 rounded-full
|
class="w-full px-5 py-1 bg-[#404040] text-white my-2 rounded-md
|
||||||
whitespace-nowrap overflow-hidden overflow-ellipsis"
|
whitespace-nowrap overflow-hidden overflow-ellipsis"
|
||||||
>
|
>
|
||||||
O {streamer} : {task}
|
O {streamer} : {task}
|
||||||
|
|
@ -406,7 +452,7 @@
|
||||||
>
|
>
|
||||||
{#each streamers as { streamer, task }}
|
{#each streamers as { streamer, task }}
|
||||||
<div
|
<div
|
||||||
class="w-full px-5 py-1 bg-white text-black my-2 rounded-full
|
class="w-full px-5 py-1 bg-[#404040] text-white my-2 rounded-md
|
||||||
whitespace-nowrap overflow-hidden overflow-ellipsis"
|
whitespace-nowrap overflow-hidden overflow-ellipsis"
|
||||||
>
|
>
|
||||||
O {streamer} : {task}
|
O {streamer} : {task}
|
||||||
|
|
@ -418,7 +464,7 @@
|
||||||
>
|
>
|
||||||
{#each streamers as { streamer, task }}
|
{#each streamers as { streamer, task }}
|
||||||
<div
|
<div
|
||||||
class="w-full px-5 py-1 bg-white text-black my-2 rounded-full
|
class="w-full px-5 py-1 bg-[#404040] text-white my-2 rounded-md
|
||||||
whitespace-nowrap overflow-hidden overflow-ellipsis"
|
whitespace-nowrap overflow-hidden overflow-ellipsis"
|
||||||
>
|
>
|
||||||
O {streamer} : {task}
|
O {streamer} : {task}
|
||||||
|
|
@ -508,38 +554,78 @@
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="w-full h-fit lg:w-1/2 lg:h-[340px] flex flex-col justify-center lg:px-10 items-center"
|
class="w-full h-fit lg:w-1/2 lg:h-[340px] flex flex-col justify-center lg:px-10 items-center lg:items-start"
|
||||||
>
|
>
|
||||||
<h2 class="text-3xl font-bold mb-5 text-center">HexGuess</h2>
|
<h2 class="text-3xl font-bold mb-5 text-center">HexGuess</h2>
|
||||||
<p
|
<p
|
||||||
class="text-xl text-center lg:text-left lg:max-w-none max-w-lg"
|
class="text-xl text-center lg:text-left lg:max-w-none max-w-lg text-balance"
|
||||||
>
|
>
|
||||||
Decode colours in 5 attempts. Guess the hexadecimal code and
|
Decode colours in 5 attempts. Guess the hexadecimal code and
|
||||||
receive instant feedback! Built with Next.JS, TailwindCSS
|
receive instant feedback! Built with Next.JS, TailwindCSS
|
||||||
and TypeScript.
|
and TypeScript.
|
||||||
</p>
|
</p>
|
||||||
|
<div class="w-full flex flex-row flex-wrap justify-start mt-5">
|
||||||
|
<div
|
||||||
|
class="w-fit bg-black text-white
|
||||||
|
rounded-full px-3 py-1 mr-1 my-1
|
||||||
|
transition-colors duration-300"
|
||||||
|
>
|
||||||
|
NextJS
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="w-fit bg-[#3178C6] text-white
|
||||||
|
rounded-full px-3 py-1 mr-1 my-1
|
||||||
|
transition-colors duration-300"
|
||||||
|
>
|
||||||
|
Typescript
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="w-fit bg-[#07B6D4] text-black
|
||||||
|
rounded-full px-3 py-1 mr-1 my-1
|
||||||
|
transition-colors duration-300"
|
||||||
|
>
|
||||||
|
TailwindCSS
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="flex flex-col-reverse lg:flex-row justify-center h-fit w-full px-10 lg:px-16 mt-10"
|
class="flex flex-col-reverse lg:flex-row justify-center h-fit w-full px-10 lg:px-16 mt-10"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="w-full h-fit lg:w-1/2 lg:h-[340px] flex flex-col justify-center lg:px-10 items-center"
|
class="w-full h-fit lg:w-1/2 lg:h-[340px] flex flex-col justify-center lg:px-10 items-center lg:items-end"
|
||||||
>
|
>
|
||||||
<h2 class="text-3xl font-bold mb-5 lg:text-right text-center">
|
<h2 class="text-3xl font-bold mb-5 lg:text-right text-center">
|
||||||
ProductiVue
|
Twitch Plays X
|
||||||
</h2>
|
</h2>
|
||||||
<p
|
<p
|
||||||
class="text-xl text-center lg:text-right lg:max-w-none max-w-lg"
|
class="text-xl text-center lg:text-right lg:max-w-none max-w-lg text-balance"
|
||||||
>
|
>
|
||||||
Boost your productivity streaming with ProductiVue, a sleek
|
Allow Twitch chatters play games such as Pokemon! Chatters
|
||||||
minimalism-focused desktop app for Twitch streamers. Built
|
can enter messages such as "up up down down left right B A"
|
||||||
using Vue, Tauri, Typescript and TailwindCSS.
|
and the Python program will trigger the corresponding
|
||||||
|
keypresses.
|
||||||
</p>
|
</p>
|
||||||
|
<div class="w-full flex flex-row flex-wrap justify-end mt-5">
|
||||||
|
<div
|
||||||
|
class="w-fit bg-[#3776AB] text-white
|
||||||
|
rounded-full px-3 py-1 mr-1 my-1
|
||||||
|
transition-colors duration-300"
|
||||||
|
>
|
||||||
|
Python
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="w-fit bg-[#0078D4] text-white
|
||||||
|
rounded-full px-3 py-1 mr-1 my-1
|
||||||
|
transition-colors duration-300"
|
||||||
|
>
|
||||||
|
win32API
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="lg:hidden flex justify-center items-center mb-10">
|
<div class="lg:hidden flex justify-center items-center mb-10">
|
||||||
<a
|
<a
|
||||||
href="https://www.github.com/liyunze-coding/ProductiVue"
|
href="https://github.com/liyunze-coding/TwitchPlaysX"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
class="
|
class="
|
||||||
px-5 py-3 bg-blue-500 rounded-xl opacity-1
|
px-5 py-3 bg-blue-500 rounded-xl opacity-1
|
||||||
|
|
@ -554,7 +640,7 @@
|
||||||
class="image-container flex w-full lg:ml-auto lg:w-1/2 mb-5 lg:mb-0 aspect-video [perspective:200px] relative lg:mr-5"
|
class="image-container flex w-full lg:ml-auto lg:w-1/2 mb-5 lg:mb-0 aspect-video [perspective:200px] relative lg:mr-5"
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
src="/images/projects/ProductiVue.webp"
|
src="/images/projects/twitchplays.webp"
|
||||||
alt="Hex Guess"
|
alt="Hex Guess"
|
||||||
class="absolute max-w-full
|
class="absolute max-w-full
|
||||||
top-1/2 left-1/2 [transform:translateX(-48%)_translateY(-48%)_translateZ(-50px)_rotateY(-3deg)] opacity-40
|
top-1/2 left-1/2 [transform:translateX(-48%)_translateY(-48%)_translateZ(-50px)_rotateY(-3deg)] opacity-40
|
||||||
|
|
@ -562,7 +648,7 @@
|
||||||
width="700"
|
width="700"
|
||||||
/>
|
/>
|
||||||
<img
|
<img
|
||||||
src="/images/projects/ProductiVue.webp"
|
src="/images/projects/twitchplays.webp"
|
||||||
alt="Hex Guess"
|
alt="Hex Guess"
|
||||||
width="700"
|
width="700"
|
||||||
class="absolute max-w-full
|
class="absolute max-w-full
|
||||||
|
|
@ -579,7 +665,7 @@
|
||||||
max-w-full"
|
max-w-full"
|
||||||
>
|
>
|
||||||
<a
|
<a
|
||||||
href="https://www.github.com/liyunze-coding/ProductiVue"
|
href="https://github.com/liyunze-coding/TwitchPlaysX"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
class="absolute [transform:translateX(-50%)_translateY(-50%)] top-1/2 left-1/2
|
class="absolute [transform:translateX(-50%)_translateY(-50%)] top-1/2 left-1/2
|
||||||
px-5 py-3 bg-blue-500 rounded-xl opacity-1
|
px-5 py-3 bg-blue-500 rounded-xl opacity-1
|
||||||
|
|
@ -587,7 +673,7 @@
|
||||||
hidden lg:block
|
hidden lg:block
|
||||||
transition-colors duration-300
|
transition-colors duration-300
|
||||||
hover:bg-white hover:text-blue-500
|
hover:bg-white hover:text-blue-500
|
||||||
">View Repo</a
|
">View repository</a
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -4,349 +4,349 @@ import Line from "../elements/NetworkLine.astro";
|
||||||
---
|
---
|
||||||
|
|
||||||
<div class="w-full h-fit pt-20">
|
<div class="w-full h-fit 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%] md:w-[600px] pt-10">
|
<div class="w-[90%] md:w-[600px] pt-10">
|
||||||
<Card primaryColor="#19a7ce">
|
<Card primaryColor="#19a7ce">
|
||||||
<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">Frontend Development</h2>
|
<h2 class="font-bold text-2xl">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="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-orange-700
|
class="w-fit text-white bg-orange-700 md:bg-gray-500 hover:bg-orange-700
|
||||||
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"
|
||||||
>
|
>
|
||||||
HTML
|
HTML
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="w-fit text-white bg-gray-500 hover:bg-blue-700
|
class="w-fit text-white bg-blue-700 md:bg-gray-500 hover:bg-blue-700
|
||||||
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"
|
||||||
>
|
>
|
||||||
CSS
|
CSS
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="w-fit text-white bg-gray-500 hover:bg-yellow-400 hover:text-black
|
class="w-fit md:text-white bg-yellow-400 md:bg-gray-500 hover:bg-yellow-400 text-black md: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"
|
||||||
>
|
>
|
||||||
Javascript
|
Javascript
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="w-fit text-white bg-gray-500 hover:bg-blue-400 hover:text-black
|
class="w-fit md:text-white bg-[#3178C6] md:bg-gray-500 hover:bg-[#3178C6] text-white md: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"
|
||||||
>
|
>
|
||||||
TypeScript
|
TypeScript
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="w-fit text-white bg-gray-500 hover:bg-[#FF3E00]
|
class="w-fit text-white bg-[#FF3E00] md:bg-gray-500 hover:bg-[#FF3E00]
|
||||||
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"
|
||||||
>
|
>
|
||||||
Svelte
|
Svelte
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="w-fit text-white bg-gray-500 hover:bg-[#00D8FF] hover:text-black
|
class="w-fit md:text-white bg-[#00D8FF] md:bg-gray-500 hover:bg-[#00D8FF] text-black md: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"
|
||||||
>
|
>
|
||||||
React
|
React
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="w-fit text-white bg-gray-500 hover:bg-green-500 hover:text-black
|
class="w-fit md:text-white bg-green-500 md:bg-gray-500 hover:bg-green-500 text-black md: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"
|
||||||
>
|
>
|
||||||
Vue
|
Vue
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="w-fit text-white bg-gray-500 hover:bg-white hover:text-black
|
class="w-fit md:text-white bg-gray-500 hover:bg-white text-black md: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"
|
||||||
>
|
>
|
||||||
Astro
|
Astro
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="w-fit text-white bg-gray-500 hover:bg-[#3366CC] hover:text-white
|
class="w-fit text-white bg-[#3366CC] md:bg-gray-500 hover:bg-[#3366CC] 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"
|
||||||
>
|
>
|
||||||
HTMX
|
HTMX
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="w-fit text-white bg-gray-500 hover:bg-[#07B6D4] hover:text-black
|
class="w-fit md:text-white bg-[#07B6D4] md:bg-gray-500 hover:bg-[#07B6D4] text-black md: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"
|
||||||
>
|
>
|
||||||
TailwindCSS
|
TailwindCSS
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="w-fit text-white bg-gray-500 hover:bg-[#646CFF]
|
class="w-fit text-white bg-[#646CFF] md:bg-gray-500 hover:bg-[#646CFF]
|
||||||
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"
|
||||||
>
|
>
|
||||||
Vite
|
Vite
|
||||||
</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="flex flex-col justify-left w-full">
|
<div class="flex flex-col justify-left w-full">
|
||||||
<h2 class="font-bold text-2xl">Backend Development</h2>
|
<h2 class="font-bold text-2xl">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="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-[#3776AB]
|
class="w-fit text-white bg-[#3776AB] md:bg-gray-500 hover:bg-[#3776AB]
|
||||||
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"
|
||||||
>
|
>
|
||||||
Python
|
Python
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="w-fit text-white bg-gray-500 hover:bg-yellow-400 hover:text-black
|
class="w-fit md:text-white bg-yellow-400 md:bg-gray-500 hover:bg-yellow-400 text-black md: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"
|
||||||
>
|
>
|
||||||
Javascript
|
Javascript
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="w-fit text-white bg-gray-500 hover:bg-blue-400 hover:text-black
|
class="w-fit md:text-white bg-[#3178C6] md:bg-gray-500 hover:bg-[#3178C6] text-white md: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"
|
||||||
>
|
>
|
||||||
TypeScript
|
TypeScript
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="w-fit text-white bg-gray-500 hover:bg-[#617CBE]
|
class="w-fit text-white bg-[#617CBE] md:bg-gray-500 hover:bg-[#617CBE]
|
||||||
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"
|
||||||
>
|
>
|
||||||
PHP
|
PHP
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="w-fit text-white bg-gray-500 hover:bg-[#00ADD8]
|
class="w-fit text-white bg-[#00ADD8] md:bg-gray-500 hover:bg-[#00ADD8]
|
||||||
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"
|
||||||
>
|
>
|
||||||
Go
|
Go
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="w-fit text-white bg-gray-500 hover:bg-black
|
class="w-fit text-white bg-gray-500 hover:bg-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"
|
||||||
>
|
>
|
||||||
Rust
|
Rust
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="w-fit text-white bg-gray-500 hover:bg-[#4479A1]
|
class="w-fit text-white bg-[#4479A1] md:bg-gray-500 hover:bg-[#4479A1]
|
||||||
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"
|
||||||
>
|
>
|
||||||
MySQL
|
MySQL
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="w-fit text-white bg-gray-500 hover:bg-yellow-500 hover:text-black
|
class="w-fit md:text-white bg-yellow-500 md:bg-gray-500 hover:bg-yellow-500 text-black md: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"
|
||||||
>
|
>
|
||||||
Express
|
Express
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="w-fit text-white bg-gray-500 hover:bg-[#339933]
|
class="w-fit text-white bg-[#339933] md:bg-gray-500 hover:bg-[#339933]
|
||||||
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"
|
||||||
>
|
>
|
||||||
Node.js
|
Node.js
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="w-fit text-white bg-gray-500 hover:bg-[#FBEFDF] hover:text-black
|
class="w-fit md:text-white bg-[#FBEFDF] md:bg-gray-500 hover:bg-[#FBEFDF] text-black md: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"
|
||||||
>
|
>
|
||||||
Bun
|
Bun
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="w-fit text-white bg-gray-500 hover:bg-[#FF3E00]
|
class="w-fit text-white bg-[#FF3E00] md:bg-gray-500 hover:bg-[#FF3E00]
|
||||||
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"
|
||||||
>
|
>
|
||||||
Sveltekit
|
Sveltekit
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="w-fit text-white bg-gray-500 hover:bg-black
|
class="w-fit text-white bg-gray-500 hover:bg-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"
|
||||||
>
|
>
|
||||||
Next.js
|
NextJS
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="w-fit text-white bg-gray-500 hover:bg-[#21759B]
|
class="w-fit text-white bg-[#21759B] md:bg-gray-500 hover:bg-[#21759B]
|
||||||
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"
|
||||||
>
|
>
|
||||||
WordPress
|
WordPress
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="w-fit text-white bg-gray-500 hover:bg-[#24C8D8] hover:text-black
|
class="w-fit md:text-white bg-[#24C8D8] md:bg-gray-500 hover:bg-[#24C8D8] text-black md: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"
|
||||||
>
|
>
|
||||||
Tauri
|
Tauri
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Card>
|
</Card>
|
||||||
<Line height="50px" />
|
<Line height="50px" />
|
||||||
<Card primaryColor="#a1eebd">
|
<Card primaryColor="#a1eebd">
|
||||||
<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">Data Science</h2>
|
<h2 class="font-bold text-2xl">Data Science</h2>
|
||||||
</div>
|
</div>
|
||||||
<hr class="w-full" />
|
<hr class="w-full" />
|
||||||
<p class="text-left">
|
<p class="text-left">
|
||||||
My first exposure to data science was through learning
|
My first exposure to data science was through learning
|
||||||
Computer Vision. I learn how to use OpenCV in Python to
|
Computer Vision. I learn how to use OpenCV in Python to
|
||||||
open a webcam and detect faces. Later on, I took a
|
open a webcam and detect faces. Later on, I took a
|
||||||
Diploma course that is focused in data science, where I
|
Diploma course that is focused in data science, where I
|
||||||
learnt how to do the fundamentals of data science such
|
learnt how to do the fundamentals of data science such
|
||||||
as extracting, transforming and loading data, as well as
|
as extracting, transforming and loading data, as well as
|
||||||
data visualisation.
|
data visualisation.
|
||||||
</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-[#3776AB]
|
class="w-fit text-white bg-[#3776AB] md:bg-gray-500 hover:bg-[#3776AB]
|
||||||
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"
|
||||||
>
|
>
|
||||||
Python
|
Python
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="w-fit text-white bg-gray-500 hover:bg-cyan-500
|
class="w-fit text-white bg-cyan-500 md:bg-gray-500 hover:bg-cyan-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"
|
||||||
>
|
>
|
||||||
R
|
R
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="w-fit text-white bg-gray-500 hover:bg-green-600
|
class="w-fit text-white bg-green-600 md:bg-gray-500 hover:bg-green-600
|
||||||
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"
|
||||||
>
|
>
|
||||||
OpenCV
|
OpenCV
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="w-fit text-white bg-gray-500 hover:bg-blue-500 hover:text-black
|
class="w-fit md:text-white bg-blue-500 md:bg-gray-500 hover:bg-blue-500 text-black md: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"
|
||||||
>
|
>
|
||||||
SAS
|
SAS
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="w-fit text-white bg-gray-500 hover:bg-[#4479A1]
|
class="w-fit text-white bg-[#4479A1] md:bg-gray-500 hover:bg-[#4479A1]
|
||||||
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"
|
||||||
>
|
>
|
||||||
MySQL
|
MySQL
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="w-fit text-white bg-gray-500 hover:bg-blue-800
|
class="w-fit text-white bg-blue-800 md:bg-gray-500 hover:bg-blue-800
|
||||||
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"
|
||||||
>
|
>
|
||||||
Pandas
|
Pandas
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="w-fit text-white bg-gray-500 hover:bg-green-700
|
class="w-fit text-white bg-green-700 md:bg-gray-500 hover:bg-green-700
|
||||||
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"
|
||||||
>
|
>
|
||||||
Selenium
|
Selenium
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="w-fit text-white bg-gray-500 hover:bg-gray-200 hover:text-black
|
class="w-fit md:text-white bg-gray-200 md:bg-gray-500 hover:bg-gray-200 text-black md: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"
|
||||||
>
|
>
|
||||||
BeautifulSoup4
|
BeautifulSoup4
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Card>
|
</Card>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
||||||
|
|
|
||||||
|
|
@ -1,55 +1,55 @@
|
||||||
---
|
---
|
||||||
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 ContactComponent from "../components/sections/ContactComponent.astro";
|
import ContactComponent from "../components/sections/ContactComponent.svelte";
|
||||||
import Card from "../components/elements/Card.astro";
|
import Card from "../components/elements/Card.astro";
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout
|
<Layout
|
||||||
title="Contact"
|
title="Contact"
|
||||||
description="Find out how to contact RythonDev, for sponsorship offers or collaboration opportunities!"
|
description="Find out how to contact RythonDev, for sponsorship offers or collaboration opportunities!"
|
||||||
>
|
>
|
||||||
<NavBar />
|
<NavBar />
|
||||||
<div id="what-i-do" class="mt-10 pt-20">
|
<div id="what-i-do" class="mt-10 pt-20">
|
||||||
<h1 class="text-center text-5xl">Contact</h1>
|
<h1 class="text-center text-5xl">Contact</h1>
|
||||||
<div class="mt-10 flex justify-center items-center">
|
<div class="mt-10 flex justify-center items-center">
|
||||||
<div class="w-[90%] md:w-[600px]">
|
<div class="w-[90%] md:w-[600px]">
|
||||||
<Card primaryColor="#40A2D8">
|
<Card primaryColor="#40A2D8">
|
||||||
<div class="card-content">
|
<div class="card-content">
|
||||||
<div class="flex flex-col justify-left w-full mb-3">
|
<div class="flex flex-col justify-left w-full mb-3">
|
||||||
<h2 class="font-bold text-xl text-center">
|
<h2
|
||||||
Seeking a young dev with fresh ideas and a
|
class="font-bold text-xl text-center text-balance"
|
||||||
hunger to make a difference?
|
>
|
||||||
</h2>
|
Looking for a young developer with fresh ideas?
|
||||||
</div>
|
</h2>
|
||||||
<hr class="w-full mb-3" />
|
</div>
|
||||||
<div class="text-center">
|
<hr class="w-full mb-3" />
|
||||||
Whether it's sponsorships or collaboration
|
<div class="text-center text-balance">
|
||||||
opportunities, drop me a line and let's spark some
|
Whether it's sponsorships or collaboration
|
||||||
digital magic!
|
opportunities, hit me up!
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Card>
|
</Card>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-10">
|
<div class="mt-10">
|
||||||
<ContactComponent />
|
<ContactComponent />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.card-content {
|
.card-content {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
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: 2rem 2rem;
|
padding: 2rem 2rem;
|
||||||
border-radius: 1.25rem;
|
border-radius: 1.25rem;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,12 +0,0 @@
|
||||||
---
|
|
||||||
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>
|
|
||||||
15
src/pages/experience.astro
Normal file
15
src/pages/experience.astro
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
---
|
||||||
|
import NavBar from "../components/sections/NavBar.astro";
|
||||||
|
import Layout from "../layouts/Layout.astro";
|
||||||
|
import EducationComponent from "../components/sections/ExperienceComponent.astro";
|
||||||
|
---
|
||||||
|
|
||||||
|
<Layout
|
||||||
|
title="Experience"
|
||||||
|
description="Find out RythonDev's previous education"
|
||||||
|
>
|
||||||
|
<NavBar />
|
||||||
|
<div id="Experience" class="mt-10">
|
||||||
|
<EducationComponent />
|
||||||
|
</div>
|
||||||
|
</Layout>
|
||||||
|
|
@ -5,39 +5,39 @@ import NetworkLine from "../components/elements/NetworkLine.astro";
|
||||||
import WhatIDo from "../components/sections/WhatIDoComponent.astro";
|
import WhatIDo from "../components/sections/WhatIDoComponent.astro";
|
||||||
import Intro from "../components/sections/IntroComponent.svelte";
|
import Intro from "../components/sections/IntroComponent.svelte";
|
||||||
import Projects from "../components/sections/ProjectsComponent.svelte";
|
import Projects from "../components/sections/ProjectsComponent.svelte";
|
||||||
import Education from "../components/sections/EducationComponent.astro";
|
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.astro";
|
import Contact from "../components/sections/ContactComponent.svelte";
|
||||||
import Card from "../components/elements/Card.astro";
|
import Card from "../components/elements/Card.astro";
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout
|
<Layout
|
||||||
title="Ryan's Portfolio"
|
title="Ryan's Portfolio"
|
||||||
description="Ryan is a software developer, streamer and Computer Science undergraduate. Learn more about him and his skills here!"
|
description="Ryan is a software developer, streamer and Computer Science undergraduate. Learn more about him and his skills here!"
|
||||||
>
|
>
|
||||||
<NavBar />
|
<NavBar />
|
||||||
<div id="home" class="pt-20 flex justify-center items-center">
|
<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]">
|
<div class="w-[90%] xl:w-1/2 lg:w-1/2 max-w-[1080px]">
|
||||||
<Card bgColor="#252525" primaryColor="#BEADFA">
|
<Card bgColor="#252525" primaryColor="#BEADFA">
|
||||||
<Intro client:load />
|
<Intro client:load />
|
||||||
</Card>
|
</Card>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<NetworkLine height="70px" />
|
<NetworkLine height="70px" />
|
||||||
<div id="what-i-do">
|
<div id="what-i-do">
|
||||||
<div class="h-[1px] w-1/3 bg-[#404040] mb-10 mx-auto"></div>
|
<div class="h-[1px] w-1/3 bg-[#404040] mb-10 mx-auto"></div>
|
||||||
<WhatIDo />
|
<WhatIDo />
|
||||||
</div>
|
</div>
|
||||||
<div id="projects">
|
<div id="projects">
|
||||||
<Projects client:visible />
|
<Projects client:visible />
|
||||||
</div>
|
</div>
|
||||||
<div id="skills">
|
<div id="skills">
|
||||||
<Skills />
|
<Skills />
|
||||||
</div>
|
</div>
|
||||||
<div id="education">
|
<div id="education">
|
||||||
<Education />
|
<Education />
|
||||||
</div>
|
</div>
|
||||||
<div id="contact">
|
<div id="contact">
|
||||||
<Contact />
|
<Contact client:visible />
|
||||||
</div>
|
</div>
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
|
||||||
|
|
@ -1,82 +1,39 @@
|
||||||
---
|
---
|
||||||
import Layout from "../layouts/Layout.astro";
|
import Layout from "../layouts/Layout.astro";
|
||||||
|
import SocialsComponent from "../components/elements/Socials.svelte";
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout title="Skills" description="Check out Ryan's socials">
|
<Layout title="Skills" description="Check out Ryan's socials">
|
||||||
<!-- twitch, youtube, github, codepen, discord, instagram, ko-fi, -->
|
<!-- twitch, youtube, github, codepen, discord, instagram, ko-fi, -->
|
||||||
<div class="px-0 pt-10">
|
<div class="px-0 pt-10">
|
||||||
<div class="flex flex-col justify-center items-center">
|
<div class="flex flex-col justify-center items-center">
|
||||||
<div
|
<div
|
||||||
class="overflow-hidden rounded-full
|
class="overflow-hidden rounded-full
|
||||||
border-2 border-white border-solid"
|
border-2 border-white border-solid"
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
src="/images/RyanPogSmol.webp"
|
src="/images/RyanPogSmol.webp"
|
||||||
alt="Ryan's Avatar"
|
alt="Ryan's Avatar"
|
||||||
width="100"
|
width="100"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<h2 class="text-lg text-center">@RythonDev</h2>
|
<h2 class="text-lg text-center">@RythonDev</h2>
|
||||||
<h3 class="mt-5 text-center">Web Developer, Twitch streamer</h3>
|
<h3 class="mt-5 text-center">Web Developer, Twitch streamer</h3>
|
||||||
<div class="flex flex-row justify-center items-center py-5">
|
<div class="flex flex-row justify-center items-center py-5">
|
||||||
<a href="https://github.com/liyunze-coding" target="_blank">
|
<SocialsComponent />
|
||||||
<div
|
</div>
|
||||||
class="bg-gray-300 rounded-full w-7 h-7 flex justify-center items-center mr-3 hover:bg-gray-200"
|
</div>
|
||||||
>
|
<div
|
||||||
<img
|
class="w-full
|
||||||
src="/images/socials/github.svg"
|
|
||||||
alt="github"
|
|
||||||
class="aspect-square max-w-full"
|
|
||||||
width="20"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<a href="https://codepen.io/liyunze-coding" target="_blank">
|
|
||||||
<div
|
|
||||||
class="bg-gray-300 rounded-full w-7 h-7 flex justify-center items-center mr-3 hover:bg-gray-200 transition-colors duration-150"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
src="/images/socials/codepen.svg"
|
|
||||||
alt="codepen"
|
|
||||||
class="w-5 h-5 aspect-square"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<a href="https://youtube.com/@RythonDev" target="_blank">
|
|
||||||
<div
|
|
||||||
class="bg-gray-300 rounded-full w-7 h-7 flex justify-center items-center mr-3 hover:bg-red-400 transition-colors duration-150"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
src="/images/socials/youtube.svg"
|
|
||||||
alt="youtube"
|
|
||||||
class="w-5 h-5 aspect-square"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<a href="https://twitch.tv/RythonDev" target="_blank">
|
|
||||||
<div
|
|
||||||
class="bg-gray-300 rounded-full w-7 h-7 flex justify-center items-center mr-3 hover:bg-purple-400 transition-colors duration-150"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
src="/images/socials/twitch.svg"
|
|
||||||
alt="twitch"
|
|
||||||
class="w-4 h-4 aspect-square"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="w-full
|
|
||||||
grid grid-cols-1 place-items-center gap-5
|
grid grid-cols-1 place-items-center gap-5
|
||||||
px-0 py-5
|
px-0 py-5
|
||||||
text-white"
|
text-white"
|
||||||
>
|
>
|
||||||
<!-- SOCIALS START HERE -->
|
<!-- SOCIALS START HERE -->
|
||||||
<a
|
<a
|
||||||
href="https://twitch.tv/RythonDev"
|
href="https://twitch.tv/RythonDev"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
class="inline-block w-[clamp(200px,50vw,600px)]
|
class="inline-block w-[clamp(200px,50vw,600px)]
|
||||||
relative
|
relative
|
||||||
rounded-full
|
rounded-full
|
||||||
bg-[#9146FF] border-[#9146FF]
|
bg-[#9146FF] border-[#9146FF]
|
||||||
|
|
@ -85,13 +42,13 @@ import Layout from "../layouts/Layout.astro";
|
||||||
text-center text-white
|
text-center text-white
|
||||||
hover:bg-transparent hover:text-[#9146FF]
|
hover:bg-transparent hover:text-[#9146FF]
|
||||||
transition-colors duration-150"
|
transition-colors duration-150"
|
||||||
>
|
>
|
||||||
Twitch
|
Twitch
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
href="https://youtube.com/@RythonDev"
|
href="https://youtube.com/@RythonDev"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
class="inline-block w-[clamp(200px,50vw,600px)]
|
class="inline-block w-[clamp(200px,50vw,600px)]
|
||||||
relative
|
relative
|
||||||
rounded-full
|
rounded-full
|
||||||
bg-[#ff0000] border-[#ff0000]
|
bg-[#ff0000] border-[#ff0000]
|
||||||
|
|
@ -100,13 +57,13 @@ import Layout from "../layouts/Layout.astro";
|
||||||
text-center text-white
|
text-center text-white
|
||||||
hover:bg-transparent hover:text-[#ff0000]
|
hover:bg-transparent hover:text-[#ff0000]
|
||||||
transition-colors duration-150"
|
transition-colors duration-150"
|
||||||
>
|
>
|
||||||
YouTube
|
YouTube
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
href="https://rython.dev/discord"
|
href="https://rython.dev/discord"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
class="inline-block w-[clamp(200px,50vw,600px)]
|
class="inline-block w-[clamp(200px,50vw,600px)]
|
||||||
relative
|
relative
|
||||||
rounded-full
|
rounded-full
|
||||||
bg-[#5865F2] border-[#5865F2]
|
bg-[#5865F2] border-[#5865F2]
|
||||||
|
|
@ -114,13 +71,13 @@ import Layout from "../layouts/Layout.astro";
|
||||||
px-7 py-2
|
px-7 py-2
|
||||||
text-center text-white
|
text-center text-white
|
||||||
hover:bg-transparent hover:text-[#5865F2]"
|
hover:bg-transparent hover:text-[#5865F2]"
|
||||||
>
|
>
|
||||||
Discord
|
Discord
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
href="https://instagram.com/rythondev"
|
href="https://instagram.com/rythondev"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
class="inline-block w-[clamp(200px,50vw,600px)]
|
class="inline-block w-[clamp(200px,50vw,600px)]
|
||||||
relative
|
relative
|
||||||
rounded-full
|
rounded-full
|
||||||
bg-gradient-to-r from-purple-600 via-red-600 to-yellow-400
|
bg-gradient-to-r from-purple-600 via-red-600 to-yellow-400
|
||||||
|
|
@ -128,13 +85,13 @@ import Layout from "../layouts/Layout.astro";
|
||||||
px-7 py-2
|
px-7 py-2
|
||||||
text-center text-white
|
text-center text-white
|
||||||
hover:from-transparent hover:via-transparent hover:to-transparent"
|
hover:from-transparent hover:via-transparent hover:to-transparent"
|
||||||
>
|
>
|
||||||
Instagram
|
Instagram
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
href="https://ko-fi/rython"
|
href="https://ko-fi/rython"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
class="inline-block w-[clamp(200px,50vw,600px)]
|
class="inline-block w-[clamp(200px,50vw,600px)]
|
||||||
relative
|
relative
|
||||||
rounded-full
|
rounded-full
|
||||||
bg-cyan-500 border-cyan-500
|
bg-cyan-500 border-cyan-500
|
||||||
|
|
@ -142,13 +99,13 @@ import Layout from "../layouts/Layout.astro";
|
||||||
px-7 py-2
|
px-7 py-2
|
||||||
text-center text-white
|
text-center text-white
|
||||||
hover:bg-transparent hover:text-cyan-500"
|
hover:bg-transparent hover:text-cyan-500"
|
||||||
>
|
>
|
||||||
Ko-fi
|
Ko-fi
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
href="https://github.com/liyunze-coding"
|
href="https://github.com/liyunze-coding"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
class="inline-block w-[clamp(200px,50vw,600px)]
|
class="inline-block w-[clamp(200px,50vw,600px)]
|
||||||
relative
|
relative
|
||||||
rounded-full
|
rounded-full
|
||||||
bg-gray-100 border-gray-100
|
bg-gray-100 border-gray-100
|
||||||
|
|
@ -156,13 +113,13 @@ import Layout from "../layouts/Layout.astro";
|
||||||
px-7 py-2
|
px-7 py-2
|
||||||
text-center text-black
|
text-center text-black
|
||||||
hover:bg-transparent hover:text-gray-100"
|
hover:bg-transparent hover:text-gray-100"
|
||||||
>
|
>
|
||||||
Github
|
Github
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
href="https://codepen.io/liyunze-coding"
|
href="https://codepen.io/liyunze-coding"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
class="inline-block w-[clamp(200px,50vw,600px)]
|
class="inline-block w-[clamp(200px,50vw,600px)]
|
||||||
relative
|
relative
|
||||||
rounded-full
|
rounded-full
|
||||||
bg-gray-100 border-gray-100
|
bg-gray-100 border-gray-100
|
||||||
|
|
@ -170,9 +127,9 @@ import Layout from "../layouts/Layout.astro";
|
||||||
px-7 py-2
|
px-7 py-2
|
||||||
text-center text-black
|
text-center text-black
|
||||||
hover:bg-transparent hover:text-gray-100"
|
hover:bg-transparent hover:text-gray-100"
|
||||||
>
|
>
|
||||||
Codepen
|
Codepen
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue