Compare commits
14 Commits
main
...
263bf9d2d3
| Author | SHA1 | Date | |
|---|---|---|---|
|
263bf9d2d3
|
|||
|
f39b90c41e
|
|||
|
c9e32fa352
|
|||
|
65e1f39176
|
|||
|
0b507e14ad
|
|||
|
232b107a3f
|
|||
|
31052d2d9d
|
|||
|
df7e2b2bcc
|
|||
|
203f141291
|
|||
|
266cd633c3
|
|||
|
d49104f4a7
|
|||
|
8d688291df
|
|||
|
0c34d37110
|
|||
|
44f6743b45
|
@@ -1,11 +1,18 @@
|
||||
# Dev container: same image as CI e2e (Playwright Noble) so visual snapshots match.
|
||||
# Snapshots generated in the devcontainer will match CI; no need to run update-snapshots in CI.
|
||||
FROM mcr.microsoft.com/playwright:v1.58.0-noble
|
||||
# Dev container for mifi Ventures static site
|
||||
# Lightweight: Node for static server (npx serve), no app dependencies
|
||||
|
||||
# pnpm for this project (CI uses the same)
|
||||
RUN corepack enable && corepack prepare pnpm@10.28.2 --activate
|
||||
FROM mcr.microsoft.com/devcontainers/javascript-node:1-22-bookworm
|
||||
|
||||
# Install system deps if needed (none required for static site)
|
||||
RUN apt-get update && apt-get install -y --no-install-recommends \
|
||||
curl \
|
||||
&& rm -rf /var/lib/apt/lists/*
|
||||
|
||||
# Ensure workspace dir exists (mount point)
|
||||
RUN mkdir -p /workspaces/mifi-ventures-landing
|
||||
|
||||
# Default working directory
|
||||
WORKDIR /workspaces/mifi-ventures-landing
|
||||
|
||||
# Default user is root (Playwright image); devcontainer runs as root for e2e.
|
||||
# npx serve is used at runtime via postStartCommand
|
||||
# No npm install needed — static site, no package.json
|
||||
|
||||
@@ -1,44 +1,39 @@
|
||||
{
|
||||
"name": "mifi Ventures Landing",
|
||||
"dockerFile": "Dockerfile",
|
||||
"workspaceFolder": "/workspaces/mifi-ventures-landing",
|
||||
"workspaceMount": "source=${localWorkspaceFolder},target=/workspaces/mifi-ventures-landing,type=bind",
|
||||
"runArgs": ["-u", "root"],
|
||||
"remoteUser": "root",
|
||||
"postCreateCommand": "pnpm install",
|
||||
"forwardPorts": [5173, 4173],
|
||||
"portsAttributes": {
|
||||
"5173": {
|
||||
"label": "Dev (Vite)",
|
||||
"onAutoForward": "notify"
|
||||
},
|
||||
"4173": {
|
||||
"label": "Preview (Vite)",
|
||||
"onAutoForward": "notify"
|
||||
}
|
||||
"name": "mifi Ventures Landing",
|
||||
"dockerFile": "Dockerfile",
|
||||
"workspaceFolder": "/workspaces/mifi-ventures-landing",
|
||||
"workspaceMount": "source=${localWorkspaceFolder},target=/workspaces/mifi-ventures-landing,type=bind",
|
||||
"forwardPorts": [5173, 4173],
|
||||
"portsAttributes": {
|
||||
"5173": {
|
||||
"label": "Dev (Vite)",
|
||||
"onAutoForward": "notify"
|
||||
},
|
||||
"customizations": {
|
||||
"vscode": {
|
||||
"extensions": [
|
||||
"dbaeumer.vscode-eslint",
|
||||
"esbenp.prettier-vscode",
|
||||
"rvest.vs-code-prettier-eslint",
|
||||
"yoavbls.pretty-ts-errors",
|
||||
"svelte.svelte-vscode"
|
||||
],
|
||||
"settings": {
|
||||
"files.associations": {
|
||||
"*.html": "html",
|
||||
"*.css": "css",
|
||||
"*.svg": "svg"
|
||||
},
|
||||
"editor.formatOnSave": true,
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode",
|
||||
"files.watcherExclude": {
|
||||
"**/node_modules/**": true,
|
||||
"**/.git/objects/**": true
|
||||
}
|
||||
}
|
||||
}
|
||||
"4173": {
|
||||
"label": "Preview (Vite)",
|
||||
"onAutoForward": "notify"
|
||||
}
|
||||
},
|
||||
"customizations": {
|
||||
"vscode": {
|
||||
"extensions": [
|
||||
"dbaeumer.vscode-eslint",
|
||||
"esbenp.prettier-vscode"
|
||||
],
|
||||
"settings": {
|
||||
"files.associations": {
|
||||
"*.html": "html",
|
||||
"*.css": "css",
|
||||
"*.svg": "svg"
|
||||
},
|
||||
"editor.formatOnSave": true,
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode",
|
||||
"files.watcherExclude": {
|
||||
"**/node_modules/**": true,
|
||||
"**/.git/objects/**": true
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"remoteUser": "node"
|
||||
}
|
||||
|
||||
@@ -1,8 +0,0 @@
|
||||
# Preview-only 410 path artifacts (copy-410-paths.mjs).
|
||||
# Deploy uses pnpm run build (no copy step); nginx serves 410 via error_page.
|
||||
# These dirs exist only when running build-preview for local serve dist.
|
||||
dist/pt
|
||||
dist/feed
|
||||
dist/2024
|
||||
dist/category
|
||||
dist/comments
|
||||
@@ -1,4 +0,0 @@
|
||||
# Only run CI tests when files under src/ are changed
|
||||
if git diff --cached --name-only | grep -q '^src/'; then
|
||||
pnpm run test:ci
|
||||
fi
|
||||
@@ -1,4 +1,4 @@
|
||||
# CI workflow: one clone, one workspace — install → lint → build → unit test - e2e test.
|
||||
# CI workflow: one clone, one workspace — install → lint → build → test.
|
||||
# Runs on pull requests, push/tag/manual on main, or manual from any branch.
|
||||
# Deploy workflow depends on this (ci) and runs only on main.
|
||||
when:
|
||||
@@ -19,133 +19,17 @@ steps:
|
||||
image: node:20-alpine
|
||||
commands:
|
||||
- corepack enable && corepack prepare pnpm@10.28.2 --activate
|
||||
- pnpm install --frozen-lockfile || pnpm install
|
||||
- pnpm run lint
|
||||
- pnpm run lint:css
|
||||
depends_on:
|
||||
- install
|
||||
|
||||
- name: Send Lint Status Notification (failure)
|
||||
image: curlimages/curl
|
||||
environment:
|
||||
MATTERMOST_BOT_ACCESS_TOKEN:
|
||||
from_secret: mattermost_bot_access_token
|
||||
MATTERMOST_CHANNEL_ID:
|
||||
from_secret: mattermost_tests_channel_id
|
||||
MATTERMOST_POST_API_URL:
|
||||
from_secret: mattermost_post_api_url
|
||||
commands:
|
||||
- |
|
||||
BODY=$(printf '{"channel_id":"%s","message":"[%s - Build #%s] Lint failure 💩"}' "$MATTERMOST_CHANNEL_ID" "$CI_REPO" "$CI_PIPELINE_NUMBER")
|
||||
curl -sS -X POST -H "Content-Type: application/json" -d "$BODY" -H "Authorization: Bearer $MATTERMOST_BOT_ACCESS_TOKEN" $MATTERMOST_POST_API_URL
|
||||
depends_on:
|
||||
- lint
|
||||
when:
|
||||
- status: [failure]
|
||||
|
||||
- name: unit test
|
||||
image: node:20-alpine
|
||||
commands:
|
||||
- corepack enable && corepack prepare pnpm@10.28.2 --activate
|
||||
- pnpm install --frozen-lockfile || pnpm install
|
||||
- pnpm exec svelte-kit sync
|
||||
- pnpm test
|
||||
depends_on:
|
||||
- lint
|
||||
|
||||
- name: Send Unit Test Status Notification (failure)
|
||||
image: curlimages/curl
|
||||
environment:
|
||||
MATTERMOST_BOT_ACCESS_TOKEN:
|
||||
from_secret: mattermost_bot_access_token
|
||||
MATTERMOST_CHANNEL_ID:
|
||||
from_secret: mattermost_tests_channel_id
|
||||
MATTERMOST_POST_API_URL:
|
||||
from_secret: mattermost_post_api_url
|
||||
commands:
|
||||
- |
|
||||
BODY=$(printf '{"channel_id":"%s","message":"[%s - Build #%s] Unit test failure 💩"}' "$MATTERMOST_CHANNEL_ID" "$CI_REPO" "$CI_PIPELINE_NUMBER")
|
||||
curl -sS -X POST -H "Content-Type: application/json" -d "$BODY" -H "Authorization: Bearer $MATTERMOST_BOT_ACCESS_TOKEN" $MATTERMOST_POST_API_URL
|
||||
depends_on:
|
||||
- unit test
|
||||
when:
|
||||
- status: [failure]
|
||||
|
||||
- name: build
|
||||
image: node:20-alpine
|
||||
commands:
|
||||
- corepack enable && corepack prepare pnpm@10.28.2 --activate
|
||||
- pnpm install --frozen-lockfile || pnpm install
|
||||
- pnpm run build
|
||||
depends_on:
|
||||
- unit test
|
||||
|
||||
- name: Send Test Build Status Notification (failure)
|
||||
image: curlimages/curl
|
||||
environment:
|
||||
MATTERMOST_BOT_ACCESS_TOKEN:
|
||||
from_secret: mattermost_bot_access_token
|
||||
MATTERMOST_CHANNEL_ID:
|
||||
from_secret: mattermost_tests_channel_id
|
||||
MATTERMOST_POST_API_URL:
|
||||
from_secret: mattermost_post_api_url
|
||||
commands:
|
||||
- |
|
||||
BODY=$(printf '{"channel_id":"%s","message":"[%s - Build #%s] Test build failure 💩"}' "$MATTERMOST_CHANNEL_ID" "$CI_REPO" "$CI_PIPELINE_NUMBER")
|
||||
curl -sS -X POST -H "Content-Type: application/json" -d "$BODY" -H "Authorization: Bearer $MATTERMOST_BOT_ACCESS_TOKEN" $MATTERMOST_POST_API_URL
|
||||
depends_on:
|
||||
- build
|
||||
when:
|
||||
- status: [failure]
|
||||
|
||||
- name: e2e test
|
||||
image: mcr.microsoft.com/playwright:v1.58.0-noble
|
||||
- name: test
|
||||
image: node:20-alpine
|
||||
commands:
|
||||
- corepack enable && corepack prepare pnpm@10.28.2 --activate
|
||||
- pnpm install --frozen-lockfile || pnpm install
|
||||
- pnpm run build
|
||||
- npx serve dist -p 4173 &
|
||||
- sleep 2
|
||||
- CI=1 pnpm run test:e2e
|
||||
depends_on:
|
||||
- build
|
||||
|
||||
- name: Send E2E Test Status Notification (failure)
|
||||
image: curlimages/curl
|
||||
environment:
|
||||
MATTERMOST_BOT_ACCESS_TOKEN:
|
||||
from_secret: mattermost_bot_access_token
|
||||
MATTERMOST_CHANNEL_ID:
|
||||
from_secret: mattermost_tests_channel_id
|
||||
MATTERMOST_POST_API_URL:
|
||||
from_secret: mattermost_post_api_url
|
||||
commands:
|
||||
- |
|
||||
BODY=$(printf '{"channel_id":"%s","message":"[%s - Build #%s] E2E test failure 💩"}' "$MATTERMOST_CHANNEL_ID" "$CI_REPO" "$CI_PIPELINE_NUMBER")
|
||||
curl -sS -X POST -H "Content-Type: application/json" -d "$BODY" -H "Authorization: Bearer $MATTERMOST_BOT_ACCESS_TOKEN" $MATTERMOST_POST_API_URL
|
||||
depends_on:
|
||||
- e2e test
|
||||
when:
|
||||
- status: [failure]
|
||||
|
||||
- name: Send CI Pipeline Status Notification (success)
|
||||
image: curlimages/curl
|
||||
environment:
|
||||
MATTERMOST_BOT_ACCESS_TOKEN:
|
||||
from_secret: mattermost_bot_access_token
|
||||
MATTERMOST_CHANNEL_ID:
|
||||
from_secret: mattermost_tests_channel_id
|
||||
MATTERMOST_POST_API_URL:
|
||||
from_secret: mattermost_post_api_url
|
||||
commands:
|
||||
- |
|
||||
BODY=$(printf '{"channel_id":"%s","message":"[%s - Build #%s] CI pipeline success 🎉"}' "$MATTERMOST_CHANNEL_ID" "$CI_REPO" "$CI_PIPELINE_NUMBER")
|
||||
curl -sS -X POST -H "Content-Type: application/json" -d "$BODY" -H "Authorization: Bearer $MATTERMOST_BOT_ACCESS_TOKEN" $MATTERMOST_POST_API_URL
|
||||
depends_on:
|
||||
- install
|
||||
- lint
|
||||
- unit test
|
||||
- build
|
||||
- e2e test
|
||||
when:
|
||||
- status: [success]
|
||||
- pnpm test
|
||||
|
||||
@@ -2,10 +2,8 @@
|
||||
# Runs on push to main, tag, or manual (only when on main).
|
||||
# Waits for ci workflow (install → lint → build → test) to succeed first.
|
||||
when:
|
||||
- branch: main
|
||||
event: [push, tag, manual]
|
||||
- event: deployment
|
||||
evaluate: 'CI_PIPELINE_DEPLOY_TARGET == "production"'
|
||||
branch: main
|
||||
event: [push, tag, manual]
|
||||
|
||||
depends_on:
|
||||
- ci
|
||||
@@ -14,68 +12,26 @@ steps:
|
||||
- name: 'Docker image build'
|
||||
image: docker:latest
|
||||
environment:
|
||||
DOCKER_API_VERSION: '1.43'
|
||||
REGISTRY_REPO: git.mifi.dev/mifi-ventures/landing
|
||||
volumes:
|
||||
- /var/run/docker.sock:/var/run/docker.sock
|
||||
commands:
|
||||
- set -e
|
||||
- apk add --no-cache jq
|
||||
- APP_VERSION=$(jq -r .version package.json | tr -d '\r\n' | sed 's/^v//')
|
||||
- echo "=== Building Docker image ==="
|
||||
- 'echo "Commit SHA: ${CI_COMMIT_SHA:0:8}"'
|
||||
- 'echo "Registry repo: $REGISTRY_REPO"'
|
||||
- 'echo "App version: $APP_VERSION"'
|
||||
- |
|
||||
docker build \
|
||||
--tag "$REGISTRY_REPO:$CI_COMMIT_SHA" \
|
||||
--tag "$REGISTRY_REPO:latest" \
|
||||
--tag "$REGISTRY_REPO:$APP_VERSION" \
|
||||
--tag $REGISTRY_REPO:${CI_COMMIT_SHA} \
|
||||
--tag $REGISTRY_REPO:latest \
|
||||
--label "git.commit=${CI_COMMIT_SHA}" \
|
||||
--label "git.branch=${CI_COMMIT_BRANCH}" \
|
||||
.
|
||||
- echo "✓ Docker image built successfully"
|
||||
|
||||
- name: Send Build Status Notification (success)
|
||||
image: curlimages/curl
|
||||
environment:
|
||||
MATTERMOST_BOT_ACCESS_TOKEN:
|
||||
from_secret: mattermost_bot_access_token
|
||||
MATTERMOST_CHANNEL_ID:
|
||||
from_secret: mattermost_pushes_channel_id
|
||||
MATTERMOST_POST_API_URL:
|
||||
from_secret: mattermost_post_api_url
|
||||
commands:
|
||||
- |
|
||||
BODY=$(printf '{"channel_id":"%s","message":"[%s - Build #%s] Build success 🎉"}' "$MATTERMOST_CHANNEL_ID" "$CI_REPO" "$CI_PIPELINE_NUMBER")
|
||||
curl -sS -X POST -H "Content-Type: application/json" -d "$BODY" -H "Authorization: Bearer $MATTERMOST_BOT_ACCESS_TOKEN" $MATTERMOST_POST_API_URL
|
||||
depends_on:
|
||||
- 'Docker image build'
|
||||
when:
|
||||
- status: [success]
|
||||
|
||||
- name: Send Build Status Notification (failure)
|
||||
image: curlimages/curl
|
||||
environment:
|
||||
MATTERMOST_BOT_ACCESS_TOKEN:
|
||||
from_secret: mattermost_bot_access_token
|
||||
MATTERMOST_CHANNEL_ID:
|
||||
from_secret: mattermost_pushes_channel_id
|
||||
MATTERMOST_POST_API_URL:
|
||||
from_secret: mattermost_post_api_url
|
||||
commands:
|
||||
- |
|
||||
BODY=$(printf '{"channel_id":"%s","message":"[%s - Build #%s] Build failure 💩"}' "$MATTERMOST_CHANNEL_ID" "$CI_REPO" "$CI_PIPELINE_NUMBER")
|
||||
curl -sS -X POST -H "Content-Type: application/json" -d "$BODY" -H "Authorization: Bearer $MATTERMOST_BOT_ACCESS_TOKEN" $MATTERMOST_POST_API_URL
|
||||
depends_on:
|
||||
- Docker image build
|
||||
when:
|
||||
- status: [failure]
|
||||
|
||||
- name: 'Push to registry'
|
||||
image: docker:latest
|
||||
environment:
|
||||
DOCKER_API_VERSION: '1.43'
|
||||
REGISTRY_URL: git.mifi.dev
|
||||
REGISTRY_REPO: git.mifi.dev/mifi-ventures/landing
|
||||
REGISTRY_USERNAME:
|
||||
@@ -86,59 +42,19 @@ steps:
|
||||
- /var/run/docker.sock:/var/run/docker.sock
|
||||
commands:
|
||||
- set -e
|
||||
- apk add --no-cache jq
|
||||
- APP_VERSION=$(jq -r .version package.json | tr -d '\r\n' | sed 's/^v//')
|
||||
- echo "=== Pushing to registry ==="
|
||||
- 'echo "Registry: $REGISTRY_URL"'
|
||||
- 'echo "Repository: $REGISTRY_REPO"'
|
||||
- 'echo "App version: $APP_VERSION"'
|
||||
- |
|
||||
echo "$REGISTRY_PASSWORD" | docker login "$REGISTRY_URL" \
|
||||
-u "$REGISTRY_USERNAME" \
|
||||
--password-stdin
|
||||
- 'docker push $REGISTRY_REPO:$CI_COMMIT_SHA'
|
||||
- 'docker push $REGISTRY_REPO:latest'
|
||||
- 'docker push $REGISTRY_REPO:$APP_VERSION'
|
||||
- docker push $REGISTRY_REPO:${CI_COMMIT_SHA}
|
||||
- docker push $REGISTRY_REPO:latest
|
||||
- echo "✓ Images pushed successfully"
|
||||
depends_on:
|
||||
- 'Docker image build'
|
||||
|
||||
- name: Send Push Status Notification (success)
|
||||
image: curlimages/curl
|
||||
environment:
|
||||
MATTERMOST_BOT_ACCESS_TOKEN:
|
||||
from_secret: mattermost_bot_access_token
|
||||
MATTERMOST_CHANNEL_ID:
|
||||
from_secret: mattermost_pushes_channel_id
|
||||
MATTERMOST_POST_API_URL:
|
||||
from_secret: mattermost_post_api_url
|
||||
commands:
|
||||
- |
|
||||
BODY=$(printf '{"channel_id":"%s","message":"[%s - Build #%s] Push to registry success 🎉"}' "$MATTERMOST_CHANNEL_ID" "$CI_REPO" "$CI_PIPELINE_NUMBER")
|
||||
curl -sS -X POST -H "Content-Type: application/json" -d "$BODY" -H "Authorization: Bearer $MATTERMOST_BOT_ACCESS_TOKEN" $MATTERMOST_POST_API_URL
|
||||
depends_on:
|
||||
- 'Push to registry'
|
||||
when:
|
||||
- status: [success]
|
||||
|
||||
- name: Send Push Status Notification (failure)
|
||||
image: curlimages/curl
|
||||
environment:
|
||||
MATTERMOST_BOT_ACCESS_TOKEN:
|
||||
from_secret: mattermost_bot_access_token
|
||||
MATTERMOST_CHANNEL_ID:
|
||||
from_secret: mattermost_pushes_channel_id
|
||||
MATTERMOST_POST_API_URL:
|
||||
from_secret: mattermost_post_api_url
|
||||
commands:
|
||||
- |
|
||||
BODY=$(printf '{"channel_id":"%s","message":"[%s - Build #%s] Push to registry failure 💩"}' "$MATTERMOST_CHANNEL_ID" "$CI_REPO" "$CI_PIPELINE_NUMBER")
|
||||
curl -sS -X POST -H "Content-Type: application/json" -d "$BODY" -H "Authorization: Bearer $MATTERMOST_BOT_ACCESS_TOKEN" $MATTERMOST_POST_API_URL
|
||||
depends_on:
|
||||
- 'Push to registry'
|
||||
when:
|
||||
- status: [failure]
|
||||
|
||||
- name: 'Trigger Portainer stack redeploy'
|
||||
image: curlimages/curl:latest
|
||||
environment:
|
||||
@@ -158,39 +74,3 @@ steps:
|
||||
echo "✓ Portainer redeploy triggered (HTTP $code)"
|
||||
depends_on:
|
||||
- 'Push to registry'
|
||||
|
||||
- name: Send Deploy Status Notification (success)
|
||||
image: curlimages/curl
|
||||
environment:
|
||||
MATTERMOST_BOT_ACCESS_TOKEN:
|
||||
from_secret: mattermost_bot_access_token
|
||||
MATTERMOST_CHANNEL_ID:
|
||||
from_secret: mattermost_pushes_channel_id
|
||||
MATTERMOST_POST_API_URL:
|
||||
from_secret: mattermost_post_api_url
|
||||
commands:
|
||||
- |
|
||||
BODY=$(printf '{"channel_id":"%s","message":"[%s - Build #%s] Production Deploy success 🎉"}' "$MATTERMOST_CHANNEL_ID" "$CI_REPO" "$CI_PIPELINE_NUMBER")
|
||||
curl -sS -X POST -H "Content-Type: application/json" -d "$BODY" -H "Authorization: Bearer $MATTERMOST_BOT_ACCESS_TOKEN" $MATTERMOST_POST_API_URL
|
||||
depends_on:
|
||||
- 'Trigger Portainer stack redeploy'
|
||||
when:
|
||||
- status: [success]
|
||||
|
||||
- name: Send Deploy Status Notification (failure)
|
||||
image: curlimages/curl
|
||||
environment:
|
||||
MATTERMOST_BOT_ACCESS_TOKEN:
|
||||
from_secret: mattermost_bot_access_token
|
||||
MATTERMOST_CHANNEL_ID:
|
||||
from_secret: mattermost_pushes_channel_id
|
||||
MATTERMOST_POST_API_URL:
|
||||
from_secret: mattermost_post_api_url
|
||||
commands:
|
||||
- |
|
||||
BODY=$(printf '{"channel_id":"%s","message":"[%s - Build #%s] Production Deploy failure 💩"}' "$MATTERMOST_CHANNEL_ID" "$CI_REPO" "$CI_PIPELINE_NUMBER")
|
||||
curl -sS -X POST -H "Content-Type: application/json" -d "$BODY" -H "Authorization: Bearer $MATTERMOST_BOT_ACCESS_TOKEN" $MATTERMOST_POST_API_URL
|
||||
depends_on:
|
||||
- Trigger Portainer stack redeploy
|
||||
when:
|
||||
- status: [failure]
|
||||
|
||||
@@ -1,41 +0,0 @@
|
||||
# Manual workflow: regenerate e2e Linux snapshot in CI and push it (fallback when not using the devcontainer).
|
||||
# Prefer updating snapshots in the devcontainer (same image as CI); use this workflow if you don't use the
|
||||
# devcontainer (e.g. macOS-only) or can't run the update locally. Trigger manually; choose the branch to update.
|
||||
#
|
||||
# Required secret: git_push_token — repo push token (e.g. Gitea/Forgejo personal access token).
|
||||
# Add in Woodpecker → Repo → Settings → Secrets.
|
||||
when:
|
||||
event: manual
|
||||
|
||||
steps:
|
||||
- name: update e2e snapshots
|
||||
image: mcr.microsoft.com/playwright:v1.58.0-noble
|
||||
commands:
|
||||
- corepack enable && corepack prepare pnpm@10.28.2 --activate
|
||||
- pnpm install --frozen-lockfile || pnpm install
|
||||
- pnpm run build
|
||||
- npx serve dist -p 4173 &
|
||||
- sleep 2
|
||||
- CI=1 pnpm exec playwright test --update-snapshots
|
||||
|
||||
- name: commit and push snapshot
|
||||
image: alpine/git
|
||||
environment:
|
||||
GIT_PUSH_TOKEN:
|
||||
from_secret: git_push_token
|
||||
commands:
|
||||
- set -e
|
||||
- 'git config user.email "ci@woodpecker"'
|
||||
- 'git config user.name "Woodpecker CI"'
|
||||
# Push URL with token for write access (Gitea/Forgejo: token as username)
|
||||
- 'PUSH_URL="https://$${GIT_PUSH_TOKEN}@$${CI_REPO_CLONE_URL#https://}"'
|
||||
- git remote set-url origin "$PUSH_URL"
|
||||
- git add tests/visual.spec.ts-snapshots/
|
||||
- |
|
||||
if git diff --staged --quiet; then
|
||||
echo "No snapshot changes to commit."
|
||||
else
|
||||
git commit -m "chore: update e2e snapshot from CI [skip ci]"
|
||||
git push origin "$CI_COMMIT_BRANCH"
|
||||
echo "Snapshot pushed to $CI_COMMIT_BRANCH"
|
||||
fi
|
||||
75
AGENTS.md
75
AGENTS.md
@@ -1,75 +0,0 @@
|
||||
# Agent guide: mifi Ventures landing
|
||||
|
||||
This file helps LLM agents work in this repo without introducing anti-patterns. Follow the architecture and conventions below.
|
||||
|
||||
## Purpose
|
||||
|
||||
- **Audience**: LLM agents (e.g. Cursor, Codex) making code or content changes.
|
||||
- **Goal**: Preserve a minimal static site: SvelteKit prerender, no client-side app JS, shared theming, critical CSS inlining, and clear separation between app routes and static error pages.
|
||||
|
||||
## Stack and architecture
|
||||
|
||||
- **Framework**: SvelteKit with **adapter-static**. All routes are prerendered; there is no client-side router or hydration (`csr: false` in `src/routes/+layout.ts`).
|
||||
- **Build**: `pnpm run build` = `vite build` → `node scripts/beasties.mjs` → `node scripts/generate-sitemap.mjs` → `node scripts/minify-static-js.mjs`. Output is `dist/` (static files only). Deploy uses this; no 410 path copies. For local preview with 410 URLs working, use `pnpm run build-preview` (adds `copy-410-paths.mjs`). The 410 path dirs are in `.dockerignore` so they are never included in the image.
|
||||
- **Runtime**: nginx serves `dist/` (mounted as `/usr/share/nginx/html` in the container). No Node at runtime.
|
||||
- **Theming**: CSS only. Light/dark follows **system preference** via `@media (prefers-color-scheme: dark)` in `src/app.css`. There is no JS theme toggle or `data-theme`; do not add one unless explicitly requested.
|
||||
- **Fonts**: **Local only.** Inter and Fraunces are served from `static/assets/fonts/` (e.g. `inter-v20-latin-*.woff2`, `fraunces-v38-latin-*.woff2`). Preloads are in `src/routes/+layout.svelte`. Do not add Google Fonts or other external font URLs for the main site or error pages.
|
||||
|
||||
## Key paths
|
||||
|
||||
| Path | Role |
|
||||
|------|------|
|
||||
| `src/app.css` | Single global stylesheet: CSS variables (light/dark), base styles, components. Source of truth for theme tokens. |
|
||||
| `src/app.html` | SvelteKit HTML shell. Rarely edited. |
|
||||
| `src/routes/+layout.svelte` | Root layout: head (meta, fonts, favicon, scripts), skip link, slot. Imports `app.css`. |
|
||||
| `src/routes/+layout.ts` | Exports `prerender = true`, `ssr = true`, `csr = false`. Do not enable CSR. |
|
||||
| `src/routes/+page.svelte` | Home page; composes sections from `src/lib/components/`. |
|
||||
| `src/lib/data/*.ts` | Content and meta (home-meta, content, experience, engagements, json-ld). Edit here for copy or SEO. |
|
||||
| `src/lib/seo.ts` | SEO defaults (baseUrl, theme colors, etc.) and `mergeMeta()`. |
|
||||
| `static/` | Copied as-is into `dist/` by SvelteKit. Favicon, robots.txt, fonts, images, **404.html**, **410.html**, and **assets/error-pages.css** live here. |
|
||||
| `scripts/beasties.mjs` | Post-build: inlines critical CSS into **every** `dist/*.html` (including 404 and 410). Resolves stylesheet URLs relative to `dist/`. |
|
||||
| `scripts/minify-static-js.mjs` | Post-build: minifies JS in `dist/assets/`. |
|
||||
| `scripts/copy-410-paths.mjs` | Run by `build-preview` only: copies `410.html` to each 410 URL path as `index.html` so static preview (e.g. `serve dist`) shows the 410 page at those URLs. Production uses `build` (no copy); nginx returns 410 via explicit location blocks and `error_page 410 /410.html`. |
|
||||
| `nginx.conf` | Serves static files; `try_files $uri $uri/ /index.html` for SPA-style fallback; `error_page 404 /404.html` and `error_page 410 /410.html` for custom error pages. |
|
||||
|
||||
## Static error pages (404, 410)
|
||||
|
||||
- **Files**: `static/404.html`, `static/410.html`. They are **standalone HTML** (not Svelte). Do not convert them to Svelte routes.
|
||||
- **Styling**: Both link to **one** shared stylesheet: `<link rel="stylesheet" href="/assets/error-pages.css">`. All error-page CSS lives in **`static/assets/error-pages.css`** (theme variables for light/dark, local `@font-face` for Inter/Fraunces, layout for `.error-page`). Do not duplicate theme tokens or add inline `<style>` in the HTML; keep a single source in `error-pages.css`.
|
||||
- **Critical CSS**: The build runs Beasties on all `dist/*.html`. Beasties inlines critical CSS from linked stylesheets (including `/assets/error-pages.css`) into 404.html and 410.html. So:
|
||||
- **Do** keep the `<link rel="stylesheet" href="/assets/error-pages.css">` in 404.html and 410.html; Beasties will inline it at build time.
|
||||
- **Do not** add error-page-only CSS in `src/app.css`; the app bundle is not loaded on error pages.
|
||||
- **Theme alignment**: When changing light/dark colors or typography in `src/app.css`, update **`static/assets/error-pages.css`** so 404/410 stay visually consistent (same `--ep-*` tokens and, if needed, `@media (prefers-color-scheme: dark)`).
|
||||
- **Local fonts**: Error pages use the same font paths as the main site (`/assets/fonts/...`) via `@font-face` in `error-pages.css`. Do not use Google Fonts or other external font URLs on error pages.
|
||||
- **Preview vs production**: Deploy runs `pnpm run build` (no 410 path copies); the image stays minimal and nginx serves 410 via `error_page 410 /410.html`. For local preview with 410 URLs working, run `pnpm run build-preview` then `serve dist`; the copied `index.html` files under each 410 path are in `.dockerignore` so they are never copied into the image. If you add or remove 410 paths, update `nginx.conf` and the `PATHS` array in `scripts/410-paths.mjs`.
|
||||
|
||||
## Anti-patterns to avoid
|
||||
|
||||
1. **Enabling client-side rendering**
|
||||
Do not set `csr: true` or add a client-side router. The site is intentionally static and JS-minimal.
|
||||
|
||||
2. **Adding app JavaScript for the main shell**
|
||||
The only scripts are small, purposeful ones (e.g. `copyright-year.js`, `ga-init.js`, `mobile-menu-helper.js`) in `static/assets/js/`. Do not introduce a Svelte hydration bundle or large runtime for the main pages.
|
||||
|
||||
3. **External fonts**
|
||||
Do not add `<link>` to Google Fonts (or similar) in layout or error pages. Use local fonts in `static/assets/fonts/` and reference them via preload (layout) or `@font-face` (error-pages.css).
|
||||
|
||||
4. **Skipping Beasties for new HTML**
|
||||
Any new `.html` in `static/` is copied to `dist/` and **must** be processed by Beasties (the script already runs on all `dist/*.html`). Do not add static HTML that bypasses the build or that uses only inline styles without a linked stylesheet (linked styles get inlined by Beasties).
|
||||
|
||||
5. **Diverging error page theme**
|
||||
Do not change 404/410 styling in a way that ignores `static/assets/error-pages.css` or that duplicates theme tokens from `src/app.css` in ad-hoc form. Keep one error-page stylesheet and align its variables with `app.css` when you change the main theme.
|
||||
|
||||
6. **Breaking static export**
|
||||
Do not add routes or behavior that require server-side rendering at request time (e.g. dynamic routes without prerender). The app is fully prerendered and served as static files.
|
||||
|
||||
7. **Scattering SEO or theme defaults**
|
||||
Keep SEO defaults and theme-color values in `src/lib/seo.ts` and in layout/error pages that need them. Do not duplicate or hardcode them in many places.
|
||||
|
||||
## Quick reference
|
||||
|
||||
- **Change copy or structure (home)**: `src/lib/data/*.ts`, `src/lib/components/*.svelte`, `src/routes/+page.svelte`.
|
||||
- **Change global styles or theme**: `src/app.css`. Then sync **`static/assets/error-pages.css`** if tokens or dark mode change.
|
||||
- **Change error page copy or structure**: `static/404.html`, `static/410.html`. Style changes: **`static/assets/error-pages.css`** only.
|
||||
- **Add a new static HTML page**: Add it under `static/`, link to `/assets/error-pages.css` (or a dedicated stylesheet that Beasties can inline). Ensure `scripts/beasties.mjs` runs over all `dist/*.html` (it already does).
|
||||
- **Change nginx behavior**: `nginx.conf` (e.g. cache headers, `error_page`, `try_files`).
|
||||
28
README.md
28
README.md
@@ -32,15 +32,10 @@ This project uses **pnpm** as the package manager. After cloning, run `pnpm inst
|
||||
| `pnpm run build` | SvelteKit build → `dist/`, then Critters inlines critical CSS |
|
||||
| `pnpm run preview` | Serve `dist/` (Critters-processed) at http://localhost:4173 — same as deployed |
|
||||
| `pnpm test` | Run unit tests (Vitest) |
|
||||
| `pnpm run test:e2e` | Run Playwright visual regression (e2e) |
|
||||
| `pnpm run test:e2e:update-snapshots` | Regenerate e2e snapshots (in devcontainer = CI; see Visual regression) |
|
||||
| `pnpm run test:ci` | Run same tests as CI: lint, lint:css, unit tests, e2e (used by pre-commit hook) |
|
||||
| `pnpm run lint` | ESLint (JS/TS/Svelte) |
|
||||
| `pnpm run lint:css` | Stylelint (global CSS + Svelte styles) |
|
||||
| `pnpm run format` | Prettier (JS/TS/Svelte/CSS/JSON) |
|
||||
|
||||
A **pre-commit hook** (Husky) runs `pnpm run test:ci` so the same tests as CI run before each commit. Skip with `git commit --no-verify` if needed.
|
||||
|
||||
### Option 1: pnpm dev (recommended for editing)
|
||||
|
||||
From the project root:
|
||||
@@ -64,11 +59,11 @@ Preview uses `serve dist` so you see the same HTML/CSS as in production (includi
|
||||
|
||||
### Option 3: Dev Container
|
||||
|
||||
Open the project in a dev container for a consistent local environment. The devcontainer uses the **same image as CI** (`mcr.microsoft.com/playwright:v1.58.0-noble`), so e2e snapshots generated inside it match CI.
|
||||
Open the project in a dev container for a consistent local environment:
|
||||
|
||||
1. **Open in Cursor or VS Code** with the [Dev Containers](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers) extension installed.
|
||||
2. **Reopen in Container**: Command Palette (`Cmd/Ctrl+Shift+P`) → **Dev Containers: Reopen in Container**.
|
||||
3. Wait for the container to build and start. (If you already had a devcontainer open, use **Rebuild Container** once to pick up the Playwright Noble image.)
|
||||
3. Wait for the container to build and start.
|
||||
|
||||
**Inside the container**, run:
|
||||
|
||||
@@ -77,21 +72,7 @@ pnpm install
|
||||
pnpm run dev
|
||||
```
|
||||
|
||||
The site is served at **http://localhost:5173** (or the port shown) with live reload (port forwarded automatically). Run `pnpm run test:e2e:update-snapshots` here to regenerate the Linux snapshot when the layout changes.
|
||||
|
||||
### Visual regression (e2e)
|
||||
|
||||
E2e tests use Playwright and compare full-page screenshots to committed snapshots. CI and the **devcontainer** both use `mcr.microsoft.com/playwright:v1.58.0-noble`, so snapshots generated in the devcontainer match CI.
|
||||
|
||||
**To update the Linux snapshot locally (devcontainer):**
|
||||
|
||||
1. Rebuild the devcontainer once (so it uses the Playwright Noble image; see Option 3 below).
|
||||
2. Run `pnpm run test:e2e:update-snapshots` (no Docker needed — same environment as CI).
|
||||
3. Commit the updated file(s) under `tests/visual.spec.ts-snapshots/`.
|
||||
|
||||
**If you’re not using the devcontainer:** run the **update-e2e-snapshots** workflow manually in Woodpecker (requires a `git_push_token` secret), or run `pnpm run test:e2e:update-snapshots` on a host with Docker.
|
||||
|
||||
**Running e2e locally:** `pnpm run test:e2e` mirrors CI when Docker is available (runs tests in the same Playwright image). Without Docker (e.g. inside the devcontainer), it runs in the current environment. The config uses Linux snapshot paths so baselines stay consistent; run in Docker or devcontainer for matching rendering.
|
||||
The site is served at **http://localhost:5173** (or the port shown) with live reload (port forwarded automatically).
|
||||
|
||||
### Option 4: Docker (Production-like Test)
|
||||
|
||||
@@ -130,7 +111,7 @@ mifi-ventures-landing/
|
||||
├── svelte.config.js # SvelteKit config (adapter-static)
|
||||
├── vite.config.ts # Vite config
|
||||
├── postcss.config.js # PostCSS (autoprefixer)
|
||||
├── scripts/beasties.mjs # Post-build critical CSS inlining
|
||||
├── scripts/critters.mjs # Post-build critical CSS inlining
|
||||
├── static/ # Static assets (copied to dist as-is)
|
||||
│ ├── favicon.svg, favicon.ico, robots.txt
|
||||
│ ├── copyright-year.js # Minimal client script (footer year)
|
||||
@@ -181,7 +162,6 @@ Navigate to your repository → Settings → Secrets and add:
|
||||
| `deploy_username` | SSH username | `deploy` or `root` |
|
||||
| `deploy_ssh_key` | Private SSH key (multi-line) | `-----BEGIN OPENSSH PRIVATE KEY-----...` |
|
||||
| `deploy_port` | SSH port | `22` (default) |
|
||||
| `git_push_token` | *(Optional)* Repo push token for manual **update-e2e-snapshots** workflow (fallback when not using devcontainer) | Gitea/Forgejo personal access token |
|
||||
|
||||
**Generate SSH key for deployment:**
|
||||
|
||||
|
||||
@@ -5,42 +5,41 @@ import prettier from 'eslint-config-prettier';
|
||||
import svelteConfig from './svelte.config.js';
|
||||
|
||||
export default [
|
||||
{
|
||||
ignores: [
|
||||
'.svelte-kit/**',
|
||||
'dist/**',
|
||||
'build/**',
|
||||
'node_modules/**',
|
||||
'site/**',
|
||||
'static/**',
|
||||
'build.mjs',
|
||||
'playwright-report/**',
|
||||
],
|
||||
},
|
||||
js.configs.recommended,
|
||||
...tseslint.configs.recommended,
|
||||
...svelte.configs['flat/recommended'],
|
||||
prettier,
|
||||
{
|
||||
files: ['**/*.svelte', '**/*.svelte.ts', '**/*.svelte.js'],
|
||||
languageOptions: {
|
||||
parserOptions: {
|
||||
parser: tseslint.parser,
|
||||
projectService: true,
|
||||
extraFileExtensions: ['.svelte'],
|
||||
svelteConfig,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
files: ['**/*.mjs', 'build.mjs'],
|
||||
languageOptions: { globals: { console: 'readonly', process: 'readonly' } },
|
||||
},
|
||||
{
|
||||
rules: {
|
||||
'svelte/no-at-html-tags': 'warn',
|
||||
'svelte/require-each-key': 'off',
|
||||
'svelte/no-navigation-without-resolve': 'off',
|
||||
},
|
||||
},
|
||||
{
|
||||
ignores: [
|
||||
'.svelte-kit/**',
|
||||
'dist/**',
|
||||
'build/**',
|
||||
'node_modules/**',
|
||||
'site/**',
|
||||
'static/**',
|
||||
'build.mjs'
|
||||
]
|
||||
},
|
||||
js.configs.recommended,
|
||||
...tseslint.configs.recommended,
|
||||
...svelte.configs['flat/recommended'],
|
||||
prettier,
|
||||
{
|
||||
files: ['**/*.svelte', '**/*.svelte.ts', '**/*.svelte.js'],
|
||||
languageOptions: {
|
||||
parserOptions: {
|
||||
parser: tseslint.parser,
|
||||
projectService: true,
|
||||
extraFileExtensions: ['.svelte'],
|
||||
svelteConfig
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
files: ['**/*.mjs', 'build.mjs'],
|
||||
languageOptions: { globals: { console: 'readonly', process: 'readonly' } }
|
||||
},
|
||||
{
|
||||
rules: {
|
||||
'svelte/no-at-html-tags': 'warn',
|
||||
'svelte/require-each-key': 'off',
|
||||
'svelte/no-navigation-without-resolve': 'off'
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
Binary file not shown.
Binary file not shown.
BIN
logos/avatar.af
BIN
logos/avatar.af
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.3 KiB |
Binary file not shown.
BIN
logos/favicon.af
BIN
logos/favicon.af
Binary file not shown.
38
nginx.conf
38
nginx.conf
@@ -103,47 +103,19 @@ http {
|
||||
access_log off;
|
||||
}
|
||||
|
||||
# Default location: try $uri.html so /services serves services.html, /services/foo serves services/foo.html
|
||||
# Default location
|
||||
location / {
|
||||
try_files $uri $uri.html $uri/ /index.html;
|
||||
try_files $uri $uri/ /index.html;
|
||||
}
|
||||
|
||||
# 410 Gone: permanently removed URLs (tells crawlers to deindex)
|
||||
error_page 410 /410.html;
|
||||
location = /410.html {
|
||||
add_header Cache-Control "no-cache, must-revalidate";
|
||||
add_header Content-Type "text/html; charset=utf-8";
|
||||
}
|
||||
location = /2024/02/18/hello-world/ { return 410; }
|
||||
location = /2024/02/18/hello-world { return 410; }
|
||||
location = /pt/ { return 410; }
|
||||
location = /pt { return 410; }
|
||||
location = /feed/ { return 410; }
|
||||
location = /feed { return 410; }
|
||||
location = /category/uncategorized/feed/ { return 410; }
|
||||
location = /category/uncategorized/feed { return 410; }
|
||||
location = /category/uncategorized/ { return 410; }
|
||||
location = /category/uncategorized { return 410; }
|
||||
location = /comments/feed/ { return 410; }
|
||||
location = /comments/feed { return 410; }
|
||||
|
||||
# Allow .well-known (security.txt, ACME challenge, etc.)
|
||||
location ^~ /.well-known/ {
|
||||
add_header Cache-Control "public, max-age=86400";
|
||||
}
|
||||
|
||||
# Deny access to other hidden files (.git, .env, etc.)
|
||||
# Deny access to hidden files (.git, .env, etc.)
|
||||
location ~ /\. {
|
||||
deny all;
|
||||
access_log off;
|
||||
log_not_found off;
|
||||
}
|
||||
|
||||
# Custom 404 page (for missing static assets; SPA routes still try index.html first via try_files)
|
||||
error_page 404 /404.html;
|
||||
location = /404.html {
|
||||
add_header Cache-Control "no-cache, must-revalidate";
|
||||
add_header Content-Type "text/html; charset=utf-8";
|
||||
}
|
||||
# 404 falls back to index.html for SPA-style routing
|
||||
error_page 404 /index.html;
|
||||
}
|
||||
}
|
||||
|
||||
39
package.json
39
package.json
@@ -1,48 +1,40 @@
|
||||
{
|
||||
"name": "mifi-ventures-landing",
|
||||
"version": "4.0.3",
|
||||
"version": "2.0.0",
|
||||
"private": true,
|
||||
"repository": "https://git.mifi.dev/mifi-ventures/landing.git",
|
||||
"packageManager": "pnpm@10.31.0+sha512.e3927388bfaa8078ceb79b748ffc1e8274e84d75163e67bc22e06c0d3aed43dd153151cbf11d7f8301ff4acb98c68bdc5cadf6989532801ffafe3b3e4a63c268",
|
||||
"packageManager": "pnpm@10.28.2",
|
||||
"description": "mifi Ventures landing site — SvelteKit static build with critical CSS inlining",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"build": "vite build && node scripts/beasties.mjs && node scripts/generate-sitemap.mjs && node scripts/minify-static-js.mjs",
|
||||
"build-preview": "pnpm run build && node scripts/copy-410-paths.mjs",
|
||||
"build": "vite build && node scripts/critters.mjs",
|
||||
"dev": "vite dev",
|
||||
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
||||
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
|
||||
"format": "prettier --write \"src/**/*.{ts,js,svelte,css,json}\" \"static/**/*.{css,html,js}\"",
|
||||
"format": "prettier --write \"src/**/*.{ts,js,svelte,css,json}\"",
|
||||
"lint": "eslint .",
|
||||
"lint:fix": "eslint . --fix",
|
||||
"lint:css": "stylelint \"src/**/*.css\" \"src/**/*.svelte\" \"static/**/*.css\"",
|
||||
"lint:css:fix": "stylelint \"src/**/*.css\" \"src/**/*.svelte\" \"static/**/*.css\" --fix",
|
||||
"lint:css": "stylelint \"src/**/*.css\" \"src/**/*.svelte\"",
|
||||
"lint:css:fix": "stylelint \"src/**/*.css\" \"src/**/*.svelte\" --fix",
|
||||
"preview": "serve dist -p 4173",
|
||||
"test": "vitest run",
|
||||
"test:unit": "vitest run",
|
||||
"test:e2e": "bash scripts/run-e2e.sh",
|
||||
"test:e2e:update-snapshots": "bash scripts/update-e2e-snapshots.sh",
|
||||
"test:e2e": "playwright test",
|
||||
"test:all": "vitest run && playwright test",
|
||||
"test:ci": "pnpm run lint && pnpm run lint:css && pnpm exec svelte-kit sync && pnpm test && pnpm run test:e2e && pnpm install --config.confirmModulesPurge=false",
|
||||
"test:watch": "vitest",
|
||||
"prepare": "husky"
|
||||
"test:watch": "vitest"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^10.0.1",
|
||||
"@eslint/js": "^9.39.2",
|
||||
"@playwright/test": "^1.58.1",
|
||||
"@sveltejs/adapter-static": "^3.0.8",
|
||||
"@sveltejs/kit": "^2.15.0",
|
||||
"@sveltejs/vite-plugin-svelte": "^6.2.4",
|
||||
"@types/gtag.js": "^0.0.20",
|
||||
"@sveltejs/vite-plugin-svelte": "^5.0.0",
|
||||
"@typescript-eslint/eslint-plugin": "^8.54.0",
|
||||
"@typescript-eslint/parser": "^8.54.0",
|
||||
"beasties": "^0.4.1",
|
||||
"esbuild": "^0.27.3",
|
||||
"eslint": "^10.0.3",
|
||||
"critters": "^0.0.24",
|
||||
"eslint": "^9.39.2",
|
||||
"eslint-config-prettier": "^10.1.8",
|
||||
"eslint-plugin-svelte": "^3.15.0",
|
||||
"husky": "^9.1.7",
|
||||
"jsdom": "^28.1.0",
|
||||
"eslint-plugin-svelte": "^3.14.0",
|
||||
"postcss-html": "^1.8.1",
|
||||
"postcss-preset-env": "^11.1.2",
|
||||
"prettier": "^3.8.1",
|
||||
@@ -56,10 +48,7 @@
|
||||
"tslib": "^2.8.0",
|
||||
"typescript": "^5.7.0",
|
||||
"typescript-eslint": "^8.54.0",
|
||||
"vite": "^7.3.1",
|
||||
"vite": "^6.0.0",
|
||||
"vitest": "^4.0.18"
|
||||
},
|
||||
"dependencies": {
|
||||
"@lucide/svelte": "^0.577.0"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,9 +2,6 @@ import { defineConfig, devices } from '@playwright/test';
|
||||
|
||||
export default defineConfig({
|
||||
testDir: 'tests',
|
||||
testMatch: /.*\.spec\.(ts|js)/,
|
||||
// Use linux in snapshot paths so local (darwin) runs compare against the same snapshots as CI.
|
||||
snapshotPathTemplate: '{snapshotDir}/{testFileDir}/{testFileName}-snapshots/{arg}-{projectName}-linux{ext}',
|
||||
fullyParallel: true,
|
||||
forbidOnly: !!process.env.CI,
|
||||
retries: process.env.CI ? 2 : 0,
|
||||
@@ -15,10 +12,7 @@ export default defineConfig({
|
||||
trace: 'on-first-retry',
|
||||
screenshot: 'only-on-failure',
|
||||
},
|
||||
projects: [
|
||||
{ name: 'chromium-desktop', use: { ...devices['Desktop Chrome'] } },
|
||||
{ name: 'chromium-mobile', use: { ...devices['iPhone 14'] } },
|
||||
],
|
||||
projects: [{ name: 'chromium', use: { ...devices['Desktop Chrome'] } }],
|
||||
webServer: process.env.CI
|
||||
? undefined
|
||||
: {
|
||||
|
||||
1011
pnpm-lock.yaml
generated
1011
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@@ -1,12 +0,0 @@
|
||||
/**
|
||||
* URL paths that return 410 Gone. Shared by copy-410-paths.mjs and generate-sitemap.mjs.
|
||||
* Keep in sync with nginx.conf location blocks.
|
||||
*/
|
||||
export const PATHS = [
|
||||
'2024/02/18/hello-world',
|
||||
'pt',
|
||||
'feed',
|
||||
'category/uncategorized/feed',
|
||||
'category/uncategorized',
|
||||
'comments/feed',
|
||||
];
|
||||
@@ -1,69 +0,0 @@
|
||||
#!/usr/bin/env node
|
||||
/**
|
||||
* Post-build: inline critical CSS in dist/*.html (SvelteKit adapter-static output).
|
||||
* Runs after vite build; Beasties reads/writes relative to dist/.
|
||||
*
|
||||
* Beasties with preload:'default' adds preload tags; same options as legacy Critters.
|
||||
*/
|
||||
|
||||
import Beasties from 'beasties';
|
||||
import fs from 'fs';
|
||||
import path from 'path';
|
||||
import { fileURLToPath } from 'url';
|
||||
|
||||
const __dirname = path.dirname(fileURLToPath(import.meta.url));
|
||||
const ROOT = path.join(__dirname, '..');
|
||||
const DIST = path.join(ROOT, 'dist');
|
||||
|
||||
async function main() {
|
||||
if (!fs.existsSync(DIST)) {
|
||||
console.error('dist/ not found. Run vite build first.');
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
const beasties = new Beasties({
|
||||
path: DIST,
|
||||
preload: 'default',
|
||||
noscriptFallback: true,
|
||||
pruneSource: false,
|
||||
logLevel: 'warn',
|
||||
});
|
||||
|
||||
const rootFiles = fs.readdirSync(DIST)
|
||||
.filter((f) => f.endsWith('.html'))
|
||||
.map((f) => path.join(DIST, f));
|
||||
|
||||
const servicesDir = path.join(DIST, 'services');
|
||||
const serviceFiles = [];
|
||||
|
||||
if (fs.existsSync(servicesDir)) {
|
||||
const walk = (dir) => {
|
||||
for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
|
||||
const fullPath = path.join(dir, entry.name);
|
||||
if (entry.isDirectory()) {
|
||||
walk(fullPath);
|
||||
} else if (entry.isFile() && entry.name.endsWith('.html')) {
|
||||
serviceFiles.push(fullPath);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
walk(servicesDir);
|
||||
}
|
||||
|
||||
const files = [...rootFiles, ...serviceFiles];
|
||||
|
||||
for (const filePath of files) {
|
||||
let html = fs.readFileSync(filePath, 'utf8');
|
||||
html = await beasties.process(html);
|
||||
fs.writeFileSync(filePath, html, 'utf8');
|
||||
console.log('✓ Critical CSS inlined → dist/' + path.relative(DIST, filePath));
|
||||
}
|
||||
|
||||
console.log('Critical CSS step complete.');
|
||||
}
|
||||
|
||||
main().catch((err) => {
|
||||
console.error(err);
|
||||
process.exit(1);
|
||||
});
|
||||
@@ -1,32 +0,0 @@
|
||||
#!/usr/bin/env node
|
||||
/**
|
||||
* Post-build: copy 410.html to each 410-Gone URL path as index.html.
|
||||
* So static preview (serve dist) shows the 410 page at those URLs.
|
||||
* nginx still returns 410 for these paths via explicit location blocks.
|
||||
*/
|
||||
|
||||
import fs from 'fs';
|
||||
import path from 'path';
|
||||
import { fileURLToPath } from 'url';
|
||||
|
||||
import { PATHS } from './410-paths.mjs';
|
||||
|
||||
const __dirname = path.dirname(fileURLToPath(import.meta.url));
|
||||
const DIST = path.join(__dirname, '..', 'dist');
|
||||
const SOURCE = path.join(DIST, '410.html');
|
||||
|
||||
function main() {
|
||||
if (!fs.existsSync(SOURCE)) {
|
||||
console.error('dist/410.html not found. Run build first.');
|
||||
process.exit(1);
|
||||
}
|
||||
const content = fs.readFileSync(SOURCE, 'utf8');
|
||||
for (const dir of PATHS) {
|
||||
const dirPath = path.join(DIST, dir);
|
||||
fs.mkdirSync(dirPath, { recursive: true });
|
||||
fs.writeFileSync(path.join(dirPath, 'index.html'), content, 'utf8');
|
||||
}
|
||||
console.log('✓ 410 page copied to', PATHS.length, 'paths for preview.');
|
||||
}
|
||||
|
||||
main();
|
||||
71
scripts/critters.mjs
Normal file
71
scripts/critters.mjs
Normal file
@@ -0,0 +1,71 @@
|
||||
#!/usr/bin/env node
|
||||
/**
|
||||
* Post-build: inline critical CSS in dist/*.html (SvelteKit adapter-static output).
|
||||
* Runs after vite build; Critters reads/writes relative to dist/.
|
||||
*
|
||||
* Critters with preload:'swap' adds onload but does not set rel="preload" as="style",
|
||||
* so the link stays render-blocking. We fix that in postProcessSwapLinks().
|
||||
*/
|
||||
|
||||
import Critters from 'critters';
|
||||
import fs from 'fs';
|
||||
import path from 'path';
|
||||
import { fileURLToPath } from 'url';
|
||||
|
||||
const __dirname = path.dirname(fileURLToPath(import.meta.url));
|
||||
const ROOT = path.join(__dirname, '..');
|
||||
const DIST = path.join(ROOT, 'dist');
|
||||
|
||||
/**
|
||||
* Critters leaves rel="stylesheet" on swap links; change to rel="preload" as="style"
|
||||
* so the full CSS loads async and only applies on load (non-blocking).
|
||||
*/
|
||||
// function postProcessSwapLinks(html) {
|
||||
// return html.replace(/<link\s+([^>]*)>/gi, (full, attrs) => {
|
||||
// if (
|
||||
// !/rel="stylesheet"/i.test(attrs) ||
|
||||
// !/onload="this\.rel='stylesheet'"/i.test(attrs)
|
||||
// ) {
|
||||
// return full;
|
||||
// }
|
||||
// const fixed = attrs
|
||||
// .replace(/\brel="stylesheet"\s*/i, 'rel="preload" as="style" ')
|
||||
// .replace(
|
||||
// /\bonload="this\.rel='stylesheet'"/i,
|
||||
// 'onload="this.onload=null;this.rel=\'stylesheet\'"',
|
||||
// );
|
||||
// return `<link ${fixed}>`;
|
||||
// });
|
||||
// }
|
||||
|
||||
async function main() {
|
||||
if (!fs.existsSync(DIST)) {
|
||||
console.error('dist/ not found. Run vite build first.');
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
const critters = new Critters({
|
||||
path: DIST,
|
||||
preload: 'default',
|
||||
noscriptFallback: true,
|
||||
pruneSource: false,
|
||||
logLevel: 'warn',
|
||||
});
|
||||
|
||||
const files = fs.readdirSync(DIST).filter((f) => f.endsWith('.html'));
|
||||
for (const file of files) {
|
||||
const filePath = path.join(DIST, file);
|
||||
let html = fs.readFileSync(filePath, 'utf8');
|
||||
html = await critters.process(html);
|
||||
// html = postProcessSwapLinks(html);
|
||||
fs.writeFileSync(filePath, html, 'utf8');
|
||||
console.log('✓ Critical CSS inlined → dist/' + file);
|
||||
}
|
||||
|
||||
console.log('Critical CSS step complete.');
|
||||
}
|
||||
|
||||
main().catch((err) => {
|
||||
console.error(err);
|
||||
process.exit(1);
|
||||
});
|
||||
@@ -1,99 +0,0 @@
|
||||
#!/usr/bin/env node
|
||||
/**
|
||||
* Post-build: generate sitemap.xml from prerendered pages in dist/.
|
||||
* Scans for index.html (root and under each path), excludes 410 paths.
|
||||
* Run after vite build and beasties, before copy-410-paths so 410 dirs don't exist yet.
|
||||
*/
|
||||
|
||||
import fs from 'fs';
|
||||
import path from 'path';
|
||||
import { fileURLToPath } from 'url';
|
||||
|
||||
import { PATHS as PATHS_410 } from './410-paths.mjs';
|
||||
|
||||
const __dirname = path.dirname(fileURLToPath(import.meta.url));
|
||||
const DIST = path.join(__dirname, '..', 'dist');
|
||||
|
||||
/** Must match src/lib/seo.ts SEO_DEFAULTS.baseUrl */
|
||||
const BASE_URL = 'https://mifi.ventures';
|
||||
|
||||
const EXCLUDE_FILES = new Set(['404.html', '410.html']);
|
||||
const excludeSet = new Set(PATHS_410);
|
||||
|
||||
/**
|
||||
* adapter-static emits path.html or path/index.html. Walk dist and collect
|
||||
* every .html that represents a page (exclude 404/410 and 410-gone paths).
|
||||
*/
|
||||
function findPages(dir, basePath = '') {
|
||||
const entries = fs.readdirSync(dir, { withFileTypes: true });
|
||||
const pages = [];
|
||||
|
||||
for (const e of entries) {
|
||||
const rel = basePath ? `${basePath}/${e.name}` : e.name;
|
||||
|
||||
if (e.isDirectory()) {
|
||||
const indexPath = path.join(dir, e.name, 'index.html');
|
||||
if (fs.existsSync(indexPath)) {
|
||||
if (!excludeSet.has(rel)) {
|
||||
pages.push({ path: rel, indexPath });
|
||||
}
|
||||
} else {
|
||||
pages.push(...findPages(path.join(dir, e.name), rel));
|
||||
}
|
||||
} else if (e.name.endsWith('.html') && !EXCLUDE_FILES.has(e.name)) {
|
||||
const urlPath = e.name === 'index.html'
|
||||
? basePath
|
||||
: (basePath ? `${basePath}/${e.name.slice(0, -5)}` : e.name.slice(0, -5));
|
||||
if (!excludeSet.has(urlPath)) {
|
||||
pages.push({ path: urlPath, indexPath: path.join(dir, e.name) });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return pages;
|
||||
}
|
||||
|
||||
function escapeXml(s) {
|
||||
return s
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/"/g, '"')
|
||||
.replace(/'/g, ''');
|
||||
}
|
||||
|
||||
function main() {
|
||||
const indexHtml = path.join(DIST, 'index.html');
|
||||
if (!fs.existsSync(indexHtml)) {
|
||||
console.error('dist/index.html not found. Run build first.');
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
const pages = findPages(DIST).sort((a, b) => {
|
||||
if (a.path === '') return -1;
|
||||
if (b.path === '') return 1;
|
||||
return a.path.localeCompare(b.path);
|
||||
});
|
||||
const urlElements = [];
|
||||
|
||||
for (const { path: pagePath, indexPath } of pages) {
|
||||
const loc = pagePath ? `${BASE_URL}/${pagePath}` : BASE_URL;
|
||||
const stat = fs.statSync(indexPath);
|
||||
const lastmod = stat.mtime.toISOString().slice(0, 10);
|
||||
|
||||
urlElements.push(
|
||||
` <url>\n <loc>${escapeXml(loc)}</loc>\n <lastmod>${lastmod}</lastmod>\n </url>`
|
||||
);
|
||||
}
|
||||
|
||||
const xml = `<?xml version="1.0" encoding="UTF-8"?>
|
||||
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
|
||||
${urlElements.join('\n')}
|
||||
</urlset>
|
||||
`;
|
||||
|
||||
fs.writeFileSync(path.join(DIST, 'sitemap.xml'), xml, 'utf8');
|
||||
console.log('✓ sitemap.xml generated with', pages.length, 'URLs.');
|
||||
}
|
||||
|
||||
main();
|
||||
@@ -1,45 +0,0 @@
|
||||
#!/usr/bin/env node
|
||||
/**
|
||||
* Post-build: minify all JS in dist/assets/js/ (static scripts copied from static/assets/js/).
|
||||
* Runs after vite build (and optionally after beasties). Uses esbuild for minification.
|
||||
*/
|
||||
|
||||
import * as esbuild from 'esbuild';
|
||||
import fs from 'fs';
|
||||
import path from 'path';
|
||||
import { fileURLToPath } from 'url';
|
||||
|
||||
const __dirname = path.dirname(fileURLToPath(import.meta.url));
|
||||
const ROOT = path.join(__dirname, '..');
|
||||
const JS_DIR = path.join(ROOT, 'dist', 'assets', 'js');
|
||||
|
||||
async function main() {
|
||||
if (!fs.existsSync(JS_DIR)) {
|
||||
console.warn('dist/assets/js/ not found; skipping static JS minify.');
|
||||
return;
|
||||
}
|
||||
|
||||
const files = fs.readdirSync(JS_DIR).filter((f) => f.endsWith('.js'));
|
||||
if (files.length === 0) {
|
||||
console.warn('No .js files in dist/assets/js/; skipping.');
|
||||
return;
|
||||
}
|
||||
|
||||
for (const file of files) {
|
||||
const filePath = path.join(JS_DIR, file);
|
||||
const code = fs.readFileSync(filePath, 'utf8');
|
||||
const result = await esbuild.transform(code, {
|
||||
minify: true,
|
||||
target: 'es2015',
|
||||
});
|
||||
fs.writeFileSync(filePath, result.code, 'utf8');
|
||||
console.log('✓ Minified dist/assets/js/' + file);
|
||||
}
|
||||
|
||||
console.log('Static JS minify complete.');
|
||||
}
|
||||
|
||||
main().catch((err) => {
|
||||
console.error(err);
|
||||
process.exit(1);
|
||||
});
|
||||
@@ -1,28 +0,0 @@
|
||||
#!/usr/bin/env bash
|
||||
# Run Playwright e2e tests in the same Docker image as CI (and as snapshot generation).
|
||||
# Use when running locally on macOS/Windows so tests mirror CI; in CI or devcontainer use pnpm test:e2e directly.
|
||||
set -e
|
||||
|
||||
SCRIPT_DIR="${BASH_SOURCE%/*}"
|
||||
PROJECT_ROOT="${SCRIPT_DIR}/.."
|
||||
cd "$PROJECT_ROOT"
|
||||
PROJECT_ROOT="$(pwd)"
|
||||
|
||||
PLAYWRIGHT_IMAGE="${PLAYWRIGHT_IMAGE:-mcr.microsoft.com/playwright:v1.58.0-noble}"
|
||||
echo "Running e2e tests in Docker image: $PLAYWRIGHT_IMAGE (same as CI)"
|
||||
echo "Project root: $PROJECT_ROOT"
|
||||
echo ""
|
||||
|
||||
docker run --rm \
|
||||
-v "$PROJECT_ROOT:/app" -w /app \
|
||||
-e CI=1 \
|
||||
"$PLAYWRIGHT_IMAGE" \
|
||||
bash -c '
|
||||
corepack enable && corepack prepare pnpm@10.28.2 --activate
|
||||
pnpm install --no-frozen-lockfile || pnpm install
|
||||
pnpm run build
|
||||
npx serve dist -p 4173 &
|
||||
sleep 2
|
||||
pnpm exec playwright test
|
||||
pnpm install --config.confirmModulesPurge=false
|
||||
'
|
||||
@@ -1,21 +0,0 @@
|
||||
#!/usr/bin/env bash
|
||||
# Run Playwright e2e tests. Mirrors CI when possible.
|
||||
# - In CI: run playwright test (pipeline already built and started serve).
|
||||
# - Local with Docker: run tests in same Playwright image as CI (run-e2e-in-docker.sh).
|
||||
# - Local without Docker (e.g. devcontainer): build and run playwright test (webServer in config).
|
||||
set -e
|
||||
|
||||
if [ -n "$CI" ]; then
|
||||
pnpm exec playwright test
|
||||
exit 0
|
||||
fi
|
||||
|
||||
if command -v docker >/dev/null 2>&1; then
|
||||
bash "$(dirname "$0")/run-e2e-in-docker.sh"
|
||||
pnpm install --config.confirmModulesPurge=false
|
||||
exit 0
|
||||
fi
|
||||
|
||||
# No Docker: run in current environment (e.g. devcontainer; same image as CI)
|
||||
pnpm run build
|
||||
pnpm exec playwright test
|
||||
@@ -1,44 +0,0 @@
|
||||
#!/usr/bin/env bash
|
||||
# Regenerate Playwright visual regression snapshots.
|
||||
# - In the devcontainer (Playwright Noble): same image as CI, snapshot matches CI.
|
||||
# - When Docker is available on host: runs in the same image as CI for a CI-accurate baseline.
|
||||
# - Otherwise: run the update-e2e-snapshots workflow in Woodpecker (manual pipeline).
|
||||
set -e
|
||||
|
||||
SCRIPT_DIR="${BASH_SOURCE%/*}"
|
||||
PROJECT_ROOT="${SCRIPT_DIR}/.."
|
||||
cd "$PROJECT_ROOT"
|
||||
PROJECT_ROOT="$(pwd)"
|
||||
|
||||
if command -v docker >/dev/null 2>&1; then
|
||||
PLAYWRIGHT_IMAGE="${PLAYWRIGHT_IMAGE:-mcr.microsoft.com/playwright:v1.58.0-noble}"
|
||||
echo "Using Docker image: $PLAYWRIGHT_IMAGE (same as CI)"
|
||||
echo "Project root: $PROJECT_ROOT"
|
||||
echo ""
|
||||
|
||||
docker run --rm \
|
||||
-v "$PROJECT_ROOT:/app" -w /app \
|
||||
-e CI=1 \
|
||||
"$PLAYWRIGHT_IMAGE" \
|
||||
bash -c '
|
||||
corepack enable && corepack prepare pnpm@10.28.2 --activate
|
||||
pnpm install --frozen-lockfile || pnpm install
|
||||
pnpm run build
|
||||
npx serve dist -p 4173 &
|
||||
sleep 2
|
||||
pnpm exec playwright test --update-snapshots
|
||||
'
|
||||
pnpm install --config.confirmModulesPurge=false
|
||||
else
|
||||
echo "Updating snapshots in the current environment (matches CI when using the devcontainer)."
|
||||
echo ""
|
||||
|
||||
pnpm run build
|
||||
|
||||
# Unset CI so Playwright config starts the preview server
|
||||
unset CI
|
||||
pnpm exec playwright test --update-snapshots
|
||||
fi
|
||||
|
||||
echo ""
|
||||
echo "Snapshots updated. Commit the changed files under tests/visual.spec.ts-snapshots/ if needed."
|
||||
8
site/assets/js/ga-init.js
Normal file
8
site/assets/js/ga-init.js
Normal file
@@ -0,0 +1,8 @@
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){ window.dataLayer.push(arguments); }
|
||||
|
||||
gtag("js", new Date());
|
||||
gtag("config", "G-36F29PDKRT", {
|
||||
// optional, but often helpful:
|
||||
anonymize_ip: true,
|
||||
});
|
||||
120
src/app.css
120
src/app.css
@@ -32,7 +32,6 @@
|
||||
--font-family-heading: 'Fraunces', ui-serif, Georgia, 'Times New Roman', serif;
|
||||
|
||||
--font-size-base: 18px;
|
||||
--font-size-xs: 14px;
|
||||
--font-size-small: 15px;
|
||||
--font-size-medium: 16px;
|
||||
--font-size-large: 20px;
|
||||
@@ -131,50 +130,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Local Font Faces
|
||||
======================================== */
|
||||
|
||||
@font-face {
|
||||
font-family: Inter;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url('/assets/fonts/inter-v20-latin-regular.woff2') format('woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Inter;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-display: swap;
|
||||
src: url('/assets/fonts/inter-v20-latin-500.woff2') format('woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Inter;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url('/assets/fonts/inter-v20-latin-700.woff2') format('woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Fraunces;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-display: swap;
|
||||
src: url('/assets/fonts/fraunces-v38-latin-600.woff2') format('woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Fraunces;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url('/assets/fonts/fraunces-v38-latin-700.woff2') format('woff2');
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Base Styles
|
||||
======================================== */
|
||||
@@ -222,11 +177,6 @@ body {
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
strong,
|
||||
b {
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Skip Link (Accessibility)
|
||||
======================================== */
|
||||
@@ -373,20 +323,11 @@ a {
|
||||
Layout Containers
|
||||
======================================== */
|
||||
|
||||
/* Avoid in-page anchor targets sitting under sticky nav */
|
||||
[id] {
|
||||
scroll-margin-top: 6rem;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: var(--max-width);
|
||||
margin: 0 auto;
|
||||
padding: 0 var(--space-md);
|
||||
|
||||
&.narrow {
|
||||
max-width: var(--max-narrow-width);
|
||||
}
|
||||
}
|
||||
|
||||
.section {
|
||||
@@ -432,21 +373,6 @@ a {
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
&.small {
|
||||
border-radius: var(--border-radius-small);
|
||||
font-size: var(--font-size-xs);
|
||||
min-height: 36px;
|
||||
min-width: fit-content;
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--space-xs);
|
||||
}
|
||||
|
||||
/* PRIMARY CTA
|
||||
@@ -548,52 +474,6 @@ a {
|
||||
top: 0.1em;
|
||||
}
|
||||
}
|
||||
|
||||
&.ordered {
|
||||
list-style: decimal;
|
||||
padding-left: var(--space-xl);
|
||||
|
||||
& li {
|
||||
padding-left: var(--space-sm);
|
||||
|
||||
&::before {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Services Landing: Card Grid, Engagements, Ideal
|
||||
======================================== */
|
||||
|
||||
.engagements-list {
|
||||
margin: var(--space-lg) 0;
|
||||
|
||||
& dt {
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--color-text);
|
||||
margin-top: var(--space-lg);
|
||||
margin-bottom: var(--space-xs);
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
& dd {
|
||||
margin: 0 0 0 var(--space-md);
|
||||
color: var(--color-text-secondary);
|
||||
line-height: var(--line-height-relaxed);
|
||||
}
|
||||
}
|
||||
|
||||
.services-intro {
|
||||
background-color: var(--color-bg-alt);
|
||||
}
|
||||
|
||||
.services-ideal {
|
||||
background-color: var(--color-bg-alt);
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
|
||||
@@ -1,61 +0,0 @@
|
||||
<script lang="ts">
|
||||
interface BreadcrumbItem {
|
||||
label: string;
|
||||
href?: string;
|
||||
}
|
||||
|
||||
const {
|
||||
items = [],
|
||||
}: {
|
||||
items: BreadcrumbItem[];
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
<nav class="section breadcrumbs" aria-label="Breadcrumbs">
|
||||
<div class="container">
|
||||
<ol class="list">
|
||||
{#each items as item, index}
|
||||
<li class="item">
|
||||
{#if item.href}
|
||||
<a href={item.href}>{item.label}</a>
|
||||
{#if index < items.length - 1}<span
|
||||
class="separator"
|
||||
aria-hidden="true">></span
|
||||
>{/if}
|
||||
{:else}
|
||||
{item.label}
|
||||
{/if}
|
||||
</li>
|
||||
{/each}
|
||||
</ol>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<style>
|
||||
.breadcrumbs {
|
||||
padding: var(--space-md) 0;
|
||||
font-size: var(--font-size-small);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.list {
|
||||
display: inline-block;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.item {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.item a {
|
||||
color: var(--color-text-secondary);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.separator {
|
||||
font-size: var(--font-size-small);
|
||||
margin-inline: var(--space-xs);
|
||||
}
|
||||
</style>
|
||||
@@ -1,37 +0,0 @@
|
||||
<script lang="ts">
|
||||
import type { EngagementItem } from '$lib/types/service-page';
|
||||
|
||||
const {
|
||||
items,
|
||||
sectionId = 'how-engagements-work',
|
||||
headingId = 'engagements-heading',
|
||||
heading = 'How engagements work',
|
||||
intro,
|
||||
outro,
|
||||
}: {
|
||||
items: EngagementItem[];
|
||||
sectionId?: string;
|
||||
headingId?: string;
|
||||
heading?: string;
|
||||
intro?: string;
|
||||
outro?: string;
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
<section id={sectionId} class="section" aria-labelledby={headingId}>
|
||||
<div class="container narrow">
|
||||
<h2 id={headingId}>{heading}</h2>
|
||||
{#if intro}
|
||||
<p>{intro}</p>
|
||||
{/if}
|
||||
<dl class="engagements-list">
|
||||
{#each items as item}
|
||||
<dt>{item.term}</dt>
|
||||
<dd>{item.definition}</dd>
|
||||
{/each}
|
||||
</dl>
|
||||
{#if outro}
|
||||
<p>{outro}</p>
|
||||
{/if}
|
||||
</div>
|
||||
</section>
|
||||
@@ -1,5 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { engagements } from '$lib/data/home/engagements';
|
||||
import { engagements } from '$lib/data/engagements';
|
||||
</script>
|
||||
|
||||
<section id="engagements" class="section" aria-labelledby="engagements-heading">
|
||||
@@ -1,5 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { experienceLogos, experienceTextList } from '$lib/data/home/experience';
|
||||
import { experienceLogos, experienceTextList } from '$lib/data/experience';
|
||||
</script>
|
||||
|
||||
<section
|
||||
@@ -8,10 +8,12 @@
|
||||
aria-labelledby="experience-heading"
|
||||
>
|
||||
<div class="container">
|
||||
<h2 id="experience-heading" class="section-title">Previously at:</h2>
|
||||
<h2 id="experience-heading" class="section-title">
|
||||
Experience includes teams at:
|
||||
</h2>
|
||||
|
||||
<div class="logo-strip" role="list" aria-label="Company logos">
|
||||
{#each experienceLogos.filter((logo) => logo.showLogo) as logo (logo.alt)}
|
||||
{#each experienceLogos as logo (logo.alt)}
|
||||
<div class="logo-item" role="listitem">
|
||||
<img
|
||||
src={logo.src}
|
||||
@@ -1,85 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/state';
|
||||
import type { FaqList } from '$lib/types/faq';
|
||||
|
||||
const BASE = 'https://mifi.ventures';
|
||||
const PAGE_URL = `${BASE}${page.url?.pathname ?? '/'}`;
|
||||
|
||||
const {
|
||||
faqList,
|
||||
title = 'FAQ',
|
||||
}: {
|
||||
faqList: FaqList;
|
||||
title?: string;
|
||||
} = $props();
|
||||
|
||||
const faqPageJsonLd = $derived(
|
||||
JSON.stringify({
|
||||
'@context': 'https://schema.org',
|
||||
'@type': 'FAQPage',
|
||||
'@id': `${PAGE_URL}#faq`,
|
||||
mainEntity: faqList.map((item) => ({
|
||||
'@type': 'Question',
|
||||
name: item.question,
|
||||
acceptedAnswer: {
|
||||
'@type': 'Answer',
|
||||
text: item.answer,
|
||||
},
|
||||
})),
|
||||
}),
|
||||
);
|
||||
|
||||
const jsonLdHtml = $derived(
|
||||
faqPageJsonLd
|
||||
? '<scr' +
|
||||
'ipt type="application/ld+json">' +
|
||||
faqPageJsonLd +
|
||||
'</scr' +
|
||||
'ipt>'
|
||||
: '',
|
||||
);
|
||||
</script>
|
||||
|
||||
<section id="faq" class="section faq" aria-labelledby="faq-heading">
|
||||
<div class="container narrow">
|
||||
<h2 id="faq-heading">{title}</h2>
|
||||
<dl class="faq-list">
|
||||
{#each faqList as { question, answer }, index (index)}
|
||||
<dt>{question}</dt>
|
||||
<dd>{answer}</dd>
|
||||
{/each}
|
||||
</dl>
|
||||
</div>
|
||||
{#if jsonLdHtml}
|
||||
<!-- eslint-disable-next-line svelte/no-at-html-tags -- static trusted JSON-LD -->
|
||||
{@html jsonLdHtml}
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.faq {
|
||||
background-color: var(--color-bg-alt);
|
||||
}
|
||||
|
||||
.faq-list {
|
||||
margin: 0;
|
||||
|
||||
& dt {
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--color-text);
|
||||
margin-top: var(--space-xl);
|
||||
margin-bottom: var(--space-sm);
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
& dd {
|
||||
margin: 0 0 0 var(--space-md);
|
||||
color: var(--color-text-secondary);
|
||||
line-height: var(--line-height-relaxed);
|
||||
max-width: var(--max-text-width);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,65 +1,22 @@
|
||||
<script lang="ts">
|
||||
import LinkedInIcon from './Icon/LinkedIn.svelte';
|
||||
import GithubIcon from './Icon/Github.svelte';
|
||||
import ExternalLinkIcon from './Icon/ExternalLink.svelte';
|
||||
</script>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<p class="copyright">
|
||||
© <span id="copyright-year">2026</span> mifi Ventures, LLC. All rights reserved.
|
||||
© <span id="copyright-year">2026</span> mifi Ventures, LLC · Boston, MA
|
||||
</p>
|
||||
<nav class="footer-links footer-links-wrap" aria-label="Footer links">
|
||||
<nav class="footer-links" aria-label="Social media links">
|
||||
<a
|
||||
class="link"
|
||||
href="https://linkedin.com/in/the-mifi"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="LinkedIn profile (opens in new tab)"
|
||||
data-umami-event="footer link"
|
||||
data-umami-event-label="linkedin"
|
||||
aria-label="LinkedIn profile (opens in new tab)">LinkedIn</a
|
||||
>
|
||||
<LinkedInIcon size={15} />
|
||||
LinkedIn
|
||||
<ExternalLinkIcon aria-label="Opens in new tab" size={15} />
|
||||
</a>
|
||||
<a
|
||||
class="link"
|
||||
href="https://github.com/the-mifi"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="GitHub profile (opens in new tab)"
|
||||
data-umami-event="footer link"
|
||||
data-umami-event-label="github"
|
||||
aria-label="GitHub profile (opens in new tab)">GitHub</a
|
||||
>
|
||||
<GithubIcon size={15} />
|
||||
GitHub
|
||||
<ExternalLinkIcon aria-label="Opens in new tab" size={15} />
|
||||
</a>
|
||||
<a
|
||||
class="link"
|
||||
href="/privacy-policy"
|
||||
data-umami-event="footer link"
|
||||
data-umami-event-label="privacy-policy"
|
||||
>
|
||||
Privacy Policy
|
||||
</a>
|
||||
<a
|
||||
class="link"
|
||||
href="/terms-of-service"
|
||||
data-umami-event="footer link"
|
||||
data-umami-event-label="terms-of-service"
|
||||
>
|
||||
Terms of Service
|
||||
</a>
|
||||
</nav>
|
||||
<p class="legal-notice">
|
||||
We improve our products and advertising by using Google Analytics and
|
||||
Microsoft Clarity to see how you use our website. By using our site, you agree
|
||||
that we and Microsoft can collect and use this data. Our <a
|
||||
href="/privacy-policy">privacy policy</a
|
||||
> has more details.
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -78,33 +35,4 @@
|
||||
color: var(--color-text-tertiary);
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.footer-links-wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--space-xs);
|
||||
}
|
||||
|
||||
.legal-notice {
|
||||
margin-top: var(--space-md);
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: var(--font-weight-normal);
|
||||
color: var(--color-text-tertiary);
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.legal-notice a {
|
||||
color: var(--color-primary);
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 0.2em;
|
||||
}
|
||||
|
||||
.legal-notice a:hover {
|
||||
color: var(--color-primary-hover);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,58 +1,33 @@
|
||||
<script lang="ts">
|
||||
import ExternalLinkIcon from '$lib/components/Icon/ExternalLink.svelte';
|
||||
|
||||
interface SecondaryCta {
|
||||
href: string;
|
||||
label: string;
|
||||
umamiEventLabel: string;
|
||||
}
|
||||
|
||||
const {
|
||||
title,
|
||||
subtitle,
|
||||
bookingLinkTitle,
|
||||
bookingLinkUrl,
|
||||
secondaryCta,
|
||||
}: {
|
||||
title: string;
|
||||
subtitle: string;
|
||||
bookingLinkTitle: string;
|
||||
bookingLinkUrl: string;
|
||||
secondaryCta?: SecondaryCta;
|
||||
} = $props();
|
||||
import Logo from './Logo.svelte';
|
||||
</script>
|
||||
|
||||
<header id="header" class="hero">
|
||||
<div class="container">
|
||||
<h1 class="title">
|
||||
{title}
|
||||
</h1>
|
||||
<p class="subtitle">
|
||||
{subtitle}
|
||||
<Logo />
|
||||
<p class="headline">Software Engineering Consulting</p>
|
||||
<p class="subhead">
|
||||
Principal: Mike Fitzpatrick — senior full-stack engineer and architect helping
|
||||
teams ship reliable, accessible, high-performance web products.
|
||||
</p>
|
||||
<div class="cta-group">
|
||||
<a
|
||||
href={bookingLinkUrl}
|
||||
class="btn btn-primary icon-button"
|
||||
href="https://cal.mifi.ventures/the-mifi/30min?utm_source=website&utm_medium=cta&utm_campaign=schedule_call&utm_medium=hero_cta"
|
||||
class="btn btn-primary"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label={`${bookingLinkTitle} (opens in new tab)`}
|
||||
data-umami-event="book discovery call"
|
||||
data-umami-event-location="hero"
|
||||
aria-label="Schedule a 30-minute intro call (opens in new tab)"
|
||||
>
|
||||
{bookingLinkTitle}
|
||||
<ExternalLinkIcon aria-label="Opens in new tab" size={17} />
|
||||
Schedule a 30-minute intro call
|
||||
</a>
|
||||
<a
|
||||
href="/downloads/resume.pdf"
|
||||
class="btn btn-secondary"
|
||||
download
|
||||
aria-label="Download Mike Fitzpatrick's resume as PDF"
|
||||
>
|
||||
Download resume
|
||||
</a>
|
||||
{#if secondaryCta}
|
||||
<a
|
||||
href={secondaryCta.href}
|
||||
class="btn btn-secondary"
|
||||
data-umami-event={secondaryCta.umamiEventLabel}
|
||||
data-umami-event-location="hero"
|
||||
>
|
||||
{secondaryCta.label}
|
||||
</a>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
@@ -63,20 +38,26 @@
|
||||
text-align: center;
|
||||
background-color: var(--color-bg);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding: var(--space-xxl) 0 var(--space-xl) 0;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
padding: var(--space-xl) 0 var(--space-lg) 0;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
.headline {
|
||||
margin-bottom: var(--space-lg);
|
||||
font-family: var(--font-family-heading);
|
||||
font-size: var(--font-size-xxl);
|
||||
font-weight: var(--font-weight-bold);
|
||||
letter-spacing: -0.03em;
|
||||
max-width: var(--max-text-width);
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
font-size: var(--font-size-xl);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--color-text);
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
.subhead {
|
||||
max-width: var(--max-narrow-width);
|
||||
margin: 0 auto var(--space-xl) auto;
|
||||
font-size: var(--font-size-large);
|
||||
@@ -92,10 +73,8 @@
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: var(--space-lg);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.cta-group {
|
||||
@media (max-width: 768px) {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
14
src/lib/components/HowWeWork.svelte
Normal file
14
src/lib/components/HowWeWork.svelte
Normal file
@@ -0,0 +1,14 @@
|
||||
<script lang="ts">
|
||||
import { howWeWorkItems } from '$lib/data/content';
|
||||
</script>
|
||||
|
||||
<section id="how-we-work" class="section" aria-labelledby="how-we-work-heading">
|
||||
<div class="container">
|
||||
<h2 id="how-we-work-heading" class="section-title">How We Work</h2>
|
||||
<ul class="content-list">
|
||||
{#each howWeWorkItems as item (item)}
|
||||
<li>{item}</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
@@ -1,30 +0,0 @@
|
||||
<script lang="ts">
|
||||
const {
|
||||
'aria-label': ariaLabel,
|
||||
class: className,
|
||||
color = 'currentColor',
|
||||
size,
|
||||
} = $props<{
|
||||
'aria-label'?: string;
|
||||
class?: string;
|
||||
color?: string;
|
||||
size?: number;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill={color}
|
||||
class={className}
|
||||
aria-label={ariaLabel}
|
||||
aria-hidden={!ariaLabel}
|
||||
role={ariaLabel ? undefined : 'presentation'}
|
||||
width={size}
|
||||
height={size}
|
||||
>
|
||||
<path
|
||||
d="M10 6V8H5V19H16V14H18V20C18 20.5523 17.5523 21 17 21H4C3.44772 21 3 20.5523 3 20V7C3 6.44772 3.44772 6 4 6H10ZM21 3V11H19L18.9999 6.413L11.2071 14.2071L9.79289 12.7929L17.5849 5H13V3H21Z"
|
||||
>
|
||||
</path>
|
||||
</svg>
|
||||
@@ -1,30 +0,0 @@
|
||||
<script lang="ts">
|
||||
const {
|
||||
'aria-label': ariaLabel,
|
||||
class: className,
|
||||
color = 'currentColor',
|
||||
size,
|
||||
} = $props<{
|
||||
'aria-label'?: string;
|
||||
class?: string;
|
||||
color?: string;
|
||||
size?: number;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill={color}
|
||||
class={className}
|
||||
aria-label={ariaLabel}
|
||||
aria-hidden={!ariaLabel}
|
||||
role={ariaLabel ? undefined : 'presentation'}
|
||||
width={size}
|
||||
height={size}
|
||||
>
|
||||
<path
|
||||
d="M5 4H15V8H19V20H5V4ZM3.9985 2C3.44749 2 3 2.44405 3 2.9918V21.0082C3 21.5447 3.44476 22 3.9934 22H20.0066C20.5551 22 21 21.5489 21 20.9925L20.9997 7L16 2H3.9985ZM10.4999 7.5C10.4999 9.07749 10.0442 10.9373 9.27493 12.6534C8.50287 14.3757 7.46143 15.8502 6.37524 16.7191L7.55464 18.3321C10.4821 16.3804 13.7233 15.0421 16.8585 15.49L17.3162 13.5513C14.6435 12.6604 12.4999 9.98994 12.4999 7.5H10.4999ZM11.0999 13.4716C11.3673 12.8752 11.6042 12.2563 11.8037 11.6285C12.2753 12.3531 12.8553 13.0182 13.5101 13.5953C12.5283 13.7711 11.5665 14.0596 10.6352 14.4276C10.7999 14.1143 10.9551 13.7948 11.0999 13.4716Z"
|
||||
>
|
||||
</path>
|
||||
</svg>
|
||||
@@ -1,30 +0,0 @@
|
||||
<script lang="ts">
|
||||
const {
|
||||
'aria-label': ariaLabel,
|
||||
class: className,
|
||||
color = 'currentColor',
|
||||
size,
|
||||
} = $props<{
|
||||
'aria-label'?: string;
|
||||
class?: string;
|
||||
color?: string;
|
||||
size?: number;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill={color}
|
||||
class={className}
|
||||
aria-label={ariaLabel}
|
||||
aria-hidden={!ariaLabel}
|
||||
role={ariaLabel ? undefined : 'presentation'}
|
||||
width={size}
|
||||
height={size}
|
||||
>
|
||||
<path
|
||||
d="M12.001 2C6.47598 2 2.00098 6.475 2.00098 12C2.00098 16.425 4.86348 20.1625 8.83848 21.4875C9.33848 21.575 9.52598 21.275 9.52598 21.0125C9.52598 20.775 9.51348 19.9875 9.51348 19.15C7.00098 19.6125 6.35098 18.5375 6.15098 17.975C6.03848 17.6875 5.55098 16.8 5.12598 16.5625C4.77598 16.375 4.27598 15.9125 5.11348 15.9C5.90098 15.8875 6.46348 16.625 6.65098 16.925C7.55098 18.4375 8.98848 18.0125 9.56348 17.75C9.65098 17.1 9.91348 16.6625 10.201 16.4125C7.97598 16.1625 5.65098 15.3 5.65098 11.475C5.65098 10.3875 6.03848 9.4875 6.67598 8.7875C6.57598 8.5375 6.22598 7.5125 6.77598 6.1375C6.77598 6.1375 7.61348 5.875 9.52598 7.1625C10.326 6.9375 11.176 6.825 12.026 6.825C12.876 6.825 13.726 6.9375 14.526 7.1625C16.4385 5.8625 17.276 6.1375 17.276 6.1375C17.826 7.5125 17.476 8.5375 17.376 8.7875C18.0135 9.4875 18.401 10.375 18.401 11.475C18.401 15.3125 16.0635 16.1625 13.8385 16.4125C14.201 16.725 14.5135 17.325 14.5135 18.2625C14.5135 19.6 14.501 20.675 14.501 21.0125C14.501 21.275 14.6885 21.5875 15.1885 21.4875C19.259 20.1133 21.9999 16.2963 22.001 12C22.001 6.475 17.526 2 12.001 2Z"
|
||||
>
|
||||
</path>
|
||||
</svg>
|
||||
@@ -1,30 +0,0 @@
|
||||
<script lang="ts">
|
||||
const {
|
||||
'aria-label': ariaLabel,
|
||||
class: className,
|
||||
color = 'currentColor',
|
||||
size,
|
||||
} = $props<{
|
||||
'aria-label'?: string;
|
||||
class?: string;
|
||||
color?: string;
|
||||
size?: number;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill={color}
|
||||
class={className}
|
||||
aria-label={ariaLabel}
|
||||
aria-hidden={!ariaLabel}
|
||||
role={ariaLabel ? undefined : 'presentation'}
|
||||
width={size}
|
||||
height={size}
|
||||
>
|
||||
<path
|
||||
d="M18.3362 18.339H15.6707V14.1622C15.6707 13.1662 15.6505 11.8845 14.2817 11.8845C12.892 11.8845 12.6797 12.9683 12.6797 14.0887V18.339H10.0142V9.75H12.5747V10.9207H12.6092C12.967 10.2457 13.837 9.53325 15.1367 9.53325C17.8375 9.53325 18.337 11.3108 18.337 13.6245V18.339H18.3362ZM7.00373 8.57475C6.14573 8.57475 5.45648 7.88025 5.45648 7.026C5.45648 6.1725 6.14648 5.47875 7.00373 5.47875C7.85873 5.47875 8.55173 6.1725 8.55173 7.026C8.55173 7.88025 7.85798 8.57475 7.00373 8.57475ZM8.34023 18.339H5.66723V9.75H8.34023V18.339ZM19.6697 3H4.32923C3.59498 3 3.00098 3.5805 3.00098 4.29675V19.7033C3.00098 20.4202 3.59498 21 4.32923 21H19.6675C20.401 21 21.001 20.4202 21.001 19.7033V4.29675C21.001 3.5805 20.401 3 19.6675 3H19.6697Z"
|
||||
>
|
||||
</path>
|
||||
</svg>
|
||||
@@ -1,5 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { impactItems } from '$lib/data/home/content';
|
||||
import { impactItems } from '$lib/data/content';
|
||||
</script>
|
||||
|
||||
<section id="impact" class="section" aria-labelledby="impact-heading">
|
||||
@@ -1,23 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { page as pageState } from '$app/state';
|
||||
import Wordmark from './Wordmark.svelte';
|
||||
|
||||
const path = $derived(pageState.url?.pathname ?? '/');
|
||||
|
||||
/** Page slug for body class: "page-home" | "page-services" | "page-services-hands-on-saas-architecture-consultant" etc. Set at build time per route; no client JS. */
|
||||
const bodyClass = $derived(
|
||||
path === '/'
|
||||
? 'page-home'
|
||||
: 'page-' + path.replace(/^\/|\/$/g, '').replace(/\//g, '-'),
|
||||
);
|
||||
|
||||
interface NavigationItem {
|
||||
label: string;
|
||||
href: string;
|
||||
umamiEventLabel: string;
|
||||
}
|
||||
|
||||
const { items = [], page }: { items: NavigationItem[]; page: string } = $props();
|
||||
</script>
|
||||
|
||||
<nav id="nav" class="nav" aria-label="Main navigation">
|
||||
@@ -29,74 +11,37 @@
|
||||
hidden
|
||||
/>
|
||||
<div class="mobile-nav-header">
|
||||
<span
|
||||
class={['mobile nav-header-logo', { 'page-home': bodyClass === 'page-home' }]}
|
||||
>
|
||||
<a href="/" class="logo-link">
|
||||
<Wordmark />
|
||||
<span class="sr-only">mifi Ventures home page</span>
|
||||
</a>
|
||||
<span class="mobile nav-header-logo">
|
||||
<Wordmark />
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
id="nav-toggle-button"
|
||||
class="btn-clear"
|
||||
aria-controls="nav-menu"
|
||||
aria-label="Toggle navigation"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<label
|
||||
id="nav-toggle-label"
|
||||
for="nav-toggle"
|
||||
class="nav-toggle"
|
||||
role="presentation"
|
||||
>
|
||||
<span class="nav-toggle-inner">
|
||||
<span class="nav-toggle-line"></span>
|
||||
<span class="nav-toggle-line"></span>
|
||||
<span class="nav-toggle-line"></span>
|
||||
</span>
|
||||
</label>
|
||||
</button>
|
||||
<label for="nav-toggle" class="nav-toggle" aria-label="Toggle navigation">
|
||||
<span class="nav-toggle-inner">
|
||||
<span class="nav-toggle-line"></span>
|
||||
<span class="nav-toggle-line"></span>
|
||||
<span class="nav-toggle-line"></span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div id="nav-menu" class="nav-menu container">
|
||||
<span
|
||||
class={[
|
||||
'nav-header-logo desktop',
|
||||
{ 'page-home': bodyClass === 'page-home' },
|
||||
]}
|
||||
>
|
||||
{#if page !== 'home'}
|
||||
<a href="/" class="logo-link">
|
||||
<Wordmark />
|
||||
<span class="sr-only">mifi Ventures home page</span>
|
||||
</a>
|
||||
{:else}
|
||||
<Wordmark />
|
||||
{/if}
|
||||
<div class="nav-menu container">
|
||||
<span class="nav-header-logo desktop">
|
||||
<Wordmark />
|
||||
</span>
|
||||
<ul class="nav-list">
|
||||
{#each items as item (item.href)}
|
||||
<li class="nav-item">
|
||||
<a
|
||||
href={item.href}
|
||||
class="nav-link"
|
||||
data-umami-event="navigation"
|
||||
data-umami-event-label={item.umamiEventLabel}
|
||||
data-umami-event-page={page}
|
||||
>
|
||||
{item.label}
|
||||
</a>
|
||||
</li>
|
||||
{/each}
|
||||
<li class="nav-item">
|
||||
<a href="#what-we-do" class="nav-link">Services</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#impact" class="nav-link">Impact</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#how-we-work" class="nav-link">Process</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#schedule" class="nav-link">Contact</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="nav-item nav-back-to-top">
|
||||
<a
|
||||
href="#header"
|
||||
class="nav-link"
|
||||
data-umami-event="navigation"
|
||||
data-umami-event-label="back to top">Back to top</a
|
||||
>
|
||||
<a href="#header" class="nav-link">Back to top</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
@@ -106,17 +51,17 @@
|
||||
background-color: var(--color-bg);
|
||||
background-color: var(--color-bg);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
padding-top: var(--space-sm);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
|
||||
padding: var(--space-md) 0;
|
||||
position: sticky;
|
||||
text-align: center;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
align-items: stretch;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: var(--space-md) 0;
|
||||
align-items: stretch;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -158,15 +103,6 @@
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
& .logo-link {
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Hamburger toggle: mobile only, animates to X when open */
|
||||
@@ -206,14 +142,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.btn-clear {
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nav-toggle {
|
||||
display: none;
|
||||
align-items: center;
|
||||
@@ -271,7 +199,7 @@
|
||||
|
||||
.nav-list {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
@@ -284,7 +212,7 @@
|
||||
|
||||
/* Back to top + mobile nav logo: hidden until page is scrolled (CSS scroll-driven animation) */
|
||||
.nav-back-to-top,
|
||||
.nav-header-logo.page-home {
|
||||
.nav-header-logo {
|
||||
/* Fallback when scroll-driven animations aren’t supported: always visible */
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
@@ -353,56 +281,28 @@
|
||||
}
|
||||
|
||||
@supports (animation-timeline: scroll()) {
|
||||
/* Shadow on pseudo-element; only opacity is animated (composited) */
|
||||
.nav::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
animation: nav-shadow-on-scroll linear;
|
||||
animation-timeline: scroll(root block);
|
||||
animation-range: 0 100px;
|
||||
animation-fill-mode: both;
|
||||
will-change: opacity;
|
||||
}
|
||||
|
||||
@keyframes nav-shadow-on-scroll {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.nav::after {
|
||||
animation: none;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Composited-only animation: opacity only (visibility/pointer-events not animated) */
|
||||
.nav-back-to-top,
|
||||
.nav-header-logo.page-home {
|
||||
.nav-header-logo {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
animation: nav-reveal-on-scroll linear;
|
||||
animation-timeline: scroll(root block);
|
||||
animation-range: 300px 400px;
|
||||
animation-fill-mode: both;
|
||||
will-change: opacity;
|
||||
}
|
||||
|
||||
@keyframes nav-reveal-on-scroll {
|
||||
from {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,65 +1,20 @@
|
||||
<script lang="ts">
|
||||
import ExternalLinkIcon from './Icon/ExternalLink.svelte';
|
||||
|
||||
const {
|
||||
title,
|
||||
subtitle,
|
||||
bookingLinkTitle,
|
||||
bookingLinkUrl = 'https://cal.mifi.ventures/the-mifi/30min',
|
||||
showEmailLink = false,
|
||||
showServicesLink = false,
|
||||
sectionId = 'contact',
|
||||
headingId = 'contact-heading',
|
||||
}: {
|
||||
title: string;
|
||||
subtitle: string;
|
||||
bookingLinkTitle: string;
|
||||
bookingLinkUrl?: string;
|
||||
showEmailLink?: boolean;
|
||||
showServicesLink?: boolean;
|
||||
sectionId?: string;
|
||||
headingId?: string;
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
<section id={sectionId} class="section schedule-section" aria-labelledby={headingId}>
|
||||
<section
|
||||
id="schedule"
|
||||
class="section schedule-section"
|
||||
aria-labelledby="schedule-heading"
|
||||
>
|
||||
<div class="container">
|
||||
<h2 id={headingId} class="section-title">{title}</h2>
|
||||
<p class="schedule-text">{subtitle}</p>
|
||||
<div class="cta-group">
|
||||
<a
|
||||
href={bookingLinkUrl}
|
||||
class="btn btn-primary icon-button"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="Schedule a 30-minute intro call (opens in new tab)"
|
||||
data-umami-event="schedule call"
|
||||
data-umami-event-location="contact section"
|
||||
>
|
||||
{bookingLinkTitle}
|
||||
<ExternalLinkIcon aria-label="Opens in new tab" size={17} />
|
||||
</a>
|
||||
{#if showEmailLink}
|
||||
<a
|
||||
href="mailto:hello@mifi.ventures"
|
||||
class="btn btn-secondary"
|
||||
data-umami-event="email"
|
||||
data-umami-event-location="contact section"
|
||||
>
|
||||
Email me
|
||||
</a>
|
||||
{/if}
|
||||
{#if showServicesLink}
|
||||
<a
|
||||
href="/services"
|
||||
class="btn btn-secondary"
|
||||
data-umami-event="view services"
|
||||
data-umami-event-location="contact section"
|
||||
>
|
||||
View services
|
||||
</a>
|
||||
{/if}
|
||||
</div>
|
||||
<h2 id="schedule-heading" class="section-title">Let's Talk</h2>
|
||||
<p class="schedule-text">Ready to discuss your project?</p>
|
||||
<a
|
||||
href="https://cal.mifi.ventures/the-mifi/30min?utm_source=website&utm_medium=cta&utm_campaign=schedule_call&utm_medium=schedule_section_cta"
|
||||
class="btn btn-primary"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="Schedule a 30-minute intro call (opens in new tab)"
|
||||
>
|
||||
Schedule a 30-minute intro call
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -75,23 +30,6 @@
|
||||
font-weight: var(--font-weight-normal);
|
||||
color: var(--color-text-secondary);
|
||||
line-height: var(--line-height-relaxed);
|
||||
max-width: var(--max-text-width);
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.cta-group {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-md);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.cta-group {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
max-width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,82 +0,0 @@
|
||||
<script lang="ts">
|
||||
import type { ServiceSectionContent } from '$lib/types/service-page';
|
||||
|
||||
const {
|
||||
section,
|
||||
}: {
|
||||
section: ServiceSectionContent;
|
||||
} = $props();
|
||||
|
||||
const headingId = $derived(section.headingId ?? `${section.id}-heading`);
|
||||
const sectionClasses = $derived(
|
||||
['section', section.sectionClass].filter(Boolean).join(' '),
|
||||
);
|
||||
const containerClass = $derived(
|
||||
section.narrowContainer === false ? 'container' : 'container narrow',
|
||||
);
|
||||
const listClass = $derived(
|
||||
[section.bulletsListClass, 'content-list'].filter(Boolean).join(' '),
|
||||
);
|
||||
</script>
|
||||
|
||||
<section id={section.id} class={sectionClasses} aria-labelledby={headingId}>
|
||||
<div class={containerClass}>
|
||||
<h2 id={headingId} class={{ 'sr-only': section.headingSrOnly ?? false }}>
|
||||
{section.heading}
|
||||
</h2>
|
||||
|
||||
{#if section.lede}
|
||||
<p>{section.lede}</p>
|
||||
{/if}
|
||||
|
||||
{#each section.paragraphs ?? [] as p}
|
||||
<p>{p}</p>
|
||||
{/each}
|
||||
|
||||
{#each section.subsections ?? [] as sub, subIndex}
|
||||
{@const subId = sub.headingId ?? `${section.id}-sub-${subIndex}`}
|
||||
<h3 id={subId}>{sub.heading}</h3>
|
||||
{#each sub.paragraphs ?? [] as p}
|
||||
<p>{p}</p>
|
||||
{/each}
|
||||
{#if (sub.bullets?.length ?? 0) > 0}
|
||||
<ul class="content-list">
|
||||
{#each sub.bullets as bullet}
|
||||
<li>{bullet}</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
{/each}
|
||||
|
||||
{#if (section.bullets?.length ?? 0) > 0}
|
||||
<ul class={listClass}>
|
||||
{#each section.bullets as bullet}
|
||||
<li>{bullet}</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
|
||||
{#if (section.orderedBullets?.length ?? 0) > 0}
|
||||
<ol class="content-list ordered">
|
||||
{#each section.orderedBullets as bullet}
|
||||
<li>{bullet}</li>
|
||||
{/each}
|
||||
</ol>
|
||||
{/if}
|
||||
|
||||
{#each section.trailingParagraphs ?? [] as p}
|
||||
<p>{p}</p>
|
||||
{/each}
|
||||
|
||||
{#if (section.footerLinks?.length ?? 0) > 0}
|
||||
<p>
|
||||
{#each section.footerLinks as link, i}
|
||||
{#if i > 0}
|
||||
<span aria-hidden="true"> · </span>
|
||||
{/if}
|
||||
<a href={link.href}>{link.label}</a>
|
||||
{/each}
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
</section>
|
||||
@@ -1,115 +0,0 @@
|
||||
<script lang="ts">
|
||||
import type { ServiceCard } from '$lib/types/service-page';
|
||||
|
||||
const {
|
||||
services,
|
||||
sectionId = 'services-grid',
|
||||
headingId = 'services-heading',
|
||||
heading = 'Services',
|
||||
overview = '',
|
||||
surface = 'bg',
|
||||
}: {
|
||||
services: ServiceCard[];
|
||||
sectionId?: string;
|
||||
headingId?: string;
|
||||
heading?: string;
|
||||
overview?: string;
|
||||
surface?: 'bg' | 'bg-alt';
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
<section
|
||||
id={sectionId}
|
||||
class={['section services-grid-section', { 'bg-alt': surface === 'bg-alt' }]}
|
||||
aria-labelledby={headingId}
|
||||
>
|
||||
<div class="container">
|
||||
<h2 id={headingId} class="section-title">{heading}</h2>
|
||||
{#if overview}
|
||||
<p class="overview">{overview}</p>
|
||||
{/if}
|
||||
<ul class="services-card-list">
|
||||
{#each services as service (service.href)}
|
||||
<li class={['services-card', { bg: surface === 'bg-alt' }]}>
|
||||
<h3 class="title">{service.title}</h3>
|
||||
<p class="desc">{service.description}</p>
|
||||
<a
|
||||
href={service.href}
|
||||
class="link"
|
||||
data-umami-event="service link"
|
||||
data-umami-event-label={service.href}
|
||||
>
|
||||
Learn more
|
||||
<span aria-hidden="true">→</span>
|
||||
</a>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.services-grid-section {
|
||||
background-color: var(--color-bg);
|
||||
|
||||
&.bg-alt {
|
||||
background-color: var(--color-bg-alt);
|
||||
}
|
||||
}
|
||||
|
||||
.overview {
|
||||
max-width: var(--max-text-width);
|
||||
margin: 0 auto var(--space-xxl) auto;
|
||||
font-size: var(--font-size-base);
|
||||
color: var(--color-text-secondary);
|
||||
line-height: var(--line-height-relaxed);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.services-card-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
gap: var(--space-xl);
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
}
|
||||
|
||||
.services-card {
|
||||
padding: var(--space-xl);
|
||||
background-color: var(--color-bg-alt);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--border-radius-medium);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&.bg {
|
||||
background-color: var(--color-bg);
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-bottom: var(--space-md);
|
||||
font-size: var(--font-size-large);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.desc {
|
||||
flex: 1;
|
||||
margin-bottom: var(--space-lg);
|
||||
font-size: var(--font-size-base);
|
||||
color: var(--color-text-secondary);
|
||||
line-height: var(--line-height-relaxed);
|
||||
}
|
||||
|
||||
.link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-xs);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
|
||||
& span {
|
||||
margin-left: var(--space-xs);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,58 +0,0 @@
|
||||
<script lang="ts">
|
||||
interface TOCItem {
|
||||
label: string;
|
||||
href: string;
|
||||
}
|
||||
|
||||
const {
|
||||
ariaLabel = 'Page contents',
|
||||
items,
|
||||
title = 'On this page',
|
||||
}: {
|
||||
ariaLabel?: string;
|
||||
items: TOCItem[];
|
||||
title?: string;
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
<nav class="section toc" aria-label={ariaLabel}>
|
||||
<div class="container">
|
||||
<h2 class="title">{title}</h2>
|
||||
<ul class="list">
|
||||
{#each items as item}
|
||||
<li><a href={item.href}>{item.label}</a></li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<style>
|
||||
.toc {
|
||||
padding: var(--space-xl) 0;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: var(--font-size-large);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
margin-bottom: var(--space-md);
|
||||
}
|
||||
|
||||
.list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-sm) var(--space-xl);
|
||||
|
||||
& a {
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-medium);
|
||||
|
||||
&:hover {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
14
src/lib/components/WhatWeDo.svelte
Normal file
14
src/lib/components/WhatWeDo.svelte
Normal file
@@ -0,0 +1,14 @@
|
||||
<script lang="ts">
|
||||
import { whatWeDoItems } from '$lib/data/content';
|
||||
</script>
|
||||
|
||||
<section id="what-we-do" class="section" aria-labelledby="what-we-do-heading">
|
||||
<div class="container">
|
||||
<h2 id="what-we-do-heading" class="section-title">What We Do</h2>
|
||||
<ul class="content-list">
|
||||
{#each whatWeDoItems as item (item)}
|
||||
<li>{item}</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
@@ -1,59 +0,0 @@
|
||||
<script lang="ts">
|
||||
const {
|
||||
showTitle = false,
|
||||
title = 'Who this is for',
|
||||
whoForList,
|
||||
whoNotList,
|
||||
whoForHeading = 'Good fit',
|
||||
whoNotHeading = 'Who this is not for',
|
||||
}: {
|
||||
title?: string;
|
||||
showTitle?: boolean;
|
||||
whoForList: string[];
|
||||
whoNotList: string[];
|
||||
whoForHeading?: string;
|
||||
whoNotHeading?: string;
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
<section id="who-its-for" class="section" aria-labelledby="who-for-heading">
|
||||
<div class="container">
|
||||
<h2 id="who-for-heading" class={['title', { 'sr-only': !showTitle }]}>{title}</h2>
|
||||
<div class="who-grid">
|
||||
<div class="who-block">
|
||||
<h3 id="who-for-list-heading" class="list-heading">{whoForHeading}</h3>
|
||||
<ul class="content-list" aria-labelledby="who-for-list-heading">
|
||||
{#each whoForList as item, index (index)}
|
||||
<li>{item}</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
<div class="who-block">
|
||||
<h3 id="who-not-list-heading" class="list-heading">{whoNotHeading}</h3>
|
||||
<ul class="content-list" aria-labelledby="who-not-list-heading">
|
||||
{#each whoNotList as item, index (index)}
|
||||
<li>{item}</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.who-grid {
|
||||
display: grid;
|
||||
gap: var(--space-xxl);
|
||||
grid-template-columns: 1fr 1fr;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.title,
|
||||
.list-heading {
|
||||
font-size: var(--font-size-xl);
|
||||
margin-bottom: var(--space-md);
|
||||
}
|
||||
</style>
|
||||
@@ -1,101 +0,0 @@
|
||||
<script lang="ts">
|
||||
import ExternalLinkIcon from '$lib/components/Icon/ExternalLink.svelte';
|
||||
import Logo from '$lib/components/Logo.svelte';
|
||||
</script>
|
||||
|
||||
<header id="header" class="hero">
|
||||
<div class="container">
|
||||
<Logo />
|
||||
<h2 class="headline">Hands-On Product Architecture for Early-Stage SaaS</h2>
|
||||
<p class="subhead">
|
||||
I help SaaS teams ship quickly without creating frontend debt, architectural
|
||||
drift, or technical complexity that slows iteration later.
|
||||
</p>
|
||||
<p class="supporting">
|
||||
Mike Fitzpatrick — product architect and senior software engineer
|
||||
</p>
|
||||
<div class="cta-group">
|
||||
<a
|
||||
href="https://cal.mifi.ventures/the-mifi/30min?utm_source=website&utm_medium=cta&utm_campaign=schedule_call&utm_content=hero"
|
||||
class="btn btn-primary icon-button"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="Schedule a 30-minute intro call (opens in new tab)"
|
||||
data-umami-event="schedule call"
|
||||
data-umami-event-location="hero"
|
||||
>
|
||||
Schedule a 30-minute intro call
|
||||
<ExternalLinkIcon aria-label="Opens in new tab" size={17} />
|
||||
</a>
|
||||
<a
|
||||
href="/services"
|
||||
class="btn btn-secondary"
|
||||
data-umami-event="view services"
|
||||
data-umami-event-location="hero"
|
||||
>
|
||||
View services
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<style>
|
||||
.hero {
|
||||
padding: var(--space-xxxl) 0 var(--space-xxl) 0;
|
||||
text-align: center;
|
||||
background-color: var(--color-bg);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding: var(--space-xxl) 0 var(--space-xl) 0;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
padding: var(--space-xl) 0 var(--space-lg) 0;
|
||||
}
|
||||
}
|
||||
|
||||
.headline {
|
||||
margin-bottom: var(--space-lg);
|
||||
font-family: var(--font-family-heading);
|
||||
font-size: var(--font-size-xxl);
|
||||
font-weight: var(--font-weight-bold);
|
||||
letter-spacing: -0.03em;
|
||||
color: var(--color-text);
|
||||
line-height: var(--line-height-heading);
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: var(--font-size-xl);
|
||||
}
|
||||
}
|
||||
|
||||
.subhead {
|
||||
max-width: var(--max-narrow-width);
|
||||
margin: 0 auto var(--space-md) auto;
|
||||
font-size: var(--font-size-large);
|
||||
font-weight: var(--font-weight-normal);
|
||||
color: var(--color-text-secondary);
|
||||
line-height: var(--line-height-relaxed);
|
||||
}
|
||||
|
||||
.supporting {
|
||||
margin: 0 auto var(--space-xl) auto;
|
||||
font-size: var(--font-size-base);
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--color-text-tertiary);
|
||||
}
|
||||
|
||||
.cta-group {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-md);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: var(--space-lg);
|
||||
|
||||
@media (max-width: 768px) {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,14 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { howIWorkItems } from '$lib/data/home/content';
|
||||
</script>
|
||||
|
||||
<section id="process" class="section" aria-labelledby="process-heading">
|
||||
<div class="container">
|
||||
<h2 id="process-heading" class="section-title">How I Work</h2>
|
||||
<ul class="content-list">
|
||||
{#each howIWorkItems as item (item)}
|
||||
<li>{item}</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
@@ -1,25 +0,0 @@
|
||||
<script lang="ts">
|
||||
import {
|
||||
whatIHelpTeamsFixIntro,
|
||||
whatIHelpTeamsFixItems,
|
||||
} from '$lib/data/home/content';
|
||||
</script>
|
||||
|
||||
<section id="what-i-help-fix" class="section" aria-labelledby="what-i-help-fix-heading">
|
||||
<div class="container">
|
||||
<h2 id="what-i-help-fix-heading" class="section-title">What I Help Teams Fix</h2>
|
||||
<p class="what-fix-intro">{whatIHelpTeamsFixIntro}</p>
|
||||
<ul class="content-list">
|
||||
{#each whatIHelpTeamsFixItems as item (item)}
|
||||
<li>{item}</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.what-fix-intro {
|
||||
max-width: var(--max-text-width);
|
||||
margin: 0 auto var(--space-lg) auto;
|
||||
}
|
||||
</style>
|
||||
26
src/lib/data/content.ts
Normal file
26
src/lib/data/content.ts
Normal file
@@ -0,0 +1,26 @@
|
||||
export const whatWeDoItems = [
|
||||
'Product-focused frontend and UI architecture for modern web applications, with an emphasis on clarity, scalability, and long-term maintainability.',
|
||||
'Greenfield product builds and early-stage foundations, getting new projects off the ground quickly with structures designed to grow, not be rewritten.',
|
||||
'Performance, Core Web Vitals, rendering strategy, and technical SEO optimization focused on real-world user journeys—not just lab scores.',
|
||||
'Accessibility-first engineering, ensuring WCAG-compliant interfaces with semantic markup, keyboard parity, and inclusive interaction patterns.',
|
||||
'Modernization and stabilization of existing systems, including refactors, framework upgrades, and untangling overgrown frontend codebases.',
|
||||
'End-to-end feature delivery with clear ownership and documentation, spanning frontend and supporting backend work without unnecessary complexity.',
|
||||
];
|
||||
|
||||
export const impactItems = [
|
||||
'Get new products off the ground quickly by establishing durable frontend and platform foundations—clean architecture, clear patterns, and pragmatic defaults designed to scale with teams and traffic.',
|
||||
'Improve performance, Core Web Vitals, and technical SEO on high-traffic user journeys through rendering strategy, bundle discipline, and careful attention to real-world loading behavior.',
|
||||
'Build accessibility into core UI systems, not as a retrofit—semantic markup, keyboard parity, and screen reader support baked into reusable components and design patterns.',
|
||||
'Bring order to complex or aging codebases by simplifying structure, reducing duplication, and clarifying ownership, enabling teams to ship confidently without over-engineering.',
|
||||
'Design and evolve shared component libraries and UI systems that improve consistency, velocity, and long-term maintainability across multiple teams.',
|
||||
'Partner closely with product, design, and engineering leadership (including marketing teams and non-technical organizations) to translate goals into shippable systems, balancing speed, quality, and technical risk.',
|
||||
];
|
||||
|
||||
export const howWeWorkItems = [
|
||||
'Engagements are consulting-led and senior-driven. I work directly with founders, product leaders, marketing teams, and engineering teams—including organizations without in-house technical staff—to establish direction and deliver solutions with a high degree of autonomy.',
|
||||
'Focused, pragmatic scope. Work is scoped to deliver real progress quickly, with an emphasis on building the right foundation rather than over-engineering for hypothetical futures.',
|
||||
'Async-friendly, low-friction communication. Clear written updates, documented decisions, and scheduled calls when they add value—not meetings for their own sake.',
|
||||
'Quality as a default. Accessibility, performance, and maintainability are built into the work from the start, not added later as cleanup.',
|
||||
"Flexible engagement models. Hourly or fixed-scope work depending on clarity and needs; longer-term engagements welcome when there's ongoing product momentum.",
|
||||
'Clean handoff. Code, documentation, and context are left in a state where internal teams—or future vendors—can confidently extend the work without dependency.',
|
||||
];
|
||||
26
src/lib/data/experience.ts
Normal file
26
src/lib/data/experience.ts
Normal file
@@ -0,0 +1,26 @@
|
||||
export const experienceLogos = [
|
||||
{ src: '/assets/logos/atlassian.svg', alt: 'Atlassian', width: 2500, height: 2500 },
|
||||
{
|
||||
src: '/assets/logos/tjx.svg',
|
||||
alt: 'TJ Maxx (The TJX Companies)',
|
||||
width: 2500,
|
||||
height: 621,
|
||||
},
|
||||
{ src: '/assets/logos/cargurus.svg', alt: 'CarGurus', width: 2500, height: 398 },
|
||||
{ src: '/assets/logos/timberland.svg', alt: 'Timberland', width: 190, height: 35 },
|
||||
{ src: '/assets/logos/vf.svg', alt: 'VF Corporation', width: 190, height: 155 },
|
||||
{
|
||||
src: '/assets/logos/bottomline.svg',
|
||||
alt: 'Bottomline Technologies',
|
||||
width: 2702,
|
||||
height: 571,
|
||||
},
|
||||
{
|
||||
src: '/assets/logos/mfa-boston.svg',
|
||||
alt: 'Museum of Fine Arts Boston',
|
||||
width: 572,
|
||||
height: 88,
|
||||
},
|
||||
] as const;
|
||||
|
||||
export const experienceTextList = experienceLogos.map((l) => l.alt);
|
||||
9
src/lib/data/home-meta.ts
Normal file
9
src/lib/data/home-meta.ts
Normal file
@@ -0,0 +1,9 @@
|
||||
import type { PageMeta } from '$lib/seo';
|
||||
import { defaultJsonLdGraph } from './json-ld';
|
||||
|
||||
export const homeMeta: PageMeta = {
|
||||
title: 'mifi Ventures — Software Engineering Consulting | Boston, MA',
|
||||
description:
|
||||
'Boston-based software engineering consulting. Mike Fitzpatrick helps teams build reliable, accessible, high-performance web applications. Specializing in frontend architecture, performance optimization, and modern web development.',
|
||||
jsonLd: defaultJsonLdGraph,
|
||||
};
|
||||
@@ -1,27 +0,0 @@
|
||||
export const whatIHelpTeamsFixIntro =
|
||||
'Most early-stage SaaS products do not break because of lack of effort. They break because the foundation was rushed, the frontend was treated as secondary, or complexity arrived before the company was ready for it.';
|
||||
|
||||
export const whatIHelpTeamsFixItems = [
|
||||
"Backend-heavy products with frontend foundations that don't scale",
|
||||
'CSS and component systems that slow iteration',
|
||||
'MVPs built quickly but not structured to evolve',
|
||||
'Teams shipping features without architectural guardrails',
|
||||
'Infrastructure and tooling decisions that outpace company stage',
|
||||
];
|
||||
|
||||
export const impactItems = [
|
||||
'Faster iteration through cleaner frontend systems and reusable components.',
|
||||
'Improved performance, Core Web Vitals, and technical SEO on critical user journeys.',
|
||||
'Accessibility built into core UI systems—semantic markup, keyboard parity, and screen reader support in reusable components.',
|
||||
'Order in complex or aging codebases: simpler structure, less duplication, clearer ownership so teams ship confidently without over-engineering.',
|
||||
'Shared component libraries and UI systems that improve consistency, velocity, and maintainability.',
|
||||
'Stronger technical direction: partnering with product and engineering leadership to translate goals into shippable systems.',
|
||||
];
|
||||
|
||||
export const howIWorkItems = [
|
||||
'Hands-on and implementation-led, not diagram theater.',
|
||||
'Scoped for real progress, not endless strategy loops.',
|
||||
'Built around clarity, accessibility, and maintainability.',
|
||||
'Flexible engagement models: focused projects, implementation, advisory.',
|
||||
'Documentation and handoff that internal teams can actually use.',
|
||||
];
|
||||
@@ -1,53 +0,0 @@
|
||||
export const experienceLogos = [
|
||||
{
|
||||
src: '/assets/logos/atlassian.svg',
|
||||
alt: 'Atlassian',
|
||||
width: 2500,
|
||||
height: 2500,
|
||||
showLogo: true,
|
||||
},
|
||||
{
|
||||
src: '/assets/logos/tjx.svg',
|
||||
alt: 'TJ Maxx (The TJX Companies)',
|
||||
width: 2500,
|
||||
height: 621,
|
||||
showLogo: false,
|
||||
},
|
||||
{
|
||||
src: '/assets/logos/cargurus.svg',
|
||||
alt: 'CarGurus',
|
||||
width: 2500,
|
||||
height: 398,
|
||||
showLogo: true,
|
||||
},
|
||||
{
|
||||
src: '/assets/logos/timberland.svg',
|
||||
alt: 'Timberland',
|
||||
width: 190,
|
||||
height: 35,
|
||||
showLogo: true,
|
||||
},
|
||||
{
|
||||
src: '/assets/logos/vf.svg',
|
||||
alt: 'VF Corporation',
|
||||
width: 190,
|
||||
height: 155,
|
||||
showLogo: true,
|
||||
},
|
||||
{
|
||||
src: '/assets/logos/bottomline.svg',
|
||||
alt: 'Bottomline Technologies',
|
||||
width: 2702,
|
||||
height: 571,
|
||||
showLogo: true,
|
||||
},
|
||||
{
|
||||
src: '/assets/logos/mfa-boston.svg',
|
||||
alt: 'Museum of Fine Arts Boston',
|
||||
width: 572,
|
||||
height: 88,
|
||||
showLogo: true,
|
||||
},
|
||||
] as const;
|
||||
|
||||
export const experienceTextList = experienceLogos.map((l) => l.alt);
|
||||
@@ -1,11 +0,0 @@
|
||||
import type { PageMeta } from '$lib/seo';
|
||||
import { baseJsonLdGraph, catalogJsonLdGraph } from '$lib/data/json-ld/baseJsonLdGraphs';
|
||||
import { homepageJsonLdGraph } from '$lib/data/json-ld/webpageJsonLdGraphs';
|
||||
|
||||
export const homeMeta: PageMeta = {
|
||||
title: 'mifi Ventures — Hands-On Product Architecture for Early-Stage SaaS | Boston, MA',
|
||||
description:
|
||||
'Product architecture and senior software engineering for early-stage SaaS teams. Mike Fitzpatrick works inside your codebase to build foundations that ship fast without structural debt—frontend systems, MVP launch, fractional CTO, and stage-aligned infrastructure.',
|
||||
canonical: 'https://mifi.ventures',
|
||||
jsonLd: [...baseJsonLdGraph, homepageJsonLdGraph, ...catalogJsonLdGraph],
|
||||
};
|
||||
@@ -1,22 +0,0 @@
|
||||
export const items = [
|
||||
{
|
||||
label: 'Services',
|
||||
href: '/services',
|
||||
umamiEventLabel: 'services',
|
||||
},
|
||||
{
|
||||
label: 'Impact',
|
||||
href: '/#impact',
|
||||
umamiEventLabel: 'impact',
|
||||
},
|
||||
{
|
||||
label: 'Process',
|
||||
href: '/#process',
|
||||
umamiEventLabel: 'process',
|
||||
},
|
||||
{
|
||||
label: 'Contact',
|
||||
href: '/#contact',
|
||||
umamiEventLabel: 'contact',
|
||||
},
|
||||
];
|
||||
@@ -1,26 +0,0 @@
|
||||
export const services = [
|
||||
{
|
||||
title: 'Hands-On SaaS Architecture',
|
||||
description:
|
||||
'Build the foundations that let SaaS products evolve without accumulating structural debt.',
|
||||
href: '/services/hands-on-saas-architecture-consultant',
|
||||
},
|
||||
{
|
||||
title: 'MVP Architecture & Launch',
|
||||
description:
|
||||
'Ship quickly without creating a frontend mess or fragile product foundation.',
|
||||
href: '/services/mvp-architecture-and-launch',
|
||||
},
|
||||
{
|
||||
title: 'Fractional CTO / Technical Partner',
|
||||
description:
|
||||
'Technical leadership for teams that need architectural direction without hiring a full-time CTO.',
|
||||
href: '/services/fractional-cto-for-early-stage-saas',
|
||||
},
|
||||
{
|
||||
title: 'Stage-Aligned Infrastructure',
|
||||
description:
|
||||
"Infrastructure decisions that match your company's stage, without unnecessary SaaS sprawl or cloud complexity.",
|
||||
href: '/services/stage-aligned-infrastructure',
|
||||
},
|
||||
];
|
||||
150
src/lib/data/json-ld.ts
Normal file
150
src/lib/data/json-ld.ts
Normal file
@@ -0,0 +1,150 @@
|
||||
/**
|
||||
* Default JSON-LD graph nodes (Organization, Person, WebSite, WebPage, OfferCatalog).
|
||||
* Used for the home page; other pages can add or override via meta.jsonLd.
|
||||
*/
|
||||
|
||||
const BASE = 'https://mifi.ventures';
|
||||
|
||||
export const defaultJsonLdGraph: Record<string, unknown>[] = [
|
||||
{
|
||||
'@type': 'Organization',
|
||||
'@id': `${BASE}/#organization`,
|
||||
name: 'mifi Ventures, LLC',
|
||||
legalName: 'mifi Ventures, LLC',
|
||||
url: `${BASE}/`,
|
||||
logo: { '@type': 'ImageObject', url: `${BASE}/favicon.svg` },
|
||||
description:
|
||||
'Software engineering consulting specializing in product-focused frontend architecture, performance optimization, and accessibility-first engineering.',
|
||||
founder: { '@id': `${BASE}/#principal` },
|
||||
address: {
|
||||
'@type': 'PostalAddress',
|
||||
addressLocality: 'Boston',
|
||||
addressRegion: 'MA',
|
||||
addressCountry: 'US',
|
||||
},
|
||||
geo: { '@type': 'GeoCoordinates', latitude: 42.360082, longitude: -71.05888 },
|
||||
areaServed: { '@type': 'Country', name: 'United States' },
|
||||
hasOfferCatalog: { '@id': `${BASE}/#services` },
|
||||
sameAs: ['https://www.linkedin.com/in/the-mifi', 'https://github.com/the-mifi'],
|
||||
},
|
||||
{
|
||||
'@type': 'Person',
|
||||
'@id': `${BASE}/#principal`,
|
||||
name: 'Mike Fitzpatrick',
|
||||
jobTitle: 'Principal Software Engineer and Architect',
|
||||
description:
|
||||
'Senior full-stack engineer and architect helping teams ship reliable, accessible, high-performance web products.',
|
||||
url: `${BASE}/`,
|
||||
worksFor: { '@id': `${BASE}/#organization` },
|
||||
knowsAbout: [
|
||||
'Frontend Architecture',
|
||||
'UI Architecture',
|
||||
'React Development',
|
||||
'Web Performance Optimization',
|
||||
'Core Web Vitals',
|
||||
'Technical SEO',
|
||||
'Web Accessibility (WCAG)',
|
||||
'Component Libraries',
|
||||
'Design Systems',
|
||||
'JavaScript',
|
||||
'TypeScript',
|
||||
'Modern Web Development',
|
||||
'Greenfield Product Development',
|
||||
'Legacy System Modernization',
|
||||
'Code Refactoring',
|
||||
],
|
||||
sameAs: ['https://www.linkedin.com/in/the-mifi', 'https://github.com/the-mifi'],
|
||||
},
|
||||
{
|
||||
'@type': 'WebSite',
|
||||
'@id': `${BASE}/#website`,
|
||||
url: `${BASE}/`,
|
||||
name: 'mifi Ventures',
|
||||
description: 'Software Engineering Consulting — Boston, MA',
|
||||
publisher: { '@id': `${BASE}/#organization` },
|
||||
potentialAction: {
|
||||
'@type': 'ReserveAction',
|
||||
target: {
|
||||
'@type': 'EntryPoint',
|
||||
urlTemplate: 'https://cal.mifi.ventures/the-mifi',
|
||||
},
|
||||
name: 'Schedule a 30-minute intro call',
|
||||
},
|
||||
},
|
||||
{
|
||||
'@type': 'WebPage',
|
||||
'@id': `${BASE}/#webpage`,
|
||||
url: `${BASE}/`,
|
||||
name: 'mifi Ventures — Software Engineering Consulting | Boston, MA',
|
||||
description:
|
||||
'Boston-based software engineering consulting. Mike Fitzpatrick helps teams build reliable, accessible, high-performance web applications.',
|
||||
isPartOf: { '@id': `${BASE}/#website` },
|
||||
about: { '@id': `${BASE}/#organization` },
|
||||
mainEntity: { '@id': `${BASE}/#organization` },
|
||||
primaryImageOfPage: { '@type': 'ImageObject', url: `${BASE}/favicon.svg` },
|
||||
inLanguage: 'en-US',
|
||||
},
|
||||
{
|
||||
'@type': 'OfferCatalog',
|
||||
'@id': `${BASE}/#services`,
|
||||
name: 'Software Engineering Consulting Services',
|
||||
description: 'Consulting services offered by mifi Ventures',
|
||||
numberOfItems: 6,
|
||||
itemListElement: [
|
||||
{
|
||||
'@type': 'Offer',
|
||||
itemOffered: {
|
||||
'@type': 'Service',
|
||||
name: 'Frontend and UI Architecture',
|
||||
description:
|
||||
'Product-focused frontend and UI architecture for modern web applications, with an emphasis on clarity, scalability, and long-term maintainability.',
|
||||
},
|
||||
},
|
||||
{
|
||||
'@type': 'Offer',
|
||||
itemOffered: {
|
||||
'@type': 'Service',
|
||||
name: 'Greenfield Product Development',
|
||||
description:
|
||||
'Greenfield product builds and early-stage foundations, getting new projects off the ground quickly with structures designed to grow, not be rewritten.',
|
||||
},
|
||||
},
|
||||
{
|
||||
'@type': 'Offer',
|
||||
itemOffered: {
|
||||
'@type': 'Service',
|
||||
name: 'Performance Optimization',
|
||||
description:
|
||||
'Performance, Core Web Vitals, rendering strategy, and technical SEO optimization focused on real-world user journeys.',
|
||||
},
|
||||
},
|
||||
{
|
||||
'@type': 'Offer',
|
||||
itemOffered: {
|
||||
'@type': 'Service',
|
||||
name: 'Accessibility Engineering',
|
||||
description:
|
||||
'Accessibility-first engineering, ensuring WCAG-compliant interfaces with semantic markup, keyboard parity, and inclusive interaction patterns.',
|
||||
},
|
||||
},
|
||||
{
|
||||
'@type': 'Offer',
|
||||
itemOffered: {
|
||||
'@type': 'Service',
|
||||
name: 'System Modernization',
|
||||
description:
|
||||
'Modernization and stabilization of existing systems, including refactors, framework upgrades, and untangling overgrown frontend codebases.',
|
||||
},
|
||||
},
|
||||
{
|
||||
'@type': 'Offer',
|
||||
itemOffered: {
|
||||
'@type': 'Service',
|
||||
name: 'End-to-End Feature Delivery',
|
||||
description:
|
||||
'End-to-end feature delivery with clear ownership and documentation, spanning frontend and supporting backend work without unnecessary complexity.',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
@@ -1,190 +0,0 @@
|
||||
import { BASE, PHONE, WORDMARK } from './constants';
|
||||
|
||||
/**
|
||||
* Default JSON-LD graph nodes (Organization, Person, WebSite, WebPage,
|
||||
* ProfessionalService, OfferCatalog).
|
||||
*
|
||||
* Used for the home page; other pages can add or override via meta.jsonLd.
|
||||
*/
|
||||
|
||||
export const baseJsonLdGraph: Record<string, unknown>[] = [
|
||||
{
|
||||
'@type': 'Organization',
|
||||
'@id': `${BASE}/#organization`,
|
||||
name: 'mifi Ventures',
|
||||
legalName: 'mifi Ventures LLC',
|
||||
url: `${BASE}/`,
|
||||
logo: {
|
||||
'@type': 'ImageObject',
|
||||
url: WORDMARK,
|
||||
},
|
||||
image: {
|
||||
'@type': 'ImageObject',
|
||||
url: WORDMARK,
|
||||
},
|
||||
telephone: PHONE,
|
||||
description:
|
||||
'Hands-on product architecture for early-stage SaaS teams: SaaS product architecture, MVP architecture and launch support, fractional CTO guidance, and stage-aligned infrastructure strategy.',
|
||||
founder: { '@id': `${BASE}/#principal` },
|
||||
address: {
|
||||
'@type': 'PostalAddress',
|
||||
addressLocality: 'Boston',
|
||||
addressRegion: 'MA',
|
||||
addressCountry: 'US',
|
||||
},
|
||||
areaServed: { '@type': 'Country', name: 'United States' },
|
||||
hasOfferCatalog: { '@id': `${BASE}/#services` },
|
||||
sameAs: [
|
||||
'https://www.linkedin.com/company/mifi-ventures',
|
||||
'https://github.com/mifi-ventures',
|
||||
],
|
||||
contactPoint: [
|
||||
{
|
||||
'@type': 'ContactPoint',
|
||||
contactType: 'sales',
|
||||
telephone: PHONE,
|
||||
areaServed: 'US',
|
||||
availableLanguage: ['en'],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
'@type': 'Person',
|
||||
'@id': `${BASE}/#principal`,
|
||||
name: 'Mike Fitzpatrick',
|
||||
jobTitle: 'Product Architect and Senior Software Engineer',
|
||||
description:
|
||||
'Hands-on technical partner for early-stage SaaS teams; works inside codebases to build strong product foundations that ship fast without structural debt.',
|
||||
url: `${BASE}/`,
|
||||
worksFor: { '@id': `${BASE}/#organization` },
|
||||
knowsAbout: [
|
||||
'Product Architecture',
|
||||
'Frontend Architecture',
|
||||
'UI Architecture',
|
||||
'React Development',
|
||||
'JavaScript',
|
||||
'TypeScript',
|
||||
'Component Libraries',
|
||||
'Design Systems',
|
||||
'Design Tokens',
|
||||
'CSS Architecture',
|
||||
'Web Accessibility (WCAG)',
|
||||
'Technical SEO',
|
||||
'Core Web Vitals',
|
||||
'MVP Architecture',
|
||||
'Greenfield Product Development',
|
||||
'Fractional CTO',
|
||||
'Startup Infrastructure Strategy',
|
||||
'Code Refactoring',
|
||||
],
|
||||
sameAs: [
|
||||
'https://www.linkedin.com/in/the-mifi',
|
||||
'https://github.com/the-mifi',
|
||||
'https://mifi.dev',
|
||||
],
|
||||
},
|
||||
{
|
||||
'@type': 'WebSite',
|
||||
'@id': `${BASE}/#website`,
|
||||
url: `${BASE}/`,
|
||||
name: 'mifi Ventures',
|
||||
description: 'Hands-on product architecture for early-stage SaaS teams.',
|
||||
publisher: { '@id': `${BASE}/#organization` },
|
||||
image: {
|
||||
'@type': 'ImageObject',
|
||||
url: WORDMARK,
|
||||
},
|
||||
potentialAction: {
|
||||
'@type': 'ReserveAction',
|
||||
target: {
|
||||
'@type': 'EntryPoint',
|
||||
urlTemplate: 'https://cal.mifi.ventures/the-mifi',
|
||||
},
|
||||
name: 'Schedule a 30-minute intro call',
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
export const catalogJsonLdGraph: Record<string, unknown>[] = [
|
||||
{
|
||||
'@type': 'ProfessionalService',
|
||||
'@id': `${BASE}/#professional-service`,
|
||||
name: 'mifi Ventures',
|
||||
url: `${BASE}/`,
|
||||
image: {
|
||||
'@type': 'ImageObject',
|
||||
url: WORDMARK,
|
||||
},
|
||||
logo: {
|
||||
'@type': 'ImageObject',
|
||||
url: WORDMARK,
|
||||
},
|
||||
telephone: PHONE,
|
||||
description:
|
||||
'Hands-on product architecture and senior software engineering for early-stage SaaS teams: SaaS product architecture, MVP architecture and launch, fractional CTO guidance, and stage-aligned infrastructure.',
|
||||
serviceType: [
|
||||
'SaaS Product Architecture',
|
||||
'MVP Architecture and Launch Consulting',
|
||||
'Fractional CTO Services',
|
||||
'Startup Infrastructure Strategy',
|
||||
],
|
||||
provider: { '@id': `${BASE}/#organization` },
|
||||
address: {
|
||||
'@type': 'PostalAddress',
|
||||
addressLocality: 'Boston',
|
||||
addressRegion: 'MA',
|
||||
addressCountry: 'US',
|
||||
},
|
||||
areaServed: { '@type': 'Country', name: 'United States' },
|
||||
},
|
||||
{
|
||||
'@type': 'OfferCatalog',
|
||||
'@id': `${BASE}/#services`,
|
||||
name: 'SaaS Architecture Services',
|
||||
description:
|
||||
'Consulting services offered by mifi Ventures for early-stage SaaS teams.',
|
||||
numberOfItems: 4,
|
||||
itemListElement: [
|
||||
{
|
||||
'@type': 'Offer',
|
||||
url: `${BASE}/hands-on-saas-architecture-consultant`,
|
||||
itemOffered: {
|
||||
'@type': 'Service',
|
||||
name: 'Hands-On SaaS Architecture',
|
||||
description:
|
||||
'Hands-on product architecture for early-stage SaaS teams, focused on frontend systems, reusable components, design tokens, accessibility, and scalable foundations for fast iteration.',
|
||||
},
|
||||
},
|
||||
{
|
||||
'@type': 'Offer',
|
||||
url: `${BASE}/mvp-architecture-and-launch`,
|
||||
itemOffered: {
|
||||
'@type': 'Service',
|
||||
name: 'MVP Architecture & Launch',
|
||||
description:
|
||||
'Architecture and implementation support for early-stage SaaS MVPs that need to ship quickly without creating structural debt, fragile CSS, or difficult-to-extend product foundations.',
|
||||
},
|
||||
},
|
||||
{
|
||||
'@type': 'Offer',
|
||||
url: `${BASE}/fractional-cto-for-early-stage-saas`,
|
||||
itemOffered: {
|
||||
'@type': 'Service',
|
||||
name: 'Fractional CTO / Technical Partner',
|
||||
description:
|
||||
'Part-time technical leadership for early-stage SaaS teams that need architectural guidance, tradeoff evaluation, and hands-on technical oversight without hiring a full-time CTO.',
|
||||
},
|
||||
},
|
||||
{
|
||||
'@type': 'Offer',
|
||||
url: `${BASE}/stage-aligned-infrastructure`,
|
||||
itemOffered: {
|
||||
'@type': 'Service',
|
||||
name: 'Stage-Aligned Infrastructure',
|
||||
description:
|
||||
'Infrastructure strategy for early-stage SaaS teams that aligns cloud, SaaS, and deployment decisions with company stage, reducing unnecessary complexity and preserving runway.',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
@@ -1,3 +0,0 @@
|
||||
export const BASE = 'https://mifi.ventures';
|
||||
export const WORDMARK = `${BASE}/assets/wordmark.svg`;
|
||||
export const PHONE = '+1-888-991-6434';
|
||||
@@ -1,68 +0,0 @@
|
||||
import { BASE } from './constants';
|
||||
|
||||
export const handsOnSaaSArchitectureConsultantServiceJsonLdGraph: Record<
|
||||
string,
|
||||
unknown
|
||||
> = {
|
||||
'@type': 'Service',
|
||||
'@id': `${BASE}/hands-on-saas-architecture-consultant#service`,
|
||||
name: 'Hands-On SaaS Architecture',
|
||||
url: `${BASE}/hands-on-saas-architecture-consultant`,
|
||||
description:
|
||||
'Hands-on product architecture for early-stage SaaS teams, focused on frontend systems, reusable components, design tokens, accessibility, and scalable foundations for fast iteration.',
|
||||
serviceType: 'SaaS Product Architecture',
|
||||
provider: { '@id': `${BASE}/#organization` },
|
||||
areaServed: { '@type': 'Country', name: 'United States' },
|
||||
audience: {
|
||||
'@type': 'Audience',
|
||||
audienceType: 'Early-stage SaaS founders and engineering teams',
|
||||
},
|
||||
};
|
||||
|
||||
export const mvpArchitectureAndLaunchServiceJsonLdGraph: Record<string, unknown> = {
|
||||
'@type': 'Service',
|
||||
'@id': `${BASE}/mvp-architecture-and-launch#service`,
|
||||
name: 'MVP Architecture & Launch',
|
||||
url: `${BASE}/mvp-architecture-and-launch`,
|
||||
description:
|
||||
'Architecture and implementation support for early-stage SaaS MVPs that need to ship quickly without structural debt, fragile CSS, or difficult-to-extend product foundations.',
|
||||
serviceType: 'MVP Architecture and Launch Consulting',
|
||||
provider: { '@id': `${BASE}/#organization` },
|
||||
areaServed: { '@type': 'Country', name: 'United States' },
|
||||
audience: {
|
||||
'@type': 'Audience',
|
||||
audienceType: 'Founder-led SaaS startups and early product teams',
|
||||
},
|
||||
};
|
||||
|
||||
export const fractionalCtoForEarlyStageSaaSServiceJsonLdGraph: Record<string, unknown> = {
|
||||
'@type': 'Service',
|
||||
'@id': `${BASE}/fractional-cto-for-early-stage-saas#service`,
|
||||
name: 'Fractional CTO / Technical Partner',
|
||||
url: `${BASE}/fractional-cto-for-early-stage-saas`,
|
||||
description:
|
||||
'Part-time technical leadership for early-stage SaaS teams that need architectural guidance, tradeoff evaluation, and hands-on technical oversight without hiring a full-time CTO.',
|
||||
serviceType: 'Fractional CTO Services',
|
||||
provider: { '@id': `${BASE}/#organization` },
|
||||
areaServed: { '@type': 'Country', name: 'United States' },
|
||||
audience: {
|
||||
'@type': 'Audience',
|
||||
audienceType: 'Early-stage SaaS founders and growing engineering teams',
|
||||
},
|
||||
};
|
||||
|
||||
export const stageAlignedInfrastructureServiceJsonLdGraph: Record<string, unknown> = {
|
||||
'@type': 'Service',
|
||||
'@id': `${BASE}/stage-aligned-infrastructure#service`,
|
||||
name: 'Stage-Aligned Infrastructure',
|
||||
url: `${BASE}/stage-aligned-infrastructure`,
|
||||
description:
|
||||
'Infrastructure strategy for early-stage SaaS teams that aligns cloud, SaaS, and deployment decisions with company stage, reducing unnecessary complexity and preserving runway.',
|
||||
serviceType: 'Startup Infrastructure Strategy',
|
||||
provider: { '@id': `${BASE}/#organization` },
|
||||
areaServed: { '@type': 'Country', name: 'United States' },
|
||||
audience: {
|
||||
'@type': 'Audience',
|
||||
audienceType: 'Early-stage SaaS founders and small engineering teams',
|
||||
},
|
||||
};
|
||||
@@ -1,130 +0,0 @@
|
||||
import { BASE, WORDMARK } from './constants';
|
||||
|
||||
export const homepageJsonLdGraph: Record<string, unknown> = {
|
||||
'@type': 'WebPage',
|
||||
'@id': `${BASE}/#webpage`,
|
||||
url: `${BASE}/`,
|
||||
name: 'mifi Ventures | Hands-On Product Architecture for Early-Stage SaaS',
|
||||
description:
|
||||
'Hands-on product architecture for early-stage SaaS teams—SaaS architecture, MVP launch support, fractional CTO guidance, and stage-aligned infrastructure strategy.',
|
||||
isPartOf: { '@id': `${BASE}/#website` },
|
||||
about: { '@id': `${BASE}/#organization` },
|
||||
mainEntity: { '@id': `${BASE}/#organization` },
|
||||
primaryImageOfPage: {
|
||||
'@type': 'ImageObject',
|
||||
url: WORDMARK,
|
||||
},
|
||||
inLanguage: 'en-US',
|
||||
};
|
||||
|
||||
export const servicesPageJsonLdGraph: Record<string, unknown> = {
|
||||
'@type': 'WebPage',
|
||||
'@id': `${BASE}/services#webpage`,
|
||||
url: `${BASE}/services`,
|
||||
name: 'SaaS Architecture Services | mifi Ventures',
|
||||
description:
|
||||
'Hands-on SaaS architecture consulting for early-stage teams. Services include product architecture, MVP launch support, fractional CTO guidance, and stage-aligned infrastructure strategy.',
|
||||
isPartOf: { '@id': `${BASE}/#website` },
|
||||
about: { '@id': `${BASE}/#organization` },
|
||||
primaryImageOfPage: {
|
||||
'@type': 'ImageObject',
|
||||
url: WORDMARK,
|
||||
},
|
||||
inLanguage: 'en-US',
|
||||
};
|
||||
|
||||
export const handsOnSaaSArchitectureConsultantPageJsonLdGraph: Record<string, unknown> = {
|
||||
'@type': 'WebPage',
|
||||
'@id': `${BASE}/hands-on-saas-architecture-consultant#webpage`,
|
||||
url: `${BASE}/hands-on-saas-architecture-consultant`,
|
||||
name: 'SaaS Product Architecture Consultant | mifi Ventures',
|
||||
description:
|
||||
'Hands-on product architecture for early-stage SaaS teams. Build frontend foundations that scale with reusable components, design tokens, accessibility, and clean architecture.',
|
||||
isPartOf: { '@id': `${BASE}/#website` },
|
||||
about: { '@id': `${BASE}/#organization` },
|
||||
primaryImageOfPage: {
|
||||
'@type': 'ImageObject',
|
||||
url: WORDMARK,
|
||||
},
|
||||
inLanguage: 'en-US',
|
||||
};
|
||||
|
||||
export const mvpArchitectureAndLaunchPageJsonLdGraph: Record<string, unknown> = {
|
||||
'@type': 'WebPage',
|
||||
'@id': `${BASE}/mvp-architecture-and-launch#webpage`,
|
||||
url: `${BASE}/mvp-architecture-and-launch`,
|
||||
name: 'MVP Architecture & Launch Consultant | mifi Ventures',
|
||||
description:
|
||||
'Architecture and implementation support for early-stage SaaS MVPs that need to ship quickly without structural debt, fragile CSS, or difficult-to-extend product foundations.',
|
||||
isPartOf: { '@id': `${BASE}/#website` },
|
||||
about: { '@id': `${BASE}/#organization` },
|
||||
primaryImageOfPage: {
|
||||
'@type': 'ImageObject',
|
||||
url: WORDMARK,
|
||||
},
|
||||
inLanguage: 'en-US',
|
||||
};
|
||||
|
||||
export const fractionalCtoForEarlyStageSaaSPageJsonLdGraph: Record<string, unknown> = {
|
||||
'@type': 'WebPage',
|
||||
'@id': `${BASE}/fractional-cto-for-early-stage-saas#webpage`,
|
||||
url: `${BASE}/fractional-cto-for-early-stage-saas`,
|
||||
name: 'Fractional CTO for Early-Stage SaaS | mifi Ventures',
|
||||
description:
|
||||
'Hands-on technical leadership for early-stage SaaS teams that need architectural guidance, technical tradeoff evaluation, and senior oversight without hiring a full-time CTO.',
|
||||
isPartOf: { '@id': `${BASE}/#website` },
|
||||
about: { '@id': `${BASE}/#organization` },
|
||||
primaryImageOfPage: {
|
||||
'@type': 'ImageObject',
|
||||
url: WORDMARK,
|
||||
},
|
||||
inLanguage: 'en-US',
|
||||
};
|
||||
|
||||
export const stageAlignedInfrastructurePageJsonLdGraph: Record<string, unknown> = {
|
||||
'@type': 'WebPage',
|
||||
'@id': `${BASE}/stage-aligned-infrastructure#webpage`,
|
||||
url: `${BASE}/stage-aligned-infrastructure`,
|
||||
name: 'Stage-Aligned Infrastructure for Startups | mifi Ventures',
|
||||
description:
|
||||
'Infrastructure strategy for early-stage SaaS teams that aligns cloud, SaaS, and deployment decisions with company stage, reducing unnecessary complexity and preserving runway.',
|
||||
isPartOf: { '@id': `${BASE}/#website` },
|
||||
about: { '@id': `${BASE}/#organization` },
|
||||
primaryImageOfPage: {
|
||||
'@type': 'ImageObject',
|
||||
url: WORDMARK,
|
||||
},
|
||||
inLanguage: 'en-US',
|
||||
};
|
||||
|
||||
export const privacyPolicyPageJsonLdGraph: Record<string, unknown> = {
|
||||
'@type': 'WebPage',
|
||||
'@id': `${BASE}/privacy-policy#webpage`,
|
||||
url: `${BASE}/privacy-policy`,
|
||||
name: 'Privacy Policy | mifi Ventures',
|
||||
description:
|
||||
'Read the mifi Ventures privacy policy, including how personal information is collected, used, stored, and protected.',
|
||||
isPartOf: { '@id': `${BASE}/#website` },
|
||||
about: { '@id': `${BASE}/#organization` },
|
||||
primaryImageOfPage: {
|
||||
'@type': 'ImageObject',
|
||||
url: WORDMARK,
|
||||
},
|
||||
inLanguage: 'en-US',
|
||||
};
|
||||
|
||||
export const termsOfServicePageJsonLdGraph: Record<string, unknown> = {
|
||||
'@type': 'WebPage',
|
||||
'@id': `${BASE}/terms-of-service#webpage`,
|
||||
url: `${BASE}/terms-of-service`,
|
||||
name: 'Terms of Service | mifi Ventures',
|
||||
description:
|
||||
'Read the mifi Ventures terms of service, including the terms governing use of the site and consulting services.',
|
||||
isPartOf: { '@id': `${BASE}/#website` },
|
||||
about: { '@id': `${BASE}/#organization` },
|
||||
primaryImageOfPage: {
|
||||
'@type': 'ImageObject',
|
||||
url: WORDMARK,
|
||||
},
|
||||
inLanguage: 'en-US',
|
||||
};
|
||||
@@ -1,229 +0,0 @@
|
||||
/**
|
||||
* Privacy Policy content for mifi Ventures. Used by /privacy-policy.
|
||||
* Last updated: March 12, 2026. Includes Messaging Policy (SMS) for OpenPhone / A2P compliance; Microsoft Clarity and Google Analytics.
|
||||
*/
|
||||
|
||||
export interface LegalSectionLink {
|
||||
href: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
export interface LegalSection {
|
||||
id: string;
|
||||
heading: string;
|
||||
body: string[];
|
||||
list?: string[];
|
||||
/** Optional links to inject into body paragraphs (URLs in text become <a> with this label) */
|
||||
links?: LegalSectionLink[];
|
||||
/** Numbered sub-sections (e.g. Messaging Policy 1–6) */
|
||||
subsections?: { title: string; body: string[]; list?: string[] }[];
|
||||
}
|
||||
|
||||
export const privacyPolicy = {
|
||||
title: 'Privacy Policy',
|
||||
lastUpdated: 'March 12, 2026',
|
||||
intro: [
|
||||
'mifi Ventures LLC respects your privacy and is committed to protecting personal information shared through this website and related communications.',
|
||||
'This policy explains what information we collect, how it is used, and how it is protected.',
|
||||
],
|
||||
sections: [
|
||||
{
|
||||
id: 'information-we-collect',
|
||||
heading: 'Information We Collect',
|
||||
body: [
|
||||
'We may collect limited personal information when you interact with the website or contact us.',
|
||||
'This may include:',
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'contact-information',
|
||||
heading: 'Contact Information',
|
||||
body: [],
|
||||
list: ['Name', 'Email address', 'Phone number'],
|
||||
},
|
||||
{
|
||||
id: 'communication-data',
|
||||
heading: 'Communication Data',
|
||||
body: [
|
||||
'Information you provide when contacting us through email, contact forms, or SMS.',
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'technical-information',
|
||||
heading: 'Technical Information',
|
||||
body: [
|
||||
'Basic technical information collected through analytics or server logs, such as:',
|
||||
],
|
||||
list: ['IP address', 'Browser type', 'Pages visited', 'Device type'],
|
||||
},
|
||||
{
|
||||
id: 'technical-information-use',
|
||||
heading: 'Use of technical information',
|
||||
body: [
|
||||
'This information is used only to maintain the website, improve performance, and monitor security.',
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'analytics-and-tracking',
|
||||
heading: 'Analytics and Tracking Technologies',
|
||||
body: [
|
||||
'We use a mix of first-party and third-party analytics tools to understand how visitors use this website and to improve our services.',
|
||||
'We use Umami as a first-party analytics tool to measure aggregate usage of this site for internal reporting and performance insights; Umami data is not sold or shared for third-party advertising.',
|
||||
'We partner with Microsoft Clarity and Microsoft Advertising to capture how you use and interact with our website through behavioral metrics, heatmaps, and session replay to improve and market our products and services. Website usage data is captured using first- and third-party cookies and similar tracking technologies to determine the popularity of content and online activity. We also use this information for site optimization, security and fraud detection, and advertising. These third-party tools only run if you consent to non-essential analytics via our cookie banner.',
|
||||
'For more information about how Microsoft collects and uses your data, see the Microsoft Privacy Statement: https://www.microsoft.com/privacy/privacystatement.',
|
||||
'We also use Google Analytics (only if you consent) to collect information about website usage, such as pages visited, time on site, and browser and device information. Google Analytics uses cookies and similar technologies to help us analyze how visitors use the site and to compile aggregated statistics.',
|
||||
'You can learn more about how Google handles data in Google Analytics at: https://policies.google.com/privacy and https://policies.google.com/technologies/partner-sites.',
|
||||
'We store your analytics preference (for example, whether you accepted or rejected non-essential analytics) in a small piece of first-party device storage so we can remember your choice on future visits.',
|
||||
],
|
||||
links: [
|
||||
{
|
||||
href: 'https://www.microsoft.com/privacy/privacystatement',
|
||||
label: 'Microsoft Privacy Statement',
|
||||
},
|
||||
{
|
||||
href: 'https://policies.google.com/privacy',
|
||||
label: 'Google Privacy Policy',
|
||||
},
|
||||
{
|
||||
href: 'https://policies.google.com/technologies/partner-sites',
|
||||
label: 'How Google uses data from sites and apps',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'how-we-use',
|
||||
heading: 'How We Use Information',
|
||||
body: ['Information collected may be used to:'],
|
||||
list: [
|
||||
'Respond to inquiries',
|
||||
'Provide consulting or development services',
|
||||
'Communicate with clients',
|
||||
'Improve website functionality',
|
||||
'Maintain security and prevent abuse',
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'messaging-policy',
|
||||
heading: 'Messaging Policy (SMS)',
|
||||
body: [
|
||||
'mifi Ventures uses SMS messages only for direct, conversational communication with clients or prospective clients.',
|
||||
],
|
||||
subsections: [
|
||||
{
|
||||
title: 'Purpose',
|
||||
body: ['SMS may be used for:'],
|
||||
list: [
|
||||
'Responding to inbound inquiries',
|
||||
'Scheduling and appointment coordination',
|
||||
'Project and service-related communication',
|
||||
'Status updates and time-sensitive notifications requested by the client',
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'No Marketing / No Sale of Data',
|
||||
body: [
|
||||
'We do not send unsolicited marketing text messages. We do not sell, rent, or share phone numbers for marketing purposes.',
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Consent',
|
||||
body: [
|
||||
'You provide consent by initiating contact with us, requesting communication by text, and/or providing your phone number for communication related to your inquiry or services.',
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Opt-Out',
|
||||
body: [
|
||||
'You may opt out at any time by replying STOP. After opting out, you will no longer receive SMS messages unless you re-initiate contact.',
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Message Frequency and Rates',
|
||||
body: [
|
||||
'Message frequency varies depending on the nature of the communication. Standard message and data rates may apply depending on your mobile carrier.',
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Support',
|
||||
body: ['For support, contact: contact@mifi.ventures'],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'sms-phone-communications',
|
||||
heading: 'SMS and Phone Communications',
|
||||
body: [
|
||||
'If you provide a phone number when contacting us, we may respond via phone call or SMS.',
|
||||
'SMS messages are used only for direct communication with clients or prospective clients, including scheduling, service communication, or responses to inquiries.',
|
||||
'We do not send unsolicited marketing messages.',
|
||||
'You may opt out of SMS communication at any time by replying STOP.',
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'data-security',
|
||||
heading: 'Data Security',
|
||||
body: [
|
||||
'mifi Ventures implements reasonable administrative and technical safeguards to protect personal information.',
|
||||
'Security measures may include:',
|
||||
],
|
||||
list: [
|
||||
'Encrypted website connections (HTTPS)',
|
||||
'Secure hosting infrastructure',
|
||||
'Restricted access to internal systems',
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'data-security-note',
|
||||
heading: 'Security limitations',
|
||||
body: [
|
||||
'While we take reasonable precautions, no online system can guarantee absolute security.',
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'data-sharing',
|
||||
heading: 'Data Sharing',
|
||||
body: [
|
||||
'mifi Ventures does not sell, rent, or trade personal information.',
|
||||
'Information may be shared only when necessary with trusted service providers that support the operation of the website or business services. These providers are required to protect the confidentiality of the data they process.',
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'data-retention',
|
||||
heading: 'Data Retention',
|
||||
body: [
|
||||
'Personal information is retained only for as long as necessary to fulfill communication, operational, or legal obligations.',
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'your-rights',
|
||||
heading: 'Your Rights',
|
||||
body: [
|
||||
'Depending on your jurisdiction, you may have the right to: request access to personal data; request correction or deletion of data; withdraw consent for communications.',
|
||||
'If you are located in a region with specific data protection laws (such as the European Economic Area or the United Kingdom), you may have additional rights under those laws; we will handle such requests in line with applicable legal requirements.',
|
||||
'Requests may be submitted using the contact information below.',
|
||||
],
|
||||
list: [
|
||||
'Request access to personal data',
|
||||
'Request correction or deletion of data',
|
||||
'Withdraw consent for communications',
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'policy-updates',
|
||||
heading: 'Policy Updates',
|
||||
body: [
|
||||
'This Privacy Policy may be updated periodically to reflect operational or legal changes. The updated date will appear at the top of the page.',
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'contact',
|
||||
heading: 'Contact',
|
||||
body: [
|
||||
'Questions regarding this Privacy Policy may be directed to:',
|
||||
'mifi Ventures LLC',
|
||||
'legal@mifi.ventures',
|
||||
'https://mifi.ventures',
|
||||
],
|
||||
},
|
||||
] as LegalSection[],
|
||||
};
|
||||
@@ -1,187 +0,0 @@
|
||||
import type { ServiceDetailContent } from '$lib/types/service-page';
|
||||
|
||||
const discoveryCallUrl =
|
||||
'https://cal.mifi.ventures/the-mifi/30min?utm_source=website&utm_medium=cta&utm_campaign=schedule_call&utm_content=fractional_cto_page';
|
||||
|
||||
export const pageContent: ServiceDetailContent = {
|
||||
hero: {
|
||||
title: 'Fractional CTO for Early-Stage SaaS',
|
||||
subtitle:
|
||||
'At a certain point, early-stage SaaS teams need more than just developers shipping features. They need someone steering the technical decisions. I work alongside founders and engineers to keep architecture sane, prevent premature complexity, and help teams move fast without creating structural problems.',
|
||||
bookingLinkTitle: 'Book a discovery call',
|
||||
bookingLinkUrl: discoveryCallUrl,
|
||||
secondaryCta: {
|
||||
href: '#approach',
|
||||
label: 'See how I work',
|
||||
umamiEventLabel: 'see how i work',
|
||||
},
|
||||
},
|
||||
tocItems: [
|
||||
{ label: 'When teams need technical leadership', href: '#when-teams' },
|
||||
{ label: 'The two common failure modes', href: '#failure-modes' },
|
||||
{ label: 'What working with me looks like', href: '#approach' },
|
||||
{ label: 'What engineering teams notice', href: '#what-changes' },
|
||||
{ label: 'Engagement structure', href: '#engagement' },
|
||||
{ label: "Who it's for", href: '#who-its-for' },
|
||||
{ label: 'FAQ', href: '#faq' },
|
||||
{ label: 'Get in touch', href: '#final-cta' },
|
||||
],
|
||||
navItems: [
|
||||
{ label: 'Home', href: '/', umamiEventLabel: 'home' },
|
||||
{ label: 'How I work', href: '#approach', umamiEventLabel: 'approach' },
|
||||
{ label: 'Engagement', href: '#engagement', umamiEventLabel: 'engagement' },
|
||||
{ label: 'FAQ', href: '#faq', umamiEventLabel: 'faq' },
|
||||
{
|
||||
label: 'Book a call',
|
||||
href: `${discoveryCallUrl}-navigation`,
|
||||
umamiEventLabel: 'book-call',
|
||||
},
|
||||
],
|
||||
sections: [
|
||||
{
|
||||
id: 'when-teams',
|
||||
headingId: 'when-teams-heading',
|
||||
heading: 'When a team needs technical leadership—but not a full-time CTO',
|
||||
paragraphs: [
|
||||
'Most early-stage SaaS companies reach a moment where shipping features is no longer the only challenge. Architecture decisions start to compound. Tooling choices matter. Hiring decisions become technical decisions.',
|
||||
'But hiring a full-time CTO is often premature.',
|
||||
'A fractional CTO provides senior-level guidance without the cost and commitment of a full-time executive.',
|
||||
'Typical signs a team is here:',
|
||||
],
|
||||
bullets: [
|
||||
'The codebase is growing quickly and architectural decisions are becoming harder to reverse',
|
||||
'Founders want a second opinion on technical tradeoffs',
|
||||
'Engineering teams are shipping but lack architectural guardrails',
|
||||
'Tooling and infrastructure decisions feel arbitrary',
|
||||
'Hiring engineers without a clear technical standard',
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'failure-modes',
|
||||
headingId: 'failure-modes-heading',
|
||||
heading: 'The two ways early-stage teams usually get it wrong',
|
||||
paragraphs: ['I see two patterns repeatedly.'],
|
||||
subsections: [
|
||||
{
|
||||
heading: 'Over-building too early',
|
||||
paragraphs: [
|
||||
"Teams adopt infrastructure and services designed for companies ten times their size. They spend time and capital building systems they don't yet need.",
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: 'Shipping chaos',
|
||||
paragraphs: [
|
||||
'Other teams rush an MVP by outsourcing development cheaply, producing something that works—but is extremely difficult to iterate on.',
|
||||
],
|
||||
},
|
||||
],
|
||||
trailingParagraphs: [
|
||||
'Healthy early-stage engineering balances both pressures: lean spending with solid foundations.',
|
||||
],
|
||||
footerLinks: [
|
||||
{
|
||||
label: 'Hands-on SaaS architecture',
|
||||
href: '/services/hands-on-saas-architecture-consultant',
|
||||
},
|
||||
{
|
||||
label: 'MVP architecture and launch',
|
||||
href: '/services/mvp-architecture-and-launch',
|
||||
},
|
||||
{
|
||||
label: 'Stage-aligned infrastructure',
|
||||
href: '/services/stage-aligned-infrastructure',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'approach',
|
||||
headingId: 'approach-heading',
|
||||
heading: 'What working with me looks like',
|
||||
paragraphs: [
|
||||
'I operate as a technical partner for founders and engineering teams.',
|
||||
'That means I help with both strategic decisions and practical implementation.',
|
||||
'Typical involvement includes:',
|
||||
],
|
||||
bullets: [
|
||||
'Reviewing architecture decisions before they become expensive mistakes',
|
||||
'Participating in product and roadmap discussions',
|
||||
'Setting architectural guardrails for the engineering team',
|
||||
'Evaluating tooling and infrastructure choices',
|
||||
'Mentoring developers and improving engineering practices',
|
||||
'Refactoring critical parts of the codebase when necessary',
|
||||
'Helping founders understand the technical tradeoffs behind decisions',
|
||||
],
|
||||
trailingParagraphs: [
|
||||
'I am not a slide-deck CTO. I stay close enough to the code to keep decisions grounded in reality.',
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'what-changes',
|
||||
headingId: 'what-changes-heading',
|
||||
heading: 'What changes when technical leadership is present',
|
||||
paragraphs: [
|
||||
'When a team has clear technical leadership, several things happen quickly:',
|
||||
],
|
||||
bullets: [
|
||||
'Architectural decisions become intentional instead of reactive',
|
||||
'Developers move faster because the system has clearer structure',
|
||||
'Tooling choices become consistent',
|
||||
'Technical discussions shift from opinion to reasoning',
|
||||
'Engineers spend more time building and less time debating direction',
|
||||
],
|
||||
trailingParagraphs: [
|
||||
'The result is not just cleaner systems—but a calmer engineering culture.',
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'engagement',
|
||||
headingId: 'engagement-heading',
|
||||
heading: 'How fractional CTO engagements usually work',
|
||||
paragraphs: [
|
||||
'Engagements are typically structured as a monthly retainer with defined availability.',
|
||||
"Typical involvement ranges between 10–40 hours per month depending on the company's stage and needs.",
|
||||
'This usually includes:',
|
||||
],
|
||||
bullets: [
|
||||
'Regular founder check-ins',
|
||||
'Engineering architecture reviews',
|
||||
'Product roadmap discussions',
|
||||
'Codebase and system reviews',
|
||||
'Guidance on hiring and technical standards',
|
||||
],
|
||||
trailingParagraphs: [
|
||||
'The goal is consistent oversight without becoming a bottleneck.',
|
||||
],
|
||||
},
|
||||
],
|
||||
who: {
|
||||
whoForList: [
|
||||
'Founder-led SaaS companies',
|
||||
'1–15 engineers',
|
||||
'Teams preparing to scale their product',
|
||||
'Companies that want technical leadership without a full-time CTO',
|
||||
],
|
||||
whoNotList: [
|
||||
'Companies that already have strong senior technical leadership',
|
||||
'Enterprises needing full-time executive presence',
|
||||
'Teams looking only for implementation without architectural guidance',
|
||||
],
|
||||
},
|
||||
scheduleCta: {
|
||||
sectionId: 'final-cta',
|
||||
headingId: 'final-cta-heading',
|
||||
title: 'Need a technical adult in the room?',
|
||||
subtitle:
|
||||
'If your team is shipping quickly but architectural decisions are starting to feel heavier, a fractional CTO engagement can provide the guidance needed to keep the system healthy while the product grows.',
|
||||
bookingLinkTitle: 'Book a discovery call',
|
||||
bookingLinkUrl: `${discoveryCallUrl}-schedule-section`,
|
||||
showEmailLink: true,
|
||||
},
|
||||
meta: {
|
||||
title: 'Fractional CTO for Early-Stage SaaS | mifi Ventures',
|
||||
description:
|
||||
'Technical leadership for early-stage SaaS teams that need architectural direction without hiring a full-time CTO. Hands-on guidance that keeps teams shipping while preventing structural mistakes.',
|
||||
jsonLdServiceDescription:
|
||||
'Fractional CTO and technical partner for early-stage SaaS: architectural direction, codebase and tooling guidance, and hands-on leadership without the cost of a full-time CTO. Monthly retainer engagements.',
|
||||
},
|
||||
};
|
||||
@@ -1,36 +0,0 @@
|
||||
/**
|
||||
* FAQ for the fractional CTO for early-stage SaaS service page.
|
||||
* Single source of truth for both the page content and FAQPage JSON-LD.
|
||||
*/
|
||||
|
||||
export interface FaqItem {
|
||||
question: string;
|
||||
answer: string;
|
||||
}
|
||||
|
||||
export const faqItems: FaqItem[] = [
|
||||
{
|
||||
question: 'What does "fractional CTO" actually mean?',
|
||||
answer: 'A fractional CTO is a part-time technical leader who provides CTO-level guidance without the cost of a full-time executive. You get senior architectural direction, decision review, and technical oversight on a retainer basis—typically 10–40 hours per month depending on your stage.',
|
||||
},
|
||||
{
|
||||
question: 'How involved are you in day-to-day engineering?',
|
||||
answer: 'I stay close enough to the code to keep decisions grounded. That means architecture reviews, participation in product and roadmap discussions, and hands-on refactoring when it matters. I’m not a slide-deck CTO—I operate as a technical partner who can both advise and implement.',
|
||||
},
|
||||
{
|
||||
question: 'Can you still contribute code?',
|
||||
answer: 'Yes. I contribute code when it’s the right leverage: critical refactors, foundation work, or examples that set standards for the team. The goal is to improve the system and transfer knowledge, not to become a permanent implementer.',
|
||||
},
|
||||
{
|
||||
question: 'How long do engagements usually last?',
|
||||
answer: 'Engagements are typically ongoing month-to-month. Some teams need fractional leadership for 6–12 months until they hire a full-time CTO; others stay on a retainer longer. We align on goals and revisit as your team grows.',
|
||||
},
|
||||
{
|
||||
question: 'Can you help with hiring engineers?',
|
||||
answer: 'Yes. I help define technical standards, review candidates, and advise on team structure. Hiring decisions are technical decisions—having a clear bar and someone who can assess it makes a big difference.',
|
||||
},
|
||||
{
|
||||
question: 'What tech stacks do you work with?',
|
||||
answer: 'I work with modern web and SaaS stacks—frontend, backend, and infrastructure. The principles of good architecture (separation of concerns, maintainability, stage-appropriate choices) transfer across stacks. We can discuss fit for your stack.',
|
||||
},
|
||||
];
|
||||
@@ -1,230 +0,0 @@
|
||||
import type { ServiceDetailContent } from '$lib/types/service-page';
|
||||
|
||||
const discoveryCallUrl =
|
||||
'https://cal.mifi.ventures/the-mifi/30min?utm_source=website&utm_medium=cta&utm_campaign=schedule_call&utm_content=hands_on_saas_arch_page';
|
||||
|
||||
export const pageContent: ServiceDetailContent = {
|
||||
hero: {
|
||||
title: 'Hands-On Product Architecture for Early-Stage SaaS',
|
||||
subtitle:
|
||||
"Most early-stage teams obsess over backend performance and treat the frontend as a thin layer. That's backwards. The frontend is the product—and if its foundations aren't built to scale, iteration slows, bugs multiply, and shipping becomes stressful. I work inside your codebase to build frontend systems that enable velocity: clean CSS architecture, reusable components, tokenized design systems, and accessibility from day one.",
|
||||
bookingLinkTitle: 'Book a discovery call',
|
||||
bookingLinkUrl: discoveryCallUrl,
|
||||
secondaryCta: {
|
||||
href: '#approach',
|
||||
label: 'See my approach',
|
||||
umamiEventLabel: 'see my approach',
|
||||
},
|
||||
},
|
||||
tocItems: [
|
||||
{ label: 'Credibility', href: '#credibility' },
|
||||
{ label: 'Why this matters', href: '#why-this-matters' },
|
||||
{ label: 'The frontend is the product', href: '#frontend-is-product' },
|
||||
{ label: 'What goes wrong', href: '#what-goes-wrong' },
|
||||
{ label: 'My approach', href: '#approach' },
|
||||
{ label: 'Outcomes', href: '#outcomes' },
|
||||
{ label: 'Engagement options', href: '#engagement' },
|
||||
{ label: "Who it's for", href: '#who-its-for' },
|
||||
{ label: 'FAQ', href: '#faq' },
|
||||
{ label: 'Get in touch', href: '#final-cta' },
|
||||
],
|
||||
navItems: [
|
||||
{ label: 'Home', href: '/', umamiEventLabel: 'home' },
|
||||
{ label: 'My approach', href: '#approach', umamiEventLabel: 'approach' },
|
||||
{ label: 'Outcomes', href: '#outcomes', umamiEventLabel: 'outcomes' },
|
||||
{ label: 'Engagement', href: '#engagement', umamiEventLabel: 'engagement' },
|
||||
{ label: 'FAQ', href: '#faq', umamiEventLabel: 'faq' },
|
||||
{
|
||||
label: 'Book a call',
|
||||
href: `${discoveryCallUrl}-navigation`,
|
||||
umamiEventLabel: 'book-call',
|
||||
},
|
||||
],
|
||||
sections: [
|
||||
{
|
||||
id: 'credibility',
|
||||
heading: 'Credibility',
|
||||
headingSrOnly: true,
|
||||
sectionClass: 'service-credibility',
|
||||
narrowContainer: false,
|
||||
bulletsListClass: 'service-credibility__list',
|
||||
bullets: [
|
||||
'Product developer at heart; systems-minded by default',
|
||||
'Frontend foundations: CSS architecture, design tokens, component libraries',
|
||||
'Accessibility-first (bolting it on later is always expensive)',
|
||||
'Stage-aware decisions that preserve runway without slowing shipping',
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'why-this-matters',
|
||||
headingId: 'why-heading',
|
||||
heading: "Shipping slows down quietly—until it suddenly doesn't",
|
||||
paragraphs: [
|
||||
"Early-stage SaaS rarely fails because the backend can't handle load. It fails because iteration becomes painful.",
|
||||
'When the frontend is ad hoc—CSS drift, inconsistent components, no tokens, accessibility bolted on later—every new feature costs more than it should. Engineers hesitate to touch code. Small changes break unrelated screens. Design becomes inconsistent. Velocity drops.',
|
||||
'This is not a "design problem." It\'s an architecture problem.',
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'frontend-is-product',
|
||||
headingId: 'frontend-heading',
|
||||
heading: 'The frontend is the product',
|
||||
paragraphs: [
|
||||
"Your customers don't experience your database schema. They experience your UI.",
|
||||
"A performant backend matters—but it's not more important than a frontend built for iteration. The frontend drives conversion, communicates trust, and determines how quickly your team can ship new features without breaking old ones.",
|
||||
'If you want to move fast later, you have to build a foundation now.',
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'what-goes-wrong',
|
||||
headingId: 'wrong-heading',
|
||||
heading: 'What I see most often',
|
||||
bullets: [
|
||||
'Backend-crafted frontends: functional, but brittle and inconsistent',
|
||||
'"CSS as an afterthought": global overrides, magic numbers, creeping specificity wars',
|
||||
"Component sprawl: dozens of one-off components that can't be reused",
|
||||
'No design tokens: colors, spacing, typography duplicated everywhere',
|
||||
'Accessibility postponed: expensive retrofits, inconsistent semantics',
|
||||
'Rebuilding instead of composing: no "lego system," so iteration is slow and repetitive',
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'approach',
|
||||
headingId: 'approach-heading',
|
||||
heading: 'My approach: architecture through implementation',
|
||||
paragraphs: [
|
||||
"I'm not a diagram consultant. I'm hands-on. I get into the codebase and build the foundation your team can extend.",
|
||||
'The goal is simple: make iteration cheap.',
|
||||
],
|
||||
subsections: [
|
||||
{
|
||||
heading: '1) Fix the CSS foundation first',
|
||||
paragraphs: [
|
||||
'Bad CSS makes everything inconsistent and makes change arduous. I start by establishing a maintainable CSS architecture that supports a coherent visual language and reduces the bug surface area.',
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: '2) Build a reusable component system',
|
||||
paragraphs: [
|
||||
'I create a component library that lowers duplication and prevents developers from "re-solving" the same UI problems. This increases speed and improves consistency.',
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: '3) Tokenize the design system',
|
||||
paragraphs: [
|
||||
'Design tokens (color, spacing, typography, radii, shadows) allow the brand to evolve without rewrites. You can iterate quickly as you discover what your product should feel like.',
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: '4) Bake in accessibility from day one',
|
||||
paragraphs: [
|
||||
'Accessibility isn\'t optional and it isn\'t "later." Bolting it on later is always expensive. Doing it early saves time, improves UX, and strengthens SEO.',
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: '5) Keep the whole system stage-aligned',
|
||||
paragraphs: [
|
||||
"I'm pragmatic about tooling. Some things can stay on free tiers early. Some choices should be intentional because migration later is painful. The point is to preserve runway without slowing shipping.",
|
||||
],
|
||||
},
|
||||
],
|
||||
footerLinks: [
|
||||
{
|
||||
label: 'Fractional CTO for early-stage SaaS',
|
||||
href: '/services/fractional-cto-for-early-stage-saas',
|
||||
},
|
||||
{
|
||||
label: 'MVP architecture and launch',
|
||||
href: '/services/mvp-architecture-and-launch',
|
||||
},
|
||||
{
|
||||
label: 'Stage-aligned infrastructure',
|
||||
href: '/services/stage-aligned-infrastructure',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'outcomes',
|
||||
headingId: 'outcomes-heading',
|
||||
heading: 'What changes when the foundation is right',
|
||||
paragraphs: [
|
||||
"It's all connected—speed, bugs, confidence, and morale are one big ball of yarn. When the frontend foundation is right, the whole system gets calmer.",
|
||||
],
|
||||
bullets: [
|
||||
'Developers ship faster with less hesitation',
|
||||
'Lower bug rate from fewer one-off implementations',
|
||||
'Cohesive UI and clearer product identity',
|
||||
'Faster design iteration without rewrites',
|
||||
'Accessibility becomes the default, not a retrofit',
|
||||
'SEO improves naturally via good structure and semantics',
|
||||
'Higher release confidence and better team morale',
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'engagement',
|
||||
headingId: 'engagement-heading',
|
||||
heading: 'How we can work together',
|
||||
subsections: [
|
||||
{
|
||||
heading: 'Architecture engagement (high-fee, fixed scope)',
|
||||
bullets: [
|
||||
'Codebase review focused on frontend foundations',
|
||||
'CSS + component audit, prioritized action plan',
|
||||
'Token strategy and incremental adoption plan',
|
||||
'Accessibility baseline and standards',
|
||||
'A roadmap your team can execute',
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: 'Implementation (optional, bounded)',
|
||||
bullets: [
|
||||
'Hands-on refactors and foundation building',
|
||||
'Component library creation and rollout',
|
||||
'Tokenization and theming support',
|
||||
"Documentation and handoff so you're not dependent on me",
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: 'Advisory retainer (recurring, low-liability)',
|
||||
bullets: [
|
||||
'Regular check-ins to keep architecture clean as you ship',
|
||||
'Review of component/API decisions and PRs (optional)',
|
||||
'Guidance on tooling tradeoffs as you grow',
|
||||
'No 24/7 pager-duty MSP model',
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
who: {
|
||||
whoForHeading: 'Who this is for',
|
||||
whoForList: [
|
||||
'Founder-led SaaS teams',
|
||||
'1–15 engineers (and growing)',
|
||||
'Teams shipping fast but feeling UI/UX friction',
|
||||
'Teams who want adult-level architecture without slowing down',
|
||||
],
|
||||
whoNotList: [
|
||||
'Organizations looking for pure strategy decks and diagrams',
|
||||
'Teams wanting a long-term embedded full-time DevOps engineer',
|
||||
'Companies needing 24/7 managed hosting with strict SLAs',
|
||||
],
|
||||
},
|
||||
scheduleCta: {
|
||||
sectionId: 'final-cta',
|
||||
headingId: 'final-cta-heading',
|
||||
title: 'Want to ship faster without frontend debt?',
|
||||
subtitle:
|
||||
"If your UI feels brittle, inconsistent, or slow to evolve, you're not alone—and you don't need a massive rewrite. Let's build a foundation that makes iteration cheap.",
|
||||
bookingLinkTitle: 'Book a discovery call',
|
||||
bookingLinkUrl: `${discoveryCallUrl}-schedule-section`,
|
||||
showEmailLink: true,
|
||||
},
|
||||
meta: {
|
||||
title: 'SaaS Product Architecture Consultant | mifi Ventures',
|
||||
description:
|
||||
'I help early-stage SaaS teams ship faster by building scalable frontend foundations—clean CSS, component libraries, design tokens, and accessibility from day one—so iteration accelerates instead of slowing down.',
|
||||
jsonLdServiceDescription:
|
||||
'Hands-on product architecture for early-stage SaaS: frontend foundations, CSS architecture, component libraries, design tokens, and accessibility from day one. Architecture engagement, implementation support, and advisory retainer.',
|
||||
},
|
||||
};
|
||||
@@ -1,40 +0,0 @@
|
||||
/**
|
||||
* FAQ for the hands-on SaaS architecture consultant service page.
|
||||
* Single source of truth for both the page content and FAQPage JSON-LD.
|
||||
*/
|
||||
|
||||
export interface FaqItem {
|
||||
question: string;
|
||||
answer: string;
|
||||
}
|
||||
|
||||
export const faqItems: FaqItem[] = [
|
||||
{
|
||||
question: 'Do you only do frontend?',
|
||||
answer: "No. I'm product-first with backend and infra awareness—but frontend foundations are often the bottleneck for early-stage teams. I focus where the friction is.",
|
||||
},
|
||||
{
|
||||
question: 'Will this slow us down?',
|
||||
answer: 'No. The goal is to make iteration cheaper. A solid foundation reduces rework and lets you ship faster over time.',
|
||||
},
|
||||
{
|
||||
question: 'Do we need a full redesign?',
|
||||
answer: 'Usually no. I take an incremental foundation approach: fix the architecture and systems first, then evolve the UI. Big-bang redesigns are rarely necessary.',
|
||||
},
|
||||
{
|
||||
question: 'What tech stacks do you work with?',
|
||||
answer: 'I work with modern web stacks—React, Vue, Svelte, and similar. The principles (CSS architecture, tokens, components, accessibility) transfer. We can discuss fit for your stack.',
|
||||
},
|
||||
{
|
||||
question: 'How do you handle accessibility?',
|
||||
answer: "Baseline standards (semantic markup, keyboard, focus, ARIA where needed) plus components built accessibly from the start. It's baked into the system, not bolted on.",
|
||||
},
|
||||
{
|
||||
question: 'Can you work with our designer?',
|
||||
answer: 'Yes. Design tokens and a component system give designers and engineers a shared language. I can align with your design process and tools.',
|
||||
},
|
||||
{
|
||||
question: 'Do you offer ongoing support?',
|
||||
answer: 'Yes, via an advisory retainer: regular check-ins, optional PR review, and guidance as you grow. Bounded and lightweight—not a 24/7 MSP model.',
|
||||
},
|
||||
];
|
||||
@@ -1,103 +0,0 @@
|
||||
import type { ServicesLandingContent } from '$lib/types/service-page';
|
||||
|
||||
const discoveryCallUrl =
|
||||
'https://cal.mifi.ventures/the-mifi/30min?utm_source=website&utm_medium=cta&utm_campaign=schedule_call&utm_content=services_landing';
|
||||
|
||||
export const pageContent: ServicesLandingContent = {
|
||||
hero: {
|
||||
title: 'Consulting Services',
|
||||
subtitle:
|
||||
'I work with early-stage SaaS teams to build products that ship quickly and evolve cleanly. Engagements range from hands-on architecture work inside your codebase to technical leadership for growing teams.',
|
||||
bookingLinkTitle: 'Schedule a discovery call',
|
||||
bookingLinkUrl: discoveryCallUrl,
|
||||
secondaryCta: {
|
||||
href: '/#process',
|
||||
label: 'See how I work',
|
||||
umamiEventLabel: 'see how i work',
|
||||
},
|
||||
},
|
||||
navItems: [
|
||||
{ label: 'Home', href: '/', umamiEventLabel: 'home' },
|
||||
{ label: 'Services', href: '#services-grid', umamiEventLabel: 'services' },
|
||||
{
|
||||
label: 'How engagements work',
|
||||
href: '#how-engagements-work',
|
||||
umamiEventLabel: 'engagements',
|
||||
},
|
||||
{
|
||||
label: 'Book a call',
|
||||
href: `${discoveryCallUrl}-navigation`,
|
||||
umamiEventLabel: 'book-call',
|
||||
},
|
||||
],
|
||||
introParagraphs: [
|
||||
'Early-stage SaaS companies face different technical challenges as they grow. Some need help building their MVP correctly. Others need architectural guidance as complexity increases. Some teams simply need a senior engineer who can step in and stabilize a chaotic codebase.',
|
||||
'The services below represent the most common ways I work with founders and engineering teams.',
|
||||
],
|
||||
services: [
|
||||
{
|
||||
title: 'Hands-On SaaS Architecture',
|
||||
description:
|
||||
'Build the foundations that allow SaaS products to evolve without accumulating structural debt. I work directly inside your codebase to improve frontend systems, establish reusable components, and create architecture that supports long-term iteration.',
|
||||
href: '/services/hands-on-saas-architecture-consultant',
|
||||
},
|
||||
{
|
||||
title: 'MVP Architecture & Launch',
|
||||
description:
|
||||
"Ship your product quickly without creating a fragile system you'll have to rewrite six months later. I help teams design and build MVPs that are simple, scalable, and structured for rapid iteration.",
|
||||
href: '/services/mvp-architecture-and-launch',
|
||||
},
|
||||
{
|
||||
title: 'Fractional CTO / Technical Partner',
|
||||
description:
|
||||
"Technical leadership for teams that need architectural direction but aren't ready for a full-time CTO. I work alongside founders and engineers to guide system design, evaluate technical decisions, and maintain long-term architectural clarity.",
|
||||
href: '/services/fractional-cto-for-early-stage-saas',
|
||||
},
|
||||
{
|
||||
title: 'Stage-Aligned Infrastructure',
|
||||
description:
|
||||
"Infrastructure decisions should match your company's stage. I help teams avoid unnecessary SaaS sprawl and cloud complexity while building infrastructure that can grow with the product.",
|
||||
href: '/services/stage-aligned-infrastructure',
|
||||
},
|
||||
],
|
||||
engagementsIntro: 'Most engagements fall into one of three patterns:',
|
||||
engagements: [
|
||||
{
|
||||
term: 'Architecture engagements',
|
||||
definition:
|
||||
'Focused, fixed-scope projects designed to diagnose and correct structural issues in a codebase.',
|
||||
},
|
||||
{
|
||||
term: 'Implementation work',
|
||||
definition: 'Hands-on engineering to build or refactor core product systems.',
|
||||
},
|
||||
{
|
||||
term: 'Advisory retainers',
|
||||
definition:
|
||||
'Ongoing architectural guidance for teams that need senior technical oversight.',
|
||||
},
|
||||
],
|
||||
engagementsOutro:
|
||||
'Engagements are typically consulting-led and scoped to deliver meaningful progress quickly.',
|
||||
idealClients: [
|
||||
'Founder-led SaaS startups',
|
||||
'Engineering teams with 1–15 developers',
|
||||
'Products that are actively shipping and evolving',
|
||||
'Teams that value thoughtful engineering decisions',
|
||||
],
|
||||
scheduleCta: {
|
||||
title: 'Not sure which service fits?',
|
||||
subtitle:
|
||||
'Many engagements start with a short conversation about your product and technical challenges. From there we can determine whether architecture work, MVP support, or ongoing technical leadership makes the most sense.',
|
||||
bookingLinkTitle: 'Schedule a discovery call',
|
||||
bookingLinkUrl: `${discoveryCallUrl}-schedule-section`,
|
||||
showEmailLink: true,
|
||||
},
|
||||
meta: {
|
||||
title: 'SaaS Architecture Services | mifi Ventures',
|
||||
description:
|
||||
'Hands-on SaaS architecture consulting for early-stage teams. Services include product architecture, MVP launch support, fractional CTO guidance, and stage-aligned infrastructure strategy.',
|
||||
jsonLdServiceDescription:
|
||||
'SaaS architecture consulting for early-stage teams: hands-on product architecture, MVP launch support, fractional CTO, and stage-aligned infrastructure strategy.',
|
||||
},
|
||||
};
|
||||
@@ -1,195 +0,0 @@
|
||||
import type { ServiceDetailContent } from '$lib/types/service-page';
|
||||
|
||||
const discoveryCallUrl =
|
||||
'https://cal.mifi.ventures/the-mifi/30min?utm_source=website&utm_medium=cta&utm_campaign=schedule_call&utm_content=mvp_arch_launch_page';
|
||||
|
||||
export const pageContent: ServiceDetailContent = {
|
||||
hero: {
|
||||
title: 'MVP Architecture & Launch for Early-Stage SaaS',
|
||||
subtitle:
|
||||
'Shipping fast is good. Shipping chaos is expensive. I help early-stage SaaS teams build MVPs that move quickly without creating frontend debt, fragile CSS, or structural problems that slow iteration six months later.',
|
||||
bookingLinkTitle: 'Book a discovery call',
|
||||
bookingLinkUrl: discoveryCallUrl,
|
||||
secondaryCta: {
|
||||
href: '#approach',
|
||||
label: 'See how I work',
|
||||
umamiEventLabel: 'see how i work',
|
||||
},
|
||||
},
|
||||
tocItems: [
|
||||
{ label: 'The common MVP pattern', href: '#common-pattern' },
|
||||
{ label: 'What a good MVP foundation looks like', href: '#good-foundation' },
|
||||
{ label: 'My approach', href: '#approach' },
|
||||
{ label: 'What changes within 1–2 weeks', href: '#what-changes' },
|
||||
{ label: 'Engagement options', href: '#engagement' },
|
||||
{ label: "Who it's for", href: '#who-its-for' },
|
||||
{ label: 'FAQ', href: '#faq' },
|
||||
{ label: 'Get in touch', href: '#final-cta' },
|
||||
],
|
||||
navItems: [
|
||||
{ label: 'Home', href: '/', umamiEventLabel: 'home' },
|
||||
{ label: 'My approach', href: '#approach', umamiEventLabel: 'approach' },
|
||||
{ label: 'Engagement', href: '#engagement', umamiEventLabel: 'engagement' },
|
||||
{ label: 'FAQ', href: '#faq', umamiEventLabel: 'faq' },
|
||||
{
|
||||
label: 'Book a call',
|
||||
href: `${discoveryCallUrl}-navigation`,
|
||||
umamiEventLabel: 'book-call',
|
||||
},
|
||||
],
|
||||
sections: [
|
||||
{
|
||||
id: 'common-pattern',
|
||||
headingId: 'common-pattern-heading',
|
||||
heading: 'Most MVPs are built for speed—few are built for iteration',
|
||||
paragraphs: [
|
||||
'Early MVPs often prioritize backend logic and feature delivery. The frontend becomes an afterthought—functional, but brittle. Six months later, every new feature feels heavier than the last.',
|
||||
'Common symptoms:',
|
||||
],
|
||||
bullets: [
|
||||
'Poor separation of concerns',
|
||||
'Backend-heavy architecture with fragile UI',
|
||||
'Repeated components instead of reusable systems',
|
||||
'Spaghetti CSS and specificity wars',
|
||||
'Accessibility postponed',
|
||||
'"We\'ll clean it up later" decisions compounding',
|
||||
],
|
||||
trailingParagraphs: ["Speed isn't the problem. Structure is."],
|
||||
},
|
||||
{
|
||||
id: 'good-foundation',
|
||||
headingId: 'good-foundation-heading',
|
||||
heading: 'MVP does not mean throwaway',
|
||||
paragraphs: ['A well-built MVP is minimal—but intentional.', 'It includes:'],
|
||||
bullets: [
|
||||
'Clear separation between layers',
|
||||
'Reusable, composable frontend components',
|
||||
'Tokenized design systems (color, spacing, typography)',
|
||||
'Clean, maintainable CSS architecture',
|
||||
'Accessibility baked in from day one',
|
||||
'A simple, predictable deployment path',
|
||||
],
|
||||
trailingParagraphs: [
|
||||
'You can move fast and build correctly at the same time.',
|
||||
],
|
||||
footerLinks: [
|
||||
{
|
||||
label: 'Hands-on SaaS architecture',
|
||||
href: '/services/hands-on-saas-architecture-consultant',
|
||||
},
|
||||
{
|
||||
label: 'Fractional CTO for early-stage SaaS',
|
||||
href: '/services/fractional-cto-for-early-stage-saas',
|
||||
},
|
||||
{
|
||||
label: 'Stage-aligned infrastructure',
|
||||
href: '/services/stage-aligned-infrastructure',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'approach',
|
||||
headingId: 'approach-heading',
|
||||
heading: 'Architecture through implementation',
|
||||
paragraphs: [
|
||||
"I don't deliver diagrams and disappear. I work inside your codebase.",
|
||||
'My approach:',
|
||||
],
|
||||
orderedBullets: [
|
||||
'Fix the CSS foundation first.',
|
||||
'Extract and standardize reusable components.',
|
||||
'Introduce design tokens to prevent duplication.',
|
||||
'Align frontend and backend boundaries.',
|
||||
'Improve accessibility and semantics incrementally.',
|
||||
'Keep shipping while refactoring.',
|
||||
],
|
||||
trailingParagraphs: ['No rewrite mandates. No velocity freeze.'],
|
||||
},
|
||||
{
|
||||
id: 'what-changes',
|
||||
headingId: 'what-changes-heading',
|
||||
heading: 'What teams notice quickly',
|
||||
paragraphs: [
|
||||
'In most cases, teams feel the difference within 1–2 weeks once foundational issues are corrected.',
|
||||
"You'll see:",
|
||||
],
|
||||
bullets: [
|
||||
'Faster feature implementation',
|
||||
'Lower bug rates',
|
||||
'More consistent UI',
|
||||
'Safer refactors',
|
||||
'Increased release confidence',
|
||||
'Better team morale',
|
||||
],
|
||||
trailingParagraphs: [
|
||||
"It's all one big ball of yarn—clean up the foundation and everything moves more smoothly.",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'engagement',
|
||||
headingId: 'engagement-heading',
|
||||
heading: 'How we can work together',
|
||||
subsections: [
|
||||
{
|
||||
heading: 'MVP Architecture Engagement (fixed scope)',
|
||||
bullets: [
|
||||
'Codebase review focused on frontend foundations',
|
||||
'Structural audit and prioritized roadmap',
|
||||
'Component system extraction plan',
|
||||
'CSS cleanup and token strategy',
|
||||
'Accessibility baseline',
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: 'Hands-On Implementation (optional)',
|
||||
bullets: [
|
||||
'Direct refactoring and component system creation',
|
||||
'Tokenized design system rollout',
|
||||
'Pairing with your engineers',
|
||||
'Documentation and knowledge transfer',
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: 'Ongoing Advisory (optional)',
|
||||
bullets: [
|
||||
'Periodic architecture reviews',
|
||||
'Guardrails as you scale',
|
||||
'Guidance on feature/system tradeoffs',
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
who: {
|
||||
whoForHeading: 'Ideal fit',
|
||||
whoForList: [
|
||||
'Founder-led SaaS teams',
|
||||
'1–10 engineers',
|
||||
'Recently launched MVP',
|
||||
'Feeling UI friction or code fragility',
|
||||
'Want adult-level architecture without slowing down',
|
||||
],
|
||||
whoNotList: [
|
||||
'Teams who only want features shipped as fast as possible without regard for structure',
|
||||
'Organizations looking purely for architecture slide decks',
|
||||
'Large enterprises needing formal procurement processes',
|
||||
],
|
||||
},
|
||||
scheduleCta: {
|
||||
sectionId: 'final-cta',
|
||||
headingId: 'final-cta-heading',
|
||||
title: 'Ready to stabilize your MVP?',
|
||||
subtitle:
|
||||
"If your MVP shipped fast but now feels fragile, let's reinforce the foundation before iteration slows further.",
|
||||
bookingLinkTitle: 'Schedule a discovery call',
|
||||
bookingLinkUrl: `${discoveryCallUrl}-schedule-section`,
|
||||
showEmailLink: true,
|
||||
},
|
||||
meta: {
|
||||
title: 'MVP Architecture & Launch Consultant | mifi Ventures',
|
||||
description:
|
||||
'I help early-stage SaaS teams build and stabilize MVPs with clean frontend foundations, reusable components, and scalable architecture—so you can ship fast without creating chaos six months later.',
|
||||
jsonLdServiceDescription:
|
||||
'MVP architecture and launch for early-stage SaaS: clean foundations, reusable components, tokenized design systems, and accessibility from day one. Fixed-scope engagement, hands-on implementation, and optional advisory.',
|
||||
},
|
||||
};
|
||||
@@ -1,40 +0,0 @@
|
||||
/**
|
||||
* FAQ for the MVP architecture and launch service page.
|
||||
* Single source of truth for both the page content and FAQPage JSON-LD.
|
||||
*/
|
||||
|
||||
export interface FaqItem {
|
||||
question: string;
|
||||
answer: string;
|
||||
}
|
||||
|
||||
export const faqItems: FaqItem[] = [
|
||||
{
|
||||
question: 'Will this slow us down?',
|
||||
answer: 'No. The goal is to make iteration cheaper. I work incrementally—fixing foundations while you keep shipping. No rewrite mandates, no velocity freeze.',
|
||||
},
|
||||
{
|
||||
question: 'Do we need a full rewrite?',
|
||||
answer: 'Usually no. Most MVPs need structural cleanup and a clear component/CSS strategy, not a from-scratch rebuild. We prioritize the highest-leverage fixes first.',
|
||||
},
|
||||
{
|
||||
question: 'What tech stacks do you work with?',
|
||||
answer: 'I work with modern web stacks—React, Vue, Svelte, and similar. The principles (separation of concerns, tokens, components, accessibility) transfer. We can discuss fit for your stack.',
|
||||
},
|
||||
{
|
||||
question: 'How do you handle accessibility?',
|
||||
answer: 'Accessibility is baked in incrementally: semantic markup, keyboard and focus behavior, and ARIA where needed. Doing it as we refactor is far cheaper than retrofitting later.',
|
||||
},
|
||||
{
|
||||
question: 'Can you work alongside our existing devs?',
|
||||
answer: 'Yes. I pair with your team, document decisions, and hand off so you’re not dependent on me. Knowledge transfer is part of the engagement.',
|
||||
},
|
||||
{
|
||||
question: 'How quickly will we see impact?',
|
||||
answer: 'Most teams feel the difference within 1–2 weeks once foundational issues are addressed: faster feature work, fewer bugs, and safer refactors.',
|
||||
},
|
||||
{
|
||||
question: 'Do you only focus on frontend?',
|
||||
answer: "I'm product-first. Frontend foundations are often the bottleneck for early MVPs, so that's where I focus—but I align with your backend boundaries and deployment so the whole system makes sense.",
|
||||
},
|
||||
];
|
||||
@@ -1,185 +0,0 @@
|
||||
import type { ServiceDetailContent } from '$lib/types/service-page';
|
||||
|
||||
const discoveryCallUrl =
|
||||
'https://cal.mifi.ventures/the-mifi/30min?utm_source=website&utm_medium=cta&utm_campaign=schedule_call&utm_content=stage_aligned_infra_page';
|
||||
|
||||
export const pageContent: ServiceDetailContent = {
|
||||
hero: {
|
||||
title: 'Stage-Aligned Infrastructure for Early-Stage SaaS',
|
||||
subtitle:
|
||||
'Infrastructure should match the stage of your company. Many early SaaS teams inherit complex cloud architectures and SaaS stacks designed for companies ten times their size. The result is predictable: large monthly bills and operational complexity that slows engineering teams down. I help founders design infrastructure that is simple, predictable, and able to evolve as the product grows.',
|
||||
bookingLinkTitle: 'Book a discovery call',
|
||||
bookingLinkUrl: discoveryCallUrl,
|
||||
secondaryCta: {
|
||||
href: '#approach',
|
||||
label: 'See my approach',
|
||||
umamiEventLabel: 'see my approach',
|
||||
},
|
||||
},
|
||||
tocItems: [
|
||||
{ label: 'The early-stage infrastructure trap', href: '#trap' },
|
||||
{ label: 'The real cost', href: '#real-cost' },
|
||||
{ label: 'What stage-aligned looks like', href: '#what-it-looks-like' },
|
||||
{ label: 'Seeded cloud', href: '#seeded-cloud' },
|
||||
{ label: 'When cloud services make sense', href: '#when-cloud' },
|
||||
{ label: 'How I help', href: '#approach' },
|
||||
{ label: "Who it's for", href: '#who-its-for' },
|
||||
{ label: 'FAQ', href: '#faq' },
|
||||
{ label: 'Get in touch', href: '#final-cta' },
|
||||
],
|
||||
navItems: [
|
||||
{ label: 'Home', href: '/', umamiEventLabel: 'home' },
|
||||
{ label: 'My approach', href: '#approach', umamiEventLabel: 'approach' },
|
||||
{ label: 'FAQ', href: '#faq', umamiEventLabel: 'faq' },
|
||||
{
|
||||
label: 'Book a call',
|
||||
href: `${discoveryCallUrl}-navigation`,
|
||||
umamiEventLabel: 'book-call',
|
||||
},
|
||||
],
|
||||
sections: [
|
||||
{
|
||||
id: 'trap',
|
||||
headingId: 'trap-heading',
|
||||
heading: 'How early-stage companies end up with enterprise infrastructure',
|
||||
paragraphs: [
|
||||
'Many startups adopt infrastructure patterns designed for much larger organizations.',
|
||||
'Common causes include:',
|
||||
],
|
||||
bullets: [
|
||||
'Copying architectures from big tech companies',
|
||||
'Following tutorials designed for enterprise-scale systems',
|
||||
'Adding cloud services incrementally without a clear strategy',
|
||||
'Believing that complex infrastructure signals maturity',
|
||||
],
|
||||
trailingParagraphs: [
|
||||
'The result is often a patchwork of services that are expensive to run and difficult to reason about.',
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'real-cost',
|
||||
headingId: 'real-cost-heading',
|
||||
heading: 'The hidden cost of infrastructure complexity',
|
||||
paragraphs: [
|
||||
'Infrastructure complexity has two costs: money and cognitive load.',
|
||||
'Founders frequently notice the first sign when monthly cloud or SaaS bills grow unexpectedly. But the second cost can be even more damaging.',
|
||||
'Engineers begin spending time navigating infrastructure instead of building product. Debugging becomes harder. Deployments become fragile. Small teams are suddenly maintaining systems designed for companies with dedicated platform teams.',
|
||||
'Infrastructure should enable product development, not compete with it.',
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'what-it-looks-like',
|
||||
headingId: 'what-heading',
|
||||
heading: 'Infrastructure that grows with the product',
|
||||
paragraphs: [
|
||||
'Stage-aligned infrastructure starts simple and becomes more sophisticated only when necessary.',
|
||||
'For many early products, a straightforward deployment environment can support far more growth than founders expect. Simple environments are easier to understand, easier to maintain, and far less expensive.',
|
||||
'As the product scales, infrastructure can evolve deliberately rather than reactively.',
|
||||
'The goal is not minimalism for its own sake. The goal is intentional complexity.',
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'seeded-cloud',
|
||||
headingId: 'seeded-cloud-heading',
|
||||
heading: 'Seeded Cloud Infrastructure',
|
||||
paragraphs: [
|
||||
'I sometimes describe this approach as "seeded cloud."',
|
||||
'Instead of inheriting a massive ecosystem of services from day one, companies plant a small, understandable infrastructure foundation that can grow over time.',
|
||||
'This might include:',
|
||||
],
|
||||
bullets: [
|
||||
'Simple compute environments',
|
||||
'Predictable deployment pipelines',
|
||||
'Minimal operational overhead',
|
||||
'Tooling chosen for clarity and maintainability',
|
||||
],
|
||||
trailingParagraphs: [
|
||||
'As the product grows, that foundation can expand naturally into more sophisticated architectures.',
|
||||
'Infrastructure evolves when scale requires it—not before.',
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'when-cloud',
|
||||
headingId: 'when-cloud-heading',
|
||||
heading: 'When managed cloud services are the right choice',
|
||||
paragraphs: [
|
||||
'Cloud platforms and SaaS tools exist for good reasons. For some companies and stages they are absolutely the right decision.',
|
||||
'Examples include:',
|
||||
],
|
||||
bullets: [
|
||||
'Teams operating at significant scale',
|
||||
'Organizations with compliance requirements',
|
||||
'Products requiring specialized infrastructure capabilities',
|
||||
'Companies with dedicated platform engineering teams',
|
||||
],
|
||||
trailingParagraphs: [
|
||||
'The key is adopting these tools deliberately, not reflexively.',
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'approach',
|
||||
headingId: 'approach-heading',
|
||||
heading: 'How I help teams realign their infrastructure',
|
||||
paragraphs: [
|
||||
'My work typically focuses on helping founders and engineering teams simplify their infrastructure while preserving the ability to grow.',
|
||||
'Typical engagements include:',
|
||||
],
|
||||
bullets: [
|
||||
'Infrastructure audits and simplification',
|
||||
'Evaluating cloud and SaaS tool usage',
|
||||
'Identifying unnecessary complexity',
|
||||
'Designing simpler deployment patterns',
|
||||
'Aligning infrastructure with product stage',
|
||||
'Planning transitions as scale increases',
|
||||
],
|
||||
trailingParagraphs: [
|
||||
'The goal is not rebuilding everything. The goal is restoring clarity and intentionality.',
|
||||
],
|
||||
footerLinks: [
|
||||
{
|
||||
label: 'Hands-on SaaS architecture',
|
||||
href: '/services/hands-on-saas-architecture-consultant',
|
||||
},
|
||||
{
|
||||
label: 'MVP architecture and launch',
|
||||
href: '/services/mvp-architecture-and-launch',
|
||||
},
|
||||
{
|
||||
label: 'Fractional CTO for early-stage SaaS',
|
||||
href: '/services/fractional-cto-for-early-stage-saas',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
who: {
|
||||
whoForHeading: 'Ideal clients',
|
||||
whoForList: [
|
||||
'Founder-led SaaS companies',
|
||||
'Teams with 1–15 engineers',
|
||||
'Startups experiencing growing infrastructure costs',
|
||||
'Companies that feel their infrastructure is more complex than their product requires',
|
||||
],
|
||||
whoNotList: [
|
||||
'Large enterprises with dedicated platform teams',
|
||||
'Companies already operating at significant infrastructure scale',
|
||||
'Organizations seeking fully managed hosting providers',
|
||||
],
|
||||
},
|
||||
scheduleCta: {
|
||||
sectionId: 'final-cta',
|
||||
headingId: 'final-cta-heading',
|
||||
title: 'Infrastructure should support your product—not compete with it',
|
||||
subtitle:
|
||||
'If your infrastructure feels more complicated than your product requires, it may be time to simplify. Stage-aligned infrastructure helps teams focus on building features instead of maintaining unnecessary systems.',
|
||||
bookingLinkTitle: 'Schedule a discovery call',
|
||||
bookingLinkUrl: `${discoveryCallUrl}-schedule-section`,
|
||||
showEmailLink: true,
|
||||
},
|
||||
meta: {
|
||||
title: 'Startup Infrastructure Strategy | mifi Ventures',
|
||||
description:
|
||||
"Infrastructure decisions should match your company's stage. I help early-stage SaaS teams avoid unnecessary cloud complexity and SaaS sprawl while building infrastructure foundations that scale with the product.",
|
||||
jsonLdServiceDescription:
|
||||
'Stage-aligned infrastructure for early-stage SaaS: infrastructure audits, simplification, and strategy so complexity matches company stage. Capital efficiency, reduced sprawl, and foundations that evolve with the product.',
|
||||
},
|
||||
};
|
||||
@@ -1,36 +0,0 @@
|
||||
/**
|
||||
* FAQ for the stage-aligned infrastructure service page.
|
||||
* Single source of truth for both the page content and FAQPage JSON-LD.
|
||||
*/
|
||||
|
||||
export interface FaqItem {
|
||||
question: string;
|
||||
answer: string;
|
||||
}
|
||||
|
||||
export const faqItems: FaqItem[] = [
|
||||
{
|
||||
question: 'What does stage-aligned infrastructure mean?',
|
||||
answer: 'Infrastructure complexity should grow with your company’s stage—not ahead of it. Stage-aligned infrastructure starts simple and intentional, then evolves deliberately when scale, compliance, or team size justify it. The goal is to avoid overbuilding too early while keeping a foundation that can grow.',
|
||||
},
|
||||
{
|
||||
question: 'Are you anti-cloud?',
|
||||
answer: 'No. Cloud and managed services are the right choice for many companies at the right stage. I’m pragmatic: the question is whether your current complexity matches your actual needs. Adopting cloud services deliberately, when they’re justified, is different from inheriting enterprise patterns by default.',
|
||||
},
|
||||
{
|
||||
question: 'Can simple infrastructure really support a growing SaaS product?',
|
||||
answer: 'Yes. Many early-stage products are surprised by how much a straightforward deployment environment can support. Simple systems are easier to maintain, cheaper to run, and leave more time for building product. You add complexity when scale or requirements demand it—not before.',
|
||||
},
|
||||
{
|
||||
question: 'When should startups adopt more advanced cloud architectures?',
|
||||
answer: 'When compliance, team size, availability requirements, or scale justify the cost and operational burden. There’s no single threshold—it’s about aligning infrastructure with real needs. The goal is to adopt advanced tooling intentionally, with clear reasons, rather than by default.',
|
||||
},
|
||||
{
|
||||
question: 'Can you work with our existing infrastructure?',
|
||||
answer: 'Yes. Most engagements focus on auditing and simplifying what you already have—identifying unnecessary complexity, consolidating tooling, and designing clearer deployment patterns. The goal is restoring clarity and intentionality, not rebuilding everything from scratch.',
|
||||
},
|
||||
{
|
||||
question: 'How quickly can infrastructure complexity be reduced?',
|
||||
answer: 'It depends on the current state, but many teams see a clear path within the first engagement. Simplification is often incremental: we prioritize the highest-impact changes first and plan transitions so the team can keep shipping while complexity is reduced.',
|
||||
},
|
||||
];
|
||||
@@ -1,115 +0,0 @@
|
||||
/**
|
||||
* Terms of Service content for mifi Ventures. Used by /terms-of-service.
|
||||
* Last updated: March 12, 2026. OpenPhone / A2P messaging compliance; data protection positioning.
|
||||
*/
|
||||
|
||||
export interface LegalSection {
|
||||
id: string;
|
||||
heading: string;
|
||||
body: string[];
|
||||
list?: string[];
|
||||
}
|
||||
|
||||
export const termsOfService = {
|
||||
title: 'Terms of Service',
|
||||
lastUpdated: 'March 12, 2026',
|
||||
intro: [
|
||||
'These Terms of Service govern the use of the website operated by mifi Ventures LLC ("mifi Ventures", "we", "our", or "us").',
|
||||
'By accessing or using this website, you agree to these terms. If you do not agree, you should not use this website.',
|
||||
],
|
||||
sections: [
|
||||
{
|
||||
id: 'services',
|
||||
heading: 'Services',
|
||||
body: [
|
||||
'mifi Ventures provides consulting, software development, technical architecture, and related professional services. The information presented on this website is for informational purposes and may be updated or modified at any time.',
|
||||
'Use of the website does not create a client relationship unless explicitly established through a written agreement.',
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'client-communications',
|
||||
heading: 'Client Communications',
|
||||
body: [
|
||||
'If you contact mifi Ventures through this website, email, phone, or other communication channels, you consent to receiving responses related to your inquiry.',
|
||||
'These communications may include:',
|
||||
],
|
||||
list: ['Email', 'Phone calls', 'SMS or text messages'],
|
||||
},
|
||||
{
|
||||
id: 'client-communications-sms',
|
||||
heading: 'SMS and text messages',
|
||||
body: [
|
||||
'SMS messages are used solely for direct communication with clients or prospective clients. These may include scheduling messages, project communications, or responses to inquiries.',
|
||||
'mifi Ventures does not send unsolicited marketing text messages and does not sell or share phone numbers for marketing purposes.',
|
||||
'Message frequency varies depending on the nature of the communication. Standard messaging and data rates may apply depending on your mobile carrier.',
|
||||
'You may opt out of SMS communications at any time by replying STOP.',
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'acceptable-use',
|
||||
heading: 'Acceptable Use',
|
||||
body: ['Users of this website agree not to:'],
|
||||
list: [
|
||||
'Use the website for unlawful purposes',
|
||||
'Attempt to gain unauthorized access to systems or data',
|
||||
'Interfere with the operation or security of the website',
|
||||
'Use automated tools to scrape or harvest data from the site',
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'intellectual-property',
|
||||
heading: 'Intellectual Property',
|
||||
body: [
|
||||
'All content on this website, including text, graphics, branding, and software, is the property of mifi Ventures LLC unless otherwise stated.',
|
||||
'Content may not be reproduced, distributed, or reused without written permission.',
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'third-party-services',
|
||||
heading: 'Third-Party Services',
|
||||
body: [
|
||||
'This website may reference or integrate with third-party platforms or services. mifi Ventures is not responsible for the privacy practices or content of external services.',
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'data-protection-and-privacy',
|
||||
heading: 'Data Protection and Privacy',
|
||||
body: [
|
||||
'Your use of this website is also subject to our Privacy Policy, which explains what information we collect, how it is used, and your choices. By using this website, you acknowledge that you have reviewed the Privacy Policy.',
|
||||
'mifi Ventures is based in the United States and primarily serves U.S.-based clients. However, if you are located in a region with specific data protection laws (such as the European Economic Area or the United Kingdom), we will handle personal data in accordance with applicable data protection requirements to the extent they apply and as described in the Privacy Policy.',
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'limitation-of-liability',
|
||||
heading: 'Limitation of Liability',
|
||||
body: [
|
||||
'To the fullest extent permitted by law, mifi Ventures LLC shall not be liable for indirect, incidental, or consequential damages arising from use of this website or related services.',
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'governing-law',
|
||||
heading: 'Governing Law and Jurisdiction',
|
||||
body: [
|
||||
'These Terms of Service are governed by the laws of the Commonwealth of Massachusetts and applicable federal law of the United States, without regard to conflict of law principles.',
|
||||
'Any disputes arising out of or relating to these terms or your use of this website shall be brought exclusively in the state or federal courts located in Massachusetts, except where applicable data protection laws provide you with mandatory rights to bring claims in another jurisdiction.',
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'changes',
|
||||
heading: 'Changes to These Terms',
|
||||
body: [
|
||||
'These Terms of Service may be updated periodically. Continued use of the website after updates indicates acceptance of the revised terms.',
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'contact',
|
||||
heading: 'Contact',
|
||||
body: [
|
||||
'Questions regarding these Terms of Service may be directed to:',
|
||||
'mifi Ventures LLC',
|
||||
'legal@mifi.ventures',
|
||||
'https://mifi.ventures',
|
||||
],
|
||||
},
|
||||
] satisfies LegalSection[],
|
||||
} as const;
|
||||
@@ -1,6 +0,0 @@
|
||||
export interface FaqItem {
|
||||
question: string;
|
||||
answer: string;
|
||||
}
|
||||
|
||||
export type FaqList = FaqItem[];
|
||||
@@ -1,132 +0,0 @@
|
||||
/**
|
||||
* Shared types for service pages and services landing.
|
||||
* Used by content modules and components for localization-ready structure.
|
||||
*/
|
||||
|
||||
export interface ServiceHeroSecondaryCta {
|
||||
href: string;
|
||||
label: string;
|
||||
umamiEventLabel: string;
|
||||
}
|
||||
|
||||
export interface ServiceHeroContent {
|
||||
title: string;
|
||||
subtitle: string;
|
||||
bookingLinkTitle: string;
|
||||
bookingLinkUrl: string;
|
||||
secondaryCta?: ServiceHeroSecondaryCta;
|
||||
}
|
||||
|
||||
export interface ServiceTocItem {
|
||||
label: string;
|
||||
href: string;
|
||||
}
|
||||
|
||||
export interface ServiceFooterLink {
|
||||
label: string;
|
||||
href: string;
|
||||
}
|
||||
|
||||
export interface ServiceSectionContent {
|
||||
id: string;
|
||||
heading: string;
|
||||
headingId?: string;
|
||||
/** If true, heading is visually hidden (sr-only) for accessibility */
|
||||
headingSrOnly?: boolean;
|
||||
/** Extra class(es) for the section element (e.g. service-credibility) */
|
||||
sectionClass?: string;
|
||||
/** Use narrow; set false for full-width strips (e.g. credibility) */
|
||||
narrowContainer?: boolean;
|
||||
/** Optional class for the bullets ul (e.g. service-credibility__list) */
|
||||
bulletsListClass?: string;
|
||||
lede?: string;
|
||||
paragraphs?: string[];
|
||||
bullets?: string[];
|
||||
orderedBullets?: string[];
|
||||
/** Paragraph(s) rendered after bullets (e.g. "Speed isn't the problem. Structure is.") */
|
||||
trailingParagraphs?: string[];
|
||||
/** Inline links (e.g. cross-links to other services) rendered after content */
|
||||
footerLinks?: ServiceFooterLink[];
|
||||
/** Optional sub-sections: h3 + content (paragraphs and/or bullets) */
|
||||
subsections?: Array<{
|
||||
heading: string;
|
||||
headingId?: string;
|
||||
paragraphs?: string[];
|
||||
bullets?: string[];
|
||||
}>;
|
||||
}
|
||||
|
||||
export interface WhoGridContent {
|
||||
whoForList: string[];
|
||||
whoNotList: string[];
|
||||
title?: string;
|
||||
showTitle?: boolean;
|
||||
whoForHeading?: string;
|
||||
whoNotHeading?: string;
|
||||
}
|
||||
|
||||
export interface ServiceScheduleCta {
|
||||
title: string;
|
||||
subtitle: string;
|
||||
bookingLinkTitle: string;
|
||||
bookingLinkUrl: string;
|
||||
showEmailLink?: boolean;
|
||||
showServicesLink?: boolean;
|
||||
sectionId?: string;
|
||||
headingId?: string;
|
||||
}
|
||||
|
||||
/** Nav item for service/landing page navigation */
|
||||
export interface ServiceNavItem {
|
||||
label: string;
|
||||
href: string;
|
||||
umamiEventLabel: string;
|
||||
}
|
||||
|
||||
/** Service card for the services landing grid */
|
||||
export interface ServiceCard {
|
||||
title: string;
|
||||
description: string;
|
||||
href: string;
|
||||
}
|
||||
|
||||
/** Term/definition for "How engagements work" dl on landing */
|
||||
export interface EngagementItem {
|
||||
term: string;
|
||||
definition: string;
|
||||
}
|
||||
|
||||
/** SEO meta for use in +page.ts (single source of truth with content) */
|
||||
export interface ServicePageMeta {
|
||||
title: string;
|
||||
description: string;
|
||||
/** Optional short description for JSON-LD ProfessionalService */
|
||||
jsonLdServiceDescription?: string;
|
||||
}
|
||||
|
||||
/** Content shape for the services landing page */
|
||||
export interface ServicesLandingContent {
|
||||
hero: ServiceHeroContent;
|
||||
navItems: ServiceNavItem[];
|
||||
introParagraphs: string[];
|
||||
services: ServiceCard[];
|
||||
engagements: EngagementItem[];
|
||||
engagementsIntro?: string;
|
||||
engagementsOutro?: string;
|
||||
idealClients: string[];
|
||||
scheduleCta: ServiceScheduleCta;
|
||||
meta: ServicePageMeta;
|
||||
}
|
||||
|
||||
/** Content shape for a service detail page */
|
||||
export interface ServiceDetailContent {
|
||||
hero: ServiceHeroContent;
|
||||
tocItems: ServiceTocItem[];
|
||||
navItems: ServiceNavItem[];
|
||||
sections: ServiceSectionContent[];
|
||||
who: WhoGridContent;
|
||||
scheduleCta: ServiceScheduleCta;
|
||||
/** Optional FAQ section title override */
|
||||
faqTitle?: string;
|
||||
meta: ServicePageMeta;
|
||||
}
|
||||
@@ -1,8 +1,7 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/state';
|
||||
import { mergeMeta, SEO_DEFAULTS } from '$lib/seo';
|
||||
import { homeMeta } from '$lib/data/home/home-meta';
|
||||
import Footer from '$lib/components/Footer.svelte';
|
||||
import { homeMeta } from '$lib/data/home-meta';
|
||||
|
||||
import '../app.css';
|
||||
|
||||
@@ -20,21 +19,17 @@
|
||||
})
|
||||
: '',
|
||||
);
|
||||
|
||||
const jsonLdHtml = $derived(
|
||||
jsonLdScript
|
||||
? '<scr' + 'ipt type="application/ld+json">' + jsonLdScript + '</scr' + 'ipt>'
|
||||
? '<script type="application/ld+json">' + jsonLdScript + '</scr' + 'ipt>'
|
||||
: '',
|
||||
);
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<script
|
||||
defer
|
||||
src="https://analytics.mifi.holdings/script.js"
|
||||
data-website-id="72ac01ce-e7fc-4582-8593-703f15add8d5"
|
||||
></script>
|
||||
<script defer src="/assets/js/umami-helper.js"></script>
|
||||
<!-- Google tag (gtag.js) -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-36F29PDKRT"></script>
|
||||
<script defer src="/assets/js/ga-init.js"></script>
|
||||
|
||||
<title>{merged.title}</title>
|
||||
<meta name="description" content={merged.description ?? ''} />
|
||||
@@ -47,6 +42,13 @@
|
||||
type="font/woff2"
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
<link
|
||||
rel="preload"
|
||||
href="/assets/fonts/fraunces-v38-latin-700.woff2"
|
||||
as="font"
|
||||
type="font/woff2"
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
<link
|
||||
rel="preload"
|
||||
href="/assets/fonts/inter-v20-latin-regular.woff2"
|
||||
@@ -54,6 +56,13 @@
|
||||
type="font/woff2"
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
<link
|
||||
rel="preload"
|
||||
href="/assets/fonts/inter-v20-latin-italic.woff2"
|
||||
as="font"
|
||||
type="font/woff2"
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
<link
|
||||
rel="preload"
|
||||
href="/assets/fonts/inter-v20-latin-500.woff2"
|
||||
@@ -123,148 +132,15 @@
|
||||
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon.png" />
|
||||
<link rel="apple-touch-icon" href="/favicon.svg" />
|
||||
|
||||
{#if jsonLdHtml}
|
||||
<!-- eslint-disable-next-line svelte/no-at-html-tags -- static trusted JSON-LD -->
|
||||
{@html jsonLdHtml}
|
||||
{/if}
|
||||
|
||||
<script src="/assets/js/copyright-year.js" defer></script>
|
||||
<script src="/assets/js/mobile-menu-helper.js" defer></script>
|
||||
<script src="/assets/js/cookie-consent.js" defer></script>
|
||||
<script src="/assets/scripts/copyright-year.js" defer></script>
|
||||
</svelte:head>
|
||||
|
||||
<a href="#main" class="skip-link" data-umami-event="skip to main content"
|
||||
>Skip to main content</a
|
||||
>
|
||||
<a href="#main" class="skip-link">Skip to main content</a>
|
||||
{@render children()}
|
||||
<Footer />
|
||||
<div id="cookie-banner" class="cookie-banner" role="region" aria-label="Cookie consent">
|
||||
<div class="cookie-banner-content">
|
||||
<p class="cookie-notification-text">
|
||||
We use first-party analytics and, if you accept, third-party tools (e.g.
|
||||
Google, Microsoft) to understand usage and improve this site. You can accept
|
||||
all or reject non-essential analytics.
|
||||
<a href="/privacy-policy#analytics-and-tracking">Learn more</a>.
|
||||
</p>
|
||||
<div class="cookie-banner-actions">
|
||||
<button type="button" class="btn btn-primary small" data-consent="accept"
|
||||
>Accept all</button
|
||||
>
|
||||
<button type="button" class="btn btn-secondary small" data-consent="reject"
|
||||
>Reject non-essential</button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<img
|
||||
src="https://analytics.mifi.holdings/p/wQ9GYnLIg"
|
||||
alt=""
|
||||
width="1"
|
||||
height="1"
|
||||
role="presentation"
|
||||
loading="eager"
|
||||
/>
|
||||
|
||||
<style>
|
||||
.cookie-banner {
|
||||
position: fixed;
|
||||
inset-inline: 0;
|
||||
bottom: 0;
|
||||
z-index: 1000;
|
||||
display: none;
|
||||
background-color: var(--color-bg-elevated, var(--color-bg));
|
||||
color: var(--color-text);
|
||||
border-top: 1px solid var(--color-border);
|
||||
box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.16);
|
||||
|
||||
&:global(.is-visible) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.cookie-banner-content {
|
||||
container: cookie-banner / inline-size;
|
||||
max-width: var(--max-narrow-width);
|
||||
margin: 0 auto;
|
||||
padding: var(--space-md) var(--space-md);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-sm);
|
||||
|
||||
@media (min-width: 768px) {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
.cookie-notification-text {
|
||||
margin: 0;
|
||||
font-size: var(--font-size-small);
|
||||
line-height: var(--line-height-base);
|
||||
|
||||
@container cookie-banner (width >= 644px) {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
@container cookie-banner (width < 644px) {
|
||||
flex: 0 0 100%;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
& a {
|
||||
color: var(--color-primary);
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 0.16em;
|
||||
|
||||
&:hover {
|
||||
color: var(--color-primary-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cookie-banner-actions {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
justify-content: flex-start;
|
||||
|
||||
@container cookie-banner (width >= 644px) {
|
||||
flex: 0 0 auto;
|
||||
gap: var(--space-xs);
|
||||
}
|
||||
|
||||
@container cookie-banner (width < 644px) {
|
||||
flex: 0 0 100%;
|
||||
gap: var(--space-sm);
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
|
||||
& .btn {
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
& [data-consent='accept'] {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-bg);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-primary-hover);
|
||||
}
|
||||
}
|
||||
|
||||
& [data-consent='reject'] {
|
||||
background-color: transparent;
|
||||
color: var(--color-text);
|
||||
border-color: var(--color-primary);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-surface-subtle, rgba(148, 163, 184, 0.16));
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,31 +1,23 @@
|
||||
<script lang="ts">
|
||||
import Navigation from '$lib/components/Navigation.svelte';
|
||||
import HomeHero from '$lib/components/home/Hero.svelte';
|
||||
import ExperienceSection from '$lib/components/home/ExperienceSection.svelte';
|
||||
import WhatWeDo from '$lib/components/home/WhatWeDo.svelte';
|
||||
import ImpactSection from '$lib/components/home/ImpactSection.svelte';
|
||||
import HowWeWork from '$lib/components/home/HowWeWork.svelte';
|
||||
import EngagementsSection from '$lib/components/home/EngagementsSection.svelte';
|
||||
import Hero from '$lib/components/Hero.svelte';
|
||||
import ExperienceSection from '$lib/components/ExperienceSection.svelte';
|
||||
import WhatWeDo from '$lib/components/WhatWeDo.svelte';
|
||||
import ImpactSection from '$lib/components/ImpactSection.svelte';
|
||||
import HowWeWork from '$lib/components/HowWeWork.svelte';
|
||||
import EngagementsSection from '$lib/components/EngagementsSection.svelte';
|
||||
import ScheduleSection from '$lib/components/ScheduleSection.svelte';
|
||||
import { items as navigationItems } from '$lib/data/home/navigation';
|
||||
import ServicesCardGrid from '$lib/components/ServicesCardGrid.svelte';
|
||||
import { services } from '$lib/data/home/services';
|
||||
import Footer from '$lib/components/Footer.svelte';
|
||||
</script>
|
||||
|
||||
<Navigation items={navigationItems} page="home" />
|
||||
<HomeHero />
|
||||
<Navigation />
|
||||
<Hero />
|
||||
<main id="main">
|
||||
<ServicesCardGrid {services} surface="bg-alt" />
|
||||
<ExperienceSection />
|
||||
<WhatWeDo />
|
||||
<ImpactSection />
|
||||
<HowWeWork />
|
||||
<EngagementsSection />
|
||||
<ScheduleSection
|
||||
title="Need a technical adult in the room?"
|
||||
subtitle="Whether you need help launching an MVP, stabilizing a messy product foundation, or adding senior technical judgment as complexity grows, I can help."
|
||||
bookingLinkTitle="Schedule a 30-minute intro call"
|
||||
bookingLinkUrl="https://cal.mifi.ventures/the-mifi/30min?utm_source=website&utm_medium=cta&utm_campaign=schedule_call&utm_content=home_page-schedule-section"
|
||||
showServicesLink
|
||||
/>
|
||||
<ScheduleSection />
|
||||
</main>
|
||||
<Footer />
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import type { PageLoad } from './$types';
|
||||
import { homeMeta } from '$lib/data/home/home-meta';
|
||||
import { homeMeta } from '$lib/data/home-meta';
|
||||
|
||||
export const load: PageLoad = () => {
|
||||
return { meta: homeMeta };
|
||||
|
||||
@@ -1,215 +0,0 @@
|
||||
<script lang="ts">
|
||||
import Navigation from '$lib/components/Navigation.svelte';
|
||||
import { privacyPolicy } from '$lib/data/privacy-policy';
|
||||
import type { LegalSectionLink } from '$lib/data/privacy-policy';
|
||||
|
||||
const navItems = [{ label: 'Home', href: '/', umamiEventLabel: 'home' }];
|
||||
|
||||
type BodySegment = string | { type: 'link'; href: string; label: string };
|
||||
|
||||
/** Splits a paragraph by link URLs and returns text/link segments for rendering. */
|
||||
function linkify(para: string, links: LegalSectionLink[]): BodySegment[] {
|
||||
const matches: { index: number; link: LegalSectionLink }[] = [];
|
||||
for (const link of links) {
|
||||
const idx = para.indexOf(link.href);
|
||||
if (idx !== -1) matches.push({ index: idx, link });
|
||||
}
|
||||
matches.sort((a, b) => a.index - b.index);
|
||||
const result: BodySegment[] = [];
|
||||
let last = 0;
|
||||
for (const { index, link } of matches) {
|
||||
if (index > last) result.push(para.slice(last, index));
|
||||
result.push({ type: 'link', href: link.href, label: link.label });
|
||||
last = index + link.href.length;
|
||||
}
|
||||
if (last < para.length) result.push(para.slice(last));
|
||||
return result.length ? result : [para];
|
||||
}
|
||||
</script>
|
||||
|
||||
<Navigation items={navItems} page="privacy-policy" />
|
||||
|
||||
<main id="main" class="legal-page">
|
||||
<div class="container narrow">
|
||||
<header id="header" class="legal-header">
|
||||
<h1>{privacyPolicy.title}</h1>
|
||||
<p class="legal-last-updated">Last updated: {privacyPolicy.lastUpdated}</p>
|
||||
</header>
|
||||
|
||||
<div class="legal-content">
|
||||
{#each privacyPolicy.intro as para}
|
||||
<p>{para}</p>
|
||||
{/each}
|
||||
|
||||
{#each privacyPolicy.sections as section (section.id)}
|
||||
<section
|
||||
id={section.id}
|
||||
class="legal-section"
|
||||
aria-labelledby={`${section.id}-heading`}
|
||||
>
|
||||
<h2 id={`${section.id}-heading`}>{section.heading}</h2>
|
||||
{#each section.body as para}
|
||||
<p>
|
||||
{#if section.id === 'contact' && para === 'mifi Ventures LLC'}
|
||||
<strong>{para}</strong>
|
||||
{:else if section.id === 'contact' && para === 'legal@mifi.ventures'}
|
||||
<a href="mailto:legal@mifi.ventures"
|
||||
>legal@mifi.ventures</a
|
||||
>
|
||||
{:else if section.id === 'contact' && para === 'https://mifi.ventures'}
|
||||
<a href="https://mifi.ventures" rel="noopener noreferrer"
|
||||
>https://mifi.ventures</a
|
||||
>
|
||||
{:else if section.links}
|
||||
{#each linkify(para, section.links) as segment}
|
||||
{#if typeof segment === 'string'}
|
||||
{segment}
|
||||
{:else}
|
||||
<a href={segment.href} rel="noopener noreferrer"
|
||||
>{segment.label}</a
|
||||
>
|
||||
{/if}
|
||||
{/each}
|
||||
{:else}
|
||||
{para}
|
||||
{/if}
|
||||
</p>
|
||||
{/each}
|
||||
{#if section.list}
|
||||
<ul>
|
||||
{#each section.list as item}
|
||||
<li>{item}</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
{#if section.subsections}
|
||||
{#each section.subsections as sub (sub.title)}
|
||||
<div class="legal-subsection">
|
||||
<h3>{sub.title}</h3>
|
||||
{#each sub.body as para}
|
||||
<p>{para}</p>
|
||||
{/each}
|
||||
{#if sub.list}
|
||||
<ul>
|
||||
{#each sub.list as item}
|
||||
<li>{item}</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
{/if}
|
||||
</section>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<nav class="legal-cross-links" aria-label="Related legal pages">
|
||||
<a href="/terms-of-service">Terms of Service</a>
|
||||
</nav>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<style>
|
||||
.legal-page {
|
||||
padding: var(--space-xxl) 0;
|
||||
background-color: var(--color-bg);
|
||||
}
|
||||
|
||||
.narrow {
|
||||
max-width: var(--max-narrow-width);
|
||||
margin: 0 auto;
|
||||
padding: 0 var(--space-md);
|
||||
}
|
||||
|
||||
.legal-header {
|
||||
margin-bottom: var(--space-xl);
|
||||
}
|
||||
|
||||
.legal-header h1 {
|
||||
font-family: var(--font-family-heading);
|
||||
font-size: var(--font-size-xxl);
|
||||
font-weight: var(--font-weight-bold);
|
||||
line-height: var(--line-height-heading);
|
||||
color: var(--color-text);
|
||||
margin: 0 0 var(--space-sm) 0;
|
||||
}
|
||||
|
||||
.legal-last-updated {
|
||||
font-size: var(--font-size-medium);
|
||||
color: var(--color-text-tertiary);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.legal-content {
|
||||
font-size: var(--font-size-base);
|
||||
line-height: var(--line-height-base);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.legal-content p {
|
||||
margin: 0 0 var(--space-md) 0;
|
||||
}
|
||||
|
||||
.legal-content a {
|
||||
color: var(--color-primary);
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 0.2em;
|
||||
}
|
||||
|
||||
.legal-content a:hover {
|
||||
color: var(--color-primary-hover);
|
||||
}
|
||||
|
||||
.legal-section {
|
||||
margin-bottom: var(--space-xl);
|
||||
}
|
||||
|
||||
.legal-section h2 {
|
||||
font-family: var(--font-family-heading);
|
||||
font-size: var(--font-size-xl);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
line-height: var(--line-height-tight);
|
||||
color: var(--color-text);
|
||||
margin: 0 0 var(--space-md) 0;
|
||||
}
|
||||
|
||||
.legal-subsection {
|
||||
margin-top: var(--space-lg);
|
||||
}
|
||||
|
||||
.legal-subsection h3 {
|
||||
font-family: var(--font-family-heading);
|
||||
font-size: var(--font-size-large);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
line-height: var(--line-height-tight);
|
||||
color: var(--color-text);
|
||||
margin: 0 0 var(--space-sm) 0;
|
||||
}
|
||||
|
||||
.legal-section ul,
|
||||
.legal-subsection ul {
|
||||
margin: 0 0 var(--space-md) 0;
|
||||
padding-left: var(--space-lg);
|
||||
}
|
||||
|
||||
.legal-section li,
|
||||
.legal-subsection li {
|
||||
margin-bottom: var(--space-xs);
|
||||
}
|
||||
|
||||
.legal-cross-links {
|
||||
margin-top: var(--space-xxl);
|
||||
padding-top: var(--space-xl);
|
||||
border-top: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.legal-cross-links a {
|
||||
color: var(--color-primary);
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 0.2em;
|
||||
}
|
||||
|
||||
.legal-cross-links a:hover {
|
||||
color: var(--color-primary-hover);
|
||||
}
|
||||
</style>
|
||||
@@ -1,20 +0,0 @@
|
||||
import type { PageLoad } from './$types';
|
||||
import type { PageMeta } from '$lib/seo';
|
||||
import { baseJsonLdGraph } from '$lib/data/json-ld/baseJsonLdGraphs';
|
||||
import { privacyPolicyPageJsonLdGraph } from '$lib/data/json-ld/webpageJsonLdGraphs';
|
||||
|
||||
const BASE = 'https://mifi.ventures';
|
||||
const PATH = '/privacy-policy';
|
||||
const PAGE_URL = `${BASE}${PATH}`;
|
||||
|
||||
const privacyPageMeta: PageMeta = {
|
||||
title: 'Privacy Policy | mifi Ventures',
|
||||
description:
|
||||
'Privacy Policy for mifi Ventures LLC. Describes information we collect, how we use it, messaging policy (SMS), data security, and your rights. Last updated March 5, 2026.',
|
||||
canonical: PAGE_URL,
|
||||
jsonLd: [...baseJsonLdGraph, privacyPolicyPageJsonLdGraph],
|
||||
};
|
||||
|
||||
export const load: PageLoad = () => {
|
||||
return { meta: privacyPageMeta };
|
||||
};
|
||||
@@ -1,44 +0,0 @@
|
||||
<script lang="ts">
|
||||
import Navigation from '$lib/components/Navigation.svelte';
|
||||
import Hero from '$lib/components/Hero.svelte';
|
||||
import ScheduleSection from '$lib/components/ScheduleSection.svelte';
|
||||
import ServicesCardGrid from '$lib/components/ServicesCardGrid.svelte';
|
||||
import EngagementsDl from '$lib/components/EngagementsDl.svelte';
|
||||
import { pageContent } from '$lib/data/services/landing/content';
|
||||
</script>
|
||||
|
||||
<Navigation items={pageContent.navItems} page="services" />
|
||||
|
||||
<Hero {...pageContent.hero} />
|
||||
|
||||
<main id="main">
|
||||
<section class="section services-intro" aria-labelledby="intro-heading">
|
||||
<div class="container narrow">
|
||||
<h2 id="intro-heading" class="sr-only">How we work together</h2>
|
||||
{#each pageContent.introParagraphs as p}
|
||||
<p>{p}</p>
|
||||
{/each}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<ServicesCardGrid services={pageContent.services} />
|
||||
|
||||
<EngagementsDl
|
||||
items={pageContent.engagements}
|
||||
intro={pageContent.engagementsIntro}
|
||||
outro={pageContent.engagementsOutro}
|
||||
/>
|
||||
|
||||
<section class="section services-ideal" aria-labelledby="ideal-heading">
|
||||
<div class="container narrow">
|
||||
<h2 id="ideal-heading">Ideal clients</h2>
|
||||
<ul class="content-list">
|
||||
{#each pageContent.idealClients as item}
|
||||
<li>{item}</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<ScheduleSection {...pageContent.scheduleCta} />
|
||||
</main>
|
||||
@@ -1,21 +0,0 @@
|
||||
import type { PageLoad } from './$types';
|
||||
import type { PageMeta } from '$lib/seo';
|
||||
import { baseJsonLdGraph } from '$lib/data/json-ld/baseJsonLdGraphs';
|
||||
import { pageContent } from '$lib/data/services/landing/content';
|
||||
import { servicesPageJsonLdGraph } from '$lib/data/json-ld/webpageJsonLdGraphs';
|
||||
import { catalogJsonLdGraph } from '$lib/data/json-ld/baseJsonLdGraphs';
|
||||
|
||||
const BASE = 'https://mifi.ventures';
|
||||
const PATH = '/services';
|
||||
const PAGE_URL = `${BASE}${PATH}`;
|
||||
|
||||
export const load: PageLoad = () => {
|
||||
const { meta } = pageContent;
|
||||
const servicePageMeta: PageMeta = {
|
||||
title: meta.title,
|
||||
description: meta.description,
|
||||
canonical: PAGE_URL,
|
||||
jsonLd: [...baseJsonLdGraph, ...catalogJsonLdGraph, servicesPageJsonLdGraph],
|
||||
};
|
||||
return { meta: servicePageMeta };
|
||||
};
|
||||
@@ -1,37 +0,0 @@
|
||||
<script lang="ts">
|
||||
import Navigation from '$lib/components/Navigation.svelte';
|
||||
import Hero from '$lib/components/Hero.svelte';
|
||||
import TOC from '$lib/components/TOC.svelte';
|
||||
import ServiceSection from '$lib/components/ServiceSection.svelte';
|
||||
import WhoGrid from '$lib/components/WhoGrid.svelte';
|
||||
import FAQ from '$lib/components/FAQ.svelte';
|
||||
import ScheduleSection from '$lib/components/ScheduleSection.svelte';
|
||||
import { pageContent } from '$lib/data/services/fractional-cto-for-early-stage-saas/content';
|
||||
import { faqItems } from '$lib/data/services/fractional-cto-for-early-stage-saas/faq';
|
||||
import Breadcrumbs from '$lib/components/Breadcrumbs.svelte';
|
||||
</script>
|
||||
|
||||
<Navigation items={pageContent.navItems} page="fractional-cto-for-early-stage-saas" />
|
||||
|
||||
<Breadcrumbs
|
||||
items={[
|
||||
{ label: 'Services', href: '/services' },
|
||||
{ label: 'Fractional CTO for Early-Stage SaaS' },
|
||||
]}
|
||||
/>
|
||||
|
||||
<Hero {...pageContent.hero} />
|
||||
|
||||
<main id="main">
|
||||
<TOC items={pageContent.tocItems} />
|
||||
|
||||
{#each pageContent.sections as section (section.id)}
|
||||
<ServiceSection {section} />
|
||||
{/each}
|
||||
|
||||
<WhoGrid {...pageContent.who} />
|
||||
|
||||
<FAQ faqList={faqItems} />
|
||||
|
||||
<ScheduleSection {...pageContent.scheduleCta} />
|
||||
</main>
|
||||
@@ -1,25 +0,0 @@
|
||||
import type { PageLoad } from './$types';
|
||||
import type { PageMeta } from '$lib/seo';
|
||||
import { baseJsonLdGraph } from '$lib/data/json-ld/baseJsonLdGraphs';
|
||||
import { pageContent } from '$lib/data/services/fractional-cto-for-early-stage-saas/content';
|
||||
import { fractionalCtoForEarlyStageSaaSServiceJsonLdGraph } from '$lib/data/json-ld/servicesJsonLdGraphs';
|
||||
import { fractionalCtoForEarlyStageSaaSPageJsonLdGraph } from '$lib/data/json-ld/webpageJsonLdGraphs';
|
||||
|
||||
const BASE = 'https://mifi.ventures';
|
||||
const PATH = '/services/fractional-cto-for-early-stage-saas';
|
||||
const PAGE_URL = `${BASE}${PATH}`;
|
||||
|
||||
export const load: PageLoad = () => {
|
||||
const { meta } = pageContent;
|
||||
const servicePageMeta: PageMeta = {
|
||||
title: meta.title,
|
||||
description: meta.description,
|
||||
canonical: PAGE_URL,
|
||||
jsonLd: [
|
||||
...baseJsonLdGraph,
|
||||
fractionalCtoForEarlyStageSaaSPageJsonLdGraph,
|
||||
fractionalCtoForEarlyStageSaaSServiceJsonLdGraph,
|
||||
],
|
||||
};
|
||||
return { meta: servicePageMeta };
|
||||
};
|
||||
@@ -1,37 +0,0 @@
|
||||
<script lang="ts">
|
||||
import Navigation from '$lib/components/Navigation.svelte';
|
||||
import Hero from '$lib/components/Hero.svelte';
|
||||
import TOC from '$lib/components/TOC.svelte';
|
||||
import ServiceSection from '$lib/components/ServiceSection.svelte';
|
||||
import WhoGrid from '$lib/components/WhoGrid.svelte';
|
||||
import FAQ from '$lib/components/FAQ.svelte';
|
||||
import ScheduleSection from '$lib/components/ScheduleSection.svelte';
|
||||
import { pageContent } from '$lib/data/services/hands-on-saas-architecture-consultant/content';
|
||||
import { faqItems } from '$lib/data/services/hands-on-saas-architecture-consultant/faq';
|
||||
import Breadcrumbs from '$lib/components/Breadcrumbs.svelte';
|
||||
</script>
|
||||
|
||||
<Navigation items={pageContent.navItems} page="hands-on-saas-architecture-consultant" />
|
||||
|
||||
<Breadcrumbs
|
||||
items={[
|
||||
{ label: 'Services', href: '/services' },
|
||||
{ label: 'Hands-On SaaS Architecture Consultant' },
|
||||
]}
|
||||
/>
|
||||
|
||||
<Hero {...pageContent.hero} />
|
||||
|
||||
<main id="main">
|
||||
<TOC items={pageContent.tocItems} />
|
||||
|
||||
{#each pageContent.sections as section (section.id)}
|
||||
<ServiceSection {section} />
|
||||
{/each}
|
||||
|
||||
<WhoGrid {...pageContent.who} />
|
||||
|
||||
<FAQ faqList={faqItems} />
|
||||
|
||||
<ScheduleSection {...pageContent.scheduleCta} />
|
||||
</main>
|
||||
@@ -1,25 +0,0 @@
|
||||
import type { PageLoad } from './$types';
|
||||
import type { PageMeta } from '$lib/seo';
|
||||
import { pageContent } from '$lib/data/services/hands-on-saas-architecture-consultant/content';
|
||||
import { handsOnSaaSArchitectureConsultantPageJsonLdGraph } from '$lib/data/json-ld/webpageJsonLdGraphs';
|
||||
import { handsOnSaaSArchitectureConsultantServiceJsonLdGraph } from '$lib/data/json-ld/servicesJsonLdGraphs';
|
||||
import { baseJsonLdGraph } from '$lib/data/json-ld/baseJsonLdGraphs';
|
||||
|
||||
const BASE = 'https://mifi.ventures';
|
||||
const PATH = '/services/hands-on-saas-architecture-consultant';
|
||||
const PAGE_URL = `${BASE}${PATH}`;
|
||||
|
||||
export const load: PageLoad = () => {
|
||||
const { meta } = pageContent;
|
||||
const servicePageMeta: PageMeta = {
|
||||
title: meta.title,
|
||||
description: meta.description,
|
||||
canonical: PAGE_URL,
|
||||
jsonLd: [
|
||||
...baseJsonLdGraph,
|
||||
handsOnSaaSArchitectureConsultantPageJsonLdGraph,
|
||||
handsOnSaaSArchitectureConsultantServiceJsonLdGraph,
|
||||
],
|
||||
};
|
||||
return { meta: servicePageMeta };
|
||||
};
|
||||
@@ -1,37 +0,0 @@
|
||||
<script lang="ts">
|
||||
import Navigation from '$lib/components/Navigation.svelte';
|
||||
import Hero from '$lib/components/Hero.svelte';
|
||||
import TOC from '$lib/components/TOC.svelte';
|
||||
import ServiceSection from '$lib/components/ServiceSection.svelte';
|
||||
import WhoGrid from '$lib/components/WhoGrid.svelte';
|
||||
import FAQ from '$lib/components/FAQ.svelte';
|
||||
import ScheduleSection from '$lib/components/ScheduleSection.svelte';
|
||||
import { pageContent } from '$lib/data/services/mvp-architecture-and-launch/content';
|
||||
import { faqItems } from '$lib/data/services/mvp-architecture-and-launch/faq';
|
||||
import Breadcrumbs from '$lib/components/Breadcrumbs.svelte';
|
||||
</script>
|
||||
|
||||
<Navigation items={pageContent.navItems} page="mvp-architecture-and-launch" />
|
||||
|
||||
<Breadcrumbs
|
||||
items={[
|
||||
{ label: 'Services', href: '/services' },
|
||||
{ label: 'MVP Architecture & Launch' },
|
||||
]}
|
||||
/>
|
||||
|
||||
<Hero {...pageContent.hero} />
|
||||
|
||||
<main id="main">
|
||||
<TOC items={pageContent.tocItems} />
|
||||
|
||||
{#each pageContent.sections as section (section.id)}
|
||||
<ServiceSection {section} />
|
||||
{/each}
|
||||
|
||||
<WhoGrid {...pageContent.who} />
|
||||
|
||||
<FAQ faqList={faqItems} />
|
||||
|
||||
<ScheduleSection {...pageContent.scheduleCta} />
|
||||
</main>
|
||||
@@ -1,25 +0,0 @@
|
||||
import type { PageLoad } from './$types';
|
||||
import type { PageMeta } from '$lib/seo';
|
||||
import { baseJsonLdGraph } from '$lib/data/json-ld/baseJsonLdGraphs';
|
||||
import { pageContent } from '$lib/data/services/mvp-architecture-and-launch/content';
|
||||
import { mvpArchitectureAndLaunchServiceJsonLdGraph } from '$lib/data/json-ld/servicesJsonLdGraphs';
|
||||
import { mvpArchitectureAndLaunchPageJsonLdGraph } from '$lib/data/json-ld/webpageJsonLdGraphs';
|
||||
|
||||
const BASE = 'https://mifi.ventures';
|
||||
const PATH = '/services/mvp-architecture-and-launch';
|
||||
const PAGE_URL = `${BASE}${PATH}`;
|
||||
|
||||
export const load: PageLoad = () => {
|
||||
const { meta } = pageContent;
|
||||
const servicePageMeta: PageMeta = {
|
||||
title: meta.title,
|
||||
description: meta.description,
|
||||
canonical: PAGE_URL,
|
||||
jsonLd: [
|
||||
...baseJsonLdGraph,
|
||||
mvpArchitectureAndLaunchPageJsonLdGraph,
|
||||
mvpArchitectureAndLaunchServiceJsonLdGraph,
|
||||
],
|
||||
};
|
||||
return { meta: servicePageMeta };
|
||||
};
|
||||
@@ -1,37 +0,0 @@
|
||||
<script lang="ts">
|
||||
import Navigation from '$lib/components/Navigation.svelte';
|
||||
import Hero from '$lib/components/Hero.svelte';
|
||||
import TOC from '$lib/components/TOC.svelte';
|
||||
import ServiceSection from '$lib/components/ServiceSection.svelte';
|
||||
import WhoGrid from '$lib/components/WhoGrid.svelte';
|
||||
import FAQ from '$lib/components/FAQ.svelte';
|
||||
import ScheduleSection from '$lib/components/ScheduleSection.svelte';
|
||||
import { pageContent } from '$lib/data/services/stage-aligned-infrastructure/content';
|
||||
import { faqItems } from '$lib/data/services/stage-aligned-infrastructure/faq';
|
||||
import Breadcrumbs from '$lib/components/Breadcrumbs.svelte';
|
||||
</script>
|
||||
|
||||
<Navigation items={pageContent.navItems} page="stage-aligned-infrastructure" />
|
||||
|
||||
<Breadcrumbs
|
||||
items={[
|
||||
{ label: 'Services', href: '/services' },
|
||||
{ label: 'Stage-Aligned Infrastructure' },
|
||||
]}
|
||||
/>
|
||||
|
||||
<Hero {...pageContent.hero} />
|
||||
|
||||
<main id="main">
|
||||
<TOC items={pageContent.tocItems} />
|
||||
|
||||
{#each pageContent.sections as section (section.id)}
|
||||
<ServiceSection {section} />
|
||||
{/each}
|
||||
|
||||
<WhoGrid {...pageContent.who} />
|
||||
|
||||
<FAQ faqList={faqItems} />
|
||||
|
||||
<ScheduleSection {...pageContent.scheduleCta} />
|
||||
</main>
|
||||
@@ -1,25 +0,0 @@
|
||||
import type { PageLoad } from './$types';
|
||||
import type { PageMeta } from '$lib/seo';
|
||||
import { baseJsonLdGraph } from '$lib/data/json-ld/baseJsonLdGraphs';
|
||||
import { pageContent } from '$lib/data/services/stage-aligned-infrastructure/content';
|
||||
import { stageAlignedInfrastructureServiceJsonLdGraph } from '$lib/data/json-ld/servicesJsonLdGraphs';
|
||||
import { stageAlignedInfrastructurePageJsonLdGraph } from '$lib/data/json-ld/webpageJsonLdGraphs';
|
||||
|
||||
const BASE = 'https://mifi.ventures';
|
||||
const PATH = '/services/stage-aligned-infrastructure';
|
||||
const PAGE_URL = `${BASE}${PATH}`;
|
||||
|
||||
export const load: PageLoad = () => {
|
||||
const { meta } = pageContent;
|
||||
const servicePageMeta: PageMeta = {
|
||||
title: meta.title,
|
||||
description: meta.description,
|
||||
canonical: PAGE_URL,
|
||||
jsonLd: [
|
||||
...baseJsonLdGraph,
|
||||
stageAlignedInfrastructurePageJsonLdGraph,
|
||||
stageAlignedInfrastructureServiceJsonLdGraph,
|
||||
],
|
||||
};
|
||||
return { meta: servicePageMeta };
|
||||
};
|
||||
@@ -1,141 +0,0 @@
|
||||
<script lang="ts">
|
||||
import Navigation from '$lib/components/Navigation.svelte';
|
||||
import { termsOfService } from '$lib/data/terms-of-service';
|
||||
|
||||
const navItems = [{ label: 'Home', href: '/', umamiEventLabel: 'home' }];
|
||||
</script>
|
||||
|
||||
<Navigation items={navItems} page="terms-of-service" />
|
||||
|
||||
<main id="main" class="legal-page">
|
||||
<div class="container narrow">
|
||||
<header id="header" class="legal-header">
|
||||
<h1>{termsOfService.title}</h1>
|
||||
<p class="legal-last-updated">Last updated: {termsOfService.lastUpdated}</p>
|
||||
</header>
|
||||
|
||||
<div class="legal-content">
|
||||
{#each termsOfService.intro as para}
|
||||
<p>{para}</p>
|
||||
{/each}
|
||||
|
||||
{#each termsOfService.sections as section (section.id)}
|
||||
<section
|
||||
id={section.id}
|
||||
class="legal-section"
|
||||
aria-labelledby={`${section.id}-heading`}
|
||||
>
|
||||
<h2 id={`${section.id}-heading`}>{section.heading}</h2>
|
||||
{#each section.body as para}
|
||||
<p>
|
||||
{#if section.id === 'contact' && para === 'mifi Ventures LLC'}
|
||||
<strong>{para}</strong>
|
||||
{:else if section.id === 'contact' && para === 'legal@mifi.ventures'}
|
||||
<a href="mailto:legal@mifi.ventures"
|
||||
>legal@mifi.ventures</a
|
||||
>
|
||||
{:else if section.id === 'contact' && para === 'https://mifi.ventures'}
|
||||
<a href="https://mifi.ventures" rel="noopener noreferrer"
|
||||
>https://mifi.ventures</a
|
||||
>
|
||||
{:else}
|
||||
{para}
|
||||
{/if}
|
||||
</p>
|
||||
{/each}
|
||||
{#if section.list}
|
||||
<ul>
|
||||
{#each section.list as item}
|
||||
<li>{item}</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
</section>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<nav class="legal-cross-links" aria-label="Related legal pages">
|
||||
<a href="/privacy-policy">Privacy Policy</a>
|
||||
</nav>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<style>
|
||||
.legal-page {
|
||||
padding: var(--space-xxl) 0;
|
||||
background-color: var(--color-bg);
|
||||
}
|
||||
|
||||
.narrow {
|
||||
max-width: var(--max-narrow-width);
|
||||
margin: 0 auto;
|
||||
padding: 0 var(--space-md);
|
||||
}
|
||||
|
||||
.legal-header {
|
||||
margin-bottom: var(--space-xl);
|
||||
}
|
||||
|
||||
.legal-header h1 {
|
||||
font-family: var(--font-family-heading);
|
||||
font-size: var(--font-size-xxl);
|
||||
font-weight: var(--font-weight-bold);
|
||||
line-height: var(--line-height-heading);
|
||||
color: var(--color-text);
|
||||
margin: 0 0 var(--space-sm) 0;
|
||||
}
|
||||
|
||||
.legal-last-updated {
|
||||
font-size: var(--font-size-medium);
|
||||
color: var(--color-text-tertiary);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.legal-content {
|
||||
font-size: var(--font-size-base);
|
||||
line-height: var(--line-height-base);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.legal-content p {
|
||||
margin: 0 0 var(--space-md) 0;
|
||||
}
|
||||
|
||||
.legal-section {
|
||||
margin-bottom: var(--space-xl);
|
||||
}
|
||||
|
||||
.legal-section h2 {
|
||||
font-family: var(--font-family-heading);
|
||||
font-size: var(--font-size-xl);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
line-height: var(--line-height-tight);
|
||||
color: var(--color-text);
|
||||
margin: 0 0 var(--space-md) 0;
|
||||
}
|
||||
|
||||
.legal-section ul {
|
||||
margin: 0 0 var(--space-md) 0;
|
||||
padding-left: var(--space-lg);
|
||||
}
|
||||
|
||||
.legal-section li {
|
||||
margin-bottom: var(--space-xs);
|
||||
}
|
||||
|
||||
.legal-cross-links {
|
||||
margin-top: var(--space-xxl);
|
||||
padding-top: var(--space-xl);
|
||||
border-top: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.legal-cross-links a {
|
||||
color: var(--color-primary);
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 0.2em;
|
||||
}
|
||||
|
||||
.legal-cross-links a:hover {
|
||||
color: var(--color-primary-hover);
|
||||
}
|
||||
</style>
|
||||
@@ -1,20 +0,0 @@
|
||||
import type { PageLoad } from './$types';
|
||||
import type { PageMeta } from '$lib/seo';
|
||||
import { termsOfServicePageJsonLdGraph } from '$lib/data/json-ld/webpageJsonLdGraphs';
|
||||
import { baseJsonLdGraph } from '$lib/data/json-ld/baseJsonLdGraphs';
|
||||
|
||||
const BASE = 'https://mifi.ventures';
|
||||
const PATH = '/terms-of-service';
|
||||
const PAGE_URL = `${BASE}${PATH}`;
|
||||
|
||||
const termsPageMeta: PageMeta = {
|
||||
title: 'Terms of Service | mifi Ventures',
|
||||
description:
|
||||
'Terms of Service for mifi Ventures LLC. Covers use of the website, services, client communications including SMS, acceptable use, and contact information.',
|
||||
canonical: PAGE_URL,
|
||||
jsonLd: [...baseJsonLdGraph, termsOfServicePageJsonLdGraph],
|
||||
};
|
||||
|
||||
export const load: PageLoad = () => {
|
||||
return { meta: termsPageMeta };
|
||||
};
|
||||
@@ -1,5 +0,0 @@
|
||||
{
|
||||
"name": "mifi Ventures",
|
||||
"description": "mifi Ventures is a consulting firm that helps early-stage SaaS companies build and scale their businesses.",
|
||||
"url": "https://mifi.ventures"
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user