Joyce Homepage

Joyce Homepage is a free, MIT-licensed personal homepage and portfolio template built on Next.js, Chakra UI, Three.js, and Framer Motion, purpose-built as a single-page site that aggregates a developer's links and projects.

What is Joyce Homepage?

Joyce Homepage is a starter template for a personal link-in-bio homepage. You provide your profile details, social links, and project URLs, and the template renders them as an animated one-page site with a 3D voxel dog model. It runs on Next.js, which brings hybrid static and server rendering plus route pre-fetching, and the demo deployment is hosted on Vercel. The template is authored by the developer behind the homepage at craftz.dog and is shared under an MIT license.

Key Features

• Next.js framework — Uses React with hybrid static and server rendering, automatic route pre-fetching, and file-based routing through the pages directory.
• Chakra UI styling — A modular, accessible React component library supplies the visual components and layout primitives.
• Three.js 3D scene — A 3D voxel dog model rendered in the browser via Three.js gives the page a distinctive animated focal point.
• Framer Motion animations — Page and element transitions are powered by Framer Motion's React animation library.
• Simple project structure — Organized into pages, components, lib, and public folders, making it straightforward to locate config, components, and static assets.
• Free to customize — The MIT license lets you fork the project and build your own homepage for free, with two conditions: add a link to the author's homepage and do not reuse the 3D voxel dog.

Who is it for?

• Developers who want a polished personal homepage without building one from scratch can fork the project and swap in their own links and profile text.
• Portfolio owners who want a 3D visual hook (the voxel dog) to make their site stand out from typical link-tree pages.
• Next.js learners who want a compact, real-world example of combining Next.js, Chakra UI, Three.js, and Framer Motion in one project.

What can you do with Joyce Homepage?

• Fork and deploy a personal link page: Clone the repo, replace the author's content with your own social and project links, and deploy to Vercel or any Next.js-compatible host.
• Study a full-stack React setup: Read how pages routes, components build the UI, and lib holds non-React modules like Three.js helpers.
• Create a brandable homepage: Because the license allows free use with attribution, you can make a legitimate personal site without paying for a template.

How does Joyce Homepage work?

Fork the repository on GitHub, then edit the content files (components and page files) to replace the placeholder profile, links, and metadata with your own. The Next.js project builds to static pages ready for deployment, and the README requires you to keep a link to craftz.dog and avoid copying the 3D voxel dog model.

FAQ

Is Joyce Homepage free?

Yes, the project is released under the MIT License. You can fork it and create your own homepage for free as long as you add a link to the author's homepage at craftz.dog and do not use the 3D voxel dog.

What technology does Joyce Homepage use?

It uses Next.js as the React framework, Chakra UI for styling and components, Three.js for the 3D voxel dog scene, and Framer Motion for animations. The project structure includes pages, components, lib, and public directories.

Can I use the 3D voxel dog in my own version?

No. The license explicitly states you may not use the 3D voxel dog model. You can replace it with your own 3D model or remove the Three.js scene entirely.

Do I need to attribute the author?

Yes, one of the license conditions is to add a link to the author's homepage (craftz.dog). Keeping that attribution link satisfies the requirement.