AviosIT Personal Website

AviosIT is a personal technical portfolio and knowledge platform that I designed and developed as a real-world software project. It brings together professional work, technical projects, technical tutorials, and IELTS Writing resources in one structured website.

The project demonstrates how I approach the design and development of a production website, from content structure and reusable components to performance, SEO, accessibility, deployment, and long-term maintainability. The platform serves three main purposes:

• Projects — show what I built through real-world projects and their technical implementation. Projects prioritise production-ready Python code, maintainability, and reproducibility.
• Demos — explore and try my work through live websites, interactive tools, working applications, and SaaS products. Demos prioritise hands-on exploration, usability, practical functionality, and user experience.
• Tutorials — show what I understand through practical explanations of technical concepts, techniques, and engineering practices. Tutorials prioritise learning and experimentation through notebooks, examples, and practical explanations.
• IELTS Writing — show how I communicate through structured writing resources, sample answers, and writing analysis.

The website is designed as a reusable, content-driven platform that can grow over time without requiring separate page structures for each piece of content. It uses a static-first architecture to prioritise performance, maintainability, SEO, accessibility, and low operational complexity.

A résumé can summarise professional experience and technical skills, but it provides limited space to explain how individual projects were designed, implemented, deployed, and evaluated. As a result, important engineering context such as architectural decisions, implementation approaches, trade-offs, and lessons learned may not be visible to someone reviewing the résumé alone.

GitHub repositories provide valuable source-code evidence, but source code does not always explain the original problem, the reasoning behind technical decisions, or how the resulting system was evaluated. This creates a gap between a concise professional summary and the deeper technical evidence needed to understand the work.

The challenge was therefore to create a platform that connects these two levels of information, allowing recruiters to understand the work quickly while giving technical reviewers access to deeper engineering evidence when required.

The website was designed to achieve four main objectives:

• Communicate professional work clearly — present projects and capabilities with enough context for readers to understand the work without inspecting the source code.
• Provide technical evidence — document architectural decisions, implementation approaches, technical details, limitations, and lessons learned.
• Support long-term content growth — provide reusable structures that allow projects, tutorials, and other content to be added consistently.
• Keep the platform operationally simple — use a static-first architecture where dynamic server-side infrastructure is not required.

AviosIT addresses the information gap by combining professional context with detailed technical documentation in a single platform. Instead of relying on a résumé or source code alone, each project can explain its problem, objectives, solution, architecture, implementation, deployment, and lessons learned.

The platform uses separate content areas for different types of evidence. Projects document applied work, Tutorials explain technical knowledge and engineering practices, and IELTS Writing demonstrates structured written communication. These areas can also be connected when a tutorial explains a technique used in a project.

The underlying structure is designed to support this content consistently through reusable layouts and components. A static-first delivery model keeps the platform simple to operate while allowing new content to be added without creating a separate page architecture for each item.

1. Project Documentation

• Structured project case studies
• Problem, objectives, solution, and implementation documentation
• Architecture and technology documentation
• Project demonstrations and external resources

2. Technical Tutorials

• Structured technical documentation
• Reusable tutorial layout
• Code examples and technical explanations
• "Where You Are" navigation for page and content context
• "On This Page" navigation for page sections
• Connections between tutorials and relevant projects

3. IELTS Writing Resources

• Writing Task 1 and Task 2 resources
• Sample answers
• Vocabulary and grammar notes
• Writing analysis and strategies

4. User Experience

• Responsive desktop, tablet, and mobile layouts
• Light and dark themes
• Responsive tables
• Consistent navigation
• Minimal client-side JavaScript

The website uses a layered architecture that separates content and page data from presentation, reusable components, and supporting utilities. Page-specific content is organised independently from shared layouts and components, allowing Projects, Tutorials, and IELTS pages to follow consistent structures while remaining independently maintainable.

The deployment architecture extends this separation into the delivery workflow. Changes are developed and validated locally, committed to Git and pushed to GitHub, then built and deployed to Cloudflare Workers as a statically generated website. This keeps the production architecture simple while supporting a reusable development and deployment process.

1. Core Web Technologies

• Astro — static site generation and component-based architecture
• TypeScript — type-safe application and content configuration
• HTML — semantic and accessible page structure
• CSS — responsive layouts, themes, and component styling

2. Development Tooling

• Node.js — JavaScript runtime for the development environment
• npm — dependency and script management
• Prettier — consistent code formatting
• Astro Check — TypeScript and Astro diagnostics

3. Version Control & Deployment

• Git — version control and development workflow
• GitHub — source-code repository and collaboration platform
• Cloudflare Workers — production hosting and delivery
• Wrangler — Cloudflare development and deployment tooling

4. SEO & Discoverability

• Open Graph metadata
• Twitter metadata
• JSON-LD structured data
• Canonical URLs
• Sitemap

The implementation focused on building reusable foundations rather than creating page-specific solutions. Shared layouts and components provide the common structure required across Projects, Tutorials, and IELTS content, while page data and content remain organised separately from presentation.

• Reusable layouts — shared page layouts provide consistent structures for collection pages and long-form content pages.
• Shared components — navigation, content cards, actions, headings, sidebars, and other interface elements are implemented as reusable components.
• Content-driven structure — page metadata, navigation data, and content-specific resources are organised separately from reusable presentation logic.
• Responsive interface — layouts and components adapt across desktop, tablet, and mobile screen sizes.
• Theme support — the interface supports light and dark themes through the shared styling system.
• Content navigation — long-form pages provide contextual navigation and section-level navigation to help users move through the content.
• SEO implementation — page-level metadata, canonical URLs, Open Graph, Twitter metadata, structured data, and sitemap generation are integrated into the site architecture.
• Minimal client-side JavaScript — interactive behaviour is limited to features that require client-side interaction, keeping the majority of the website statically rendered.

The website is deployed as a statically generated site through Cloudflare Workers. Development and production follow the same build process, allowing the generated output to be validated before deployment.

1. Local development — changes are developed and tested locally using the Astro development environment.
2. Validation — the project is checked with npm run check before the production build.
3. Build — Astro generates the production-ready static output in the dist directory.
4. Version control — validated changes are committed to Git and pushed to the GitHub repository.
5. Deployment — the generated website is deployed to Cloudflare Workers using Wrangler.
6. Production delivery — Cloudflare serves the website globally through its edge network.

This workflow keeps deployment lightweight and predictable while providing a clear path from local development to the production website.

Related Tutorial: Deploying Astro to Cloudflare Workers

This video provides a visual demonstration of the website, including its main pages, navigation, responsive interface, and key features.

Building AviosIT reinforced the importance of designing reusable foundations before expanding the amount of content. Shared layouts, components, and content structures make it possible to add new projects, tutorials, and IELTS resources without creating separate page architectures for each piece of content.

The project also showed that architecture should follow actual requirements rather than introducing complexity for its own sake. A static-first approach provides the capabilities needed by this website while keeping the system relatively simple to develop, maintain, and deploy.

Another important lesson was that technical implementation needs to be supported by clear technical communication. Documenting the problem, architectural decisions, implementation, deployment process, and lessons learned makes the work easier to understand and provides useful context beyond the source code itself.

1. Content

• Add more portfolio projects with detailed technical documentation
• Expand the Python and TypeScript tutorial collections
• Expand IELTS Writing resources with additional topics and analysis
• Strengthen connections between related projects, tutorials, and learning resources

2. User Experience

• Improve content discovery as the website grows
• Introduce search functionality for projects, tutorials, and learning resources
• Expand project demonstrations and supporting resources where appropriate
• Continue refining navigation for larger collections of content

3. Performance and SEO

• Continue monitoring Core Web Vitals using real-world performance data
• Refine structured data as new content types are introduced
• Continue improving internal linking as the content library expands

4. Engineering and Operations

• Introduce automated testing for critical website functionality
• Strengthen CI/CD validation and quality gates
• Add production monitoring and operational visibility