├── .env.example
├── .eslintrc.cjs
├── .gitignore
├── LICENSE.md
├── README.md
├── components.json
├── next.config.js
├── package-lock.json
├── package.json
├── pnpm-lock.yaml
├── postcss.config.cjs
├── prettier.config.js
├── public
    ├── assets
    │   ├── infinitevps.webm
    │   ├── logo.webp
    │   ├── portfolio.webm
    │   ├── scene.splinecode
    │   ├── translate_bot.webm
    │   ├── unqueue.webm
    │   └── wrona.jpeg
    ├── favicon.ico
    ├── fonts
    │   └── ClashGrotesk-Variable.woff2
    ├── icon-192x192.png
    ├── icon-256x256.png
    ├── icon-384x384.png
    ├── icon-512x512.png
    ├── manifest.json
    └── robots.txt
├── src
    ├── components
    │   ├── Container.tsx
    │   ├── Footer.tsx
    │   ├── Preloader.tsx
    │   └── ui
    │   │   ├── button.tsx
    │   │   ├── card.tsx
    │   │   └── carousel.tsx
    ├── env.js
    ├── lib
    │   └── utils.ts
    ├── pages
    │   ├── _app.tsx
    │   └── index.tsx
    └── styles
    │   ├── Container.module.css
    │   ├── Home.module.css
    │   ├── clash-grotesk.css
    │   ├── globals.css
    │   └── locomotive-scroll.css
├── tailwind.config.ts
└── tsconfig.json


/.env.example:
--------------------------------------------------------------------------------
 1 | # Since the ".env" file is gitignored, you can use the ".env.example" file to
 2 | # build a new ".env" file when you clone the repo. Keep this file up-to-date
 3 | # when you add new variables to `.env`.
 4 | 
 5 | # This file will be committed to version control, so make sure not to have any
 6 | # secrets in it. If you are cloning this repo, create a copy of this file named
 7 | # ".env" and populate it with your secrets.
 8 | 
 9 | # When adding additional environment variables, the schema in "/src/env.js"
10 | # should be updated accordingly.
11 | 
12 | # Example:
13 | # SERVERVAR="foo"
14 | # NEXT_PUBLIC_CLIENTVAR="bar"
15 | 


--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | /** @type {import("eslint").Linter.Config} */
 2 | const config = {
 3 |   parser: "@typescript-eslint/parser",
 4 |   parserOptions: {
 5 |     project: true,
 6 |   },
 7 |   plugins: ["@typescript-eslint"],
 8 |   extends: [
 9 |     "next/core-web-vitals",
10 |     "plugin:@typescript-eslint/recommended-type-checked",
11 |     "plugin:@typescript-eslint/stylistic-type-checked",
12 |   ],
13 |   rules: {
14 |     // These opinionated rules are enabled in stylistic-type-checked above.
15 |     // Feel free to reconfigure them to your own preference.
16 |     "@typescript-eslint/array-type": "off",
17 |     "@typescript-eslint/consistent-type-definitions": "off",
18 | 
19 |     "@typescript-eslint/consistent-type-imports": [
20 |       "warn",
21 |       {
22 |         prefer: "type-imports",
23 |         fixStyle: "inline-type-imports",
24 |       },
25 |     ],
26 |     "@typescript-eslint/no-unused-vars": ["warn", { argsIgnorePattern: "^_" }],
27 |     "@typescript-eslint/require-await": "off",
28 |     "@typescript-eslint/no-misused-promises": [
29 |       "error",
30 |       {
31 |         checksVoidReturn: { attributes: false },
32 |       },
33 |     ],
34 |   },
35 | };
36 | 
37 | module.exports = config;
38 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # database
12 | /prisma/db.sqlite
13 | /prisma/db.sqlite-journal
14 | 
15 | # next.js
16 | /.next/
17 | /out/
18 | next-env.d.ts
19 | 
20 | # production
21 | /build
22 | 
23 | # misc
24 | .DS_Store
25 | *.pem
26 | 
27 | # debug
28 | npm-debug.log*
29 | yarn-debug.log*
30 | yarn-error.log*
31 | .pnpm-debug.log*
32 | 
33 | # local env files
34 | # do not commit any .env files to git, except for the .env.example file. https://create.t3.gg/en/usage/env-variables#using-environment-variables
35 | .env
36 | .env*.local
37 | 
38 | # vercel
39 | .vercel
40 | 
41 | # typescript
42 | *.tsbuildinfo
43 | 
44 | # webstorm
45 | .idea
46 | ```


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2024 wendoj
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # 🖥️ Personal Portfolio
 2 | 
 3 | A sleek, modern, and responsive portfolio bootstrapped with [create-t3-app](https://create.t3.gg/).
 4 | 
 5 | [Website Preview](https://github.com/wendoj/portfolio/assets/77996774/b73b02d7-0657-41e3-9124-e6d04b17fe93)
 6 | 
 7 | [🔗 Link to portfolio](https://www.wendoj.codes)
 8 | 
 9 | All you need to know about me, my projects and skills can be found here. Personalize the portfolio by modifying `src/pages/index.tsx` and `src/styles/globals.css` to emulate your own portfolio. Made some improvements and want to share? Open a pull request.
10 | For any issues, feel free to report them here.
11 | 
12 | ## 🎉 Features
13 | - **Responsive Design**: The portfolio is designed to be fully responsive, providing an optimal viewing experience across a wide range of devices from desktops to mobile phones.
14 | - **Easy Customization**: The portfolio structure is straightforward and well organized, making it easy to customize and showcase your unique set of skills and projects.
15 | - **Stunning UI/UX Design**: The portfolio boasts a sleek and modern design, using smooth animations to capture the attention of potential employers or clients.
16 | - **Interactive UI**: Utilizing modern web development techniques, the portfolio offers an interactive user interface that enhances user experience, such as `locomotive-scroll` and `framer-motion`.
17 | 
18 | ## 🚀 Getting Started
19 | 
20 | ### Prerequisites
21 | To get started with this portfolio, ensure that you have the following installed on your system:
22 | - Node.js
23 | - npm
24 | - git
25 | 
26 | ## 🛠️ Installation
27 | Follow the steps below to clone and run this project on your local system:
28 | 
29 | ```bash
30 | # Clone the repository
31 | $ git clone https://github.com/wendoj/developer-portfolio.git
32 | 
33 | # Navigate to the project directory
34 | $ cd developer-portfolio
35 | 
36 | # Remove current origin repository
37 | $ git remote remove origin
38 | ```
39 | 
40 | <br />
41 | 
42 | Then install the required dependencies:
43 | ```bash
44 | # Install dependencies
45 | $ npm install
46 | 
47 | # Start the development server:
48 | $ npm run dev
49 | ```
50 | Now, open your browser and navigate to `http://localhost:3000` to view your portfolio live.
51 | 
52 | 
53 | ## How do I deploy this?
54 | 
55 | Follow our deployment guides for [Vercel](https://create.t3.gg/en/deployment/vercel), [Netlify](https://create.t3.gg/en/deployment/netlify) and [Docker](https://create.t3.gg/en/deployment/docker) for more information.
56 | 


--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://ui.shadcn.com/schema.json",
 3 |   "style": "default",
 4 |   "rsc": false,
 5 |   "tsx": true,
 6 |   "tailwind": {
 7 |     "config": "tailwind.config.ts",
 8 |     "css": "src/styles/globals.css",
 9 |     "baseColor": "slate",
10 |     "cssVariables": true,
11 |     "prefix": ""
12 |   },
13 |   "aliases": {
14 |     "components": "@/components",
15 |     "utils": "@/lib/utils"
16 |   }
17 | }


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially useful
 3 |  * for Docker builds.
 4 |  */
 5 | await import("./src/env.js");
 6 | import WithPWA from "next-pwa";
 7 | 
 8 | const withPWA = WithPWA({
 9 |   dest: "public",
10 |   disable: process.env.NODE_ENV === "development",
11 |   register: true,
12 |   scope: "/",
13 |   sw: "service-worker.js",
14 | });
15 | 
16 | /**
17 |  * @type {import('next').NextConfig}
18 |  */
19 | // @ts-ignore
20 | const config = withPWA({
21 |   reactStrictMode: true,
22 | 
23 |   /**
24 |    * If you are using `appDir` then you must comment the below `i18n` config out.
25 |    *
26 |    * @see https://github.com/vercel/next.js/issues/41980
27 |    */
28 |   i18n: {
29 |     locales: ["en"],
30 |     defaultLocale: "en",
31 |   },
32 | });
33 | 
34 | export default config;


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "portfolio",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "build": "next build",
 8 |     "dev": "next dev",
 9 |     "lint": "next lint",
10 |     "start": "next start",
11 |     "type-check": "tsc --noEmit",
12 |     "format": "prettier --write ./src/**/*.{ts,tsx,js,jsx,json,md}"
13 |   },
14 |   "dependencies": {
15 |     "@motionone/utils": "^10.17.0",
16 |     "@radix-ui/react-hover-card": "^1.0.7",
17 |     "@radix-ui/react-icons": "^1.3.0",
18 |     "@radix-ui/react-slot": "^1.0.2",
19 |     "@splinetool/react-spline": "^2.2.6",
20 |     "@splinetool/runtime": "^1.0.38",
21 |     "@t3-oss/env-nextjs": "^0.7.1",
22 |     "class-variance-authority": "^0.7.0",
23 |     "clsx": "^2.1.0",
24 |     "embla-carousel-react": "8.0.0-rc21",
25 |     "framer-motion": "^10.18.0",
26 |     "locomotive-scroll": "5.0.0-beta.11",
27 |     "lucide-react": "^0.314.0",
28 |     "motion": "^10.17.0",
29 |     "next": "^14.0.4",
30 |     "next-pwa": "^5.6.0",
31 |     "react": "18.2.0",
32 |     "react-dom": "18.2.0",
33 |     "sharp": "^0.33.2",
34 |     "tailwind-merge": "^2.2.1",
35 |     "tailwindcss-animate": "^1.0.7",
36 |     "vanilla-tilt": "^1.8.1",
37 |     "zod": "^3.22.4"
38 |   },
39 |   "devDependencies": {
40 |     "@types/eslint": "^8.44.7",
41 |     "@types/locomotive-scroll": "^4.1.3",
42 |     "@types/next-pwa": "^5.6.9",
43 |     "@types/node": "^18.17.0",
44 |     "@types/react": "^18.2.37",
45 |     "@types/react-dom": "^18.2.15",
46 |     "@typescript-eslint/eslint-plugin": "^6.11.0",
47 |     "@typescript-eslint/parser": "^6.11.0",
48 |     "autoprefixer": "^10.4.14",
49 |     "eslint": "^8.54.0",
50 |     "eslint-config-next": "^14.0.4",
51 |     "postcss": "^8.4.31",
52 |     "prettier": "^3.1.0",
53 |     "prettier-plugin-tailwindcss": "^0.5.7",
54 |     "tailwindcss": "^3.3.5",
55 |     "typescript": "^5.1.6"
56 |   },
57 |   "ct3aMetadata": {
58 |     "initVersion": "7.26.0"
59 |   },
60 |   "packageManager": "pnpm@8.14.2"
61 | }


--------------------------------------------------------------------------------
/postcss.config.cjs:
--------------------------------------------------------------------------------
 1 | const config = {
 2 |   plugins: {
 3 |     'postcss-import': {},
 4 |     'tailwindcss/nesting': {},
 5 |     tailwindcss: {},
 6 |     autoprefixer: {},
 7 |   }
 8 | };
 9 | 
10 | module.exports = config;


--------------------------------------------------------------------------------
/prettier.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('prettier').Config & import('prettier-plugin-tailwindcss').PluginOptions} */
2 | const config = {
3 |   plugins: ["prettier-plugin-tailwindcss"],
4 | };
5 | 
6 | export default config;
7 | 


--------------------------------------------------------------------------------
/public/assets/infinitevps.webm:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/StrongBlue0703/developer-portfolio/a79db787d6ef24310b11fb52cbbb772937f7718f/public/assets/infinitevps.webm


--------------------------------------------------------------------------------
/public/assets/logo.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/StrongBlue0703/developer-portfolio/a79db787d6ef24310b11fb52cbbb772937f7718f/public/assets/logo.webp


--------------------------------------------------------------------------------
/public/assets/portfolio.webm:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/StrongBlue0703/developer-portfolio/a79db787d6ef24310b11fb52cbbb772937f7718f/public/assets/portfolio.webm


--------------------------------------------------------------------------------
/public/assets/scene.splinecode:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/StrongBlue0703/developer-portfolio/a79db787d6ef24310b11fb52cbbb772937f7718f/public/assets/scene.splinecode


--------------------------------------------------------------------------------
/public/assets/translate_bot.webm:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/StrongBlue0703/developer-portfolio/a79db787d6ef24310b11fb52cbbb772937f7718f/public/assets/translate_bot.webm


--------------------------------------------------------------------------------
/public/assets/unqueue.webm:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/StrongBlue0703/developer-portfolio/a79db787d6ef24310b11fb52cbbb772937f7718f/public/assets/unqueue.webm


--------------------------------------------------------------------------------
/public/assets/wrona.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/StrongBlue0703/developer-portfolio/a79db787d6ef24310b11fb52cbbb772937f7718f/public/assets/wrona.jpeg


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/StrongBlue0703/developer-portfolio/a79db787d6ef24310b11fb52cbbb772937f7718f/public/favicon.ico


--------------------------------------------------------------------------------
/public/fonts/ClashGrotesk-Variable.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/StrongBlue0703/developer-portfolio/a79db787d6ef24310b11fb52cbbb772937f7718f/public/fonts/ClashGrotesk-Variable.woff2


--------------------------------------------------------------------------------
/public/icon-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/StrongBlue0703/developer-portfolio/a79db787d6ef24310b11fb52cbbb772937f7718f/public/icon-192x192.png


--------------------------------------------------------------------------------
/public/icon-256x256.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/StrongBlue0703/developer-portfolio/a79db787d6ef24310b11fb52cbbb772937f7718f/public/icon-256x256.png


--------------------------------------------------------------------------------
/public/icon-384x384.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/StrongBlue0703/developer-portfolio/a79db787d6ef24310b11fb52cbbb772937f7718f/public/icon-384x384.png


--------------------------------------------------------------------------------
/public/icon-512x512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/StrongBlue0703/developer-portfolio/a79db787d6ef24310b11fb52cbbb772937f7718f/public/icon-512x512.png


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "theme_color": "#7B82FE",
 3 |     "background_color": "#0A0A13",
 4 |     "display": "standalone",
 5 |     "orientation": "portrait",
 6 |     "scope": "/",
 7 |     "start_url": "/",
 8 |     "name": "Strong Blue",
 9 |     "short_name": "Strong Blue",
10 |     "description": "Full-stack website developer and TypeScript enthusiast.",
11 |     "icons": [
12 |         {
13 |             "src": "/icon-192x192.png",
14 |             "sizes": "192x192",
15 |             "type": "image/png",
16 |             "purpose": "maskable any"
17 |         },
18 |         {
19 |             "src": "/icon-256x256.png",
20 |             "sizes": "256x256",
21 |             "type": "image/png",
22 |             "purpose": "maskable any"
23 |         },
24 |         {
25 |             "src": "/icon-384x384.png",
26 |             "sizes": "384x384",
27 |             "type": "image/png",
28 |             "purpose": "maskable any"
29 |         },
30 |         {
31 |             "src": "/icon-512x512.png",
32 |             "sizes": "512x512",
33 |             "type": "image/png",
34 |             "purpose": "maskable any"
35 |         }
36 |     ],
37 |     "splash_pages": null
38 | }


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | User-agent: *
2 | Allow: /


--------------------------------------------------------------------------------
/src/components/Container.tsx:
--------------------------------------------------------------------------------
  1 | import Head from "next/head";
  2 | import Link from "next/link";
  3 | import { motion, AnimatePresence } from "framer-motion";
  4 | import { cn, scrollTo } from "@/lib/utils";
  5 | import { useState, useEffect } from "react";
  6 | import Footer from "@/components/Footer";
  7 | import { useRouter } from "next/router";
  8 | import Preloader from "@/components/Preloader";
  9 | import styles from "@/styles/Container.module.css";
 10 | 
 11 | type IconProps = {
 12 |   ["data-hide"]: boolean;
 13 | };
 14 | 
 15 | type ContainerProps = {
 16 |   children: React.ReactNode;
 17 |   title?: string;
 18 |   description?: string;
 19 |   className?: string;
 20 | };
 21 | 
 22 | type NavProps = {
 23 |   text: string;
 24 |   href: string;
 25 |   i: number;
 26 |   className?: string;
 27 | };
 28 | 
 29 | const variants = {
 30 |   visible: (i: number) => ({
 31 |     opacity: 1,
 32 |     transition: {
 33 |       delay: i * 0.12,
 34 |     },
 35 |   }),
 36 |   hidden: { opacity: 0 },
 37 | };
 38 | 
 39 | const navLinks = [
 40 |   { href: "#home", text: "Home" },
 41 |   { href: "#about", text: "About" },
 42 |   { href: "#projects", text: "Projects" },
 43 |   { href: "#services", text: "Services" },
 44 | ];
 45 | 
 46 | function handleClick(e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) {
 47 |   const href = e.currentTarget.getAttribute("href");
 48 | 
 49 |   if (href && href.startsWith("#")) {
 50 |     e.preventDefault();
 51 |     const section = document.querySelector(href);
 52 |     scrollTo(section);
 53 |   }
 54 | }
 55 | 
 56 | function NavItem(props: NavProps) {
 57 |   return (
 58 |     <motion.li
 59 |       className={props.className}
 60 |       variants={variants}
 61 |       custom={props.i}
 62 |       initial="hidden"
 63 |       animate="visible"
 64 |       exit="hidden"
 65 |     >
 66 |       <a
 67 |         href={props.href}
 68 |         onClick={handleClick}
 69 |         className={cn(props.i === 0 && "nav-active", "nav-link")}
 70 |       >
 71 |         {props.text}
 72 |       </a>
 73 |     </motion.li>
 74 |   );
 75 | }
 76 | 
 77 | export default function Container(props: ContainerProps) {
 78 |   const [isOpen, setIsOpen] = useState<boolean>(false);
 79 |   const [isScrolled, setIsScrolled] = useState<boolean>(false);
 80 |   const [isLoading, setIsLoading] = useState<boolean>(true);
 81 | 
 82 |   const { children, ...customMeta } = props;
 83 |   const router = useRouter();
 84 |   const meta = {
 85 |     title: "Strong Blue",
 86 |     description: `Full-stack website developer and TypeScript enthusiast.`,
 87 |     image: "/assets/logo.webp",
 88 |     type: "website",
 89 |     ...customMeta,
 90 |   };
 91 | 
 92 |   // handle scroll
 93 |   useEffect(() => {
 94 |     const handleScroll = () => {
 95 |       setIsScrolled(window.scrollY > 0);
 96 |     };
 97 | 
 98 |     window.addEventListener("scroll", handleScroll);
 99 | 
100 |     return () => {
101 |       window.removeEventListener("scroll", handleScroll);
102 |     };
103 |   }, []);
104 | 
105 |   // preloader effect
106 |   useEffect(() => {
107 |     setTimeout(() => {
108 |       setIsLoading(false);
109 |       document.body.style.cursor = "default";
110 |       window.scrollTo(0, 0);
111 |     }, 2000);
112 |   }, []);
113 | 
114 |   return (
115 |     <>
116 |       <Head>
117 |         <title>{meta.title}</title>
118 |         <meta name="robots" content="follow, index" />
119 |         <meta name="theme-color" content="#7B82FE" />
120 |         <meta content={meta.description} name="description" />
121 |         <meta
122 |           property="og:url"
123 |           content={`https://www.wendoj.codes${router.asPath}`}
124 |         />
125 |         <link
126 |           rel="canonical"
127 |           href={`https://www.wendoj.codes${router.asPath}`}
128 |         />
129 |         <meta property="og:type" content={meta.type} />
130 |         <meta property="og:site_name" content="WendoJ" />
131 |         <meta property="og:description" content={meta.description} />
132 |         <meta property="og:title" content={meta.title} />
133 |         <meta property="og:image" content={meta.image} />
134 |         <meta name="twitter:card" content="summary_large_image" />
135 |         <meta name="twitter:site" content="WendoJ" />
136 |         <meta name="twitter:title" content={meta.title} />
137 |         <meta name="twitter:description" content={meta.description} />
138 |         <meta name="twitter:image" content={meta.image} />
139 |         <link rel="manifest" href="/manifest.json" />
140 |         <link rel="apple-touch-icon" href="/icon-192x192.png" />
141 |       </Head>
142 |       <nav
143 |         className={cn(
144 |           styles.nav,
145 |           isScrolled
146 |             ? "bg-gradient-to-br from-background to-transparent shadow-md backdrop-blur transition"
147 |             : "bg-transparent",
148 |         )}
149 |       >
150 |         <div className="absolute inset-y-0 right-0 flex items-center sm:hidden">
151 |           <button
152 |             onClick={() => setIsOpen(!isOpen)}
153 |             className={cn(
154 |               styles.burger,
155 |               "inline-flex transform items-center justify-center rounded-md p-2 transition-all duration-300 focus:outline-none",
156 |             )}
157 |             aria-controls="mobile-menu"
158 |             aria-expanded="false"
159 |           >
160 |             <span className="sr-only">Open main menu</span>
161 |             <MenuIcon data-hide={isOpen} />
162 |             <CrossIcon data-hide={!isOpen} />
163 |           </button>
164 |         </div>
165 |         <Link href="/">
166 |           <span className="text-lg font-semibold">wendo</span>
167 |         </Link>
168 | 
169 |         {/* Desktop menu */}
170 |         <ul className={styles["desktop-nav"]}>
171 |           {navLinks.map((link, i) => (
172 |             <NavItem
173 |               key={link.href}
174 |               href={link.href}
175 |               text={link.text}
176 |               i={i}
177 |               className="text-base"
178 |             />
179 |           ))}
180 |         </ul>
181 | 
182 |         {/* Mobile menu */}
183 |         <AnimatePresence key="menu">
184 |           {isOpen && (
185 |             <motion.div
186 |               className="fixed right-0 top-0 z-40 flex h-screen w-full flex-col justify-start overflow-y-hidden bg-background"
187 |               initial={{ x: "100%" }}
188 |               animate={{ x: 0 }}
189 |               exit={{ x: "100%" }}
190 |               transition={{ duration: 1, type: "spring", bounce: 0.25 }}
191 |             >
192 |               {/* Expandable menu */}
193 |               <div className="flex h-20 max-h-20 min-h-[60px] w-full items-center justify-between border-b pl-[22px] pr-1">
194 |                 <span className="text-base font-medium lowercase">Menu</span>
195 |                 <button
196 |                   onClick={() => setIsOpen(!isOpen)}
197 |                   className={styles.burger}
198 |                   aria-controls="mobile-menu"
199 |                   aria-expanded="false"
200 |                 >
201 |                   <span className="sr-only">Open main menu</span>
202 |                   <CrossIcon data-hide={!isOpen} />
203 |                 </button>
204 |               </div>
205 |               <div className="flex h-full flex-col items-start justify-between overflow-y-auto">
206 |                 {/* Links */}
207 |                 <ul className="flex min-h-fit w-full flex-col items-start space-y-6 px-[22px] py-[58px]">
208 |                   {navLinks.map((link, i) => (
209 |                     <button key={link.href} onClick={() => setIsOpen(false)}>
210 |                       <NavItem
211 |                         href={link.href}
212 |                         text={link.text}
213 |                         i={i}
214 |                         className="text-xl"
215 |                       />
216 |                     </button>
217 |                   ))}
218 |                 </ul>
219 | 
220 |                 {/* Footer */}
221 |                 <div className="flex min-h-fit w-full flex-col space-y-8 px-[22px] py-10">
222 |                   <span className="text-sm text-muted-foreground">
223 |                     © {new Date().getFullYear()} wendo. All rights reserved.
224 |                   </span>
225 |                 </div>
226 |               </div>
227 |             </motion.div>
228 |           )}
229 |         </AnimatePresence>
230 |         <style jsx global>{`
231 |           html,
232 |           body {
233 |             overflow-y: ${isOpen ? "hidden" : "initial"};
234 |             scrollbar-width: ${isOpen ? "none" : "unset"};
235 |             -ms-overflow-style: ${isOpen ? "none" : "unset"};
236 |             touch-action: ${isOpen ? "none" : "unset"};
237 |             -ms-touch-action: ${isOpen ? "none" : "unset"};
238 |           }
239 |         `}</style>
240 |       </nav>
241 | 
242 |       {/* Preloader */}
243 |       <AnimatePresence mode="wait">
244 |         {isLoading && <Preloader />}
245 |       </AnimatePresence>
246 | 
247 |       {/* Main content */}
248 |       <main className={cn("container", props.className)}>{children}</main>
249 |       <Footer />
250 |     </>
251 |   );
252 | }
253 | 
254 | function MenuIcon(props: IconProps) {
255 |   return (
256 |     <svg
257 |       xmlns="http://www.w3.org/2000/svg"
258 |       className="absolute h-5 w-5 text-neutral-100"
259 |       width="20"
260 |       height="20"
261 |       viewBox="0 0 20 20"
262 |       fill="none"
263 |       {...props}
264 |     >
265 |       <path
266 |         d="M2.5 2.5H17.5"
267 |         stroke="currentColor"
268 |         strokeWidth="1.5"
269 |         strokeLinecap="round"
270 |         strokeLinejoin="round"
271 |       />
272 |       <path
273 |         d="M2.5 7.5H17.5"
274 |         stroke="currentColor"
275 |         strokeWidth="1.5"
276 |         strokeLinecap="round"
277 |         strokeLinejoin="round"
278 |       />
279 |       <path
280 |         d="M2.5 12.5H17.5"
281 |         stroke="currentColor"
282 |         strokeWidth="1.5"
283 |         strokeLinecap="round"
284 |         strokeLinejoin="round"
285 |       />
286 |     </svg>
287 |   );
288 | }
289 | 
290 | function CrossIcon(props: IconProps) {
291 |   return (
292 |     <svg
293 |       className="absolute h-5 w-5 text-neutral-100"
294 |       viewBox="0 0 24 24"
295 |       width="24"
296 |       height="24"
297 |       stroke="currentColor"
298 |       strokeWidth="1.5"
299 |       strokeLinecap="round"
300 |       strokeLinejoin="round"
301 |       fill="none"
302 |       shapeRendering="geometricPrecision"
303 |       {...props}
304 |     >
305 |       <path d="M18 6L6 18" />
306 |       <path d="M6 6l12 12" />
307 |     </svg>
308 |   );
309 | }
310 | 


--------------------------------------------------------------------------------
/src/components/Footer.tsx:
--------------------------------------------------------------------------------
 1 | import Link from "next/link";
 2 | import { Button } from "@/components/ui/button";
 3 | import { useState, useEffect } from "react";
 4 | import { MailIcon } from "lucide-react";
 5 | 
 6 | export default function Footer() {
 7 |   // get the current time in UTC+1 time zone
 8 |   const [time, setTime] = useState<string>("");
 9 | 
10 |   useEffect(() => {
11 |     const interval = setInterval(() => {
12 |       const date = new Date();
13 |       date.setHours(date.getHours());
14 |       setTime(
15 |         date.toLocaleTimeString("en-US", {
16 |           hour12: true,
17 |           hour: "numeric",
18 |           minute: "numeric",
19 |         }),
20 |       );
21 |     }, 1000);
22 |     return () => clearInterval(interval);
23 |   }, []);
24 | 
25 |   return (
26 |     <footer className="w-full bg-gradient-to-t from-primary/[1%] to-transparent">
27 |       <div className="container mx-auto flex flex-row items-center justify-between py-6">
28 |         <span className="flex flex-row items-center space-x-4">
29 |           <p className="text-xs text-muted-foreground">
30 |             Made with ❤️ by{" "}
31 |             <Link
32 |               href="https://github.com/wendoj"
33 |               target="_blank"
34 |               passHref
35 |               className="text-foreground transition hover:text-primary"
36 |             >
37 |               Strong Blue
38 |             </Link>
39 |           </p>
40 |           <hr className="hidden h-6 border-l border-muted md:flex" />
41 |           <span className="flex hidden flex-row items-center space-x-2 md:flex">
42 |             <p className="text-xs text-muted-foreground">Local time:</p>
43 |             <p className="text-sm font-semibold">{time} UTC+1</p>
44 |           </span>
45 |         </span>
46 |         <Link
47 |           href="mailto:wendoj@proton.me"
48 |           passHref
49 |           className="text-xs text-muted-foreground hover:text-foreground"
50 |         >
51 |           <Button variant={"outline"}>
52 |             <MailIcon className="h-4 w-4 md:mr-2" />
53 |             <span className="hidden md:flex">wendoj@proton.me</span>
54 |           </Button>
55 |         </Link>
56 |       </div>
57 |       <div className="h-1 bg-[radial-gradient(closest-side,#8486ff,#42357d,#5d83ff,transparent)] opacity-50" />
58 |     </footer>
59 |   );
60 | }
61 | 


--------------------------------------------------------------------------------
/src/components/Preloader.tsx:
--------------------------------------------------------------------------------
 1 | import { useEffect, useState } from "react";
 2 | import { motion } from "framer-motion";
 3 | import styles from "@/styles/Container.module.css";
 4 | 
 5 | /* Framer motion variants */
 6 | const opacity = {
 7 |   initial: {
 8 |     opacity: 0,
 9 |   },
10 |   enter: {
11 |     opacity: 0.75,
12 |     transition: { duration: 1, delay: 0.2 },
13 |   },
14 | };
15 | 
16 | const slideUp = {
17 |   initial: {
18 |     top: 0,
19 |   },
20 |   exit: {
21 |     top: "-100vh",
22 |     transition: { duration: 0.8, ease: [0.76, 0, 0.24, 1], delay: 0.2 },
23 |   },
24 | };
25 | 
26 | const words = [
27 |   "Hello",
28 |   "Bonjour",
29 |   "Ciao",
30 |   "Olà",
31 |   "やあ",
32 |   "Hallå",
33 |   "Guten tag",
34 |   "Hallo",
35 | ];
36 | 
37 | export default function Preloader() {
38 |   const [index, setIndex] = useState(0);
39 |   const [dimension, setDimension] = useState({ width: 0, height: 0 });
40 | 
41 |   useEffect(() => {
42 |     setDimension({ width: window.innerWidth, height: window.innerHeight });
43 |   }, []);
44 | 
45 |   useEffect(() => {
46 |     if (index == words.length - 1) return;
47 |     setTimeout(
48 |       () => {
49 |         setIndex(index + 1);
50 |       },
51 |       index == 0 ? 1000 : 150,
52 |     );
53 |   }, [index]);
54 | 
55 |   const initialPath = `M0 0 L${dimension.width} 0 L${dimension.width} ${dimension.height} Q${dimension.width / 2} ${dimension.height + 300} 0 ${dimension.height}  L0 0`;
56 |   const targetPath = `M0 0 L${dimension.width} 0 L${dimension.width} ${dimension.height} Q${dimension.width / 2} ${dimension.height} 0 ${dimension.height}  L0 0`;
57 | 
58 |   const curve = {
59 |     initial: {
60 |       d: initialPath,
61 |       transition: { duration: 0.7, ease: [0.76, 0, 0.24, 1] },
62 |     },
63 |     exit: {
64 |       d: targetPath,
65 |       transition: { duration: 0.7, ease: [0.76, 0, 0.24, 1], delay: 0.3 },
66 |     },
67 |   };
68 | 
69 |   return (
70 |     <motion.div
71 |       variants={slideUp}
72 |       initial="initial"
73 |       exit="exit"
74 |       className={styles.introduction}
75 |     >
76 |       {dimension.width > 0 && (
77 |         <>
78 |           <motion.p variants={opacity} initial="initial" animate="enter">
79 |             <span></span>
80 |             {words[index]}
81 |           </motion.p>
82 |           <svg>
83 |             <motion.path
84 |               variants={curve}
85 |               initial="initial"
86 |               exit="exit"
87 |             ></motion.path>
88 |           </svg>
89 |         </>
90 |       )}
91 |     </motion.div>
92 |   );
93 | }
94 | 


--------------------------------------------------------------------------------
/src/components/ui/button.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | import { Slot } from "@radix-ui/react-slot";
 3 | import { cva, type VariantProps } from "class-variance-authority";
 4 | 
 5 | import { cn } from "@/lib/utils";
 6 | 
 7 | const buttonVariants = cva(
 8 |   "clash-grotesk 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",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default: "bg-primary text-primary-foreground hover:bg-primary/90",
13 |         destructive:
14 |           "bg-destructive text-destructive-foreground hover:bg-destructive/90",
15 |         outline:
16 |           "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
17 |         secondary:
18 |           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
19 |         ghost: "hover:bg-accent hover:text-accent-foreground",
20 |         link: "text-primary underline-offset-4 hover:underline",
21 |       },
22 |       size: {
23 |         default: "px-6 py-3",
24 |         sm: "h-9 rounded-md px-3",
25 |         lg: "h-11 rounded-md px-8",
26 |         icon: "h-10 w-10",
27 |       },
28 |     },
29 |     defaultVariants: {
30 |       variant: "default",
31 |       size: "default",
32 |     },
33 |   },
34 | );
35 | 
36 | export interface ButtonProps
37 |   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
38 |     VariantProps<typeof buttonVariants> {
39 |   asChild?: boolean;
40 | }
41 | 
42 | const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
43 |   ({ className, variant, size, asChild = false, ...props }, ref) => {
44 |     const Comp = asChild ? Slot : "button";
45 |     return (
46 |       <Comp
47 |         className={cn(buttonVariants({ variant, size, className }))}
48 |         ref={ref}
49 |         {...props}
50 |       />
51 |     );
52 |   },
53 | );
54 | Button.displayName = "Button";
55 | 
56 | export { Button, buttonVariants };
57 | 


--------------------------------------------------------------------------------
/src/components/ui/card.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | 
 3 | import { cn } from "@/lib/utils";
 4 | 
 5 | const Card = React.forwardRef<
 6 |   HTMLDivElement,
 7 |   React.HTMLAttributes<HTMLDivElement>
 8 | >(({ className, ...props }, ref) => (
 9 |   <div
10 |     ref={ref}
11 |     className={cn(
12 |       "rounded-lg border bg-card/10 text-card-foreground shadow-sm",
13 |       className,
14 |     )}
15 |     {...props}
16 |   />
17 | ));
18 | Card.displayName = "Card";
19 | 
20 | const CardHeader = React.forwardRef<
21 |   HTMLDivElement,
22 |   React.HTMLAttributes<HTMLDivElement>
23 | >(({ className, ...props }, ref) => (
24 |   <div
25 |     ref={ref}
26 |     className={cn("flex flex-col space-y-1.5 p-6", className)}
27 |     {...props}
28 |   />
29 | ));
30 | CardHeader.displayName = "CardHeader";
31 | 
32 | const CardTitle = React.forwardRef<
33 |   HTMLParagraphElement,
34 |   React.HTMLAttributes<HTMLHeadingElement>
35 | >(({ className, ...props }, ref) => (
36 |   <h3
37 |     ref={ref}
38 |     className={cn(
39 |       "text-2xl font-semibold leading-none tracking-tight",
40 |       className,
41 |     )}
42 |     {...props}
43 |   />
44 | ));
45 | CardTitle.displayName = "CardTitle";
46 | 
47 | const CardDescription = React.forwardRef<
48 |   HTMLParagraphElement,
49 |   React.HTMLAttributes<HTMLParagraphElement>
50 | >(({ className, ...props }, ref) => (
51 |   <p
52 |     ref={ref}
53 |     className={cn("text-sm text-muted-foreground", className)}
54 |     {...props}
55 |   />
56 | ));
57 | CardDescription.displayName = "CardDescription";
58 | 
59 | const CardContent = React.forwardRef<
60 |   HTMLDivElement,
61 |   React.HTMLAttributes<HTMLDivElement>
62 | >(({ className, ...props }, ref) => (
63 |   <div ref={ref} className={className} {...props} />
64 | ));
65 | CardContent.displayName = "CardContent";
66 | 
67 | const CardFooter = React.forwardRef<
68 |   HTMLDivElement,
69 |   React.HTMLAttributes<HTMLDivElement>
70 | >(({ className, ...props }, ref) => (
71 |   <div
72 |     ref={ref}
73 |     className={cn("flex items-center p-6 pt-0", className)}
74 |     {...props}
75 |   />
76 | ));
77 | CardFooter.displayName = "CardFooter";
78 | 
79 | export {
80 |   Card,
81 |   CardHeader,
82 |   CardFooter,
83 |   CardTitle,
84 |   CardDescription,
85 |   CardContent,
86 | };
87 | 


--------------------------------------------------------------------------------
/src/components/ui/carousel.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react";
  2 | import useEmblaCarousel, {
  3 |   type UseEmblaCarouselType,
  4 | } from "embla-carousel-react";
  5 | import { ArrowLeft, ArrowRight } from "lucide-react";
  6 | 
  7 | import { cn } from "@/lib/utils";
  8 | import { Button } from "@/components/ui/button";
  9 | 
 10 | type CarouselApi = UseEmblaCarouselType[1];
 11 | type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
 12 | type CarouselOptions = UseCarouselParameters[0];
 13 | type CarouselPlugin = UseCarouselParameters[1];
 14 | 
 15 | type CarouselProps = {
 16 |   opts?: CarouselOptions;
 17 |   plugins?: CarouselPlugin;
 18 |   orientation?: "horizontal" | "vertical";
 19 |   setApi?: (api: CarouselApi) => void;
 20 | };
 21 | 
 22 | type CarouselContextProps = {
 23 |   carouselRef: ReturnType<typeof useEmblaCarousel>[0];
 24 |   api: ReturnType<typeof useEmblaCarousel>[1];
 25 |   scrollPrev: () => void;
 26 |   scrollNext: () => void;
 27 |   canScrollPrev: boolean;
 28 |   canScrollNext: boolean;
 29 | } & CarouselProps;
 30 | 
 31 | const CarouselContext = React.createContext<CarouselContextProps | null>(null);
 32 | 
 33 | function useCarousel() {
 34 |   const context = React.useContext(CarouselContext);
 35 | 
 36 |   if (!context) {
 37 |     throw new Error("useCarousel must be used within a <Carousel />");
 38 |   }
 39 | 
 40 |   return context;
 41 | }
 42 | 
 43 | const Carousel = React.forwardRef<
 44 |   HTMLDivElement,
 45 |   React.HTMLAttributes<HTMLDivElement> & CarouselProps
 46 | >(
 47 |   (
 48 |     {
 49 |       orientation = "horizontal",
 50 |       opts,
 51 |       setApi,
 52 |       plugins,
 53 |       className,
 54 |       children,
 55 |       ...props
 56 |     },
 57 |     ref,
 58 |   ) => {
 59 |     const [carouselRef, api] = useEmblaCarousel(
 60 |       {
 61 |         ...opts,
 62 |         axis: orientation === "horizontal" ? "x" : "y",
 63 |       },
 64 |       plugins,
 65 |     );
 66 |     const [canScrollPrev, setCanScrollPrev] = React.useState(false);
 67 |     const [canScrollNext, setCanScrollNext] = React.useState(false);
 68 | 
 69 |     const onSelect = React.useCallback((api: CarouselApi) => {
 70 |       if (!api) {
 71 |         return;
 72 |       }
 73 | 
 74 |       setCanScrollPrev(api.canScrollPrev());
 75 |       setCanScrollNext(api.canScrollNext());
 76 |     }, []);
 77 | 
 78 |     const scrollPrev = React.useCallback(() => {
 79 |       api?.scrollPrev();
 80 |     }, [api]);
 81 | 
 82 |     const scrollNext = React.useCallback(() => {
 83 |       api?.scrollNext();
 84 |     }, [api]);
 85 | 
 86 |     const handleKeyDown = React.useCallback(
 87 |       (event: React.KeyboardEvent<HTMLDivElement>) => {
 88 |         if (event.key === "ArrowLeft") {
 89 |           event.preventDefault();
 90 |           scrollPrev();
 91 |         } else if (event.key === "ArrowRight") {
 92 |           event.preventDefault();
 93 |           scrollNext();
 94 |         }
 95 |       },
 96 |       [scrollPrev, scrollNext],
 97 |     );
 98 | 
 99 |     React.useEffect(() => {
100 |       if (!api || !setApi) {
101 |         return;
102 |       }
103 | 
104 |       setApi(api);
105 |     }, [api, setApi]);
106 | 
107 |     React.useEffect(() => {
108 |       if (!api) {
109 |         return;
110 |       }
111 | 
112 |       onSelect(api);
113 |       api.on("reInit", onSelect);
114 |       api.on("select", onSelect);
115 | 
116 |       return () => {
117 |         api?.off("select", onSelect);
118 |       };
119 |     }, [api, onSelect]);
120 | 
121 |     return (
122 |       <CarouselContext.Provider
123 |         value={{
124 |           carouselRef,
125 |           api: api,
126 |           opts,
127 |           orientation:
128 |             orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
129 |           scrollPrev,
130 |           scrollNext,
131 |           canScrollPrev,
132 |           canScrollNext,
133 |         }}
134 |       >
135 |         <div
136 |           ref={ref}
137 |           onKeyDownCapture={handleKeyDown}
138 |           className={cn("relative", className)}
139 |           role="region"
140 |           aria-roledescription="carousel"
141 |           {...props}
142 |         >
143 |           {children}
144 |         </div>
145 |       </CarouselContext.Provider>
146 |     );
147 |   },
148 | );
149 | Carousel.displayName = "Carousel";
150 | 
151 | const CarouselContent = React.forwardRef<
152 |   HTMLDivElement,
153 |   React.HTMLAttributes<HTMLDivElement>
154 | >(({ className, ...props }, ref) => {
155 |   const { carouselRef, orientation } = useCarousel();
156 | 
157 |   return (
158 |     <div ref={carouselRef} className="overflow-hidden">
159 |       <div
160 |         ref={ref}
161 |         className={cn(
162 |           "flex",
163 |           orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
164 |           className,
165 |         )}
166 |         {...props}
167 |       />
168 |     </div>
169 |   );
170 | });
171 | CarouselContent.displayName = "CarouselContent";
172 | 
173 | const CarouselItem = React.forwardRef<
174 |   HTMLDivElement,
175 |   React.HTMLAttributes<HTMLDivElement>
176 | >(({ className, ...props }, ref) => {
177 |   const { orientation } = useCarousel();
178 | 
179 |   return (
180 |     <div
181 |       ref={ref}
182 |       role="group"
183 |       aria-roledescription="slide"
184 |       className={cn(
185 |         "min-w-0 shrink-0 grow-0 basis-full",
186 |         orientation === "horizontal" ? "pl-4" : "pt-4",
187 |         className,
188 |       )}
189 |       {...props}
190 |     />
191 |   );
192 | });
193 | CarouselItem.displayName = "CarouselItem";
194 | 
195 | const CarouselPrevious = React.forwardRef<
196 |   HTMLButtonElement,
197 |   React.ComponentProps<typeof Button>
198 | >(({ className, variant = "outline", size = "icon", ...props }, ref) => {
199 |   const { orientation, scrollPrev, canScrollPrev } = useCarousel();
200 | 
201 |   return (
202 |     <Button
203 |       ref={ref}
204 |       variant={variant}
205 |       size={size}
206 |       className={cn(
207 |         "hidden h-8 w-8 rounded-full sm:absolute",
208 |         orientation === "horizontal"
209 |           ? "-left-12 top-1/2 -translate-y-1/2"
210 |           : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
211 |         className,
212 |       )}
213 |       disabled={!canScrollPrev}
214 |       onClick={scrollPrev}
215 |       {...props}
216 |     >
217 |       <ArrowLeft className="h-4 w-4" />
218 |       <span className="sr-only">Previous slide</span>
219 |     </Button>
220 |   );
221 | });
222 | CarouselPrevious.displayName = "CarouselPrevious";
223 | 
224 | const CarouselNext = React.forwardRef<
225 |   HTMLButtonElement,
226 |   React.ComponentProps<typeof Button>
227 | >(({ className, variant = "outline", size = "icon", ...props }, ref) => {
228 |   const { orientation, scrollNext, canScrollNext } = useCarousel();
229 | 
230 |   return (
231 |     <Button
232 |       ref={ref}
233 |       variant={variant}
234 |       size={size}
235 |       className={cn(
236 |         "hidden h-8 w-8 rounded-full sm:absolute",
237 |         orientation === "horizontal"
238 |           ? "-right-12 top-1/2 -translate-y-1/2"
239 |           : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
240 |         className,
241 |       )}
242 |       disabled={!canScrollNext}
243 |       onClick={scrollNext}
244 |       {...props}
245 |     >
246 |       <ArrowRight className="h-4 w-4" />
247 |       <span className="sr-only">Next slide</span>
248 |     </Button>
249 |   );
250 | });
251 | CarouselNext.displayName = "CarouselNext";
252 | 
253 | export {
254 |   type CarouselApi,
255 |   Carousel,
256 |   CarouselContent,
257 |   CarouselItem,
258 |   CarouselPrevious,
259 |   CarouselNext,
260 | };
261 | 


--------------------------------------------------------------------------------
/src/env.js:
--------------------------------------------------------------------------------
 1 | import { createEnv } from "@t3-oss/env-nextjs";
 2 | import { z } from "zod";
 3 | 
 4 | export const env = createEnv({
 5 |   /**
 6 |    * Specify your server-side environment variables schema here. This way you can ensure the app
 7 |    * isn't built with invalid env vars.
 8 |    */
 9 |   server: {
10 |     NODE_ENV: z.enum(["development", "test", "production"]),
11 |   },
12 | 
13 |   /**
14 |    * Specify your client-side environment variables schema here. This way you can ensure the app
15 |    * isn't built with invalid env vars. To expose them to the client, prefix them with
16 |    * `NEXT_PUBLIC_`.
17 |    */
18 |   client: {
19 |     // NEXT_PUBLIC_CLIENTVAR: z.string(),
20 |   },
21 | 
22 |   /**
23 |    * You can't destruct `process.env` as a regular object in the Next.js edge runtimes (e.g.
24 |    * middlewares) or client-side so we need to destruct manually.
25 |    */
26 |   runtimeEnv: {
27 |     NODE_ENV: process.env.NODE_ENV,
28 |     // NEXT_PUBLIC_CLIENTVAR: process.env.NEXT_PUBLIC_CLIENTVAR,
29 |   },
30 |   /**
31 |    * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially
32 |    * useful for Docker builds.
33 |    */
34 |   skipValidation: !!process.env.SKIP_ENV_VALIDATION,
35 |   /**
36 |    * Makes it so that empty strings are treated as undefined. `SOME_VAR: z.string()` and
37 |    * `SOME_VAR=''` will throw an error.
38 |    */
39 |   emptyStringAsUndefined: true,
40 | });
41 | 


--------------------------------------------------------------------------------
/src/lib/utils.ts:
--------------------------------------------------------------------------------
 1 | import { type ClassValue, clsx } from "clsx";
 2 | import { twMerge } from "tailwind-merge";
 3 | 
 4 | export function cn(...inputs: ClassValue[]) {
 5 |   return twMerge(clsx(inputs));
 6 | }
 7 | 
 8 | // scroll to element
 9 | export function scrollTo(element: Element | null) {
10 |   if (!element) return;
11 | 
12 |   element.scrollIntoView({
13 |     behavior: "smooth",
14 |     block: "center",
15 |     inline: "center",
16 |   });
17 | }
18 | 


--------------------------------------------------------------------------------
/src/pages/_app.tsx:
--------------------------------------------------------------------------------
 1 | import { type AppType } from "next/dist/shared/lib/utils";
 2 | 
 3 | import "@/styles/globals.css";
 4 | import "@/styles/locomotive-scroll.css";
 5 | 
 6 | import { DM_Sans } from "next/font/google";
 7 | 
 8 | const dmSans = DM_Sans({
 9 |   display: "swap",
10 |   subsets: ["latin"],
11 | });
12 | 
13 | const MyApp: AppType = ({ Component, pageProps }) => {
14 |   return (
15 |     <div lang={"en"} className={dmSans.className}>
16 |       <Component {...pageProps} />
17 |     </div>
18 |   );
19 | };
20 | 
21 | export default MyApp;
22 | 


--------------------------------------------------------------------------------
/src/pages/index.tsx:
--------------------------------------------------------------------------------
  1 | import Container from "@/components/Container";
  2 | import { useEffect, useRef, Suspense, useState } from "react";
  3 | import styles from "@/styles/Home.module.css";
  4 | import { Button } from "@/components/ui/button";
  5 | import {
  6 |   ChevronRight,
  7 |   Code2,
  8 |   Frame,
  9 |   SearchCheck,
 10 |   Eye,
 11 |   MonitorSmartphone,
 12 | } from "lucide-react";
 13 | import { TriangleDownIcon } from "@radix-ui/react-icons";
 14 | import Spline from "@splinetool/react-spline";
 15 | import Link from "next/link";
 16 | import { cn, scrollTo } from "@/lib/utils";
 17 | import Image from "next/image";
 18 | import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 19 | import {
 20 |   Carousel,
 21 |   CarouselContent,
 22 |   CarouselItem,
 23 |   CarouselNext,
 24 |   CarouselPrevious,
 25 |   type CarouselApi,
 26 | } from "@/components/ui/carousel";
 27 | import VanillaTilt from "vanilla-tilt";
 28 | import { motion } from "framer-motion";
 29 | 
 30 | const aboutStats = [
 31 |   { label: "Years of experience", value: "3+" },
 32 |   { label: "Technologies mastered", value: "5+" },
 33 |   { label: "Companies worked with", value: "15+" },
 34 | ];
 35 | 
 36 | const projects = [
 37 |   {
 38 |     title: "Unqueue",
 39 |     description: "E-commerce platform for selling digital products",
 40 |     image: "/assets/unqueue.webm",
 41 |     href: "https://unqueue.shop/",
 42 |   },
 43 |   {
 44 |     title: "InfiniteVPS",
 45 |     description: "High performance VPS hosting solution",
 46 |     image: "/assets/infinitevps.webm",
 47 |     href: "#",
 48 |   },
 49 |   {
 50 |     title: "TranslateBot",
 51 |     description: "Powerful Multilingual Translation Bot for Discord",
 52 |     image: "/assets/translate_bot.webm",
 53 |     href: "https://translatebot.app/",
 54 |   },
 55 |   {
 56 |     title: "Wrona",
 57 |     description: "Robotics-focused technology company",
 58 |     image: "/assets/wrona.jpeg",
 59 |     href: "https://www.wrona.com/",
 60 |   },
 61 |   {
 62 |     title: "This website",
 63 |     description: "My personal website",
 64 |     image: "/assets/portfolio.webm",
 65 |     href: "https://github.com/wendoj/portfolio",
 66 |   },
 67 | ];
 68 | 
 69 | const services = [
 70 |   {
 71 |     service: "Frontend Development",
 72 |     description:
 73 |       "Creating stellar user interfaces and web experiences using the latest technologies.",
 74 |     icon: Code2,
 75 |   },
 76 |   {
 77 |     service: "UX Design",
 78 |     description:
 79 |       "Building intuitive, user-centric designs that drive engagement and conversion.",
 80 |     icon: Frame,
 81 |   },
 82 |   {
 83 |     service: "SEO Optimization",
 84 |     description:
 85 |       "Enhancing your website's visibility in search engines for increased organic traffic.",
 86 |     icon: SearchCheck,
 87 |   },
 88 |   {
 89 |     service: "Responsive Design",
 90 |     description:
 91 |       "Designing websites that look and perform equally well on all devices and screen sizes.",
 92 |     icon: MonitorSmartphone,
 93 |   },
 94 |   {
 95 |     service: "Backend Development",
 96 |     description:
 97 |       "Developing robust, scalable server-side logic for a wide range of web applications.",
 98 |     icon: Eye,
 99 |   },
100 | ];
101 | 
102 | export default function Home() {
103 |   const refScrollContainer = useRef(null);
104 |   const [isScrolled, setIsScrolled] = useState<boolean>(false);
105 |   const [carouselApi, setCarouselApi] = useState<CarouselApi | null>(null);
106 |   const [current, setCurrent] = useState<number>(0);
107 |   const [count, setCount] = useState<number>(0);
108 | 
109 |   // handle scroll
110 |   useEffect(() => {
111 |     const sections = document.querySelectorAll("section");
112 |     const navLinks = document.querySelectorAll(".nav-link");
113 | 
114 |     async function getLocomotive() {
115 |       const Locomotive = (await import("locomotive-scroll")).default;
116 |       new Locomotive({
117 |         el: refScrollContainer.current ?? new HTMLElement(),
118 |         smooth: true,
119 |       });
120 |     }
121 | 
122 |     function handleScroll() {
123 |       let current = "";
124 |       setIsScrolled(window.scrollY > 0);
125 | 
126 |       sections.forEach((section) => {
127 |         const sectionTop = section.offsetTop;
128 |         if (window.scrollY >= sectionTop - 250) {
129 |           current = section.getAttribute("id") ?? "";
130 |         }
131 |       });
132 | 
133 |       navLinks.forEach((li) => {
134 |         li.classList.remove("nav-active");
135 | 
136 |         if (li.getAttribute("href") === `#${current}`) {
137 |           li.classList.add("nav-active");
138 |           console.log(li.getAttribute("href"));
139 |         }
140 |       });
141 |     }
142 | 
143 |     void getLocomotive();
144 |     window.addEventListener("scroll", handleScroll);
145 | 
146 |     return () => {
147 |       window.removeEventListener("scroll", handleScroll);
148 |     };
149 |   }, []);
150 | 
151 |   useEffect(() => {
152 |     if (!carouselApi) return;
153 | 
154 |     setCount(carouselApi.scrollSnapList().length);
155 |     setCurrent(carouselApi.selectedScrollSnap() + 1);
156 | 
157 |     carouselApi.on("select", () => {
158 |       setCurrent(carouselApi.selectedScrollSnap() + 1);
159 |     });
160 |   }, [carouselApi]);
161 | 
162 |   // card hover effect
163 |   useEffect(() => {
164 |     const tilt: HTMLElement[] = Array.from(document.querySelectorAll("#tilt"));
165 |     VanillaTilt.init(tilt, {
166 |       speed: 300,
167 |       glare: true,
168 |       "max-glare": 0.1,
169 |       gyroscope: true,
170 |       perspective: 900,
171 |       scale: 0.9,
172 |     });
173 |   }, []);
174 | 
175 |   return (
176 |     <Container>
177 |       <div ref={refScrollContainer}>
178 |         <Gradient />
179 | 
180 |         {/* Intro */}
181 |         <section
182 |           id="home"
183 |           data-scroll-section
184 |           className="mt-40 flex w-full flex-col items-center xl:mt-0 xl:min-h-screen xl:flex-row xl:justify-between"
185 |         >
186 |           <div className={styles.intro}>
187 |             <div
188 |               data-scroll
189 |               data-scroll-direction="horizontal"
190 |               data-scroll-speed=".09"
191 |               className="flex flex-row items-center space-x-1.5"
192 |             >
193 |               <span className={styles.pill}>next.js</span>
194 |               <span className={styles.pill}>tailwindcss</span>
195 |               <span className={styles.pill}>typescript</span>
196 |             </div>
197 |             <div>
198 |               <h1
199 |                 data-scroll
200 |                 data-scroll-enable-touch-speed
201 |                 data-scroll-speed=".06"
202 |                 data-scroll-direction="horizontal"
203 |               >
204 |                 <span className="text-6xl tracking-tighter text-foreground 2xl:text-8xl">
205 |                   Hello, I&apos;m
206 |                   <br />
207 |                 </span>
208 |                 <span className="clash-grotesk text-gradient text-6xl 2xl:text-8xl">
209 |                   Olympus.
210 |                 </span>
211 |               </h1>
212 |               <p
213 |                 data-scroll
214 |                 data-scroll-enable-touch-speed
215 |                 data-scroll-speed=".06"
216 |                 className="mt-1 max-w-lg tracking-tight text-muted-foreground 2xl:text-xl"
217 |               >
218 |                 An experienced full-stack website developer with a passion for
219 |                 crafting unique digital experiences.
220 |               </p>
221 |             </div>
222 |             <span
223 |               data-scroll
224 |               data-scroll-enable-touch-speed
225 |               data-scroll-speed=".06"
226 |               className="flex flex-row items-center space-x-1.5 pt-6"
227 |             >
228 |               <Link href="mailto:wendoj@proton.me" passHref>
229 |                 <Button>
230 |                   Get in touch <ChevronRight className="ml-1 h-4 w-4" />
231 |                 </Button>
232 |               </Link>
233 |               <Button
234 |                 variant="outline"
235 |                 onClick={() => scrollTo(document.querySelector("#about"))}
236 |               >
237 |                 Learn more
238 |               </Button>
239 |             </span>
240 | 
241 |             <div
242 |               className={cn(
243 |                 styles.scroll,
244 |                 isScrolled && styles["scroll--hidden"],
245 |               )}
246 |             >
247 |               Scroll to discover{" "}
248 |               <TriangleDownIcon className="mt-1 animate-bounce" />
249 |             </div>
250 |           </div>
251 |           <div
252 |             data-scroll
253 |             data-scroll-speed="-.01"
254 |             id={styles["canvas-container"]}
255 |             className="mt-14 h-full w-full xl:mt-0"
256 |           >
257 |             <Suspense fallback={<span>Loading...</span>}>
258 |               <Spline scene="/assets/scene.splinecode" />
259 |             </Suspense>
260 |           </div>
261 |         </section>
262 | 
263 |         {/* About */}
264 |         <section id="about" data-scroll-section>
265 |           <div
266 |             data-scroll
267 |             data-scroll-speed=".4"
268 |             data-scroll-position="top"
269 |             className="my-14 flex max-w-6xl flex-col justify-start space-y-10"
270 |           >
271 |             <h2 className="py-16  pb-2 text-3xl font-light leading-normal tracking-tighter text-foreground xl:text-[40px]">
272 |               I&apos;m an experienced full-stack developer proficient in{" "}
273 |               <Link
274 |                 href="https://create.t3.gg/"
275 |                 target="_blank"
276 |                 className="underline"
277 |               >
278 |                 TypeScript, Tailwind, and Next.js
279 |               </Link>{" "}
280 |               since 2021. My experience spans from startups to mid-sized
281 |               companies, where I&apos;ve been instrumental in the entire product
282 |               design process; from ideation and wireframing, through
283 |               prototyping, to the delivery of the final product, all while
284 |               efficiently collaborating with cross-functional teams.
285 |             </h2>
286 |             <div className="grid grid-cols-2 gap-8 xl:grid-cols-3">
287 |               {aboutStats.map((stat) => (
288 |                 <div
289 |                   key={stat.label}
290 |                   className="flex flex-col items-center text-center xl:items-start xl:text-start"
291 |                 >
292 |                   <span className="clash-grotesk text-gradient text-4xl font-semibold tracking-tight xl:text-6xl">
293 |                     {stat.value}
294 |                   </span>
295 |                   <span className="tracking-tight text-muted-foreground xl:text-lg">
296 |                     {stat.label}
297 |                   </span>
298 |                 </div>
299 |               ))}
300 |             </div>
301 |           </div>
302 |         </section>
303 | 
304 |         {/* Projects */}
305 |         <section id="projects" data-scroll-section>
306 |           {/* Gradient */}
307 |           <div className="relative isolate -z-10">
308 |             <div
309 |               className="absolute inset-x-0 -top-40 transform-gpu overflow-hidden blur-[100px] sm:-top-80 lg:-top-60"
310 |               aria-hidden="true"
311 |             >
312 |               <div
313 |                 className="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-primary via-primary to-secondary opacity-10 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
314 |                 style={{
315 |                   clipPath:
316 |                     "polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
317 |                 }}
318 |               />
319 |             </div>
320 |           </div>
321 |           <div data-scroll data-scroll-speed=".4" className="my-64">
322 |             <span className="text-gradient clash-grotesk text-sm font-semibold tracking-tighter">
323 |               ✨ Projects
324 |             </span>
325 |             <h2 className="mt-3 text-4xl font-semibold tracking-tight tracking-tighter xl:text-6xl">
326 |               Streamlined digital experiences.
327 |             </h2>
328 |             <p className="mt-1.5 text-base tracking-tight text-muted-foreground xl:text-lg">
329 |               I&apos;ve worked on a variety of projects, from small websites to
330 |               large-scale web applications. Here are some of my favorites:
331 |             </p>
332 | 
333 |             {/* Carousel */}
334 |             <div className="mt-14">
335 |               <Carousel setApi={setCarouselApi} className="w-full">
336 |                 <CarouselContent>
337 |                   {projects.map((project) => (
338 |                     <CarouselItem key={project.title} className="md:basis-1/2">
339 |                       <Card id="tilt">
340 |                         <CardHeader className="p-0">
341 |                           <Link href={project.href} target="_blank" passHref>
342 |                             {project.image.endsWith(".webm") ? (
343 |                               <video
344 |                                 src={project.image}
345 |                                 autoPlay
346 |                                 loop
347 |                                 muted
348 |                                 className="aspect-video h-full w-full rounded-t-md bg-primary object-cover"
349 |                               />
350 |                             ) : (
351 |                               <Image
352 |                                 src={project.image}
353 |                                 alt={project.title}
354 |                                 width={600}
355 |                                 height={300}
356 |                                 quality={100}
357 |                                 className="aspect-video h-full w-full rounded-t-md bg-primary object-cover"
358 |                               />
359 |                             )}
360 |                           </Link>
361 |                         </CardHeader>
362 |                         <CardContent className="absolute bottom-0 w-full bg-background/50 backdrop-blur">
363 |                           <CardTitle className="border-t border-white/5 p-4 text-base font-normal tracking-tighter">
364 |                             {project.description}
365 |                           </CardTitle>
366 |                         </CardContent>
367 |                       </Card>
368 |                     </CarouselItem>
369 |                   ))}
370 |                 </CarouselContent>
371 |                 <CarouselPrevious />
372 |                 <CarouselNext />
373 |               </Carousel>
374 |               <div className="py-2 text-center text-sm text-muted-foreground">
375 |                 <span className="font-semibold">
376 |                   {current} / {count}
377 |                 </span>{" "}
378 |                 projects
379 |               </div>
380 |             </div>
381 |           </div>
382 |         </section>
383 | 
384 |         {/* Services */}
385 |         <section id="services" data-scroll-section>
386 |           <div
387 |             data-scroll
388 |             data-scroll-speed=".4"
389 |             data-scroll-position="top"
390 |             className="my-24 flex flex-col justify-start space-y-10"
391 |           >
392 |             <motion.div
393 |               initial={{ opacity: 0, y: -10 }}
394 |               whileInView={{ opacity: 1, x: 0 }}
395 |               transition={{
396 |                 duration: 1,
397 |                 staggerChildren: 0.5,
398 |               }}
399 |               viewport={{ once: true }}
400 |               className="grid items-center gap-1.5 md:grid-cols-2 xl:grid-cols-3"
401 |             >
402 |               <div className="flex flex-col py-6 xl:p-6">
403 |                 <h2 className="text-4xl font-medium tracking-tight">
404 |                   Need more info?
405 |                   <br />
406 |                   <span className="text-gradient clash-grotesk tracking-normal">
407 |                     I got you.
408 |                   </span>
409 |                 </h2>
410 |                 <p className="mt-2 tracking-tighter text-secondary-foreground">
411 |                   Here are some of the services I offer. If you have any
412 |                   questions, feel free to reach out.
413 |                 </p>
414 |               </div>
415 |               {services.map((service) => (
416 |                 <div
417 |                   key={service.service}
418 |                   className="flex flex-col items-start rounded-md bg-white/5 p-14 shadow-md backdrop-blur transition duration-300 hover:-translate-y-0.5 hover:bg-white/10 hover:shadow-md"
419 |                 >
420 |                   <service.icon className="my-6 text-primary" size={20} />
421 |                   <span className="text-lg tracking-tight text-foreground">
422 |                     {service.service}
423 |                   </span>
424 |                   <span className="mt-2 tracking-tighter text-muted-foreground">
425 |                     {service.description}
426 |                   </span>
427 |                 </div>
428 |               ))}
429 |             </motion.div>
430 |           </div>
431 |         </section>
432 | 
433 |         {/* Contact */}
434 |         <section id="contact" data-scroll-section className="my-64">
435 |           <div
436 |             data-scroll
437 |             data-scroll-speed=".4"
438 |             data-scroll-position="top"
439 |             className="flex flex-col items-center justify-center rounded-lg bg-gradient-to-br from-primary/[6.5%] to-white/5 px-8 py-16 text-center xl:py-24"
440 |           >
441 |             <h2 className="text-4xl font-medium tracking-tighter xl:text-6xl">
442 |               Let&apos;s work{" "}
443 |               <span className="text-gradient clash-grotesk">together.</span>
444 |             </h2>
445 |             <p className="mt-1.5 text-base tracking-tight text-muted-foreground xl:text-lg">
446 |               I&apos;m currently available for freelance work and open to
447 |               discussing new projects.
448 |             </p>
449 |             <Link href="mailto:wendoj@proton.me" passHref>
450 |               <Button className="mt-6">Get in touch</Button>
451 |             </Link>
452 |           </div>
453 |         </section>
454 |       </div>
455 |     </Container>
456 |   );
457 | }
458 | 
459 | function Gradient() {
460 |   return (
461 |     <>
462 |       {/* Upper gradient */}
463 |       <div className="absolute -top-40 right-0 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80">
464 |         <svg
465 |           className="relative left-[calc(50%-11rem)] -z-10 h-[21.1875rem] max-w-none -translate-x-1/2 rotate-[30deg] sm:left-[calc(50%-30rem)] sm:h-[42.375rem]"
466 |           viewBox="0 0 1155 678"
467 |         >
468 |           <path
469 |             fill="url(#45de2b6b-92d5-4d68-a6a0-9b9b2abad533)"
470 |             fillOpacity=".1"
471 |             d="M317.219 518.975L203.852 678 0 438.341l317.219 80.634 204.172-286.402c1.307 132.337 45.083 346.658 209.733 145.248C936.936 126.058 882.053-94.234 1031.02 41.331c119.18 108.451 130.68 295.337 121.53 375.223L855 299l21.173 362.054-558.954-142.079z"
472 |           />
473 |           <defs>
474 |             <linearGradient
475 |               id="45de2b6b-92d5-4d68-a6a0-9b9b2abad533"
476 |               x1="1155.49"
477 |               x2="-78.208"
478 |               y1=".177"
479 |               y2="474.645"
480 |               gradientUnits="userSpaceOnUse"
481 |             >
482 |               <stop stopColor="#7980fe" />
483 |               <stop offset={1} stopColor="#f0fff7" />
484 |             </linearGradient>
485 |           </defs>
486 |         </svg>
487 |       </div>
488 | 
489 |       {/* Lower gradient */}
490 |       <div className="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]">
491 |         <svg
492 |           className="relative left-[calc(50%+3rem)] h-[21.1875rem] max-w-none -translate-x-1/2 sm:left-[calc(50%+36rem)] sm:h-[42.375rem]"
493 |           viewBox="0 0 1155 678"
494 |         >
495 |           <path
496 |             fill="url(#ecb5b0c9-546c-4772-8c71-4d3f06d544bc)"
497 |             fillOpacity=".1"
498 |             d="M317.219 518.975L203.852 678 0 438.341l317.219 80.634 204.172-286.402c1.307 132.337 45.083 346.658 209.733 145.248C936.936 126.058 882.053-94.234 1031.02 41.331c119.18 108.451 130.68 295.337 121.53 375.223L855 299l21.173 362.054-558.954-142.079z"
499 |           />
500 |           <defs>
501 |             <linearGradient
502 |               id="ecb5b0c9-546c-4772-8c71-4d3f06d544bc"
503 |               x1="1155.49"
504 |               x2="-78.208"
505 |               y1=".177"
506 |               y2="474.645"
507 |               gradientUnits="userSpaceOnUse"
508 |             >
509 |               <stop stopColor="#9A70FF" />
510 |               <stop offset={1} stopColor="#838aff" />
511 |             </linearGradient>
512 |           </defs>
513 |         </svg>
514 |       </div>
515 |     </>
516 |   );
517 | }
518 | 


--------------------------------------------------------------------------------
/src/styles/Container.module.css:
--------------------------------------------------------------------------------
 1 | /* navbar */
 2 | .nav {
 3 |   @apply fixed top-0 z-40 flex w-full flex-row items-center justify-between px-[1rem] py-8 2xl:px-[17rem];
 4 | }
 5 | .nav .desktop-nav {
 6 |   @apply hidden items-center space-x-5 text-center sm:flex;
 7 | }
 8 | 
 9 | /* burger menu */
10 | .burger-button {
11 |   @apply inline-flex transform items-center justify-center rounded-md p-2 transition-all duration-300 focus:outline-none;
12 | }
13 | .burger {
14 |   @apply relative h-40 w-40 border-0 bg-transparent transition-opacity duration-300;
15 | }
16 | .burger svg {
17 |   @apply top-1/2 left-1/2 translate-x-[200%] -translate-y-[38%] scale-100 transform opacity-100 transition-opacity transition-transform duration-300 duration-300;
18 | }
19 | .burger svg[data-hide="true"] {
20 |   @apply -translate-x-[50%] -translate-y-[50%] scale-0 transform opacity-0;
21 | }
22 | 
23 | /* preloader */
24 | .introduction{
25 |   height: 100vh;
26 |   width: 100vw;
27 |   display: flex;
28 |   align-items: center;
29 |   justify-content: center;
30 |   position: fixed;
31 |   z-index: 99;
32 |   background-color: hsl(240 27.9% 5.7%);
33 | 
34 |   svg{
35 |     position: absolute;
36 |     top: 0;
37 |     width: 100%;
38 |     height: calc(100% + 300px);
39 | 
40 |     path{
41 |       fill: hsl(240 27.9% 5.7%);
42 |     }
43 |   }
44 | 
45 |   p{
46 |     display: flex;
47 |     color: white;
48 |     font-size: 42px;
49 |     align-items: center;
50 |     position: absolute;
51 |     z-index: 1;
52 | 
53 |     span {
54 |       display: block;
55 |       width: 10px;
56 |       height: 10px;
57 |       background-color: white;
58 |       border-radius: 50%;
59 |       margin-right: 10px;
60 |     }
61 |   }
62 | }


--------------------------------------------------------------------------------
/src/styles/Home.module.css:
--------------------------------------------------------------------------------
 1 | 
 2 | /* hero */
 3 | .intro {
 4 |     @apply flex flex-col items-start space-y-4 w-full;
 5 | }
 6 | .pill {
 7 |     @apply transition border border-input bg-background flex items-center text-xs px-2.5 py-1.5 rounded-full hover:-translate-y-1 hover:bg-primary hover:text-primary-foreground duration-300;
 8 | }
 9 | .intro h1 {
10 |     @apply pt-2 leading-tight;
11 | }
12 | 
13 | /* scroll down */
14 | .scroll {
15 |     @apply transition duration-300 absolute bottom-6 left-1/2 mb-8 hidden -translate-x-1/2 transform-gpu flex-col items-center text-sm text-slate-400 xl:flex tracking-tight;
16 | }
17 | .scroll--hidden {
18 |     @apply opacity-0 transition duration-300;
19 | }
20 | 
21 | /* projects */
22 | .project-card {
23 |     @apply p-14 bg-white/[1%] rounded-md;
24 | }
25 | 
26 | /* spline canvas */
27 | #canvas-container
28 | {
29 |     @apply bg-background border rounded-3xl h-[515px] xl:w-[690px] xl:min-w-[690px] overflow-hidden;
30 | 
31 |     /* this fixes the overflow:hidden in Chrome/Opera */
32 |     -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
33 | }


--------------------------------------------------------------------------------
/src/styles/clash-grotesk.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 |   font-family: "ClashGrotesk-Variable";
3 |   src:
4 |     url("/fonts/ClashGrotesk-Variable.woff2") format("woff2");
5 |   font-weight: 200 700;
6 |   font-display: swap;
7 |   font-style: normal;
8 | }


--------------------------------------------------------------------------------
/src/styles/globals.css:
--------------------------------------------------------------------------------
  1 | @import "clash-grotesk.css";
  2 | 
  3 | @tailwind base;
  4 | @tailwind components;
  5 | @tailwind utilities;
  6 | 
  7 | @layer base {
  8 |   :root {
  9 |     --background: 240 27.9% 5.7%;
 10 |     --foreground: 210 40% 98%;
 11 | 
 12 |     --card: 222.2 84% 4.9%;
 13 |     --card-foreground: 210 40% 98%;
 14 | 
 15 |     --popover: 222.2 84% 4.9%;
 16 |     --popover-foreground: 210 40% 98%;
 17 | 
 18 |     --primary: 237 99% 74%;
 19 |     --primary-foreground: 0 0% 0%;
 20 | 
 21 |     --secondary: 214.2 98.47% 74.31%;
 22 |     --secondary-foreground: 218 11% 65%;
 23 | 
 24 |     --muted: 217.2 32.6% 17.5%;
 25 |     --muted-foreground: 215 20.2% 65.1%;
 26 | 
 27 |     --accent: 217.2 32.6% 17.5%;
 28 |     --accent-foreground: 210 40% 98%;
 29 | 
 30 |     --destructive: 0 62.8% 30.6%;
 31 |     --destructive-foreground: 210 40% 98%;
 32 | 
 33 |     --border: 217.2 32.6% 17.5%;
 34 |     --input: 217.2 32.6% 17.5%;
 35 |     --ring: 212.7 26.8% 83.9%;
 36 | 
 37 |     --radius: 0.5rem;
 38 |   }
 39 | }
 40 | 
 41 | /* global elements */
 42 | @layer base {
 43 |   html[data-scroll-orientation="horizontal"] {
 44 |     body {
 45 |       @apply w-fit;
 46 |     }
 47 |     [data-scroll-container] {
 48 |       @apply flex;
 49 |     }
 50 |   }
 51 |   * {
 52 |     @apply border-border;
 53 |   }
 54 |   html {
 55 |     @apply antialiased;
 56 |   }
 57 |   body {
 58 |     @apply bg-background text-foreground cursor-wait;
 59 |   }
 60 |   section {
 61 |     scroll-margin-top: 60px;
 62 |   }
 63 | }
 64 | 
 65 | /* custom scrollbar */
 66 | @layer base {
 67 |   ::-webkit-scrollbar {
 68 |     @apply h-2.5 w-2 transition;
 69 |   }
 70 |   ::-webkit-scrollbar-track {
 71 |     @apply bg-background;
 72 |   }
 73 |   ::-webkit-scrollbar-thumb {
 74 |     @apply bg-muted;
 75 |   }
 76 |   ::-webkit-scrollbar-thumb:active {
 77 |     @apply bg-primary;
 78 |   }
 79 | }
 80 | 
 81 | /* custom styles */
 82 | @layer base {
 83 |   .clash-grotesk {
 84 |     font-family: "ClashGrotesk-Variable", sans-serif;
 85 |   }
 86 |   .text-gradient {
 87 |     @apply bg-gradient-to-br from-primary to-secondary bg-clip-text text-transparent;
 88 |   }
 89 |   .nav-active {
 90 |     color: rgb(226 232 240) !important;
 91 |     @apply text-sm lowercase tracking-tight text-slate-200;
 92 |   }
 93 |   .nav-link {
 94 |     /* Remove the styles from nav-link class */
 95 |     @apply text-sm lowercase tracking-tight text-slate-400;
 96 |   }
 97 | 
 98 |   /* blinking animation */
 99 |   @keyframes blink {
100 |     from {
101 |       opacity: 1;
102 |     }
103 |     to {
104 |       opacity: 0;
105 |     }
106 |   }
107 |   .animate-blink {
108 |     animation: blink 1s infinite;
109 |   }
110 | }


--------------------------------------------------------------------------------
/src/styles/locomotive-scroll.css:
--------------------------------------------------------------------------------
1 | html.lenis{height:auto}.lenis.lenis-smooth{scroll-behavior:auto}.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}.lenis.lenis-stopped{overflow:hidden}.lenis.lenis-scrolling iframe{pointer-events:none}


--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
 1 | import type { Config } from "tailwindcss"
 2 | 
 3 | const config = {
 4 |   darkMode: ["class"],
 5 |   content: [
 6 |     './src/**/*.{ts,tsx}',
 7 | 	],
 8 |   prefix: "",
 9 |   theme: {
10 |     container: {
11 |       center: true,
12 |         padding: "1rem",
13 |       screens: {
14 |         "2xl": "1400px",
15 |       },
16 |     },
17 |     extend: {
18 |       colors: {
19 |         border: "hsl(var(--border))",
20 |         input: "hsl(var(--input))",
21 |         ring: "hsl(var(--ring))",
22 |         background: "hsl(var(--background))",
23 |         foreground: "hsl(var(--foreground))",
24 |         primary: {
25 |           DEFAULT: "hsl(var(--primary))",
26 |           foreground: "hsl(var(--primary-foreground))",
27 |         },
28 |         secondary: {
29 |           DEFAULT: "hsl(var(--secondary))",
30 |           foreground: "hsl(var(--secondary-foreground))",
31 |         },
32 |         destructive: {
33 |           DEFAULT: "hsl(var(--destructive))",
34 |           foreground: "hsl(var(--destructive-foreground))",
35 |         },
36 |         muted: {
37 |           DEFAULT: "hsl(var(--muted))",
38 |           foreground: "hsl(var(--muted-foreground))",
39 |         },
40 |         accent: {
41 |           DEFAULT: "hsl(var(--accent))",
42 |           foreground: "hsl(var(--accent-foreground))",
43 |         },
44 |         popover: {
45 |           DEFAULT: "hsl(var(--popover))",
46 |           foreground: "hsl(var(--popover-foreground))",
47 |         },
48 |         card: {
49 |           DEFAULT: "hsl(var(--card))",
50 |           foreground: "hsl(var(--card-foreground))",
51 |         },
52 |       },
53 |       borderRadius: {
54 |         lg: "var(--radius)",
55 |         md: "calc(var(--radius) - 2px)",
56 |         sm: "calc(var(--radius) - 4px)",
57 |       },
58 |       keyframes: {
59 |         "accordion-down": {
60 |           from: { height: "0" },
61 |           to: { height: "var(--radix-accordion-content-height)" },
62 |         },
63 |         "accordion-up": {
64 |           from: { height: "var(--radix-accordion-content-height)" },
65 |           to: { height: "0" },
66 |         },
67 |       },
68 |       animation: {
69 |         "accordion-down": "accordion-down 0.2s ease-out",
70 |         "accordion-up": "accordion-up 0.2s ease-out",
71 |       },
72 |     },
73 |   },
74 |   plugins: [require("tailwindcss-animate")],
75 | } satisfies Config
76 | 
77 | export default config


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     /* Base Options: */
 4 |     "esModuleInterop": true,
 5 |     "skipLibCheck": true,
 6 |     "target": "es2022",
 7 |     "allowJs": true,
 8 |     "resolveJsonModule": true,
 9 |     "moduleDetection": "force",
10 |     "isolatedModules": true,
11 | 
12 |     /* Strictness */
13 |     "strict": true,
14 |     "noUncheckedIndexedAccess": true,
15 |     "checkJs": true,
16 | 
17 |     /* Bundled projects */
18 |     "lib": ["dom", "dom.iterable", "ES2022"],
19 |     "noEmit": true,
20 |     "module": "ESNext",
21 |     "moduleResolution": "Bundler",
22 |     "jsx": "preserve",
23 |     "plugins": [{ "name": "next" }],
24 |     "incremental": true,
25 | 
26 |     /* Path Aliases */
27 |     "baseUrl": ".",
28 |     "paths": {
29 |       "@/*": ["./src/*"]
30 |     }
31 |   },
32 |   "include": [
33 |     ".eslintrc.cjs",
34 |     "next-env.d.ts",
35 |     "**/*.ts",
36 |     "**/*.tsx",
37 |     "**/*.cjs",
38 |     "**/*.js",
39 |     ".next/types/**/*.ts"
40 |   ],
41 |   "exclude": ["node_modules"]
42 | }
43 | 


--------------------------------------------------------------------------------