Caroline Souza Design

This is the repository for Caroline Souza's portfolio, developed by Konbini Code (Fernando Hiroshi). The website was created to showcase Caroline's design work, offering an elegant and intuitive interface. Using best development practices and modern technologies, the project aims to provide a high-quality user experience.

Notice: This project is licensed under the MIT License. Any use or copying of this code without proper authorization is prohibited.

To get started, clone the repository and run npm install && npm run dev:

git clone https://github.com/konbinicode/caroline-souza-design.git
npm install
npm run dev

Table of Contents

1. Technologies Used
2. Additional Features
3. Code Formatting
4. Project Structure
5. Responsiveness
6. Deploy

Technologies Used

Here are the main technologies and libraries used in the project:

Front-end

• Next.js: React framework for server-side rendering, performance optimization, and easy scalability.
• Tailwind CSS: Utility-first CSS framework for quick and efficient styling.
• TypeScript: JavaScript superset that adds static typing, improving code quality and maintainability.
• Framer Motion: Library for animations and smooth transitions in React.
• Lucide React and React Icons: Icon libraries for React, used to enhance the user interface with scalable icons.
• Embla Carousel: Library for creating interactive carousels with autoplay support and customization.
• clsx: Utility to efficiently conditionally concatenate CSS classes.
• Tailwind Merge: Library to merge Tailwind CSS classes and avoid conflicts.
• TailwindCSS Animate: Tailwind plugin for adding simple, configurable CSS animations.

Back-end

• Cosmic JS: Headless CMS that provides an API for managing dynamic content, allowing the client to edit text, images, and other information on the website.

Additional Dependencies

• Radix UI: A set of accessible, reusable components. Used to create dropdown menus and other complex UI elements.
  • @radix-ui/react-dropdown-menu: Component for creating accessible and customizable dropdown menus.
  • @radix-ui/react-icons: Icon library for Radix UI.
  • @radix-ui/react-slot: Component for efficiently managing slots in components.
• @tabler/icons-react: A set of icons for React, used in the project to visually represent actions and items in the UI.
• class-variance-authority: Library to facilitate the use of conditional classes in Tailwind, promoting a more flexible and scalable structure.
• react-router-hash-link: Library for navigation with hash anchor links, making it easy to navigate between sections on the page.

Additional Features

In addition to the core technologies, we also use:

• Cosmic JS CMS for backend content management, allowing the client to edit photos, text, and other information directly via the admin panel.

Code Formatting

To ensure well-organized and standardized code, the following tools were used:

• Prettier for code formatting.
• ESLint for linting and code quality improvements.
• Tailwind Sorter for organizing CSS classes in the code.

Project Structure

Below is the basic folder structure of the project:

src
├── app
│   ├── page.tsx
│   ├── layout.tsx
│   ├── favicon.ico
│   └── not-found.tsx
│   ├── branding
│   ├── fotografia
│   ├── posters
│   ├── social
│   └── uxui (in development)
├── components
│   ├── grid
│   ├── images
│   ├── pages
│   ├── ui
│   └── view
│       ├── header
│       ├── hero
│       └── footer
├── lib
├── utils
│   └── actions
│       └── get-datas.ts
└── types

Responsiveness

The project is fully responsive and works perfectly on:

• Desktop
• Tablet
• Mobile

Deploy

The project is deployed and can be accessed live at the following link:

Live Demo