cc-nextfolio Tailwind Templates

Cc Nextfolio

A sleek and customizable website template tailored for modern portfolios. Technologies: Next.js, React, TypeScript, Content Collections, Zustand, Tailwind CSS, Vercel, & more.

#content-collections #nextjs #react #typescript #zustand
Demo Download

CC NextFolio

ccnextfolio

License: MIT GitHub repo size GitHub last commit

Overview

CC Nextfolio is a customizable portfolio website built with modern web technologies like Next.js, Tailwind CSS, and Content Collections. It serves as a sleek and functional starting point for creating your personal or professional portfolio. Easily migrate and adapt it to showcase your work or achievements.

Features

  • Modern Design: Built with Tailwind CSS for fast, responsive, and customizable styles.
  • Dynamic Content Management: Powered by Content Collections for seamless content handling.
  • Dark Mode: Integrated theme switching with next-themes.
  • Accessibility Features: Uses @radix-ui components for dialog, tooltip, and hidden content.
  • Animations: Smooth transitions and animations with framer-motion and Tailwind's animation utilities.
  • Interactive Carousel: Powered by embla-carousel with autoplay functionality.

Technologies

  • Framework: Next.js
  • Styling: Tailwind CSS
  • Animations: Framer Motion
  • Content Management: Content Collections
  • State Management: Zustand

Getting Started

Prerequisites

Ensure you have the following installed: Node.js (v18 or later)

Installation

Clone the repository:

  1. Clone the repository:
git clone https://github.com/egarrisxn/cc-nextfolio.git
cd cc-nextfolio
  1. Install dependencies:
pnpm install
  1. Start the development server:`:
pnpm dev
  1. Open your browser and navigate to http://localhost:3000.

Deployment

  1. Build the project
pnpm build
  1. Deploy to a platform like Vercel, Netlify, or any static hosting provider.

Scripts

pnpm dev: Start the development server with live reloading.

pnpm build: Build the site for production.

pnpm start: Serve the production build.

pnpm lint: Run code linting checks.

pnpm format: Format the codebase with Biome.

pnpm content-collections: Run Content Collections CLI for managing content.

Customization

  1. Update Content: Modify content files managed by Content Collections for your portfolio content.
  2. Theme Customization: Edit tailwind.config.js to adjust styles or extend the theme.
  3. Component Adjustments: Modify React components in the src/components directory to fit your design.

License

This project is licensed under the MIT license.

Questions

Feel free to reach out to me via GitHub, or email at egarrisxn@gmail.com.

Top categories

tailwind daisyui resume portfolio email blog dashboard landing-page admin ecommerce
Loading Svelte Themes