{"id":25457338,"url":"https://github.com/sb-ccl/modern-portfolio","last_synced_at":"2026-04-11T00:06:26.229Z","repository":{"id":277817925,"uuid":"933562607","full_name":"Sb-CCL/Modern-Portfolio","owner":"Sb-CCL","description":"A production-optimized React portfolio achieving 98% accessibility and 82% SEO Lighthouse scores, delivered through automated Vercel CI/CD pipelines. Features dynamic theming, micro-interactions, and WCAG 2.1 compliant interfaces.","archived":false,"fork":false,"pushed_at":"2025-02-16T11:03:28.000Z","size":49983,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-16T11:20:04.093Z","etag":null,"topics":["css","html5","javascript","magic-ui","react-js","react-router-dom","shadcn-ui","tailwind-css","vercel-deployment","vite-js"],"latest_commit_sha":null,"homepage":"https://modern-portfolio-liart.vercel.app","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/Sb-CCL.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}},"created_at":"2025-02-16T09:12:33.000Z","updated_at":"2025-02-16T11:03:31.000Z","dependencies_parsed_at":"2025-02-16T11:32:53.862Z","dependency_job_id":null,"html_url":"https://github.com/Sb-CCL/Modern-Portfolio","commit_stats":null,"previous_names":["sb-ccl/modern-portfolio"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sb-CCL%2FModern-Portfolio","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sb-CCL%2FModern-Portfolio/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sb-CCL%2FModern-Portfolio/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sb-CCL%2FModern-Portfolio/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Sb-CCL","download_url":"https://codeload.github.com/Sb-CCL/Modern-Portfolio/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239394714,"owners_count":19631122,"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","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":["css","html5","javascript","magic-ui","react-js","react-router-dom","shadcn-ui","tailwind-css","vercel-deployment","vite-js"],"created_at":"2025-02-18T02:17:03.432Z","updated_at":"2025-11-02T12:30:30.635Z","avatar_url":"https://github.com/Sb-CCL.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🌐 Modern Portfolio\n\n[![React](https://img.shields.io/badge/React-20232a?style=flat\u0026logo=react)](https://react.dev/)\n[![Vite](https://img.shields.io/badge/Vite-B73BFE?style=flat\u0026logo=vite\u0026logoColor=FFD62E)](https://vitejs.dev/)\n[![TailwindCSS](https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=flat\u0026logo=tailwind-css)](https://tailwindcss.com/)\n[![Node.js](https://img.shields.io/badge/Node.js-43853D?style=flat\u0026logo=node.js\u0026logoColor=white)](https://nodejs.org/)\n[![ShadCN UI](https://img.shields.io/badge/ShadCN_UI-000000?style=flat\u0026logoColor=white)](https://ui.shadcn.com/)\n[![Lighthouse](https://img.shields.io/badge/best%20practices-100%25-success?style=flat-square\u0026logo=google-chrome\u0026logoColor=white)](https://)\n[![Lighthouse](https://img.shields.io/badge/accessibility-98%25-brightgreen?style=flat-square\u0026logo=accessibility\u0026logoColor=white)](https://)\n[![Package Manager](https://img.shields.io/badge/pkg%20manager-npm%20%7C%20yarn-orange)]()\n\n[![Live Demo](https://img.shields.io/badge/vercel-live%20demo-%23000000.svg?style=for-the-badge\u0026logo=vercel\u0026logoColor=white)](https://sb-modern-portfolio.vercel.app/)\n\n![Project Screenshot](https://github.com/Sb-CCL/Modern-Portfolio/blob/main/public/portfolio-preview.png?raw=true)\n\nA production-optimized React portfolio achieving 98% accessibility and 82% SEO Lighthouse scores, delivered through automated Vercel CI/CD pipelines. Features dynamic theming, micro-interactions, and WCAG 2.1 compliant interfaces.\n\n## ✨ Key Features\n\n- **🎨 Dynamic Theming \u0026 Animations:** System-aware dark/light mode with seamless transitions using Next-Themes and Framer Motion micro-interactions\n- **🚀 Performance Optimized:** Vite-powered development with code splitting, lazy loading, and production-ready Vercel deployment\n- **♿ Accessibility First:** WCAG 2.1 compliant with a 98 Lighthouse score, featuring fully keyboard-navigable interfaces\n- **🌍 SEO Architecture:** Structured data and semantic HTML implementation achieving 82 Lighthouse score\n- **📱 Responsive Design:** Fluid layouts and adaptive components across all device sizes\n- **⚡ Modern Tech Stack:** Built with ShadcnUI components, custom Tailwind variants, and React best practices\n- **🔄 Automated Deployment:** Vercel CI/CD pipeline with automatic preview deployments, branch protections, and production rollbacks\n\n## 📊 Lighthouse Results\n\n| Category       | Score | Audit Summary                     |\n| -------------- | ----- | --------------------------------- |\n| Performance    | 89    | Optimized assets and lazy loading |\n| Accessibility  | 98    | ARIA labels and semantic markup   |\n| Best Practices | 100   | Modern APIs and secure headers    |\n| SEO            | 82    | Structured data and meta tags     |\n\n## ⚡ Quick Start\n\n### Prerequisites\n\n- **Node.js** (v16.x or higher)\n- **npm** (v8.x or higher) or Yarn (v1.22.x or higher)\n\n### Installation\n\n1. Clone the repository:\n\n   ```bash\n   git clone https://github.com/Sb-CCL/Modern-Portfolio.git\n   cd Modern-Portfolio\n   ```\n\n2. Install dependencies:\n\n   ```bash\n   npm install  # Using npm\n   # or\n   yarn # Using Yarn\n   ```\n\n3. Start the development server:\n\n   ```bash\n   npm run dev # Using npm\n   # or\n   yarn dev # Using Yarn\n   ```\n\n## 🖿 Project Structure\n\n```bash\n├── public/\n│   └── screenshot.png\n│   └── project-videos.mp4\n│   └── favicon.png\n├── src/\n│   ├── assets/           # Static resources\n│   ├── components/       # Reusable components\n│   │   ├── ui/           # Radix-based primitives\n│   │   └── sections/     # Page sections\n│   ├── hooks/            # Custom hooks\n│   ├── lib/              # Utilities/configs\n│   ├── pages/            # Route components\n│   ├── styles/           # Global CSS\n│   └── main.jsx          # Application entry\n├── .eslintrc.cjs         # Linting rules\n├── tailwind.config.js    # Tailwind config\n└── vite.config.js        # Build configuration\n```\n\n### 📜 Development\n\n| Script            | Description                          |\n| ----------------- | ------------------------------------ |\n| `npm run dev`     | Start the development server         |\n| `npm run build`   | Build the application for production |\n| `npm run preview` | Preview the production build         |\n| `npm run lint`    | Run ESLint to check code quality     |\n\n## ♿ Accessibility\n\nThis project prioritizes accessibility to ensure a better user experience for all users, including those with disabilities. The following practices and tools have been integrated:\n\n## 📈 Performance\n\nThis app leverages Vite for **lightning-fast development** and **build times**. It’s optimized for modern browsers, ensuring **high performance** and **low initial load times**.\n\n## 📄 License\n\nThis project is proprietary software. Unauthorized use, modification, or distribution is strictly prohibited. For licensing inquiries, contact the repository owner.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsb-ccl%2Fmodern-portfolio","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsb-ccl%2Fmodern-portfolio","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsb-ccl%2Fmodern-portfolio/lists"}