[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-81352":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":8,"language":10,"languages":8,"totalLinesOfCode":8,"stars":11,"forks":12,"watchers":11,"openIssues":12,"contributorsCount":12,"subscribersCount":12,"size":12,"stars1d":12,"stars7d":12,"stars30d":12,"stars90d":12,"forks30d":12,"starsTrendScore":12,"compositeScore":13,"rankGlobal":8,"rankLanguage":8,"license":8,"archived":14,"fork":14,"defaultBranch":15,"hasWiki":16,"hasPages":14,"topics":17,"createdAt":8,"pushedAt":8,"updatedAt":18,"readmeContent":19,"aiSummary":20,"trendingCount":12,"starSnapshotCount":12,"syncStatus":21,"lastSyncTime":22,"discoverSource":23},81352,"BaroroStudio","dev-lou\u002FBaroroStudio","dev-lou",null,"https:\u002F\u002Fbaroro-studio.vercel.app","TypeScript",40,0,34,false,"main",true,[],"2026-06-12 04:01:33","# Baroro Studio — Interactive Design Portfolio & Frontend Demonstration\n\nBaroro Studio is a premium, high-performance web portfolio demonstration built with Next.js, Framer Motion, and Tailwind CSS. It is designed as an interactive showcase to demonstrate modern frontend engineering capabilities, featuring smooth animations, complex scroll-bound transformations, and a custom design system.\n\n> [!NOTE]\n> **Project Disclaimer:** This is a demonstration website and frontend portfolio project. It is not an active commercial design agency.\n\n---\n\n## 🚀 Key Highlights & Features\n\n- **Fluid Scroll Architecture:** Powered by `Lenis` to provide a unified, premium smooth scrolling experience across all viewports.\n- **Dynamic Contextual Cursor:** A responsive custom cursor system that dynamically morphs and provides context-specific commands (e.g. \"VIEW PROJECT\", \"EXPLORE\", \"PLAY REEL\") when hovering over interactive cards.\n- **Intersection-based Navbar Theming:** Seamlessly flips the navbar's text color from black to white (and vice versa) depending on the contrast ratio of the background element currently in the viewport.\n- **Staggered Animations:** Implements scroll-bound rotations, slide-in card reveals, and letter-by-letter marquee text movements using Framer Motion.\n- **Interactive Project & Contact Form:**\n  - Dynamic service selectors and budget range pills.\n  - Live GMT+8 timezone clock tracking the studio's mock location in Passi City, Philippines.\n  - Custom SVG animation triggers for submission states.\n- **Comprehensive Mobile Optimization:**\n  - Collapses complex scroll-jacked components (like the multi-section horizontal process scroll) into clean, readable vertical layouts.\n  - Automatically handles mobile drawer menu closing on navigation clicks.\n  - Implements scrollable navigation category tags for a frictionless touchscreen experience.\n\n---\n\n## 🛠️ Tech Stack\n\n- **Framework:** [Next.js 15](https:\u002F\u002Fnextjs.org\u002F) (App Router)\n- **Styling:** [Tailwind CSS 4](https:\u002F\u002Ftailwindcss.com\u002F) (Next-gen CSS theme engine)\n- **Animations:** [Framer Motion](https:\u002F\u002Fwww.framer.com\u002Fmotion\u002F) (`motion\u002Freact`)\n- **Smooth Scroll:** [Lenis Scroll](https:\u002F\u002Flenis.darkroom.engineering\u002F)\n- **Language:** [TypeScript](https:\u002F\u002Fwww.typescriptlang.org\u002F)\n- **SEO Optimization:** Dynamic metadata configurations, customized logo favicons, and dedicated Open Graph\u002FTwitter social preview sharing cards.\n\n---\n\n## 🏗️ Folder Structure\n\n```text\n├── app\u002F                  # Next.js App Router routes, global styles, and providers\n│   ├── about\u002F            # About page\n│   ├── contact\u002F          # Interactive contact form\n│   ├── services\u002F         # Capabilities and process page\n│   ├── work\u002F             # Portfolio work gallery grid (dynamic slugs)\n│   └── favicon.ico       # Custom brand favicon\n├── components\u002F           # Reusable UI component library\n│   ├── Client\u002F           # Scroll transitions, custom cursor, and client motion\n│   ├── Server\u002F           # Static typography and skeleton styling\n│   └── SVGs\u002F             # Optimized vector logos and decorative marks\n├── sections\u002F             # Page section layouts (Hero, News, Studio details)\n├── hooks\u002F                # Viewport and resize detection observers\n├── utils\u002F                # Helper utilities (Tailwind merges, custom styling overrides)\n└── public\u002F               # Static media files (optimized MP4 videos, images)\n```\n\n---\n\n## 💻 Getting Started\n\n1. **Clone the repository:**\n   ```bash\n   git clone https:\u002F\u002Fgithub.com\u002Fyourusername\u002FBaroroStudio.git\n   cd BaroroStudio\n   ```\n\n2. **Install dependencies:**\n   ```bash\n   pnpm install\n   # or npm install\n   ```\n\n3. **Run the local development server:**\n   ```bash\n   pnpm run dev\n   # or npm run dev\n   ```\n\n4. **Build and optimize for production:**\n   ```bash\n   pnpm run build\n   ```\n\n---\n\n## 🎨 Branding & Customization\n- **Theme Colors:** The site utilizes a premium obsidian background (`#050508`), high-contrast off-white (`#f0f0f2`), and an electric indigo-blue neon accent (`#6366f1`).\n- **SEO Assets:** Fully packaged with `app\u002Fopengraph-image.png` for automatic preview generation when shared on social platforms like Facebook Messenger, X (formerly Twitter), and Discord.\n","Baroro Studio 是一个基于现代前端技术构建的高端互动设计作品集展示网站。该项目使用Next.js、Framer Motion和Tailwind CSS等技术，旨在通过流畅的动画效果、复杂的滚动绑定转换以及自定义设计系统来展现前沿的前端工程能力。其核心功能包括流体滚动架构、动态上下文光标、基于交集的导航栏主题切换、错开的动画效果及全面的移动端优化等。Baroro Studio非常适合设计师、开发者或任何希望以创新方式在线展示自己作品的人士使用，尤其适合那些追求高质量用户体验与视觉表现力的专业人士。",2,"2026-06-11 04:04:43","CREATED_QUERY"]