Created My Portfolio

I recently built a system to automate the process of updating my portfolio and resume. This approach eliminates the need for frequent manual updates, ensuring that my online presence always reflects my latest accomplishments and skills.

Portfolio

• Portfolio
• REST API
• GraphQL

Background

Initially, I set out to create a traditional portfolio website. However, during the planning stage, I realized that the core information for both a portfolio and a resume is essentially the same: showcasing my skills and experience. With this realization, I decided to explore a more integrated approach. This resulted in a system that automatically updates both my portfolio and resume whenever I update my resume content.

Structure

The diagram of this system's overview is the following:

My portfolio system leverages server-side rendering (SSR) within the Astro framework to ensure users always access the latest information. Here's how it works:

1. User Accesses Portfolio: When a user visits my portfolio website, the server hosting the portfolio initiates a call to my information API (details explained later).
2. API Data Extraction: The information API returns my most recent data.
3. Server-Side Rendering: Astro utilizes SSR to render the portfolio on the server, incorporating the fetched data from the API.
4. Fresh Content Delivered: The server then delivers the fully rendered HTML content, including the latest information, to the user's browser.

Modular System Design

My portfolio system is comprised of two well-defined modules, each housed in its own dedicated GitHub repository with integrated deployment via GitHub Actions to Cloudflare Pages or Cloudflare Workers.

Modules

Portfolio Frontend

This Astro-based module is solely responsible for the visual presentation of the portfolio. It retrieves and displays information from the information management module but doesn't store any user data itself.

Information Management Module

This comprehensive module manages all user information and related functionalities. It consists of four distinct components:

Information Storage

This component leverages TypeScript to define the structure and types for user data in JSON format. This file acts as a schema, ensuring data consistency and enabling type safety within the system. The user information itself is stored directly within this TypeScript file, utilizing the defined JSON structure.

Resume Generation

This component leverages Astro to dynamically generate a resume in HTML format based on the user's information. A subsequent automated process within GitHub Actions converts the HTML to PDF and ensures its deployment to both GitHub artifacts and Cloudflare.

REST API

This component, built with Hono and Swagger UI middleware, provides a RESTful interface for accessing and potentially manipulating user information.

GraphQL API

This component, built with GraphQL Yoga, offers a GraphQL interface for interacting with user data.

Summary

By providing my latest information as API, it allows users to create my portfolio as they like. So you can create a cool portfolio for me. I cannot wait to see my nice and cool portfolio site that will be created by YOU!😜