Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/danielkhakbaz/software-agency-website
a Clone of a software-agency website named margelo.
https://github.com/danielkhakbaz/software-agency-website
embla-carousel eslint git husky nextjs prettier tailwindcss typescript
Last synced: 3 days ago
JSON representation
a Clone of a software-agency website named margelo.
- Host: GitHub
- URL: https://github.com/danielkhakbaz/software-agency-website
- Owner: Danielkhakbaz
- Created: 2022-05-25T11:21:07.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2024-11-02T13:50:39.000Z (about 2 months ago)
- Last Synced: 2024-11-05T13:12:50.523Z (about 2 months ago)
- Topics: embla-carousel, eslint, git, husky, nextjs, prettier, tailwindcss, typescript
- Language: TypeScript
- Homepage: https://software-agency-website.vercel.app
- Size: 977 KB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Software Agency Website
A professional website for showcasing services, portfolio, and expertise of a software agency. Built with [Next.js](https://nextjs.org/), this project leverages the latest web technologies to create a fast, interactive, and user-friendly experience for potential clients.
## Project Overview
This software agency website highlights key services, project case studies, and the team behind the agency's success. With a responsive and engaging design, it’s optimized for performance and built to provide users with a seamless navigation experience.
## Table of Contents
- [Features](#features)
- [Technologies Used](#technologies-used)
- [Installation](#installation)
- [Development Scripts](#development-scripts)
- [Folder Structure](#folder-structure)
## Features
- **Responsive Design**: Fully optimized layout for desktop, tablet, and mobile devices.
- **Dynamic Content**: Smooth transitions and animations to enhance user experience.
- **Carousel Integration**: Showcases client testimonials and featured projects with an interactive carousel.
- **Performance Analytics**: Vercel analytics for monitoring website performance.
- **Code Quality Tools**: ESLint and Prettier ensure consistent coding standards and formatting.
## Technologies Used
- **[Next.js](https://nextjs.org/)** - React framework for building SSR and static websites.
- **[React](https://reactjs.org/)** - JavaScript library for building interactive UIs.
- **[Tailwind CSS](https://tailwindcss.com/)** - CSS framework for utility-first styling.
- **[Embla Carousel](https://www.embla-carousel.com/)** - Lightweight carousel library with custom autoplay and styling.
- **[Vercel Analytics](https://vercel.com/docs/concepts/analytics)** - Performance tracking for web apps.
- **[TypeScript](https://www.typescriptlang.org/)** - Typed JavaScript for better development and maintenance.
## Folder Structure
Here's an overview of the project structure:
```plaintext
software-agency-website/
├── public/ # Public assets like images, icons, etc.
│
├── app/ # Main source directory for app components and pages
│
├── components/ # Reusable UI components for sections and features
│
├── constants/ # All the constants getting used through the app
│
├── hooks/ # Custom hooks written for the app
│
│── layout/ # The layout components for the pages
│
│── providers/ # All the providers (eg. Context, ...)
│
│── styles/ # Styles folder
│
│── theme/ # Custom theme for the project
│
│── utils/ # Utility functions
│
├── .eslintrc.json # ESLint configuration for code quality
├── .prettierrc # Prettier configuration for code formatting
├── next.config.js # Next.js configuration for app settings
├── package.json # Project metadata, scripts, and dependencies
└── README.md # Project documentation
```
## Installation
To set up this project locally, follow these steps:
1. **Clone the repository**:
```bash
git clone https://github.com/Danielkhakbaz/Software-Agency-Website
cd danielo-portfolio
2. **Install dependencies**:
```tsx
yarn
3. **Run the development server**:
```tsx
yarn dev
4. **Open http://localhost:3000 in your browser to see the project**.
## Development Scripts
Here are some helpful scripts to assist in the development and maintenance of this project:
```dev```: Runs the app in development mode.
```build```: Compiles the app for production.
```start```: Starts the production server.
```lint```: Lints and fixes files using ESLint.
```fix```: Formats files using Prettier.
```check-prettier```: Checks the code format without making changes.