mirror of
https://github.com/liyunze-coding/RythonDev.git
synced 2026-09-22 15:53:57 +00:00
switched to Bun, updating navbar
This commit is contained in:
liyunze
parent
6084e5c31a
commit
b93ef03e4c
30 changed files with 1429 additions and 6286 deletions
|
|
@ -6,23 +6,24 @@ import tailwindcss from "@tailwindcss/vite";
|
|||
|
||||
import svelte from "@astrojs/svelte";
|
||||
|
||||
import react from "@astrojs/react";
|
||||
|
||||
// https://astro.build/config
|
||||
export default defineConfig({
|
||||
integrations: [mdx(), svelte()],
|
||||
integrations: [mdx(), svelte(), react()],
|
||||
|
||||
server: {
|
||||
port: 8008,
|
||||
hostname: "RythonDev",
|
||||
},
|
||||
server: {
|
||||
port: 8008,
|
||||
hostname: "RythonDev",
|
||||
},
|
||||
|
||||
site: "https://rython.dev",
|
||||
site: "https://rython.dev",
|
||||
|
||||
vite: {
|
||||
plugins: [tailwindcss()],
|
||||
},
|
||||
|
||||
image: {
|
||||
service: passthroughImageService(),
|
||||
},
|
||||
vite: {
|
||||
plugins: [tailwindcss()],
|
||||
},
|
||||
|
||||
image: {
|
||||
service: passthroughImageService(),
|
||||
},
|
||||
});
|
||||
5904
package-lock.json
generated
5904
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -11,13 +11,21 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@astrojs/mdx": "^4.3.0",
|
||||
"@astrojs/react": "^4.3.0",
|
||||
"@astrojs/svelte": "^7.1.0",
|
||||
"@tailwindcss/vite": "^4.1.8",
|
||||
"@types/react": "^19.1.9",
|
||||
"@types/react-dom": "^19.1.7",
|
||||
"astro": "^5.10.0",
|
||||
"caniuse-lite": "^1.0.30001698",
|
||||
"clsx": "^2.1.1",
|
||||
"moment": "^2.30.1",
|
||||
"moment-timezone": "^0.6.0",
|
||||
"motion": "^12.23.12",
|
||||
"react": "^19.1.1",
|
||||
"react-dom": "^19.1.1",
|
||||
"svelte": "^5.33.16",
|
||||
"tailwind-merge": "^3.3.1",
|
||||
"tailwindcss": "^4.1.8",
|
||||
"typescript": "^5.8.3"
|
||||
},
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 9.5 KiB |
|
|
@ -6,8 +6,8 @@ import Line from "../global/NetworkLine.astro";
|
|||
<div id="Experience" class="h-fit">
|
||||
<h1 class="text-center text-5xl">Experience</h1>
|
||||
<div class="flex flex-col items-center pt-10">
|
||||
<div class="w-[90%] md:w-[600px]">
|
||||
<Card primaryColor="#F6DFD8">
|
||||
<div class="w-[90%] md:w-[600px] lg:w-1/2">
|
||||
<Card primaryColor="#F6DFD8" className="animate-fadeIn">
|
||||
<div class="px-4 py-4 md:px-8 md:py-8">
|
||||
<div class="mb-3 flex w-full flex-col justify-start gap-1">
|
||||
<h2 class="text-xl font-bold">Full Stack Developer</h2>
|
||||
|
|
@ -19,20 +19,27 @@ import Line from "../global/NetworkLine.astro";
|
|||
Led implementation of frontend technology stack for
|
||||
websites. Worked closely with UI/UX designers to
|
||||
translate designs into code, and integrate smoothly with
|
||||
CMS. Performing research and development for backend
|
||||
the CMS. Performing research and development for backend
|
||||
projects.
|
||||
</p>
|
||||
<h3 class="mb-1 text-lg font-bold">Relevant skills:</h3>
|
||||
|
||||
<ul class="list-inside list-disc">
|
||||
<li>Astro</li>
|
||||
<li>Typescript</li>
|
||||
<li>TailwindCSS</li>
|
||||
</ul>
|
||||
<div
|
||||
class="flex flex-col items-start justify-start gap-0 md:flex-row md:gap-10"
|
||||
>
|
||||
<ul class="list-inside list-disc">
|
||||
<li>NextJS</li>
|
||||
<li>React</li>
|
||||
<li>Astro</li>
|
||||
</ul>
|
||||
<ul class="list-inside list-disc">
|
||||
<li>Typescript</li>
|
||||
<li>TailwindCSS</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
<Line height="50px" />
|
||||
<Card primaryColor="#F6DFD8">
|
||||
<Card primaryColor="#F6DFD8" className="view-fadeUp">
|
||||
<div class="px-4 py-4 md:px-8 md:py-8">
|
||||
<div class="mb-3 flex w-full flex-col justify-start gap-1">
|
||||
<h2 class="text-xl font-bold">
|
||||
|
|
@ -42,8 +49,8 @@ import Line from "../global/NetworkLine.astro";
|
|||
</div>
|
||||
<hr class="mb-3 w-full" />
|
||||
<p class="mb-3">
|
||||
Currently pursuing my Bachelor's degree in Computer
|
||||
Science in Australia as a 50% Vice-Chancellor Scholar.
|
||||
Awarded a 50% Vice-Chancellor Scholarship to study
|
||||
Bachelor's in Computer Science.
|
||||
</p>
|
||||
<h3 class="mb-1 text-lg font-bold">Relevant skills:</h3>
|
||||
<div
|
||||
|
|
@ -53,9 +60,9 @@ import Line from "../global/NetworkLine.astro";
|
|||
<li>Java</li>
|
||||
<li>Kotlin</li>
|
||||
<li>C#</li>
|
||||
<li>Vue.JS</li>
|
||||
</ul>
|
||||
<ul class="list-inside list-disc">
|
||||
<li>Vue.JS</li>
|
||||
<li>MongoDB</li>
|
||||
<li>PostgreSQL</li>
|
||||
</ul>
|
||||
|
|
@ -64,7 +71,7 @@ import Line from "../global/NetworkLine.astro";
|
|||
</Card>
|
||||
|
||||
<Line height="50px" />
|
||||
<Card primaryColor="#F6DFD8">
|
||||
<Card primaryColor="#F6DFD8" className="view-fadeUp">
|
||||
<div class="px-4 py-4 md:px-8 md:py-8">
|
||||
<div class="mb-3 flex w-full flex-col justify-start gap-1">
|
||||
<h2 class="text-xl font-bold">
|
||||
|
|
|
|||
|
|
@ -5,9 +5,9 @@ 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]">
|
||||
<div class="w-[90%] md:w-[600px] lg:w-1/2">
|
||||
<Line height="50px" />
|
||||
<Card primaryColor="#FFAC21">
|
||||
<Card primaryColor="#FFAC21" className="view-fadeUp">
|
||||
<div class="px-4 py-4 md:px-8 md:py-8">
|
||||
<div class="mb-3 flex w-full flex-col justify-start gap-1">
|
||||
<h2 class="text-xl font-bold">
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ type Props = {
|
|||
const {
|
||||
href,
|
||||
primaryColor,
|
||||
bgColor = "#282828",
|
||||
bgColor = "var(--color-secondary)",
|
||||
scaleOnHover = false,
|
||||
pixelHeight = "70px",
|
||||
className = "",
|
||||
|
|
@ -36,7 +36,7 @@ const {
|
|||
{
|
||||
!href && (
|
||||
<div
|
||||
class="card z-10"
|
||||
class="card z-10 mb-0"
|
||||
class:list={[{ scale: scaleOnHover }, className]}
|
||||
>
|
||||
<div class="card-content">
|
||||
|
|
@ -63,10 +63,9 @@ const {
|
|||
height: inherit;
|
||||
position: relative;
|
||||
background-color: var(--bgColor);
|
||||
border: 1px solid rgb(255 255 255 / 5%);
|
||||
border: 1px solid rgb(255 255 255 / 10%);
|
||||
border-radius: 1.5rem;
|
||||
padding: 0.5rem;
|
||||
box-shadow: 0px 5px 5px 5px #141414;
|
||||
}
|
||||
|
||||
.card:after {
|
||||
|
|
@ -104,10 +103,6 @@ const {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
background-image: radial-gradient(
|
||||
rgba(255, 255, 255, 0.1) 1px,
|
||||
transparent 1px
|
||||
);
|
||||
background-position: 50% 50%;
|
||||
background-size: 1.1rem 1.1rem;
|
||||
}
|
||||
|
|
|
|||
37
src/components/global/NavBar.tsx
Normal file
37
src/components/global/NavBar.tsx
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
import { HoverNavigation } from "@/components/ui/HoverNavigation";
|
||||
|
||||
export default function Navigationbar() {
|
||||
const navLinks = [
|
||||
{
|
||||
label: "Home",
|
||||
link: "/",
|
||||
},
|
||||
{
|
||||
label: "Experience",
|
||||
link: "/experience",
|
||||
},
|
||||
{
|
||||
label: "Projects",
|
||||
link: "/projects",
|
||||
},
|
||||
{
|
||||
label: "Skills",
|
||||
link: "/skills",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
link: "/contact",
|
||||
},
|
||||
];
|
||||
return (
|
||||
<div className="bg-secondary fixed top-5 left-1/2 z-30 box-border flex w-auto -translate-x-1/2 items-center justify-center gap-5 overflow-auto rounded-full border-2 border-solid border-gray-700 px-5 py-3">
|
||||
<img
|
||||
src="/images/pfp_new.webp"
|
||||
alt="Ryan"
|
||||
width={50}
|
||||
className="rounded-full"
|
||||
/>
|
||||
<HoverNavigation items={navLinks} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,40 +1,40 @@
|
|||
---
|
||||
interface Props {
|
||||
height: string;
|
||||
height: string;
|
||||
}
|
||||
|
||||
const { height } = Astro.props;
|
||||
---
|
||||
|
||||
<div id="line-container" class="relative flex items-center justify-center p-0">
|
||||
<div id="line" class="h-full w-[1px]"></div>
|
||||
<div id="line" class="h-full w-[1px] p-0"></div>
|
||||
</div>
|
||||
|
||||
<style define:vars={{ height }}>
|
||||
@keyframes gradientAnimation {
|
||||
0% {
|
||||
background-position: 0 50%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0 -100%;
|
||||
}
|
||||
}
|
||||
#line-container {
|
||||
height: var(--height);
|
||||
}
|
||||
@keyframes gradientAnimation {
|
||||
0% {
|
||||
background-position: 0 50%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0 -100%;
|
||||
}
|
||||
}
|
||||
#line-container {
|
||||
height: var(--height);
|
||||
}
|
||||
|
||||
#line {
|
||||
background-image: linear-gradient(
|
||||
to bottom,
|
||||
#404040 5%,
|
||||
#aaa 10%,
|
||||
#404040 15%
|
||||
);
|
||||
background-size: 100% 200%;
|
||||
animation: gradientAnimation 2s linear infinite;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
#line {
|
||||
background-image: linear-gradient(
|
||||
to bottom,
|
||||
#404040 0%,
|
||||
#aaa 5%,
|
||||
#404040 10%
|
||||
);
|
||||
background-size: 100% 200%;
|
||||
animation: gradientAnimation 2s linear infinite;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -55,6 +55,7 @@
|
|||
|
||||
// after window finish loading, call animateRoles()
|
||||
onMount(async () => {
|
||||
await sleep(500);
|
||||
animateGreeting(greeting);
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -4,8 +4,8 @@ import Socials from "../socials/Socials.svelte";
|
|||
import Greeting from "./Greeting.svelte";
|
||||
---
|
||||
|
||||
<div class="w-[90%] md:w-[600px] lg:w-1/2 xl:w-1/2">
|
||||
<Card bgColor="#252525" primaryColor="#BEADFA" className="animate-fadeIn">
|
||||
<div class="w-[90%] md:w-[600px] lg:w-1/2">
|
||||
<Card primaryColor="#BEADFA" className="animate-fadeIn">
|
||||
<div id="intro" class="flex h-fit flex-col text-white">
|
||||
<div class="w-full px-5 pt-10 pb-2 lg:px-10">
|
||||
<div class="flex h-20 flex-row">
|
||||
|
|
@ -40,14 +40,10 @@ import Greeting from "./Greeting.svelte";
|
|||
<Greeting client:load />, <br class="sm:hidden" />I'm Ryan!
|
||||
</div>
|
||||
<p class="text-left">
|
||||
Born and raised in Malaysia, I'm currently pursuing a
|
||||
Bachelor's in Computer Science in Australia.
|
||||
</p>
|
||||
<br />
|
||||
<p class="text-left">
|
||||
My work has connected me with Twitch streamers and content
|
||||
creators, and I'm driven by interests in web development,
|
||||
computer vision, and data science.
|
||||
A Malaysian software developer studying in Australia, fluent
|
||||
in English and Mandarin Chinese. My work in software
|
||||
development has connected me with many Twitch streamers and
|
||||
content creators.
|
||||
</p>
|
||||
|
||||
<div class="mt-8 flex flex-row items-center justify-center">
|
||||
|
|
|
|||
BIN
src/components/images/pfp_new.webp
Normal file
BIN
src/components/images/pfp_new.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
|
|
@ -6,7 +6,7 @@ import Skill from "./Skill.astro";
|
|||
|
||||
<div id="Experience" class="h-fit">
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-[90%] md:w-[600px]">
|
||||
<div class="w-[90%] md:w-[600px] lg:w-1/2">
|
||||
<Line height="50px" />
|
||||
<Skill
|
||||
title="Content Creation"
|
||||
|
|
|
|||
|
|
@ -6,19 +6,21 @@ interface Tag {
|
|||
bgColor: string;
|
||||
textColor?: string;
|
||||
hoverTextColor?: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
tags?: Tag[];
|
||||
primaryColor: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const { title, tags, primaryColor } = Astro.props;
|
||||
const { title, tags, primaryColor, className = "" } = Astro.props;
|
||||
---
|
||||
|
||||
<div class="mx-auto w-[90%] md:w-[600px]">
|
||||
<Card primaryColor={primaryColor}>
|
||||
<div class="mx-auto w-full">
|
||||
<Card primaryColor={primaryColor} {className}>
|
||||
<div class="px-8 py-8">
|
||||
<div class="flex w-full flex-col">
|
||||
<h2 class="text-2xl font-bold">{title}</h2>
|
||||
|
|
@ -48,16 +50,5 @@ const { title, tags, primaryColor } = Astro.props;
|
|||
[class*="tag-"] {
|
||||
background-color: var(--tag-bg);
|
||||
color: var(--tag-text);
|
||||
|
||||
@media (width >= 48rem /* 768px */) {
|
||||
background-color: var(--color-gray-500);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
background-color: var(--tag-bg);
|
||||
color: var(--tag-hover-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -7,8 +7,9 @@ import Skill from "./Skill.astro";
|
|||
<div class="h-fit w-full pt-20">
|
||||
<h1 class="text-center text-5xl">Skills</h1>
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-[90%] pt-10 md:w-[600px]">
|
||||
<div class="w-[90%] pt-10 md:w-[600px] lg:w-1/2">
|
||||
<Skill
|
||||
className="view-fadeUp"
|
||||
title="Frontend Development"
|
||||
primaryColor="#19a7ce"
|
||||
tags={[
|
||||
|
|
@ -23,7 +24,7 @@ import Skill from "./Skill.astro";
|
|||
{
|
||||
text: "Javascript",
|
||||
bgColor: "var(--color-yellow-400)",
|
||||
hoverTextColor: "black",
|
||||
textColor: "black",
|
||||
},
|
||||
{
|
||||
text: "Typescript",
|
||||
|
|
@ -36,12 +37,12 @@ import Skill from "./Skill.astro";
|
|||
{
|
||||
text: "React",
|
||||
bgColor: "var(--color-react)",
|
||||
hoverTextColor: "black",
|
||||
textColor: "black",
|
||||
},
|
||||
{
|
||||
text: "Vue",
|
||||
bgColor: "var(--color-green-500)",
|
||||
hoverTextColor: "black",
|
||||
textColor: "black",
|
||||
},
|
||||
{
|
||||
text: "WordPress",
|
||||
|
|
@ -50,17 +51,18 @@ import Skill from "./Skill.astro";
|
|||
{
|
||||
text: "Astro",
|
||||
bgColor: "white",
|
||||
hoverTextColor: "black",
|
||||
textColor: "black",
|
||||
},
|
||||
{
|
||||
text: "TailwindCSS",
|
||||
bgColor: "var(--color-tailwind)",
|
||||
hoverTextColor: "black",
|
||||
textColor: "black",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<Line height="50px" />
|
||||
<Skill
|
||||
className="view-fadeUp"
|
||||
title="Backend Development"
|
||||
primaryColor="#474F7A"
|
||||
tags={[
|
||||
|
|
@ -100,6 +102,7 @@ import Skill from "./Skill.astro";
|
|||
/>
|
||||
<Line height="50px" />
|
||||
<Skill
|
||||
className="view-fadeUp"
|
||||
title="Data Science"
|
||||
primaryColor="#a1eebd"
|
||||
tags={[
|
||||
|
|
@ -134,7 +137,7 @@ import Skill from "./Skill.astro";
|
|||
{
|
||||
text: "BeautifulSoup4",
|
||||
bgColor: "white",
|
||||
hoverTextColor: "black",
|
||||
textColor: "black",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
|
|
|||
101
src/components/ui/HoverNavigation.tsx
Normal file
101
src/components/ui/HoverNavigation.tsx
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
import { cn } from "@/lib/utils";
|
||||
import {
|
||||
AnimatePresence,
|
||||
motion,
|
||||
useScroll,
|
||||
useMotionValueEvent,
|
||||
} from "motion/react";
|
||||
|
||||
import { useState } from "react";
|
||||
|
||||
export const HoverNavigation = ({
|
||||
items,
|
||||
className,
|
||||
}: {
|
||||
items: {
|
||||
label: string;
|
||||
link: string;
|
||||
}[];
|
||||
className?: string;
|
||||
}) => {
|
||||
let [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
|
||||
const { scrollYProgress } = useScroll();
|
||||
const [visible, setVisible] = useState(true);
|
||||
|
||||
useMotionValueEvent(scrollYProgress, "change", (current) => {
|
||||
// Check if current is not undefined and is a number
|
||||
if (typeof current === "number") {
|
||||
let direction = current! - scrollYProgress.getPrevious()!;
|
||||
|
||||
if (scrollYProgress.get() < 0.05) {
|
||||
setVisible(true);
|
||||
} else {
|
||||
if (direction > 0) {
|
||||
setVisible(false);
|
||||
} else {
|
||||
setVisible(true);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
animate={{
|
||||
width: visible ? "100%" : "0%",
|
||||
}}
|
||||
className={cn(
|
||||
"flex flex-row items-center justify-center overflow-hidden",
|
||||
className,
|
||||
)}
|
||||
>
|
||||
{items.map((item, idx) => (
|
||||
<a
|
||||
href={item?.link}
|
||||
key={item?.link}
|
||||
className="group relative block h-full w-auto px-5 py-2"
|
||||
onMouseEnter={() => setHoveredIndex(idx)}
|
||||
onMouseLeave={() => setHoveredIndex(null)}
|
||||
>
|
||||
<AnimatePresence>
|
||||
{hoveredIndex === idx && (
|
||||
<motion.span
|
||||
className="absolute inset-0 block h-full w-full rounded-3xl bg-neutral-200"
|
||||
layoutId="hoverBackground"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{
|
||||
opacity: 1,
|
||||
transition: { duration: 0.15 },
|
||||
}}
|
||||
exit={{
|
||||
opacity: 0,
|
||||
transition: { duration: 0.15, delay: 0.2 },
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
<NavBarLink>{item.label}</NavBarLink>
|
||||
</a>
|
||||
))}
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
|
||||
export const NavBarLink = ({
|
||||
className,
|
||||
children,
|
||||
}: {
|
||||
className?: string;
|
||||
children: React.ReactNode;
|
||||
}) => {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"relative z-20 h-full w-full overflow-hidden rounded-2xl text-center transition-all ease-out group-hover:text-black",
|
||||
className,
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
0
src/components/ui/displayOnScroll.tsx
Normal file
0
src/components/ui/displayOnScroll.tsx
Normal file
|
|
@ -1,53 +0,0 @@
|
|||
---
|
||||
import Card from "../global/Card.astro";
|
||||
---
|
||||
|
||||
<div class="flex w-full flex-col items-center justify-center">
|
||||
<div
|
||||
class="flex h-fit w-full max-w-[1440px] flex-col items-center justify-center"
|
||||
>
|
||||
<h1 class="mb-10 text-center text-5xl">What I Do</h1>
|
||||
<div
|
||||
class="grid w-[90%] grid-cols-1 place-content-center justify-center gap-5 sm:w-[350px] lg:w-[90%] lg:grid-cols-3 xl:w-4/5 xl:gap-12"
|
||||
>
|
||||
<Card primaryColor="#19a7ce" scaleOnHover={true}>
|
||||
<div class="px-8 py-8">
|
||||
<h2 class="text-center text-xl font-bold">
|
||||
Web Development
|
||||
</h2>
|
||||
<hr class="my-3 w-full" />
|
||||
<p class="text-center text-balance">
|
||||
Bringing ideas to life on the web is my passion. I enjoy
|
||||
bringing my imagination to life through web development.
|
||||
</p>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card primaryColor="#a1eebd" scaleOnHover={true}>
|
||||
<div class="px-8 py-8">
|
||||
<h2 class="text-center text-xl font-bold">Data Science</h2>
|
||||
<hr class="my-3 w-full" />
|
||||
<p class="text-center text-balance">
|
||||
Using data to make decisions is a powerful tool. I am
|
||||
experienced in analyzing data and making decisions based
|
||||
on data.
|
||||
</p>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card primaryColor="#9D76C1" scaleOnHover={true}>
|
||||
<div class="px-8 py-8">
|
||||
<h2 class="text-center text-xl font-bold">
|
||||
Content Creation
|
||||
</h2>
|
||||
<hr class="my-3 w-full" />
|
||||
<p class="text-center text-balance">
|
||||
Everyone has something to give, or something to share. I
|
||||
produce content around productivity and software
|
||||
development.
|
||||
</p>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -2,9 +2,11 @@
|
|||
interface Props {
|
||||
title: string;
|
||||
description: string;
|
||||
thumbnail?: string;
|
||||
metaURL?: string;
|
||||
}
|
||||
|
||||
const { title, description } = Astro.props;
|
||||
const { title, description, thumbnail, metaURL } = Astro.props;
|
||||
import "../styles/global.css";
|
||||
import { ClientRouter } from "astro:transitions";
|
||||
---
|
||||
|
|
@ -20,6 +22,18 @@ import { ClientRouter } from "astro:transitions";
|
|||
/>
|
||||
<meta name="author" content="RythonDev" />
|
||||
<meta name="theme-color" content="#2B2D31" />
|
||||
|
||||
{
|
||||
thumbnail && (
|
||||
<>
|
||||
<meta name="twitter:image" content={thumbnail} />
|
||||
<meta name="og:image" content={thumbnail} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
{metaURL && <meta name="og:url" content={metaURL} />}
|
||||
|
||||
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<title>{title}</title>
|
||||
|
|
@ -59,8 +73,26 @@ import { ClientRouter } from "astro:transitions";
|
|||
body {
|
||||
font-family: "Montserrat", sans-serif;
|
||||
color: #fff;
|
||||
background: #0e0e11;
|
||||
background:
|
||||
radial-gradient(circle, #383838 1px, transparent 1px), #202020;
|
||||
radial-gradient(circle, #303030 1px, transparent 1px), #101010;
|
||||
background-size: 20px 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script is:inline>
|
||||
document.addEventListener("astro:page-load", () => {
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add("view-appear");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const elements = document.querySelectorAll(".view-fadeUp");
|
||||
elements.forEach((el) => {
|
||||
observer.observe(el);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
7
src/lib/utils.ts
Normal file
7
src/lib/utils.ts
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
import { clsx } from "clsx";
|
||||
import type { ClassValue } from "clsx";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs));
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
import NavBar from "../components/global/NavBar.astro";
|
||||
import NavBar from "../components/global/NavBar.tsx";
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
import ContactComponent from "../components/contact/ContactComponent.svelte";
|
||||
import Card from "../components/global/Card.astro";
|
||||
|
|
@ -15,7 +15,7 @@ import Footer from "../components/global/FooterComponent.astro";
|
|||
<h1 class="text-center text-5xl">Contact</h1>
|
||||
<div class="mt-10 flex items-center justify-center">
|
||||
<div class="w-[90%] md:w-[600px]">
|
||||
<Card primaryColor="#40A2D8">
|
||||
<Card primaryColor="#40A2D8" className="animate-fadeIn">
|
||||
<div class="px-8 py-8">
|
||||
<div class="justify-left mb-3 flex w-full flex-col">
|
||||
<h2
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
import NavBar from "../components/global/NavBar.astro";
|
||||
import NavBar from "../components/global/NavBar.tsx";
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
import EducationComponent from "../components/experience/ExperienceComponent.astro";
|
||||
import ExperienceComponent from "../components/experience/ExperienceComponent.astro";
|
||||
import MoreExperience from "../components/experience/MoreExperience.astro";
|
||||
import Footer from "../components/global/FooterComponent.astro";
|
||||
---
|
||||
|
|
@ -11,8 +11,8 @@ import Footer from "../components/global/FooterComponent.astro";
|
|||
description="Find out RythonDev's previous education"
|
||||
>
|
||||
<NavBar />
|
||||
<div id="Experience" class="py-20">
|
||||
<EducationComponent />
|
||||
<div id="Experience" class="pt-30">
|
||||
<ExperienceComponent />
|
||||
<MoreExperience />
|
||||
</div>
|
||||
<Footer />
|
||||
|
|
|
|||
|
|
@ -1,14 +1,12 @@
|
|||
---
|
||||
import NavBar from "../components/global/NavBar.astro";
|
||||
import NavBar from "../components/global/NavBar.tsx";
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
import NetworkLine from "../components/global/NetworkLine.astro";
|
||||
import WhatIDo from "../components/what-i-do/WhatIDoComponent.astro";
|
||||
import Intro from "../components/home/Intro.astro";
|
||||
import Projects from "../components/projects/ProjectsComponent.astro";
|
||||
import Experience from "../components/experience/ExperienceComponent.astro";
|
||||
import Skills from "../components/skills/SkillsComponent.astro";
|
||||
import Contact from "../components/contact/ContactComponent.svelte";
|
||||
import Card from "../components/global/Card.astro";
|
||||
import Footer from "../components/global/FooterComponent.astro";
|
||||
---
|
||||
|
||||
|
|
@ -16,15 +14,11 @@ import Footer from "../components/global/FooterComponent.astro";
|
|||
title="Ryan's Portfolio"
|
||||
description="Ryan is a software developer, streamer and Computer Science undergraduate. Learn more about him and his skills here!"
|
||||
>
|
||||
<NavBar />
|
||||
<div id="home" class="flex items-center justify-center pt-20">
|
||||
<NavBar client:load />
|
||||
<div id="home" class="flex items-center justify-center pt-32">
|
||||
<Intro />
|
||||
</div>
|
||||
<NetworkLine height="70px" />
|
||||
<!-- <div id="what-i-do">
|
||||
|
||||
<WhatIDo />
|
||||
</div> -->
|
||||
<div id="education">
|
||||
<div class="mx-auto mb-10 h-[1px] w-1/3 bg-[#404040]"></div>
|
||||
<Experience />
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
import NavBar from "../components/global/NavBar.astro";
|
||||
import NavBar from "../components/global/NavBar.tsx";
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
import ProjectsComponent from "../components/projects/ProjectsComponent.astro";
|
||||
import MoreProjects from "../components/projects/MoreProjects.svelte";
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
import NavBar from "../components/global/NavBar.astro";
|
||||
import NavBar from "../components/global/NavBar.tsx";
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
import SkillsComponent from "../components/skills/SkillsComponent.astro";
|
||||
import MoreSkills from "../components/skills/MoreSkills.astro";
|
||||
|
|
|
|||
|
|
@ -1,193 +0,0 @@
|
|||
---
|
||||
import NavBar from "../components/global/NavBar.astro";
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
import WhatIDoComponent from "../components/what-i-do/WhatIDoComponent.astro";
|
||||
import Card from "../components/global/Card.astro";
|
||||
import Line from "../components/global/NetworkLine.astro";
|
||||
import Footer from "../components/global/FooterComponent.astro";
|
||||
---
|
||||
|
||||
<Layout
|
||||
title="What I Do"
|
||||
description="What Ryan's skillsets are, in Data Science, Web Development and Content Creation"
|
||||
>
|
||||
<NavBar />
|
||||
<div id="what-i-do" class="mt-10 pt-20 pb-20">
|
||||
<WhatIDoComponent />
|
||||
|
||||
<div class="mx-auto mt-20 w-[90%] md:w-[750px]">
|
||||
<Card primaryColor="#19a7ce">
|
||||
<div class="px-8 py-8">
|
||||
<h2
|
||||
id="web-dev"
|
||||
class="animate-gradient text-2xl font-bold"
|
||||
>
|
||||
Web Development
|
||||
</h2>
|
||||
<hr class="mt-3 mb-3 w-full" />
|
||||
<div class="mb-5">
|
||||
<h3 class="text-xl font-bold">Websites</h3>
|
||||
<p class="mt-1 text-left">
|
||||
I am beyond just a programmer; I'm a developer who
|
||||
can turn your vision into a clickable product.
|
||||
Through custom designs, intuitive user experiences,
|
||||
and special attention to detail, I can bring your
|
||||
brand to life online.
|
||||
</p>
|
||||
</div>
|
||||
<div class="mb-5">
|
||||
<h3 class="text-xl font-bold">Web Apps</h3>
|
||||
<p class="mt-1 text-left">
|
||||
With a growing dislike against tools with premium
|
||||
features stuck behind a subscription service, I
|
||||
design and craft solutions that solves problems and
|
||||
improves my workflow.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-bold">Widgets</h3>
|
||||
<p class="mt-1 text-left">
|
||||
Leveraging my web development skills, I built stream
|
||||
widgets to level up livestreams on Twitch and
|
||||
YouTube. Easy to use and customize, my work have
|
||||
been used by 100+ Twitch streamers!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
<Line height="50px" />
|
||||
<Card primaryColor="#a1eebd">
|
||||
<div class="px-8 py-8">
|
||||
<h2
|
||||
id="data-science"
|
||||
class="animate-gradient text-2xl font-bold"
|
||||
>
|
||||
Data Science
|
||||
</h2>
|
||||
<hr class="mt-3 mb-3 w-full" />
|
||||
<div class="mb-5">
|
||||
<h3 class="text-xl font-bold">
|
||||
Data Analysis and Visualization
|
||||
</h3>
|
||||
<p class="mt-1 text-left">
|
||||
Translating numbers into works of art that inform,
|
||||
inspire, and guide decision-making. I can create
|
||||
visually compelling narratives that turn dry
|
||||
statistics into captivating stories.
|
||||
</p>
|
||||
</div>
|
||||
<div class="mb-5">
|
||||
<h3 class="text-xl font-bold">
|
||||
Statistics and Probability
|
||||
</h3>
|
||||
<p class="mt-1 text-left">
|
||||
Every number tells a story, but it takes the
|
||||
language of statistics and probability to truly
|
||||
understand it. Our world is full of data, but it's
|
||||
only through powerful tools that we can transform it
|
||||
into meaningful insights and actionable
|
||||
intelligence.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-bold">Machine Learning</h3>
|
||||
<p class="mt-1 text-left">
|
||||
Machine learning isn't just about mimicking human
|
||||
intelligence, it's about surpassing it. We push the
|
||||
boundaries of what's possible, collaborating with
|
||||
code to solve problems beyond human capabilities.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
<Line height="50px" />
|
||||
<Card primaryColor="#9D76C1">
|
||||
<div class="px-8 py-8">
|
||||
<h2
|
||||
id="content-creation"
|
||||
class="animate-gradient text-2xl font-bold"
|
||||
>
|
||||
Content Creation
|
||||
</h2>
|
||||
<hr class="mt-3 mb-3 w-full" />
|
||||
<div class="mb-5">
|
||||
<h3 class="text-xl font-bold">Streaming</h3>
|
||||
<p class="mt-1 text-left">
|
||||
Streaming isn't just about entertainment, it's about
|
||||
building a brand that resonates and inspires.
|
||||
Streaming allows me to engage with viewers in real
|
||||
time, developing their trust and allows me to build
|
||||
a community of like-minded people.
|
||||
</p>
|
||||
</div>
|
||||
<div class="mb-5">
|
||||
<h3 class="text-xl font-bold">Video Marketing</h3>
|
||||
<p class="mt-1 text-left">
|
||||
In this world where brand marketing centres around
|
||||
short videos (Instagram reels, Tiktok videos,
|
||||
YouTube shorts...), I aim to craft and produce
|
||||
videos that will engage with your targeted audience
|
||||
while maintaining a brand friendly identity.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-bold">Personality</h3>
|
||||
<p class="mt-1 text-left">
|
||||
I believe content should be an adventure, not a
|
||||
formula. My livestreams revolve around unscripted
|
||||
interactions, quirky challenges, and raw emotional
|
||||
moments. It's messy, it's exhilarating, and it's
|
||||
uniquely me.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
<Footer />
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
#web-dev {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
#afd3e2 0%,
|
||||
#19a7ce 45%,
|
||||
#a5d7e8 100%
|
||||
);
|
||||
|
||||
background-size: 300%;
|
||||
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
#data-science {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
#a1eebd 0%,
|
||||
#7bd3ea 45%,
|
||||
#f6f7c4 100%
|
||||
);
|
||||
|
||||
background-size: 300%;
|
||||
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
#content-creation {
|
||||
background: linear-gradient(90deg, #d09dff 40%, #ff6868 90%);
|
||||
|
||||
background-size: 300%;
|
||||
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,23 +1,62 @@
|
|||
@import "tailwindcss";
|
||||
|
||||
@theme {
|
||||
--color-html: #B11700;
|
||||
--color-typescript: #3178C6;
|
||||
--color-svelte: #B11700;
|
||||
--color-react: #00D8FF;
|
||||
--color-wordpress: #21759B;
|
||||
--color-htmx: #3366CC;
|
||||
--color-tailwind: #07B6D4;
|
||||
--color-python: #3776AB;
|
||||
--color-html: #b11700;
|
||||
--color-typescript: #3178c6;
|
||||
--color-svelte: #b11700;
|
||||
--color-react: #00d8ff;
|
||||
--color-wordpress: #21759b;
|
||||
--color-htmx: #3366cc;
|
||||
--color-tailwind: #07b6d4;
|
||||
--color-python: #3776ab;
|
||||
--color-csharp: #672079;
|
||||
--color-java: #ED8B00;
|
||||
--color-kotlin: #7F52FF;
|
||||
--color-php: #3D5694;
|
||||
--color-java: #ed8b00;
|
||||
--color-kotlin: #7f52ff;
|
||||
--color-php: #3d5694;
|
||||
--color-go: #006080;
|
||||
--color-rust: #B11700;
|
||||
--color-postgresql: #4479A1;
|
||||
--color-mysql: #1D6998;
|
||||
--color-mongodb: #09934E;
|
||||
--color-opencv: #10652F;
|
||||
--color-win32api: #0078D4;
|
||||
--color-rust: #b11700;
|
||||
--color-postgresql: #4479a1;
|
||||
--color-mysql: #1d6998;
|
||||
--color-mongodb: #09934e;
|
||||
--color-opencv: #10652f;
|
||||
--color-win32api: #0078d4;
|
||||
--color-primary: #fafafa;
|
||||
--color-secondary: #1d1c20;
|
||||
|
||||
--animate-fadeIn: fadeIn 0.5s ease-in-out;
|
||||
--animate-fadeUp: fadeUp 0.5s ease-in-out;
|
||||
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeUp {
|
||||
0% {
|
||||
opacity: 0;
|
||||
translate: 0px 10px;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 100%;
|
||||
translate: 0px 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.view-fadeUp {
|
||||
translate: 0px 30px;
|
||||
opacity: 0;
|
||||
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
.view-appear {
|
||||
translate: 0px 0px;
|
||||
opacity: 100%;
|
||||
}
|
||||
|
|
@ -1,3 +1,11 @@
|
|||
{
|
||||
"extends": "astro/tsconfigs/strict"
|
||||
"extends": "astro/tsconfigs/strict",
|
||||
"compilerOptions": {
|
||||
"jsx": "react-jsx",
|
||||
"jsxImportSource": "react",
|
||||
"baseUrl": "./",
|
||||
"paths": {
|
||||
"@/*": ["src/*"]
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue