Mhl5.vercel.app
Next js 16 Portfolio with custom shadcn registry
Overview
Next.js 16 Portfolio is a cutting-edge, open-source portfolio website crafted using Next.js 16, React 19, and TypeScript. This modern platform is designed to showcase personal projects and skills through a clean and engaging interface. The use of reusable components and hooks makes it an ideal choice for developers looking to create a professional online presence with minimal effort.
Additionally, the implementation of a custom registry system for components adds flexibility and ease of management. With inspirations drawn from various resources, this portfolio showcases not just work but a testament to the power of modern web development frameworks.
Features
- Modern Tech Stack: Built on Next.js 16, React 19, and TypeScript for a robust and scalable application.
- Reusable Components: Access to a library of reusable components that streamline the development process and enhance consistency.
- Custom Registry System: Install hooks and utilities via a custom registry, promoting easier management of components.
- Open Source: As an open-source project, it encourages collaboration and contributions from developers globally.
- Inspiration from Experts: Developed with guidance from recognized tutorials and frameworks, ensuring best practices are followed.
- Optimized for Deployment: Hosted on Vercel, ensuring fast, reliable performance for all visitors.
- Next.js
Next.js is a React-based web framework that enables server-side rendering, static site generation, and other powerful features for building modern web applications.
- React
React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components
- Tailwind
Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.
- cmdk
cmdk is a fast, composable command menu component for React. It provides the foundation for building command palettes, search interfaces, and keyboard-navigable menus similar to those found in applications like VS Code, Linear, and Raycast.
- Shadcn UI
Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
- Portfolio
A portfolio website is a type of website that showcases an individual's or a company's work, skills, and accomplishments. It typically includes a gallery of images or videos, case studies, and client testimonials to provide potential clients or employers with a comprehensive overview of their experience and expertise.
- Eslint
ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.
- MDX
MDX is a format that allows developers to write JSX within Markdown documents, combining the power of React with the simplicity of Markdown. This allows for the creation of dynamic and interactive content that can be easily shared and consumed across different platforms and devices.
- Registry
This component can be installed using the shadcn CLI component registry instead of using NPM. Running your own registry allows you to distribute your custom components, hooks, pages, and other files to any React project.
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.
- Zod
Zod is a TypeScript-first schema declaration and validation library. It allows you to define schemas that can validate data at runtime while providing excellent TypeScript inference, making it perfect for API validation, form validation, and type-safe data handling.