hknsh's house

+)); +Card.displayName = "Card"; + +const CardHeader = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +

+)); +CardHeader.displayName = "CardHeader"; + +const CardTitle = React.forwardRef< + HTMLParagraphElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +

+)); +CardTitle.displayName = "CardTitle"; + +const CardDescription = React.forwardRef< + HTMLParagraphElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)); +CardDescription.displayName = "CardDescription"; + +const CardContent = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)); +CardContent.displayName = "CardContent"; + +const CardFooter = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)); +CardFooter.displayName = "CardFooter"; + +export { + Card, + CardHeader, + CardFooter, + CardTitle, + CardDescription, + CardContent, +}; diff --git a/src/components/ui/carousel.tsx b/src/components/ui/carousel.tsx new file mode 100644 index 0000000..5d18aff --- /dev/null +++ b/src/components/ui/carousel.tsx @@ -0,0 +1,260 @@ +import { ArrowLeftIcon, ArrowRightIcon } from "@radix-ui/react-icons"; +import useEmblaCarousel, { + type UseEmblaCarouselType, +} from "embla-carousel-react"; +import * as React from "react"; + +import { Button } from "@/components/ui/button"; +import { cn } from "@/lib/utils"; + +type CarouselApi = UseEmblaCarouselType[1]; +type UseCarouselParameters = Parameters; +type CarouselOptions = UseCarouselParameters[0]; +type CarouselPlugin = UseCarouselParameters[1]; + +type CarouselProps = { + opts?: CarouselOptions; + plugins?: CarouselPlugin; + orientation?: "horizontal" | "vertical"; + setApi?: (api: CarouselApi) => void; +}; + +type CarouselContextProps = { + carouselRef: ReturnType[0]; + api: ReturnType[1]; + scrollPrev: () => void; + scrollNext: () => void; + canScrollPrev: boolean; + canScrollNext: boolean; +} & CarouselProps; + +const CarouselContext = React.createContext(null); + +function useCarousel() { + const context = React.useContext(CarouselContext); + + if (!context) { + throw new Error("useCarousel must be used within a "); + } + + return context; +} + +const Carousel = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes & CarouselProps +>( + ( + { + orientation = "horizontal", + opts, + setApi, + plugins, + className, + children, + ...props + }, + ref, + ) => { + const [carouselRef, api] = useEmblaCarousel( + { + ...opts, + axis: orientation === "horizontal" ? "x" : "y", + }, + plugins, + ); + const [canScrollPrev, setCanScrollPrev] = React.useState(false); + const [canScrollNext, setCanScrollNext] = React.useState(false); + + const onSelect = React.useCallback((api: CarouselApi) => { + if (!api) { + return; + } + + setCanScrollPrev(api.canScrollPrev()); + setCanScrollNext(api.canScrollNext()); + }, []); + + const scrollPrev = React.useCallback(() => { + api?.scrollPrev(); + }, [api]); + + const scrollNext = React.useCallback(() => { + api?.scrollNext(); + }, [api]); + + const handleKeyDown = React.useCallback( + (event: React.KeyboardEvent) => { + if (event.key === "ArrowLeft") { + event.preventDefault(); + scrollPrev(); + } else if (event.key === "ArrowRight") { + event.preventDefault(); + scrollNext(); + } + }, + [scrollPrev, scrollNext], + ); + + React.useEffect(() => { + if (!api || !setApi) { + return; + } + + setApi(api); + }, [api, setApi]); + + React.useEffect(() => { + if (!api) { + return; + } + + onSelect(api); + api.on("reInit", onSelect); + api.on("select", onSelect); + + return () => { + api?.off("select", onSelect); + }; + }, [api, onSelect]); + + return ( + +
+ {children} +
+ + ); + }, +); +Carousel.displayName = "Carousel"; + +const CarouselContent = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => { + const { carouselRef, orientation } = useCarousel(); + + return ( +
+
+
+ ); +}); +CarouselContent.displayName = "CarouselContent"; + +const CarouselItem = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => { + const { orientation } = useCarousel(); + + return ( +
+ ); +}); +CarouselItem.displayName = "CarouselItem"; + +const CarouselPrevious = React.forwardRef< + HTMLButtonElement, + React.ComponentProps +>(({ className, variant = "outline", size = "icon", ...props }, ref) => { + const { orientation, scrollPrev, canScrollPrev } = useCarousel(); + + return ( + + ); +}); +CarouselPrevious.displayName = "CarouselPrevious"; + +const CarouselNext = React.forwardRef< + HTMLButtonElement, + React.ComponentProps +>(({ className, variant = "outline", size = "icon", ...props }, ref) => { + const { orientation, scrollNext, canScrollNext } = useCarousel(); + + return ( + + ); +}); +CarouselNext.displayName = "CarouselNext"; + +export { + type CarouselApi, + Carousel, + CarouselContent, + CarouselItem, + CarouselPrevious, + CarouselNext, +}; diff --git a/src/components/ui/scroll-area.tsx b/src/components/ui/scroll-area.tsx new file mode 100644 index 0000000..2f16a5f --- /dev/null +++ b/src/components/ui/scroll-area.tsx @@ -0,0 +1,46 @@ +import * as React from "react" +import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area" + +import { cn } from "@/lib/utils" + +const ScrollArea = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + + {children} + + + + +)) +ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName + +const ScrollBar = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, orientation = "vertical", ...props }, ref) => ( + + + +)) +ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName + +export { ScrollArea, ScrollBar } diff --git a/src/components/ui/separator.tsx b/src/components/ui/separator.tsx new file mode 100644 index 0000000..6d7f122 --- /dev/null +++ b/src/components/ui/separator.tsx @@ -0,0 +1,29 @@ +import * as React from "react" +import * as SeparatorPrimitive from "@radix-ui/react-separator" + +import { cn } from "@/lib/utils" + +const Separator = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>( + ( + { className, orientation = "horizontal", decorative = true, ...props }, + ref + ) => ( + + ) +) +Separator.displayName = SeparatorPrimitive.Root.displayName + +export { Separator } diff --git a/src/components/ui/tabs.tsx b/src/components/ui/tabs.tsx new file mode 100644 index 0000000..85d83be --- /dev/null +++ b/src/components/ui/tabs.tsx @@ -0,0 +1,53 @@ +import * as React from "react" +import * as TabsPrimitive from "@radix-ui/react-tabs" + +import { cn } from "@/lib/utils" + +const Tabs = TabsPrimitive.Root + +const TabsList = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +TabsList.displayName = TabsPrimitive.List.displayName + +const TabsTrigger = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +TabsTrigger.displayName = TabsPrimitive.Trigger.displayName + +const TabsContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +TabsContent.displayName = TabsPrimitive.Content.displayName + +export { Tabs, TabsList, TabsTrigger, TabsContent } diff --git a/src/i18n.ts b/src/i18n.ts new file mode 100644 index 0000000..20d36d2 --- /dev/null +++ b/src/i18n.ts @@ -0,0 +1,14 @@ +import i18n from "i18next"; +import { initReactI18next } from "react-i18next"; +import enJSON from "./locale/en.json"; +import jaJSON from "./locale/ja.json"; +import ptJSON from "./locale/pt.json"; + +i18n.use(initReactI18next).init({ + resources: { + en: { ...enJSON }, + ja: { ...jaJSON }, + pt: { ...ptJSON }, + }, + lng: "en", +}); diff --git a/src/index.tsx b/src/index.tsx new file mode 100644 index 0000000..bb66910 --- /dev/null +++ b/src/index.tsx @@ -0,0 +1,35 @@ +import { + LocationProvider, + Route, + Router, + hydrate, + prerender as ssr, +} from "preact-iso"; + +import { Home } from "@/pages/Home"; +import { Header } from "./components/Header.jsx"; +import { NotFound } from "./pages/_404.jsx"; +import "./style.css"; +import './i18n'; + +export function App() { + return ( + +
+
+ + + + +
+ + ); +} + +if (typeof window !== "undefined") { + hydrate(, document.getElementById("app")); +} + +export async function prerender(data) { + return await ssr(); +} diff --git a/src/lib/utils.ts b/src/lib/utils.ts new file mode 100644 index 0000000..ac680b3 --- /dev/null +++ b/src/lib/utils.ts @@ -0,0 +1,6 @@ +import { type ClassValue, clsx } from "clsx"; +import { twMerge } from "tailwind-merge"; + +export function cn(...inputs: ClassValue[]) { + return twMerge(clsx(inputs)); +} diff --git a/src/locale/en.json b/src/locale/en.json new file mode 100644 index 0000000..d62c31e --- /dev/null +++ b/src/locale/en.json @@ -0,0 +1,16 @@ +{ + "translation": { + "header.home": "Home", + "header.projects": "Projects", + "header.social": "Social", + "header.git": "Git", + "hello": "Hello, I'm hknsh.", + "introduction": "I am a self-taught JavaScript programmer focused on back-end development, a Linux enthusiast, a big fan of indie and rhythm games, I read various mangas and I study other languages.", + "i18n": "Also available in:", + "description": "I started studying programming back in 2017 when I was 11 years old! Since then I've been creating a few projects to improve my skills.", + "technologies": "Technologies", + "projects": "Projects & Contributions", + "knedita": "An open-source social media.", + "biome": "Contributed to the Portuguese translation of the documentation" + } +} diff --git a/src/locale/ja.json b/src/locale/ja.json new file mode 100644 index 0000000..ac0bb8a --- /dev/null +++ b/src/locale/ja.json @@ -0,0 +1,16 @@ +{ + "translation": { + "header.home": "ホーム", + "header.projects": "プロジェクト", + "header.social": "ソーシャル", + "header.git": "Git", + "hello": "こんにちは, ハックントッシュです.", + "introduction": "僕は独学のJavaScriptプログラマーで、バックエンド開発に注力しています。Linux愛好者で、インディーゲームやリズムゲームの大ファンです。さまざまなマンガを読んでおり、他の言語も勉強しています。", + "i18n": "他の言語でも利用できます:", + "description": "2017年、まだ11歳のときにプログラミングの勉強を始めました。それ以来、スキルを磨くためにいくつかのプロジェクトを作ってきました。", + "technologies": "技術", + "projects": "プロジェクトと貢献", + "knedita": "オープンソースのSNS。", + "biome": "ポルトガル語のドキュメント翻訳に貢献しました" + } +} diff --git a/src/locale/pt.json b/src/locale/pt.json new file mode 100644 index 0000000..0cc40e7 --- /dev/null +++ b/src/locale/pt.json @@ -0,0 +1,16 @@ +{ + "translation": { + "header.home": "Início", + "header.projects": "Projetos", + "header.social": "Social", + "header.git": "Git", + "hello": "Olá, sou hknsh.", + "introduction": "Sou um programador autodidata JavaScript focado em desenvolvimento back-end, entusiasta Linux, grande fã de jogos indie e de ritmo, leio vários mangás e estudo outros idiomas.", + "i18n": "Também disponível em:", + "description": "Comecei a estudar programação em 2017, quando eu tinha apenas 11 anos. Desde então venho criando alguns projetos para aprimorar minhas habilidades", + "technologies": "Tecnologias", + "projects": "Projetos & Contribuições", + "knedita": "Uma rede social open-source.", + "biome": "Contribuí na tradução em Português da documentação" + } +} diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx new file mode 100644 index 0000000..3812536 --- /dev/null +++ b/src/pages/Home/index.tsx @@ -0,0 +1,115 @@ +import { TechnologiesTab } from "@/components/TechnologiesTab"; +import { Card, CardContent } from "@/components/ui/card"; +import { + Carousel, + CarouselContent, + CarouselItem, + CarouselNext, + CarouselPrevious, +} from "@/components/ui/carousel"; +import { Separator } from "@/components/ui/separator"; +import { useState } from "preact/hooks"; +import { useTranslation } from "react-i18next"; +import { useEffect } from "react"; + +export function Home() { + const { + t, + i18n: { changeLanguage, language }, + } = useTranslation(); + const [, setCurrentLanguage] = useState(language); + + useEffect(() => { + const storedLanguage = localStorage.getItem("language"); + if (storedLanguage) { + setCurrentLanguage(storedLanguage); + changeLanguage(storedLanguage); + } + }, [changeLanguage]); + + const handleChangeLanguage = (lang: string) => { + setCurrentLanguage(lang); + changeLanguage(lang); + localStorage.setItem("language", lang); + }; + return ( +
+
+
+
{t("hello")}
+
{t("introduction")}
+
+
{t("i18n")}
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+
{t("description")}
+
+ + + +
+
+
{t("technologies")}
+ +
+
+ + + +
+
+
{t("projects")}
+ + + + +
+ + + + Project Knedita + + + +
+ + + + + +
+
+
+
+ ); +} diff --git a/src/pages/_404.tsx b/src/pages/_404.tsx new file mode 100644 index 0000000..36182c8 --- /dev/null +++ b/src/pages/_404.tsx @@ -0,0 +1,8 @@ +export function NotFound() { + return ( +
+
404: Not Found
+
It's gone :(
+
+ ); +} diff --git a/src/style.css b/src/style.css new file mode 100644 index 0000000..7c594af --- /dev/null +++ b/src/style.css @@ -0,0 +1,87 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; +@layer base { + :root { + --background: 0 0% 100%; + --foreground: 0 0% 3.9%; + --card: 0 0% 100%; + --card-foreground: 0 0% 3.9%; + --popover: 0 0% 100%; + --popover-foreground: 0 0% 3.9%; + --primary: 0 0% 9%; + --primary-foreground: 0 0% 98%; + --secondary: 0 0% 96.1%; + --secondary-foreground: 0 0% 9%; + --muted: 0 0% 96.1%; + --muted-foreground: 0 0% 45.1%; + --accent: 0 0% 96.1%; + --accent-foreground: 0 0% 9%; + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 0 0% 98%; + --border: 0 0% 89.8%; + --input: 0 0% 89.8%; + --ring: 0 0% 3.9%; + --chart-1: 12 76% 61%; + --chart-2: 173 58% 39%; + --chart-3: 197 37% 24%; + --chart-4: 43 74% 66%; + --chart-5: 27 87% 67%; + --radius: 0.5rem; + } + .dark { + --background: 0 0% 3.9%; + --foreground: 0 0% 98%; + --card: 0 0% 3.9%; + --card-foreground: 0 0% 98%; + --popover: 0 0% 3.9%; + --popover-foreground: 0 0% 98%; + --primary: 0 0% 98%; + --primary-foreground: 0 0% 9%; + --secondary: 0 0% 14.9%; + --secondary-foreground: 0 0% 98%; + --muted: 0 0% 14.9%; + --muted-foreground: 0 0% 63.9%; + --accent: 0 0% 14.9%; + --accent-foreground: 0 0% 98%; + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 0 0% 98%; + --border: 0 0% 14.9%; + --input: 0 0% 14.9%; + --ring: 0 0% 83.1%; + --chart-1: 220 70% 50%; + --chart-2: 160 60% 45%; + --chart-3: 30 80% 55%; + --chart-4: 280 65% 60%; + --chart-5: 340 75% 55%; + } +} +@layer base { + * { + @apply border-border; + } + body { + @apply bg-background text-foreground; + } +} + +@layer components { + .link { + @apply underline decoration-indigo-500 decoration-2 underline-offset-8 transition delay-100 ease-in-out hover:text-neutral-50 hover:decoration-indigo-600 text-lg md:text-xl; + } + .flex-center { + @apply flex items-center justify-center; + } + .neutral-btn { + @apply flex-center max-w-sm rounded-xl bg-neutral-800 p-3 text-sm transition ease-in hover:bg-neutral-900 md:p-4 md:text-base; + } + .neutral-btn-lg { + @apply flex-center w-48 rounded-xl bg-neutral-800 p-3 text-base transition ease-in hover:bg-neutral-900 md:p-4 md:text-base; + } + .text { + @apply text-base md:text-lg font-medium; + } + .title { + @apply text-xl md:text-4xl decoration-2 underline decoration-indigo-500 underline-offset-[12px] + } +} diff --git a/tailwind.config.js b/tailwind.config.js new file mode 100644 index 0000000..a53c1ea --- /dev/null +++ b/tailwind.config.js @@ -0,0 +1,57 @@ +/** @type {import('tailwindcss').Config} */ +export default { + darkMode: ["class"], + content: ["./index.html", "./src/**/.{js,ts,jsx,tsx}"], + theme: { + extend: { + borderRadius: { + lg: "var(--radius)", + md: "calc(var(--radius) - 2px)", + sm: "calc(var(--radius) - 4px)", + }, + colors: { + background: "hsl(var(--background))", + foreground: "hsl(var(--foreground))", + card: { + DEFAULT: "hsl(var(--card))", + foreground: "hsl(var(--card-foreground))", + }, + popover: { + DEFAULT: "hsl(var(--popover))", + foreground: "hsl(var(--popover-foreground))", + }, + primary: { + DEFAULT: "hsl(var(--primary))", + foreground: "hsl(var(--primary-foreground))", + }, + secondary: { + DEFAULT: "hsl(var(--secondary))", + foreground: "hsl(var(--secondary-foreground))", + }, + muted: { + DEFAULT: "hsl(var(--muted))", + foreground: "hsl(var(--muted-foreground))", + }, + accent: { + DEFAULT: "hsl(var(--accent))", + foreground: "hsl(var(--accent-foreground))", + }, + destructive: { + DEFAULT: "hsl(var(--destructive))", + foreground: "hsl(var(--destructive-foreground))", + }, + border: "hsl(var(--border))", + input: "hsl(var(--input))", + ring: "hsl(var(--ring))", + chart: { + 1: "hsl(var(--chart-1))", + 2: "hsl(var(--chart-2))", + 3: "hsl(var(--chart-3))", + 4: "hsl(var(--chart-4))", + 5: "hsl(var(--chart-5))", + }, + }, + }, + }, + plugins: [require("tailwindcss-animate")], +}; diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..75cbefb --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,23 @@ +{ + "compilerOptions": { + "target": "ES2020", + "module": "ESNext", + "moduleResolution": "bundler", + "noEmit": true, + "allowJs": true, + "checkJs": true, + + / Preact Config / + "jsx": "react-jsx", + "jsxImportSource": "preact", + "skipLibCheck": true, + "paths": { + "react": ["./node_modules/preact/compat/"], + "react-dom": ["./node_modules/preact/compat/"], + "@/": ["./src/*"] + }, + + "baseUrl": "." + }, + "include": ["node_modules/vite/client.d.ts", "**/*"] +} diff --git a/vite.config.ts b/vite.config.ts new file mode 100644 index 0000000..e81c97c --- /dev/null +++ b/vite.config.ts @@ -0,0 +1,23 @@ +import path from "node:path"; +import preact from "@preact/preset-vite"; +import { defineConfig } from "vite"; + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + preact({ + prerender: { + enabled: true, + renderTarget: "#app", + additionalPrerenderRoutes: ["/404"], + previewMiddlewareEnabled: true, + previewMiddlewareFallback: "/404", + }, + }), + ], + resolve: { + alias: { + "@": path.resolve(__dirname, "./src"), + }, + }, +});