TimMari2026

Website for Mari and Tim.

• Built responsive Angular travel blog displaying countries/hikes/restaurants from local JSON
• Developed random picker, image galleries with modals/carousels, and custom mobile-first UI with CSS animations
• Managed full dev lifecycle: Git version control + automated GitHub Pages deployment

Process:

• Create Github Repository. Clone to PC.
• Install Prerequisites
  • node --version
  • npm --version
  • git --version
• Install Angular CLI: npm install -g @angular/cli
• Create new Angular Project. Adjust directory.
• Deploy base project.
  • Configure angular.json for Github Pages.
  • Install angular-cli-ghpages: npm install angular-cli-ghpages --save-dev
  • Update package.json.
  • Create Deployment Script (deploy.ps1).
    • Run .\deploy.ps1
    • Or manually:
      • npx ng build --configuration=production --base-href="/TimMari2026/"
      • npx angular-cli-ghpages --dir=docs --no-silent
  • Github pages configure:
    • Source: Deploy from a branch
    • Branch: gh-pages
    • Folder: / (root)
    • Save
• Update css for desktop and mobile sizes.
• Code Header section.
• Code Footer section.
• Code Intro section.
• Create models for highlight, restaurant, and hike.
• Code Recent Highlights section.
  • Create cards to display highlight data.
  • Create clickable modal to display images and highlight details.
• Code Timeline section.
  • Create cards to display highlight data for timeline.
  • Create clickable modal to display images and highlight details.
  • Create Month/Year scroller to easily navigate through timeline.
• Code Restaurants section.
  • Create cards to display top 4 restaurants data.
  • Create random generator component to select randomly from restaurant json data and display list of restaurant data.
• Code Hikes section.
  • Create card to display top hike data.
  • Create cards to display hiking stats data.
  • Use random generator component to select randomly from hike json data and display list of hike data.