{"id":30570504,"url":"https://github.com/bfranks56/bryant-devhub","last_synced_at":"2026-04-15T16:03:27.944Z","repository":{"id":309552588,"uuid":"1036127911","full_name":"Bfranks56/bryant-devhub","owner":"Bfranks56","description":"Integrated Nx workspace for my personal website, portfolio projects, and experiments.","archived":false,"fork":false,"pushed_at":"2025-08-12T13:23:03.000Z","size":239,"stargazers_count":0,"open_issues_count":2,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-12T15:25:43.468Z","etag":null,"topics":["angular","fullstack","nx","portfolio","tailwind"],"latest_commit_sha":null,"homepage":"","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/Bfranks56.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-08-11T15:43:12.000Z","updated_at":"2025-08-11T21:31:43.000Z","dependencies_parsed_at":"2025-08-12T15:27:24.108Z","dependency_job_id":"f3a8c4d6-3b87-4d25-a47d-6c0e13549a1d","html_url":"https://github.com/Bfranks56/bryant-devhub","commit_stats":null,"previous_names":["bfranks56/bryant-devhub"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/Bfranks56/bryant-devhub","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bfranks56%2Fbryant-devhub","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bfranks56%2Fbryant-devhub/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bfranks56%2Fbryant-devhub/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bfranks56%2Fbryant-devhub/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Bfranks56","download_url":"https://codeload.github.com/Bfranks56/bryant-devhub/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bfranks56%2Fbryant-devhub/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":272547912,"owners_count":24953460,"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-08-28T02:00:10.768Z","response_time":74,"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":["angular","fullstack","nx","portfolio","tailwind"],"created_at":"2025-08-28T20:04:31.963Z","updated_at":"2026-04-15T16:03:27.938Z","avatar_url":"https://github.com/Bfranks56.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# BryantDevhub\n\n\u003ca alt=\"Nx logo\" href=\"https://nx.dev\" target=\"_blank\" rel=\"noreferrer\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/nrwl/nx/master/images/nx-logo.png\" width=\"45\"\u003e\u003c/a\u003e\n\nWelcome to my development workspace! This monorepo houses my various projects and experiments.\n\n## 📂 Projects in This Workspace\n\n| Project                  | Type              | Description                                                               |\n| ------------------------ | ----------------- | ------------------------------------------------------------------------- |\n| **personal-site**        | Angular (SSG)     | My personal portfolio site showcasing projects, skills, and contact info. |\n| _(upcoming)_ sneaker-app | Angular + Express | Sneaker tracking app with live pricing and sales data.                    |\n\n## 🚀 First Project: Personal Website\n\nMy first project in this workspace is building my personal website. This site will serve as a showcase of my development skills, a portfolio of my work, and a platform to share my thoughts on technology and development.\n\nThe personal website is built using modern web technologies and is located in the `apps/personal-site` directory.\n\n### 🏗️ **Architecture Overview**\n\nThe site features a **modern content management architecture** that separates content from presentation:\n\n```typescript\n// Type-safe content structure\nexport interface PageContent {\n  title: string;\n  subtitle?: string;\n  description: string;\n  content: ContentSection[];\n}\n\n// Union type for flexible content sections\nexport type ContentSection =\n  | ParagraphSection\n  | ListSection\n  | ProjectSection\n  | CodeSection\n  | QuoteSection;\n```\n\n**Key Benefits:**\n\n- 🎯 **Content Updates**: Non-technical users can update content without touching code\n- 🛡️ **Type Safety**: Full TypeScript coverage prevents runtime errors\n- 🔄 **Scalability**: Easy to add new content types and pages\n- 🧪 **Testability**: Comprehensive test coverage with mock data\n- ⚡ **Performance**: Single component with lazy loading and OnPush detection\n\n### ✅ **Current Progress**\n\n#### **Modern Architecture \u0026 Content Management** ⭐\n\n- ✅ **Content Management System**: Implemented type-safe, data-driven content architecture\n- ✅ **Universal Component**: Consolidated multiple page components into a single `DefaultPageComponent`\n- ✅ **Type Safety**: Comprehensive TypeScript interfaces with union types for content sections\n- ✅ **Modern Angular Patterns**: Migrated to Angular 20 with new `@if/@for` control flow syntax\n- ✅ **Route Data Injection**: Content delivered through route data instead of hardcoded templates\n\n#### **Component Architecture \u0026 Performance**\n\n- ✅ **Standalone Components**: Using modern Angular architecture without NgModules\n- ✅ **Lazy Loading**: All routes lazy-loaded for optimal performance\n- ✅ **Change Detection**: OnPush strategy with inject() dependency injection\n- ✅ **Error Handling**: Comprehensive fallback systems and error boundaries\n- ✅ **Template Consolidation**: Single template handles all content types (paragraphs, lists, projects)\n\n#### **Content Structure**\n\n- ✅ **Structured Content**: Type-safe content files for Home, About, Projects, and Contact\n- ✅ **Flexible Sections**: Support for paragraphs, lists, code blocks, quotes, and project showcases\n- ✅ **Dynamic Rendering**: Content types render appropriate UI components automatically\n- ✅ **Maintainable Updates**: Content changes require no code modifications\n\n#### **Styling \u0026 UI** ⭐\n\n- ✅ **Tailwind CSS**: Fully integrated with custom configuration and responsive design\n- ✅ **Angular Material Integration**: Seamlessly integrated with Tailwind CSS for form components\n- ✅ **Organized SCSS Architecture**: Modular stylesheet organization with separate files for variables, typography, and components\n- ✅ **Inter Font System**: Consistent Inter font family across all components including Material elements\n- ✅ **Typography**: Enhanced with @tailwindcss/typography plugin for rich content\n- ✅ **Tentative P3 Color Palette**: Professional blue-based color system with accessibility-compliant contrast ratios\n- ✅ **Hero Section**: Modern full-screen hero with halftone SVG background and compelling CTAs\n- ✅ **SCSS Mixins Architecture**: Clean, reusable mixins for consistent styling patterns\n- ✅ **Custom Tailwind Variants**: prose-p3 and prose-p3-invert typography variants for light/dark content\n- ✅ **Advanced Layouts**: Alternating section backgrounds, modern grid systems, and responsive design\n- ✅ **Professional Contact Section**: Integrated contact information with icons and styled CTAs\n- ✅ **Error UI**: User-friendly error banners and fallback content\n\n#### **Development Setup \u0026 Testing**\n\n- ✅ **Comprehensive Testing**: 33 unit tests across 6 test suites covering all component functionality\n- ✅ **Jest Integration**: Modern testing framework with proper TypeScript support\n- ✅ **Mock Strategies**: Proper ActivatedRoute mocking and error scenario testing\n- ✅ **Type-Safe Tests**: Full TypeScript coverage in test suites\n- ✅ **Edge Case Coverage**: Testing for missing data, optional properties, and error states\n- ✅ **Development Tools**: Organized SCSS structure for maintainable styling\n\n#### **Technical Features** ⭐\n\n- ✅ **Modern Angular**: Using Angular 20 with latest control flow syntax and signals\n- ✅ **Angular Material**: Integrated with custom theming and Inter font consistency\n- ✅ **Modular SCSS**: Organized stylesheet architecture with separate concerns\n- ✅ **SSR Ready**: Angular Universal configured for server-side rendering\n- ✅ **Accessibility**: ARIA labels and semantic HTML structure\n- ✅ **Performance**: OnPush change detection and optimized bundle\n- ✅ **Error Resilience**: Graceful degradation with meaningful error messages\n\n### 🎨 **Styling Architecture**\n\nThe project uses a **comprehensive design system** with modular SCSS organization and modern UI patterns:\n\n```text\nsrc/styles/\n├── _variables.scss        # Tentative P3 color palette, fonts, spacing constants\n├── _base.scss            # Global resets, html/body base styles\n├── _mixins.scss          # Reusable SCSS mixins for consistent patterns\n├── _typography.scss      # Inter font system and Material font overrides\n├── _material-overrides.scss # Angular Material component customizations\n└── _components.scss      # Tailwind component utilities and custom classes\n```\n\n**🎨 Design System Features:**\n\n- 🎯 **Tentative P3 Color Palette**: Professional blue-based color system (#1269cc primary, #6d9ac7 secondary, #51eefc accent)\n- 🔤 **Inter Font System**: Complete typography hierarchy with weights 300-900 including italic variants\n- 📐 **SCSS Mixins Architecture**: Reusable patterns for forms, buttons, and typography\n- 🎨 **Custom Tailwind Variants**: prose-p3 and prose-p3-invert for light/dark content styling\n- 🖼️ **Hero Section**: Modern full-screen hero with halftone SVG background and gradient overlays\n- 📱 **Responsive Grid Systems**: Advanced layouts with alternating section backgrounds\n- 🎪 **Professional Contact UI**: Icon-based contact cards with hover states and transitions\n\n**🔧 Key Implementation Details:**\n\n- 🎨 **Seamless Integration**: Angular Material + Tailwind CSS working together harmoniously\n- 🔤 **Consistent Typography**: Inter font enforced across all components including Material elements\n- 🎯 **Accessibility Compliant**: Color contrast ratios meeting WCAG AA standards\n- 📁 **Organized Structure**: Clear separation of concerns for maintainable code\n- 🔧 **Reusable Variables**: Shared Tentative P3 color palette and spacing constants\n- ⚡ **Performance Optimized**: Efficient CSS output with minimal duplication\n\n### 🎬 **Hero Section Features**\n\nThe landing page features a **modern, professional hero section** that immediately establishes credibility:\n\n```typescript\n// Hero section includes:\n- Full-screen halftone SVG background with Tentative P3 primary blue (#1269cc)\n- Large typography hierarchy (text-7xl to text-8xl) with Inter Black 900 Italic\n- Professional statistics display (5+ years experience, 20+ projects, 100% satisfaction)\n- Compelling call-to-action buttons with hover states and transitions\n- Responsive design scaling from mobile to desktop\n- Gradient overlay for optimal text readability\n```\n\n**🎨 Visual Design Elements:**\n\n- 🎯 **Professional Halftone Background**: SVG-based scalable graphics with brand color integration\n- 📐 **Typography Hierarchy**: Large, bold headings with Inter font weight variations\n- 🎪 **Interactive CTAs**: Primary and secondary buttons with smooth hover transitions\n- 📊 **Statistics Display**: Professional achievement metrics in responsive grid layout\n- 🌊 **Gradient Overlays**: Subtle background treatments for optimal text contrast\n\n### 🚧 **Next Steps**\n\n- [ ] Implement contact form with Angular Material components and validation\n- [ ] Add more real project showcases and case studies\n- [ ] Add SEO meta tags and structured data\n- [ ] Implement dark/light theme toggle with color variants\n- [ ] Create CI/CD pipeline for automated deployments\n- [ ] Add progressive web app (PWA) features\n- [ ] Implement advanced animations and micro-interactions\n- [ ] Add blog functionality with markdown support\n\n### 🏆 **Key Achievements**\n\n- **Design System**: Implemented comprehensive Tentative P3 color palette with accessibility compliance\n- **SCSS Architecture Evolution**: Advanced mixins system with organized, maintainable stylesheet structure\n- **Responsive Excellence**: Advanced grid layouts with alternating section backgrounds and mobile-first design\n- **Content Enhancement**: Professional project showcases with updated copy and real contact information\n- **90% Code Reduction**: Eliminated individual page components in favor of data-driven architecture\n- **100% Type Safety**: Comprehensive TypeScript coverage with strict mode compliance\n- **Modern Angular**: Cutting-edge Angular 20 patterns with new control flow syntax and signals\n- **Enterprise-Ready**: Scalable content management system ready for CMS integration\n- **Material Integration**: Seamless Angular Material + Tailwind CSS integration with custom theming\n- **Comprehensive Testing**: Full test coverage with 33 test cases and edge case handling\n- **Developer Experience**: Exceptional maintainability and ease of content updates\n\n### 📊 **Technical Summary**\n\n```bash\n# Architecture \u0026 Framework\n- Modern Angular 20 with signals and new control flow syntax\n- Migrated from component-per-page to unified content system\n- Added comprehensive TypeScript interfaces with union types\n- Created 33 unit tests across 6 test suites with 100% coverage of critical paths\n\n# Design System \u0026 Styling\n- Professional Tentative P3 color palette (#1269cc, #6d9ac7, #51eefc) with WCAG AA compliance\n- Complete Inter font system (300-900 weights) with custom prose-p3 Tailwind variants\n- Advanced SCSS mixins architecture for reusable styling patterns\n- Modern hero section with halftone SVG background and gradient overlays\n- Responsive grid systems with alternating section backgrounds\n- Angular Material + Tailwind CSS seamless integration\n\n# User Experience \u0026 Content\n- Full-screen hero section with compelling CTAs and professional stats display\n- Enhanced project showcases with updated descriptions and technology stacks\n- Professional contact section with icon-based cards and hover interactions\n- Mobile-first responsive design with touch-friendly interactions\n- Real contact information and social links integration\n\n# Performance \u0026 Technical Excellence\n- Lazy loading for all routes with OnPush change detection strategy\n- SVG asset optimization and proper build configuration\n- Bundle optimization with code splitting and error boundaries\n- Accessibility-compliant color contrast and semantic HTML structure\n- Modular SCSS organization for scalable styling maintenance\n\n# Developer Experience\n- Type-safe content management system with comprehensive interfaces\n- Jest test suite with mock strategies and edge case coverage\n- Modern Angular patterns and best practices implementation\n- Clean, maintainable architecture ready for CMS integration\n- Organized SCSS structure with clear separation of concerns\n```\n\n✨ This [Nx workspace](https://nx.dev) provides the foundation for scalable development ✨.\n\n[Learn more about this workspace setup and its capabilities](https://nx.dev/getting-started/tutorials/angular-monorepo-tutorial?utm_source=nx_project\u0026utm_medium=readme\u0026utm_campaign=nx_projects) or run `npx nx graph` to visually explore what was created. Now, let's get you up to speed!\n\n## Run tasks\n\n### **Quick Start (Recommended)**\n\nTo start the personal website development server:\n\n```sh\nnpm run start\n```\n\nTo create a production build:\n\n```sh\nnpm run build\n```\n\nTo run tests:\n\n```sh\nnpm run test\n```\n\nTo run linting:\n\n```sh\nnpm run lint\n```\n\n### **Direct Nx Commands**\n\nYou can also use Nx commands directly:\n\n```sh\nnpx nx serve personal-site\n```\n\n```sh\nnpx nx build personal-site\n```\n\nTo see all available targets for the personal website project:\n\n```sh\nnpx nx show project personal-site\n```\n\nThese targets are either [inferred automatically](https://nx.dev/concepts/inferred-tasks?utm_source=nx_project\u0026utm_medium=readme\u0026utm_campaign=nx_projects) or defined in the `project.json` or `package.json` files.\n\n[More about running tasks in the docs \u0026raquo;](https://nx.dev/features/run-tasks?utm_source=nx_project\u0026utm_medium=readme\u0026utm_campaign=nx_projects)\n\n## Add new projects\n\nWhile you could add new projects to your workspace manually, you might want to leverage [Nx plugins](https://nx.dev/concepts/nx-plugins?utm_source=nx_project\u0026utm_medium=readme\u0026utm_campaign=nx_projects) and their [code generation](https://nx.dev/features/generate-code?utm_source=nx_project\u0026utm_medium=readme\u0026utm_campaign=nx_projects) feature.\n\nUse the plugin's generator to create new projects.\n\nTo generate a new application, use:\n\n```sh\nnpx nx g @nx/angular:app demo\n```\n\nTo generate a new library, use:\n\n```sh\nnpx nx g @nx/angular:lib mylib\n```\n\nYou can use `npx nx list` to get a list of installed plugins. Then, run `npx nx list \u003cplugin-name\u003e` to learn about more specific capabilities of a particular plugin. Alternatively, [install Nx Console](https://nx.dev/getting-started/editor-setup?utm_source=nx_project\u0026utm_medium=readme\u0026utm_campaign=nx_projects) to browse plugins and generators in your IDE.\n\n[Learn more about Nx plugins \u0026raquo;](https://nx.dev/concepts/nx-plugins?utm_source=nx_project\u0026utm_medium=readme\u0026utm_campaign=nx_projects) | [Browse the plugin registry \u0026raquo;](https://nx.dev/plugin-registry?utm_source=nx_project\u0026utm_medium=readme\u0026utm_campaign=nx_projects)\n\n## Install Nx Console\n\nNx Console is an editor extension that enriches your developer experience. It lets you run tasks, generate code, and improves code autocompletion in your IDE. It is available for VSCode and IntelliJ.\n\n[Install Nx Console \u0026raquo;](https://nx.dev/getting-started/editor-setup?utm_source=nx_project\u0026utm_medium=readme\u0026utm_campaign=nx_projects)\n\n## Useful links\n\nLearn more:\n\n- [Learn more about this workspace setup](https://nx.dev/getting-started/tutorials/angular-monorepo-tutorial?utm_source=nx_project\u0026utm_medium=readme\u0026utm_campaign=nx_projects)\n- [Learn about Nx on CI](https://nx.dev/ci/intro/ci-with-nx?utm_source=nx_project\u0026utm_medium=readme\u0026utm_campaign=nx_projects)\n- [Releasing Packages with Nx release](https://nx.dev/features/manage-releases?utm_source=nx_project\u0026utm_medium=readme\u0026utm_campaign=nx_projects)\n- [What are Nx plugins?](https://nx.dev/concepts/nx-plugins?utm_source=nx_project\u0026utm_medium=readme\u0026utm_campaign=nx_projects)\n\nAnd join the Nx community:\n\n- [Discord](https://go.nx.dev/community)\n- [Follow us on X](https://twitter.com/nxdevtools) or [LinkedIn](https://www.linkedin.com/company/nrwl)\n- [Our Youtube channel](https://www.youtube.com/@nxdevtools)\n- [Our blog](https://nx.dev/blog?utm_source=nx_project\u0026utm_medium=readme\u0026utm_campaign=nx_projects)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbfranks56%2Fbryant-devhub","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbfranks56%2Fbryant-devhub","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbfranks56%2Fbryant-devhub/lists"}