diff --git a/astro.config.mjs b/astro.config.mjs index 3c276c6..35628eb 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -1,7 +1,12 @@ import { defineConfig } from 'astro/config'; +import react from "@astrojs/react"; + // https://astro.build/config export default defineConfig({ site: "https://retrozinndev.github.io", - base: "." + base: ".", + integrations: [ + react() + ], }); diff --git a/package.json b/package.json index f95de07..bc7f8ec 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,15 @@ }, "dependencies": { "@astrojs/check": "^0.9.4", + "@astrojs/react": "^4.2.7", + "@octokit/rest": "github:octokit/rest.js", + "@types/react": "^19.1.4", + "@types/react-dom": "^19.1.5", "astro": "^5.1.7", + "nanostores": "^1.0.1", + "react": "^19.1.0", + "react-dom": "^19.1.0", + "react-icons": "^5.5.0", "typescript": "^5.4.5" }, "devDependencies": { diff --git a/src/components/LanguageSelector.tsx b/src/components/LanguageSelector.tsx new file mode 100644 index 0000000..bed0568 --- /dev/null +++ b/src/components/LanguageSelector.tsx @@ -0,0 +1,25 @@ +import { i18n, languages } from "../i18n/ui"; + +type Props = { + visible?: boolean; + defaultLanguage?: string; +}; + +export default function(props: Props) { + return +} diff --git a/src/components/LinkButton.astro b/src/components/LinkButton.astro index f6355c2..531b5ce 100644 --- a/src/components/LinkButton.astro +++ b/src/components/LinkButton.astro @@ -1,15 +1,26 @@ --- +import { FaArrowUpRightFromSquare } from 'react-icons/fa6'; + interface Props { href: string; external?: boolean; + showIcon?: boolean; + title?: string; + spacing?: boolean; } -const { href, external } = Astro.props; +const { href, external, title, showIcon = true, spacing = true } = Astro.props; --- - - + + + + diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro deleted file mode 100644 index 9690188..0000000 --- a/src/components/Navigation.astro +++ /dev/null @@ -1,204 +0,0 @@ ---- -import { Image } from "astro:assets"; -import { useTranslations } from "../i18n/utils.ts"; -import { i18n, languages } from "../i18n/ui.ts"; - -const pages = [ "stack", "projects" ]; -const lang = Astro.params.lang || "en"; -const tr = useTranslations(lang as never); ---- - -
- -
- - - - diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx new file mode 100644 index 0000000..6f09986 --- /dev/null +++ b/src/components/Navigation.tsx @@ -0,0 +1,109 @@ +import "../styles/components/Navigation.scss"; + +import { useEffect, useState, type ReactElement } from "react"; + +import { useTranslations } from "../i18n/utils"; +import { defaultLang } from "../i18n/ui"; +import ToggleThemeButton from "./ToggleThemeButton"; +import LanguageSelector from "./LanguageSelector"; +import { AstroJSX } from "astro/jsx-runtime"; + +interface Props { + lang?: string; + showLanguageSelector?: boolean; + showProfilePic?: boolean; +}; + +type Page = { + name: string; + href: string|URL; + hasI18n?: boolean; +}; + +const pages: Array = [ + { + name: "home", + href: "/", + hasI18n: true + }, + { + name: "about", + href: "/#about", + hasI18n: true + }, + { + name: "stack", + href: "/stack", + hasI18n: true + }, + { + name: "projects", + href: "/projects", + hasI18n: true + } +]; + +export default function(props: Props): ReactElement { + const showProfilePic = props.showProfilePic ?? true; + const lang = props.lang ?? defaultLang; + const tr = useTranslations(lang); + + const [scrolled, setScrolledState] = useState(false); + + useEffect(() => { + function handleScroll() { + if(window.scrollY >= 24) { + setScrolledState(true); + return; + } + + setScrolledState(false); + } + + window.addEventListener("scroll", handleScroll); + }); + + return
+ +
; +} diff --git a/src/components/ProjectCard.astro b/src/components/ProjectCard.astro index 8abde29..489c034 100644 --- a/src/components/ProjectCard.astro +++ b/src/components/ProjectCard.astro @@ -16,7 +16,8 @@ const { icon, developer, title, description, href } = Astro.props;
dev profile picture + } alt="dev profile picture" width={32} height={32} loading={"lazy"} + /> { developer }
diff --git a/src/components/ProjectsComponent.astro b/src/components/ProjectsComponent.astro index ac05296..39f98f0 100644 --- a/src/components/ProjectsComponent.astro +++ b/src/components/ProjectsComponent.astro @@ -1,48 +1,11 @@ --- -import { useTranslations } from "../i18n/utils"; import ProjectCard, { type Project } from "./ProjectCard.astro"; -const tr = useTranslations(Astro.params.lang as never || "en"); - -const projects: Array = [ - { - title: "colorshell", - developer: "retrozinndev", - description: "Super cool desktop shell for Hyprland!", - href: "https://github.com/retrozinndev/colorshell" - }, - { - title: "retrozinndev.github.io", - developer: "retrozinndev", - description: "My personal website", - href: "https://github.com/retrozinndev/retrozinndev.github.io" - }, - { - title: "parceirtoti.github.io", - developer: "parceiroti", - description: "ParceiroTI's website redesign", - href: "https://github.com/parceiroti/parceiroti.github.io" - }, - { - title: "UpDateN'Time", - developer: "retrozinndev", - description: "A Tool that synchronizes your date and time with the internet", - href: "https://github.com/retrozinndev/UpDateNTime" - }, - { - title: "The Traveler", - developer: "notestudios", - description: "A two-dimensional shooter game", - href: "https://github.com/notestudios/TheTraveler" - }, - { - title: "Space Shooter", - developer: "notestudios", - description: "Shoot meteors in Space!", - href: "https://github.com/notestudios/SpaceShooter" - } -]; +interface Props { + projects: Array; +} +const { projects } = Astro.props; ---
{ diff --git a/src/components/SocialLinks.astro b/src/components/SocialLinks.astro index 09890a7..6b0631a 100644 --- a/src/components/SocialLinks.astro +++ b/src/components/SocialLinks.astro @@ -1,16 +1,70 @@ --- -// Discord User Widget by vendicated (https://vendicated.dev/) +import type { IconType } from "react-icons"; +import { FaGithub, FaGitlab, FaXTwitter, FaReddit, FaDiscord } from "react-icons/fa6"; +import { FiMail } from "react-icons/fi"; import LinkButton from "./LinkButton.astro"; + +type SocialLink = { + name: string; + href: string; + icon: IconType +}; + +const socials: Array = [ + { + name: "GitHub", + href: "https://github.com/retrozinndev", + icon: FaGithub + }, + { + name: "GitLab", + href: "https://gitlab.com/retrozinndev", + icon: FaGitlab + }, + { + name: "Discord", + href: "https://discord.com/users/568589231954591749", + icon: FaDiscord + }, + { + name: "X / Twitter", + href: "https://x.com/retrozinndev", + icon: FaXTwitter + }, + { + name: "Reddit", + href: "https://reddit.com/user/Much_Clue7037", + icon: FaReddit + }, + { + name: "Mail", + href: "mailto:joaovodias@gmail.com", + icon: FiMail + } +]; --- +