mirror of
https://github.com/liyunze-coding/RythonDev.git
synced 2026-09-22 07:44:26 +00:00
organized file structure, updated astro dependency
This commit is contained in:
liyunze
parent
0ce1042938
commit
d6b10ca360
36 changed files with 549 additions and 477 deletions
16
package-lock.json
generated
16
package-lock.json
generated
|
|
@ -11,7 +11,7 @@
|
||||||
"@astrojs/mdx": "^4.3.0",
|
"@astrojs/mdx": "^4.3.0",
|
||||||
"@astrojs/svelte": "^7.1.0",
|
"@astrojs/svelte": "^7.1.0",
|
||||||
"@tailwindcss/vite": "^4.1.8",
|
"@tailwindcss/vite": "^4.1.8",
|
||||||
"astro": "^5.9.1",
|
"astro": "^5.10.0",
|
||||||
"caniuse-lite": "^1.0.30001698",
|
"caniuse-lite": "^1.0.30001698",
|
||||||
"moment": "^2.30.1",
|
"moment": "^2.30.1",
|
||||||
"moment-timezone": "^0.6.0",
|
"moment-timezone": "^0.6.0",
|
||||||
|
|
@ -38,9 +38,9 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@astrojs/compiler": {
|
"node_modules/@astrojs/compiler": {
|
||||||
"version": "2.12.1",
|
"version": "2.12.2",
|
||||||
"resolved": "https://registry.npmjs.org/@astrojs/compiler/-/compiler-2.12.1.tgz",
|
"resolved": "https://registry.npmjs.org/@astrojs/compiler/-/compiler-2.12.2.tgz",
|
||||||
"integrity": "sha512-WDSyVIiz7sNcJcCJxJFITu6XjfGhJ50Z0auyaWsrM+xb07IlhBLFtQuDkNy0caVHWNcKTM2LISAaHhgkRqGAVg==",
|
"integrity": "sha512-w2zfvhjNCkNMmMMOn5b0J8+OmUaBL1o40ipMvqcG6NRpdC+lKxmTi48DT8Xw0SzJ3AfmeFLB45zXZXtmbsjcgw==",
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
"node_modules/@astrojs/internal-helpers": {
|
"node_modules/@astrojs/internal-helpers": {
|
||||||
|
|
@ -1587,12 +1587,12 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/astro": {
|
"node_modules/astro": {
|
||||||
"version": "5.9.1",
|
"version": "5.10.0",
|
||||||
"resolved": "https://registry.npmjs.org/astro/-/astro-5.9.1.tgz",
|
"resolved": "https://registry.npmjs.org/astro/-/astro-5.10.0.tgz",
|
||||||
"integrity": "sha512-wxoJcTbuDZNFSv6EaL0PAlrp0Wx6VnOAULCXvy0scsV70oWMeUkdxuBxfO54JxO5Qgyvwj9h99y6E0elqOpGtA==",
|
"integrity": "sha512-g/t54kVzQnFVijs+GbbbX/NBAFTl/3yNAEA/AQYq4FumLLVv7n4BIF+jKhcPGn9iFGyT1Cjvr7KB/qYyNvHEIg==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@astrojs/compiler": "^2.12.1",
|
"@astrojs/compiler": "^2.12.2",
|
||||||
"@astrojs/internal-helpers": "0.6.1",
|
"@astrojs/internal-helpers": "0.6.1",
|
||||||
"@astrojs/markdown-remark": "6.3.2",
|
"@astrojs/markdown-remark": "6.3.2",
|
||||||
"@astrojs/telemetry": "3.3.0",
|
"@astrojs/telemetry": "3.3.0",
|
||||||
|
|
|
||||||
|
|
@ -13,7 +13,7 @@
|
||||||
"@astrojs/mdx": "^4.3.0",
|
"@astrojs/mdx": "^4.3.0",
|
||||||
"@astrojs/svelte": "^7.1.0",
|
"@astrojs/svelte": "^7.1.0",
|
||||||
"@tailwindcss/vite": "^4.1.8",
|
"@tailwindcss/vite": "^4.1.8",
|
||||||
"astro": "^5.9.1",
|
"astro": "^5.10.0",
|
||||||
"caniuse-lite": "^1.0.30001698",
|
"caniuse-lite": "^1.0.30001698",
|
||||||
"moment": "^2.30.1",
|
"moment": "^2.30.1",
|
||||||
"moment-timezone": "^0.6.0",
|
"moment-timezone": "^0.6.0",
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,12 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import Socials from "../elements/Socials.svelte";
|
import Socials from "../socials/Socials.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="relative flex h-fit w-full flex-col items-center justify-center">
|
<div class="relative flex h-fit w-full flex-col items-center justify-center">
|
||||||
<div class="flex flex-col items-center justify-center">
|
<div class="flex flex-col items-center justify-center">
|
||||||
<div
|
<div
|
||||||
id="title"
|
id="title"
|
||||||
class="mb-3 animate-gradient text-center text-3xl font-bold"
|
class="animate-gradient mb-3 text-center text-3xl font-bold"
|
||||||
>
|
>
|
||||||
Get in Touch with me!
|
Get in Touch with me!
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
---
|
---
|
||||||
import Card from "../elements/Card.astro";
|
import Card from "../global/Card.astro";
|
||||||
import Line from "../elements/NetworkLine.astro";
|
import Line from "../global/NetworkLine.astro";
|
||||||
---
|
---
|
||||||
|
|
||||||
<div id="Experience" class="h-fit">
|
<div id="Experience" class="h-fit">
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
---
|
---
|
||||||
import Card from "../elements/Card.astro";
|
import Card from "../global/Card.astro";
|
||||||
import Line from "../elements/NetworkLine.astro";
|
import Line from "../global/NetworkLine.astro";
|
||||||
---
|
---
|
||||||
|
|
||||||
<div id="Experience" class="h-fit">
|
<div id="Experience" class="h-fit">
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { onMount } from "svelte";
|
import { onMount } from "svelte";
|
||||||
import Socials from "../elements/Socials.svelte";
|
import Socials from "../socials/Socials.svelte";
|
||||||
|
|
||||||
// Roles
|
// Roles
|
||||||
let roles = $state(["Developer", "Streamer", "Content creator", "Student"]);
|
let roles = $state(["Developer", "Streamer", "Content creator", "Student"]);
|
||||||
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 230 KiB After Width: | Height: | Size: 230 KiB |
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 44 KiB After Width: | Height: | Size: 44 KiB |
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 22 KiB |
|
|
@ -1,9 +1,9 @@
|
||||||
---
|
---
|
||||||
import TaskWidget from "./TaskWidget.svelte";
|
import TaskWidget from "./TaskWidget.svelte";
|
||||||
import { Image } from "astro:assets";
|
import { Image } from "astro:assets";
|
||||||
import CoworkingGuide from "./images/projects/coworking-guide.webp";
|
import CoworkingGuide from "../images/projects/coworking-guide.webp";
|
||||||
import Wnrs from "./images/projects/wnrs.webp";
|
import Wnrs from "../images/projects/wnrs.webp";
|
||||||
import TwitchPlays from "./images/projects/twitchplays.webp";
|
import TwitchPlays from "../images/projects/twitchplays.webp";
|
||||||
---
|
---
|
||||||
|
|
||||||
<div
|
<div
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
---
|
---
|
||||||
import Card from "../elements/Card.astro";
|
import Card from "../global/Card.astro";
|
||||||
import Line from "../elements/NetworkLine.astro";
|
import Line from "../global/NetworkLine.astro";
|
||||||
---
|
---
|
||||||
|
|
||||||
<div id="Experience" class="h-fit">
|
<div id="Experience" class="h-fit">
|
||||||
103
src/components/skills/MoreSkills.astro
Normal file
103
src/components/skills/MoreSkills.astro
Normal file
|
|
@ -0,0 +1,103 @@
|
||||||
|
---
|
||||||
|
import Card from "../global/Card.astro";
|
||||||
|
import Line from "../global/NetworkLine.astro";
|
||||||
|
---
|
||||||
|
|
||||||
|
<div id="Experience" class="h-fit">
|
||||||
|
<div class="flex flex-col items-center">
|
||||||
|
<div class="w-[90%] md:w-[600px]">
|
||||||
|
<Line height="50px" />
|
||||||
|
<div class="mx-auto w-[90%] md:w-[600px]">
|
||||||
|
<Card primaryColor="#9D76C1">
|
||||||
|
<div class="px-8 py-8">
|
||||||
|
<div class="justify-left flex w-full flex-col">
|
||||||
|
<h2 class="text-2xl font-bold">Content Creation</h2>
|
||||||
|
</div>
|
||||||
|
<hr class="my-3 w-full" />
|
||||||
|
<p class="text-left">
|
||||||
|
Since I was little, I loved watching YouTube videos
|
||||||
|
and the idea of bringing joy and laughter to a wider
|
||||||
|
audience. Thus, I began my journey in content
|
||||||
|
creation through YouTube videos and Twitch
|
||||||
|
streaming. I typically do coworking & study streams
|
||||||
|
to keep myself accountable and encourage
|
||||||
|
productivity amongst viewers. I also do software and
|
||||||
|
game development streams where I showcase my
|
||||||
|
workflow.
|
||||||
|
</p>
|
||||||
|
<div
|
||||||
|
class="flex w-full flex-row flex-wrap justify-start"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#141414] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#141414] hover:text-white md:bg-gray-500"
|
||||||
|
>
|
||||||
|
OBS
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="my-1 mr-1 w-fit cursor-default rounded-full bg-gray-50 px-3 py-1 text-black transition-colors duration-300 hover:bg-gray-50 hover:text-black md:bg-gray-500 md:text-white"
|
||||||
|
>
|
||||||
|
DaVinci Resolve
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="my-1 mr-1 w-fit cursor-default rounded-full bg-purple-500 px-3 py-1 text-white transition-colors duration-300 hover:bg-purple-500 md:bg-gray-500"
|
||||||
|
>
|
||||||
|
Twitch
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#ff0000] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#ff0000] hover:text-white md:bg-gray-500"
|
||||||
|
>
|
||||||
|
YouTube
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
<Line height="50px" />
|
||||||
|
<div class="mx-auto w-[90%] md:w-[600px]">
|
||||||
|
<Card primaryColor="#9D76C1">
|
||||||
|
<div class="px-8 py-8">
|
||||||
|
<div class="justify-left flex w-full flex-col">
|
||||||
|
<h2 class="text-2xl font-bold">
|
||||||
|
Mobile Development
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
<hr class="my-3 w-full" />
|
||||||
|
<p class="text-left">
|
||||||
|
In my Mobile App Development unit in University, I
|
||||||
|
am tasked to develop Android apps using Android
|
||||||
|
Studio. The final app project I had developed was a
|
||||||
|
LLM-powered quiz app with features such as choosing
|
||||||
|
your own topics, viewing your question attempt
|
||||||
|
history afterwards, and upgrading your tier with
|
||||||
|
Google Pay.
|
||||||
|
</p>
|
||||||
|
<p class="text-left">
|
||||||
|
The marking tutor was impressed with my work, and
|
||||||
|
offered me to join a research lab because I had good
|
||||||
|
potential.
|
||||||
|
</p>
|
||||||
|
<div
|
||||||
|
class="mt-5 flex w-full flex-row flex-wrap justify-start"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#106539] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#106539] hover:text-white md:bg-gray-500"
|
||||||
|
>
|
||||||
|
Android
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#ED8B00] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#ED8B00] md:bg-gray-500"
|
||||||
|
>
|
||||||
|
Java
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#7F52FF] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#7F52FF] md:bg-gray-500"
|
||||||
|
>
|
||||||
|
Kotlin
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
---
|
---
|
||||||
import Card from "../elements/Card.astro";
|
import Card from "../global/Card.astro";
|
||||||
import Line from "../elements/NetworkLine.astro";
|
import Line from "../global/NetworkLine.astro";
|
||||||
---
|
---
|
||||||
|
|
||||||
<div class="h-fit w-full pt-20">
|
<div class="h-fit w-full pt-20">
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
---
|
---
|
||||||
import Card from "../elements/Card.astro";
|
import Card from "../global/Card.astro";
|
||||||
---
|
---
|
||||||
|
|
||||||
<div class="flex w-full flex-col items-center justify-center">
|
<div class="flex w-full flex-col items-center justify-center">
|
||||||
|
|
@ -1,15 +1,15 @@
|
||||||
---
|
---
|
||||||
import { getCollection } from "astro:content";
|
import { getCollection } from "astro:content";
|
||||||
import BackToBlogs from "../../components/sections/BackToBlogs.astro";
|
import BackToBlogs from "../../components/blog/BackToBlogs.astro";
|
||||||
import Layout from "../../layouts/Layout.astro";
|
import Layout from "../../layouts/Layout.astro";
|
||||||
import Footer from "../../components/sections/FooterComponent.astro";
|
import Footer from "../../components/global/FooterComponent.astro";
|
||||||
|
|
||||||
export async function getStaticPaths() {
|
export async function getStaticPaths() {
|
||||||
const blogEntries = await getCollection("blog");
|
const blogEntries = await getCollection("blog");
|
||||||
return blogEntries.map((entry) => ({
|
return blogEntries.map((entry) => ({
|
||||||
params: { slug: entry.slug },
|
params: { slug: entry.slug },
|
||||||
props: { entry },
|
props: { entry },
|
||||||
}));
|
}));
|
||||||
}
|
}
|
||||||
|
|
||||||
const { entry } = Astro.props;
|
const { entry } = Astro.props;
|
||||||
|
|
@ -17,118 +17,118 @@ const { Content } = await entry.render();
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout
|
<Layout
|
||||||
title="Blog"
|
title="Blog"
|
||||||
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!"
|
||||||
>
|
>
|
||||||
<BackToBlogs />
|
<BackToBlogs />
|
||||||
<div id="blog-content-component" class="mx-auto mt-10 pt-10">
|
<div id="blog-content-component" class="mx-auto mt-10 pt-10">
|
||||||
<h1 class="text-left text-4xl">{entry.data.title}</h1>
|
<h1 class="text-left text-4xl">{entry.data.title}</h1>
|
||||||
<p class="mt-3 text-lg text-gray-200">
|
<p class="mt-3 text-lg text-gray-200">
|
||||||
Published
|
Published
|
||||||
{
|
{
|
||||||
new Date(entry.data.pubDate).toLocaleDateString("en-UK", {
|
new Date(entry.data.pubDate).toLocaleDateString("en-UK", {
|
||||||
day: "numeric",
|
day: "numeric",
|
||||||
month: "long",
|
month: "long",
|
||||||
year: "numeric",
|
year: "numeric",
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
</p>
|
</p>
|
||||||
<p class="text-lg text-gray-200">by {entry.data.author}</p>
|
<p class="text-lg text-gray-200">by {entry.data.author}</p>
|
||||||
<p class="text-lg text-white">{entry.data.description}</p>
|
<p class="text-lg text-white">{entry.data.description}</p>
|
||||||
|
|
||||||
<div class="flex flex-row flex-wrap items-start justify-start">
|
<div class="flex flex-row flex-wrap items-start justify-start">
|
||||||
{
|
{
|
||||||
entry.data.tags?.map((tag) => (
|
entry.data.tags?.map((tag) => (
|
||||||
<div class="mr-2 rounded-xl border-2 border-solid border-gray-500 bg-[#282828] px-3 py-1 transition-colors duration-150 hover:border-white hover:bg-gray-300 hover:text-black">
|
<div class="mr-2 rounded-xl border-2 border-solid border-gray-500 bg-[#282828] px-3 py-1 transition-colors duration-150 hover:border-white hover:bg-gray-300 hover:text-black">
|
||||||
{tag}
|
{tag}
|
||||||
</div>
|
</div>
|
||||||
))
|
))
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<hr class="my-5" />
|
<hr class="my-5" />
|
||||||
|
|
||||||
<Content />
|
<Content />
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-10">
|
<div class="mt-10">
|
||||||
<Footer />
|
<Footer />
|
||||||
</div>
|
</div>
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
||||||
<style is:inline>
|
<style is:inline>
|
||||||
#blog-content-component {
|
#blog-content-component {
|
||||||
width: clamp(310px, 60vw, 800px);
|
width: clamp(310px, 60vw, 800px);
|
||||||
}
|
}
|
||||||
|
|
||||||
a:not(#navbar-div a) {
|
a:not(#navbar-div a) {
|
||||||
color: lightskyblue;
|
color: lightskyblue;
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 1.1rem;
|
font-size: 1.1rem;
|
||||||
margin-top: 1em;
|
margin-top: 1em;
|
||||||
margin-bottom: 1em;
|
margin-bottom: 1em;
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 2em;
|
font-size: 2em;
|
||||||
margin-top: 0.67em;
|
margin-top: 0.67em;
|
||||||
margin-bottom: 0.67em;
|
margin-bottom: 0.67em;
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 1.5em;
|
font-size: 1.5em;
|
||||||
margin-top: 0.83em;
|
margin-top: 0.83em;
|
||||||
margin-bottom: 0.83em;
|
margin-bottom: 0.83em;
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 1.17em;
|
font-size: 1.17em;
|
||||||
margin-top: 1em;
|
margin-top: 1em;
|
||||||
margin-bottom: 1em;
|
margin-bottom: 1em;
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
display: block;
|
display: block;
|
||||||
list-style-type: disc;
|
list-style-type: disc;
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
margin-bottom: 0.5em;
|
margin-bottom: 0.5em;
|
||||||
padding-left: 40px;
|
padding-left: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul:not(ul ul) {
|
ul:not(ul ul) {
|
||||||
margin-top: 0.5em;
|
margin-top: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
li {
|
li {
|
||||||
display: list-item;
|
display: list-item;
|
||||||
}
|
}
|
||||||
|
|
||||||
ol {
|
ol {
|
||||||
display: block;
|
display: block;
|
||||||
list-style-type: decimal;
|
list-style-type: decimal;
|
||||||
margin-top: 1em;
|
margin-top: 1em;
|
||||||
margin-bottom: 1em;
|
margin-bottom: 1em;
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
padding-left: 40px;
|
padding-left: 40px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,82 +1,81 @@
|
||||||
---
|
---
|
||||||
import NavBar from "../../components/sections/NavBar.astro";
|
|
||||||
import Layout from "../../layouts/Layout.astro";
|
import Layout from "../../layouts/Layout.astro";
|
||||||
import Card from "../../components/elements/Card.astro";
|
import Card from "../../components/global/Card.astro";
|
||||||
import Footer from "../../components/sections/FooterComponent.astro";
|
import Footer from "../../components/global/FooterComponent.astro";
|
||||||
import { getCollection } from "astro:content";
|
import { getCollection } from "astro:content";
|
||||||
|
|
||||||
const blogPosts = await getCollection("blog");
|
const blogPosts = await getCollection("blog");
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout
|
<Layout
|
||||||
title="Blog"
|
title="Blog"
|
||||||
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!"
|
||||||
>
|
>
|
||||||
<div id="blog-component" class="mt-10 pt-20">
|
<div id="blog-component" class="mt-10 pt-20">
|
||||||
<h1 class="text-center text-5xl">Blog</h1>
|
<h1 class="text-center text-5xl">Blog</h1>
|
||||||
<div class="mt-10 flex flex-col items-center justify-center">
|
<div class="mt-10 flex flex-col items-center justify-center">
|
||||||
<div style="width: clamp(310px, 50vw, 800px);" class="mb-10">
|
<div style="width: clamp(310px, 50vw, 800px);" class="mb-10">
|
||||||
<p class="text-center text-lg">
|
<p class="text-center text-lg">
|
||||||
This is where I upload my blogs. No paywalls, no ads, no
|
This is where I upload my blogs. No paywalls, no ads, no
|
||||||
bullshit.
|
bullshit.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Series of blog posts -->
|
<!-- Series of blog posts -->
|
||||||
<div style="width: clamp(310px, 50vw, 800px);">
|
<div style="width: clamp(310px, 50vw, 800px);">
|
||||||
{
|
{
|
||||||
blogPosts.map((blog) => (
|
blogPosts.map((blog) => (
|
||||||
<a class="group mb-5" href={`/blog/${blog.slug}`}>
|
<a class="group mb-5" href={`/blog/${blog.slug}`}>
|
||||||
<Card
|
<Card
|
||||||
primaryColor={
|
primaryColor={
|
||||||
blog.data.color ?? "rgba(0,0,0,0)"
|
blog.data.color ?? "rgba(0,0,0,0)"
|
||||||
}
|
}
|
||||||
pixelHeight="50px"
|
pixelHeight="50px"
|
||||||
>
|
>
|
||||||
<div class="card-content relative px-8 py-3 text-left">
|
<div class="card-content relative px-8 py-3 text-left">
|
||||||
<h2 class="mb-1 text-xl font-bold">
|
<h2 class="mb-1 text-xl font-bold">
|
||||||
{blog.data.title}
|
{blog.data.title}
|
||||||
</h2>
|
</h2>
|
||||||
<p class="line-clamp-2">
|
<p class="line-clamp-2">
|
||||||
{blog.data.description}
|
{blog.data.description}
|
||||||
</p>
|
</p>
|
||||||
<svg
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
fill="none"
|
fill="none"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
stroke-width="1.5"
|
stroke-width="1.5"
|
||||||
class="absolute right-3 top-3 size-6 stroke-white transition-all duration-150 group-hover:right-2 group-hover:top-2 group-hover:stroke-green-400"
|
class="absolute top-3 right-3 size-6 stroke-white transition-all duration-150 group-hover:top-2 group-hover:right-2 group-hover:stroke-green-400"
|
||||||
>
|
>
|
||||||
<path
|
<path
|
||||||
stroke-linecap="round"
|
stroke-linecap="round"
|
||||||
stroke-linejoin="round"
|
stroke-linejoin="round"
|
||||||
d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25"
|
d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
</Card>
|
</Card>
|
||||||
</a>
|
</a>
|
||||||
))
|
))
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-10">
|
<div class="mt-10">
|
||||||
<Footer />
|
<Footer />
|
||||||
</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;
|
||||||
border-radius: 1.25rem;
|
border-radius: 1.25rem;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
---
|
---
|
||||||
import NavBar from "../components/sections/NavBar.astro";
|
import NavBar from "../components/global/NavBar.astro";
|
||||||
import Layout from "../layouts/Layout.astro";
|
import Layout from "../layouts/Layout.astro";
|
||||||
import ContactComponent from "../components/sections/ContactComponent.svelte";
|
import ContactComponent from "../components/contact/ContactComponent.svelte";
|
||||||
import Card from "../components/elements/Card.astro";
|
import Card from "../components/global/Card.astro";
|
||||||
import Footer from "../components/sections/FooterComponent.astro";
|
import Footer from "../components/global/FooterComponent.astro";
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout
|
<Layout
|
||||||
|
|
|
||||||
|
|
@ -1,19 +1,19 @@
|
||||||
---
|
---
|
||||||
import NavBar from "../components/sections/NavBar.astro";
|
import NavBar from "../components/global/NavBar.astro";
|
||||||
import Layout from "../layouts/Layout.astro";
|
import Layout from "../layouts/Layout.astro";
|
||||||
import EducationComponent from "../components/sections/ExperienceComponent.astro";
|
import EducationComponent from "../components/experience/ExperienceComponent.astro";
|
||||||
import MoreExperience from "../components/sections/MoreExperience.astro";
|
import MoreExperience from "../components/experience/MoreExperience.astro";
|
||||||
import Footer from "../components/sections/FooterComponent.astro";
|
import Footer from "../components/global/FooterComponent.astro";
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout
|
<Layout
|
||||||
title="Experience"
|
title="Experience"
|
||||||
description="Find out RythonDev's previous education"
|
description="Find out RythonDev's previous education"
|
||||||
>
|
>
|
||||||
<NavBar />
|
<NavBar />
|
||||||
<div id="Experience" class="py-20">
|
<div id="Experience" class="py-20">
|
||||||
<EducationComponent />
|
<EducationComponent />
|
||||||
<MoreExperience />
|
<MoreExperience />
|
||||||
</div>
|
</div>
|
||||||
<Footer />
|
<Footer />
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
|
||||||
|
|
@ -1,92 +1,92 @@
|
||||||
---
|
---
|
||||||
import Layout from "../layouts/Layout.astro";
|
import Layout from "../layouts/Layout.astro";
|
||||||
import Card from "../components/elements/Card.astro";
|
import Card from "../components/global/Card.astro";
|
||||||
import Footer from "../components/sections/FooterComponent.astro";
|
import Footer from "../components/global/FooterComponent.astro";
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout title="Socials" description="Check out Ryan's socials">
|
<Layout title="Socials" description="Check out Ryan's socials">
|
||||||
<div class="mx-auto my-10 w-[90%] max-w-full md:w-1/2">
|
<div class="mx-auto my-10 w-[90%] max-w-full md:w-1/2">
|
||||||
<Card primaryColor="aquamarine">
|
<Card primaryColor="aquamarine">
|
||||||
<div class="card-content px-4 py-4 md:px-8 md:py-8">
|
<div class="card-content px-4 py-4 md:px-8 md:py-8">
|
||||||
<h1 class="text-center text-3xl font-bold">
|
<h1 class="text-center text-3xl font-bold">
|
||||||
Frequently Asked Questions
|
Frequently Asked Questions
|
||||||
</h1>
|
</h1>
|
||||||
<hr class="my-2" />
|
<hr class="my-2" />
|
||||||
<!-- Who are you? -->
|
<!-- Who are you? -->
|
||||||
<h2 class="text-xl font-bold">Who are you?</h2>
|
<h2 class="text-xl font-bold">Who are you?</h2>
|
||||||
<p>
|
<p>
|
||||||
I'm Ryan, I am a software developer and a coworking & study
|
I'm Ryan, I am a software developer and a coworking & study
|
||||||
streamer.
|
streamer.
|
||||||
<br />
|
<br />
|
||||||
<br />
|
<br />
|
||||||
See my website <a
|
See my website <a
|
||||||
target="_blank"
|
target="_blank"
|
||||||
href="https://rython.dev/"
|
href="https://rython.dev/"
|
||||||
class="text-blue-400 underline">here</a
|
class="text-blue-400 underline">here</a
|
||||||
> to learn more about me, including my software development portfolio
|
> to learn more about me, including my software development portfolio
|
||||||
and my content creation projects.
|
and my content creation projects.
|
||||||
</p>
|
</p>
|
||||||
<hr class="my-2" />
|
<hr class="my-2" />
|
||||||
<h2 class="text-xl font-bold">
|
<h2 class="text-xl font-bold">
|
||||||
Where are you from? What languages do you speak?
|
Where are you from? What languages do you speak?
|
||||||
</h2>
|
</h2>
|
||||||
<p>
|
<p>
|
||||||
I'm born and raised in Malaysia, studying in Australia. I
|
I'm born and raised in Malaysia, studying in Australia. I
|
||||||
speak English, Mandarin Chinese, and some Malay. I can read
|
speak English, Mandarin Chinese, and some Malay. I can read
|
||||||
both traditional and simplified Chinese characters.
|
both traditional and simplified Chinese characters.
|
||||||
</p>
|
</p>
|
||||||
<hr class="my-2" />
|
<hr class="my-2" />
|
||||||
<!-- How to pronounce? -->
|
<!-- How to pronounce? -->
|
||||||
<h2 class="text-xl font-bold">
|
<h2 class="text-xl font-bold">
|
||||||
How to pronounce your username?
|
How to pronounce your username?
|
||||||
</h2>
|
</h2>
|
||||||
<p>
|
<p>
|
||||||
Try to pronounce Python, and then replace the "Py" with
|
Try to pronounce Python, and then replace the "Py" with
|
||||||
"Ry". You can also call me "Ry" or "Ryan" if you prefer.
|
"Ry". You can also call me "Ry" or "Ryan" if you prefer.
|
||||||
</p>
|
</p>
|
||||||
<hr class="my-2" />
|
<hr class="my-2" />
|
||||||
<!-- What is a coworking stream? -->
|
<!-- What is a coworking stream? -->
|
||||||
<h2 class="text-xl font-bold">What is a coworking stream?</h2>
|
<h2 class="text-xl font-bold">What is a coworking stream?</h2>
|
||||||
<p>
|
<p>
|
||||||
That question is answered <a
|
That question is answered <a
|
||||||
target="_blank"
|
target="_blank"
|
||||||
class="text-blue-400 underline"
|
class="text-blue-400 underline"
|
||||||
href="https://coworking-guide.vercel.app/get-started/introduction#what-are-coworking-streams"
|
href="https://coworking-guide.vercel.app/get-started/introduction#what-are-coworking-streams"
|
||||||
>here</a
|
>here</a
|
||||||
>.
|
>.
|
||||||
</p>
|
</p>
|
||||||
<hr class="my-2" />
|
<hr class="my-2" />
|
||||||
<!-- What is a coworking stream? -->
|
<!-- What is a coworking stream? -->
|
||||||
<h2 class="text-xl font-bold">
|
<h2 class="text-xl font-bold">
|
||||||
Why are you muted? Why aren't you reading chat?
|
Why are you muted? Why aren't you reading chat?
|
||||||
</h2>
|
</h2>
|
||||||
<p>
|
<p>
|
||||||
During work time, I am muted and not reading chat to focus
|
During work time, I am muted and not reading chat to focus
|
||||||
on my work. I will try to catch up on chat during break
|
on my work. I will try to catch up on chat during break
|
||||||
time.
|
time.
|
||||||
</p>
|
</p>
|
||||||
<hr class="my-2" />
|
<hr class="my-2" />
|
||||||
<!-- What is a coworking stream? -->
|
<!-- What is a coworking stream? -->
|
||||||
<h2 class="text-xl font-bold">Is that a keychron?</h2>
|
<h2 class="text-xl font-bold">Is that a keychron?</h2>
|
||||||
<p>No. It's an Epomaker GK64x modded with black switches.</p>
|
<p>No. It's an Epomaker GK64x modded with black switches.</p>
|
||||||
<hr class="my-2" />
|
<hr class="my-2" />
|
||||||
</div>
|
</div>
|
||||||
</Card>
|
</Card>
|
||||||
<Footer />
|
<Footer />
|
||||||
</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;
|
||||||
border-radius: 1.25rem;
|
border-radius: 1.25rem;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
|
||||||
|
|
@ -1,61 +1,61 @@
|
||||||
---
|
---
|
||||||
import NavBar from "../components/sections/NavBar.astro";
|
import NavBar from "../components/global/NavBar.astro";
|
||||||
import Layout from "../layouts/Layout.astro";
|
import Layout from "../layouts/Layout.astro";
|
||||||
import NetworkLine from "../components/elements/NetworkLine.astro";
|
import NetworkLine from "../components/global/NetworkLine.astro";
|
||||||
import WhatIDo from "../components/sections/WhatIDoComponent.astro";
|
import WhatIDo from "../components/what-i-do/WhatIDoComponent.astro";
|
||||||
import Intro from "../components/sections/IntroComponent.svelte";
|
import Intro from "../components/home/IntroComponent.svelte";
|
||||||
import Projects from "../components/sections/ProjectsComponent.astro";
|
import Projects from "../components/projects/ProjectsComponent.astro";
|
||||||
import Experience from "../components/sections/ExperienceComponent.astro";
|
import Experience from "../components/experience/ExperienceComponent.astro";
|
||||||
import Skills from "../components/sections/SkillsComponent.astro";
|
import Skills from "../components/skills/SkillsComponent.astro";
|
||||||
import Contact from "../components/sections/ContactComponent.svelte";
|
import Contact from "../components/contact/ContactComponent.svelte";
|
||||||
import Card from "../components/elements/Card.astro";
|
import Card from "../components/global/Card.astro";
|
||||||
import Footer from "../components/sections/FooterComponent.astro";
|
import Footer from "../components/global/FooterComponent.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="flex items-center justify-center pt-20">
|
<div id="home" class="flex items-center justify-center pt-20">
|
||||||
<div class="w-[90%] max-w-[1080px] lg:w-1/2 xl:w-1/2">
|
<div class="w-[90%] max-w-[1080px] lg:w-1/2 xl:w-1/2">
|
||||||
<Card
|
<Card
|
||||||
bgColor="#252525"
|
bgColor="#252525"
|
||||||
primaryColor="#BEADFA"
|
primaryColor="#BEADFA"
|
||||||
className="animate-fadeIn"
|
className="animate-fadeIn"
|
||||||
>
|
>
|
||||||
<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="mx-auto mb-10 h-[1px] w-1/3 bg-[#404040]"></div>
|
<div class="mx-auto mb-10 h-[1px] w-1/3 bg-[#404040]"></div>
|
||||||
<WhatIDo />
|
<WhatIDo />
|
||||||
</div>
|
</div>
|
||||||
<div id="projects">
|
<div id="projects">
|
||||||
<div class="pt-20">
|
<div class="pt-20">
|
||||||
<h1 class="mb-10 text-center text-5xl">Projects</h1>
|
<h1 class="mb-10 text-center text-5xl">Projects</h1>
|
||||||
<Projects />
|
<Projects />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="skills">
|
<div id="skills">
|
||||||
<Skills />
|
<Skills />
|
||||||
</div>
|
</div>
|
||||||
<div id="education" class="py-20">
|
<div id="education" class="py-20">
|
||||||
<Experience />
|
<Experience />
|
||||||
</div>
|
</div>
|
||||||
<div id="contact">
|
<div id="contact">
|
||||||
<Contact />
|
<Contact />
|
||||||
</div>
|
</div>
|
||||||
<Footer />
|
<Footer />
|
||||||
</Layout>
|
</Layout>
|
||||||
<script is:inline>
|
<script is:inline>
|
||||||
location.search.includes("?uwu") &&
|
location.search.includes("?uwu") &&
|
||||||
document.documentElement.classList.add("uwu");
|
document.documentElement.classList.add("uwu");
|
||||||
</script>
|
</script>
|
||||||
<style is:global>
|
<style is:global>
|
||||||
.uwu #uwu {
|
.uwu #uwu {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,108 +1,108 @@
|
||||||
---
|
---
|
||||||
import NavBar from "../components/sections/NavBar.astro";
|
import NavBar from "../components/global/NavBar.astro";
|
||||||
import Layout from "../layouts/Layout.astro";
|
import Layout from "../layouts/Layout.astro";
|
||||||
import ProjectsComponent from "../components/sections/ProjectsComponent.astro";
|
import ProjectsComponent from "../components/projects/ProjectsComponent.astro";
|
||||||
import MoreProjects from "../components/sections/MoreProjects.svelte";
|
import MoreProjects from "../components/projects/MoreProjects.svelte";
|
||||||
import Footer from "../components/sections/FooterComponent.astro";
|
import Footer from "../components/global/FooterComponent.astro";
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout title="Projects" description="View what projects RythonDev has made">
|
<Layout title="Projects" description="View what projects RythonDev has made">
|
||||||
<NavBar />
|
<NavBar />
|
||||||
<div id="projects" class="pt-20">
|
<div id="projects" class="pt-20">
|
||||||
<h1 class="mt-10 text-center text-5xl">Projects</h1>
|
<h1 class="mt-10 text-center text-5xl">Projects</h1>
|
||||||
<!-- other projects -->
|
<!-- other projects -->
|
||||||
<MoreProjects client:load />
|
<MoreProjects client:load />
|
||||||
</div>
|
</div>
|
||||||
<div class="pb-20">
|
<div class="pb-20">
|
||||||
<ProjectsComponent />
|
<ProjectsComponent />
|
||||||
</div>
|
</div>
|
||||||
<Footer />
|
<Footer />
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.image-container img,
|
.image-container img,
|
||||||
.image-container video,
|
.image-container video,
|
||||||
.image-container .task-widget {
|
.image-container .task-widget {
|
||||||
transition: transform 0.5s ease-in-out;
|
transition: transform 0.5s ease-in-out;
|
||||||
}
|
}
|
||||||
@media (min-width: 1025px) {
|
@media (min-width: 1025px) {
|
||||||
.image-container:hover > img,
|
.image-container:hover > img,
|
||||||
.image-container:hover > video,
|
.image-container:hover > video,
|
||||||
.image-container:hover > .task-widget {
|
.image-container:hover > .task-widget {
|
||||||
transform: rotateY(0deg) rotateX(0deg) translateZ(0px)
|
transform: rotateY(0deg) rotateX(0deg) translateZ(0px)
|
||||||
translateX(-50%) translateY(-50%);
|
translateX(-50%) translateY(-50%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.image-container:hover > .visit-div {
|
.image-container:hover > .visit-div {
|
||||||
opacity: 100%;
|
opacity: 100%;
|
||||||
transition: opacity 0.3s ease-in-out;
|
transition: opacity 0.3s ease-in-out;
|
||||||
transition-delay: 0.3s;
|
transition-delay: 0.3s;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.primary {
|
.primary {
|
||||||
animation: primary 30s linear infinite;
|
animation: primary 30s linear infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
.secondary {
|
.secondary {
|
||||||
animation: secondary 30s linear infinite;
|
animation: secondary 30s linear infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes primary {
|
@keyframes primary {
|
||||||
from {
|
from {
|
||||||
transform: translateY(0);
|
transform: translateY(0);
|
||||||
}
|
}
|
||||||
to {
|
to {
|
||||||
transform: translateY(-2175px);
|
transform: translateY(-2175px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes secondary {
|
@keyframes secondary {
|
||||||
from {
|
from {
|
||||||
transform: translateY(2175px);
|
transform: translateY(2175px);
|
||||||
}
|
}
|
||||||
to {
|
to {
|
||||||
transform: translateY(0);
|
transform: translateY(0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<script is:inline>
|
<script is:inline>
|
||||||
document.addEventListener("DOMContentLoaded", () => {
|
document.addEventListener("DOMContentLoaded", () => {
|
||||||
const videos = document.querySelectorAll(".playable");
|
const videos = document.querySelectorAll(".playable");
|
||||||
|
|
||||||
videos.forEach((video) => {
|
videos.forEach((video) => {
|
||||||
// Ensure the video element supports play and pause methods
|
// Ensure the video element supports play and pause methods
|
||||||
if (
|
if (
|
||||||
typeof video.play === "function" &&
|
typeof video.play === "function" &&
|
||||||
typeof video.pause === "function"
|
typeof video.pause === "function"
|
||||||
) {
|
) {
|
||||||
video.addEventListener("mouseenter", () => {
|
video.addEventListener("mouseenter", () => {
|
||||||
video.play();
|
video.play();
|
||||||
});
|
});
|
||||||
|
|
||||||
video.addEventListener("mouseleave", () => {
|
video.addEventListener("mouseleave", () => {
|
||||||
video.pause();
|
video.pause();
|
||||||
video.currentTime = 0;
|
video.currentTime = 0;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
videos.forEach((video) => {
|
videos.forEach((video) => {
|
||||||
if (window.innerWidth < 1025) {
|
if (window.innerWidth < 1025) {
|
||||||
video.muted = true;
|
video.muted = true;
|
||||||
video.play();
|
video.play();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
// on screensize change
|
// on screensize change
|
||||||
window.addEventListener("resize", () => {
|
window.addEventListener("resize", () => {
|
||||||
videos.forEach((video) => {
|
videos.forEach((video) => {
|
||||||
if (window.innerWidth < 1025) {
|
if (window.innerWidth < 1025) {
|
||||||
video.muted = true;
|
video.muted = true;
|
||||||
// video.play();
|
// video.play();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
---
|
---
|
||||||
import NavBar from "../components/sections/NavBar.astro";
|
import NavBar from "../components/global/NavBar.astro";
|
||||||
import Layout from "../layouts/Layout.astro";
|
import Layout from "../layouts/Layout.astro";
|
||||||
import SkillsComponent from "../components/sections/SkillsComponent.astro";
|
import SkillsComponent from "../components/skills/SkillsComponent.astro";
|
||||||
import MoreSkills from "../components/sections/MoreSkills.astro";
|
import MoreSkills from "../components/skills/MoreSkills.astro";
|
||||||
import Footer from "../components/sections/FooterComponent.astro";
|
import Footer from "../components/global/FooterComponent.astro";
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout
|
<Layout
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
---
|
---
|
||||||
import Layout from "../layouts/Layout.astro";
|
import Layout from "../layouts/Layout.astro";
|
||||||
import StreamScheduleComponent from "../components/sections/StreamSchedule.svelte";
|
import StreamScheduleComponent from "../components/socials/StreamSchedule.svelte";
|
||||||
import Footer from "../components/sections/FooterComponent.astro";
|
import Footer from "../components/global/FooterComponent.astro";
|
||||||
import { Image } from "astro:assets";
|
import { Image } from "astro:assets";
|
||||||
import profile from "./_images/profile.webp";
|
import profile from "./_images/profile.webp";
|
||||||
import WebsiteIcon from "./_images/website-icon.svg";
|
import WebsiteIcon from "./_images/website-icon.svg";
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,10 @@
|
||||||
---
|
---
|
||||||
import NavBar from "../components/sections/NavBar.astro";
|
import NavBar from "../components/global/NavBar.astro";
|
||||||
import Layout from "../layouts/Layout.astro";
|
import Layout from "../layouts/Layout.astro";
|
||||||
import WhatIDoComponent from "../components/sections/WhatIDoComponent.astro";
|
import WhatIDoComponent from "../components/what-i-do/WhatIDoComponent.astro";
|
||||||
import Card from "../components/elements/Card.astro";
|
import Card from "../components/global/Card.astro";
|
||||||
import Line from "../components/elements/NetworkLine.astro";
|
import Line from "../components/global/NetworkLine.astro";
|
||||||
import Footer from "../components/sections/FooterComponent.astro";
|
import Footer from "../components/global/FooterComponent.astro";
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout
|
<Layout
|
||||||
|
|
|
||||||
|
|
@ -1,30 +0,0 @@
|
||||||
/** @type {import('tailwindcss').Config} */
|
|
||||||
module.exports = {
|
|
||||||
content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
keyframes: {
|
|
||||||
gradient: {
|
|
||||||
"0%": {
|
|
||||||
"background-position": "0% 50%",
|
|
||||||
},
|
|
||||||
"50%": {
|
|
||||||
"background-position": "100% 50%",
|
|
||||||
},
|
|
||||||
"100%": {
|
|
||||||
"background-position": "0% 50%",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
fadeIn: {
|
|
||||||
"0%": { opacity: 0 },
|
|
||||||
"100%": { opacity: 1 },
|
|
||||||
},
|
|
||||||
},
|
|
||||||
animation: {
|
|
||||||
gradient: "gradient 15s ease infinite",
|
|
||||||
fadeIn: "fadeIn 1s ease",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
plugins: [],
|
|
||||||
};
|
|
||||||
Loading…
Reference in a new issue