Managing Resources

Resources are managed through JSON data files that are loaded as Astro content collections. These collections power your resources pages including book recommendations, tech stack showcase, and desktop setup details.

Resource Collections Overview

Three resource collections are defined in src/content.config.ts:

books - Book recommendations and reading list
techStack - Technologies and tools you use
desktopSetup - Your hardware and workspace setup

All resource collections use the file() loader to read data from JSON files in src/data/.

Books Collection

Books are stored in src/data/books.json and showcase your reading list and recommendations.

Schema

string

required

Unique identifier for the book (e.g., “clean-code”, “pragmatic-programmer”)

string

required

The book title (e.g., “Clean Code”)

string

required

The author’s name (e.g., “Robert C. Martin”)

string

required

URL to the book cover image

string

required

A brief description or review of the book

string

required

Link to purchase or learn more about the book

Adding a Book

Edit src/data/books.json and add a new entry to the array:

{
  "id": "clean-code",
  "title": "Clean Code",
  "author": "Robert C. Martin",
  "image": "https://www.oreilly.com/covers/urn:orm:book:9780136083238/300w/",
  "description": "The definitive book on writing maintainable code. Uncle Bob's principles have shaped how I think about software craftsmanship.",
  "link": "https://www.oreilly.com/library/view/clean-code-a/9780136083238/"
}

Real Book Examples

{
  "id": "data-intensive-apps",
  "title": "Designing Data-Intensive Applications",
  "author": "Martin Kleppmann",
  "image": "https://www.oreilly.com/covers/urn:orm:book:9781491903063/300w/",
  "description": "Deep dive into distributed systems, databases, and data processing. Essential reading for building scalable applications.",
  "link": "https://www.oreilly.com/library/view/designing-data-intensive-applications/9781491903063/"
}

{
  "id": "pragmatic-programmer",
  "title": "The Pragmatic Programmer",
  "author": "David Thomas & Andrew Hunt",
  "image": "https://www.oreilly.com/covers/urn:orm:book:9780135956977/300w/",
  "description": "A classic guide to better programming practices. Full of practical tips and timeless advice that every developer should know.",
  "link": "https://www.oreilly.com/library/view/the-pragmatic-programmer/9780135956977/"
}

{
  "id": "my-robot-gets-me",
  "title": "My Robot Gets Me",
  "author": "Carla Diana",
  "image": "https://images.squarespace-cdn.com/content/v1/5ccee52ff4e5314a513a4c5d/1609480006867-30BAFKQYEIYDZC05X69Q/Diana10192_3D_silo_1000.png?format=2500w",
  "description": "An insightful exploration of how design principles can transform smart home products from simple programmed devices into intuitive, human-centered companions.",
  "link": "https://www.carladiana.com/my-robot-gets-me"
}

Tech Stack Collection

Your tech stack is stored in src/data/tech-stack.json and showcases the technologies and tools you use.

Schema

string

required

Unique identifier (e.g., “python”, “typescript”, “docker”)

string

required

Display name of the technology (e.g., “Python”, “TypeScript”)

string

required

URL to the technology logo or icon

string

required

Why you use this technology and what you use it for

string (URL)

required

Official website or documentation link

Adding a Tech Stack Item

Edit src/data/tech-stack.json and add a new entry:

{
  "id": "python",
  "name": "Python",
  "image": "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/python/python-original.svg",
  "description": "My primary backend language. Versatile, powerful, and perfect for everything from web APIs to data processing and automation scripts.",
  "link": "https://www.python.org/"
}

Use Devicon for consistent, high-quality technology logos. The CDN URL format is: https://cdn.jsdelivr.net/gh/devicons/devicon/icons/{name}/{name}-original.svg

Real Tech Stack Examples

{
  "id": "django",
  "name": "Django",
  "image": "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/django/django-plain.svg",
  "description": "The web framework for perfectionists with deadlines. Batteries-included approach means I can focus on building features, not boilerplate.",
  "link": "https://www.djangoproject.com/"
}

{
  "id": "react",
  "name": "React",
  "image": "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg",
  "description": "My go-to library for building interactive UIs. Component-based architecture makes code reusable and maintainable at scale.",
  "link": "https://react.dev/"
}

{
  "id": "postgresql",
  "name": "PostgreSQL",
  "image": "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/postgresql/postgresql-original.svg",
  "description": "My database of choice. Robust, reliable, and feature-rich. Handles everything from simple queries to complex data relationships.",
  "link": "https://www.postgresql.org/"
}

{
  "id": "docker",
  "name": "Docker",
  "image": "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/docker/docker-original.svg",
  "description": "Containerization made simple. Ensures my applications run consistently across development, testing, and production environments.",
  "link": "https://www.docker.com/"
}

Desktop Setup Collection

Your desktop setup is stored in src/data/desktop-setup.json and showcases your hardware and workspace.

Schema

string

required

Unique identifier (e.g., “macbook-pro”, “mx-keys-mini”)

string

required

Product name (e.g., “MacBook Pro 14"", “Logitech MX Keys Mini”)

string

required

URL to a product image

string

required

Details about the product and why you use it

string

required

Link to product page or specifications (use ”#” if no specific link)

Adding a Desktop Setup Item

Edit src/data/desktop-setup.json and add a new entry:

{
  "id": "macbook-pro",
  "name": "MacBook Pro 14\"",
  "image": "https://images.unsplash.com/photo-1517336714731-489689fd1ca8?w=400&h=300&fit=crop",
  "description": "M3 Max chip with 36GB RAM and 1TB SSD. The powerhouse that handles everything from development to video editing without breaking a sweat.",
  "link": "https://support.apple.com/en-ke/117736"
}

Real Desktop Setup Examples

{
  "id": "macbook-pro",
  "name": "MacBook Pro 14\"",
  "image": "https://images.unsplash.com/photo-1517336714731-489689fd1ca8?w=400&h=300&fit=crop",
  "description": "M3 Max chip with 36GB RAM and 1TB SSD. The powerhouse that handles everything from development to video editing without breaking a sweat.",
  "link": "https://support.apple.com/en-ke/117736"
}

{
  "id": "mx-keys-mini",
  "name": "Logitech MX Keys Mini",
  "image": "https://resource.logitech.com/w_544,h_466,ar_7:6,c_pad,q_auto,f_auto,dpr_2.0/d_transparent.gif/content/dam/logitech/en/products/keyboards/mx-keys-mini/gallery/deu/mx-keys-mini-top-pale-gray-deu.png",
  "description": "Minimalist Wireless Illuminated Keyboard. Compact design with comfortable typing experience and smart backlighting that adjusts to my environment.",
  "link": "https://www.logitech.com/en-eu/shop/p/mx-keys-mini"
}

{
  "id": "mx-master",
  "name": "Logitech MX Master 3S",
  "image": "https://resource.logitech.com/w_544,h_544,ar_1,c_fill,q_auto,f_auto,dpr_2.0/d_transparent.gif/content/dam/logitech/en/products/mice/mx-master-3s/2025-update/mx-master-3s-graphite-sustainability-gallery-4.png",
  "description": "Ergonomic mouse that fits perfectly in hand. Customizable buttons and smooth scrolling make navigation effortless during long work sessions.",
  "link": "https://www.logitech.com/en-eu/shop/p/mx-master-3s"
}

{
  "id": "standing-desk",
  "name": "Electric Standing Desk",
  "image": "https://images.unsplash.com/photo-1622579522120-85a1669d76b6?q=80&w=1287&auto=format&fit=crop",
  "description": "Height-adjustable standing desk with memory presets. Switching between sitting and standing throughout the day keeps me energized and focused.",
  "link": "#"
}

File Locations

Resource data files are stored in src/data/:

src/data/
├── books.json
├── tech-stack.json
├── desktop-setup.json
└── socials.json

Querying Resources

In your Astro components, query resource collections like any other content collection:

import { getCollection } from 'astro:content';

// Get all books
const books = await getCollection('books');

// Get all tech stack items
const techStack = await getCollection('techStack');

// Get all desktop setup items
const desktopSetup = await getCollection('desktopSetup');

Example Component Usage

---
import { getCollection } from 'astro:content';

const techStack = await getCollection('techStack');
---

<div class="tech-grid">
  {techStack.map((tech) => (
    <div class="tech-card">
      <img src={tech.data.image} alt={tech.data.name} />
      <h3>{tech.data.name}</h3>
      <p>{tech.data.description}</p>
      <a href={tech.data.link}>Learn more</a>
    </div>
  ))}
</div>

Best Practices

Books

Use high-quality cover images - Preferably from official sources
Write personal descriptions - Explain why you recommend the book and what you learned
Link to official sources - Use publisher or author websites when possible
Include diverse topics - Mix technical books with career development and design
Update regularly - Add new books as you read them

Tech Stack

Use Devicon for consistency - Get logos from Devicons
Be personal in descriptions - Explain why you use each technology
Keep it current - Remove technologies you no longer use actively
Order by importance - Put your primary technologies first in the array
Link to official docs - Use the main documentation site for each technology

Desktop Setup

Use quality product images - High-resolution images make setup pages look professional
Include specifications - Mention key specs (RAM, storage, etc.) in descriptions
Explain your choices - Tell readers why you chose each item
Link to products - Help readers find the exact items if interested
Keep it realistic - Only include items you actually use

Image Guidelines

For Books

Use official cover images from publishers
Minimum 300x400px resolution
Prefer square or portrait orientation

For Tech Stack

Use SVG logos from Devicon when possible
Consistent icon style across all items
Transparent backgrounds work best

For Desktop Setup

High-resolution product photos (800px+ width)
Consistent photo style if possible
Use Unsplash for generic items like desks

JSON Validation

All resource JSON files must be valid JSON arrays. Common mistakes to avoid:

// ❌ Wrong - Missing comma
[
  { "id": "item1", "name": "Item 1" }
  { "id": "item2", "name": "Item 2" }
]

// ✅ Correct - Proper comma separation
[
  { "id": "item1", "name": "Item 1" },
  { "id": "item2", "name": "Item 2" }
]

// ❌ Wrong - Trailing comma on last item
[
  { "id": "item1", "name": "Item 1" },
  { "id": "item2", "name": "Item 2" },
]

// ✅ Correct - No trailing comma
[
  { "id": "item1", "name": "Item 1" },
  { "id": "item2", "name": "Item 2" }
]

Use a JSON validator or your editor’s JSON validation to catch syntax errors before committing changes.

Adding New Resource Types

To add a new resource collection:

Create the JSON data file

touch src/data/my-resources.json

Define the collection schema

Edit src/content.config.ts and add a new collection:

const myResources = defineCollection({
  loader: file('src/data/my-resources.json'),
  schema: z.object({
    id: z.string(),
    name: z.string(),
    description: z.string(),
    // ... other fields
  }),
});

Export the collection

Add it to the exports:

export const collections = {
  // ... existing collections
  myResources,
};

Query in your pages

const myResources = await getCollection('myResources');

Get Started

Core Features

Content Management

Customization

Deployment

Resource Collections Overview

Books Collection

Schema

Adding a Book

Real Book Examples

Tech Stack Collection

Schema

Adding a Tech Stack Item

Real Tech Stack Examples

Desktop Setup Collection

Schema

Adding a Desktop Setup Item

Real Desktop Setup Examples

File Locations

Querying Resources

Example Component Usage

Best Practices

Books

Tech Stack

Desktop Setup

Image Guidelines

For Books

For Tech Stack

For Desktop Setup

JSON Validation

Adding New Resource Types

​Resource Collections Overview

​Books Collection

​Schema

​Adding a Book

​Real Book Examples

​Tech Stack Collection

​Schema

​Adding a Tech Stack Item

​Real Tech Stack Examples

​Desktop Setup Collection

​Schema

​Adding a Desktop Setup Item

​Real Desktop Setup Examples

​File Locations

​Querying Resources

​Example Component Usage

​Best Practices

​Books

​Tech Stack

​Desktop Setup

​Image Guidelines

​For Books

​For Tech Stack

​For Desktop Setup

​JSON Validation

​Adding New Resource Types

Resource Collections Overview

Books Collection

Schema

Adding a Book

Real Book Examples

Tech Stack Collection

Schema

Adding a Tech Stack Item

Real Tech Stack Examples

Desktop Setup Collection

Schema

Adding a Desktop Setup Item

Real Desktop Setup Examples

File Locations

Querying Resources

Example Component Usage

Best Practices

Books

Tech Stack

Desktop Setup

Image Guidelines

For Books

For Tech Stack

For Desktop Setup

JSON Validation

Adding New Resource Types