As a software engineer, building a portfolio website can be challenging for someone with limited web development experience. However, the right software architecture can make this process easier. Here is a non-technical overview of the steps involved in creating a strong software architecture for a portfolio website.

Here is a high level overview of my current projects: design-document

Step 1: Define the Problem

Before designing, it is essential to have a clear understanding of the problem the software is intended to solve. In this case, the problem is creating a portfolio website that effectively represents a software engineer’s skills and expertise. I prefer using digital whiteboards and sticky notes to really drill down on the problems that need to solved.

  • Understand the problem the software is intended to solve
  • Gather and analyze requirements
  • Identify potential challenges

Step 2: Create a Conceptual Model

The next step is to create a high-level conceptual model of the website’s key components, such as a landing page, an “About Me” section, a portfolio section showcasing past projects, a section highlighting technical skills and expertise, and a contact section. It is also important to consider non-functional requirements like performance, scalability, security, and reliability.

  • Outline the high-level functionality of the system
    • Users will visit my portfolio website
    • Website can be static
  • Identify major subsystems and how they interact
    • Reverse proxy
    • Load balancer
    • Docker containers
    • Database layer(Redis, SQLite, Postgres)
  • Consider non-functional requirements (e.g. performance, scalability, security, reliability)
    • Performant, fast, low latency
    • Fast track getting my thoughts onto a website
    • Relatively low traffic

Step 3: Choose the Right Architecture Style

There are several architecture styles to choose from, including monolithic, microservices, client-server, event-driven, and layered. The chosen style should best fit the needs of the system. In this case, a combination of microservices and layered services were chosen to address the original problem statement.

Identify the correct design pattern based software requirements:

  • Monolithic
  • Microservices
  • Client-Server
  • Event-Driven
  • Layered

Based on my requirements, the microservices and client-server styles would satisfy my project requirements.

Step 4: Define the Components and Interfaces

The next step is to define the components and interfaces of the software system, which involves breaking down the system into smaller, more manageable parts, each responsible for a specific set of functionality. Some of the components include the client, DNS resolver, GitHub Pages, load balancer/reverse proxy, web applications, data persistence, data caching, and external APIs.

  • Break the system into smaller, manageable parts
  • Define components and interfaces, with each responsible for a specific set of functionality
  • Components include client, domain/DNS resolver, GitHub Pages, load balancer/reverse proxy, web applications, data persistence, data caching, and external APIs

The tools that I have selected were based on my current experience and understanding of web technologies. I am hoping with more experience, that I can improve my original design.

Step 5: Evaluate the Architecture

Once the architecture has been defined, it is important to evaluate it to ensure that it meets the requirements of the system. This involves testing the architecture using various scenarios and use cases, identifying potential risks and issues, and making any necessary changes.

  • Test the architecture using various scenarios and use cases
  • Identify potential risks and issues
  • Make necessary changes
  • Consider ongoing maintenance and scaling requirements

Here are the results of my hard work, a near perfect PageSpeed Insights score.

Overall, a strong software architecture is crucial to the success of any software project, including building a portfolio website for a software engineer.