feature/web2 (#1)

Co-authored-by: Tara Wilson <tara@taraformed.com>
Reviewed-on: #1

.gitignore

@@ -14,3 +14,17 @@
 
 #macOS garbage
 **/.DS_Store
+**/node_modules/
+
+**/.idea
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/
+# Datasource local storage ignored files
+/dataSources/
+/dataSources.local.xml
+
+**/source/.angular/cache
+**/source/dist/*

Dockerfile

@@ -1,4 +1,10 @@
 FROM nginx:latest
 COPY /source /usr/share/nginx/html
 COPY nginx.conf /etc/nginx/nginx.conf
-EXPOSE 80
+EXPOSE 80
+
+FROM nginx:latest
+COPY ./nginx.conf /etc/nginx/conf.d/default.conf
+COPY dist/troop20web /usr/share/nginx/html
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]

README.md

@@ -1,3 +0,0 @@
-# web
-
-Web site for Columbiana Troop 20

build-production.sh

@@ -3,8 +3,23 @@ echo "Setting Version"
 VERSION_NUMBER=$(date +%Y)"."$(date +%m)"."$(date +%d)
 echo $VERSION_NUMBER
 
+#RESTORE PACKAGES
+cd source || exit
+yarn install
+cd ..
+
+#BUILD UI
+echo "Building:" "$VERSION_NUMBER"
+cd source || exit
+ng build --configuration=production
+cd ..
+
 #PACKAGE
 echo "Dockerizing"
 docker build -t troop20-web:$VERSION_NUMBER -f Dockerfile .
 docker tag troop20-web:$VERSION_NUMBER terralilly85/troop20-web:$VERSION_NUMBER
-docker buildx build --platform linux/arm64 --push -t terralilly85/troop20-web:$VERSION_NUMBER .
+docker buildx build --platform linux/arm64 --push -t terralilly85/troop20-web:$VERSION_NUMBER .
+
+#CLEAN UP ARTIFACTS
+echo "Cleaning up artifacts"
+rm -r source/dist

source/README.md

@@ -0,0 +1,59 @@
+# Troop20web
+
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.0.2.
+
+## Development server
+
+To start a local development server, run:
+
+```bash
+ng serve
+```
+
+Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.
+
+## Code scaffolding
+
+Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+
+```bash
+ng generate component component-name
+```
+
+For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+
+```bash
+ng generate --help
+```
+
+## Building
+
+To build the project run:
+
+```bash
+ng build
+```
+
+This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed.
+
+## Running unit tests
+
+To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+
+```bash
+ng test
+```
+
+## Running end-to-end tests
+
+For end-to-end (e2e) testing, run:
+
+```bash
+ng e2e
+```
+
+Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+
+## Additional Resources
+
+For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

source/angular.json

@@ -0,0 +1,102 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "troop20web": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:application",
+          "options": {
+            "outputPath": "dist/troop20web",
+            "index": "src/index.html",
+            "browser": "src/main.ts",
+            "polyfills": [
+              "zone.js"
+            ],
+            "tsConfig": "tsconfig.app.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "public"
+              }
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kB",
+                  "maximumError": "1MB"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "4kB",
+                  "maximumError": "8kB"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "troop20web:build:production"
+            },
+            "development": {
+              "buildTarget": "troop20web:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n"
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ],
+            "tsConfig": "tsconfig.spec.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "public"
+              }
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
+            "scripts": []
+          }
+        }
+      }
+    }
+  }
+}

source/index.html

@@ -1,57 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Troop 20 - Columbiana, Ohio</title>
-    <link rel="icon" type="image/x-icon" href="./images/favicon.ico">
-    <link rel="stylesheet" href="./styles.css">
-
-    <body>
-        <script src="./scripts.js"></script>
-
-        <div class="parallax parallax-one">
-            <div class="caption">
-                <a href="https://www.scouting.org" target="_blank" rel="noopener noreferrer">
-                    <img class="image" src="./images/bsa-logo.png" alt="Scouting BSA logo"/>
-                </a>
-                <a href="https://www.fortyandeight.org" target="_blank" rel="noopener noreferrer">
-                    <img class="image" src="./images/fe-logo.png" alt="40 and 8s logo"/>
-                </a>
-                <br/> <br/>
-                <div class="glass">
-                    <span class="border">Troop 20 Columbiana, Ohio</span>
-                </div>
-            </div>
-        </div>
-
-        <div class="spacer-block spacer-two">
-            Founded in 2020, and Chartered by 40 & 8s Voiture 273, Troop 20 proudly serves Columbiana, Leetonia, and East Palestine in Ohio by developing young people into tomorrow's leaders.
-        </div>
-
-        <div class="parallax parallax-three">
-            <div class="caption-lower">
-                <div class="glass">
-                    <span class="border">Meetings are held on Thursdays At 7:30 PM</span>
-                </div>
-            </div>
-        </div>
-
-        <div class="spacer-block spacer-one">
-            The Troop has monthly outings which include Camping and Backpacking. The Troop also attends a week long Summer Camp Program.
-        </div>
-
-        <div id="last-parallax" class="parallax parallax-two">
-            <div class="caption-lower">
-                <div class="glass">
-                    <span class="border">Join us for a new adventure!</span>
-                    <br/>
-                    <span class="border">44640 St RT 14, Columbiana, Ohio 44408</span>
-                </div>
-            </div>
-        </div>
-
-        <img id="scroll-image" class="scroll-image" src="./images/down.gif" alt="Scroll Down" />
-    </body>
-</head>

source/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "troop20web",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^19.0.0",
+    "@angular/common": "^19.0.0",
+    "@angular/compiler": "^19.0.0",
+    "@angular/core": "^19.0.0",
+    "@angular/forms": "^19.0.0",
+    "@angular/platform-browser": "^19.0.0",
+    "@angular/platform-browser-dynamic": "^19.0.0",
+    "@angular/router": "^19.0.0",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.15.0"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^19.0.2",
+    "@angular/cli": "^19.0.2",
+    "@angular/compiler-cli": "^19.0.0",
+    "@types/jasmine": "~5.1.0",
+    "jasmine-core": "~5.4.0",
+    "karma": "~6.4.0",
+    "karma-chrome-launcher": "~3.2.0",
+    "karma-coverage": "~2.2.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.1.0",
+    "typescript": "~5.6.2"
+  }
+}

source/scripts.js

@@ -1,18 +0,0 @@
-// This script shows and hides the scroll indicator in the lower
-// right hand corner of the page.
-document.addEventListener('DOMContentLoaded', function() {
-    const image = document.getElementById('scroll-image');
-    const lastParallax = document.getElementById('last-parallax');
-
-    const observer = new IntersectionObserver((entries) => {
-        entries.forEach(entry => {
-            if (entry.isIntersecting) {
-                image.style.display = 'none';
-            } else {
-                image.style.display = 'block'
-            }
-        });
-    });
-
-    observer.observe(lastParallax);
-});

source/src/app/about/about.component.html

@@ -0,0 +1,12 @@
+<article class="pa3 pa5-ns">
+  <p class="measure lh-copy bg-light-blue">
+    Founded in 2020, Troop 20 develops young women into tomorrow's leaders. The troop is a group of odd ducks enjoying
+    the outdoors through hiking and camping. The troop also goes on additional outings such as day trips to trampoline
+    parks, beaches, zoos, and other places as determined by the troop.
+  </p>
+  <p class="measure lh-copy bg-light-blue">
+    Troop 20 follows the Patrol Method, where the youth leadership, not the adults, plan and organize the troops actives
+    based on monthly themes. The troop is currently working on turning out our first Eagle Scouts - one of the founding members
+    is really close and we hope to celebrate her accomplishments.
+  </p>
+</article>

source/src/app/about/about.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-about',
+  imports: [],
+  templateUrl: './about.component.html',
+  styleUrl: './about.component.scss'
+})
+export class AboutComponent {
+
+}

source/src/app/app.component.html

@@ -0,0 +1,3 @@
+<app-top-nav></app-top-nav>
+<router-outlet></router-outlet>
+<app-footer></app-footer>

source/src/app/app.component.ts

@@ -0,0 +1,19 @@
+import {Component, inject} from '@angular/core';
+import {RouterLink, RouterOutlet} from '@angular/router';
+import {Title} from '@angular/platform-browser';
+import {FooterComponent} from "./footer/footer.component";
+import {TopNavComponent} from "./top-nav/top-nav.component";
+
+@Component({
+  selector: 'app-root',
+  imports: [RouterOutlet, FooterComponent, TopNavComponent],
+  templateUrl: './app.component.html',
+  styleUrl: './app.component.scss'
+})
+export class AppComponent {
+  public titleService = inject(Title);
+
+  constructor() {
+    this.titleService.setTitle("Troop 20");
+  }
+}

source/src/app/app.config.ts

@@ -0,0 +1,8 @@
+import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
+import { provideRouter } from '@angular/router';
+
+import { routes } from './app.routes';
+
+export const appConfig: ApplicationConfig = {
+  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)]
+};

source/src/app/app.routes.ts

@@ -0,0 +1,34 @@
+import {Routes} from '@angular/router';
+import {HomeComponent} from './home/home.component';
+import {AboutComponent} from './about/about.component';
+import {LeadershipComponent} from './leadership/leadership.component';
+import {FormsComponent} from "./forms/forms.component";
+import {CommitteeComponent} from "./committee/committee.component";
+import {YouthLeadershipComponent} from "./youth-leadership/youth-leadership.component";
+
+export const routes: Routes = [
+  {
+    path: '',
+    component: HomeComponent,
+  },
+  {
+    path: 'about',
+    component: AboutComponent,
+  },
+  {
+    path: 'leadership',
+    component: LeadershipComponent,
+  },
+  {
+    path: 'forms',
+    component: FormsComponent,
+  },
+  {
+    path: 'committee',
+    component: CommitteeComponent,
+  },
+  {
+    path: 'youth-leadership',
+    component: YouthLeadershipComponent
+  }
+];

source/src/app/committee/committee.component.html

@@ -0,0 +1,111 @@
+@if (mobileService.isMobile()) {
+  <ul class="list pl0 mt0 measure center">
+    <li
+      class="flex items-center lh-copy pa3 ph0-l bb b--black-10 bg-light-blue">
+      <img class="w2 h2 w3-ns h3-ns br-100" src="titles/committee.png"/>
+      <div class="pl3 flex-auto">
+        <span class="f6 db black-70">Richard Simpson</span>
+        <span class="f6 db black-70">Chartered Organization Rep</span>
+      </div>
+    </li>
+    <li
+      class="flex items-center lh-copy pa3 ph0-l bb b--black-10 bg-light-blue">
+      <img class="w2 h2 w3-ns h3-ns br-100" src="titles/committeechair.png"/>
+      <div class="pl3 flex-auto">
+        <span class="f6 db black-70">Rik Linebaugh</span>
+        <span class="f6 db black-70">Committee Chair</span>
+      </div>
+    </li>
+    <li
+      class="flex items-center lh-copy pa3 ph0-l bb b--black-10 bg-light-blue">
+      <img class="w2 h2 w3-ns h3-ns br-100" src="titles/sm.png"/>
+      <div class="pl3 flex-auto">
+        <span class="f6 db black-70">Linda Linebaugh</span>
+        <span class="f6 db black-70">Scoutmaster</span>
+      </div>
+    </li>
+    <li
+      class="flex items-center lh-copy pa3 ph0-l bb b--black-10 bg-light-blue">
+      <img class="w2 h2 w3-ns h3-ns br-100" src="titles/committee.png"/>
+      <div class="pl3 flex-auto">
+        <span class="f6 db black-70">Jaime Seidler</span>
+        <span class="f6 db black-70">Fundraising Chair</span>
+      </div>
+    </li>
+    <li
+      class="flex items-center lh-copy pa3 ph0-l bb b--black-10 bg-light-blue">
+      <img class="w2 h2 w3-ns h3-ns br-100" src="titles/committee.png"/>
+      <div class="pl3 flex-auto">
+        <span class="f6 db black-70">Tara Wilson</span>
+        <span class="f6 db black-70">Advancement Chair</span>
+      </div>
+    </li>
+    <li
+      class="flex items-center lh-copy pa3 ph0-l bb b--black-10 bg-light-blue">
+      <img class="w2 h2 w3-ns h3-ns br-100" src="titles/committee.png"/>
+      <div class="pl3 flex-auto">
+        <span class="f6 db black-70">Jessica Wilson</span>
+        <span class="f6 db black-70">Secretary</span>
+      </div>
+    </li>
+  </ul>
+} @else {
+  <div class="dt dt--fixed">
+    <div class="dtc tc pv0 bg-transparent">
+      <article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10">
+        <div class="tc">
+          <img src="titles/committee.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Committee">
+          <h1 class="f3 mb2">Richard Simpson</h1>
+          <h2 class="f5 fw4 gray mt0">Chartered Organization Rep</h2>
+        </div>
+      </article>
+    </div>
+    <div class="dtc tc pv0 bg-transparent">
+      <article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10">
+        <div class="tc">
+          <img src="titles/committeechair.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Committee Chair">
+          <h1 class="f3 mb2">Rik Linebaugh</h1>
+          <h2 class="f5 fw4 gray mt0">Committee Chair</h2>
+        </div>
+      </article>
+    </div>
+    <div class="dtc tc pv0 bg-transparent">
+      <article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10">
+        <div class="tc">
+          <img src="titles/sm.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Scoutmaster">
+          <h1 class="f3 mb2">Linda Linebaugh</h1>
+          <h2 class="f5 fw4 gray mt0">Scoutmaster</h2>
+        </div>
+      </article>
+    </div>
+  </div>
+  <div class="dt dt--fixed">
+    <div class="dtc tc pv0 bg-transparent">
+      <article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10">
+        <div class="tc">
+          <img src="titles/committee.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Committee">
+          <h1 class="f3 mb2">Jaime Seidler</h1>
+          <h2 class="f5 fw4 gray mt0">Fundraising Chair</h2>
+        </div>
+      </article>
+    </div>
+    <div class="dtc tc pv0 bg-transparent">
+      <article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10">
+        <div class="tc">
+          <img src="titles/committee.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Committee">
+          <h1 class="f3 mb2">Tara Wilson</h1>
+          <h2 class="f5 fw4 gray mt0">Advancement Chair</h2>
+        </div>
+      </article>
+    </div>
+    <div class="dtc tc pv0 bg-transparent">
+      <article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10">
+        <div class="tc">
+          <img src="titles/committee.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Committee">
+          <h1 class="f3 mb2">Jessica Wilson</h1>
+          <h2 class="f5 fw4 gray mt0">Secretary</h2>
+        </div>
+      </article>
+    </div>
+  </div>
+}

source/src/app/committee/committee.component.ts

@@ -0,0 +1,12 @@
+import {Component, inject} from '@angular/core';
+import {MobileService} from '../mobile.service';
+
+@Component({
+  selector: 'app-committee',
+  imports: [],
+  templateUrl: './committee.component.html',
+  styleUrl: './committee.component.scss'
+})
+export class CommitteeComponent {
+  public mobileService = inject(MobileService);
+}

source/src/app/footer/footer.component.html

@@ -0,0 +1,30 @@
+<div [class]="{'footer': !mobileService.isMobile(), 'footer-mobile': mobileService.isMobile()}">
+  <footer class="pv4 ph3 ph5-m ph6-l bg-black">
+    <small class="f6 db tc white">
+      © 2025
+      <b class="ttu">
+        Troop 2020G - Columbiana
+      </b>
+    </small>
+    <div class="tc mt3">
+      <a href="https://www.scouting.org"
+         target="_blank"
+         title="Scouting America"
+         class="f6 dib ph2 link white dim">
+        Scouting America
+      </a>
+      <a href="https://www.buckeyecouncil.org"
+         target="_blank"
+         title="Terms"
+         class="f6 dib ph2 link white dim">
+        Buckeye Council
+      </a>
+      <a href="https://www.fortyandeight.org"
+         target="_blank"
+         title="Privacy"
+         class="f6 dib ph2 link white dim">
+        40 & 8
+      </a>
+    </div>
+  </footer>
+</div>

source/src/app/footer/footer.component.scss

@@ -0,0 +1,13 @@
+.footer {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+}
+
+.footer-mobile {
+  position: static;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+}

source/src/app/footer/footer.component.ts

@@ -0,0 +1,12 @@
+import {Component, inject} from '@angular/core';
+import {MobileService} from '../mobile.service';
+
+@Component({
+  selector: 'app-footer',
+  imports: [],
+  templateUrl: './footer.component.html',
+  styleUrl: './footer.component.scss'
+})
+export class FooterComponent {
+  public mobileService = inject(MobileService);
+}

source/src/app/forms/forms.component.html

@@ -0,0 +1,46 @@
+<article class="center mw5 mw6-ns hidden ba mv4">
+  <h1 class="f4 bg-near-black white mv0 pv2 ph3">Youth Application</h1>
+  <div class="pa3 bt bg-light-blue">
+    <p class="f6 f5-ns lh-copy measure mv0">
+      <a
+        href="https://filestore.scouting.org/filestore/pdf/524-406.pdf?_gl=1*wtt3bs*_ga*MTM2MjI3NzIuMTY3NTI3NDg5MQ..*_ga_20G0JHESG4*MTY3OTUyNDgwMi4xMDAuMS4xNjc5NTI1MzM5LjU2LjAuMA..&_ga=2.6189623.583820647.1679520579-13622772.1675274891"
+        target="_blank">
+        Download and fill out the form
+      </a>
+    </p>
+  </div>
+</article>
+<article class="center mw5 mw6-ns hidden ba mv4">
+  <h1 class="f4 bg-near-black white mv0 pv2 ph3">Adult Leader Application</h1>
+  <div class="pa3 bt bg-light-blue">
+    <p class="f6 f5-ns lh-copy measure mv0">
+      <a href="https://filestore.scouting.org/filestore/pdf/524-501.pdf" target="_blank">
+        Download and fill out the form
+      </a>
+    </p>
+  </div>
+</article>
+<article class="center mw5 mw6-ns hidden ba mv4">
+  <h1 class="f4 bg-near-black white mv0 pv2 ph3">Merit Badge Councilor Application</h1>
+  <div class="pa3 bt bg-light-blue">
+    <p class="f6 f5-ns lh-copy measure mv0">
+      <a
+        href="https://filestore.scouting.org/filestore/pdf/34405.pdf?_gl=1*1hlrsjt*_ga*MTM2MjI3NzIuMTY3NTI3NDg5MQ..*_ga_20G0JHESG4*MTY3OTUyNDgwMi4xMDAuMS4xNjc5NTI1NDE2LjYwLjAuMA..&_ga=2.61297192.583820647.1679520579-13622772.1675274891"
+        target="_blank">
+        Download and fill out the form
+      </a>
+    </p>
+  </div>
+</article>
+<article class="center mw5 mw6-ns hidden ba mv4">
+  <h1 class="f4 bg-near-black white mv0 pv2 ph3">BSA Medical Form</h1>
+  <div class="pa3 bt bg-light-blue">
+    <p class="f6 f5-ns lh-copy measure mv0">
+      <a href="https://filestore.scouting.org/filestore/healthsafety/pdf/680-001_abc.pdf" target="_blank">
+        Download and fill out the form
+      </a>
+      <br/>
+      Forms A, B, and C are required for Summer Camp
+    </p>
+  </div>
+</article>

source/src/app/forms/forms.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-forms',
+  imports: [],
+  templateUrl: './forms.component.html',
+  styleUrl: './forms.component.scss'
+})
+export class FormsComponent {
+
+}

source/src/app/home/home.component.html

@@ -0,0 +1,6 @@
+<article class="vh-75 dt w-100">
+  <div class="dtc v-mid tc white ph3 ph4-l">
+    <img ngSrc="bsa-logo.png" priority height="336" width="294" alt="Scouting USA Logo"/>
+    <h1 class="f3 f2-m f1-l fw2 white mv3">Prepared. For life.</h1>
+  </div>
+</article>

source/src/app/home/home.component.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import {NgOptimizedImage} from "@angular/common";
+
+@Component({
+  selector: 'app-home',
+  imports: [
+    NgOptimizedImage
+  ],
+  templateUrl: './home.component.html',
+  styleUrl: './home.component.scss'
+})
+export class HomeComponent {
+
+}

source/src/app/leadership/leadership.component.html

@@ -0,0 +1,79 @@
+@if (mobileService.isMobile()) {
+  <ul class="list pl0 mt0 measure center">
+    <li
+      class="flex items-center lh-copy pa3 ph0-l bb b--black-10 bg-light-blue">
+      <img class="w2 h2 w3-ns h3-ns br-100" src="titles/sm.png"/>
+      <div class="pl3 flex-auto">
+        <span class="f6 db black-70">Linda Linebaugh</span>
+        <span class="f6 db black-70">Scoutmaster</span>
+      </div>
+    </li>
+    <li
+      class="flex items-center lh-copy pa3 ph0-l bb b--black-10 bg-light-blue">
+      <img class="w2 h2 w3-ns h3-ns br-100" src="titles/asm.png"/>
+      <div class="pl3 flex-auto">
+        <span class="f6 db black-70">Jaime Seidler</span>
+        <span class="f6 db black-70">Assistant Scoutmaster</span>
+      </div>
+    </li>
+    <li
+      class="flex items-center lh-copy pa3 ph0-l bb b--black-10 bg-light-blue">
+      <img class="w2 h2 w3-ns h3-ns br-100" src="titles/asm.png"/>
+      <div class="pl3 flex-auto">
+        <span class="f6 db black-70">Tara Wilson</span>
+        <span class="f6 db black-70">Assistant Scoutmaster</span>
+      </div>
+    </li>
+  </ul>
+} @else {
+  <div class="dt dt--fixed">
+    <div class="dtc tc pv0 bg-transparent">
+      <article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10">
+        <div class="tc">
+          <img src="titles/sm.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Scoutmaster">
+          <h1 class="f4">Linda Linebaugh</h1>
+          <h2 class="f5">Scoutmaster</h2>
+          <hr class="mw3 bb bw1 b--black-10">
+        </div>
+        <p class="lh-copy measure center f6 black-70">
+          Linda founded Troop 20 - then Troop 40 - in 2020. She received the
+          <a href="https://www.scouting.org/training/resources-for-program-trainers-training-committees/woodbadge/">Wood
+            Badge</a>
+          in 2025. She also finds time to be a Den Leader for Pack 16 in Columbiana where she is developing the next
+          generation of Scouts.
+        </p>
+      </article>
+    </div>
+    <div class="dtc tc pv0 bg-transparent">
+      <article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10">
+        <div class="tc">
+          <img src="titles/asm.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Assistant Scoutmaster">
+          <h1 class="f4">Jaime Seidler</h1>
+          <h2 class="f5">Assistant Scoutmaster</h2>
+          <hr class="mw3 bb bw1 b--black-10">
+        </div>
+        <p class="lh-copy measure center f6 black-70">
+          Jaime joined Troop 20 in 2023 when her daughter crossed over from Cub Scouts.
+          She has taken several leadership trainings and has participated in the summer camp program.
+          She has also accompanied the scouts on several outings, including polar bears.
+        </p>
+      </article>
+    </div>
+    <div class="dtc tc pv0 bg-transparent">
+      <article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10">
+        <div class="tc">
+          <img src="titles/asm.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Assistant Scoutmaster">
+          <h1 class="f4">Tara Wilson</h1>
+          <h2 class="f5">Assistant Scoutmaster</h2>
+          <hr class="mw3 bb bw1 b--black-10">
+        </div>
+        <p class="lh-copy measure center f6 black-70">
+          Tara is a lifelong Scout, starting her journey back in the early 1990s as a Cub Scout and progressed all
+          the way to Life Scout.
+          She went to the 2001 National Jamboree at Fort AP Hill, Virginia and holds a 5th year Pipestone.
+          She joined Troop 20 in 2025 when her daughter crossed over from Cub Scouts.
+        </p>
+      </article>
+    </div>
+  </div>
+}

source/src/app/leadership/leadership.component.ts

@@ -0,0 +1,12 @@
+import {Component, inject} from '@angular/core';
+import {MobileService} from '../mobile.service';
+
+@Component({
+  selector: 'app-leadership',
+  imports: [],
+  templateUrl: './leadership.component.html',
+  styleUrl: './leadership.component.scss'
+})
+export class LeadershipComponent {
+  public mobileService = inject(MobileService);
+}

source/src/app/mobile.service.ts

@@ -0,0 +1,13 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class MobileService {
+  /**
+   * Determines if the user is using a small resolution or mobile browser
+   */
+  public isMobile(): boolean {
+    return (window.innerWidth <= 667 );
+  }
+}

source/src/app/top-nav/top-nav.component.html

@@ -0,0 +1,11 @@
+<header class="bg-black w-100 ph3 pv3 pv4-ns ph4-m ph5-l">
+  <nav class="f6 fw6 ttu tracked">
+    <a class="link dim white dib mr3" [routerLink]="['/']" title="Home">Home</a>
+    <a class="link dim white dib mr3" [routerLink]="['/about']" title="About">About</a>
+    <a class="link dim white dib mr3" [routerLink]="['/youth-leadership']" title="Youth Leadership">Youth Leadership</a>
+    <a class="link dim white dib mr3" [routerLink]="['/leadership']" title="Leaders">Adult Leadership</a>
+    <a class="link dim white dib mr3" [routerLink]="['/committee']" title="Committee">Committee</a>
+    <a class="link dim white dib mr3" [routerLink]="['forms']" title="Forms">Forms</a>
+    <a class="link dim white dib mr3" href="mailto:troop2020g@gmail.com" title="Contact Us">Contact Us</a>
+  </nav>
+</header>

source/src/app/top-nav/top-nav.component.ts

@@ -0,0 +1,14 @@
+import {Component} from '@angular/core';
+import {RouterLink} from "@angular/router";
+
+@Component({
+  selector: 'app-top-nav',
+  imports: [
+    RouterLink
+  ],
+  templateUrl: './top-nav.component.html',
+  styleUrl: './top-nav.component.scss'
+})
+export class TopNavComponent {
+
+}

source/src/app/youth-leadership/youth-leadership.component.html

@@ -0,0 +1,160 @@
+@if (mobileService.isMobile()) {
+  <ul class="list pl0 mt0 measure center">
+    <li
+      class="flex items-center lh-copy pa3 ph0-l bb b--black-10 bg-light-blue">
+      <img class="w2 h2 w3-ns h3-ns br-100" src="titles/spl.png"/>
+      <div class="pl3 flex-auto">
+        <span class="f6 db black-70">Juliahna Seidler</span>
+      </div>
+    </li>
+    <li
+      class="flex items-center lh-copy pa3 ph0-l bb b--black-10 bg-light-blue">
+      <img class="w2 h2 w3-ns h3-ns br-100" src="titles/aspl.png"/>
+      <div class="pl3 flex-auto">
+        <span class="f6 db black-70">Kenzie Witherow</span>
+      </div>
+    </li>
+    <li
+      class="flex items-center lh-copy pa3 ph0-l bb b--black-10 bg-light-blue">
+      <img class="w2 h2 w3-ns h3-ns br-100" src="titles/aspl.png"/>
+      <div class="pl3 flex-auto">
+        <span class="f6 db black-70">Carlie Sorrell</span>
+      </div>
+    </li>
+    <li
+      class="flex items-center lh-copy pa3 ph0-l bb b--black-10 bg-light-blue">
+      <img class="w2 h2 w3-ns h3-ns br-100" src="titles/qm.png"/>
+      <div class="pl3 flex-auto">
+        <span class="f6 db black-70">Ella Mercer</span>
+      </div>
+    </li>
+    <li
+      class="flex items-center lh-copy pa3 ph0-l bb b--black-10 bg-light-blue">
+      <img class="w2 h2 w3-ns h3-ns br-100" src="titles/scribe.png"/>
+      <div class="pl3 flex-auto">
+        <span class="f6 db black-70">Nora Wilson</span>
+      </div>
+    </li>
+    <li
+      class="flex items-center lh-copy pa3 ph0-l bb b--black-10 bg-light-blue">
+      <img class="w2 h2 w3-ns h3-ns br-100" src="titles/pl.png"/>
+      <div class="pl3 flex-auto">
+        <span class="f6 db black-70">Avery Elliot</span>
+      </div>
+    </li>
+    <li
+      class="flex items-center lh-copy pa3 ph0-l bb b--black-10 bg-light-blue">
+      <img class="w2 h2 w3-ns h3-ns br-100" src="titles/pl.png"/>
+      <div class="pl3 flex-auto">
+        <span class="f6 db black-70">Locklyn Linebaugh</span>
+      </div>
+    </li>
+    <li
+      class="flex items-center lh-copy pa3 ph0-l bb b--black-10 bg-light-blue">
+      <img class="w2 h2 w3-ns h3-ns br-100" src="titles/historian.png"/>
+      <div class="pl3 flex-auto">
+        <span class="f6 db black-70">Natalie Sorrell</span>
+      </div>
+    </li>
+    <li
+      class="flex items-center lh-copy pa3 ph0-l bb b--black-10 bg-light-blue">
+      <img class="w2 h2 w3-ns h3-ns br-100" src="titles/librarian.png"/>
+      <div class="pl3 flex-auto">
+        <span class="f6 db black-70">Kenzie Elliot</span>
+      </div>
+    </li>
+    <li
+      class="flex items-center lh-copy pa3 ph0-l bb b--black-10 bg-light-blue">
+      <img class="w2 h2 w3-ns h3-ns br-100" src="titles/dc.png"/>
+      <div class="pl3 flex-auto">
+        <span class="f6 db black-70">Locklyn Linebaugh</span>
+      </div>
+    </li>
+  </ul>
+} @else {
+  <div class="cf">
+    <div class="fl w-20 tc pv1 bg-transparent">
+      <article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10">
+        <div class="tc">
+          <img src="titles/spl.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Senior Patrol Leader">
+          <h1 class="f3 mb2">Juliahna Seidler</h1>
+        </div>
+      </article>
+    </div>
+    <div class="fl w-20 tc pv1 bg-transparent">
+      <article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10">
+        <div class="tc">
+          <img src="titles/aspl.png" class="br-100 h4 w4 dib ba b--black-05 pa2"
+               title="Assistant Senior Patrol Leader">
+          <h1 class="f3 mb2">Kenzie Witherow</h1>
+        </div>
+      </article>
+    </div>
+    <div class="fl w-20 tc pv1 bg-transparent">
+      <article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10">
+        <div class="tc">
+          <img src="titles/oeg.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Outdoor Ethics Guide">
+          <h1 class="f3 mb2">Carlie Sorrell</h1>
+        </div>
+      </article>
+    </div>
+    <div class="fl w-20 tc pv1 bg-transparent">
+      <article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10">
+        <div class="tc">
+          <img src="titles/qm.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Quarter Master">
+          <h1 class="f3 mb2">Ella Mercer</h1>
+        </div>
+      </article>
+    </div>
+    <div class="fl w-20 tc pv1 bg-transparent">
+      <article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10">
+        <div class="tc">
+          <img src="titles/scribe.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Scribe">
+          <h1 class="f3 mb2">Nora Wilson</h1>
+        </div>
+      </article>
+    </div>
+  </div>
+  <div class="cf">
+    <div class="fl w-20 tc pv1 bg-transparent">
+      <article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10">
+        <div class="tc">
+          <img src="titles/pl.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Patrol Leader">
+          <h1 class="f3 mb2">Avery Elliot</h1>
+        </div>
+      </article>
+    </div>
+    <div class="fl w-20 tc pv1 bg-transparent">
+      <article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10">
+        <div class="tc">
+          <img src="titles/pl.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Patrol Leader">
+          <h1 class="f3 mb2">Locklyn Linebaugh</h1>
+        </div>
+      </article>
+    </div>
+    <div class="fl w-20 tc pv1 bg-transparent">
+      <article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10">
+        <div class="tc">
+          <img src="titles/historian.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Historian">
+          <h1 class="f3 mb2">Natalie Sorrell</h1>
+        </div>
+      </article>
+    </div>
+    <div class="fl w-20 tc pv1 bg-transparent">
+      <article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10">
+        <div class="tc">
+          <img src="titles/librarian.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Librarian">
+          <h1 class="f3 mb2">Kenzie Elliot</h1>
+        </div>
+      </article>
+    </div>
+    <div class="fl w-20 tc pv1 bg-transparent">
+      <article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10">
+        <div class="tc">
+          <img src="titles/dc.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Den Chief">
+          <h1 class="f3 mb2">Locklyn Linebaugh</h1>
+        </div>
+      </article>
+    </div>
+  </div>
+}

source/src/app/youth-leadership/youth-leadership.component.ts

@@ -0,0 +1,12 @@
+import {Component, inject} from '@angular/core';
+import {MobileService} from '../mobile.service';
+
+@Component({
+  selector: 'app-youth-leadership',
+  imports: [],
+  templateUrl: './youth-leadership.component.html',
+  styleUrl: './youth-leadership.component.scss'
+})
+export class YouthLeadershipComponent {
+  public mobileService = inject(MobileService);
+}

source/src/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Troop20web</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css"/>
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>

source/src/main.ts

@@ -0,0 +1,6 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { AppComponent } from './app/app.component';
+
+bootstrapApplication(AppComponent, appConfig)
+  .catch((err) => console.error(err));

source/src/styles.scss

@@ -0,0 +1,8 @@
+/* You can add global styles to this file, and also import other style files */
+
+body, html {
+  height: 100%;
+  margin: 0;
+  background-image: url('https://images.unsplash.com/photo-1505490096310-204ef067fe6b?q=80&w=3270&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
+  background-color: black;
+}

source/styles.css

@@ -1,108 +0,0 @@
-.parallax {
-  /* Create the parallax scrolling effect */
-  background-attachment: fixed;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: cover;
-  height: 100%;
-}
-
-.parallax-one {
-    background-image: url('https://images.unsplash.com/photo-1505490096310-204ef067fe6b?q=80&w=3270&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
-}
-
-.parallax-two {
-    background-image: url('https://images.unsplash.com/photo-1566679056462-2075774c8c07?q=80&w=3130&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
-}
-
-.parallax-three {
-    background-image: url('https://images.unsplash.com/photo-1469433791803-c2719135f970?q=80&w=3270&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
-}
-
-.glass {
-    backdrop-filter: blur(6px) saturate(200%);
-    -webkit-backdrop-filter: blur(6px) saturate(200%);
-    background-color: rgba(17, 25, 40, 0.6);
-    border: 0px solid rgba(255, 255, 255, 0.125);
-}
-
-.spacer-block {
-    position: relative;
-    font-size: 25px;
-    text-align: center;
-    padding: 10px;
-}
-
-.spacer-one {
-    background-color: #B39475;
-}
-
-.spacer-two {
-    background-color: #9AB3D5;
-}
-
-.image {
-    height: 250px;
-    width: auto;
-}
-
-.scroll-image {
-    position: fixed;
-    right: 0px;
-    bottom: 0px;
-    margin-bottom: 5px;
-    margin-right: 5px;
-    display: block;
-}
-
-.glass {
-    backdrop-filter: blur(6px) saturate(200%);
-    -webkit-backdrop-filter: blur(6px) saturate(200%);
-    background-color: rgba(0, 0, 0, 0.65);
-    border: 1px solid rgba(255, 255, 255, 0.125);
-}
-
-.caption {
-    position: relative;
-    left: 0;
-    top: 25%;
-    width: 100%;
-    text-align: center;
-    text-wrap: inherit;
-}
-
-.caption-lower {
-    position: relative;
-    left: 0;
-    top: 45%;
-    width: 100%;
-    text-align: center;
-    text-wrap: inherit;
-}
-
-.caption span.border {
-    font-size: 25px;
-    text-wrap: inherit;
-    color: #fff;
-}
-
-.caption-lower span.border {
-    font-size: 25px;
-    text-wrap: inherit;
-    color: #fff;
-}
-
-body, html {
-    height: 100%;
-    margin: 0;
-}
-
-@media only screen and (max-device-width: 500px) {
-    .parallax {
-      background-attachment: scroll;
-    }
-
-    .caption {
-        top: 5%;
-    }
-}

source/tsconfig.app.json

@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": []
+  },
+  "files": [
+    "src/main.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
+  ]
+}

source/tsconfig.json

@@ -0,0 +1,27 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "outDir": "./dist/out-tsc",
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "bundler",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022"
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}

source/tsconfig.spec.json

@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "include": [
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}