https://github.com/codewithmoses/blacklens-website
Welcome to the BlackLens Photography portfolio! This website is a single-page HTML portfolio built using Tailwind CSS for styling and Cofic for additional style management. The focus of this portfolio is to showcase the photographer’s best work with a clean and modern design, emphasizing visual storytelling through high-quality imagery.
https://github.com/codewithmoses/blacklens-website
html-tailwind-template tailwindcss
Last synced: 3 months ago
JSON representation
Welcome to the BlackLens Photography portfolio! This website is a single-page HTML portfolio built using Tailwind CSS for styling and Cofic for additional style management. The focus of this portfolio is to showcase the photographer’s best work with a clean and modern design, emphasizing visual storytelling through high-quality imagery.
- Host: GitHub
- URL: https://github.com/codewithmoses/blacklens-website
- Owner: codewithmoses
- License: mit
- Created: 2024-09-14T11:39:36.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2024-09-14T12:11:32.000Z (8 months ago)
- Last Synced: 2025-01-13T05:44:03.621Z (4 months ago)
- Topics: html-tailwind-template, tailwindcss
- Language: HTML
- Homepage: https://codewithmoses.github.io/BlackLens-Website/
- Size: 32.2 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 📸 BlackLens Photography - README
## Overview
Welcome to the **BlackLens Photography** portfolio! This website is a **single-page HTML portfolio** built using **Tailwind CSS** for styling and **Cofic** for additional style management. The focus of this portfolio is to showcase the photographer’s best work with a clean and modern design, emphasizing visual storytelling through high-quality imagery.
The site includes:
- Hero Section with captivating imagery
- Service Overview (Wedding, Portrait, Commercial photography)
- Portfolio grid with featured images
- Client testimonials and contact information
---
## 💻 How to Set Up the Project
1. **Download the Repository**:
Clone or download the repository to your local machine:
```bash
git clone https://github.com/YourRepo/BlackLensPhotography.git
```
2. **File Structure**:
- **index.html**: The main single-page HTML file for the portfolio.
- **/assets**: Contains all the images, including portfolio images and brand logos.
- **/css**: A folder where Tailwind directives are stored if needed for custom CSS.
3. **Installation**:
Tailwind CSS and Cofic are included via CDN, so you do not need any additional npm installation. Simply open the `index.html` file in your browser to view the site.
4. **Tailwind CSS and Cofic Setup**:
- **Tailwind CSS** is linked via CDN for styling:
```html
```
- **Cofic** is included for extra style management:
```html
```
---
## 🖼️ Key Website Sections
### **Hero Section**:
This section is designed to make a strong visual impact with high-quality images and a bold headline:
```html
Capturing Timeless Moments
One Frame at a Time
```
### **Portfolio Grid**:
A dynamic grid showcasing the photographer's best work across different categories:
```html
```
### **Testimonials**:
Featuring client reviews to build trust and credibility:
```html
What Our Clients Say
"Ethan's ability to capture raw emotions is unmatched. Highly recommend!"
- Sarah Jones
```
---
## 🎨 Tailwind CSS Styling Guide
### **Fonts & Colors**:
- **Primary Fonts**: The portfolio uses **serif** and **sans-serif** combinations for readability and elegance:
```css
font-family: 'Inter', sans-serif;
```
- **Colors**: The design relies on a **monochromatic black and white palette** to bring focus to the images:
```css
bg-black, text-white, hover:text-gray-300
```
### **Button Styling**:
Buttons across the site use Tailwind classes for hover effects and transitions:
```html
```
---
## 🚀 Deployment Instructions
- **GitHub Pages**: Upload the HTML file to a GitHub repository and enable GitHub Pages from the settings.
- **Netlify** or **Vercel**: Drag and drop the project folder for automatic deployment.
---
## 🔗 Contact
For any questions or collaboration requests, feel free to contact:
- **Email**: [email protected]
- **Phone**: +1 123-456-7890
---