-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
165 lines (144 loc) · 6.98 KB
/
index.html
File metadata and controls
165 lines (144 loc) · 6.98 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>David McInnis - Creative Director & Producer</title>
<!-- Meta Tags for Professional Sharing -->
<meta name="description" content="A multi-disciplinary producer and creative director specializing in turning ambitious ideas into polished, professional digital experiences.">
<meta property="og:title" content="David McInnis - Creative Director & Producer" />
<meta property="og:description" content="Building the bridge between vision and reality. Let's create something remarkable." />
<meta property="og:type" content="website" />
<!-- <meta property="og:image" content="https://your-site-url/preview-image.png" /> --> <!-- Optional: Add a preview image URL -->
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<style>
/* --- Google Fonts Import --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Lora:ital,wght@0;700;1,400&display=swap');
/* --- Global Styles & Refined Dark Theme --- */
:root {
--bg-color: #1c1c1c; /* Deep Charcoal */
--surface-color: #2a2a2a; /* Slightly Lighter Charcoal */
--text-color: #e4e4e4; /* Soft, readable off-white */
--heading-color: #ffffff; /* Pure white for high contrast */
--accent-color: #d4af37; /* Sophisticated Gold */
--accent-hover: #f7d055; /* Brighter Gold for hover */
--font-main: 'Inter', sans-serif;
--font-heading: 'Lora', 'Georgia', serif;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
font-family: var(--font-main);
margin: 0;
padding: 2rem;
line-height: 1.7;
font-size: 18px;
}
.container {
max-width: 800px;
margin: auto;
}
h1, h2 {
font-family: var(--font-heading);
color: var(--heading-color);
font-weight: 700;
}
h1 {
font-size: 3rem;
text-align: center;
margin-bottom: 1rem;
letter-spacing: 1px;
}
.tagline {
text-align: center;
font-size: 1.2rem;
font-style: italic;
font-family: var(--font-heading);
color: var(--accent-color);
margin-bottom: 4rem;
}
h2 {
font-size: 2.2rem;
margin-top: 4rem;
border-bottom: 1px solid rgba(212, 175, 55, 0.2);
padding-bottom: 0.75rem;
}
p { margin-bottom: 1.5rem; }
strong {
color: var(--accent-color);
font-weight: 600;
}
.contact-form { margin-top: 2rem; }
.contact-form input,
.contact-form textarea {
width: 100%;
padding: 0.85rem;
margin-bottom: 1rem;
border: 1px solid rgba(212, 175, 55, 0.3);
border-radius: 6px;
background-color: var(--bg-color);
color: var(--text-color);
font-family: var(--font-main);
font-size: 1rem;
box-sizing: border-box;
transition: all 0.3s ease;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
color: #777;
}
.contact-form input:focus,
.contact-form textarea:focus {
outline: none;
border-color: var(--accent-color);
box-shadow: 0 0 10px rgba(212, 175, 55, 0.2);
}
.contact-form button {
background-color: var(--accent-color);
color: var(--bg-color);
border: none;
padding: 0.85rem 1.75rem;
font-size: 1rem;
font-weight: 700;
border-radius: 6px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.contact-form button:hover {
background-color: var(--accent-hover);
}
footer {
margin-top: 5rem;
padding-top: 2rem;
border-top: 1px solid rgba(212, 175, 55, 0.2);
font-style: italic;
text-align: center;
color: #888;
}
</style>
</head>
<body>
<div class="container">
<h1>David McInnis</h1>
<p class="tagline">Creative Director & Producer</p>
<p>You have a powerful vision. A show, a stream, a brand. But the path from a brilliant idea to a polished, professional reality requires more than a concept—it requires a unified creative and technical strategy. You don't just need a freelancer; you need an architect.</p>
<p><strong>I build that bridge.</strong></p>
<p>With two decades of hands-on experience across a vast array of creative disciplines, I operate as a complete production house, specializing in bringing ambitious digital projects to life. My strength is not mastery of a single tool, but the holistic expertise to synthesize them all—brand strategy, animation, live broadcast engineering, sound design—into a single, cohesive, and impactful experience.</p>
<h2>My Process & Philosophy</h2>
<p>I am selective about the projects I take on. This ensures every collaboration receives the focus and dedication required to create something truly remarkable. My process is built on a foundation of clarity and partnership.</p>
<p><strong>Vision First, Tools Second:</strong> The best work comes from a clear creative vision. The technology is simply the tool we use to realize it. My fluency in a vast suite of creative software allows me to choose the right tool for the job, not the other way around.</p>
<p><strong>The Producer Advantage:</strong> Working with me means a direct line from vision to execution. Your project's soul isn't diluted through layers of management. We can iterate faster and more effectively, resulting in a higher quality product delivered with greater agility.</p>
<h2>Contact & Collaboration</h2>
<p>If you have a project that requires a dedicated creative and technical partner, I invite you to get in touch. The first conversation is about discovering if we are a good fit. No pressure, no obligation—just a chance to explore the potential.</p>
<form action="https://formspree.io/f/mldljkre" method="POST" class="contact-form">
<input type="text" name="name" placeholder="Your Name" required>
<input type="email" name="email" placeholder="Your Email" required>
<textarea name="message" placeholder="Tell me about your vision..." rows="7" required></textarea>
<button type="submit">Initiate Conversation</button>
</form>
<footer>
<p>Crafting digital experiences from concept to completion.</p>
</footer>
</div>
</body>
</html>