Managing Content

The Astro Portfolio uses Supabase as its backend for managing all dynamic content. This allows you to update your portfolio information without touching the code.

Setting Up Supabase

The portfolio connects to Supabase using environment variables:

// src/db/supabase.js
import { createClient } from "@supabase/supabase-js";

const supabaseUrl = import.meta.env.SUPABASE_URL;
const supabaseKey = import.meta.env.SUPABASE_KEY;

export const supabase = createClient(supabaseUrl, supabaseKey);

Make sure to set these environment variables in your deployment platform (Vercel, Netlify, etc.) or in a .env file for local development:

SUPABASE_URL=https://your-project.supabase.co
SUPABASE_KEY=your-anon-key

Database Tables

The portfolio uses several interconnected tables to manage content:

About Me Table (`about_me`)

Stores your personal information and bio. Fields:

name - Your full name
bio - Your biography (supports markdown with **bold** syntax)
profile_image - URL to your profile picture

Example:

// Fetched in src/components/AboutMe.astro
const { data: aboutMe } = await supabase
  .from("about_me")
  .select("*")
  .single()

Usage Tips:

Use \n in bio for paragraph breaks
Use **text** for highlighted text (renders in yellow)
Profile image should be at least 400x400px for best quality

Projects Table (`projects`)

Manages your portfolio projects. Fields:

id - Unique identifier
title - Project name
description - Project description
image - Project screenshot URL
codeLink - GitHub repository URL
PreviewLink - Live demo URL
visible - Boolean to show/hide project
created_at - Timestamp (used for ordering)

Example:

// Projects are ordered by creation date, newest first
const { data: projects } = await supabase
  .from("projects")
  .select("*")
  .eq('visible', true)
  .order('created_at', { ascending: false });

Best Practices:

Use high-quality project screenshots (recommended: 800x600px)
Keep descriptions concise (2-3 sentences)
Set visible to false for draft projects
Link tools to projects for automatic badge display

Career Table (`careers`)

Tracks your work experience timeline. Fields:

id - Unique identifier
position - Job title
company - Company name
description - Job responsibilities and achievements
contact - Optional contact email
period - Time period (e.g., “2020 - 2023”)
visible - Boolean to show/hide entry
created_at - Timestamp
updated_at - Timestamp

Example:

const { data: careers } = await supabase
  .from("careers")
  .select("*")
  .order('period', { ascending: false })
  .eq('visible', true)

Best Practices:

Order by most recent first
Keep descriptions focused on achievements
Use specific time periods for clarity

Tools Table (`tools`)

Manages technologies and tools you use. Fields:

id - Unique identifier
name - Tool/technology name
type - Category: Frontend, Backend, Database, or Framework
icon - URL to tool icon/logo
visible - Boolean to show/hide tool

Example:

const { data: tools } = await supabase
  .from("tools")
  .select("*")
  .eq("type", "Frontend")
  .eq("visible", true)
  .order("name");

Tool Categories: The type field determines the badge color in projects:

function getToolClass(toolType) {
  switch(toolType) {
    case 'frontend':
      return 'bg-blue-600 text-white';
    case 'backend':
      return 'bg-green-600 text-white';
    case 'database':
      return 'bg-yellow-600 text-black';
    case 'framework':
      return 'bg-purple-600 text-white';
    default:
      return 'bg-gray-600 text-white';
  }
}

Certificates Table (`certificates`)

Stores your certifications and credentials. Fields:

id - Unique identifier
title - Certificate name
issuer - Issuing organization
type - Certificate category
date - Issue date
certificate_url - Link to certificate
visible - Boolean to show/hide certificate

Relationship Tables

Project-Tool Relationship (`project_tool`)

Links projects to the tools used in them. Fields:

project_id - Reference to projects table
tool_id - Reference to tools table

Example:

// Get all tools for specific projects
const { data: projectTools } = await supabase
  .from("project_tool")
  .select("project_id, tool_id")
  .in('project_id', projects.map(p => p.id));

How It Works:

Tools are fetched from the tools table
Project-tool relationships are queried
Tools are matched to each project by ID
Tool badges are displayed on project cards

Certificate-Tool Relationship (`certificate_tool`)

Links certificates to specific tools/technologies. Fields:

certificate_id - Reference to certificates table
tool_id - Reference to tools table

Example:

const { data } = await supabase
  .from("certificate_tool")
  .select(`
    certificate_id,
    certificates:certificate_id (
      id, title, issuer, type, date, certificate_url, visible
    )
  `)
  .eq("tool_id", toolId)
  .filter("certificates.visible", "eq", true);

Interactive Feature:

Tools with linked certificates show a yellow pulse indicator
Clicking the tool opens a modal displaying related certificates and projects

Content Management Workflow

Adding a New Project

Insert project record:

INSERT INTO projects (title, description, image, codeLink, PreviewLink, visible)
VALUES ('My New Project', 'A cool project', 'https://...', 'https://github.com/...', 'https://demo...', true);

Link tools to the project:

-- Get the project ID (e.g., 5)
-- Get tool IDs (e.g., React = 1, Node.js = 3)
INSERT INTO project_tool (project_id, tool_id)
VALUES (5, 1), (5, 3);

The project will automatically appear on your portfolio with the correct tool badges.

Updating Your Bio

Go to your Supabase dashboard
Navigate to the about_me table

Edit the bio field:

Hi, I'm a developer with **5+ years** of experience.\n\nI specialize in **web development** and **cloud architecture**.

Changes appear immediately on your site

Managing Visibility

All main tables have a visible field for easy content management:

Set visible = false to hide items without deleting them
Perfect for:
- Draft projects
- Seasonal content
- A/B testing different versions
- Temporarily hiding outdated information

Adding Tools and Certifications

Add a tool:

INSERT INTO tools (name, type, icon, visible)
VALUES ('React', 'Frontend', 'https://...icon.svg', true);

Add a certification:

INSERT INTO certificates (title, issuer, date, certificate_url, visible)
VALUES ('React Advanced Certification', 'Meta', '2024-01-15', 'https://...', true);

Link them together:

-- Assuming React tool_id = 1, certificate id = 10
INSERT INTO certificate_tool (certificate_id, tool_id)
VALUES (10, 1);

Now clicking on React in your tools section will show the certification!

Data Validation

The application includes basic error handling:

const { data: projects, error } = await supabase
  .from("projects")
  .select("*")
  .eq('visible', true);

if (error) {
  // Error message is displayed to user
  return <p>Error loading projects: {error.message}</p>;
}

Best Practices:

Always set required fields (title, name, etc.)
Use valid URLs for images and links
Test links before publishing
Keep backup exports of your Supabase data

Content Organization Tips

Consistent Naming: Use consistent capitalization for tool names
Image Strategy: Host images on a CDN or Supabase Storage for best performance
Regular Updates: Keep your career timeline and projects current
Quality Over Quantity: 3-5 strong projects are better than 20 mediocre ones
Link Related Content: Use the relationship tables to create rich connections

Next Steps

Learn how to customize the visual appearance in Theming
Deploy your portfolio with Deployment Guide

Getting Started

Components

Configuration

Deployment

Customization

Setting Up Supabase

Database Tables

About Me Table (`about_me`)

Projects Table (`projects`)

Career Table (`careers`)

Tools Table (`tools`)

Certificates Table (`certificates`)

Relationship Tables

Project-Tool Relationship (`project_tool`)

Certificate-Tool Relationship (`certificate_tool`)

Content Management Workflow

Adding a New Project

Updating Your Bio

Managing Visibility

Adding Tools and Certifications

Data Validation

Content Organization Tips

Next Steps

Build docs developers (and LLMs) love

Getting Started

Components

Configuration

Deployment

Customization

Documentation Index

​Setting Up Supabase

​Database Tables

​About Me Table (about_me)

​Projects Table (projects)

​Career Table (careers)

​Tools Table (tools)

​Certificates Table (certificates)

​Relationship Tables

​Project-Tool Relationship (project_tool)

​Certificate-Tool Relationship (certificate_tool)

​Content Management Workflow

​Adding a New Project

​Updating Your Bio

​Managing Visibility

​Adding Tools and Certifications

​Data Validation

​Content Organization Tips

​Next Steps

Build docs developers (and LLMs) love

Setting Up Supabase

Database Tables

About Me Table (`about_me`)

Projects Table (`projects`)

Career Table (`careers`)

Tools Table (`tools`)

Certificates Table (`certificates`)

Relationship Tables

Project-Tool Relationship (`project_tool`)

Certificate-Tool Relationship (`certificate_tool`)

Content Management Workflow

Adding a New Project

Updating Your Bio

Managing Visibility

Adding Tools and Certifications

Data Validation

Content Organization Tips

Next Steps