ValGram is an Instagram-style profile viewer for Val Town users, showing their vals in a grid layout similar to Instagram.

• View any Val Town user profile in an Instagram-style grid
• 2:3 aspect ratio cards (portrait mode)
• Responsive design (mobile and desktop friendly)
• Circle-cropped profile pictures
• Colorful placeholder images based on project/username
• Hover effects to display val details
• Client-side routing (/@username paths)
• Custom profile configuration via moi.md files
• Hybrid API approach: Uses Charlie's User Search API for val discovery and the Val Town SDK for moi.md integration

Visit the main page and enter a Val Town username to view their profile. You can also directly navigate to:

/@username

Where username is the Val Town username you want to view.

ValGram supports custom profile configuration using a moi.md file at the root of your Val Town project. This file uses YAML frontmatter to specify custom metadata for your profile or individual vals.

---
title: "My Awesome Val Town Project"
description: "A detailed description of my project"
imageUrl: "https://example.com/my-custom-image.jpg"
author: "username"
tags: ["javascript", "react", "val-town"]
---

# My Project

Additional markdown content here will be ignored by ValGram but can be used for documentation.

• imageUrl: Custom image URL to override the default profile/val image (2:3 aspect ratio recommended, e.g., 800x1200px)
• title: Custom display title
• description: Extended description
• tags: Array of tags for categorization
• author: Custom author display name

• Profile Images: Square images work best, as they will be displayed in a circle
• Val/Project Images: 2:3 aspect ratio (portrait orientation) works best, like 800x1200 pixels
• Placeholders: If no image is available, colored placeholders with the first letter of the name will be shown

• Built with React (client-side)
• Hono (server-side)
• Tailwind CSS (styling)
• Uses Charlie's User Search API for val discovery
• Val Town SDK for fetching moi.md configurations
• Uses Val Town's profile picture proxy for user avatars

The app uses a hybrid approach:

1. Charlie's User Search API (https://charliesusersearch.val.run/?user=${username}) for discovering user vals
2. Val Town SDK (npm:@valtown/sdk) for fetching and parsing moi.md files
3. Val Town Profile Pic Proxy (https://pic.val.run/${username}) for user avatars

Built by dcm31 on Val Town.