Merge pull request #7 from VVK027/main-enhancement

impl. of flutter widgets with  vvk_ui_kit package,

Author: VVK027

.github/workflows/main.yml

@@ -40,7 +40,7 @@ jobs:
         uses: subosito/flutter-action@v2
         with:
           channel: stable
-          flutter-version: 3.35.3
+          flutter-version: 3.38.10
           cache: true
 
       - name: Get dependencies

.gitignore

@@ -33,6 +33,8 @@ migrate_working_dir/
 .pub-cache/
 .pub/
 /build/
+assets/projects/_captures/
+assets/projects/_sources/
 
 # Symbolication related
 app.*.symbols

README.md

@@ -25,17 +25,19 @@ https://github.com/user-attachments/assets/2ec44978-6c86-4c91-b57d-8a08a301af70
 - [Deploy to GitHub Pages](#deploy-to-github-pages)
 - [Configuration](#configuration)
 - [Assets](#assets)
+- [Support](#support)
 - [License](#license)
 
 ## Features
 
 - **Responsive layout** — Adaptive toolbar, spacing, and section layout for mobile, tablet, and desktop breakpoints.
-- **Portfolio sections** — About, skills, experience, projects, reviews, awards, education, certifications, and contact, driven from `assets/data.json`.
+- **Portfolio sections** — About, skills, experience, projects, open source, reviews, awards, achievements, education, certifications, and contact, driven from `assets/data.json`.
 - **Section navigation** — Sticky nav with scroll-synced active section via `ScrollablePositionedList`.
 - **Deep links** — Shareable URLs for each section (`/section/:id`) with `go_router`.
-- **Light and dark theme** — Material 3 themes with a semantic color system; toggle in the app bar (defaults to dark).
-- **Projects gallery** — Tag filters, project cards with previews, and a detail bottom sheet.
-- **Section carousels** — Paged carousels with controls and optional auto-play for multi-card content.
+- **Light and dark theme** — Material 3 themes with a semantic color system; toggle in the app bar (defaults to light).
+- **Projects gallery** — Tag filters, project cards with previews, and a detail dialog / bottom sheet.
+- **Section carousels** — Paged carousels with controls and optional auto-play for multi-card content (from `vvk_ui_kit`).
+- **Loading state** — Shimmer placeholder while `data.json` is parsed on a background isolate.
 - **Contact and social** — Email, phone, location, and social links (GitHub, LinkedIn, WhatsApp, etc.) via `url_launcher`.
 - **JSON-driven content** — Edit copy, metrics, experience, and projects without changing UI code.
 - **CI pipeline** — Analyze, test, build web, and deploy on pushes to `main` (see [Deploy to GitHub Pages](#deploy-to-github-pages)).
@@ -45,6 +47,7 @@ https://github.com/user-attachments/assets/2ec44978-6c86-4c91-b57d-8a08a301af70
 - Flutter & Dart
 - Riverpod — state management
 - go_router — URL navigation and section deep links
+- vvk_ui_kit — shared UI kit (Material 3 theme builder, carousel, shimmer, image preview frame, SVG icons, theme toggle)
 - json_serializable — typed JSON models
 - ScrollablePositionedList — anchored section scrolling
 - Poppins — bundled custom font family
@@ -69,18 +72,17 @@ The app ships with **light** and **dark** Material 3 themes. Both share the same
 
 | Piece | Role |
 | --- | --- |
-| `lib/core/theme/app_theme.dart` | Builds `lightTheme` and `darkTheme` (`ThemeData`, `ColorScheme`, component themes) |
-| `lib/core/theme/app_colors.dart` | Semantic palette as a `ThemeExtension<AppColors>` (`AppColors.light` / `AppColors.dark`) |
-| `lib/core/theme/app_fonts.dart` | Poppins family applied across the text theme |
-| `lib/core/provider/app_theme_provider.dart` | Riverpod `themeModeProvider` — defaults to `ThemeMode.dark` |
-| `lib/presentation/widgets/theme_toggle_button.dart` | Sun / moon control in the profile header |
+| `lib/core/theme/app_colors.dart` | Semantic palette as a `ThemeExtension<AppColors>` (`AppColors.light` / `AppColors.dark`), plus `lightTheme` / `darkTheme` built via `UIAppTheme.custom` from `vvk_ui_kit` |
+| `lib/core/theme/app_fonts.dart` | Poppins family (`AppFonts.family`) fed into the theme builder |
+| `lib/core/provider/app_theme_provider.dart` | Riverpod `themeModeProvider` — defaults to `ThemeMode.light` |
+| `UIThemeToggleButton` (`vvk_ui_kit`) | Sun / moon control wired up in the app bar (`portfolio_page.dart`) |
 
-`PortfolioApp` wires themes into `MaterialApp.router`:
+`PortfolioApp` (`lib/core/app.dart`) wires themes into `MaterialApp.router`:
 
 ```dart
-theme: lightTheme,
-darkTheme: darkTheme,
-themeMode: themeMode, // from themeModeProvider
+theme: lightTheme,      // from app_colors.dart
+darkTheme: darkTheme,   // from app_colors.dart
+themeMode: themeMode,   // from themeModeProvider
 ```
 
 The toggle switches between `ThemeMode.light` and `ThemeMode.dark` for the current session. Preference is **not** written to local storage yet.
@@ -101,7 +103,7 @@ final colors = context.appColors; // ThemeExtension helper
 ### Customizing themes
 
 1. **Palette** — Edit `AppColors.light` and `AppColors.dark` in `lib/core/theme/app_colors.dart`.
-2. **Typography** — Adjust sizes and weights in `_baseTextTheme` inside `lib/core/theme/app_theme.dart`.
+2. **Typography** — Adjust the theme built by `UIAppTheme.custom` in `_portfolioTheme` (`lib/core/theme/app_colors.dart`), or override the returned `ThemeData` there.
 3. **Default mode** — Change the initial value in `themeModeProvider` (`app_theme_provider.dart`).
 4. **Fonts** — Replace files under `assets/fonts/` and update `pubspec.yaml` + `AppFonts.family`.
 
@@ -193,6 +195,16 @@ assets/
 └── projects/           # Project preview images (*_preview.jpg)
 ```
 
+## Support
+
+If this project is helpful to you, consider supporting the work:
+
+<a href="https://buymeacoffee.com/vvk27" target="_blank">
+  <img src="https://img.shields.io/badge/Buy%20Me%20a%20Coffee-vvk27-FFDD00?style=for-the-badge&logo=buy-me-a-coffee&logoColor=black" alt="Buy Me a Coffee" />
+</a>
+
+☕ [buymeacoffee.com/vvk27](https://buymeacoffee.com/vvk27)
+
 ## License
 
 MIT — see [LICENSE](LICENSE).

assets/data.json

@@ -142,47 +142,6 @@
         "https://apps.apple.com/us/app/mastermind-drive-2-0/id6673890540"
       ]
     },
-    {
-      "name": "Metro City Pulse",
-      "tags": [
-        "Flutter",
-        "Dart",
-        "Riverpod",
-        "GoRouter",
-        "Clean Architecture",
-        "Google Maps",
-        "Web",
-        "Android",
-        "iOS",
-        "Mobile",
-        "Desktop",
-        "Cross-platform",
-        "Responsive"
-      ],
-      "features": [
-        "Interactive Map Dashboard",
-        "Incident Marker Filtering",
-        "Stats & KPI Overview",
-        "CCTV Alert Playback",
-        "Dark & Light Theme",
-        "English & Spanish Localization",
-        "Responsive Navigation Shell",
-        "Offline Connectivity Handling",
-        "Date Range Filtering",
-        "Firebase Authentication"
-      ],
-      "desc": "Built a cross-platform smart city monitoring app with Google Maps incident tracking, operational dashboards, CCTV-backed alerts, and adaptive layouts for mobile, tablet, and desktop.",
-      "fullDescription": [
-        "Implemented an interactive Google Maps dashboard with incident markers, severity legends, custom info windows, filter controls, zoom tools, and periodic data refresh for live operational views.",
-        "Designed and developed a real-time smart city monitoring dashboard as a cross-platform Flutter app for web, Android, iOS, macOS, Linux, and Windows from a single codebase.",
-        "Built stats and alerts workspaces with KPI summary cards, tabbed case status, confidence scoring, date-range selection, and CCTV video playback for incident review.",
-        "Applied Clean Architecture with Riverpod state management, GoRouter navigation, repository-based data flow, reusable UI components, and responsive shell layouts that switch between side menu and bottom navigation."
-      ],
-      "previewImage": "assets/projects/metro_city_pulse_preview.jpg",
-      "playStoreUrl": [],
-      "appStoreUrl": [],
-      "githubUrl": "https://github.com/VVK027/metro_city_pulse"
-    },
     {
       "name": "The Kidde App",
       "tags": [
@@ -236,82 +195,6 @@
         "https://apps.apple.com/us/app/kidde/id942334464"
       ]
     },
-    {
-      "name": "Flutter Dev Portfolio",
-      "tags": [
-        "Flutter",
-        "Dart",
-        "Riverpod",
-        "GoRouter",
-        "Clean Architecture",
-        "Web",
-        "Android",
-        "iOS",
-        "Mobile",
-        "Tablet",
-        "Cross-platform",
-        "Responsive"
-      ],
-      "features": [
-        "Responsive Layout",
-        "Dark & Light Theme",
-        "Section Navigation",
-        "Project Carousel",
-        "Skills & Experience",
-        "Client Reviews",
-        "Contact Section",
-        "GitHub Integration"
-      ],
-      "desc": "Built a responsive Flutter web and mobile portfolio with JSON-driven content, Riverpod state management, and adaptive section layouts.",
-      "fullDescription": [
-        "Designed and developed a personal developer portfolio as a cross-platform Flutter app deployable to web, Android, and iOS from a single codebase.",
-        "Structured the UI with scroll-synced section navigation, responsive carousels, and theme-aware components that adapt across mobile, tablet, and desktop breakpoints.",
-        "Loaded portfolio content from JSON assets so projects, experience, skills, and reviews can be updated without code changes.",
-        "Applied Clean Architecture with Riverpod providers, domain use cases, and reusable presentation widgets for maintainable, testable code."
-      ],
-      "previewImage": "assets/projects/flutter_portfolio_preview.jpg",
-      "playStoreUrl": [],
-      "appStoreUrl": [],
-      "githubUrl": "https://github.com/VVK027/flutter_portfolio"
-    },
-    {
-      "name": "Flutter Band Fit (Plugin)",
-      "tags": [
-        "Flutter",
-        "Dart",
-        "Plugin",
-        "Java",
-        "Swift",
-        "BLE",
-        "Android",
-        "iOS",
-        "Mobile",
-        "Tablet",
-        "Cross-platform"
-      ],
-      "features": [
-        "Smart Band Integration",
-        "Device Management",
-        "BLE Communication",
-        "Health Vitals Sync",
-        "Activity Monitoring",
-        "Alarms & Reminders",
-        "Firmware Updates",
-        "Watch Faces",
-        "Custom Watch Faces"
-      ],
-      "desc": "Created a cross-platform Flutter plugin with GloryFit/UTE SDK for health vitals sync, reminders, watch faces, and device management.",
-      "fullDescription": [
-        "Created a cross-platform Flutter plugin integrating GloryFit and UTE SDK for health-monitoring smart bands via BLE communication.",
-        "Supported real-time syncing of health vitals including SpO₂, blood pressure, heart rate, temperature, sleep tracking, and activity monitoring.",
-        "Implemented watch face customization, alarm and reminder management, sedentary alerts, and device firmware updates."
-      ],
-      "previewImage": "assets/projects/flutter_band_fit_preview.jpg",
-      "playStoreUrl": [],
-      "appStoreUrl": [],
-      "githubUrl": "https://github.com/VVK027/flutter_band_fit",
-      "pubUrl": "https://pub.dev/packages/flutter_band_fit"
-    },
     {
       "name": "Docty Digital Health for All",
       "tags": [
@@ -594,6 +477,126 @@
       "previewImage": "assets/projects/yng_logo.png",
       "playStoreUrl": [],
       "appStoreUrl": []
+    },
+    {
+      "name": "Flutter Band Fit (Plugin)",
+      "tags": [
+        "Flutter",
+        "Dart",
+        "Plugin",
+        "Java",
+        "Swift",
+        "BLE",
+        "Android",
+        "iOS",
+        "Mobile",
+        "Tablet",
+        "Cross-platform"
+      ],
+      "features": [
+        "Smart Band Integration",
+        "Device Management",
+        "BLE Communication",
+        "Health Vitals Sync",
+        "Activity Monitoring",
+        "Alarms & Reminders",
+        "Firmware Updates",
+        "Watch Faces",
+        "Custom Watch Faces"
+      ],
+      "desc": "Created a cross-platform Flutter plugin with GloryFit/UTE SDK for health vitals sync, reminders, watch faces, and device management.",
+      "fullDescription": [
+        "Created a cross-platform Flutter plugin integrating GloryFit and UTE SDK for health-monitoring smart bands via BLE communication.",
+        "Supported real-time syncing of health vitals including SpO₂, blood pressure, heart rate, temperature, sleep tracking, and activity monitoring.",
+        "Implemented watch face customization, alarm and reminder management, sedentary alerts, and device firmware updates."
+      ],
+      "previewImage": "assets/projects/flutter_band_fit_preview.jpg",
+      "playStoreUrl": [],
+      "appStoreUrl": [],
+      "githubUrl": "https://github.com/VVK027/flutter_band_fit",
+      "pubUrl": "https://pub.dev/packages/flutter_band_fit",
+      "isOpenSource": true
+    },
+    {
+      "name": "Metro City Pulse",
+      "tags": [
+        "Flutter",
+        "Dart",
+        "Riverpod",
+        "GoRouter",
+        "Clean Architecture",
+        "Google Maps",
+        "Web",
+        "Android",
+        "iOS",
+        "Mobile",
+        "Desktop",
+        "Cross-platform",
+        "Responsive"
+      ],
+      "features": [
+        "Interactive Map Dashboard",
+        "Incident Marker Filtering",
+        "Stats & KPI Overview",
+        "CCTV Alert Playback",
+        "Dark & Light Theme",
+        "English & Spanish Localization",
+        "Responsive Navigation Shell",
+        "Offline Connectivity Handling",
+        "Date Range Filtering",
+        "Firebase Authentication"
+      ],
+      "desc": "Built a cross-platform smart city monitoring app with Google Maps incident tracking, operational dashboards, CCTV-backed alerts, and adaptive layouts for mobile, tablet, and desktop.",
+      "fullDescription": [
+        "Implemented an interactive Google Maps dashboard with incident markers, severity legends, custom info windows, filter controls, zoom tools, and periodic data refresh for live operational views.",
+        "Designed and developed a real-time smart city monitoring dashboard as a cross-platform Flutter app for web, Android, iOS, macOS, Linux, and Windows from a single codebase.",
+        "Built stats and alerts workspaces with KPI summary cards, tabbed case status, confidence scoring, date-range selection, and CCTV video playback for incident review.",
+        "Applied Clean Architecture with Riverpod state management, GoRouter navigation, repository-based data flow, reusable UI components, and responsive shell layouts that switch between side menu and bottom navigation."
+      ],
+      "previewImage": "assets/projects/metro_city_pulse_preview.jpg",
+      "playStoreUrl": [],
+      "appStoreUrl": [],
+      "githubUrl": "https://github.com/VVK027/metro_city_pulse",
+      "isOpenSource": true
+    },
+    {
+      "name": "Flutter Dev Portfolio",
+      "tags": [
+        "Flutter",
+        "Dart",
+        "Riverpod",
+        "GoRouter",
+        "Clean Architecture",
+        "Web",
+        "Android",
+        "iOS",
+        "Mobile",
+        "Tablet",
+        "Cross-platform",
+        "Responsive"
+      ],
+      "features": [
+        "Responsive Layout",
+        "Dark & Light Theme",
+        "Section Navigation",
+        "Project Carousel",
+        "Skills & Experience",
+        "Client Reviews",
+        "Contact Section",
+        "GitHub Integration"
+      ],
+      "desc": "Built a responsive Flutter web and mobile portfolio with JSON-driven content, Riverpod state management, and adaptive section layouts.",
+      "fullDescription": [
+        "Designed and developed a personal developer portfolio as a cross-platform Flutter app deployable to web, Android, and iOS from a single codebase.",
+        "Structured the UI with scroll-synced section navigation, responsive carousels, and theme-aware components that adapt across mobile, tablet, and desktop breakpoints.",
+        "Loaded portfolio content from JSON assets so projects, experience, skills, and reviews can be updated without code changes.",
+        "Applied Clean Architecture with Riverpod providers, domain use cases, and reusable presentation widgets for maintainable, testable code."
+      ],
+      "previewImage": "assets/projects/flutter_portfolio_preview.jpg",
+      "playStoreUrl": [],
+      "appStoreUrl": [],
+      "githubUrl": "https://github.com/VVK027/flutter_portfolio",
+      "isOpenSource": true
     }
   ],
   "reviews": [

lib/core/provider/app_theme_provider.dart

@@ -1,4 +1,8 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 
-final  themeModeProvider = StateProvider<ThemeMode>((ref) => ThemeMode.light);
+/// Current [ThemeMode] for the app, toggled from the app bar.
+///
+/// Defaults to [ThemeMode.light]. The preference is session-only and is not
+/// persisted to local storage.
+final themeModeProvider = StateProvider<ThemeMode>((ref) => ThemeMode.light);