{"id":28682542,"url":"https://github.com/oliverwebdev/nkone731","last_synced_at":"2025-10-08T23:19:14.876Z","repository":{"id":298496948,"uuid":"999127903","full_name":"Oliverwebdev/NKone731","owner":"Oliverwebdev","description":null,"archived":false,"fork":false,"pushed_at":"2025-07-31T17:37:01.000Z","size":16948,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-31T19:57:49.230Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/Oliverwebdev.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}},"created_at":"2025-06-09T19:28:48.000Z","updated_at":"2025-07-31T16:48:17.000Z","dependencies_parsed_at":"2025-06-11T12:36:50.177Z","dependency_job_id":"9ad49abc-befb-4bf7-a65f-d3d1a94b4142","html_url":"https://github.com/Oliverwebdev/NKone731","commit_stats":null,"previous_names":["oliverwebdev/nkone731"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Oliverwebdev/NKone731","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Oliverwebdev%2FNKone731","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Oliverwebdev%2FNKone731/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Oliverwebdev%2FNKone731/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Oliverwebdev%2FNKone731/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Oliverwebdev","download_url":"https://codeload.github.com/Oliverwebdev/NKone731/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Oliverwebdev%2FNKone731/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279000728,"owners_count":26082862,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-08T02:00:06.501Z","response_time":56,"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":"2025-06-14T02:40:32.424Z","updated_at":"2025-10-08T23:19:14.861Z","avatar_url":"https://github.com/Oliverwebdev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🎤 NKone7.3.1 - Premium Music Experience\n\n\u003cdiv align=\"center\"\u003e\n\n![NKone731 Banner](https://img.shields.io/badge/NKone7.3.1-Premium%20Rap%20Music-ff0000?style=for-the-badge\u0026logo=music\u0026logoColor=white)\n\n[![React](https://img.shields.io/badge/React-19.1.0-61DAFB?style=flat-square\u0026logo=react\u0026logoColor=white)](https://reactjs.org/)\n[![Vite](https://img.shields.io/badge/Vite-6.3.5-646CFF?style=flat-square\u0026logo=vite\u0026logoColor=white)](https://vitejs.dev/)\n[![Framer Motion](https://img.shields.io/badge/Framer%20Motion-12.17.0-0055FF?style=flat-square\u0026logo=framer\u0026logoColor=white)](https://framer.com/motion)\n[![Apple Style](https://img.shields.io/badge/Design-Apple%20Inspired-000000?style=flat-square\u0026logo=apple\u0026logoColor=white)](https://apple.com)\n\n**Ein Premium-Webauftritt für Deutschlands aufstrebende Rap-Crew** 🔥\n\n[🌟 Live Demo](https://nkone731.github.io/website) • [📱 Mobile View](https://nkone731.github.io/website) • [🎵 Music](https://youtube.com/@nkone731)\n\n\u003c/div\u003e\n\n---\n\n## ✨ **Features**\n\n### 🎯 **Premium Design System**\n- **Apple/Samsung-inspiriertes UI** mit Glasmorphismus-Effekten\n- **Vollständig responsive** für alle Geräte (Mobile-First)\n- **Dark/Light Mode** Support mit automatischer Erkennung\n- **Custom CSS Variables** für konsistente Gestaltung\n- **Micro-Interactions** und flüssige Animationen\n\n### 🎵 **Music Integration**\n- **YouTube-Integration** mit direkten Video-Links\n- **High-Quality Thumbnails** mit Fallback-System\n- **Interactive Cards** mit Hover-Effekten\n- **Track Statistics** und Performance-Metriken\n- **Mobile-optimierte** Wiedergabe-Controls\n\n### 👥 **Crew Showcase**\n- **3 detaillierte Artist-Profile** mit individuellen Designs\n- **Social Media Integration** (Instagram, TikTok, YouTube)\n- **Gradient-Avatars** mit personalisierten Initialen\n- **Hover-Biografien** mit erweiterten Informationen\n- **Specialties \u0026 Stats** für jeden Künstler\n\n### 🚀 **Performance \u0026 SEO**\n- **Vite-powered** für blitzschnelle Entwicklung\n- **Code-Splitting** und optimierte Bundle-Größe\n- **Lazy Loading** für Bilder und Komponenten\n- **SEO-optimiert** mit Meta-Tags\n- **Web Vitals** optimiert\n\n---\n\n## 🛠️ **Tech Stack**\n\n| Technology | Version | Purpose |\n|------------|---------|---------|\n| **React** | 19.1.0 | UI Framework |\n| **Vite** | 6.3.5 | Build Tool \u0026 Dev Server |\n| **Framer Motion** | 12.17.0 | Animationen \u0026 Transitions |\n| **React Intersection Observer** | 9.16.0 | Scroll-basierte Animationen |\n| **ESLint** | 9.25.0 | Code Quality |\n| **CSS Variables** | - | Design System |\n\n---\n\n## 🚀 **Quick Start**\n\n### Voraussetzungen\n- **Node.js** 18+ \n- **npm** oder **yarn**\n- Moderner Browser mit ES6+ Support\n\n### Installation\n\n```bash\n# Repository klonen\ngit clone https://github.com/nkone731/website.git\ncd website\n\n# Dependencies installieren\nnpm install\n\n# Development Server starten\nnpm run dev\n```\n\n### Development Commands\n\n```bash\n# 🔧 Development Server (Hot Reload)\nnpm run dev\n\n# 🏗️ Production Build\nnpm run build\n\n# 👀 Build Preview\nnpm run preview\n\n# 🧹 Code Linting\nnpm run lint\n\n# 🚀 Deploy zu GitHub Pages\nnpm run deploy\n```\n\n---\n\n## 📱 **Responsive Breakpoints**\n\n```css\n/* Mobile First Approach */\nMobile:     320px - 768px   (1 Column Layout)\nTablet:     768px - 1024px  (2 Column Layout) \nDesktop:    1024px - 1400px (3 Column Layout)\nLarge:      1400px+         (4 Column Layout)\n```\n\n---\n\n## 🎨 **Design System**\n\n### Color Palette\n```css\n--primary-red:      #ff0000  /* Brand Primary */\n--primary-red-light: #ff6b6b  /* Hover States */\n--accent-orange:    #ff6400  /* Crew Section */\n--accent-green:     #64ff64  /* Success States */\n--accent-blue:      #6464ff  /* Info States */\n```\n\n### Typography\n```css\nFont Family: -apple-system, BlinkMacSystemFont, 'Segoe UI'\nHeadings:    900-300 Weight, Clamp Responsive\nBody:        400 Weight, 1.6 Line Height\n```\n\n### Spacing System\n```css\n--space-xs:  4px   --space-sm:  8px\n--space-md:  16px  --space-lg:  24px\n--space-xl:  32px  --space-2xl: 48px\n--space-3xl: 64px  --space-4xl: 96px\n```\n\n---\n\n## 📁 **Projekt Struktur**\n\n```\nsrc/\n├── components/          # React Komponenten\n│   ├── Music.jsx       # YouTube Integration\n│   ├── Crew.jsx        # Artist Profiles\n│   ├── Footer.jsx      # Social Links \u0026 Credits\n│   ├── Hero.jsx        # Landing Section\n│   ├── Navbar.jsx      # Navigation\n│   ├── Contact.jsx     # Kontakt Form\n│   └── Manifesto.jsx   # About Section\n├── styles/             # Global Styles\n│   ├── global.css      # Utility Classes\n│   └── variables.css   # CSS Custom Properties\n├── hooks/              # Custom React Hooks\n│   └── useParallax.js  # Scroll Effects\n├── assets/             # Static Assets\n└── index.css           # Global CSS Reset\n```\n\n---\n\n## 🌟 **Unique Features**\n\n### 🎭 **Glassmorphismus UI**\n- Backdrop-Filter Effekte\n- Transparente Overlays\n- Subtle Border Gradients\n- Layered Depth System\n\n### ⚡ **Performance Optimiert**\n- **Bundle Size:** 41.17 kB CSS, 364.69 kB JS (gzipped)\n- **First Contentful Paint:** \u003c 1.5s\n- **Cumulative Layout Shift:** \u003c 0.1\n- **Time to Interactive:** \u003c 3s\n\n### 🎮 **Interactive Elements**\n- 3D Card Transformationen\n- Parallax Scroll Effekte\n- Magnetic Button Hovers\n- Smooth Page Transitions\n\n### 📱 **Mobile Excellence**\n- Touch-optimierte Interaktionen\n- Swipe-Gesten Support\n- Native App-like Feel\n- Optimierte Font Sizes\n\n---\n\n## 🎵 **Music Integration**\n\nDie Website integriert nahtlos mit YouTube für eine optimale Music Experience:\n\n```javascript\n// YouTube Thumbnail API\nconst getThumbnailUrl = (videoId) =\u003e ({\n  maxres: `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`,\n  hq: `https://img.youtube.com/vi/${videoId}/hqdefault.jpg`,\n  mq: `https://img.youtube.com/vi/${videoId}/mqdefault.jpg`\n});\n\n// Direkter Link zu YouTube\nconst handleVideoClick = (url) =\u003e {\n  window.open(url, '_blank');\n};\n```\n\n---\n\n## 👥 **Crew Konfiguration**\n\nEinfache Anpassung der Bandmitglieder in `src/components/Crew.jsx`:\n\n```javascript\nconst members = [\n  {\n    name: 'Filla23',\n    role: 'MC \u0026 Producer',\n    instagram: 'filla23',\n    tiktok: 'filla23',\n    youtube: 'nkone731',\n    specialty: 'Lyricism \u0026 Production'\n  }\n  // Weitere Members...\n];\n```\n\n---\n\n## 🚀 **Deployment**\n\n### GitHub Pages (Automatisch)\n```bash\nnpm run deploy\n```\n\n### Vercel\n```bash\nnpx vercel --prod\n```\n\n### Netlify\n```bash\nnpm run build\n# Drag \u0026 Drop `dist` folder zu Netlify\n```\n\n---\n\n## 🤝 **Contributing**\n\nContributions sind willkommen! Bitte folge diesen Schritten:\n\n1. **Fork** das Repository\n2. **Create** einen Feature Branch (`git checkout -b feature/AmazingFeature`)\n3. **Commit** deine Changes (`git commit -m 'Add AmazingFeature'`)\n4. **Push** zum Branch (`git push origin feature/AmazingFeature`)\n5. **Open** einen Pull Request\n\n### Code Style\n- **ESLint** Konfiguration beachten\n- **Prettier** für Formatierung\n- **Conventional Commits** für Git Messages\n- **Mobile-First** Responsive Design\n\n---\n\n## 📞 **Contact \u0026 Support**\n\n\u003cdiv align=\"center\"\u003e\n\n**NKone7.3.1 Team**\n\n[![Instagram](https://img.shields.io/badge/Instagram-E1306C?style=for-the-badge\u0026logo=instagram\u0026logoColor=white)](https://instagram.com/nkone731)\n[![TikTok](https://img.shields.io/badge/TikTok-000000?style=for-the-badge\u0026logo=tiktok\u0026logoColor=white)](https://tiktok.com/@nkone731)\n[![YouTube](https://img.shields.io/badge/YouTube-FF0000?style=for-the-badge\u0026logo=youtube\u0026logoColor=white)](https://youtube.com/@nkone731)\n\n**Entwickelt mit ❤️ von Premium Web Developer**\n\n\u003c/div\u003e\n\n---\n\n## 📄 **License**\n\nThis project is licensed under the **MIT License** - see the [LICENSE](LICENSE) file for details.\n\n---\n\n## 🙏 **Acknowledgments**\n\n- **Apple** für Design-Inspiration\n- **Samsung** für UI-Patterns  \n- **Framer** für Motion Library\n- **Vercel** für Deployment Platform\n- **React Team** für das Framework\n\n---\n\n\u003cdiv align=\"center\"\u003e\n\n**Made with 🔥 for the German Rap Scene**\n\n*NKone7.3.1 - Premium Music, Premium Web Presence*\n\n\u003c/div\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foliverwebdev%2Fnkone731","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foliverwebdev%2Fnkone731","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foliverwebdev%2Fnkone731/lists"}