Craftzdog Homepage

Craftzdog Homepage is a free, MIT-licensed developer portfolio template built with Next.js, Chakra UI, and Three.js that creates a personal homepage with 3D graphics and smooth animations.

What is Craftzdog Homepage?

Craftzdog Homepage is the source code of Takuya's personal website at craftz.dog, released as an open-source template for developers. It runs on Next.js, uses Chakra UI for accessible React components, Three.js for the 3D voxel dog, and Framer Motion for animations. As input, you fork the repository and replace the content and styling; as output, you get a static-generated homepage ready to deploy to any platform that supports Next.js. The project is maintained by Takuya (Craftzdog), who also built the Inkdrop note-taking app.

Key Features

• Next.js framework — Uses hybrid static and server rendering, route pre-fetching, and file-based pages under the pages directory.
• Chakra UI components — A modular and accessible component library for React that provides styling and theming out of the box.
• Three.js 3D graphics — Integrates a 3D voxel dog model (which you must replace if you fork the project) to add visual interest.
• Framer Motion animations — Handles page transitions and micro-interactions with React animations.
• Simple project structure — Organized into pages, components, lib, and public folders, making it easy to locate and edit code.
• MIT license — Free to fork and reuse for your own homepage, with the only conditions being to link back to craftz.dog and not use the original 3D voxel dog.
• Video tutorial — Takuya published a YouTube video showing exactly how he built the site, useful for learning the stack.

Who is it for?

• Developers looking for a portfolio starter — Fork the repo and customize the sections to showcase your projects and skills.
• Creators who want a 3D personal site — The Three.js integration serves as a reference for adding custom 3D models to a Next.js homepage.
• Learners of the Next.js + Chakra UI stack — The codebase demonstrates a real-world combination of these tools, and the tutorial provides step-by-step guidance.

What can you do with Craftzdog Homepage?

• Build a personal homepage: Replace the content, colors, and the 3D model to create a unique developer profile page.
• Learn full-stack React: Study how the pages, components, and static assets are organized in a production-ready Next.js project.
• Deploy a static site: Since Next.js supports static generation, you can host the resulting homepage on platforms like Vercel or Netlify without a server.

FAQ

Is Craftzdog Homepage free to use?

Yes, it is released under the MIT License. You can fork it and create your own homepage for free without notifying the author, provided you add a link to https://www.craftz.dog/ and do not use the 3D voxel dog model.

Can I use the 3D voxel dog on my site?

No. The MIT license explicitly prohibits using the 3D voxel dog from the original project. You'll need to replace it with your own 3D model or remove it entirely.

What is the tech stack?

The template uses Next.js for the React framework, Chakra UI for components, Three.js for 3D graphics, and Framer Motion for animations. All four libraries are integrated in a single project.

Does it include a blog or CMS?

The repository structure shows only page and component files; there is no mention of a CMS or blog engine. It is a homepage rather than a blog platform.