Skip to content

Commit 59c56d1

Browse files
artgolwebdevartgolwebdev
committed
refactor: extract constants and Logo component, make README minimalistic
1 parent 7f8e2c7 commit 59c56d1

4 files changed

Lines changed: 80 additions & 108 deletions

File tree

‎README.md‎

Lines changed: 16 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,91 +1,34 @@
11

2-
# 🚀 Futuristic Landing Page Design
2+
# Futuristic Landing Page
33

4-
A modern, responsive DJ landing page built with React, TypeScript, and Framer Motion. Features smooth scroll animations, section snapping, and a futuristic neon aesthetic.
4+
A modern DJ landing page with smooth scroll animations and futuristic neon aesthetic.
55

6-
## ✨ Features
6+
## Features
77

8-
- **Smooth Scroll Animations** - Powered by locomotive-scroll
9-
- **Section Snapping** - Automatic snap to sections when scrolling
10-
- **Responsive Design** - Optimized for all devices
11-
- **Modern UI Components** - Built with Radix UI and Tailwind CSS
12-
- **Interactive Navigation** - Bottom navigation with progress indicator
13-
- **Keyboard Navigation** - Arrow keys, spacebar, home/end support
14-
- **Performance Optimized** - Built with Vite for fast development
8+
- Smooth scroll with section snapping
9+
- Responsive design for all devices
10+
- Interactive navigation
11+
- Keyboard navigation support
1512

16-
## 🎯 Sections
13+
## Tech Stack
1714

18-
1. **Hero Section** - Bold titles with animated background
19-
2. **Story Sections** - BOLD, ENERGY, MOMENT with pin effects
20-
3. **Services Section** - What I Bring showcase
21-
4. **Testimonials Section** - Client testimonials
22-
5. **Contact Section** - Contact form and information
15+
- React 18 + TypeScript
16+
- Tailwind CSS + Framer Motion
17+
- Locomotive Scroll
18+
- Vite build tool
2319

24-
## 🛠️ Tech Stack
20+
## Quick Start
2521

26-
- **Frontend**: React 18 + TypeScript
27-
- **Styling**: Tailwind CSS
28-
- **Animations**: Framer Motion
29-
- **Smooth Scroll**: Locomotive Scroll
30-
- **UI Components**: Radix UI
31-
- **Build Tool**: Vite
32-
- **Deployment**: GitHub Pages
33-
34-
## 🚀 Getting Started
35-
36-
### Prerequisites
37-
- Node.js 18+
38-
- npm or yarn
39-
40-
### Installation
4122
```bash
42-
# Clone the repository
43-
git clone https://github.com/artgolwebdev/LP03.git
44-
45-
# Navigate to project directory
46-
cd LP03
47-
48-
# Install dependencies
4923
npm install
50-
51-
# Start development server
5224
npm run dev
53-
54-
# Build for production
55-
npm run build
5625
```
5726

58-
## 📱 Responsive Design
59-
60-
- **Desktop**: Full navigation with smooth scroll
61-
- **Mobile**: Bottom navigation bar with touch optimization
62-
- **Tablet**: Responsive layout with touch gestures
63-
64-
## 🎨 Customization
65-
66-
The project uses CSS custom properties and Tailwind classes for easy customization:
67-
68-
- **Primary Color**: `#00FF85` (Neon Green)
69-
- **Background**: Black with glassmorphism effects
70-
- **Typography**: Space Grotesk + Inter fonts
71-
72-
## 🚀 Deployment
73-
74-
This project automatically deploys to GitHub Pages using GitHub Actions:
75-
76-
1. Push to `main` branch
77-
2. GitHub Actions builds the project
78-
3. Automatically deploys to `https://artgolwebdev.github.io/LP03`
79-
80-
## 📝 License
81-
82-
This project is open source and available under the [MIT License](LICENSE).
83-
84-
## 🤝 Contributing
27+
## Live Demo
8528

86-
Contributions are welcome! Please feel free to submit a Pull Request.
29+
[View Site](https://artgolwebdev.github.io/LP03)
8730

8831
---
8932

90-
**Built with ❤️ using modern web technologies**
33+
Built with modern web technologies
9134

‎src/App.tsx‎

Lines changed: 9 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ import { SectionDivider } from "./components/SectionDivider";
1111
import { Toaster } from "./components/ui/sonner";
1212
import { SmoothScrollProvider } from "./components/SmoothScrollContext";
1313
import { SectionNavigation } from "./components/SectionNavigation";
14+
import { Logo } from "./components/Logo";
15+
import { storyData, sectionNames, sectionDividers } from "./constants";
1416

1517
export default function App() {
1618
const [isLoading, setIsLoading] = useState(true);
@@ -42,23 +44,7 @@ export default function App() {
4244
};
4345
}, [isLoading, isIntro]);
4446

45-
const storyData = [
46-
{
47-
title: "BOLD.",
48-
backgroundImage: "https://images.unsplash.com/photo-1676021944161-89effebfd0ca?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxhYnN0cmFjdCUyMGdlb21ldHJpYyUyMG5lb258ZW58MXx8fHwxNzU2NTg2MjUwfDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral"
49-
},
50-
{
51-
title: "ENERGY.",
52-
backgroundImage: "https://images.unsplash.com/photo-1558258021-971dd2148be5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxjb25jZXJ0JTIwY3Jvd2QlMjBlbmVyZ3l8ZW58MXx8fHwxNzU2NTg2MjUxfDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral"
53-
},
54-
{
55-
title: "MOMENT.",
56-
backgroundImage: "https://images.unsplash.com/photo-1604025707953-41752f5793ab?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxmdXR1cmlzdGljJTIwcHVycGxlJTIwbGlnaHRzfGVufDF8fHx8MTc1NjU4NjI1MXww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral"
57-
}
58-
];
5947

60-
// Section names for navigation
61-
const sectionNames = ["Hero", "Bold", "Energy", "Moment", "Services", "Testimonials", "Contact"];
6248

6349
return (
6450
<div className="relative bg-black text-white overflow-x-hidden">
@@ -89,19 +75,7 @@ export default function App() {
8975
transition={{ duration: 0.8 }}
9076
className="fixed top-4 left-4 z-50"
9177
>
92-
<motion.svg
93-
width="50"
94-
height="50"
95-
viewBox="0 0 200 200"
96-
fill="none"
97-
xmlns="http://www.w3.org/2000/svg"
98-
className="drop-shadow-lg"
99-
>
100-
<circle cx="100" cy="100" r="80" stroke="#00FF85" strokeWidth="3" fill="none" />
101-
<circle cx="100" cy="100" r="50" stroke="#FFFFFF" strokeWidth="2" fill="none" />
102-
<circle cx="100" cy="100" r="8" fill="#00FF85" />
103-
<line x1="100" y1="20" x2="100" y2="40" stroke="#FFFFFF" strokeWidth="2" />
104-
</motion.svg>
78+
<Logo />
10579
</motion.div>
10680
)}
10781
</AnimatePresence>
@@ -131,26 +105,26 @@ export default function App() {
131105

132106
{/* Section Divider */}
133107
<SectionDivider
134-
imageUrl="https://images.unsplash.com/photo-1676021944161-89effebfd0ca?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxhYnN0cmFjdCUyMG5lb24lMjBnZW9tZXRyaWMlMjBwYXR0ZXJufGVufDF8fHx8MTc1NjU4NzMyOXww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral"
135-
alt="Abstract neon patterns"
108+
imageUrl={sectionDividers[0].imageUrl}
109+
alt={sectionDividers[0].alt}
136110
/>
137111

138112
{/* Services Section */}
139113
<ServicesSection />
140114

141115
{/* Section Divider */}
142116
<SectionDivider
143-
imageUrl="https://images.unsplash.com/photo-1702308632277-ab0ccf044d96?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHx2aW55bCUyMHJlY29yZCUyMGFic3RyYWN0JTIwbXVzaWN8ZW58MXx8fHwxNzU2NTg3MzMyfDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral"
144-
alt="Vinyl records and music equipment"
117+
imageUrl={sectionDividers[1].imageUrl}
118+
alt={sectionDividers[1].alt}
145119
/>
146120

147121
{/* Testimonials Section */}
148122
<TestimonialsSection />
149123

150124
{/* Section Divider */}
151125
<SectionDivider
152-
imageUrl="https://images.unsplash.com/photo-1721623777765-1381ba32859c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxuZW9uJTIwbGlnaHRzJTIwY29uY2VydCUyMHN0YWdlfGVufDF8fHx8MTc1NjU4NzMzN3ww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral"
153-
alt="Neon concert stage atmosphere"
126+
imageUrl={sectionDividers[2].imageUrl}
127+
alt={sectionDividers[2].alt}
154128
/>
155129

156130
{/* Contact Section */}

‎src/components/Logo.tsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import React from "react";
2+
import { motion } from "motion/react";
3+
4+
interface LogoProps {
5+
className?: string;
6+
}
7+
8+
export function Logo({ className = "" }: LogoProps) {
9+
return (
10+
<motion.svg
11+
width="50"
12+
height="50"
13+
viewBox="0 0 200 200"
14+
fill="none"
15+
xmlns="http://www.w3.org/2000/svg"
16+
className={`drop-shadow-lg ${className}`}
17+
>
18+
<circle cx="100" cy="100" r="80" stroke="#00FF85" strokeWidth="3" fill="none" />
19+
<circle cx="100" cy="100" r="50" stroke="#FFFFFF" strokeWidth="2" fill="none" />
20+
<circle cx="100" cy="100" r="8" fill="#00FF85" />
21+
<line x1="100" y1="20" x2="100" y2="40" stroke="#FFFFFF" strokeWidth="2" />
22+
</motion.svg>
23+
);
24+
}

‎src/constants/index.ts‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
export const storyData = [
2+
{
3+
title: "BOLD.",
4+
backgroundImage: "https://images.unsplash.com/photo-1676021944161-89effebfd0ca?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxhYnN0cmFjdCUyMGdlb21ldHJpYyUyMG5lb258ZW58MXx8fHwxNzU2NTg2MjUwfDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral"
5+
},
6+
{
7+
title: "ENERGY.",
8+
backgroundImage: "https://images.unsplash.com/photo-1558258021-971dd2148be5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxjb25jZXJ0JTIwY3Jvd2QlMjBlbmVyZ3l8ZW58MXx8fHwxNzU2NTg2MjUxfDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral"
9+
},
10+
{
11+
title: "MOMENT.",
12+
backgroundImage: "https://images.unsplash.com/photo-1604025707953-41752f5793ab?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxmdXR1cmlzdGljJTIwcHVycGxlJTIwbGlnaHRzfGVufDF8fHx8MTc1NjU4NjI1MXww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral"
13+
}
14+
];
15+
16+
export const sectionNames = ["Hero", "Bold", "Energy", "Moment", "Services", "Testimonials", "Contact"];
17+
18+
export const sectionDividers = [
19+
{
20+
imageUrl: "https://images.unsplash.com/photo-1676021944161-89effebfd0ca?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxhYnN0cmFjdCUyMG5lb24lMjBnZW9tZXRyaWMlMjBwYXR0ZXJufGVufDF8fHx8MTc1NjU4NzMyOXww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
21+
alt: "Abstract neon patterns"
22+
},
23+
{
24+
imageUrl: "https://images.unsplash.com/photo-1702308632277-ab0ccf044d96?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHx2aW55bCUyMHJlY29yZCUyMGFic3RyYWN0JTIwbXVzaWN8ZW58MXx8fHwxNzU2NTg3MzMyfDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
25+
alt: "Vinyl records and music equipment"
26+
},
27+
{
28+
imageUrl: "https://images.unsplash.com/photo-1721623777765-1381ba32859c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxuZW9uJTIwbGlnaHRzJTIwY29uY2VydCUyMHN0YWdlfGVufDF8fHx8MTc1NjU4NzMzN3ww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
29+
alt: "Neon concert stage atmosphere"
30+
}
31+
];

0 commit comments

Comments
 (0)