{title}

91:I[903690,["/chat-static/_next/static/chunks/0cxp4op0m1119.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/2druaqheowhl8.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/00c0bu24wji78.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/2o82vp45o81e5.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/2lvmzw_lbp-jf.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/2gyzl_dalq47j.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/0sex0gcwdsmjy.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/0wkge2f3s0f22.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/1ggzqs8-kdl22.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/0rrc9lo-bkkh5.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/1j5k8gvtw8gdc.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/42mjea_hxrwdp.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/0a4mwgsvj_bqu.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/1t2vvxh4dupb4.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/3-pn4n4eze_76.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/1ovy71-w2povn.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/05vo5x924wz4s.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/37rh4z4c9595s.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/0hms8tz4_m27c.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/332d35_pah0kr.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/18k2gve12j479.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/1j9njtdk43kba.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/1idn80rtjcasd.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/0-pi40mz7bqkr.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/2nl7z8xw_3un6.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/1mo0iq2atp502.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/3-9165k65ag24.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/326ugcf3n9jpc.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/27d-e_mtrq80p.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/046fqcvlcxx_w.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/0h9h3jzy0z9y4.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/1pr8_b61w-4h9.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/16ot-3kwt24hs.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/3usbrh3-7_sgf.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/31wev-p231v4h.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/38mqyoeul-xnu.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/3s-m_7va7l_cq.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/3_1y_atv6kxm2.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/24jtal64lwnrj.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/1evcdxww4_xel.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/1o28wkog4g2yf.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/15a4no37jkkwb.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/02buq-_-_ooco.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/3s9yhs7vwi15d.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/3tc6ydk3shcz5.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/22_9cmbp37bso.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/3bx-d0nviq08q.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/08aqo-f1up_v8.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/2qkvm2bmjd-b8.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/3_5ti1t9ohxb6.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/0f31o5da026m-.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/2rc9h61v5i99w.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/2mbn2tix6bbr9.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK"],"ExplicitChatIdProvider"] 92:I[838238,["/chat-static/_next/static/chunks/0cxp4op0m1119.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/2druaqheowhl8.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/00c0bu24wji78.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/2o82vp45o81e5.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/2lvmzw_lbp-jf.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/2gyzl_dalq47j.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/0sex0gcwdsmjy.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/0wkge2f3s0f22.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/1ggzqs8-kdl22.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/0rrc9lo-bkkh5.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/1j5k8gvtw8gdc.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/42mjea_hxrwdp.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/0a4mwgsvj_bqu.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/1t2vvxh4dupb4.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/3-pn4n4eze_76.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/1ovy71-w2povn.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/05vo5x924wz4s.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/37rh4z4c9595s.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/0hms8tz4_m27c.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/332d35_pah0kr.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/18k2gve12j479.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/1j9njtdk43kba.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/1idn80rtjcasd.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/0-pi40mz7bqkr.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/2nl7z8xw_3un6.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/1mo0iq2atp502.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/3-9165k65ag24.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/326ugcf3n9jpc.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/27d-e_mtrq80p.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/046fqcvlcxx_w.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/0h9h3jzy0z9y4.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/1pr8_b61w-4h9.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/16ot-3kwt24hs.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/3usbrh3-7_sgf.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/31wev-p231v4h.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/38mqyoeul-xnu.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/3s-m_7va7l_cq.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/3_1y_atv6kxm2.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/24jtal64lwnrj.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/1evcdxww4_xel.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/1o28wkog4g2yf.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/15a4no37jkkwb.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/02buq-_-_ooco.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/3s9yhs7vwi15d.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/3tc6ydk3shcz5.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/22_9cmbp37bso.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/3bx-d0nviq08q.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/08aqo-f1up_v8.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/2qkvm2bmjd-b8.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/3_5ti1t9ohxb6.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/0f31o5da026m-.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/2rc9h61v5i99w.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK","/chat-static/_next/static/chunks/2mbn2tix6bbr9.js?dpl=dpl_7YWZXxamzrLm3aDfPy3qBfjqpGGK"],"SWRDataProvider"] 95:[] 96:[["b_YcDkupIgkMo",null]] 97:[["b_YcDkupIgkMo",{"templateVersionId":null,"templateCanonId":null}]] 98:[["b_YcDkupIgkMo","$D2026-01-26T08:15:00.512Z"]] 99:[["b_YcDkupIgkMo",false]] 9a:[["b_YcDkupIgkMo",{"git":{"ref":"main-25","sha":"9fdd58a7bb23bbddbbb36450945713eaf4bc691d","type":"github","repoId":0,"repoName":"my-portfolio","ownerName":"markokojicki98","commitMessage":"feat: update Ghost Artist Canvas component with pixel drawing logic and typewriter effect"}}]] 9b:[["b_YcDkupIgkMo",null]] 9c:[["b_YcDkupIgkMo",true]] 9d:[["b_YcDkupIgkMo",true]] 9e:[] 9f:Tbb0c4,[V0_FILE]plaintext:file=".gitignore" # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules # next.js /.next/ /out/ # production /build # debug npm-debug.log* yarn-debug.log* yarn-error.log* .pnpm-debug.log* # env files .env* # vercel .vercel # typescript *.tsbuildinfo next-env.d.ts [V0_FILE]markdown:file="README.md" # markokojicki_portfolio *Automatically synced with your [v0.dev](https://v0.dev) deployments* [![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/marko-wav/v0-markokojicki-portfolio-v10-live) [![Built with v0](https://img.shields.io/badge/Built%20with-v0.dev-black?style=for-the-badge)](https://v0.dev/chat/projects/u3K6c3RCzBn) ## Overview This repository will stay in sync with your deployed chats on [v0.dev](https://v0.dev). Any changes you make to your deployed app will be automatically pushed to this repository from [v0.dev](https://v0.dev). ## Deployment Your project is live at: **[https://vercel.com/marko-wav/v0-markokojicki-portfolio-v10-live](https://vercel.com/marko-wav/v0-markokojicki-portfolio-v10-live)** ## Build your app Continue building your app on: **[https://v0.dev/chat/projects/u3K6c3RCzBn](https://v0.dev/chat/projects/u3K6c3RCzBn)** ## How It Works 1. Create and modify your project using [v0.dev](https://v0.dev) 2. Deploy your chats from the v0 interface 3. Changes are automatically pushed to this repository 4. Vercel deploys the latest version from this repository [V0_FILE]typescriptreact:file="app/client-layout.tsx" "use client" import type React from "react" import "./globals.css" import { Providers } from "./providers" import { SiteHeader } from "@/components/site-header" import { ProjectsPanel } from "@/components/projects-panel" import { AboutDialog } from "@/components/about-dialog" import { CustomScrollbar } from "@/components/custom-scrollbar" import { useState, useEffect } from "react" import { usePathname } from "next/navigation" interface ClientLayoutProps { children: React.ReactNode title: string description: string fontClass: string } export default function ClientLayout({ children, title, description, fontClass }: ClientLayoutProps) { const [isPanelOpen, setIsPanelOpen] = useState(false) const [isAboutOpen, setIsAboutOpen] = useState(false) const [isScrolled, setIsScrolled] = useState(false) const pathname = usePathname() const isHomePage = pathname === "/" // Track scroll position useEffect(() => { const handleScroll = () => { setIsScrolled(window.scrollY > 10) } window.addEventListener("scroll", handleScroll) return () => window.removeEventListener("scroll", handleScroll) }, []) // Scroll to top on route change - simple and direct approach useEffect(() => { window.scrollTo(0, 0) }, [pathname]) return ( {title} {!isHomePage && } {!isHomePage && (

)} setIsAboutOpen(false)} /> {isHomePage ? (

{children}

) : (

{children}

)} ) } [V0_FILE]typescript:file="app/fonts.ts" import { Chivo_Mono } from "next/font/google" // BDOGrotesk is applied globally via CSS, but we export a reference for components that need explicit font styling export const schibstedGrotesk = { className: "font-bdo-grotesk", variable: "--font-schibsted-grotesk", } export const spaceMono = Chivo_Mono({ subsets: ["latin"], display: "swap", weight: ["400"], variable: "--font-mono", }) // LiberRegular for typewriter text export const liberRegular = { className: "font-liber", variable: "--font-liber", } [V0_FILE]css:file="app/globals.css" /* Converted from Tailwind v4 to v3 syntax */ @tailwind base; @tailwind components; @tailwind utilities; /* Add @font-face declarations for BDOGrotesk */ @font-face { font-family: "BDOGrotesk"; src: url("/fonts/BDOGrotesk-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "BDOGrotesk"; src: url("/fonts/BDOGrotesk-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "BDOGrotesk"; src: url("/fonts/BDOGrotesk-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "BDOGrotesk"; src: url("/fonts/BDOGrotesk-Bold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "BDOGrotesk"; src: url("/fonts/BDOGrotesk-ExtraBold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "BDOGrotesk"; src: url("/fonts/BDOGrotesk-Black.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; } /* Updated to use Gaya font file instead of SoLow */ @font-face { font-family: "LiberRegular"; src: url("/fonts/SoLow-Trial-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } /* shadcn design tokens - light theme */ @layer base { :root { --background: 0 0% 98%; --foreground: 0 0% 15%; --card: 0 0% 100%; --card-foreground: 0 0% 3.9%; --popover: 0 0% 100%; --popover-foreground: 0 0% 3.9%; --primary: 0 0% 9%; --primary-foreground: 0 0% 98%; --secondary: 0 0% 96%; --secondary-foreground: 0 0% 9%; --muted: 0 0% 96.1%; --muted-foreground: 0 0% 32%; --accent: 0 0% 96.1%; --accent-foreground: 0 0% 9%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 0 0% 89.8%; --input: 0 0% 89.8%; --ring: 0 0% 3.9%; --chart-1: 12 76% 61%; --chart-2: 173 58% 39%; --chart-3: 197 37% 24%; --chart-4: 43 74% 66%; --chart-5: 27 87% 67%; --radius: 0.5rem; /* Add font CSS variables */ --font-schibsted-grotesk: "BDOGrotesk", system-ui, sans-serif; --font-liber: "LiberRegular", system-ui, sans-serif; } /* shadcn design tokens - dark theme */ .dark { --background: 0 0% 9%; --foreground: 0 0% 100%; --card: 0 0% 3.9%; --card-foreground: 0 0% 98%; --popover: 0 0% 3.9%; --popover-foreground: 0 0% 100%; --primary: 0 0% 98%; --primary-foreground: 0 0% 9%; --secondary: 0 0% 15%; --secondary-foreground: 0 0% 100%; --muted: 0 0% 14.9%; --muted-foreground: 0 0% 83%; --accent: 0 0% 14.9%; --accent-foreground: 0 0% 100%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 0 0% 14.9%; --input: 0 0% 14.9%; --ring: 0 0% 83.1%; --chart-1: 220 70% 50%; --chart-2: 160 60% 45%; --chart-3: 30 80% 55%; --chart-4: 280 65% 60%; --chart-5: 340 75% 55%; } } @layer base { * { @apply border-border; } /* Hide ALL scrollbars completely - no gutter, no track, nothing */ html, body, * { scrollbar-width: none !important; /* Firefox */ -ms-overflow-style: none !important; /* IE and Edge */ } html::-webkit-scrollbar, body::-webkit-scrollbar, *::-webkit-scrollbar { display: none !important; /* Chrome, Safari, Opera */ width: 0 !important; height: 0 !important; background: transparent !important; } html { min-height: 100vh; background-color: transparent; /* Apply BDOGrotesk font to html */ font-family: var(--font-schibsted-grotesk); } body { @apply text-foreground; min-height: 100vh; background-color: transparent; /* Apply BDOGrotesk font to body */ font-family: var(--font-schibsted-grotesk); } } /* Add utility classes for fonts */ .font-bdo-grotesk { font-family: var(--font-schibsted-grotesk) !important; } .font-liber { font-family: var(--font-liber) !important; } /* Retro mode styles */ .retro-mode { filter: sepia(100%) hue-rotate(50deg) saturate(200%) contrast(120%); transition: filter 0.3s ease; } .retro-mode * { text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.3); } /* Prevent body scroll when panel is open */ .panel-open { overflow: hidden !important; } /* Remove backdrop-blur from header */ header { transition: background-color 0.3s ease; } /* Remove all blur effects when panel is open */ body.panel-open header { backdrop-filter: none !important; } body.panel-open .backdrop-blur-sm, body.panel-open .backdrop-blur-md, body.panel-open .backdrop-blur-lg, body.panel-open .backdrop-blur-xl, body.panel-open .backdrop-blur-2xl, body.panel-open .backdrop-blur-\[2px\], body.panel-open .backdrop-blur-\[4px\], body.panel-open .backdrop-blur-\[6px\], body.panel-open .backdrop-blur-\[8px\] { backdrop-filter: none !important; } .text-balance { text-wrap: balance; } /* Custom animation for scrolling tags */ @keyframes scroll-vertical { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } } .animate-scroll { animation: scroll 20s linear infinite; } .animate-scroll-slow { animation: scroll 40s linear infinite; } /* Add horizontal scroll keyframe animation */ @keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* Add scrolling images animation */ @keyframes scroll-images { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .animate-scroll-images { animation: scroll-images 40s linear infinite; } .animate-scroll-vertical { animation: scroll-vertical 20s linear infinite; } /* Ensure images maintain aspect ratio */ .aspect-video { aspect-ratio: 16 / 9; } .aspect-square { aspect-ratio: 1 / 1; } /* Custom styling for code blocks */ pre { background-color: hsl(var(--muted)); padding: 1rem; border-radius: 0.5rem; overflow-x: auto; } code { font-family: ui-monospace, monospace; font-size: 0.875rem; } /* Custom styling for blockquotes */ blockquote { border-left: 4px solid hsl(var(--border)); padding-left: 1rem; font-style: italic; } /* Custom styling for horizontal rules */ hr { margin-top: 2rem; margin-bottom: 2rem; border-top: 1px solid hsl(var(--border)); } /* Custom styling for tables */ table { width: 100%; border-collapse: collapse; } th, td { border: 1px solid hsl(var(--border)); padding: 0.5rem; } th { background-color: hsl(var(--muted)); } /* Custom styling for definition lists */ dt { font-weight: bold; } dd { margin-left: 1rem; } /* Custom styling for abbreviations */ abbr { cursor: help; border-bottom: 1px dotted; } /* Custom styling for small text */ small { font-size: 0.875rem; } /* Custom styling for superscript and subscript */ sup, sub { font-size: 0.75rem; } /* Custom styling for mark */ mark { background-color: #fef08a; padding: 0 0.25rem; } .dark mark { background-color: #854d0e; } /* Custom styling for ins */ ins { text-decoration: none; border-bottom: 1px solid #22c55e; } /* Custom styling for del */ del { text-decoration: line-through; color: #ef4444; } /* Scrolling Tags Animation */ .scrolling-container { display: flex; width: 100%; overflow: hidden; } .scrolling-content { display: flex; animation: scrollTags 30s linear infinite; padding-right: 0; } /* Replace the Project Cards Animation section with this */ .projects-scrolling-container { display: flex; width: 100%; overflow: hidden; } .projects-scrolling-content { display: flex; animation: scrollProjects 30s linear infinite reverse; padding: 0 6px; } .projects-scrolling-content:first-child { margin-right: 10px; } /* Remove any conflicting margin/padding rules */ .projects-scrolling-content > div { margin: 0; padding: 0; } @media (max-height: 700px) { .scrolling-content { animation-duration: 40s; } .projects-scrolling-content { animation-duration: 40s; } } /* Custom scrollbar for mobile project cards */ @media (max-width: 767px) { /* Hide scrollbar for Chrome, Safari and Opera */ .overflow-x-auto::-webkit-scrollbar { display: none; } /* Hide scrollbar for IE, Edge and Firefox */ .overflow-x-auto { -ms-overflow-style: none; scrollbar-width: none; scroll-snap-type: x mandatory; padding-bottom: 1rem; } /* Ensure tabs snap properly when scrolling */ .overflow-x-auto > div { scroll-snap-align: start; } /* Ensure proper spacing between tabs */ .overflow-x-auto > div:not(:last-child) { margin-right: 4px; } } /* Prevent flex items from shrinking */ .flex-nowrap { flex-wrap: nowrap; } /* Add this to the end of the file to override all rounded-[4px] classes */ .rounded-\[4px\] { border-radius: 8px !important; } /* Script to ensure tag colors are applied correctly in dark mode */ @media (prefers-color-scheme: dark) { :root:not(.light) [data-dark-bg] { background-color: var(--dark-bg-color) !important; color: var(--dark-text-color) !important; } } /* Ensure dark mode class properly applies tag styles */ .dark [data-dark-bg] { background-color: var(--dark-bg-color) !important; color: var(--dark-text-color) !important; } /* Fix for tag background wrapping */ [data-dark-bg] span, .tag-text { box-decoration-break: clone; -webkit-box-decoration-break: clone; } /* Add this to the end of the file to ensure tooltips are visible */ .tooltip { position: absolute; z-index: 9999; pointer-events: none; } /* Ensure tooltips are visible above all other elements */ [data-tooltip] { position: relative; } /* Remove these animation styles */ .animated-dock { /* No transition */ } .animated-dock:hover { /* No transform */ } .animated-dock-icon { /* No transition */ } .animated-dock:hover .animated-dock-icon { /* No transform */ } .animated-dock-icon:hover { /* No transform or z-index */ } /* Add these styles to the end of the file to ensure proper image loading appearance */ img { transition: opacity 0.2s ease-in-out; } /* Remove any animation-pulse or background colors from image placeholders */ .animate-pulse { background-color: rgba(229, 231, 235, 0.3) !important; } /* Ensure dark mode placeholders are also subtle */ .dark .animate-pulse { background-color: rgba(31, 41, 55, 0.3) !important; } @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .animate-marquee { animation: marquee 30s linear infinite; display: flex; width: max-content; } /* Add this at the end of the file */ /* 8-bit Retro Mode Styles */ @font-face { font-family: "Press Start 2P"; font-style: normal; font-weight: 400; src: url(https://fonts.gstatic.com/s/pressstart2p/v15/e3t4euO8T-267oIAQAu6jDQyK3nVivM.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; font-display: swap; } /* Base retro mode styles */ .retro-mode { image-rendering: pixelated; cursor: default !important; } .retro-mode * { cursor: default !important; font-family: "Press Start 2P", system-ui, -apple-system, sans-serif !important; letter-spacing: 0.05em; line-height: 1.5; } /* Retro mode text styles */ .retro-mode h1, .retro-mode h2, .retro-mode h3, .retro-mode h4, .retro-mode h5, .retro-mode h6 { text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5); } /* Make the main heading match regular mode size in retro mode */ .retro-mode section:first-child h1 { font-size: 1.875rem !important; line-height: 1.2 !important; margin-bottom: 1rem !important; } @media (min-width: 640px) { .retro-mode section:first-child h1 { font-size: 2.25rem !important; } } @media (min-width: 768px) { .retro-mode section:first-child h1 { font-size: 3rem !important; } } @media (min-width: 1024px) { .retro-mode section:first-child h1 { font-size: 3.75rem !important; } } /* Make the subheading match regular mode size in retro mode */ .retro-mode section:first-child p.text-3xl, .retro-mode section:first-child p.text-4xl, .retro-mode section:first-child p.text-5xl, .retro-mode section:first-child p.text-6xl { font-size: 1.875rem !important; line-height: 1.2 !important; } @media (min-width: 640px) { .retro-mode section:first-child p.text-3xl, .retro-mode section:first-child p.text-4xl, .retro-mode section:first-child p.text-5xl, .retro-mode section:first-child p.text-6xl { font-size: 2.25rem !important; } } @media (min-width: 768px) { .retro-mode section:first-child p.text-3xl, .retro-mode section:first-child p.text-5xl, .retro-mode section:first-child p.text-6xl { font-size: 3rem !important; } } @media (min-width: 1024px) { .retro-mode section:first-child p.text-3xl, .retro-mode section:first-child p.text-4xl, .retro-mode section:first-child p.text-5xl, .retro-mode section:first-child p.text-6xl { font-size: 3.75rem !important; } } /* Override for specific text sizes in retro mode */ .retro-mode .text-3xl, .retro-mode .text-4xl, .retro-mode .text-5xl, .retro-mode .text-6xl { font-size: inherit !important; } /* Override for WavyText component in retro mode */ .retro-mode h1 .wavy, .retro-mode h1 .char { font-size: inherit !important; } .retro-mode p, .retro-mode span, .retro-mode a, .retro-mode button { font-size: 0.8rem; } /* Retro mode UI elements */ .retro-mode button, .retro-mode .button, .retro-mode a { transition: none !important; transform: none !important; box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.5); } .retro-mode button:hover, .retro-mode .button:hover, .retro-mode a:hover { transform: translate(-1px, -1px) !important; box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5); } .retro-mode button:active, .retro-mode .button:active, .retro-mode a:active { transform: translate(1px, 1px) !important; box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5); } /* Retro mode cards and containers */ .retro-mode .card, .retro-mode .container, .retro-mode section, .retro-mode header, .retro-mode footer, .retro-mode nav { border: 2px solid #000; border-radius: 0 !important; box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5); } /* Retro mode inputs */ .retro-mode input, .retro-mode textarea, .retro-mode select { border: 2px solid #000 !important; border-radius: 0 !important; background-color: #f0f0f0 !important; box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.2); } /* Retro mode images */ .retro-mode img { image-rendering: pixelated; border: 2px solid #000; box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.5); } /* Retro mode colors */ .retro-mode { --retro-black: #000000; --retro-dark-blue: #1d2b53; --retro-purple: #7e2553; --retro-dark-green: #008751; --retro-brown: #ab5236; --retro-dark-grey: #5f574f; --retro-light-grey: #c2c3c7; --retro-white: #ffffff; --retro-red: #ff004d; --retro-orange: #ffa300; --retro-yellow: #ffec27; --retro-green: #00e436; --retro-blue: #ffffff; --retro-lavender: #83769c; --retro-pink: #ff77a8; --retro-light-peach: #ffccaa; --retro-bg: #e5e9ff; --retro-header: #d0fef2; } /* Light theme retro colors */ .retro-mode { background-color: var(--retro-bg) !important; color: #000000 !important; } /* Keep the light theme button styles */ .retro-mode button, .retro-mode .button { background-color: var(--retro-white) !important; color: var(--retro-white) !important; } .retro-mode header, .retro-mode footer, .retro-mode nav { background-color: var(--retro-header) !important; color: var(--retro-black) !important; } .retro-mode .card, .retro-mode .container { background-color: var(--retro-white) !important; color: var(--retro-dark-blue) !important; } /* Retro mode animations - ensure they work properly */ .retro-mode .animate-scroll, .retro-mode .animate-scroll-slow { animation-duration: 40s !important; animation-name: scroll !important; animation-timing-function: linear !important; animation-iteration-count: infinite !important; animation-delay: 0s !important; animation-fill-mode: none !important; } /* Retro mode animations */ .retro-mode * { transition: none !important; } /* Pixelated borders */ .retro-mode .border, .retro-mode [class*="border-"] { border-style: solid !important; border-width: 2px !important; border-color: var(--retro-black) !important; } /* Retro mode dock */ .retro-mode .animated-dock { border: 2px solid var(--retro-black); box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5); border-radius: 0 !important; background-color: var(--retro-light-grey) !important; } .retro-mode .animated-dock button, .retro-mode .animated-dock a { border-radius: 0 !important; border: 1px solid var(--retro-black); } /* Retro mode separators */ .retro-mode .separator { border-width: 2px !important; border-color: var(--retro-black) !important; } /* Retro mode tooltips */ .retro-mode [data-tooltip] { border: 2px solid var(--retro-black); box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.5); border-radius: 0 !important; } .opacity-15 { opacity: 0.15; } /* Bento Grid Styles */ .grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } .auto-rows-minmax { grid-auto-rows: minmax(140px, auto); } /* Ensure cards fill their grid cells completely */ .grid-cols-12 > * { height: 100%; } /* Fix for row-span-2 cards to properly fill space */ .row-span-2 { grid-row: span 2 / span 2; height: 100% !important; } /* Remove any potential padding/margin that could cause gaps */ .grid-cols-12 > * { padding: 0 !important; margin: 0 !important; } /* Mobile horizontal scrolling tabs */ @media (max-width: 767px) { .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; scroll-snap-type: x mandatory; } .hide-scrollbar::-webkit-scrollbar { display: none; } /* Ensure tabs snap properly when scrolling */ .hide-scrollbar > div { scroll-snap-align: start; } /* Ensure proper spacing between tabs */ .hide-scrollbar > div:not(:last-child) { margin-right: 4px; } } /* Add safe area inset support for mobile browsers with floating UI */ @supports (padding-bottom: env(safe-area-inset-bottom)) { .pb-safe { padding-bottom: env(safe-area-inset-bottom); } .pb-14-safe { padding-bottom: calc(3.5rem + env(safe-area-inset-bottom)); } .bottom-14-safe { bottom: calc(3.5rem + env(safe-area-inset-bottom)); } } /* Safe area support for mobile browsers - transparent safe areas */ @supports (height: 100dvh) { .h-screen-safe { height: 100dvh; } .min-h-screen-safe { min-height: 100dvh; } } /* Safe area padding utilities - transparent, no background fill */ .safe-area-inset-top { padding-top: env(safe-area-inset-top, 0px); } .safe-area-inset-bottom { padding-bottom: env(safe-area-inset-bottom, 0px); } .safe-area-inset-all { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); } /* Mobile section height with safe areas - sections should be viewport minus safe areas */ @media (max-width: 767px) { .h-screen-mobile-safe { height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); } .min-h-screen-mobile-safe { min-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); } /* Mobile scroll container should include safe area padding so content doesn't overlap browser chrome */ .mobile-scroll-container { height: 100dvh; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); } /* Mobile sections should fill the available height within the safe area */ .mobile-section-height { height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); min-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); } } /* Desktop sections use full viewport */ @media (min-width: 768px) { .mobile-scroll-container { height: 100vh; } .mobile-section-height { height: 100dvh; } } /* Adding scrollbar-hide utility class */ .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; } .scrollbar-hide::-webkit-scrollbar { display: none; } [V0_FILE]typescriptreact:file="app/home-scroll.tsx" "use client" import { useTheme } from "next-themes" import { useEffect, useState, useRef } from "react" import { useRouter } from "next/navigation" import { spaceMono, schibstedGrotesk } from "@/app/fonts" import { Linkedin, Mail, FileText, Moon, Sun, ChevronDown, ChevronUp, ChevronRight } from "lucide-react" import { Typewriter } from "@/components/typewriter" import { SiteHeader } from "@/components/site-header" import { BentoScrollingTags } from "@/components/bento-scrolling-tags" import { projectsData } from "@/data/projects" import CountUp from "@/components/count-up" import dynamic from "next/dynamic" import { CustomScrollbar } from "@/components/custom-scrollbar" import { AnimatedSection } from "@/components/animated-section" import { ProjectsPanel } from "@/components/projects-panel" import { ProjectThumbnailsSidebar } from "@/components/project-thumbnails-sidebar" import { SocialNav } from "@/components/social-nav" import { AboutDialog } from "@/components/about-dialog" import { GhostArtistCanvas } from "@/components/ghost-artist-canvas" const Dithering = dynamic(() => import("@paper-design/shaders-react").then((mod) => mod.Dithering), { ssr: false }) const TYPEWRITER_WORDS = ["PRODUCTS", "EXPERIENCES", "INTERACTIONS"] const SECTION_COLORS = [ { light: "#E6E4DF", dark: "#2C2C1F" }, { light: "#FCFCFC", dark: "#121212" }, { light: "#E6E4DF", dark: "#2C2C1F" }, { light: "#E6E4DF", dark: "#2C2C1F" }, { light: "#E6E4DF", dark: "#2C2C1F" }, ] const projectTypeMap: Record = { dlsv2: "DESIGN SYSTEM", onsite: "PRODUCT", agencyramp: "PRODUCT", empathybuild: "EXPERIENCE", } export default function HomeScroll() { const { resolvedTheme, setTheme } = useTheme() const [mounted, setMounted] = useState(false) const [isPanelOpen, setIsPanelOpen] = useState(false) const [isAboutOpen, setIsAboutOpen] = useState(false) const [currentTime, setCurrentTime] = useState("") const [currentDate, setCurrentDate] = useState("") const [isMobile, setIsMobile] = useState(false) const [parallaxOffset, setParallaxOffset] = useState(0) const [currentSection, setCurrentSection] = useState(0) const [hoveredCardIndex, setHoveredCardIndex] = useState(null) const [isDrawingHovered, setIsDrawingHovered] = useState(false) const [isDrawingEnabled, setIsDrawingEnabled] = useState(true) const sectionRef = useRef(null) const section1Ref = useRef(null) const section2Ref = useRef(null) const section3Ref = useRef(null) const section4Ref = useRef(null) const scrollContainerRef = useRef(null) const cursorRef = useRef(null) const router = useRouter() useEffect(() => { setMounted(true) const checkMobile = () => { if (typeof window !== "undefined") { setIsMobile(window.innerWidth < 768) } } checkMobile() if (typeof window !== "undefined") { window.addEventListener("resize", checkMobile) } const updateTime = () => { const now = new Date() const berlinTime = new Intl.DateTimeFormat("en-US", { timeZone: "Europe/Berlin", hour: "2-digit", minute: "2-digit", second: "2-digit", hour12: false, }).format(now) const berlinDate = new Intl.DateTimeFormat("en-US", { timeZone: "Europe/Berlin", month: "short", day: "numeric", }) .format(now) .toUpperCase() .replace(" ", " ") setCurrentTime(berlinTime) setCurrentDate(berlinDate + ",") } updateTime() const interval = setInterval(updateTime, 1000) return () => { clearInterval(interval) if (typeof window !== "undefined") { window.removeEventListener("resize", checkMobile) } } }, [mounted]) useEffect(() => { const scrollContainer = scrollContainerRef.current if (!scrollContainer) return const handleScroll = () => { const scrollTop = scrollContainer.scrollTop const offset = Math.min(scrollTop * 0.15, 50) setParallaxOffset(offset) const sectionHeight = window.innerHeight const sectionIndex = Math.round(scrollTop / sectionHeight) setCurrentSection(sectionIndex) } scrollContainer.addEventListener("scroll", handleScroll, { passive: true }) return () => scrollContainer.removeEventListener("scroll", handleScroll) }, []) // Canvas drawing is now handled by GhostArtistCanvas component const clearCanvas = () => { // Call the global clear function from GhostArtistCanvas if ((window as Window & { clearGhostArtistCanvas?: () => void }).clearGhostArtistCanvas) { (window as Window & { clearGhostArtistCanvas?: () => void }).clearGhostArtistCanvas() } } useEffect(() => { let rafId: number | null = null const handleGlobalMouseMove = (e: MouseEvent) => { if (rafId) return rafId = requestAnimationFrame(() => { if (cursorRef.current) { cursorRef.current.style.left = `${e.clientX}px` cursorRef.current.style.top = `${e.clientY}px` } rafId = null }) } window.addEventListener("mousemove", handleGlobalMouseMove, { passive: true }) return () => { window.removeEventListener("mousemove", handleGlobalMouseMove) if (rafId) cancelAnimationFrame(rafId) } }, []) const scrollToSection = (sectionIndex: number) => { const scrollContainer = scrollContainerRef.current if (!scrollContainer) return const sectionHeight = window.innerHeight scrollContainer.scrollTo({ top: sectionIndex * sectionHeight, behavior: "smooth", }) } const scrollToNextSection = () => { const maxSection = isMobile ? 3 : 1 if (currentSection < maxSection) { scrollToSection(currentSection + 1) } } const scrollToPrevSection = () => { if (currentSection > 0) { scrollToSection(currentSection - 1) } } const scrollToFirstSection = () => { scrollToSection(0) } const scrollToTop = () => { scrollToSection(0) } const handleMouseEnter = (index: number) => { setHoveredCardIndex(index) } const handleMouseLeave = () => { setHoveredCardIndex(null) } const handleCardClick = (slug: string) => { router.push(`/projects/${slug}`) } const isDarkMode = mounted && resolvedTheme === "dark" return (

{hoveredCardIndex !== null && (

view

)}

{currentTime} {currentDate.replace(",", "")} BERLIN

{mounted && ( )}

{!isMobile && ( {}} /> )}

MARKO KOJICKI

BERLIN BASED PRODUCT DESIGNER, DESIGNING

FROM 0 TO .

MARKO KOJICKI

BERLIN BASED PRODUCT DESIGNER,

DESIGNING{" "}

FROM 0 TO .

{ "I design at the intersection of strategy, emerging technology, and human experience — translating complexity into meaning, and delivering through systems thinking, scalable architecture, innovative design practices, and strong craft & technical skills." }

LINKEDIN EMAIL RESUME STUFF I LISTEN TO DESIGN TOOLS & RESOURCES

{projectsData.map((project, index) => { const isDLSv2 = project.slug === "dlsv2" const projectType = projectTypeMap[project.slug] return (

handleMouseEnter(index)} onMouseLeave={handleMouseLeave} onClick={() => handleCardClick(project.slug)} >

{project.image && (

{mounted && resolvedTheme === "dark" && (

)}

{project.title}

{project.company.toUpperCase()} {projectType ? ` • ${projectType}` : ""} • {project.year} {isDLSv2 && ( recent )}

) })}