https://github.com/sb-ccl/modern-portfolio
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.
https://github.com/sb-ccl/modern-portfolio
css html5 javascript magic-ui react-js react-router-dom shadcn-ui tailwind-css vercel-deployment vite-js
Last synced: 3 months ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/sb-ccl/modern-portfolio
- Owner: Sb-CCL
- Created: 2025-02-16T09:12:33.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2025-02-16T11:03:28.000Z (3 months ago)
- Last Synced: 2025-02-16T11:20:04.093Z (3 months ago)
- Topics: css, html5, javascript, magic-ui, react-js, react-router-dom, shadcn-ui, tailwind-css, vercel-deployment, vite-js
- Language: JavaScript
- Homepage: https://modern-portfolio-liart.vercel.app
- Size: 47.7 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🌐 Modern Portfolio
[](https://react.dev/)
[](https://vitejs.dev/)
[](https://tailwindcss.com/)
[](https://nodejs.org/)
[](https://ui.shadcn.com/)
[](https://)
[](https://)
[]()
[](https://sb-modern-portfolio.vercel.app/)
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.
## ✨ Key Features
- **🎨 Dynamic Theming & Animations:** System-aware dark/light mode with seamless transitions using Next-Themes and Framer Motion micro-interactions
- **🚀 Performance Optimized:** Vite-powered development with code splitting, lazy loading, and production-ready Vercel deployment
- **♿ Accessibility First:** WCAG 2.1 compliant with a 98 Lighthouse score, featuring fully keyboard-navigable interfaces
- **🌍 SEO Architecture:** Structured data and semantic HTML implementation achieving 82 Lighthouse score
- **📱 Responsive Design:** Fluid layouts and adaptive components across all device sizes
- **⚡ Modern Tech Stack:** Built with ShadcnUI components, custom Tailwind variants, and React best practices
- **🔄 Automated Deployment:** Vercel CI/CD pipeline with automatic preview deployments, branch protections, and production rollbacks
## 📊 Lighthouse Results
| Category | Score | Audit Summary |
| -------------- | ----- | --------------------------------- |
| Performance | 89 | Optimized assets and lazy loading |
| Accessibility | 98 | ARIA labels and semantic markup |
| Best Practices | 100 | Modern APIs and secure headers |
| SEO | 82 | Structured data and meta tags |
## ⚡ Quick Start
### Prerequisites
- **Node.js** (v16.x or higher)
- **npm** (v8.x or higher) or Yarn (v1.22.x or higher)
### Installation
1. Clone the repository:
```bash
git clone https://github.com/Sb-CCL/Modern-Portfolio.git
cd Modern-Portfolio
```
2. Install dependencies:
```bash
npm install # Using npm
# or
yarn # Using Yarn
```
3. Start the development server:
```bash
npm run dev # Using npm
# or
yarn dev # Using Yarn
```
## 🖿 Project Structure
```bash
├── public/
│ └── screenshot.png
│ └── project-videos.mp4
│ └── favicon.png
├── src/
│ ├── assets/ # Static resources
│ ├── components/ # Reusable components
│ │ ├── ui/ # Radix-based primitives
│ │ └── sections/ # Page sections
│ ├── hooks/ # Custom hooks
│ ├── lib/ # Utilities/configs
│ ├── pages/ # Route components
│ ├── styles/ # Global CSS
│ └── main.jsx # Application entry
├── .eslintrc.cjs # Linting rules
├── tailwind.config.js # Tailwind config
└── vite.config.js # Build configuration
```
### 📜 Development
| Script | Description |
| ----------------- | ------------------------------------ |
| `npm run dev` | Start the development server |
| `npm run build` | Build the application for production |
| `npm run preview` | Preview the production build |
| `npm run lint` | Run ESLint to check code quality |
## ♿ Accessibility
This project prioritizes accessibility to ensure a better user experience for all users, including those with disabilities. The following practices and tools have been integrated:
## 📈 Performance
This app leverages Vite for **lightning-fast development** and **build times**. It’s optimized for modern browsers, ensuring **high performance** and **low initial load times**.
## 📄 License
This project is proprietary software. Unauthorized use, modification, or distribution is strictly prohibited. For licensing inquiries, contact the repository owner.