cutesite is a highly performant, aesthetically refined digital portfolio and content platform engineered using the latest Next.js App Router architecture. Designed for both developer efficiency and user experience, this repository serves as a professional hub for showcasing technical projects, managing a content-rich blog via Markdown files, and presenting visual galleries. The application adheres to modern software engineering standards, utilizing TypeScript across the entire stack to ensure type safety, robust maintainability, and enhanced developer tooling.
The front-end styling is a hybrid system leveraging the utility-first approach of Tailwind CSS augmented by the expressive power of styled components via @emotion/react and @emotion/styled. This combination allows for rapid prototyping alongside deep customization of UI elements. Sophisticated interactions and a highly polished user experience are delivered through integration with Framer Motion, enabling subtle yet professional element transitions and animations.
Data management and scalability are addressed through the integration of Supabase, providing a robust, enterprise-grade foundation for potential backend services, authentication, and database interaction. By utilizing gray-matter for parsing front-matter in the blog section, cutesite offers an intuitive, file-based content management system (CMS) that remains decoupled from complex external services, ensuring speed and deployment simplicity.
- Full-Stack Next.js Architecture: Built on the latest stable version of Next.js using the App Router for optimal routing, caching, and server component performance.
- Markdown-Driven Blogging: Integrated essay/blog system (
app/blog/[slug]) powered bygray-matterfor metadata extraction andreact-markdownfor secure content rendering. - Advanced State & UI: Utilizes a component-based strategy (
ProjectCard.tsx,GalleryCard.tsx) with sophisticated styling managed by@emotionand utility styling via Tailwind CSS. - Fluid Micro-Interactions: Smooth and professional transitions, layout animations, and visual effects achieved through the comprehensive
motionlibrary (Framer Motion). - Type Safety & Reliability: Entire codebase written in TypeScript, ensuring high stability, predictability, and reduced runtime errors.
- Scalable Component Libraries: Includes production-ready component libraries like
@mui/materialandreact-pro-sidebarfor quick development of complex navigation and UI elements. - Modular Iconography: Leverages
lucide-reactfor a lightweight, highly customizable set of vector icons, ensuring visual consistency across all components. - Supabase Ready: Pre-configured scaffolding for integrating Supabase for database interactions, user authentication, and real-time features.
This project requires Node.js (v18+) and npm installed globally.
1. Clone the repository:
git clone https://github.com/your-username/cutesite.gitcd cutesite2. Install dependencies:
npm install3. Configure Environment Variables:
Create a .env.local file in the root directory and populate it with necessary configurations. While the app is functional locally without a database, a typical setup requires:
# Example .env.local content
NEXT_PUBLIC_SUPABASE_URL=YOUR_SUPABASE_URL
NEXT_PUBLIC_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY
4. Start the development server:
npm run devThe application will now be running and accessible at http://localhost:3000.
Contributions are welcome! If you find a bug, have a feature suggestion, or wish to improve the documentation, please follow these steps:
- Fork the repository.
- Create a new feature branch:
git checkout -b feature/amazing-new-feature
- Commit your changes: Ensure your commits adhere to standard conventional commit guidelines.
git commit -m 'feat: Add amazing new feature or fix' - Push the branch to your Fork:
git push origin feature/amazing-new-feature
- Open a Pull Request against the main branch of this repository. Ensure all CI checks (linting and type checks) pass before requesting a review.