A modern, responsive portfolio website built with Astro 5, featuring a beautiful cartoon-style design with smooth animations, interactive project carousel, blog system, and comment integration.
You can preview the project online at:
https://astro-cartoon-portfolio.edgeone.app/
- Cartoon-style Astro portfolio, responsive layout
- Blog: Markdown posts, excerpts, tags, search, reading-time display, optional cover images
- Config-driven content: site copy, project list, post images, social links
- Comments via Giscus, SEO-friendly pages, smooth scroll animations
- Astro 5.x, TypeScript, Vite
- Styling: custom CSS
- Content: Markdown with Astro Content Collections
- Comments: Giscus (React component)
git clone https://github.com/tomcomtang/astro-cartoon-portfolio.git
npm install
npm run devsrc/pages/index.astro– Home (hero, projects, highlights)src/pages/posts.astro– Blog list with search/tag filtersrc/pages/posts/[slug].astro– Blog detail with commentssrc/pages/about.astro– About/skills sectionsrc/pages/contact.astro– Contact info and social linkssrc/pages/comments.astro– Giscus standalone pagesrc/content/posts/– Markdown blog postssrc/config/site.ts– Site copy, nav, social, hero/about/contact textsrc/config/projects.ts– Project entries (title, desc, tech, links, images)src/config/posts-images.ts– Post slug → cover image mappingsrc/styles/– Page-level styles (home, posts list/detail, contact, transitions)public/– Static assets (images, svg, fonts)
Set these for Giscus comments:
PUBLIC_GISCUS_REPO=your-username/your-repo
PUBLIC_GISCUS_REPO_ID=your-repo-id
PUBLIC_GISCUS_CATEGORY_ID=your-category-idMIT
tomcomtang