Hugging Face's logo

Spaces:
NeoPy
/
linear-portfolio-template
Running

App Files Community
NeoPy commited on
Commit
e04693d
·
verified ·
1 Parent(s): 2b72f7d

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +0 -518
index.html CHANGED
@@ -1,518 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Linear Portfolio - Build Modern Products</title>
7
- <link rel="icon" type="image/x-icon" href="/favicon.ico">
8
- <link rel="stylesheet" href="style.css">
9
- <script src="https://cdn.tailwindcss.com"></script>
10
- <script src="https://unpkg.com/feather-icons"></script>
11
- <!-- Preload critical resources -->
12
- <link rel="preload" href="https://fonts.googleapis.com/css2?family=Syne:wght@300;400;500;600;700;800;900&display=swap" as="style">
13
- <link rel="preconnect" href="https://fonts.googleapis.com">
14
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
15
- </head>
16
- <body class="bg-white text-gray-900 transition-colors duration-300">
17
- <!-- Header -->
18
- <header class="border-b border-gray-100 dark:border-gray-800 sticky top-0 bg-white/95 dark:bg-gray-900/95 backdrop-blur-sm z-50 transition-colors duration-300">
19
- <nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
20
- <div class="flex justify-between items-center h-16">
21
- <div class="flex items-center">
22
- <div class="flex-shrink-0 flex items-center">
23
- <div class="w-8 h-8 bg-black dark:bg-white rounded-lg flex items-center justify-center transition-colors duration-300">
24
- <span class="text-white dark:text-black font-bold text-sm">L</span>
25
- </div>
26
- <span class="ml-3 text-xl font-semibold">Portfolio</span>
27
- </div>
28
- </div>
29
-
30
- <div class="hidden md:block">
31
- <div class="ml-10 flex items-baseline space-x-8">
32
- <a href="#home" class="text-gray-900 dark:text-white hover:text-gray-600 dark:hover:text-gray-300 px-3 py-2 text-sm font-medium transition-colors">Home</a>
33
- <a href="#about" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white px-3 py-2 text-sm font-medium transition-colors">About</a>
34
- <a href="#work" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white px-3 py-2 text-sm font-medium transition-colors">Work</a>
35
- <a href="#services" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white px-3 py-2 text-sm font-medium transition-colors">Services</a>
36
- <a href="#contact" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white px-3 py-2 text-sm font-medium transition-colors">Contact</a>
37
- </div>
38
- </div>
39
-
40
- <div class="hidden md:flex items-center space-x-4">
41
- <!-- Dark mode toggle -->
42
- <button id="dark-mode-toggle" class="p-2 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors" aria-label="Toggle dark mode">
43
- <svg class="w-5 h-5 hidden dark:block" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
44
- <path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"></path>
45
- </svg>
46
- <svg class="w-5 h-5 block dark:hidden" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
47
- <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
48
- </svg>
49
- </button>
50
-
51
- <a href="#contact" class="bg-black dark:bg-white text-white dark:text-black hover:bg-gray-800 dark:hover:bg-gray-200 px-4 py-2 rounded-lg text-sm font-medium transition-colors">
52
- Get Started
53
- </a>
54
- </div>
55
-
56
- <!-- Mobile menu button -->
57
- <div class="md:hidden flex items-center space-x-2">
58
- <!-- Dark mode toggle for mobile -->
59
- <button id="dark-mode-toggle-mobile" class="p-2 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors" aria-label="Toggle dark mode">
60
- <svg class="w-5 h-5 hidden dark:block" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
61
- <path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"></path>
62
- </svg>
63
- <svg class="w-5 h-5 block dark:hidden" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
64
- <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
65
- </svg>
66
- </button>
67
-
68
- <button type="button" class="mobile-menu-button p-2 rounded-md text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
69
- <i data-feather="menu" class="w-6 h-6"></i>
70
- </button>
71
- </div>
72
- </div>
73
-
74
- <!-- Mobile menu -->
75
- <div class="mobile-menu hidden md:hidden">
76
- <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
77
- <a href="#home" class="text-gray-900 dark:text-white block px-3 py-2 text-base font-medium transition-colors">Home</a>
78
- <a href="#about" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white block px-3 py-2 text-base font-medium transition-colors">About</a>
79
- <a href="#work" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white block px-3 py-2 text-base font-medium transition-colors">Work</a>
80
- <a href="#services" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white block px-3 py-2 text-base font-medium transition-colors">Services</a>
81
- <a href="#contact" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white block px-3 py-2 text-base font-medium transition-colors">Contact</a>
82
- <div class="pt-4 pb-2 border-t border-gray-100 dark:border-gray-800">
83
- <a href="#contact" class="bg-black dark:bg-white text-white dark:text-black hover:bg-gray-800 dark:hover:bg-gray-200 px-4 py-2 rounded-lg text-sm font-medium transition-colors block text-center">
84
- Get Started
85
- </a>
86
- </div>
87
- </div>
88
- </div>
89
- </nav>
90
- </header>
91
-
92
- <!-- Hero Section -->
93
- <section id="home" class="pt-16 pb-32 bg-gradient-to-br from-gray-50 to-white dark:from-gray-900 dark:to-gray-800 transition-colors duration-300">
94
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
95
- <div class="text-center max-w-4xl mx-auto">
96
- <h1 class="text-5xl sm:text-6xl lg:text-7xl font-bold tracking-tight text-gray-900 dark:text-white mb-8">
97
- Plan and build
98
- <br>
99
- <span class="text-gray-500 dark:text-gray-400">modern products</span>
100
- </h1>
101
- <p class="text-xl sm:text-2xl text-gray-600 dark:text-gray-300 mb-12 max-w-3xl mx-auto">
102
- Streamline your development workflow with purpose-built tools for planning, tracking, and delivering exceptional products.
103
- </p>
104
- <div class="flex flex-col sm:flex-row gap-4 justify-center">
105
- <a href="#contact" class="bg-black dark:bg-white text-white dark:text-black hover:bg-gray-800 dark:hover:bg-gray-200 px-8 py-4 rounded-lg text-lg font-medium transition-colors">
106
- Start Building
107
- </a>
108
- <a href="#work" class="border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 px-8 py-4 rounded-lg text-lg font-medium transition-colors">
109
- View Work
110
- </a>
111
- </div>
112
- </div>
113
- </div>
114
- </section>
115
-
116
- <!-- Features Section -->
117
- <section id="services" class="py-24 bg-white dark:bg-gray-900 transition-colors duration-300">
118
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
119
- <div class="text-center mb-20">
120
- <h2 class="text-4xl font-bold text-gray-900 dark:text-white mb-6">
121
- Made for modern product teams
122
- </h2>
123
- <p class="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
124
- Shaped by the practices and principles that distinguish world-class product teams: relentless focus, fast execution, and commitment to quality.
125
- </p>
126
- </div>
127
-
128
- <div class="grid md:grid-cols-3 gap-12">
129
- <!-- Feature 1 -->
130
- <div class="text-center">
131
- <div class="w-16 h-16 bg-gray-100 dark:bg-gray-800 rounded-2xl flex items-center justify-center mx-auto mb-6 transition-colors">
132
- <i data-feather="cpu" class="w-8 h-8 text-gray-700 dark:text-gray-300"></i>
133
- </div>
134
- <h3 class="text-2xl font-semibold text-gray-900 dark:text-white mb-4">Purpose-built development</h3>
135
- <p class="text-gray-600 dark:text-gray-300">
136
- Streamline issues, projects, and product roadmaps with tools designed specifically for modern development teams.
137
- </p>
138
- </div>
139
-
140
- <!-- Feature 2 -->
141
- <div class="text-center">
142
- <div class="w-16 h-16 bg-gray-100 dark:bg-gray-800 rounded-2xl flex items-center justify-center mx-auto mb-6 transition-colors">
143
- <i data-feather="zap" class="w-8 h-8 text-gray-700 dark:text-gray-300"></i>
144
- </div>
145
- <h3 class="text-2xl font-semibold text-gray-900 dark:text-white mb-4">Designed to move fast</h3>
146
- <p class="text-gray-600 dark:text-gray-300">
147
- Lightning-fast performance and intuitive workflows that keep your team focused and productive.
148
- </p>
149
- </div>
150
-
151
- <!-- Feature 3 -->
152
- <div class="text-center">
153
- <div class="w-16 h-16 bg-gray-100 dark:bg-gray-800 rounded-2xl flex items-center justify-center mx-auto mb-6 transition-colors">
154
- <i data-feather="settings" class="w-8 h-8 text-gray-700 dark:text-gray-300"></i>
155
- </div>
156
- <h3 class="text-2xl font-semibold text-gray-900 dark:text-white mb-4">Crafted to perfection</h3>
157
- <p class="text-gray-600 dark:text-gray-300">
158
- Every detail carefully considered to create an experience that developers love to use.
159
- </p>
160
- </div>
161
- </div>
162
- </div>
163
- </section>
164
-
165
- <!-- AI Section -->
166
- <section class="py-24 bg-gray-50 dark:bg-gray-800 transition-colors duration-300">
167
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
168
- <div class="grid lg:grid-cols-2 gap-16 items-center">
169
- <div>
170
- <div class="inline-flex items-center bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-full px-4 py-2 mb-6 transition-colors">
171
- <span class="w-2 h-2 bg-green-500 rounded-full mr-2"></span>
172
- <span class="text-sm font-medium text-gray-700 dark:text-gray-300">AI-Powered Development</span>
173
- </div>
174
- <h2 class="text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-6">
175
- Artificial intelligence assisted development
176
- </h2>
177
- <p class="text-xl text-gray-600 dark:text-gray-300 mb-8">
178
- Streamline your development workflows with AI assistance for routine, manual tasks. Let AI handle the repetitive work so you can focus on building great products.
179
- </p>
180
- <a href="#contact" class="inline-flex items-center text-black dark:text-white font-medium hover:text-gray-700 dark:hover:text-gray-300 transition-colors">
181
- Learn more
182
- <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i>
183
- </a>
184
- </div>
185
- <div class="relative">
186
- <div class="bg-white dark:bg-gray-700 rounded-2xl border border-gray-200 dark:border-gray-600 p-8 shadow-sm transition-colors">
187
- <div class="space-y-4">
188
- <div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-600 rounded-lg transition-colors">
189
- <div class="flex items-center">
190
- <div class="w-8 h-8 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center transition-colors">
191
- <span class="text-blue-600 dark:text-blue-300 text-sm font-medium">AI</span>
192
- </div>
193
- <span class="ml-3 text-gray-900 dark:text-white font-medium">Smart Suggestions</span>
194
- </div>
195
- <div class="w-3 h-3 bg-green-400 rounded-full"></div>
196
- </div>
197
- <div class="p-4 border border-gray-200 dark:border-gray-600 rounded-lg transition-colors">
198
- <p class="text-sm text-gray-600 dark:text-gray-300 mb-2">Why this assignee was suggested:</p>
199
- <p class="text-sm text-gray-900 dark:text-white">This person was the assignee on previous issues related to similar performance problems.</p>
200
- </div>
201
- </div>
202
- </div>
203
- </div>
204
- </div>
205
- </div>
206
- </section>
207
-
208
- <!-- Work Section -->
209
- <section id="work" class="py-24 bg-white dark:bg-gray-900 transition-colors duration-300">
210
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
211
- <div class="text-center mb-20">
212
- <h2 class="text-4xl font-bold text-gray-900 dark:text-white mb-6">
213
- Manage projects end-to-end
214
- </h2>
215
- <p class="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
216
- Consolidate specs, milestones, tasks, and documentation in one centralized location for complete project visibility.
217
- </p>
218
- </div>
219
-
220
- <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
221
- <!-- Project 1 -->
222
- <div class="bg-gray-50 dark:bg-gray-800 rounded-2xl p-8 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
223
- <div class="w-12 h-12 bg-black dark:bg-white rounded-xl flex items-center justify-center mb-6 transition-colors">
224
- <i data-feather="smartphone" class="w-6 h-6 text-white dark:text-black"></i>
225
- </div>
226
- <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-3">Mobile App Development</h3>
227
- <p class="text-gray-600 dark:text-gray-300 mb-4">
228
- Cross-platform mobile applications built with React Native and modern development practices.
229
- </p>
230
- <div class="flex items-center text-sm text-gray-500 dark:text-gray-400">
231
- <i data-feather="calendar" class="w-4 h-4 mr-1"></i>
232
- <span>Ongoing</span>
233
- </div>
234
- </div>
235
-
236
- <!-- Project 2 -->
237
- <div class="bg-gray-50 dark:bg-gray-800 rounded-2xl p-8 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
238
- <div class="w-12 h-12 bg-black dark:bg-white rounded-xl flex items-center justify-center mb-6 transition-colors">
239
- <i data-feather="code" class="w-6 h-6 text-white dark:text-black"></i>
240
- </div>
241
- <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-3">API Integration</h3>
242
- <p class="text-gray-600 dark:text-gray-300 mb-4">
243
- Robust API solutions and third-party integrations to connect your systems seamlessly.
244
- </p>
245
- <div class="flex items-center text-sm text-gray-500 dark:text-gray-400">
246
- <i data-feather="calendar" class="w-4 h-4 mr-1"></i>
247
- <span>Completed</span>
248
- </div>
249
- </div>
250
-
251
- <!-- Project 3 -->
252
- <div class="bg-gray-50 dark:bg-gray-800 rounded-2xl p-8 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
253
- <div class="w-12 h-12 bg-black dark:bg-white rounded-xl flex items-center justify-center mb-6 transition-colors">
254
- <i data-feather="layout" class="w-6 h-6 text-white dark:text-black"></i>
255
- </div>
256
- <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-3">Web Dashboard</h3>
257
- <p class="text-gray-600 dark:text-gray-300 mb-4">
258
- Interactive dashboards and analytics interfaces for data-driven decision making.
259
- </p>
260
- <div class="flex items-center text-sm text-gray-500 dark:text-gray-400">
261
- <i data-feather="calendar" class="w-4 h-4 mr-1"></i>
262
- <span>In Progress</span>
263
- </div>
264
- </div>
265
- </div>
266
- </div>
267
- </section>
268
-
269
- <!-- About Section -->
270
- <section id="about" class="py-24 bg-gray-50 dark:bg-gray-800 transition-colors duration-300">
271
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
272
- <div class="grid lg:grid-cols-2 gap-16 items-center">
273
- <div>
274
- <h2 class="text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-6">
275
- Built for developers
276
- </h2>
277
- <p class="text-xl text-gray-600 dark:text-gray-300 mb-8">
278
- Every tool and workflow is designed with developer experience in mind. From lightning-fast performance to intuitive interfaces, everything is crafted to enhance your productivity.
279
- </p>
280
- <div class="space-y-6">
281
- <div class="flex items-start">
282
- <div class="flex-shrink-0 w-6 h-6 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center mt-1 transition-colors">
283
- <i data-feather="check" class="w-3 h-3 text-green-600 dark:text-green-300"></i>
284
- </div>
285
- <div class="ml-4">
286
- <h4 class="text-lg font-semibold text-gray-900 dark:text-white">Fast Performance</h4>
287
- <p class="text-gray-600 dark:text-gray-300">Optimized for speed and efficiency to keep you in flow state.</p>
288
- </div>
289
- </div>
290
- <div class="flex items-start">
291
- <div class="flex-shrink-0 w-6 h-6 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center mt-1 transition-colors">
292
- <i data-feather="check" class="w-3 h-3 text-green-600 dark:text-green-300"></i>
293
- </div>
294
- <div class="ml-4">
295
- <h4 class="text-lg font-semibold text-gray-900 dark:text-white">Intuitive Design</h4>
296
- <p class="text-gray-600 dark:text-gray-300">Clean, minimal interfaces that get out of your way.</p>
297
- </div>
298
- </div>
299
- <div class="flex items-start">
300
- <div class="flex-shrink-0 w-6 h-6 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center mt-1 transition-colors">
301
- <i data-feather="check" class="w-3 h-3 text-green-600 dark:text-green-300"></i>
302
- </div>
303
- <div class="ml-4">
304
- <h4 class="text-lg font-semibold text-gray-900 dark:text-white">Developer First</h4>
305
- <p class="text-gray-600 dark:text-gray-300">Built by developers, for developers, with your workflow in mind.</p>
306
- </div>
307
- </div>
308
- </div>
309
- </div>
310
- <div class="relative">
311
- <div class="bg-white dark:bg-gray-700 rounded-2xl border border-gray-200 dark:border-gray-600 p-8 shadow-sm transition-colors">
312
- <div class="space-y-4">
313
- <div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-600 rounded-lg transition-colors">
314
- <div class="flex items-center">
315
- <div class="w-8 h-8 bg-gray-900 dark:bg-gray-100 rounded-full flex items-center justify-center transition-colors">
316
- <span class="text-white dark:text-black text-sm font-medium">DV</span>
317
- </div>
318
- <span class="ml-3 text-gray-900 dark:text-white font-medium">Development Velocity</span>
319
- </div>
320
- <span class="text-2xl font-bold text-green-600">+340%</span>
321
- </div>
322
- <div class="grid grid-cols-2 gap-4">
323
- <div class="p-4 border border-gray-200 dark:border-gray-600 rounded-lg text-center transition-colors">
324
- <div class="text-2xl font-bold text-gray-900 dark:text-white">2.3x</div>
325
- <div class="text-sm text-gray-600 dark:text-gray-300">Faster Shipping</div>
326
- </div>
327
- <div class="p-4 border border-gray-200 dark:border-gray-600 rounded-lg text-center transition-colors">
328
- <div class="text-2xl font-bold text-gray-900 dark:text-white">95%</div>
329
- <div class="text-sm text-gray-600 dark:text-gray-300">Developer Satisfaction</div>
330
- </div>
331
- </div>
332
- </div>
333
- </div>
334
- </div>
335
- </div>
336
- </div>
337
- </section>
338
-
339
- <!-- Contact Section -->
340
- <section id="contact" class="py-24 bg-white dark:bg-gray-900 transition-colors duration-300">
341
- <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
342
- <div class="text-center mb-16">
343
- <h2 class="text-4xl font-bold text-gray-900 dark:text-white mb-6">
344
- Let's build something great together
345
- </h2>
346
- <p class="text-xl text-gray-600 dark:text-gray-300">
347
- Ready to streamline your development workflow? Get in touch and let's discuss your next project.
348
- </p>
349
- </div>
350
-
351
- <form class="space-y-6 max-w-2xl mx-auto">
352
- <div class="grid md:grid-cols-2 gap-6">
353
- <div>
354
- <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Name</label>
355
- <input type="text" id="name" name="name" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white rounded-lg focus:ring-2 focus:ring-black dark:focus:ring-white focus:border-black dark:focus:border-white transition-colors">
356
- </div>
357
- <div>
358
- <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Email</label>
359
- <input type="email" id="email" name="email" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white rounded-lg focus:ring-2 focus:ring-black dark:focus:ring-white focus:border-black dark:focus:border-white transition-colors">
360
- </div>
361
- </div>
362
- <div>
363
- <label for="company" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Company</label>
364
- <input type="text" id="company" name="company" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white rounded-lg focus:ring-2 focus:ring-black dark:focus:ring-white focus:border-black dark:focus:border-white transition-colors">
365
- </div>
366
- <div>
367
- <label for="project" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Project Details</label>
368
- <textarea id="project" name="project" rows="4" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white rounded-lg focus:ring-2 focus:ring-black dark:focus:ring-white focus:border-black dark:focus:border-white transition-colors"></textarea>
369
- </div>
370
- <div class="text-center">
371
- <button type="submit" class="bg-black dark:bg-white text-white dark:text-black hover:bg-gray-800 dark:hover:bg-gray-200 px-8 py-4 rounded-lg text-lg font-medium transition-colors">
372
- Send Message
373
- </button>
374
- </div>
375
- </form>
376
- </div>
377
- </section>
378
-
379
- <!-- Footer -->
380
- <footer class="bg-gray-900 dark:bg-black text-white py-16 transition-colors duration-300">
381
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
382
- <div class="grid md:grid-cols-4 gap-8">
383
- <div class="md:col-span-2">
384
- <div class="flex items-center mb-6">
385
- <div class="w-8 h-8 bg-white rounded-lg flex items-center justify-center">
386
- <span class="text-black font-bold text-sm">L</span>
387
- </div>
388
- <span class="ml-3 text-xl font-semibold">Portfolio</span>
389
- </div>
390
- <p class="text-gray-400 mb-6 max-w-md">
391
- Building modern products with purpose-built tools for efficient development workflows.
392
- </p>
393
- <div class="flex space-x-4">
394
- <a href="#" class="text-gray-400 hover:text-white transition-colors">
395
- <i data-feather="github" class="w-5 h-5"></i>
396
- </a>
397
- <a href="#" class="text-gray-400 hover:text-white transition-colors">
398
- <i data-feather="twitter" class="w-5 h-5"></i>
399
- </a>
400
- <a href="#" class="text-gray-400 hover:text-white transition-colors">
401
- <i data-feather="linkedin" class="w-5 h-5"></i>
402
- </a>
403
- </div>
404
- </div>
405
-
406
- <div>
407
- <h4 class="text-lg font-semibold mb-4">Services</h4>
408
- <ul class="space-y-2">
409
- <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Web Development</a></li>
410
- <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Mobile Apps</a></li>
411
- <li><a href="#" class="text-gray-400 hover:text-white transition-colors">API Integration</a></li>
412
- <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Consulting</a></li>
413
- </ul>
414
- </div>
415
-
416
- <div>
417
- <h4 class="text-lg font-semibold mb-4">Company</h4>
418
- <ul class="space-y-2">
419
- <li><a href="#" class="text-gray-400 hover:text-white transition-colors">About</a></li>
420
- <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Work</a></li>
421
- <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Blog</a></li>
422
- <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Contact</a></li>
423
- </ul>
424
- </div>
425
- </div>
426
-
427
- <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
428
- <p class="text-gray-400 text-sm">
429
- © 2024 Linear Portfolio Template. Built with Tailwind CSS.
430
- </p>
431
- <div class="flex space-x-6 mt-4 md:mt-0">
432
- <a href="#" class="text-gray-400 hover:text-white text-sm transition-colors">Privacy</a>
433
- <a href="#" class="text-gray-400 hover:text-white text-sm transition-colors">Terms</a>
434
- <a href="#" class="text-gray-400 hover:text-white text-sm transition-colors">Security</a>
435
- </div>
436
- </div>
437
- </div>
438
- </footer>
439
-
440
- <script src="script.js"></script>
441
- <script>
442
- // Initialize Feather icons
443
- feather.replace();
444
-
445
- // Dark mode toggle functionality
446
- document.addEventListener('DOMContentLoaded', function() {
447
- // Get the toggle buttons
448
- const darkModeToggle = document.getElementById('dark-mode-toggle');
449
- const darkModeToggleMobile = document.getElementById('dark-mode-toggle-mobile');
450
-
451
- // Check for saved theme preference or default to light mode
452
- const currentTheme = localStorage.getItem('theme') || 'light';
453
-
454
- // Apply the saved theme on page load
455
- if (currentTheme === 'dark') {
456
- document.documentElement.classList.add('dark');
457
- }
458
-
459
- // Function to toggle dark mode
460
- function toggleDarkMode() {
461
- document.documentElement.classList.toggle('dark');
462
-
463
- // Save the current theme preference
464
- if (document.documentElement.classList.contains('dark')) {
465
- localStorage.setItem('theme', 'dark');
466
- } else {
467
- localStorage.setItem('theme', 'light');
468
- }
469
- }
470
-
471
- // Add event listeners to both toggle buttons
472
- if (darkModeToggle) {
473
- darkModeToggle.addEventListener('click', toggleDarkMode);
474
- }
475
-
476
- if (darkModeToggleMobile) {
477
- darkModeToggleMobile.addEventListener('click', toggleDarkMode);
478
- }
479
-
480
- // Mobile menu toggle
481
- const mobileMenuButton = document.querySelector('.mobile-menu-button');
482
- const mobileMenu = document.querySelector('.mobile-menu');
483
-
484
- if (mobileMenuButton && mobileMenu) {
485
- mobileMenuButton.addEventListener('click', function() {
486
- mobileMenu.classList.toggle('hidden');
487
- });
488
- }
489
-
490
- // Close mobile menu when clicking on a link
491
- const mobileMenuLinks = document.querySelectorAll('.mobile-menu a');
492
- mobileMenuLinks.forEach(link => {
493
- link.addEventListener('click', function() {
494
- mobileMenu.classList.add('hidden');
495
- });
496
- });
497
-
498
- // Smooth scrolling for anchor links
499
- document.querySelectorAll('a[href^="#"]').forEach(anchor => {
500
- anchor.addEventListener('click', function (e) {
501
- e.preventDefault();
502
-
503
- const targetId = this.getAttribute('href');
504
- if (targetId === '#') return;
505
-
506
- const targetElement = document.querySelector(targetId);
507
- if (targetElement) {
508
- window.scrollTo({
509
- top: targetElement.offsetTop - 80, // Adjust for header height
510
- behavior: 'smooth'
511
- });
512
- }
513
- });
514
- });
515
- });
516
- </script>
517
- </body>
518
- </html>