Vue 3 + TypeScript portfolio website for www.jeromefaria.com.
- Frontend: Vue 3 (Composition API), TypeScript (strict mode)
- Build: Vite with SSG (Static Site Generation)
- Styling: SCSS with BEM methodology
- Testing: Vitest (100% lines, 95%+ branches), Cypress E2E, axe-core accessibility
- CI/CD: GitHub Actions with quality gates
- Performance: Lighthouse CI with performance budgets
# Install dependencies
npm install
# Start dev server
npm run dev
# Build for production
npm run build
# Preview production build
npm run preview
# Type checking
npm run type-check
# Linting
npm run lint
npm run lint:fix# Run tests
npm test
# Run tests with UI
npm run test:ui
# Generate coverage report
npm run test:coverageCoverage Thresholds: Lines 95%, Statements 95%, Functions 90%, Branches 85%
# Run E2E tests (defaults to Electron, headless)
npm run test:e2e
# Run against Chrome
npm run test:e2e:chrome
# Run against Firefox
npm run test:e2e:firefox
# Open the Cypress runner
npm run test:e2e:openE2E Test Coverage:
- Navigation and routing
- Accordion functionality with hash navigation
- Form validation and submission
- Accessibility (WCAG 2.1 AA compliance)
- Keyboard navigation
- Mobile responsiveness
# Run Lighthouse CI
npm run lighthousePerformance Budgets:
- Performance Score: 90+
- Accessibility Score: 95+
- First Contentful Paint: <1.5s
- Largest Contentful Paint: <2.5s
- Cumulative Layout Shift: <0.1
Replicate GitHub Actions workflows on your local machine before pushing.
Run all checks in order (matches CI exactly):
# 1. Quality Checks
npm run type-check
npm run lint
npm run test:coverage
node scripts/check-coverage.js
# 2. Build
npm run build
# 3. Performance Audit
npm run lighthouse
# 4. E2E Tests (Cypress installs its own browser binary on first run)
npm run test:e2eFast validation before committing (~30 seconds):
npm run lint && npm run type-check && npm run testEnsure CI will pass before pushing:
npm run lint:fix && npm run type-check && npm run test:coverage && npm run buildEvery push to master and pull request triggers a comprehensive CI pipeline with the following jobs:
- TypeScript type checking
- ESLint code quality
- Unit tests with coverage thresholds
- Coverage reporting to Codecov
- Production bundle build
- Bundle size checks (JS <200KB, CSS <50KB per file)
- Build artifact generation
- Performance audits
- Accessibility audits
- SEO and best practices checks
- Performance budget enforcement
- Cross-browser testing (Chrome, Firefox, Edge)
- Accessibility testing with axe-core
- Specs:
accessibility,accordion,contact-form,lightbox,navigation
Quality Gates: All four CI jobs (Quality Checks, Build, Lighthouse, E2E) must pass for the CI workflow to be green. Deployment runs on its own workflow and gates on type-check, lint, unit tests with coverage, and the production build.
The site deploys to GitHub Pages via GitHub Actions on push to master once the deploy workflow's pre-deploy checks and build succeed.
Copyright (c) Jerome Faria
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.