English · 日本語 · 繁體中文 · 简体中文 · Deutsch · Français · Español · Bahasa Indonesia
A developer portfolio template with two original watercolor characters, each with a theme of her own: Crystalline, a light theme, and Weltschmerz, a dark one.
Crystalline is the light theme, in soft watercolor blues and lilacs. Its companion is Crystalline-chan, a girl who walks with a deer made of glass.
Weltschmerz is the dark theme, quiet and heavy, in deep purples and ink. Its companion is Weltschmerz-chan, a girl who feels the weight of the world.
Both characters and their illustrations are original work by Aesthetic Vulpes (didvc). The switch in the header moves between the two themes.
The current theme's character floats in the corner of the page and says a short line now and then, or when clicked. Pages change with a glitch transition and load behind an ASCII animation, cards shift slightly with the mouse, and a terminal-style interface can browse the projects by command. There are a few easter eggs, including a hidden key sequence (↑ ↑ ↓ ↓ ← → ← → B A). The interface is available in English and Japanese, and a small wiki holds the help and privacy pages.
Anime Portfolio is for developers who want a personal site with some character, in the literal sense. It suits:
- Web developers, designers and students who need a portfolio that people remember after one visit
- Illustrators and hobby artists who code, and want their own drawings to be part of the site
- Japanese developers, or anyone working across Japan and the rest of the world, who want a bilingual English and Japanese portfolio without maintaining two sites
- Anyone who wants a free, static portfolio on GitHub Pages, with no server, database or monthly bill
If you have looked for an anime developer portfolio template, a kawaii portfolio, or a Next.js portfolio with a dark mode and a light mode, this is meant to be that, with the rough edges already sanded off.
Most portfolio templates look the same: a hero banner, a grid of cards, a contact form. They work, but visitors forget them. This template keeps the parts that work, the project grid, the profile and the links, and adds a small companion who lives on the page. She reacts when you click her, says a line now and then, and changes with the theme. It is a quiet way to show personality without getting in the way of the work.
The two themes are two moods rather than two color swaps. Crystalline is bright and clear, like glass in daylight. Weltschmerz, a German word for the weary sadness of seeing the world as it is, is dark and still, like ink drying late at night. A visitor can switch between them with one click, and the character, the palette and the tone of the lines change together.
The characters are original. Many fan-made templates borrow characters from existing anime, which leaves everyone who uses them in a gray area. Crystalline-chan and Weltschmerz-chan were drawn for this project and are licensed openly, so you can build on them, or replace them with your own, without wondering who owns what.
The template is designed so that you can change the parts that matter without learning how the whole thing works.
Each theme has one floating character. You can keep Crystalline-chan and Weltschmerz-chan, or use your own drawing, a mascot, a photo of your cat, or nothing at all. A good character image is a PNG with a transparent background, around 300 by 450 pixels, drawn so that it reads well at small size in the corner of the screen. Watercolor, line art and pixel art all work; the page does not add a frame, so whatever you draw floats directly over the site.
If you would rather not have a character, the floating companion can be turned off for either theme, and the rest of the site works exactly the same.
Each character has a short list of lines that she says at random, or when a visitor clicks her. These are where most of the personality comes from. A few ideas:
- Keep them short. One sentence reads well in the speech bubble; two is the limit.
- Match the theme. Crystalline-chan notices light and color; Weltschmerz-chan notices weight and silence.
- Let them point somewhere. A line like "Let me show you something that sparkles..." invites a visitor to scroll.
- Write a line for the hidden key sequence. Visitors who find it get a special message, so make it worth finding.
You can rename the themes, change their colors, or add a third. A pair of opposites, day and night, calm and loud, work and play, tends to feel more intentional than two similar palettes. Whatever you choose, keep text readable in both: the switch is one click away, so visitors will see both.
The project grid has three views: featured, all projects, and experimental. Featured is for the work you would show first in an interview. Experimental is for the odd, half-finished and joyful things that show how you think; many visitors find that view the most interesting. Each project can have several screenshots, tags, a demo link and a source link, plus a short one-line summary for the card and a longer description.
Every label on the site comes in English and Japanese, and visitors can switch languages from the header. Your name, role, location and bio can have both versions too. This makes the template a good fit for a bilingual portfolio, for job hunting in Japan, or for sharing your work with both audiences at once.
For visitors who prefer a keyboard, the site includes a small terminal. Typing help lists the commands; ls lists your projects, featured and experimental switch the grid, clear empties the screen and exit closes it. It is a small touch, but developers tend to find it and enjoy it.
Next.js 15 (App Router, exported as a static site), React 19, TypeScript, Tailwind CSS 3, Framer Motion, and Radix UI components in the shadcn/ui style, with Lucide icons. The demo is hosted on GitHub Pages.
Requires Node.js 18.18 or later, and npm or pnpm.
-
Clone the repository:
git clone https://github.com/anime-portfolio/app.git cd app -
Install the dependencies:
npm install # or pnpm install -
Start the development server:
npm run dev # or pnpm dev -
Open http://localhost:3000.
npm run buildThe site is exported as static files to out/. To serve it from a subpath, such as /app/ on GitHub Pages, set PAGES_BASE_PATH=/app for the build.
Edit data/portfolio-data.tsx:
export const profileData: ProfileData = {
name: {
en: "Your Name",
ja: "あなたの名前",
},
role: {
en: "Your Role",
ja: "あなたの役割",
},
// ... more configuration
}Social links and the contact email are optional; the page only shows the ones that are set.
Add your projects to the works array in the same file:
{
id: "your-project",
title: "Project Title",
description: "Project description...",
images: ["image1.jpg", "image2.jpg"],
link: "https://your-project.com",
repo: "https://github.com/your-username/project",
tags: ["React", "TypeScript", "Next.js"],
date: "2024-12",
featured: true,
}The two themes live in contexts/theme-context.tsx. A new theme is another configuration of the same shape, with its own colors and floating character:
export const customTheme: PortfolioPageProperties = {
type: "fullscreen",
styles: ["anime", "custom"],
gradientBg: "bg-gradient-to-br from-custom-900 to-custom-100",
// ... more customization
}app/
├── app/ # Next.js App Router
├── components/ # React components
│ ├── ui/ # Reusable UI components
│ ├── work-card.tsx # Project card component
│ ├── floating-girl.tsx # Floating character component
│ └── terminal-ui.tsx # Terminal interface
├── contexts/ # React contexts, including the themes
├── data/ # Portfolio data and configuration
├── hooks/ # Custom React hooks
├── lib/ # Utilities, translations and wiki articles
├── public/ # Static assets, including the character images
├── styles/ # Global styles
└── types/ # TypeScript type definitions
The demo deploys to GitHub Pages through .github/workflows/pages.yml, which builds and publishes the site on every push to master. The exported out/ folder also works on Vercel, Netlify or any other static host.
Because the site is exported as plain static files, hosting it is free and needs no server:
- Fork this repository, or use it as a template for a new one.
- In your repository's settings, open Pages and choose GitHub Actions as the source.
- Push a change to the
masterbranch. The included workflow builds the site and publishes it athttps://your-username.github.io/your-repository/.
If you publish from a repository named your-username.github.io, the site lives at the root of that address instead. A custom domain can be added in the same Pages settings. Every later push rebuilds and republishes the site automatically, so updating your portfolio is as simple as editing a file and pushing.
Contributions are welcome. Fork the repository, then:
- Create a feature branch:
git checkout -b feature/your-feature - Commit your changes:
git commit -m "Add your feature" - Push the branch:
git push origin feature/your-feature - Open a pull request
Follow the existing code style, add tests for new features where it makes sense, update the documentation, and check your change in more than one browser and in both themes. See CONTRIBUTING.md for the details.
Questions and ideas go to Discussions, and bugs to Issues.
Yes. The code is MIT licensed, so you can use it for a personal site, a client project or a commercial product, and change anything you like.
Yes. The character illustrations are licensed under CC BY 4.0, which allows use, modification and redistribution, including commercially, as long as you give credit. A line such as "Characters: Crystalline-chan and Weltschmerz-chan by Aesthetic Vulpes (CC BY 4.0)" in your footer or README is enough.
Not for the basics. Your name, bio, links, projects and character lines all live in plain data files that read almost like a form. Changing the layout or adding new features does need some React.
No. The site is exported as static HTML, CSS and JavaScript, so it runs on GitHub Pages, Netlify, Vercel, Cloudflare Pages or any ordinary web host, at no cost.
Yes. The layout is responsive, the navigation collapses into a menu on small screens, and the character stays out of the way of the content.
Yes. Turn off the floating character, pick calmer colors, and what remains is a clean, fast developer portfolio with a project grid, a profile section, two themes and bilingual support.
Please do. Share it in Discussions; seeing how people make it their own is the best part of maintaining a template.
The code is released under the MIT License. The character illustrations (Crystalline-chan and Weltschmerz-chan, in public/images/, public/og.png and the screenshots) are licensed under CC BY 4.0.
- hugo-kawaii: A modern and cool Hugo theme with beautiful kawaii aesthetics, dark mode support, and delightful animations
- Kuso-Physics: The chaos physics game, big brain puzzles included. Built with Next.js and hosted on GitHub Pages.
- astro-html-editor: Self-hosted HTML editor with live preview. Astro SSR + plain JavaScript, server-side file persistence.
- text-to-speech: VoiceFlow - Modern text-to-speech web application with real-time word highlighting, customizable voice settings, and content management. Built with React, TypeScript, and Web Speech API.
- didvc: Aesthetic Vulpes, Tokyo | a 20s Japanese fox #arts #music #provenance | 2027 Profile README