Merge pull request #21 from sabotack/dev

Dev
sabotack · Apr 30, 2024 · c89bfcf · c89bfcf
2 parents 57da770 + f32619b
commit c89bfcf
Show file tree

Hide file tree

Showing 35 changed files with 1,440 additions and 292 deletions.
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -1,6 +1,9 @@
 name: Code Quality Checks
 
 on:
+    push:
+        branches:
+            - main
     pull_request:
         branches:
             - main

diff --git a/components.json b/components.json
@@ -0,0 +1,17 @@
+{
+    "$schema": "https://ui.shadcn.com/schema.json",
+    "style": "default",
+    "rsc": false,
+    "tsx": true,
+    "tailwind": {
+        "config": "tailwind.config.js",
+        "css": "src/index.css",
+        "baseColor": "zinc",
+        "cssVariables": true,
+        "prefix": ""
+    },
+    "aliases": {
+        "components": "@/components",
+        "utils": "@/lib/utils"
+    }
+}
diff --git a/index.html b/index.html
@@ -1,6 +1,12 @@
 <!doctype html>
 <html lang="en">
     <head>
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+        <link
+            href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+            rel="stylesheet"
+        />
         <!-- Google tag (gtag.js) -->
         <script
             async

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,15 +12,29 @@
         "format:check": "prettier --check ./"
     },
     "dependencies": {
+        "@radix-ui/react-slot": "^1.0.2",
+        "@tsparticles/basic": "^3.3.0",
+        "@tsparticles/engine": "^3.3.0",
+        "@tsparticles/react": "^3.0.0",
+        "@tsparticles/slim": "^3.3.0",
+        "class-variance-authority": "^0.7.0",
+        "clsx": "^2.1.0",
+        "framer-motion": "^11.0.20",
         "localforage": "^1.10.0",
+        "lucide-react": "^0.363.0",
         "match-sorter": "^6.3.4",
+        "mini-svg-data-uri": "^1.4.4",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-icons": "^5.0.1",
         "react-router-dom": "^6.22.3",
-        "sort-by": "^0.0.2"
+        "sort-by": "^0.0.2",
+        "tailwind-merge": "^2.2.2",
+        "tailwindcss-animate": "^1.0.7",
+        "tsparticles": "^3.3.0"
     },
     "devDependencies": {
+        "@types/node": "^20.11.30",
         "@types/react": "^18.2.67",
         "@types/react-dom": "^18.2.22",
         "@typescript-eslint/eslint-plugin": "^7.3.1",

diff --git a/src/App.tsx b/src/App.tsx
@@ -0,0 +1,24 @@
+import { Header, Hero } from '@/containers';
+
+const App = () => {
+    return (
+        <>
+            <Header />
+            <Hero />
+            <section
+                id="projects"
+                className="w-full h-screen bg-gradient-home-r"
+            >
+                <div className="w-full h-full bg-gray-900" />
+            </section>
+            <section
+                id="contact"
+                className="w-full h-screen bg-gradient-home-r"
+            >
+                <div className="w-full h-full bg-red-500" />
+            </section>
+        </>
+    );
+};
+
+export default App;
diff --git a/src/assets/pfp.jpg b/src/assets/pfp.jpg
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -1,53 +1,42 @@
+import { useLocation } from 'react-router-dom';
 import { NavLink } from 'react-router-dom';
-import { AiFillHome, AiFillInfoCircle } from 'react-icons/ai';
-import { SiPolymerproject } from 'react-icons/si';
-import Logo from '../assets/logo_circle.svg';
+import { navigation } from '@/constants';
+import { Button } from './ui/Button';
+import { LuSun, LuMoon } from 'react-icons/lu';
+import { useTheme } from '@/hooks/useTheme';
 
 const Navbar = () => {
+    const pathName = useLocation();
+    const theme = useTheme();
+
     return (
-        <header className="fixed w-full h-header px-32 bg-primary flex items-center justify-between z-20">
-            <div className="flex items-center">
-                <div
-                    className="w-10 h-10 mr-4 bg-no-repeat bg-cover"
-                    style={{ backgroundImage: `url("${Logo}")` }}
-                />
-                <div className="text-2xl font-bold text-white">
-                    ALI SAJAD KHORAMI
-                </div>
-            </div>
-            <nav className="flex">
-                <NavLink
-                    to="/"
-                    className={({ isActive }) =>
-                        `text-primary-light px-2 py-3 mr-4 flex items-center ${isActive ? 'text-white border-b-accent' : ''}`
-                    }
-                    end
-                >
-                    <AiFillHome />
-                    <span className="ml-1">HOME</span>
-                </NavLink>
-                <NavLink
-                    to="/projects"
-                    className={({ isActive }) =>
-                        `text-primary-light px-2 py-3 ml-4 mr-4 flex items-center ${isActive ? 'text-white' : ''}`
-                    }
-                    end
-                >
-                    <SiPolymerproject />
-                    <span className="ml-1">PROJECTS</span>
-                </NavLink>
+        <nav className="flex items-center gap-4 text-sm lg:gap-6">
+            {navigation.map((item) => (
                 <NavLink
-                    to="/about"
-                    className={({ isActive }) =>
-                        `text-primary-light px-2 py-3 ml-4 flex items-center ${isActive ? 'text-white' : ''}`
-                    }
-                    end
+                    key={item.id}
+                    to={item.url}
+                    className={`transition-colors hover:text-foreground/80 ${item.url === pathName.hash ? 'text-foreground' : 'text-foreground/60'} `}
                 >
-                    <AiFillInfoCircle />
-                    <span className="ml-1">ABOUT</span>
+                    {item.title}
                 </NavLink>
-            </nav>
-        </header>
+            ))}
+            <Button
+                variant="ghost"
+                size="icon"
+                onClick={() => {
+                    theme.theme === 'dark'
+                        ? theme.setTheme('light')
+                        : theme.setTheme('dark');
+                }}
+                className="transition-colors hover:text-foreground/80 text-foreground/60"
+            >
+                {theme.theme === 'dark' ? (
+                    <LuSun size={18} />
+                ) : (
+                    <LuMoon size={18} />
+                )}
+            </Button>
+        </nav>
     );
 };
 

diff --git a/src/components/Particles.tsx b/src/components/Particles.tsx
@@ -0,0 +1,57 @@
+import { useEffect, useState } from 'react';
+import {
+    Particles as TsParticles,
+    initParticlesEngine,
+} from '@tsparticles/react';
+import { type Container } from '@tsparticles/engine';
+// import { loadAll } from "@/tsparticles/all"; // if you are going to use `loadAll`, install the "@tsparticles/all" package too.
+// import { loadFull } from "tsparticles"; // if you are going to use `loadFull`, install the "tsparticles" package too.
+import { loadSlim } from '@tsparticles/slim'; // if you are going to use `loadSlim`, install the "@tsparticles/slim" package too.
+import useParticles from '@/hooks/useParticles';
+import { parallaxParticles } from '@/constants';
+// import { loadBasic } from "@tsparticles/basic"; // if you are going to use `loadBasic`, install the "@tsparticles/basic" package too.
+
+const Particles = () => {
+    const [init, setInit] = useState(false);
+
+    // this should be run only once per application lifetime
+    useEffect(() => {
+        initParticlesEngine(async (engine) => {
+            // you can initiate the tsParticles instance (engine) here, adding custom shapes or presets
+            // this loads the tsparticles package bundle, it's the easiest method for getting everything ready
+            // starting from v2 you can add only the features you need reducing the bundle size
+            //await loadAll(engine);
+            //await loadFull(engine);
+            await loadSlim(engine);
+            //await loadBasic(engine);
+        })
+            .then(() => {
+                setInit(true);
+            })
+            .catch((e) => {
+                console.error(e);
+            });
+    }, []);
+
+    const options = useParticles(parallaxParticles);
+
+    const particlesLoaded = async (container?: Container): Promise<void> => {
+        console.log(container);
+        await Promise.resolve(); // Add an await expression here
+    };
+
+    if (init) {
+        return (
+            <TsParticles
+                id="tsparticles"
+                particlesLoaded={particlesLoaded}
+                options={options}
+                className="h-screen w-full absolute top-0 left-0 pointer-events-none"
+            />
+        );
+    }
+
+    return <></>;
+};
+
+export default Particles;
diff --git a/src/components/ThemeProvider.tsx b/src/components/ThemeProvider.tsx
@@ -0,0 +1,54 @@
+import { Theme, ThemeProviderContext } from '@/constants';
+import { useEffect, useState } from 'react';
+
+type ThemeProviderProps = {
+    children: React.ReactNode;
+    defaultTheme?: Theme;
+    storageKey?: string;
+};
+
+const ThemeProvider = ({
+    children,
+    defaultTheme = 'system',
+    storageKey = 'vite-ui-theme',
+    ...props
+}: ThemeProviderProps) => {
+    const [theme, setTheme] = useState<Theme>(
+        () => (localStorage.getItem(storageKey) as Theme) || defaultTheme,
+    );
+
+    useEffect(() => {
+        const root = window.document.documentElement;
+
+        root.classList.remove('light', 'dark');
+
+        if (theme === 'system') {
+            const systemTheme = window.matchMedia(
+                '(prefers-color-scheme: dark)',
+            ).matches
+                ? 'dark'
+                : 'light';
+
+            root.classList.add(systemTheme);
+            return;
+        }
+
+        root.classList.add(theme);
+    }, [theme]);
+
+    const value = {
+        theme,
+        setTheme: (theme: Theme) => {
+            localStorage.setItem(storageKey, theme);
+            setTheme(theme);
+        },
+    };
+
+    return (
+        <ThemeProviderContext.Provider {...props} value={value}>
+            {children}
+        </ThemeProviderContext.Provider>
+    );
+};
+
+export default ThemeProvider;
diff --git a/src/components/index.tsx b/src/components/index.tsx
@@ -1 +1,5 @@
-export { default } from './Navbar';
+import Navbar from './Navbar';
+import ThemeProvider from './ThemeProvider';
+import Particles from './Particles';
+
+export { Navbar, ThemeProvider, Particles };
diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@/lib/utils';
+import { buttonVariants } from '@/constants';
+
+export interface ButtonProps
+    extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+        VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+    ({ className, variant, size, asChild = false, ...props }, ref) => {
+        const Comp = asChild ? Slot : 'button';
+        return (
+            <Comp
+                className={cn(buttonVariants({ variant, size, className }))}
+                ref={ref}
+                {...props}
+            />
+        );
+    },
+);
+Button.displayName = 'Button';
+
+export { Button };
diff --git a/src/constants/button.ts b/src/constants/button.ts
@@ -0,0 +1,31 @@
+import { cva } from 'class-variance-authority';
+
+export 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',
+        },
+    },
+);
diff --git a/src/constants/index.ts b/src/constants/index.ts
@@ -0,0 +1,12 @@
+import { navigation } from './navigation';
+import { ThemeProviderContext, Theme } from './themeProvider';
+import { parallaxParticles } from './parallaxParticles';
+import { buttonVariants } from './button';
+
+export {
+    navigation,
+    parallaxParticles,
+    buttonVariants,
+    ThemeProviderContext,
+    type Theme,
+};
diff --git a/src/constants/navigation.ts b/src/constants/navigation.ts
@@ -0,0 +1,17 @@
+export const navigation = [
+    {
+        id: '0',
+        title: 'About',
+        url: '#about',
+    },
+    {
+        id: '1',
+        title: 'Projects',
+        url: '#projects',
+    },
+    {
+        id: '2',
+        title: 'Contact',
+        url: '#contact',
+    },
+];