Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/owengretzinger/jazz-musician-website
Personal website for a professional jazz musician
https://github.com/owengretzinger/jazz-musician-website
decap-cms netlify react tailwindcss typescript website
Last synced: 9 days ago
JSON representation
Personal website for a professional jazz musician
- Host: GitHub
- URL: https://github.com/owengretzinger/jazz-musician-website
- Owner: owengretzinger
- License: mit
- Created: 2023-06-28T22:12:27.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-09T14:18:33.000Z (14 days ago)
- Last Synced: 2024-12-09T15:27:00.156Z (14 days ago)
- Topics: decap-cms, netlify, react, tailwindcss, typescript, website
- Language: TypeScript
- Homepage: https://mattausgretzinger.com
- Size: 77.7 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Jazz Musician Website
## Overview
This is a website (designed by myself) that showcases a musician's portfolio, including information about upcoming and past performances, videos, and contact information.
The site is managed through a headless CMS interface and leverages a static site generation approach using Next.js.
### Main Features
CMS: The use of a Git-based headless CMS allows the musician to manage shows, videos, and website content through a dashboard. The solution is 100% free as it uses an open source CMS that interacts directly with the GitHub repository. When changes are made, a commit is automatically made in GitHub which triggers a new deployment.
Design: I created the design myself from scratch using Figma. I used black & yellow colors with a cursive secondary font to make the site feel elegant, and to match the musician's style as a jazz saxophonist. All images have a filter applied to them (grain, saturation, tint) to create consistency across the site.
Form Handling: Contact form for users to reach out to the musician. When a form is filled out, an email gets sent to the musician.
Responsive Design: Mobile-first responsive user experience.
## Technologies Used
- **Next.js** (React Framework)
- **Decap CMS** (Git-based headless CMS)
- **Netlify** (Hosting, Contact Form)
- **TypeScript**
- **Tailwind CSS** (Styling)
- **YAML** (Content management in CMS)
## Project Structure
```
- content/
- pages/ # YAML files for managing static content like home, about, shows, videos
- shows/ # Markdown files with metadata for each show (title, date, venue, description)
- public/ # Static assets like images, videos, and icons
- src/
- app/
- (site)/ # Main pages (about, contact, shows, videos) and their components
- components/ # Reusable components like buttons, forms, cards
- lib/ # Utility functions for fetching and processing content
- sections/ # Section-based components for specific page layouts
- previews/ # Components for previewing content in CMS
```
## Setup Instructions
### Prerequisites
- Node.js (v16.x or higher)
- npm or yarn (package manager)
### Installation
1. Clone the repository:
```bash
git clone https://github.com/owengretzinger/jazz-musician-website
cd jazz-musician-website
```
2. Install dependencies:
```bash
npm install
```
3. Start the development server:
```bash
npm run dev
```
The app will run at `http://localhost:3000`.
### Deployment
This project is optimized for deployment on Netlify. After pushing your code to GitHub, link the repository to Netlify, and it will handle the deployment automatically. There are some additional steps to set up contact form integration.
## CMS Configuration
The content is managed via the Decap CMS dashboard, where you can easily add or modify:
- Pages (about, contact, etc.)
- Shows
- Videos
- Contact information
CMS pages are defined in the `content/pages` directory in YAML format.
## How to Contribute
1. Fork the repository.
2. Create a new branch for your feature or bug fix.
3. Make your changes and commit them.
4. Push your branch and open a Pull Request.
## License
Distributed under the MIT License. See `LICENSE.txt` for more information.