Angelica's Software Development Portfolio

Personal software development portfolio built with Vue 3, TypeScript, Vue Router, Vite, Bun, Vitest, Biome, and GitHub Pages.

Live site: yumeangelica.github.io

Status: Active public portfolio

Overview

This repository contains my public portfolio site, selected project cards, and career-facing copy for early-career software developer roles. The site presents Vue/frontend, full-stack, Python automation, and supporting learning projects in a recruiter-friendly format, with the portfolio site itself as the lead public proof.

The portfolio is intentionally public-safe. It should not contain employer-internal code, private project data, secrets, API keys, customer details, proprietary system names, or unpublished workplace information.

Technologies & Tools

Frontend

• Vue 3
• Vue Router
• TypeScript
• Modern CSS
• Vite
• Lightning CSS for CSS transforms and minification
• Self-hosted Comfortaa web font (no third-party font requests)
• Self-hosted technology icons (devicon SVGs pinned and served from public/assets/logos/, no CDN requests)

Content

• Project data in public/data.json
• UI text and SEO copy in public/messages_en.json
• Static assets under public/assets

Testing and quality

• Vitest
• Vue Test Utils
• Biome linting, formatting, and import-order checks
• Dual TypeScript checking: the TypeScript 7 native CLI checks application modules, Vite config, and Bun scripts, while TypeScript 6-backed vue-tsc checks Vue SFCs, templates, and tests
• Content validation tests
• SEO tests
• Production build checks

Delivery

• Bun package manager
• GitHub Actions CI for pull requests (Biome check, typecheck, test, build)
• GitHub Actions deployment to GitHub Pages on merge to main

Getting started

Install dependencies:

bun install --frozen-lockfile

Start local development:

bun run dev

Run checks:

bun run lint
bun run typecheck
bun run test
bun run build

bun run lint performs a read-only Biome check covering lint rules, formatting, and import order. Run bun run format to apply Biome's safe fixes.

bun run typecheck combines the latest TypeScript 7 CLI with the official TypeScript 6 compatibility boundary required by vue-tsc. TypeScript 7 checks ordinary .ts projects; vue-tsc retains TypeScript 6 only for Vue SFC and template-aware checking until Volar supports the TypeScript 7 API.

Preview the production build:

bun run preview

Accessibility

Current accessibility considerations include:

• Skip link to main content
• Semantic page sections and headings
• Keyboard-focus styles for interactive elements
• Reduced-motion support via prefers-reduced-motion
• Alt text for meaningful images, with decorative imagery hidden from assistive tech
• "Opens in new tab" cues on external links
• Mobile-first layout with 44px touch targets, safe-area handling, and reduced-motion support
• Component tests and content checks for selected UI behavior

Theme colors were reviewed against WCAG 2.2 AA contrast targets; see docs/audit-followups.md for items still pending live verification.

Open accessibility and performance work is tracked only in docs/audit-followups.md to avoid duplicated lists drifting apart.

Security, privacy, and public-safety notes

• This repository is public and must not contain secrets, tokens, API keys, cookies, private data, or employer-internal details.
• Employer references should stay public-safe and use OP Pohjola where the current employer is mentioned.
• Project cards should not publish target-specific scraping details, bypass wording, fake-traffic wording, or private operational details.
• Automation projects should be described as allowed public-source monitoring, data extraction, parsing, persistence, and notifications with responsible-use boundaries.
• Dependency updates should be reviewed through lockfile changes, local checks, and pull request review.
• The Comfortaa web font is self-hosted from public/fonts/, so no visitor IP or request is sent to a third-party font CDN.
• The technology icons are self-hosted from public/assets/logos/ (devicon SVGs pinned to a fixed version), so no visitor IP or request is sent to a third-party icon CDN.

AI-assisted development note

AI-assisted tools may be used for planning, debugging, documentation, and review support. I review, test, and validate changes before keeping them.

Content update workflow

Most public copy lives in:

• public/messages_en.json for content, navigation, SEO, and labels, grouped by topic (intro, journey, certifications, contact, projects, ...)
• public/data.json for project cards and technology metadata
• README.md for repository-level explanation
• index.html and src/seo.ts for fallback SEO metadata

After editing copy, run:

bun run lint
bun run typecheck
bun run test
bun run build

Adding a new language

The site uses a small custom i18n layer (src/i18n.ts) that fetches public/messages_<locale>.json at startup. To add a locale:

1. Copy public/messages_en.json to public/messages_<locale>.json (for example messages_fi.json) and translate the values only — keep the key structure and every {placeholder} name identical, so the same code resolves each key.
2. Point the app at the new locale by passing it to loadMessages('<locale>') in src/main.ts. The default is DEFAULT_LOCALE (en) from src/i18n.ts; if a non-default locale fails to load, the app falls back to English automatically.
3. Run the checks above. The content-quality tests verify that every translation key used in the components exists, which helps catch keys forgotten during translation.

Release flow

Run release push scripts from a feature or release branch after committing your content or code changes. The branch must not be main, and the working tree must be clean.

bun run patch-push

patch-push, minor-push, and major-push all use scripts/release-push.ts with the matching semantic-version bump. The script:

• updates package.json version
• runs bun run lint, bun run typecheck, bun run test, and bun run build
• restores the original version and stops if a local quality gate fails
• commits the version bump using the release script's managed message
• pushes the current branch to origin
• writes a ready-to-copy PR body to .pr-description.md
• prints the GitHub compare URL for opening a pull request

.pr-description.md is disposable generated output, not project documentation; regenerate it for the current branch instead of editing or preserving an old copy.

After the pull request is merged into main, .github/workflows/deploy.yml installs dependencies with Bun, type-checks and builds the site, and runs scripts/deploy-gh-pages.ts. The deploy helper publishes the built dist output to the gh-pages branch and creates a v<version> tag when that tag does not already exist.

License

MIT