Astro Cartoon Portfolio

Astro Cartoon Portfolio is an open-source portfolio and blog template built on Astro 5 that pairs a cartoon-styled, responsive front end with a Markdown blog, a config-driven project showcase, and Giscus-powered comments.

What is Astro Cartoon Portfolio?

The template takes your content from TypeScript config files and Markdown posts and generates a static, SEO-friendly website with pages for home, blog list, blog detail, about, contact, and standalone comments. It runs on Astro 5.x with TypeScript and Vite, uses custom CSS for styling, and is published by tomcomtang under the MIT license.

Key Features

• Cartoon-style responsive design — The entire visual style is built with custom CSS rather than a UI framework, giving the template a distinctive playful look that adapts to different screen sizes.
• Markdown blog with search and tags — Blog posts are stored as Markdown in src/content/posts; the list page supports full-text search, tag filtering, reading-time display, and optional cover images per post.
• Config-driven content — Site copy, navigation, social links, hero/about/contact text, project entries, and post cover-image mappings are all managed in TypeScript files under src/config, so you rarely need to edit markup.
• Giscus comment integration — Comments are handled by Giscus, a GitHub Discussions-backed system, via a React component. You must set PUBLIC_GISCUS_REPO, PUBLIC_GISCUS_REPO_ID, and PUBLIC_GISCUS_CATEGORY_ID as environment variables.
• Project carousel on the home page — src/pages/index.astro includes an interactive carousel of projects, plus hero and highlight sections, all driven by src/config/projects.ts.
• Six included page templates — About, Contact, Blog, Blog Detail, Home, and a standalone Giscus comments page (src/pages/comments.astro) are built in and ready to customize.
• SEO-friendly static output — Astro's static generation produces pre-rendered pages, and the template includes smooth scroll animations and page-level styles for transitions.
• One-click Vercel deploy — The GitHub repository includes a Deploy with Vercel button that clones the repo and deploys a live preview immediately.

Who should use Astro Cartoon Portfolio?

• Front-end developers — who want a portfolio with a distinct cartoon look and a built-in blog without pulling in a heavy UI framework or CMS.
• Designers and creatives — who want to present projects and write long-form Markdown posts, with reader comments flowing through GitHub Discussions.
• Indie hackers and open-source maintainers — who need a lightweight, config-driven personal site that can be deployed to Vercel or any static host.

What can you do with Astro Cartoon Portfolio?

• Developers building a personal brand: Edit src/config/site.ts and projects.ts to set your name, bio, social links, and project list, then publish Markdown posts to share updates.
• Creatives looking for a styled blog: Write posts in Markdown with optional cover images, tags, and reading-time; visitors can search and filter the blog list.
• Anyone wanting community discussion on posts: Enable Giscus by setting the three environment variables so readers can comment via GitHub Discussions.
• Quick deployment testing: Use the Vercel deploy button to spin up a live preview of the template before customizing any content.

How does Astro Cartoon Portfolio work?

1. Clone the repository and run npm install then npm run dev to start a local dev server.
2. Replace the placeholder content in src/config/site.ts and src/config/projects.ts, and add Markdown files to src/content/posts.
3. Set the Giscus environment variables if you want comments enabled, then build and deploy the static site to your preferred host.

Pricing

Free and open source under the MIT License. You can use, modify, and redistribute the template for personal or commercial purposes.

FAQ

Is Astro Cartoon Portfolio free?

Yes, the template is released under the MIT License, so it is free to use, modify, and redistribute for both personal and commercial projects.

Does the blog require a database or CMS?

No. Blog posts are simple Markdown files in src/content/posts and are read at build time by Astro's Content Collections, so there is no database or admin panel to maintain.

How do I enable comments?

Set three environment variables: PUBLIC_GISCUS_REPO (your GitHub repo), PUBLIC_GISCUS_REPO_ID, and PUBLIC_GISCUS_CATEGORY_ID. Once these are configured, the Giscus React component on the blog detail and standalone comments pages will load discussions.

Can I deploy this to a host other than Vercel?

Yes. Astro generates a fully static site, so the built output can be served from any static host. The repository provides a Vercel quick-deploy button as a convenience, but the build process is platform-agnostic.

What configuration files do I need to edit?

The main files are src/config/site.ts (site copy, navigation, social links, hero/about/contact text), src/config/projects.ts (project entries with title, description, tech, links, images), and src/config/posts-images.ts (mapping post slugs to cover images).