Case 22 Portfolio Jul 2023 – Nov 2026
Portfolio ver. 2
The second version of jodriscoll.com: an Angular 13 single-page portfolio on Cloudflare Pages, with every word of copy in ngx-translate files, an Angular service worker for offline loads, Bootstrap 4, SCSS, Animate on Scroll motion and Karma unit tests.
- Bootstrap
- Sass
- Cloudflare Pages
- Angular
- TypeScript
- Framework
- Angular 13.2
- Host
- Cloudflare Pages
- Deploys
- On every push to master
- Replaced by
- Portfolio ver. 3, November 2026
01
Notes from the build
Copy out of the templates
Every word lived in an ngx-translate en.json file, so text changes never touched a component.
Offline loads
The Angular service worker cached the app shell, so repeat visits opened without the network.
Preview per branch
Cloudflare Pages gave each branch its own URL, which is how motion experiments were reviewed before they reached master.
02
What it's written in
- TypeScript 57%
- SCSS 29%
- HTML 14%
Estimated from the stack, not measured from the source. Measured figures replace this once the repository is counted.
03
The stack 16
App
- Angular 13.2
- TypeScript 4.5
- RxJS 6.5
- ngx-translate 13 all copy in en.json
- Angular service worker 13.2
Interface
- Bootstrap 4.5
- ng-bootstrap 10
- SCSS
- Animate on Scroll 2.3
- ngx-owl-carousel-o 6 project carousels
- Font Awesome 5.14
Quality
- Karma 6.3 with Jasmine
- Protractor 7 end-to-end
- TSLint 6.1 with Codelyzer
Hosting
- Cloudflare Pages Git integration
- Google Analytics ngx-google-analytics
04
How it ships Custom Pipeline Built
Cloudflare Pages built the site straight from GitHub. A push to master shipped production; any other branch got its own preview URL.
-
01 Push
Commits to the GitHub repository started a Cloudflare Pages build.
-
02 Build
ng build --configuration production, run by Cloudflare Pages.
-
03 Preview
Feature branches deployed to their own pages.dev URLs, such as the locomotive-scroll experiments.
-
04 Production
master deployed to jodriscoll.com, a custom domain on the Pages project.