{"id":27224764,"url":"https://github.com/qianqianq/angular-portfolio","last_synced_at":"2026-04-06T02:33:09.634Z","repository":{"id":285907366,"uuid":"956738325","full_name":"QianqianQ/angular-portfolio","owner":"QianqianQ","description":"A portfolio website built with Angular","archived":false,"fork":false,"pushed_at":"2025-06-16T10:28:49.000Z","size":267,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-08-23T06:33:52.607Z","etag":null,"topics":["angular","bootstrap","portfolio","sass","typescript"],"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/QianqianQ.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-03-28T19:18:22.000Z","updated_at":"2025-06-16T10:28:52.000Z","dependencies_parsed_at":"2025-04-23T21:24:21.434Z","dependency_job_id":"76e19c10-6893-44fd-988c-a43e40739b8d","html_url":"https://github.com/QianqianQ/angular-portfolio","commit_stats":null,"previous_names":["qianqianq/angular-portfolio"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/QianqianQ/angular-portfolio","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QianqianQ%2Fangular-portfolio","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QianqianQ%2Fangular-portfolio/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QianqianQ%2Fangular-portfolio/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QianqianQ%2Fangular-portfolio/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/QianqianQ","download_url":"https://codeload.github.com/QianqianQ/angular-portfolio/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QianqianQ%2Fangular-portfolio/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271745677,"owners_count":24813521,"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-23T02:00:09.327Z","response_time":69,"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","bootstrap","portfolio","sass","typescript"],"created_at":"2025-04-10T10:09:54.717Z","updated_at":"2025-12-30T19:41:40.693Z","avatar_url":"https://github.com/QianqianQ.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular Portfolio\n\nA modern, responsive personal portfolio application built with Angular 19, featuring dynamic content management through JSON configuration and a clean, professional design with dark/light theme support.\n\n## 🚀 Features\n\n- **Modern Angular Architecture**: Built with Angular 19 using standalone components and latest best practices\n- **Responsive Design**: Mobile-first approach with Bootstrap 5 integration\n- **Dynamic Content**: Portfolio data driven by JSON configuration for easy updates\n- **Theme Support**: Dark/light theme toggle with system preference detection\n- **Professional Sections**: About, Skills, Experience, Education, Certificates, and Projects\n- **Performance Optimized**: Lazy loading, optimized builds, and efficient asset management\n- **Cloud Deployment**: Vercel integration with automated CI/CD pipeline\n- **Type Safety**: Full TypeScript implementation with strict type checking\n\n## 🛠️ Tech Stack\n\n### Frontend\n- **Angular 19** - Modern web framework with standalone components\n- **TypeScript 5.6** - Type-safe JavaScript development\n- **SCSS** - Enhanced CSS with variables and mixins\n- **Bootstrap 5** - Responsive UI framework\n- **RxJS** - Reactive programming for state management\n\n### Development \u0026 Deployment\n- **Angular CLI** - Development tooling and build system\n- **Vercel** - Cloud platform for deployment\n- **GitHub Actions** - CI/CD automation\n- **Font Awesome \u0026 Devicons** - Icon libraries\n\n## 📁 Project Structure\n\n```\nangular-portfolio/\n├── src/\n│   ├── app/\n│   │   ├── components/         # Organized component structure\n│   │   │   ├── layout/         # Layout components\n│   │   │   │   ├── header/     # Navigation header\n│   │   │   │   └── home/       # Main landing page\n│   │   │   ├── portfolio/      # Portfolio-specific components\n│   │   │   │   ├── about/      # About section\n│   │   │   │   ├── certificates/ # Certificates display\n│   │   │   │   ├── contact/    # Contact information\n│   │   │   │   ├── education/  # Education timeline\n│   │   │   │   ├── experience/ # Work experience\n│   │   │   │   ├── projects/   # Projects showcase\n│   │   │   │   └── skills/     # Skills grid\n│   │   │   └── ui/             # Reusable UI components\n│   │   │       ├── loading-spinner/ # Loading component\n│   │   │       └── theme-toggle/     # Theme switcher\n│   │   ├── models/             # TypeScript interfaces\n│   │   │   ├── certificate.model.ts\n│   │   │   ├── contactInfo.model.ts\n│   │   │   ├── education.model.ts\n│   │   │   ├── experience.model.ts\n│   │   │   ├── project.model.ts\n│   │   │   ├── skill.model.ts\n│   │   │   └── index.ts        # Model exports\n│   │   ├── services/           # Angular services\n│   │   │   ├── data.service.ts # Portfolio data management\n│   │   │   ├── error-handler.service.ts # Error handling\n│   │   │   ├── seo.service.ts  # SEO optimization\n│   │   │   └── theme.service.ts # Theme management\n│   │   ├── app.component.*     # Root component\n│   │   ├── app.config.ts       # App configuration\n│   │   ├── app.module.ts       # App module\n│   │   └── app.routes.ts       # Routing configuration\n│   ├── environments/           # Environment configurations\n│   └── styles/                 # Global styles and themes\n├── public/\n│   ├── data/                   # Portfolio data files\n│   │   ├── data.json          # Main portfolio data\n│   │   ├── data.sample.json   # Sample data template\n│   │   └── *.ts               # TypeScript data files\n│   └── favicon.ico            # Site favicon\n├── api/                        # Vercel serverless functions\n│   └── fetch-portfolio.js     # Portfolio data API\n├── script/                     # Deployment utilities\n│   └── uploadFile.js          # Vercel blob upload\n├── .github/workflows/          # CI/CD pipelines\n│   └── preview.yml            # Preview deployment\n├── .vscode/                    # VS Code settings\n├── angular.json               # Angular CLI configuration\n├── package.json               # Dependencies and scripts\n└── tsconfig.json              # TypeScript configuration\n```\n\n## 🏗️ Architecture\n\n### Component Architecture\n- **Standalone Components**: Modern Angular approach without NgModules\n- **Service-Based State**: Theme and data management through Angular services\n- **Reactive Programming**: RxJS observables for theme state management\n- **Type-Safe Models**: Comprehensive TypeScript interfaces for all data structures\n\n### Data Management\n- **JSON-Driven Content**: Portfolio data stored in configurable JSON files\n- **Environment-Based Configuration**: Different data sources for development/production\n- **Serverless API**: Vercel functions for dynamic data fetching\n- **Local Development Support**: Static JSON files for offline development\n\n## 🚀 Quick Start\n\n### Prerequisites\n- Node.js 18+ and npm\n- Angular CLI 19+\n- Git\n\n### Local Development\n\n1. **Clone the repository**\n   ```bash\n   git clone https://github.com/QianqianQ/angular-portfolio.git\n   cd angular-portfolio\n   ```\n\n2. **Install dependencies**\n   ```bash\n   npm install\n   ```\n\n3. **Configure portfolio data**\n   ```bash\n   # Copy sample data file\n   cp public/data/data.sample.json public/data/data.json\n\n   # Edit the data file with your information\n   # Update sections: about, experience, education, skills, certificates, projects\n   ```\n\n4. **Start development server**\n   ```bash\n   npm start\n   # or\n   ng serve\n   ```\n\n5. **Open in browser**\n   ```\n   http://localhost:4200\n   ```\n\n### Available Scripts\n\n```bash\nnpm start          # Start development server\nnpm run build      # Build for production\nnpm run watch      # Build with file watching\nnpm test           # Run unit tests\nnpm run lint       # Run linting (if configured)\n```\n\n## 📊 Data Configuration\n\n### Portfolio Data Structure\n\nThe portfolio content is managed through JSON files in `public/data/`:\n\n```json\n{\n  \"about\": {\n    \"FULL_NAME\": \"Your Name\",\n    \"ABOUT_ME\": \"Your professional summary\"\n  },\n  \"contactInfo\": [\n    {\n      \"type\": \"email\",\n      \"icon\": \"fas fa-envelope\",\n      \"label\": \"Email\",\n      \"value\": \"your.email@example.com\",\n      \"link\": \"mailto:your.email@example.com\"\n    }\n  ],\n  \"experience\": [...],\n  \"education\": [...],\n  \"skills\": [...],\n  \"certificates\": [...],\n  \"projects\": [...]\n}\n```\n\n### Customization Guide\n\n1. **Personal Information**: Update `about` section with your details\n2. **Contact Details**: Modify `contactInfo` array with your social links\n3. **Professional Experience**: Add your work history in `experience`\n4. **Education**: Include your academic background\n5. **Skills**: List your technical skills with appropriate icons\n6. **Certificates**: Showcase your certifications with images and links\n7. **Projects**: Display your portfolio projects\n\n## 🌐 Deployment\n\n### Vercel Deployment\n\n1. **Prepare data file**\n   ```bash\n   # Upload data to Vercel Blob Storage\n   node script/uploadFile.js data/data.json\n   ```\n\n2. **Configure environment variables**\n   - `PORTFOLIO_JSON_URL`: URL of uploaded data.json file\n   - `BLOB_READ_WRITE_TOKEN`: Vercel blob storage token\n\n3. **Deploy to Vercel**\n   ```bash\n   # Preview deployment\n   vercel\n\n   # Production deployment\n   vercel --prod\n   ```\n\n### GitHub Actions CI/CD\n\nThe project includes automated deployment workflows:\n\n- **Preview Deployment**: Triggers on pushes to master branch\n- **Environment Management**: Handles Vercel environment variables\n- **Build Optimization**: Automated production builds\n\nRequired GitHub Secrets:\n- `VERCEL_ORG_ID`\n- `VERCEL_PROJECT_ID`\n- `VERCEL_TOKEN`\n\n## 🎨 Theming\n\n### Theme System\n- **Automatic Detection**: Respects system color scheme preference\n- **Manual Toggle**: User can switch between light/dark themes\n- **Persistent Storage**: Theme preference saved in localStorage\n- **Smooth Transitions**: CSS transitions for theme switching\n\n### Customizing Themes\nModify theme variables in `src/styles/`:\n- `_variables.scss`: Color definitions and spacing\n- `_themes.scss`: Light and dark theme implementations\n- `styles.scss`: Global styles and theme application\n\n## 📈 Performance\n\n### Optimization Features\n- **Lazy Loading**: Route-based code splitting\n- **Tree Shaking**: Unused code elimination\n- **Asset Optimization**: Image and font optimization\n- **Bundle Analysis**: Webpack bundle analyzer integration\n- **Data Caching**: Service-level caching with retry logic\n- **Error Handling**: Graceful fallbacks and user feedback\n\n### Performance Monitoring\n- **Build Budgets**: Configured size limits for bundles\n- **Lighthouse Integration**: Performance auditing\n- **Core Web Vitals**: Monitoring key performance metrics\n\n## 🔧 Development\n\n### Code Standards\n- **TypeScript Strict Mode**: Enhanced type safety\n- **ESLint Configuration**: Code quality enforcement\n- **Prettier Integration**: Consistent code formatting\n- **Angular Style Guide**: Following official conventions\n\n### 6. Updated File Structure\nAll components moved to organized structure:\n- `src/app/components/ui/` - Reusable UI components\n- `src/app/components/portfolio/` - Portfolio-specific sections\n- `src/app/components/layout/` - Layout and navigation\n- `src/app/services/` - Business logic services\n- `src/app/models/` - TypeScript interfaces\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqianqianq%2Fangular-portfolio","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fqianqianq%2Fangular-portfolio","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqianqianq%2Fangular-portfolio/lists"}