KL Portfolio

KL Portfolio is a TypeScript-based personal portfolio website template built on Next.js, ChakraUI, and Framer Motion, designed to present a developer's bio, projects, and contact links, and deployed on Netlify's free tier.

What is KL Portfolio?

KL Portfolio is a static personal portfolio site created by developer KL Lawingco as a v2 rewrite of an earlier template-based site. It uses Next.js as a static site generator, ChakraUI for the component library, Framer Motion for animations, and TypeScript throughout. The site currently shows personal details and links out to dev.to for blog posts, with a future plan to host a native blog. The production build is deployed on Netlify's free tier, with build status tracked via a Netlify badge.

Key Features

• Next.js static generation — Built with Next.js as an SSG tool, producing a static site that can be hosted on any static host and deployed via a simple merge to the master branch on Netlify.
• ChakraUI styling system — Uses ChakraUI to provide accessible React components, theming, and responsive layout out of the box.
• Framer Motion animations — Integrates Framer Motion for smooth, declarative animations across page elements.
• TypeScript codebase — The entire site is written in TypeScript, giving developers compile-time type safety.
• Yarn-based workflow — The project favors Yarn over npm; running yarn install and yarn dev starts a local dev server at http://localhost:3000.
• Node version guidance — Recommends Node v14 LTS (minimum v12) and ships a .nvmrc file for use with nvm use.
• Netlify-friendly deployment — No netlify.toml is required; Netlify handles the build after merging to master.
• Custom branding assets — The logo and avatar are custom-made by KojiroArt, not stock illustrations.

Who is it for?

• Frontend developers looking for a real-world Next.js + TypeScript portfolio skeleton to customize.
• Developers who use ChakraUI wanting a ready-made personal site that already integrates the library.
• Job seekers who need a clean, animated portfolio with minimal setup and free hosting via Netlify.
• Students learning static site generation with Next.js can study this codebase as a working example.

What can you do with it?

• Showcase your work: Replace the placeholder personal details with your bio, project list, and social links to publish a professional portfolio.
• Link to your articles: Use the existing dev.to links to direct visitors to your blog posts without running a full blog engine.
• Practice deployment: Use the Netlify workflow to see how a static site is automatically built and deployed from a Git repository.

How does it work?

To run locally, clone the repository, run yarn install (or just yarn) to install dependencies, then yarn dev to start the development server at http://localhost:3000. For deployment, there is no special configuration: the site is set up in the Netlify dashboard, and pushing a feature branch to the master branch triggers a new build.

FAQ

What Node.js version is required?

The project requires at least Node v12, but Node v14 LTS is the recommended version. A .nvmrc file is included, so you can run nvm use to automatically switch if you have nvm installed.

Can I use npm instead of yarn?

The README states that the project heavily favors Yarn over npm. While npm install might work, the documented commands and workflow all use Yarn, so it's safer to stick with Yarn.

Are there any custom images or assets included?

The logo and avatar are custom-made by KojiroArt, a friend of the author. They are not part of a stock icon set, so if you reuse them in your own deployed portfolio, consider replacing them with your own branding.

Does the template include a blog?

Not yet. The site currently uses dev.to links for articles. The author explicitly mentions planning to add a native blog in the future, but for now external links are used.