# magicuidesign/portfolio

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/magicuidesign-portfolio).**

1,399 stars · 385 forks · TypeScript · MIT

## Links

- GitHub: https://github.com/magicuidesign/portfolio
- Homepage: https://portfolio-magicui.vercel.app
- awesome-repositories: https://awesome-repositories.com/repository/magicuidesign-portfolio.md

## Description

Portfolio is a developer portfolio website and personal blog publishing template built with Next.js, Tailwind CSS, and React. It provides a static-ready framework designed to showcase professional projects and articles through a minimalist interface with responsive layout adaptation.

Site content, metadata, and navigation links are managed through a single centralised configuration file to simplify initial project setup and ongoing updates. The interface incorporates a component-driven UI library alongside declarative motion animations that apply spring physics and keyframe transitions to interactive elements during navigation. Additional capabilities include file-based routing and server-side page rendering.

## Tags

### Software Engineering & Architecture

- [Single-Configuration Portfolios](https://awesome-repositories.com/f/software-engineering-architecture/portfolio-showcases/one-page-portfolio-templates/single-configuration-portfolios.md) — Creates a professional developer portfolio site to showcase projects and skills, configured easily through a single file.

### Part of an Awesome List

- [Portfolio Templates](https://awesome-repositories.com/f/awesome-lists/devtools/portfolio-templates.md) — Provides a minimalist portfolio template built with Next.js, Tailwind CSS, and animated component libraries for showcasing developer projects and blogs.

### Content Management & Publishing

- [Site Config Theme Integrations](https://awesome-repositories.com/f/content-management-publishing/blog-post-rendering/static-site-themes/hexo-themes/site-config-theme-integrations.md) — Stores entire site metadata, text content, and navigation links within a single centralized configuration file.
- [File-Based Routing](https://awesome-repositories.com/f/content-management-publishing/file-based-routing.md) — Routes pages automatically by mapping physical file paths in the project directory to corresponding web URL endpoints.
- [MDX Blog Publishing](https://awesome-repositories.com/f/content-management-publishing/blog-publishing-tools/mdx-blog-publishing.md) — Embeds an integrated blogging system to publish articles and share written content directly alongside core portfolio projects. ([source](https://github.com/magicuidesign/portfolio#readme))
- [Personal Blog Frameworks](https://awesome-repositories.com/f/content-management-publishing/personal-blog-frameworks.md) — Publishes written articles and blog posts directly on your personal website alongside your core project work.

### DevOps & Infrastructure

- [Single-File Site Configurations](https://awesome-repositories.com/f/devops-infrastructure/configuration-management/server-and-site-configuration/site-configuration-management/single-file-site-configurations.md) — Controls entire site content and settings through one centralized configuration file to accelerate initial project setup and management. ([source](https://github.com/magicuidesign/portfolio#readme))

### User Interface & Experience

- [Component-Based UI Libraries](https://awesome-repositories.com/f/user-interface-experience/component-libraries/component-based-ui-libraries.md) — Assembles complex user interfaces from a collection of pre-built, accessible, and customizable visual component building blocks.
- [Component Showcases](https://awesome-repositories.com/f/user-interface-experience/component-showcases.md) — Renders a mobile-friendly web layout that applies fluid motion effects to interactive components for enhanced user engagement.
- [CSS Utility Classes](https://awesome-repositories.com/f/user-interface-experience/css-utility-classes.md) — Applies modular CSS utility classes directly within markup to build custom user interfaces without writing separate stylesheet files.
- [Declarative Motion Frameworks](https://awesome-repositories.com/f/user-interface-experience/declarative-motion-frameworks.md) — Applies spring physics and keyframe transitions to elements using declarative wrapper components for fluid visual effects.
- [Smooth Animation Interfaces](https://awesome-repositories.com/f/user-interface-experience/ui-animations/smooth-animation-interfaces.md) — Applies fluid motion effects to interactive components to create smooth visual transitions during user navigation. ([source](https://github.com/magicuidesign/portfolio#readme))

### Web Development

- [Personal Website Frameworks](https://awesome-repositories.com/f/web-development/backend-development/web-frameworks/rendering-and-layout-architectures/server-side-rendering-frameworks/framework-integrations/next-js/personal-website-frameworks.md) — Provides a static-ready site template that organizes developer portfolios and integrated blog posts through a single centralized configuration file.
- [Server-Side Rendering](https://awesome-repositories.com/f/web-development/server-side-rendering.md) — Renders React components on the server for every incoming request to deliver fresh content and fast initial loads.
- [Next.js](https://awesome-repositories.com/f/web-development/backend-development/web-frameworks/rendering-and-layout-architectures/server-side-rendering-frameworks/framework-integrations/next-js.md) — Builds modern web interfaces with Next.js and Tailwind CSS, featuring smooth animations and responsive layouts.
- [Responsive Layout Adaptation](https://awesome-repositories.com/f/web-development/responsive-layout-adaptation.md) — Renders a responsive layout that automatically scales to fit different device screen sizes and orientations without breaking. ([source](https://github.com/magicuidesign/portfolio#readme))