Skip to main content

Overview

The projects section showcases your work by displaying project names, descriptions, technologies used, and links. This is often the main focus of your SSH Portfolio, giving visitors insight into what you’ve built.

Configuration Structure

Projects are configured as a list, where each project contains details about a single work item:
projects:
  - name: "Project Name"
    description: "Brief description"
    tech: ["Tech1", "Tech2"]
    url: "https://project-url.com"

Project Fields

name
string
required
The name of your project. This should be clear and memorable.Example:
name: "2ndLock"
description
string
required
A concise description of what the project does. Aim for 1-2 sentences that capture the project’s purpose and key features.Example:
description: "My personal alternative to Bitwarden - A cross-platform secure password vault with E-2-E Encryption and Shared Vaults."
Focus on the problem your project solves and what makes it unique.
tech
array
required
List of technologies, frameworks, and tools used in the project. Use recognizable technology names.Example:
tech: ["NodeJS", "React", "Electron", "ReactNative"]
You can also use multi-line array format:
tech:
  - "TypeScript"
  - "React"
  - "WebSocket"
  - "Redis"
url
string
required
The URL where the project can be accessed or viewed. This could be:
  • A live demo or production site
  • GitHub repository
  • Documentation site
  • App store link
  • Placeholder text if not yet available
Example:
url: "https://logui.xyz"
For unreleased projects:
url: "[pending approval on google play]"

Complete Example

Here’s the complete projects configuration from a real config.yaml:
projects:
  - name: "2ndLock"
    description: "My personal alternative to Bitwarden - A cross-platform secure password vault with E-2-E Encryption and Shared Vaults."
    tech: ["NodeJS", "React", "Electron", "ReactNative"]
    url: "https://2ndLock.xyz"

  - name: "LogUI"
    description: "Real-time logging and application monitoring platform. LogUI provides smart log grouping, AI insights, and API Monitoring in a single dashboard."
    tech: ["NodeJS", "Redis", "Clickhouse"]
    url: "https://logui.xyz"

  - name: "Hjälp"
    description: "Multi-channel helpdesk software that brings together LiveChat, Tickets, Email, and AI-powered support. Manage your entire customer service operation from one beautiful dashboard."
    tech: ["TypeScript", "React", "WebSocket", "Redis"]
    url: "https://hjalp.xyz"

  - name: "Zexcore SDK"
    description: "Enables real-time client-server communication in your apps with an easy to use API."
    tech: ["TypeScript", "Redis", "WebSocket"]
    url: "https://core-docs.zexware.com"

  - name: "Block Breaker 2D: Android"
    description: "My first mobile game made in Unity. A unique block-breaking experience with physics2d. Inspired by Tetris. "
    tech: ["C#", "Unity", "Android"]
    url: "[pending approval on google play]"

How Projects Appear in the TUI

When users navigate your SSH Portfolio, projects are typically displayed:
  1. Project List View: Shows project names in a navigable list
  2. Project Detail View: Displays the full project information when selected:
    • Project name (header)
    • Description
    • Technologies (often shown as tags or badges)
    • URL (clickable or copyable link)
The exact visual representation depends on the TUI implementation, but all fields are accessible to users.

Best Practices

Order Projects Strategically

List your most impressive or recent projects first:
projects:
  - name: "Current Flagship Project"
    # ...
  - name: "Recent Side Project"
    # ...
  - name: "Older But Notable Work"
    # ...

Write Compelling Descriptions

Good descriptions:
  • Start with the problem or use case
  • Highlight unique features
  • Keep it under 2 sentences
Example:
description: "Real-time logging and application monitoring platform. LogUI provides smart log grouping, AI insights, and API Monitoring in a single dashboard."
Less effective:
description: "A logging tool that I built using Node.js. It has a dashboard."

Select Relevant Technologies

List the most notable technologies, not every dependency: Good:
tech: ["TypeScript", "React", "WebSocket", "Redis"]
Too detailed:
tech: ["TypeScript", "React", "React-Router", "Redux", "Redux-Thunk", "Axios", "WebSocket", "Socket.io", "Redis", "Express", "Helmet", "Morgan", "Nodemon"]
Focus on core technologies that define your project’s architecture.

Provide Meaningful URLs

Whenever possible, link to:
  • Live demos over GitHub repos (shows confidence in your work)
  • Documentation sites for libraries/SDKs
  • GitHub repos for open-source projects
  • Case studies for client work
If a project isn’t public yet:
url: "[Coming soon]"
url: "[Private client work]"
url: "[In development]"

Quality Over Quantity

Include 3-8 strong projects rather than listing every small project:
  • Choose projects that demonstrate different skills
  • Include projects you’re proud to discuss
  • Remove outdated projects unless they’re particularly notable

Project Categories

While the current configuration doesn’t support categories, you can organize projects by using consistent ordering: By Type:
projects:
  # SaaS Products
  - name: "LogUI"
  - name: "Hjälp"
  
  # Developer Tools
  - name: "Zexcore SDK"
  
  # Games
  - name: "Block Breaker 2D"
By Scale:
projects:
  # Production Applications
  - name: "2ndLock"
  - name: "LogUI"
  
  # Experiments & Learning
  - name: "Block Breaker 2D"

Source Code Reference

The project structure is defined in config/config.go:48-53:
type Project struct {
    Name        string   `yaml:"name"`
    Description string   `yaml:"description"`
    Tech        []string `yaml:"tech"`
    URL         string   `yaml:"url"`
}
All fields are required strings (or string array for tech), and the YAML parser will fail if any field is missing from your configuration.

Build docs developers (and LLMs) love