Ormasoft Portfolio Website

Overview

A complete rebuild of the Ormasoft portfolio website, transitioning from a legacy Aurelia SPA to a modern static site built with Astro. The project emphasizes performance, accessibility, and maintainability while providing an elegant showcase for our software development projects.

Project Goals

• Performance First: Achieve 90+ scores on all Lighthouse metrics
• Content-Driven: Use Markdown with type-safe schema validation for project content
• Modern Stack: Leverage latest web technologies (Astro 5, TypeScript 5.9, Bootstrap 5.3)
• Developer Experience: TypeScript strict mode, comprehensive testing, automated workflows
• Cloud Native: Deploy to Azure Static Web Apps with CI/CD via GitHub Actions

Technical Architecture

Frontend Framework

• Astro 5.14+ for static site generation with partial hydration
• TypeScript 5.9 in strict mode for type safety across the codebase
• Bootstrap 5.3 via CDN for responsive, accessible UI components
• Bootstrap Icons 1.11 for consistent iconography

Content Management

• Content Collections with Zod schema validation ensuring data integrity
• Markdown-based project files with rich frontmatter metadata
• Type-safe queries with automatic TypeScript generation

Testing Strategy

• Contract Tests with Vitest validating content schema constraints
• 37 test cases covering required fields, string lengths, enums, arrays, and URLs
• Test-Driven Development (TDD) approach with tests written before implementation

Build & Deployment

• Azure Static Web Apps for global CDN distribution
• GitHub Actions for automated builds and deployments
• Astro Check integrated into CI pipeline for TypeScript validation

Development Process

This project follows a structured implementation plan with 42 numbered tasks across multiple phases:

1. Foundation Setup: Backup legacy assets, initialize Astro project with strict TypeScript
2. Content Schema: Define Zod schemas and create comprehensive contract tests
3. Components: Build reusable layouts (BaseLayout, Header, Footer, ProjectCard, ProjectHero)
4. Sample Content: Create valid project Markdown files (this file is one of them!)
5. Page Templates: Implement homepage, projects listing, and dynamic project detail pages
6. Integration Tests: Validate content rendering and navigation flows
7. Performance: Optimize images, implement lazy loading, minimize bundle size
8. Deployment: Configure Azure SWA, set up CI/CD, production deployment

Technical Highlights

• Zero Runtime JavaScript for content pages (Astro’s island architecture)
• TypeScript Path Aliases (@contracts/*) for clean imports in tests
• Content Collection Schema ensures all projects have required fields with proper validation
• Responsive Design with mobile-first approach using Bootstrap utilities
• SEO Optimized with semantic HTML, meta tags, and static generation

Lessons Learned

• Astro’s content collections provide excellent DX with automatic TypeScript types
• TDD approach caught schema issues early, before any content was created
• Path aliases need to be configured in both tsconfig.json and test framework configs
• Bootstrap CDN approach keeps the bundle small while providing rich UI components

Current Status

The project is in active development with foundation, testing infrastructure, and components complete. Next steps include creating page templates, adding integration tests, and deploying to Azure Static Web Apps.