diff --git a/.gitignore b/.gitignore index 8f322f0..2cae796 100644 --- a/.gitignore +++ b/.gitignore @@ -4,6 +4,8 @@ /node_modules /.pnp .pnp.js +bun.lockb +# ^ now with bun support # testing /coverage diff --git a/README.md b/README.md index d3f02d6..7d0e8d3 100644 --- a/README.md +++ b/README.md @@ -4,12 +4,6 @@ This is my simple and clean website. Created with Next.js, TailwindCSS and TypeS ## Getting Started Fork the repo (or download it), then go to the project's directory and run: ```bash -npm run dev -# or -yarn dev -# or -pnpm dev -# or bun dev ``` Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. diff --git a/app/favicon.ico b/app/favicon.ico new file mode 100644 index 0000000..517b771 Binary files /dev/null and b/app/favicon.ico differ diff --git a/app/globals.css b/app/globals.css index 6a75725..b193784 100644 --- a/app/globals.css +++ b/app/globals.css @@ -73,4 +73,14 @@ body { @apply bg-background text-foreground; } +} + +::-moz-selection { + color: #F2F2F2; + background: #403F3E; +} + +::selection { + color: #F2F2F2; + background: #403F3E; } \ No newline at end of file diff --git a/app/layout.tsx b/app/layout.tsx index 6bcdeee..382af63 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -5,7 +5,7 @@ import { Playfair_Display } from "next/font/google"; export const metadata: Metadata = { title: "Ron Nuss", description: "I'm Ron, a Back-End Developer that turns ideas into projects.", - icons: ["https://avatars.githubusercontent.com/u/132187043?v=4"], + icons: ["./favicon.ico"], }; const playfairDisplay = Playfair_Display({ @@ -21,7 +21,7 @@ export default function RootLayout({ diff --git a/app/page.tsx b/app/page.tsx index 61b3677..30e8b5c 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,115 +1,203 @@ "use client"; -import { ContactIcon } from "../components/ui/Icons"; -// import { FaArrowRight } from "react-icons/fa6"; -// in a future update of the website, i'll add and use this icon -import { Footer } from "../components/ui/Footer"; import React, { useEffect, useState } from "react"; -import { Inter } from "next/font/google"; -import { calcAge, cn, projects } from "@/lib/utils"; -import { - Tooltip, - TooltipContent, - TooltipProvider, - TooltipTrigger, -} from "@/components/ui/tooltip"; +import localFont from "next/font/local"; +import { calcAge, cn, projects, hebrewTranslatedProjects } from "@/lib/utils"; +import { isHebrewSystem } from "@/lib/utils"; +import { HDate, gematriya } from "@hebcal/core"; +import { FaTools, FaGithub } from "react-icons/fa"; +import ToolTip from "@/components/ui/tooltip"; -const interFont = Inter({ - subsets: ["latin"], +const SimplerPro = localFont({ + src: [ + { + path: "../public/SimplerPro_V3-Regular.otf", + weight: "400", + }, + { + path: "../public/SimplerPro_V3-Bold.otf", + weight: "700", + }, + ], }); export default function Home() { + const [isInHebrewSystem, SetIsInHebrewSystem] = useState(); + const hebrewDate = new HDate(new Date()); + + useEffect(() => { + if (navigator) { + SetIsInHebrewSystem(isHebrewSystem()); + } + }, []); + return ( <> -
-

- I‘m Ron, a Back-End Developer. +
+

+ {isInHebrewSystem + ? "אני רון, מתכנת בק-אנד." + : "I'm Ron, a Back-End Developer."}

- My name is Ron Nuss, a {calcAge()} years old back-end developer from - Israel, who turns imaginations{" "} - into projects. + {isInHebrewSystem + ? `קוראים לי רון נוס, ואני מתכנת בק-אנד בן ${calcAge()}, שפותר בעיות יום-יומיות בעזרת קוד.` + : `My name is Ron Nuss, a ${calcAge()} years old back-end developer from + Israel, who solves every-day problems with code.`}

-
-

Projects

- {/* looking for the projects array? it's in the "utils.ts" file, under the "lib" folder. */} - {projects.map((project, index) => - project.isInDevelopment ? ( - <> - - - -
-

- {project.name}{" "} - - ({project.year}) - -

-

- {project.description} -

-
- - - This project is still under development! - - - - - ) : ( +
+

+ {isInHebrewSystem ? "הפרויקטים שלי" : "Projects"} +

+
+ {isInHebrewSystem + ? `הנה מספר פרויקטים שעבדתי עליהם או שעדיין בעבודה. חלקם גם זמינים בקוד-פתוח.` + : `Here are some of my projects that I worked on or still in development. Some of them are open-source.`} +
+
+ {projects.map((project, index) => ( <>
-

- {project.name}{" "} +
+ {project.isInDevelopment && ( +
+ + + +
+ )} + {project.isOpenSource && ( + + )} +

+ {isInHebrewSystem + ? hebrewTranslatedProjects[index].name + : project.name} +

({project.year}) -

-

- {project.description} +

+

+ {isInHebrewSystem + ? hebrewTranslatedProjects[index].description + : project.description}

+ {project.isInDevelopment && ( +

+ {isInHebrewSystem + ? "פרויקט זה עדיין בבנייה" + : "This project is still under development"} +

+ )} + {project.isOpenSource && ( + +

+ {isInHebrewSystem + ? "פרויקט זה זמין בקוד פתוח" + : "This project is open source"} +

+ + )}
- ) - )} + ))} +
-
); diff --git a/components/ui/Footer.tsx b/components/ui/Footer.tsx deleted file mode 100644 index e99bf34..0000000 --- a/components/ui/Footer.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import { HDate } from "@hebcal/core"; -import { Inter } from "next/font/google"; -import { cn } from "@/lib/utils"; -const interFont = Inter({ - subsets: ["latin"], -}); - -export const Footer = () => { - var hebrewDate = new HDate(new Date()); - - return ( - - ); -}; diff --git a/components/ui/Icons.tsx b/components/ui/Icons.tsx deleted file mode 100644 index a643009..0000000 --- a/components/ui/Icons.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from "react"; - -export const ContactIcon = ({ ...props }) => { - return ( - - - - ); -}; diff --git a/components/ui/alert-dialog.tsx b/components/ui/alert-dialog.tsx deleted file mode 100644 index 25e7b47..0000000 --- a/components/ui/alert-dialog.tsx +++ /dev/null @@ -1,141 +0,0 @@ -"use client" - -import * as React from "react" -import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog" - -import { cn } from "@/lib/utils" -import { buttonVariants } from "@/components/ui/button" - -const AlertDialog = AlertDialogPrimitive.Root - -const AlertDialogTrigger = AlertDialogPrimitive.Trigger - -const AlertDialogPortal = AlertDialogPrimitive.Portal - -const AlertDialogOverlay = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( - -)) -AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName - -const AlertDialogContent = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( - - - - -)) -AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName - -const AlertDialogHeader = ({ - className, - ...props -}: React.HTMLAttributes) => ( -
-) -AlertDialogHeader.displayName = "AlertDialogHeader" - -const AlertDialogFooter = ({ - className, - ...props -}: React.HTMLAttributes) => ( -
-) -AlertDialogFooter.displayName = "AlertDialogFooter" - -const AlertDialogTitle = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( - -)) -AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName - -const AlertDialogDescription = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( - -)) -AlertDialogDescription.displayName = - AlertDialogPrimitive.Description.displayName - -const AlertDialogAction = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( - -)) -AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName - -const AlertDialogCancel = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( - -)) -AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName - -export { - AlertDialog, - AlertDialogPortal, - AlertDialogOverlay, - AlertDialogTrigger, - AlertDialogContent, - AlertDialogHeader, - AlertDialogFooter, - AlertDialogTitle, - AlertDialogDescription, - AlertDialogAction, - AlertDialogCancel, -} diff --git a/components/ui/button.tsx b/components/ui/button.tsx deleted file mode 100644 index 0ba4277..0000000 --- a/components/ui/button.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import * as React from "react" -import { Slot } from "@radix-ui/react-slot" -import { cva, type VariantProps } from "class-variance-authority" - -import { cn } from "@/lib/utils" - -const buttonVariants = cva( - "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", - { - variants: { - variant: { - default: "bg-primary text-primary-foreground hover:bg-primary/90", - destructive: - "bg-destructive text-destructive-foreground hover:bg-destructive/90", - outline: - "border border-input bg-background hover:bg-accent hover:text-accent-foreground", - secondary: - "bg-secondary text-secondary-foreground hover:bg-secondary/80", - ghost: "hover:bg-accent hover:text-accent-foreground", - link: "text-primary underline-offset-4 hover:underline", - }, - size: { - default: "h-10 px-4 py-2", - sm: "h-9 rounded-md px-3", - lg: "h-11 rounded-md px-8", - icon: "h-10 w-10", - }, - }, - defaultVariants: { - variant: "default", - size: "default", - }, - } -) - -export interface ButtonProps - extends React.ButtonHTMLAttributes, - VariantProps { - asChild?: boolean -} - -const Button = React.forwardRef( - ({ className, variant, size, asChild = false, ...props }, ref) => { - const Comp = asChild ? Slot : "button" - return ( - - ) - } -) -Button.displayName = "Button" - -export { Button, buttonVariants } diff --git a/components/ui/tooltip.tsx b/components/ui/tooltip.tsx index 30fc44d..6ec0bdb 100644 --- a/components/ui/tooltip.tsx +++ b/components/ui/tooltip.tsx @@ -1,30 +1,37 @@ -"use client" +import { FC, ReactNode, useRef } from "react"; -import * as React from "react" -import * as TooltipPrimitive from "@radix-ui/react-tooltip" +interface Props { + children: ReactNode; + tooltip?: string; + className?: string; +} -import { cn } from "@/lib/utils" +const ToolTip: FC = ({ children, tooltip, className }): JSX.Element => { + const tooltipRef = useRef(null); + const container = useRef(null); -const TooltipProvider = TooltipPrimitive.Provider + return ( +
{ + if (!tooltipRef.current || !container.current) return; + const { right } = container.current.getBoundingClientRect(); -const Tooltip = TooltipPrimitive.Root + tooltipRef.current.style.left = clientX - right + "px"; + }} + className="group relative inline-block" + > + {children} + {tooltip ? ( + + {tooltip} + + ) : null} +
+ ); +}; -const TooltipTrigger = TooltipPrimitive.Trigger - -const TooltipContent = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, sideOffset = 4, ...props }, ref) => ( - -)) -TooltipContent.displayName = TooltipPrimitive.Content.displayName - -export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } +export default ToolTip; diff --git a/lib/utils.ts b/lib/utils.ts index 403d63c..2f96770 100644 --- a/lib/utils.ts +++ b/lib/utils.ts @@ -5,7 +5,19 @@ export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } -export function calcAge() { +export function isHebrewSystem(): boolean { + //This function will check if the system's language is Hebrew. if so, it will return a boolean true. + //This function helps me render a Hebrew-version for people that their likely to be from Israel and probably want to see the Hebrew version of the site. + + if (navigator.language.startsWith("he")) { + return true; + } else { + return false; + } +} + +export function calcAge(): number { + //this function calculates my correct age to show in the website const birthdate = new Date("2007-12-05T00:00:00"); const today = new Date(); const age = @@ -20,18 +32,48 @@ export function calcAge() { } export const projects = [ + //this is the projects array. each project is in a different object. + //there's also another project array underneath this one, but with Hebrew translations for visitors with Hebrew as their system language. { name: "Hamerkaz", year: 2024, - link: "", + link: "#", isInDevelopment: true, - description: "A single website - for all the news", + description: "A single website - for all the news.", + isOpenSource: false, }, { - name: "My Website", + name: "TziburTV", year: 2024, + link: "https://tziburtv.vercel.app", + description: "A website that provides watching live public TV channels from Israel.", + isOpenSource: true, + githubLink: "https://github.com/itsrn/tziburtv", + }, + { + name: "My Website", + year: 2023, link: "https://ron.is-a.dev", isInDevelopment: false, - description: "The 3rd version of my website (that you are seeing right now).", + description: + "The 4th version of my website (that you are viewing right now).", + isOpenSource: true, + githubLink: "https://github.com/itsrn/website", + }, +]; + +export const hebrewTranslatedProjects = [ + { + name: "המרכז", + description: "אתר אחד - לכל החדשות.", + }, + { + name: "ציבורTV", + description: + "אתר המנגיש צפייה בערוצי טלוויזיה ישראליים ציבוריים שזמינים בחינם באינטרנט.", + }, + { + name: "האתר שלי", + description: "הגרסה הרביעית של האתר שלי (שאתם רואים ברגע זה).", }, ]; diff --git a/package.json b/package.json index fa29f2e..0177de9 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,7 @@ }, "dependencies": { "@hebcal/core": "^5.1.0", - "@heroicons/react": "^2.0.18", + "@heroicons/react": "^2.1.4", "@radix-ui/react-alert-dialog": "^1.0.5", "@radix-ui/react-slot": "^1.0.2", "@radix-ui/react-tooltip": "^1.0.7", @@ -30,7 +30,7 @@ "react": "18.2.0", "react-apple-emojis": "^2.2.1", "react-dom": "18.2.0", - "react-icons": "^5.0.1", + "react-icons": "^5.2.1", "tailwind-merge": "^2.2.1", "tailwindcss": "3.3.3", "tailwindcss-animate": "^1.0.7", diff --git a/public/SimplerPro_V3-Bold.otf b/public/SimplerPro_V3-Bold.otf new file mode 100644 index 0000000..79021a7 Binary files /dev/null and b/public/SimplerPro_V3-Bold.otf differ diff --git a/public/SimplerPro_V3-Regular.otf b/public/SimplerPro_V3-Regular.otf new file mode 100644 index 0000000..d4f07de Binary files /dev/null and b/public/SimplerPro_V3-Regular.otf differ diff --git a/tailwind.config.ts b/tailwind.config.ts index 84287e8..ca20cbb 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -6,6 +6,7 @@ const config = { './pages/**/*.{ts,tsx}', './components/**/*.{ts,tsx}', './app/**/*.{ts,tsx}', + './app/*.{ts,tsx}', './src/**/*.{ts,tsx}', ], prefix: "",