{"id":50206129,"url":"https://github.com/howardsun-dev/cicd-portfolio","last_synced_at":"2026-05-26T01:08:10.711Z","repository":{"id":318559741,"uuid":"1071749815","full_name":"howardsun-dev/cicd-portfolio","owner":"howardsun-dev","description":"React 19 + TypeScript portfolio deployed to AWS S3/CloudFront with GitHub Actions CI/CD.","archived":false,"fork":false,"pushed_at":"2026-05-22T14:53:56.000Z","size":618,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-22T18:07:17.030Z","etag":null,"topics":["aws-s3","ci-cd","cloudfront","frontend","github-actions","portfolio","react","tanstack-router","typescript","vite"],"latest_commit_sha":null,"homepage":"https://howardsun.me","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/howardsun-dev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"docs/security-headers.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-10-07T19:01:10.000Z","updated_at":"2026-05-22T14:54:01.000Z","dependencies_parsed_at":"2025-12-20T04:04:59.813Z","dependency_job_id":"91cfe54c-f1ce-41d1-939f-828594e1b352","html_url":"https://github.com/howardsun-dev/cicd-portfolio","commit_stats":null,"previous_names":["howardsun-dev/cicd-portfolio"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/howardsun-dev/cicd-portfolio","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/howardsun-dev%2Fcicd-portfolio","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/howardsun-dev%2Fcicd-portfolio/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/howardsun-dev%2Fcicd-portfolio/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/howardsun-dev%2Fcicd-portfolio/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/howardsun-dev","download_url":"https://codeload.github.com/howardsun-dev/cicd-portfolio/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/howardsun-dev%2Fcicd-portfolio/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33499304,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-25T14:31:05.219Z","status":"ssl_error","status_checked_at":"2026-05-25T14:31:02.878Z","response_time":57,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["aws-s3","ci-cd","cloudfront","frontend","github-actions","portfolio","react","tanstack-router","typescript","vite"],"created_at":"2026-05-26T01:08:09.649Z","updated_at":"2026-05-26T01:08:10.696Z","avatar_url":"https://github.com/howardsun-dev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🌐 Howard Sun — Full-Stack Engineer \u0026 Builder\n\nWelcome to my portfolio. I'm a full-stack engineer with backend and infrastructure roots, currently building full-stack, desktop, CI/CD, and developer tooling projects end to end.\n\nLive site: [howardsun.me](https://howardsun.me)\n\n## 🎯 What I'm About\n\nI build practical software from the system layer up: APIs, realtime services, local tooling, desktop wrappers, cloud deployment, and polished frontend experiences. My infrastructure background means I don't just write code — I care about how it runs, ships, and fails.\n\n**Currently focused on:**\n- Building full-stack projects with TypeScript, React, and Node.js\n- Shipping CI/CD-backed projects with automated lint/build/test gates\n- Building desktop and local-first tooling with Electron, CLI workflows, and release pipelines\n- Learning AI/ML engineering — RAG systems, LLM integrations, embeddings, and AI-assisted workflows\n- Contributing to open source\n\n## 🧠 Tech Stack\n\n- **Languages:** TypeScript, JavaScript (ES6), Python, C++\n- **Frontend:** React, Redux Toolkit, Zustand, TanStack Router, React Router, HTML5, CSS3/Sass, Tailwind CSS, Material UI, DaisyUI, Chart.js, webpack, Vite\n- **Backend \u0026 APIs:** Node.js, Express, WebSocket, Socket.IO, REST APIs, JWT Authentication, Cloudinary, Arcjet\n- **Desktop \u0026 Tooling:** Electron, electron-builder, CLI tools, Git, Figma\n- **Databases:** PostgreSQL, MongoDB, Amazon Aurora\n- **Infrastructure \u0026 Cloud:** AWS EC2, AWS S3, AWS Elastic Beanstalk, AWS VPC, CloudFront, ELB/ALB, Docker, GitHub Actions\n- **Testing:** Jest, Playwright, Mocha, Chai, Vitest\n\n## 🚀 Featured Projects\n\n### LANShare\nA tiny TypeScript app for sharing a local folder across a trusted LAN through either a browser control UI or a direct CLI command.\n- **Role:** Solo builder\n- **Tech:** TypeScript, Node.js, Express, Playwright, Vitest, GitHub Actions\n- **Proof:** Local control UI + direct CLI mode, traversal-safe file serving, CI quality gate with lint/tests/build\n- **GitHub:** [howardsun-dev/LANShare](https://github.com/howardsun-dev/LANShare)\n- **Workflow:** [LANShare CI](https://github.com/howardsun-dev/LANShare/actions/workflows/ci.yml)\n\n### LANShare — Electron Desktop App\nA cross-platform Electron wrapper around LANShare that launches the local control server and presents it as a desktop app.\n- **Role:** Desktop app + release pipeline owner\n- **Tech:** Electron, TypeScript, Node.js, Express, electron-builder, GitHub Actions\n- **Proof:** Windows/macOS/Linux release artifacts, Electron-hosted local control UI, tagged release pipeline\n- **GitHub:** [howardsun-dev/LANShare-electron](https://github.com/howardsun-dev/LANShare-electron)\n- **Release:** [v1.0.0](https://github.com/howardsun-dev/LANShare-electron/releases/tag/v1.0.0)\n- **Workflow:** [Release workflow](https://github.com/howardsun-dev/LANShare-electron/actions/workflows/release.yml)\n\n### QuickChat — Real-Time Chat App\nA deployed full-stack realtime chat app with authentication, Socket.IO messaging, Zustand state management, and a polished Tailwind CSS UI.\n- **Role:** Full-stack builder\n- **Tech:** React, Node.js, Express, Socket.IO, MongoDB, Zustand, Tailwind CSS\n- **Live Demo:** [quickchat-v72jh.sevalla.app](https://quickchat-v72jh.sevalla.app/login)\n- **GitHub:** [howardsun-dev/quickchat](https://github.com/howardsun-dev/quickchat)\n\n### Discord Job Scraper Bot\nA Discord bot that turns job search into a programmable feed: slash commands now, scheduled scraping, persistence, filtering, and AI-assisted matching next.\n- **Role:** Solo builder\n- **Tech:** Node.js, TypeScript, discord.js, Puppeteer, PostgreSQL, Docker, AWS\n- **Status:** In Progress — slash-command architecture is in place; scraping, persistence, and filtering are next\n- **GitHub:** [howardsun-dev/discord-job-scraper](https://github.com/howardsun-dev/discord-job-scraper)\n\n### Swell — Open Source Contribution\nOpen-source contribution experience in Swell, an Electron/React API testing tool from Open Source Labs.\n- **Role:** Contributor in existing codebase\n- **Tech:** Electron.js, React, Node.js\n- **Repo:** [open-source-labs/Swell](https://github.com/open-source-labs/Swell)\n- **Commit:** [Co-authored contribution](https://github.com/open-source-labs/Swell/commit/964142802b6a09362bd16c968501d511c3f42858)\n\n### CI/CD Portfolio Site\nThis portfolio is itself a deployable artifact: React 19, TypeScript, Vite, TanStack Router, and AWS deployment through GitHub Actions.\n- **Role:** Frontend + DevOps owner\n- **Tech:** React 19, TypeScript, Vite, TanStack Router, AWS S3, CloudFront, GitHub Actions\n- **GitHub:** [howardsun-dev/cicd-portfolio](https://github.com/howardsun-dev/cicd-portfolio)\n- **Workflow:** [Deploy Portfolio to AWS S3](https://github.com/howardsun-dev/cicd-portfolio/actions/workflows/main.yml)\n\n## 🏗️ Architecture\n\nThis portfolio is a static React application deployed through a GitHub Actions pipeline into AWS-hosted static infrastructure.\n\n▶ **[View the editable Excalidraw architecture diagram](https://excalidraw.com/#json=yfXp3Zq0CcyA_uIKxqfy_,xrJuxUvJL5N82ebCd9zapw)**\n\n**Build path:**\n\n1. Source code lives in GitHub on the `main` branch.\n2. GitHub Actions runs the deployment workflow on pushes to `main`.\n3. The workflow installs dependencies with `npm ci`, runs `npm audit --audit-level=high`, lints the codebase, and builds the app with Vite.\n4. Vite outputs production-ready static assets into `dist/`.\n5. The workflow syncs `dist/` to an AWS S3 bucket configured for static site hosting.\n6. The deploy script also uploads SPA route fallback files so direct navigation to `/project` and `/techstack` works after refresh.\n7. CloudFront sits in front of S3 to provide HTTPS, caching, and faster global delivery. If `CLOUDFRONT_DISTRIBUTION_ID` is configured, the workflow can invalidate the CDN cache after deployment.\n\n**Runtime path:** browser → CloudFront → S3 static assets → React/TanStack Router renders the page client-side.\n\n## 🔑 Key Engineering Features\n\n- Automated CI/CD deployment pipeline with GitHub Actions\n- Production builds deployed to AWS S3 + CloudFront\n- SPA route fallback support for client-side routing\n- Cache-aware deployment strategy for HTML assets\n- Type-safe React 19 + TypeScript architecture\n- Modular routing using TanStack Router\n- Dependency auditing and linting in CI workflows\n\n## 🖼️ Screenshots\n\n### Homepage\n![Homepage screenshot](docs/screenshots/homepage.png)\n\n### Projects section\n![Projects page screenshot](docs/screenshots/projects.png)\n\n### Mobile view\n![Mobile homepage screenshot](docs/screenshots/mobile.png)\n\n## 🔁 CI/CD\n\nThe deploy workflow validates the app before shipping:\n\n1. Install dependencies with `npm ci`\n2. Run `npm audit --audit-level=high`\n3. Run ESLint\n4. Build the React/Vite app\n5. Deploy `dist/` to S3 on pushes to `main`\n6. Upload SPA route fallbacks for direct `/project` and `/techstack` navigation\n7. Optionally invalidate CloudFront if `CLOUDFRONT_DISTRIBUTION_ID` is configured as a repository variable\n\n## 🧑‍💻 Local Development\n\n```bash\nnpm ci\nnpm run dev\nnpm run lint\nnpm run build\nnpm run preview\n```\n\n- `npm run dev` starts the Vite dev server for local iteration.\n- `npm run build` runs the same TypeScript + Vite production build used by CI.\n- `npm run preview` serves the built `dist/` output locally for a production-like smoke test.\n\n## 📬 Connect\n\n- **Website:** [howardsun.me](https://howardsun.me)\n- **LinkedIn:** [linkedin.com/in/howardsun-swe](https://linkedin.com/in/howardsun-swe)\n- **GitHub:** [github.com/howardsun-dev](https://github.com/howardsun-dev)\n- **Resume:** [PDF](https://howardsun.me/resume/Howard_Sun-Resume-2026.pdf) | [DOCX](https://howardsun.me/resume/Howard_Sun-Resume-2026.docx)\n\n## 🌱 What's Next\n\nI'm currently learning AI/ML engineering — building RAG systems, experimenting with LLM integrations, and looking for ways to add useful AI behavior to practical products rather than chasing demos.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhowardsun-dev%2Fcicd-portfolio","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhowardsun-dev%2Fcicd-portfolio","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhowardsun-dev%2Fcicd-portfolio/lists"}