Live design demo

Art

A bilingual bento journal with MDX notes, projects, and interactive demos — open the live showcase. Navigate inside the frame — you are still on Tawny.

Open in new tab Back to Designs

designs/art

Hugo Lin

About

Software builder, writer, and photographer.

I'm Lin Hugo — a software builder and writer studying Computer Science at USC Viterbi. By day, I design and architect scalable software systems. On weekends, I'm a photographer capturing the human touch in fleeting moments.

You are too focused on the future without realizing that today is exactly what you prayed for years ago.

Background

I grew up studying Atmospheric Sciences at National Central University in Taiwan, with a minor in Programming Design. The path from weather systems to software turned out to be less of a detour and more of a natural one — both fields are about modeling complex systems and making sense of them. I'm now pursuing a Master of Science in Computer Science at USC Viterbi, where my interests sit at the intersection of web development and large-scale software systems.

Work

My industry journey started at PEGATRON as an AI Engineer intern, building an LLM proof-of-concept presented to the CTO. I became an AWS Campus Ambassador, running technical workshops for 700+ developers. At eCloudvalley, I led a five-person team to ship a serverless AWS Bedrock solution with 95% classification accuracy. Most recently at Futurenest, I shipped Django REST APIs with full test coverage and integrated a Next.js chat interface with a custom backend.

Beyond code

I shoot film and digital photography whenever I can — mostly street and travel. There's something about the discipline of a single frame that sharpens the way you see the world, and I carry that same sensibility into writing and engineering.

Projects

A few things I've built:

1chooo.com — personal site built with Next.js, Tailwind CSS, and MDX
art — this journal — brutalist bento grid with MDX posts
VCard — open-source portfolio template (300+ stars)

Want to collaborate or chat? Find me at 1chooo.com.

About

Art is a bilingual personal journal built around a brutalist bento home grid. It ships with MDX notes and projects, next-intl for English and Chinese, and interactive tiles — weather, location globe, image and tag carousels.

Use the live demo above to explore the full experience inside Tawny. When you are ready to start from the same foundation, scaffold a copy with the create command below, then replace the placeholder author details and sample content.

Get the template

Scaffold a local copy with your preferred package manager.

Terminal

pnpm create tawny@latest art my-app

Template source

Browse every file in templates/art.

templates/art

README.md

# Bento Journal

A bilingual personal journal template — brutalist bento home grid, MDX posts, and an editorial reading experience.

Design by [Hugo Lin](https://1chooo.com).

## Quick start

### Option A — create-next-app (recommended)

```bash
npx create-next-app@latest my-journal \
  --example "https://github.com/1chooo/tawny" \
  --example-path "templates/art"
```

### Option B — create-tawny CLI (interactive prompts)

```bash
npx create-tawny@latest art my-journal
```

Then:

```bash
cd my-journal
pnpm install   # or npm / yarn / bun
cp .env.example .env   # optional: set WEATHER_CITY
pnpm dev
```

Open [http://localhost:3000](http://localhost:3000).

## Start here (sample content)

After scaffolding, read these starter articles in order:

1. **[Hello, world](/en/notes/hello-world)** — tone and basic MDX
2. **[Writing in MDX](/en/notes/writing-in-mdx)** — `postMeta`, images, shortcodes (`Callout`, `CodeBlock`, `TagDemo`, `GapDemo`, etc.)
3. **[Sample Project](/en/projects/sample-project)** — how featured projects appear on the home grid

Delete or replace them once you are comfortable.

## Customize these files

| File | What to change |
|------|----------------|
| `messages/en.json`, `messages/zh.json` | Site title, brand name, about page copy, nav labels |
| `lib/bento-links.ts` | GitHub, email, and location quick links on the home grid |
| `lib/locations.ts` | Cities on the globe page (coordinates + ids) |
| `lib/nav.ts` | Navigation items |
| `content/posts/` | Your notes (`.mdx` files with `postMeta` export) |
| `content/projects/` | Your projects (`projectMeta` export) |
| `public/` | Images — `opengraph-image.png` powers the bento carousel and sample MDX |
| `.env` | `WEATHER_CITY` or `WEATHER_LAT` / `WEATHER_LON` for the home weather tile |

### Placeholders (if you used Option A)

Search for `{{AUTHOR_NAME}}`, `{{AUTHOR_EMAIL}}`, `{{GITHUB_USERNAME}}`, and `{{CITY_NAME}}` across the project and replace them, or use Option B which does this automatically.

## Adding a post

Create `content/posts/my-post.mdx`:

```mdx
export const postMeta = {
  title: "My first note",
  date: "2026-06-06",
  description: "A short summary for listings and SEO.",
  tags: ["journal"],
};

Your MDX content starts here.
```

No manual registry — `lib/posts.ts` scans `content/posts/` at build time.

- `my-post.mdx` → English only
- `my-post.en.mdx` + `my-post.zh.mdx` → bilingual under the same slug

Visit `/en/notes/my-post` (or `/zh/notes/my-post`).

## Stack

- Next.js 16 App Router & React Server Components
- MDX with remark-gfm
- Tailwind CSS v4 & @tailwindcss/typography
- next-intl (English & Chinese)
- Bento home grid with image, tag, and upcoming carousels

## License

MIT — see [LICENSE](./LICENSE).