A CV/Portfolio/Blog built in TypeScript using React, React PDF and P5JS. with a Rest / GraphQL backend written in Rust using Contentful for portfolio and blog content.

---

• Dependencies
• Build Service Locally
• Build Portfolio Locally
• Build Portfolio Image
• Build Service Image
• Prod Environment
• Add Contentful API IPs to /etc/hosts
• Deploy
• Redeploy
• Teardown
• // Todo
• // Done
  • Visualisations
• Urls
• Third Parties
• Resources

---

Dependencies

• Node
• NPM
• Rust [Rustup, Rustc, Cargo]
• Docker

Build Service Locally

# Service
cd service

# Once only
rustup default nightly

# Build Service
cargo build [--release]

# Run Service locally
ACCESS_TOKEN=token SPACE_ID=id ENVIRONMENT=env cargo run [--release]

# Test Service
cargo test [--release]

Build Portfolio Locally

# Run in WSL or linux
wsl

# Portfolio
cd portfolio

# Install Dependencies
npm install

# Build portfolio
npm run build

# Run Locally
npm run start # Requires service to be up!

Build Portfolio Image

export DOCKER_HUB_USER_REGISTRY=xyz

# With script
./scripts/build-portfolio.sh $DOCKER_HUB_USER_REGISTRY cujo-portfolio

# OR

# Build with Docker: Dev
docker build -f portfolio/Dockerfile -t $DOCKER_HUB_USER_REGISTRY/cujo-portfolio:latest ./portfolio
# Build with Docker: Prod
docker build -f portfolio/Dockerfile -t $DOCKER_HUB_USER_REGISTRY/cujo-portfolio:latest --build-arg BUILD_MODE=":prod" ./portfolio
# Push image
docker push $DOCKER_HUB_USER_REGISTRY/cujo-portfolio:latest

Build Service Image

export DOCKER_HUB_USER_REGISTRY=xyz

# With script
./scripts/build-service.sh $DOCKER_HUB_USER_REGISTRY cujo-rust

# OR

# Build with Docker
docker build -f service/Dockerfile -t $DOCKER_HUB_USER_REGISTRY/cujo-rust:latest ./service
# Push image
docker push $DOCKER_HUB_USER_REGISTRY/cujo-rust:latest

// Todo

• Convert all pngs and jpgs to Avifs
• Switch all gifs to WebMs
• Add Rust code coverage
• Write front end tests

// Done

• Display a reading list
• Remove Auth0 and redirecting with a Message broker queue subscription (Pubnub)
• Remove Prenderer caching
• Implement server side rendering and incremental static regeneration with NextJS
• Swap NGINX and client side rendering for NextJS
• Find out why all images are loading twice
• Fixed huge react bundle sizes - it was react-icons the whole time
• Swap React class components for React functional components
• Use GraphQL client to frontend
• Add a GraphQL API to backend
• Trigger recache on contentful update
• Get SEO and social media previews to work
• Implement async system design
  • Cujo service now maintains a cache of contentful content
  • Requests from the website now read the cache only
  • Contentful webhooks now call the cujo service on content publish / unpublish
  • We authenticate the webhook POST request agaisnt Auth0
  • Redirect and validate the token so only authenticated clients can trigger a can regenerate the cache
• Generate CV PDF from contentful content
• Add new section to showcase and allow users to download an up to date copy of my CV PDF
• Write blog
• Add competency levels to skills and visualise
• Move CV fully to Contentful and have backend collect CV data
• Update color scheme to be less dark
• Replace WordPress with Contentful to reduce need to host own content and infrastructure
• Responsive and styled Nav
• Restyle experience and education so they resemble a timeline
• Add auto redeployment of new images pushed for prod
• Create Circle CI build pipeline
• Optimize images (sizes, file encodings - https://developers.google.com/speed/pagespeed/insights/)
• Add authentication to wordpress rest api
• Write backend tests
• Get backend service working in prod
• Document backend build and deployment
• Put Blog data access and collation in backend service
• Swap backstretch with a 2d/3d WEBGL canvas visualisation?
• Swap out static file with Rust backend service?
• Formalise colour palette
• Setup SSL correctly.. (ssl-companion is running, it will assign certificates when the window opens again)
• Fix predator/prey image asset
• Finish contact page
• Add site footer
• Proof read profile
• Add asset citations (now using my own images or free stock images only)
• Produce production build for deployment
• Move sharing bar to bottom on mobile devices

Visualisations

• 3D Box wave
• Waves
• Hexagons
• Phylotaxis
• 4D tesseract projection?
• Conway's game of life

Urls

• https://danclarke.dev - Portfolio
• https://danclarke.dev/blog - Blog
• https://danclarke.dev/cv - Generate, Show and Download Resume
• https://api.danclarke.dev/graphql - GraphQL API
• https://api.danclarke.dev/graphiql - GraphQL Playground

Third Parties

• https://www.contentful.com/ - Contentful
• https://www.pubnub.com/ - Pubnub

Resources

• Coding Train - P5JS https://thecodingtrain.com/
• Lets Get Rusty - Rust https://www.youtube.com/channel/UCSp-OaMpsO8K0KkOqyBl7_w
• Rust Rest API - Rust https://cloudmaker.dev/how-to-create-a-rest-api-in-rust/
• Fix Reqwest in Linux - Rust https://stackoverflow.com/questions/52238397/why-does-reqwest-require-an-openssl-installation#52238675
• Hosting websites using Nginx - Nginx https://blog.harveydelaney.com/hosting-websites-using-docker-nginx/
• Add Sudoers - Linux https://linuxize.com/post/how-to-add-user-to-sudoers-in-ubuntu/
• Auto image redeploy with Watchtower - Docker https://alexgallacher.com/setting-up-watchtower-to-update-docker-containers/
• CircleCI Path filtering - CircleCI https://circleci.com/docs/2.0/using-dynamic-configuration#execute-specific-workflows-or-steps-based-on-which-files-are-modified
• React scroll spy - React https://makotot.github.io/react-scrollspy/
• React icons - React https://react-icons.github.io/react-icons/icons?name=io5
• DevIcons - React https://devicon.dev/
• Contentful - CMS https://www.contentful.com/
• Rich Text Renderer - React https://www.npmjs.com/package/@contentful/rich-text-react-renderer
• Import SCSS variables in Typescript - SCSS https://medium.com/@christian.tonye_16869/scss-variables-in-react-typescript-components-de19d7f96245
• Circular Progress Bar - React https://github.com/kevinsqi/react-circular-progressbar
• Generating PDF with React - React PDF https://react-pdf.org/
  • Rendering a PDF in Canvas - React PDF https://mozilla.github.io/pdf.js/examples/
  • How to actually render to a Canvas - PDFJS https://stackoverflow.com/questions/59867174/why-getcontext-function-cannot-be-called-on-react-jsx-canvas-object
  • Fixing build with PDFJS - PDFJS mozilla/pdf.js#13200
  • Material Icons png - https://github.com/material-icons/material-icons-png
• Auth0 Client Credentials Flow - Rust https://auth0.com/docs/get-started/authentication-and-authorization-flow/call-your-api-using-the-client-credentials-flow
• Securing Actix Service with Auth0 - Rust https://auth0.com/blog/build-an-api-in-rust-with-jwt-authentication-using-actix-web/#Securing-the-API
• Generate Prerendered pages with Prerender - https://github.com/prerender/prerender-nginx
• Triggering a reache with Prerender - https://docs.prerender.io/v1/docs/en/6-api
• Ubuntu does not cache DNS records - https://www.cloudns.net/blog/dns-cache-explained/
• Async GraphQL Crate - Rust https://github.com/async-graphql/async-graphql
  • Async GraphQL tutorial - Rust https://romankudryashov.com/blog/2020/12/graphql-rust/
  • Async GraphQL book - Rust https://async-graphql.github.io/async-graphql/en/introduction.html
• GraphQL Client load GQL files - GraphQL apollographql/graphql-tag#42
  • Craco Plugin - GraphQL https://www.npmjs.com/package/craco-graphql-loader
• GraphQL Request - GraphQL https://github.com/prisma-labs/graphql-request
• GZipping bundles to load page faster - GZip https://stackoverflow.com/questions/55704772/how-to-compress-build-with-without-ejecting-create-react-app-also-include-compr
• React Icons Tree shaking doesn't work - React react-icons/react-icons#289
  • Styled Icons to the rescue https://github.com/styled-icons/styled-icons
• Carousel https://www.npmjs.com/package/tiny-slider-react
• Compiling canvas from source for M1 mac - https://github.com/Automattic/node-canvas#compiling
  • for alpine - Automattic/node-canvas#866
• Nextjs docker file - https://github.com/vercel/next.js/tree/canary/examples/with-docker
• Fix react-pdf issue in nextjs prod build - https://stackoverflow.com/questions/72081585/created-pdf-doesnt-display-in-production-build-and-dev-build-page-but-locally
• Pubnub rust crate - https://docs.rs/pubnub-hyper/latest/pubnub_hyper/