Add projects view

package.json

@@ -15,25 +15,26 @@
     "format": "prettier --write ."
   },
   "dependencies": {
+    "@lit/task": "^1.0.3",
     "@vaadin/router": "^2.0.0",
     "lit": "^3.3.1",
-    "three": "^0.179.1",
+    "three": "^0.180.0",
     "three-stdlib": "^2.36.0",
-    "uuid": "^11.1.0"
+    "uuid": "^13.0.0"
   },
   "devDependencies": {
-    "@types/three": "^0.179.0",
+    "@types/three": "^0.180.0",
     "@vitejs/plugin-legacy": "^7.2.1",
-    "eslint": "^9.33.0",
+    "eslint": "^9.35.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-lit": "^2.1.1",
     "eslint-plugin-prettier": "^5.5.4",
     "prettier": "^3.6.2",
     "prettier-eslint": "^16.4.2",
-    "terser": "^5.43.1",
+    "terser": "^5.44.0",
     "typescript": "~5.9.2",
-    "typescript-eslint": "^8.39.1",
-    "vite": "^7.1.2",
+    "typescript-eslint": "^8.43.0",
+    "vite": "^7.1.5",
     "vite-plugin-eslint": "^1.8.1"
   }
 }

src/components/header/header.ts

@@ -23,11 +23,14 @@ export class HeaderComponent extends LitElement {
           <nav>
             <div class="nav-logo">
               <img class="logo" src=${logo} alt="code-cause-logo-img" />
-              <p class="app-title" aria-current="page">Code Cause</p>
+              <a href="/"
+                ><p class="app-title" aria-current="page">Code Cause</p></a
+              >
             </div>
 
             <div class="nav-links">
               <a href="/about">About</a>
+              <a href="/projects">Projects</a>
             </div>
           </nav>
         </header>`
@@ -59,6 +62,11 @@ export class HeaderComponent extends LitElement {
       align-items: center;
     }
 
+    .nav-logo a {
+      text-decoration: none;
+      color: var(--primary-text-color);
+    }
+
     .logo {
       height: 1.8rem;
       width: auto;
@@ -85,6 +93,20 @@ export class HeaderComponent extends LitElement {
     a:hover {
       color: #4b7ce6;
     }
+
+    @media only screen and (max-width: 640px) {
+      .logo {
+        height: 1.65rem;
+      }
+
+      .app-title {
+        font-size: 0.95rem;
+      }
+
+      .nav-links a {
+        font-size: 0.95rem;
+      }
+    }
   `;
 }
 

src/routes.ts

@@ -31,6 +31,18 @@ export const routes: Route[] = [
       return commands.component('about-view');
     },
   },
+  {
+    path: '/projects',
+    async action(
+      this: Route,
+      _context: RouteContext,
+      commands: Commands
+    ): Promise<ActionResult> {
+      await import('./views/projects-view');
+      document.title = `${APP_TITLE} | Projects`;
+      return commands.component('projects-view');
+    },
+  },
   {
     path: '(.*)',
     async action(

src/shared/loading-indicator.ts

@@ -0,0 +1,63 @@
+import { LitElement, css, html, type TemplateResult } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+@customElement('loading-indicator')
+export class LoadingIndicator extends LitElement {
+  @property({ reflect: true }) size: string = 'default';
+  @property({ reflect: true }) color: string = '#ffffff';
+
+  render(): TemplateResult {
+    return html`<div class="spinner-container">
+      <div class="spinner" style="--spinner-color: ${this.color}"></div>
+      <slot name="text">Loading...</slot>
+    </div>`;
+  }
+
+  static styles = css`
+    :host {
+      display: inline-block;
+    }
+
+    .spinner-container {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      height: 100%;
+    }
+
+    .spinner {
+      width: 40px;
+      height: 40px;
+      border: 4px solid rgba(255, 255, 255, 0.2);
+      border-top-color: var(--spinner-color, #ffffff);
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+    }
+
+    .spinner-text {
+      font-size: 14px;
+      color: var(--spinner-color, #007bff);
+      text-align: center;
+    }
+
+    @keyframes spin {
+      to {
+        transform: rotate(360deg);
+      }
+    }
+
+    :host([size='small']) .spinner {
+      width: 24px;
+      height: 24px;
+      border-width: 3px;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'loading-indicator': LoadingIndicator;
+  }
+}

src/utils/constants.ts

@@ -1 +1,3 @@
 export const APP_TITLE = 'Code Cause';
+export const GITHUB_API_BASE_URL = 'https://api.github.com/';
+export const GITHUB_USERNAME = 'Code-Cause-Collective';

src/utils/dateFunctions.ts

@@ -1,3 +1,4 @@
+/** Get current date year */
 export function currentYear(): string {
   const date = new Date();
   return date.getFullYear().toString();

src/utils/helperFunctions.ts

@@ -1,4 +1,6 @@
 import { v4 as uuidv4 } from 'uuid';
+
+/** Get UUIDv4 */
 export function UUIDv4(): string {
   if (crypto && typeof crypto?.randomUUID === 'function') {
     return crypto.randomUUID();

src/views/projects-view.ts

@@ -0,0 +1,177 @@
+import { Task } from '@lit/task';
+import { LitElement, css, html, type TemplateResult } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { GITHUB_API_BASE_URL, GITHUB_USERNAME } from '../utils/constants';
+import '../shared/loading-indicator';
+
+// Types
+type Repo = {
+  id: number;
+  name: string;
+  full_name: string;
+  private: boolean;
+  html_url: string;
+  description: string;
+  stargazers_count: number;
+};
+
+@customElement('projects-view')
+export class ProjectsView extends LitElement {
+  connectedCallback(): void {
+    super.connectedCallback();
+    this._githubReposTask.run();
+  }
+
+  private _githubReposTask = new Task(this, {
+    task: async (_args, { signal }): Promise<Repo[]> => {
+      return await fetch(
+        `${GITHUB_API_BASE_URL}users/${GITHUB_USERNAME}/repos`,
+        { signal }
+      )
+        .then((response) => response.json())
+        .then((data: Repo[]) => {
+          if (!data || !Array.isArray(data)) {
+            throw Error();
+          }
+          return data.filter((repo: Repo) => repo.name !== '.github');
+        });
+    },
+  });
+
+  render(): TemplateResult {
+    return html` ${this._githubReposTask.render({
+      pending: () => html`<loading-indicator></loading-indicator>`,
+      complete: (repos) => html`
+        <div class="container">
+          <div class="title">
+            <h1>Projects</h1>
+            <p>A curated list of our open source repositories</p>
+          </div>
+          <ul class="repo-list">
+            ${repos.map((repo) => {
+              return html` <li class="repo-card">
+                <div class="repo-stars">⭐ ${repo.stargazers_count}</div>
+                <a href="${repo.html_url}" target="_blank" class="repo-link">
+                  ${repo.name}
+                </a>
+                <p class="repo-description">${repo.description}</p>
+              </li>`;
+            })}
+          </ul>
+        </div>
+      `,
+      error: () => html`
+        <div class="error">
+          Unable to display projects. Please try again later.
+        </div>
+      `,
+    })}`;
+  }
+
+  static styles = css`
+    :host {
+      width: 100%;
+    }
+
+    .container {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 1.5rem;
+      width: 100%;
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 1rem 2rem;
+      box-sizing: border-box;
+    }
+
+    .title {
+      text-align: center;
+    }
+
+    .repo-list {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+      gap: 1.5rem;
+      width: 100%;
+    }
+
+    .repo-card {
+      position: relative;
+      background: transparent;
+      border: 1px solid rgba(255, 255, 255, 0.08);
+      border-radius: 12px;
+      padding: 16px;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      transition:
+        transform 0.2s ease,
+        box-shadow 0.2s ease;
+    }
+
+    .repo-card:hover {
+      transform: translateY(-3px);
+    }
+
+    .repo-description {
+      font-size: 0.9rem;
+      color: #e5e7eb;
+      margin: 0;
+    }
+
+    .repo-link {
+      font-size: 0.9rem;
+      color: #4da6ff;
+      text-decoration: none;
+      font-size: 1.2rem;
+      font-weight: 600;
+    }
+
+    .repo-link:hover {
+      text-decoration: underline;
+    }
+
+    .repo-stars {
+      position: absolute;
+      top: 16px;
+      right: 12px;
+      font-size: 0.9rem;
+      color: #f5d547;
+      font-weight: 500;
+      opacity: 0;
+      transition: opacity 0.2s ease;
+    }
+
+    .repo-card:hover .repo-stars {
+      opacity: 1;
+    }
+
+    .error {
+      color: orange;
+      margin-top: 5em;
+      text-align: center;
+    }
+
+    loading-indicator {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100vw;
+      height: 100vh;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      z-index: 9999;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'projects-view': ProjectsView;
+  }
+}