{"id":50980179,"url":"https://github.com/ayhamdev/maison-noir","last_synced_at":"2026-06-19T13:02:53.056Z","repository":{"id":361934153,"uuid":"1256509314","full_name":"ayhamDev/maison-noir","owner":"ayhamDev","description":"Maison Noir is a minimalist, editorial-inspired digital experience for a curated real estate atelier specializing in modernist, brutalist, and heritage residential masterpieces. Developed using Next.js 14 (App Router), TypeScript, and Tailwind CSS, the platform incorporates sophisticated interactive structures with high-fidelity animations.","archived":false,"fork":false,"pushed_at":"2026-06-01T21:12:56.000Z","size":2860,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-06-01T23:10:35.591Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://maison-noir-ashy.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ayhamDev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-06-01T21:03:47.000Z","updated_at":"2026-06-01T21:14:45.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/ayhamDev/maison-noir","commit_stats":null,"previous_names":["ayhamdev/maison-noir"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/ayhamDev/maison-noir","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ayhamDev%2Fmaison-noir","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ayhamDev%2Fmaison-noir/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ayhamDev%2Fmaison-noir/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ayhamDev%2Fmaison-noir/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ayhamDev","download_url":"https://codeload.github.com/ayhamDev/maison-noir/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ayhamDev%2Fmaison-noir/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34532260,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-19T02:00:06.005Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-06-19T13:02:52.156Z","updated_at":"2026-06-19T13:02:53.049Z","avatar_url":"https://github.com/ayhamDev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Maison Noir — Architectural Real Estate Platform\n\nAn editorial, media-rich portfolio experience for **Maison Noir**, an elite real estate atelier brokering architectural residences. Built with **Next.js 14 (App Router)**, **TypeScript**, and **Tailwind CSS**, the application relies on performance-focused interactions, fluid smooth scrolling, and an interactive structural layout.\n\n---\n\n## Technical Highlights\n\n- **Next.js 14 \u0026 App Router**: Leverages React Server Components with client-side interactive sub-components.\n- **Lenis Smooth Scroll**: Implements non-blocking, performance-oriented layout panning and anchor-link transition controllers.\n- **Dynamic CSS Variables \u0026 Dark Mode**: Implements instantaneous light/dark theme transition without style flash, managed via a theme script injecting local storage states prior to document mount.\n- **Interactive Drafting Blueprint Map (Atlas)**: A responsive world map drafted in vector graphic paths, containing a coordinate tracker and automated viewport cycling.\n- **Aspect-Ratio Locked Horizontal Scroll**: A viewport-height bound horizontal portfolio carousel preventing text-clashing on wider or shorter screens.\n- **Fluid Micro-Animations**: Native Framer Motion spring states control custom pointer tracking, letterbox fades, and subtle noise grain filters.\n\n---\n\n## Tech Stack\n\n- **Framework**: [Next.js 14](https://nextjs.org/) (App Router)\n- **Styling**: [Tailwind CSS v3](https://tailwindcss.com/)\n- **Animation Framework**: [Framer Motion v11](https://www.framer.com/motion/)\n- **Scroll Engine**: [Lenis](https://github.com/darkroomengineering/lenis)\n- **Icons**: [Lucide React](https://lucide.dev/)\n- **Languages**: TypeScript, CSS3\n\n---\n\n## Directory Structure\n\n```text\n├── app/\n│   ├── globals.css          # Core design variables, overrides, custom utilities, and layers\n│   ├── layout.tsx           # Base HTML structure, fonts, scripts, and global layout wrappers\n│   └── page.tsx             # Consolidated page entry point bringing together sections\n├── components/\n│   ├── Navigation.tsx       # Dynamic desktop/mobile menu with theme toggles\n│   ├── SmoothScroll.tsx     # Lenis smooth-scroll initiator and anchor interceptor\n│   ├── GrainOverlay.tsx     # Low-opacity ambient film grain filter\n│   ├── Cursor.tsx           # Context-aware magnetic micro-pointer\n│   └── sections/\n│       ├── Hero.tsx         # Media background with parallax content overlays\n│       ├── Philosophy.tsx   # Text chapter layouts with auto-dimming perspective transitions\n│       ├── Manifesto.tsx    # Scroll-linked structural typography triggers\n│       ├── Portfolio.tsx    # Vertically pinned horizontal multi-card viewport list\n│       ├── Atlas.tsx        # Blueprint world map with interactive city nodes\n│       └── Contact.tsx      # Multi-column encrypted contact form with custom select components\n├── public/                  # Static assets (images, vectors, video feeds)\n├── tailwind.config.ts       # Core theme configuration, palette, and custom transition configurations\n├── tsconfig.json            # Strict TypeScript configuration\n└── package.json             # Build commands and dependency configurations\n```\n\n---\n\n## Getting Started\n\n### Prerequisites\n\nEnsure you have [Node.js](https://nodejs.org/) (v18.17.0 or higher recommended) and npm/yarn/pnpm installed.\n\n### Installation\n\n1. **Clone the repository:**\n\n   ```bash\n   git clone https://github.com/yourusername/maison-noir.git\n   cd maison-noir\n   ```\n\n2. **Install package dependencies:**\n\n   ```bash\n   npm install\n   # or\n   yarn install\n   # or\n   pnpm install\n   ```\n\n3. **Provide Assets:**\n   Place your media assets in the `public` directory. Specifically:\n   - `/hero.mp4` - A cinematic loop used in the hero background video structure.\n\n4. **Launch the local development server:**\n   ```bash\n   npm run dev\n   ```\n   Open [http://localhost:3000](http://localhost:3000) in your browser.\n\n---\n\n## Architectural Configurations\n\n### Tailwind Color Palette \u0026 Theme Tokens\n\nCustom color design tokens are integrated directly within `tailwind.config.ts` and synced dynamically inside `@layer base` in `app/globals.css`.\n\nTheme adjustments can be completed by re-defining key variables inside `app/globals.css`:\n\n```css\n:root {\n  /* LIGHT MODE (Warm Stone \u0026 Dark Slate) */\n  --color-bg: #fafaf9;\n  --color-bg-elev: #ffffff;\n  --color-ink: #1c1917;\n  --color-accent: #9c7e37;\n  --color-line: rgba(28, 25, 23, 0.1);\n}\n\n.dark {\n  /* DARK MODE (Obsidian \u0026 Metallic Gold) */\n  --color-bg: #0a0908;\n  --color-bg-elev: #131110;\n  --color-ink: #f5f1e8;\n  --color-accent: #c9a961;\n  --color-line: rgba(245, 241, 232, 0.08);\n}\n```\n\n### Performance Optimization for Video\n\nThe background video uses a combination of modern browser flags:\n\n```tsx\n\u003cvideo\n  ref={videoRef}\n  autoPlay\n  muted\n  loop\n  playsInline\n  preload=\"auto\"\n  className=\"...\"\n\u003e\n  \u003csource src=\"/hero.mp4\" type=\"video/mp4\" /\u003e\n\u003c/video\u003e\n```\n\nTo minimize rendering load on weak client processors, components pause or simplify animation states when the user has enabled OS level `prefers-reduced-motion` settings.\n\n---\n\n## Available Scripts\n\n- `npm run dev`: Starts the Next.js development server.\n- `npm run build`: Compiles the React application for optimized production delivery.\n- `npm run start`: Runs the built Next.js production server.\n- `npm run lint`: Analyzes files with ESLint to discover code style patterns and quality deviations.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fayhamdev%2Fmaison-noir","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fayhamdev%2Fmaison-noir","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fayhamdev%2Fmaison-noir/lists"}