Hugging Face's logo

Spaces:
NeoPy
/
linear-portfolio-template
Running

App Files Community
NeoPy commited on
Commit
cab7248
·
verified ·
1 Parent(s): b96f13b

make template porto using linear app

Browse files
Files changed (4) hide show
  1. README.md +7 -4
  2. index.html +415 -19
  3. script.js +252 -0
  4. style.css +195 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
  title: Linear Portfolio Template
3
- emoji: 🐠
4
- colorFrom: indigo
5
- colorTo: gray
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
  title: Linear Portfolio Template
3
+ colorFrom: pink
4
+ colorTo: green
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://huggingface.co/deepsite).
index.html CHANGED
@@ -1,19 +1,415 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+ </head>
12
+ <body class="bg-white text-gray-900">
13
+ <!-- Header -->
14
+ <header class="border-b border-gray-100 sticky top-0 bg-white/95 backdrop-blur-sm z-50">
15
+ <nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
16
+ <div class="flex justify-between items-center h-16">
17
+ <div class="flex items-center">
18
+ <div class="flex-shrink-0 flex items-center">
19
+ <div class="w-8 h-8 bg-black rounded-lg flex items-center justify-center">
20
+ <span class="text-white font-bold text-sm">L</span>
21
+ </div>
22
+ <span class="ml-3 text-xl font-semibold">Portfolio</span>
23
+ </div>
24
+ </div>
25
+
26
+ <div class="hidden md:block">
27
+ <div class="ml-10 flex items-baseline space-x-8">
28
+ <a href="#home" class="text-gray-900 hover:text-gray-600 px-3 py-2 text-sm font-medium">Home</a>
29
+ <a href="#about" class="text-gray-600 hover:text-gray-900 px-3 py-2 text-sm font-medium">About</a>
30
+ <a href="#work" class="text-gray-600 hover:text-gray-900 px-3 py-2 text-sm font-medium">Work</a>
31
+ <a href="#services" class="text-gray-600 hover:text-gray-900 px-3 py-2 text-sm font-medium">Services</a>
32
+ <a href="#contact" class="text-gray-600 hover:text-gray-900 px-3 py-2 text-sm font-medium">Contact</a>
33
+ </div>
34
+ </div>
35
+
36
+ <div class="hidden md:block">
37
+ <a href="#contact" class="bg-black text-white hover:bg-gray-800 px-4 py-2 rounded-lg text-sm font-medium transition-colors">
38
+ Get Started
39
+ </a>
40
+ </div>
41
+
42
+ <!-- Mobile menu button -->
43
+ <div class="md:hidden">
44
+ <button type="button" class="mobile-menu-button p-2 rounded-md text-gray-600 hover:text-gray-900 hover:bg-gray-100">
45
+ <i data-feather="menu" class="w-6 h-6"></i>
46
+ </button>
47
+ </div>
48
+ </div>
49
+
50
+ <!-- Mobile menu -->
51
+ <div class="mobile-menu hidden md:hidden">
52
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
53
+ <a href="#home" class="text-gray-900 block px-3 py-2 text-base font-medium">Home</a>
54
+ <a href="#about" class="text-gray-600 hover:text-gray-900 block px-3 py-2 text-base font-medium">About</a>
55
+ <a href="#work" class="text-gray-600 hover:text-gray-900 block px-3 py-2 text-base font-medium">Work</a>
56
+ <a href="#services" class="text-gray-600 hover:text-gray-900 block px-3 py-2 text-base font-medium">Services</a>
57
+ <a href="#contact" class="text-gray-600 hover:text-gray-900 block px-3 py-2 text-base font-medium">Contact</a>
58
+ </div>
59
+ </div>
60
+ </nav>
61
+ </header>
62
+
63
+ <!-- Hero Section -->
64
+ <section id="home" class="pt-16 pb-32 bg-gradient-to-br from-gray-50 to-white">
65
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
66
+ <div class="text-center max-w-4xl mx-auto">
67
+ <h1 class="text-5xl sm:text-6xl lg:text-7xl font-bold tracking-tight text-gray-900 mb-8">
68
+ Plan and build
69
+ <br>
70
+ <span class="text-gray-500">modern products</span>
71
+ </h1>
72
+ <p class="text-xl sm:text-2xl text-gray-600 mb-12 max-w-3xl mx-auto">
73
+ Streamline your development workflow with purpose-built tools for planning, tracking, and delivering exceptional products.
74
+ </p>
75
+ <div class="flex flex-col sm:flex-row gap-4 justify-center">
76
+ <a href="#contact" class="bg-black text-white hover:bg-gray-800 px-8 py-4 rounded-lg text-lg font-medium transition-colors">
77
+ Start Building
78
+ </a>
79
+ <a href="#work" class="border border-gray-300 text-gray-700 hover:bg-gray-50 px-8 py-4 rounded-lg text-lg font-medium transition-colors">
80
+ View Work
81
+ </a>
82
+ </div>
83
+ </div>
84
+ </div>
85
+ </section>
86
+
87
+ <!-- Features Section -->
88
+ <section id="services" class="py-24 bg-white">
89
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
90
+ <div class="text-center mb-20">
91
+ <h2 class="text-4xl font-bold text-gray-900 mb-6">
92
+ Made for modern product teams
93
+ </h2>
94
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">
95
+ Shaped by the practices and principles that distinguish world-class product teams: relentless focus, fast execution, and commitment to quality.
96
+ </p>
97
+ </div>
98
+
99
+ <div class="grid md:grid-cols-3 gap-12">
100
+ <!-- Feature 1 -->
101
+ <div class="text-center">
102
+ <div class="w-16 h-16 bg-gray-100 rounded-2xl flex items-center justify-center mx-auto mb-6">
103
+ <i data-feather="cpu" class="w-8 h-8 text-gray-700"></i>
104
+ </div>
105
+ <h3 class="text-2xl font-semibold text-gray-900 mb-4">Purpose-built development</h3>
106
+ <p class="text-gray-600">
107
+ Streamline issues, projects, and product roadmaps with tools designed specifically for modern development teams.
108
+ </p>
109
+ </div>
110
+
111
+ <!-- Feature 2 -->
112
+ <div class="text-center">
113
+ <div class="w-16 h-16 bg-gray-100 rounded-2xl flex items-center justify-center mx-auto mb-6">
114
+ <i data-feather="zap" class="w-8 h-8 text-gray-700"></i>
115
+ </div>
116
+ <h3 class="text-2xl font-semibold text-gray-900 mb-4">Designed to move fast</h3>
117
+ <p class="text-gray-600">
118
+ Lightning-fast performance and intuitive workflows that keep your team focused and productive.
119
+ </p>
120
+ </div>
121
+
122
+ <!-- Feature 3 -->
123
+ <div class="text-center">
124
+ <div class="w-16 h-16 bg-gray-100 rounded-2xl flex items-center justify-center mx-auto mb-6">
125
+ <i data-feather="settings" class="w-8 h-8 text-gray-700"></i>
126
+ </div>
127
+ <h3 class="text-2xl font-semibold text-gray-900 mb-4">Crafted to perfection</h3>
128
+ <p class="text-gray-600">
129
+ Every detail carefully considered to create an experience that developers love to use.
130
+ </p>
131
+ </div>
132
+ </div>
133
+ </div>
134
+ </section>
135
+
136
+ <!-- AI Section -->
137
+ <section class="py-24 bg-gray-50">
138
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
139
+ <div class="grid lg:grid-cols-2 gap-16 items-center">
140
+ <div>
141
+ <div class="inline-flex items-center bg-white border border-gray-200 rounded-full px-4 py-2 mb-6">
142
+ <span class="w-2 h-2 bg-green-500 rounded-full mr-2"></span>
143
+ <span class="text-sm font-medium text-gray-700">AI-Powered Development</span>
144
+ </div>
145
+ <h2 class="text-4xl lg:text-5xl font-bold text-gray-900 mb-6">
146
+ Artificial intelligence assisted development
147
+ </h2>
148
+ <p class="text-xl text-gray-600 mb-8">
149
+ 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.
150
+ </p>
151
+ <a href="#contact" class="inline-flex items-center text-black font-medium hover:text-gray-700 transition-colors">
152
+ Learn more
153
+ <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i>
154
+ </a>
155
+ </div>
156
+ <div class="relative">
157
+ <div class="bg-white rounded-2xl border border-gray-200 p-8 shadow-sm">
158
+ <div class="space-y-4">
159
+ <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
160
+ <div class="flex items-center">
161
+ <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
162
+ <span class="text-blue-600 text-sm font-medium">AI</span>
163
+ </div>
164
+ <span class="ml-3 text-gray-900 font-medium">Smart Suggestions</span>
165
+ </div>
166
+ <div class="w-3 h-3 bg-green-400 rounded-full"></div>
167
+ </div>
168
+ <div class="p-4 border border-gray-200 rounded-lg">
169
+ <p class="text-sm text-gray-600 mb-2">Why this assignee was suggested:</p>
170
+ <p class="text-sm text-gray-900">This person was the assignee on previous issues related to similar performance problems.</p>
171
+ </div>
172
+ </div>
173
+ </div>
174
+ </div>
175
+ </div>
176
+ </div>
177
+ </section>
178
+
179
+ <!-- Work Section -->
180
+ <section id="work" class="py-24 bg-white">
181
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
182
+ <div class="text-center mb-20">
183
+ <h2 class="text-4xl font-bold text-gray-900 mb-6">
184
+ Manage projects end-to-end
185
+ </h2>
186
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">
187
+ Consolidate specs, milestones, tasks, and documentation in one centralized location for complete project visibility.
188
+ </p>
189
+ </div>
190
+
191
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
192
+ <!-- Project 1 -->
193
+ <div class="bg-gray-50 rounded-2xl p-8 hover:bg-gray-100 transition-colors">
194
+ <div class="w-12 h-12 bg-black rounded-xl flex items-center justify-center mb-6">
195
+ <i data-feather="smartphone" class="w-6 h-6 text-white"></i>
196
+ </div>
197
+ <h3 class="text-xl font-semibold text-gray-900 mb-3">Mobile App Development</h3>
198
+ <p class="text-gray-600 mb-4">
199
+ Cross-platform mobile applications built with React Native and modern development practices.
200
+ </p>
201
+ <div class="flex items-center text-sm text-gray-500">
202
+ <i data-feather="calendar" class="w-4 h-4 mr-1"></i>
203
+ <span>Ongoing</span>
204
+ </div>
205
+ </div>
206
+
207
+ <!-- Project 2 -->
208
+ <div class="bg-gray-50 rounded-2xl p-8 hover:bg-gray-100 transition-colors">
209
+ <div class="w-12 h-12 bg-black rounded-xl flex items-center justify-center mb-6">
210
+ <i data-feather="code" class="w-6 h-6 text-white"></i>
211
+ </div>
212
+ <h3 class="text-xl font-semibold text-gray-900 mb-3">API Integration</h3>
213
+ <p class="text-gray-600 mb-4">
214
+ Robust API solutions and third-party integrations to connect your systems seamlessly.
215
+ </p>
216
+ <div class="flex items-center text-sm text-gray-500">
217
+ <i data-feather="calendar" class="w-4 h-4 mr-1"></i>
218
+ <span>Completed</span>
219
+ </div>
220
+ </div>
221
+
222
+ <!-- Project 3 -->
223
+ <div class="bg-gray-50 rounded-2xl p-8 hover:bg-gray-100 transition-colors">
224
+ <div class="w-12 h-12 bg-black rounded-xl flex items-center justify-center mb-6">
225
+ <i data-feather="layout" class="w-6 h-6 text-white"></i>
226
+ </div>
227
+ <h3 class="text-xl font-semibold text-gray-900 mb-3">Web Dashboard</h3>
228
+ <p class="text-gray-600 mb-4">
229
+ Interactive dashboards and analytics interfaces for data-driven decision making.
230
+ </p>
231
+ <div class="flex items-center text-sm text-gray-500">
232
+ <i data-feather="calendar" class="w-4 h-4 mr-1"></i>
233
+ <span>In Progress</span>
234
+ </div>
235
+ </div>
236
+ </div>
237
+ </div>
238
+ </section>
239
+
240
+ <!-- About Section -->
241
+ <section id="about" class="py-24 bg-gray-50">
242
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
243
+ <div class="grid lg:grid-cols-2 gap-16 items-center">
244
+ <div>
245
+ <h2 class="text-4xl lg:text-5xl font-bold text-gray-900 mb-6">
246
+ Built for developers
247
+ </h2>
248
+ <p class="text-xl text-gray-600 mb-8">
249
+ 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.
250
+ </p>
251
+ <div class="space-y-6">
252
+ <div class="flex items-start">
253
+ <div class="flex-shrink-0 w-6 h-6 bg-green-100 rounded-full flex items-center justify-center mt-1">
254
+ <i data-feather="check" class="w-3 h-3 text-green-600"></i>
255
+ </div>
256
+ <div class="ml-4">
257
+ <h4 class="text-lg font-semibold text-gray-900">Fast Performance</h4>
258
+ <p class="text-gray-600">Optimized for speed and efficiency to keep you in flow state.</p>
259
+ </div>
260
+ </div>
261
+ <div class="flex items-start">
262
+ <div class="flex-shrink-0 w-6 h-6 bg-green-100 rounded-full flex items-center justify-center mt-1">
263
+ <i data-feather="check" class="w-3 h-3 text-green-600"></i>
264
+ </div>
265
+ <div class="ml-4">
266
+ <h4 class="text-lg font-semibold text-gray-900">Intuitive Design</h4>
267
+ <p class="text-gray-600">Clean, minimal interfaces that get out of your way.</p>
268
+ </div>
269
+ </div>
270
+ <div class="flex items-start">
271
+ <div class="flex-shrink-0 w-6 h-6 bg-green-100 rounded-full flex items-center justify-center mt-1">
272
+ <i data-feather="check" class="w-3 h-3 text-green-600"></i>
273
+ </div>
274
+ <div class="ml-4">
275
+ <h4 class="text-lg font-semibold text-gray-900">Developer First</h4>
276
+ <p class="text-gray-600">Built by developers, for developers, with your workflow in mind.</p>
277
+ </div>
278
+ </div>
279
+ </div>
280
+ </div>
281
+ <div class="relative">
282
+ <div class="bg-white rounded-2xl border border-gray-200 p-8 shadow-sm">
283
+ <div class="space-y-4">
284
+ <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
285
+ <div class="flex items-center">
286
+ <div class="w-8 h-8 bg-gray-900 rounded-full flex items-center justify-center">
287
+ <span class="text-white text-sm font-medium">DV</span>
288
+ </div>
289
+ <span class="ml-3 text-gray-900 font-medium">Development Velocity</span>
290
+ </div>
291
+ <span class="text-2xl font-bold text-green-600">+340%</span>
292
+ </div>
293
+ <div class="grid grid-cols-2 gap-4">
294
+ <div class="p-4 border border-gray-200 rounded-lg text-center">
295
+ <div class="text-2xl font-bold text-gray-900">2.3x</div>
296
+ <div class="text-sm text-gray-600">Faster Shipping</div>
297
+ </div>
298
+ <div class="p-4 border border-gray-200 rounded-lg text-center">
299
+ <div class="text-2xl font-bold text-gray-900">95%</div>
300
+ <div class="text-sm text-gray-600">Developer Satisfaction</div>
301
+ </div>
302
+ </div>
303
+ </div>
304
+ </div>
305
+ </div>
306
+ </div>
307
+ </div>
308
+ </section>
309
+
310
+ <!-- Contact Section -->
311
+ <section id="contact" class="py-24 bg-white">
312
+ <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
313
+ <div class="text-center mb-16">
314
+ <h2 class="text-4xl font-bold text-gray-900 mb-6">
315
+ Let's build something great together
316
+ </h2>
317
+ <p class="text-xl text-gray-600">
318
+ Ready to streamline your development workflow? Get in touch and let's discuss your next project.
319
+ </p>
320
+ </div>
321
+
322
+ <form class="space-y-6 max-w-2xl mx-auto">
323
+ <div class="grid md:grid-cols-2 gap-6">
324
+ <div>
325
+ <label for="name" class="block text-sm font-medium text-gray-700 mb-2">Name</label>
326
+ <input type="text" id="name" name="name" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-black focus:border-black transition-colors">
327
+ </div>
328
+ <div>
329
+ <label for="email" class="block text-sm font-medium text-gray-700 mb-2">Email</label>
330
+ <input type="email" id="email" name="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-black focus:border-black transition-colors">
331
+ </div>
332
+ </div>
333
+ <div>
334
+ <label for="company" class="block text-sm font-medium text-gray-700 mb-2">Company</label>
335
+ <input type="text" id="company" name="company" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-black focus:border-black transition-colors">
336
+ </div>
337
+ <div>
338
+ <label for="project" class="block text-sm font-medium text-gray-700 mb-2">Project Details</label>
339
+ <textarea id="project" name="project" rows="4" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-black focus:border-black transition-colors"></textarea>
340
+ </div>
341
+ <div class="text-center">
342
+ <button type="submit" class="bg-black text-white hover:bg-gray-800 px-8 py-4 rounded-lg text-lg font-medium transition-colors">
343
+ Send Message
344
+ </button>
345
+ </div>
346
+ </form>
347
+ </div>
348
+ </section>
349
+
350
+ <!-- Footer -->
351
+ <footer class="bg-gray-900 text-white py-16">
352
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
353
+ <div class="grid md:grid-cols-4 gap-8">
354
+ <div class="md:col-span-2">
355
+ <div class="flex items-center mb-6">
356
+ <div class="w-8 h-8 bg-white rounded-lg flex items-center justify-center">
357
+ <span class="text-black font-bold text-sm">L</span>
358
+ </div>
359
+ <span class="ml-3 text-xl font-semibold">Portfolio</span>
360
+ </div>
361
+ <p class="text-gray-400 mb-6 max-w-md">
362
+ Building modern products with purpose-built tools for efficient development workflows.
363
+ </p>
364
+ <div class="flex space-x-4">
365
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">
366
+ <i data-feather="github" class="w-5 h-5"></i>
367
+ </a>
368
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">
369
+ <i data-feather="twitter" class="w-5 h-5"></i>
370
+ </a>
371
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">
372
+ <i data-feather="linkedin" class="w-5 h-5"></i>
373
+ </a>
374
+ </div>
375
+ </div>
376
+
377
+ <div>
378
+ <h4 class="text-lg font-semibold mb-4">Services</h4>
379
+ <ul class="space-y-2">
380
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Web Development</a></li>
381
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Mobile Apps</a></li>
382
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors">API Integration</a></li>
383
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Consulting</a></li>
384
+ </ul>
385
+ </div>
386
+
387
+ <div>
388
+ <h4 class="text-lg font-semibold mb-4">Company</h4>
389
+ <ul class="space-y-2">
390
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors">About</a></li>
391
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Work</a></li>
392
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Blog</a></li>
393
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Contact</a></li>
394
+ </ul>
395
+ </div>
396
+ </div>
397
+
398
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
399
+ <p class="text-gray-400 text-sm">
400
+ © 2024 Linear Portfolio Template. Built with Tailwind CSS.
401
+ </p>
402
+ <div class="flex space-x-6 mt-4 md:mt-0">
403
+ <a href="#" class="text-gray-400 hover:text-white text-sm transition-colors">Privacy</a>
404
+ <a href="#" class="text-gray-400 hover:text-white text-sm transition-colors">Terms</a>
405
+ <a href="#" class="text-gray-400 hover:text-white text-sm transition-colors">Security</a>
406
+ </div>
407
+ </div>
408
+ </div>
409
+ </footer>
410
+
411
+ <script src="script.js"></script>
412
+ <script>feather.replace();</script>
413
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
414
+ </body>
415
+ </html>
script.js ADDED
@@ -0,0 +1,252 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ // Linear Portfolio Template JavaScript
2
+
3
+ document.addEventListener('DOMContentLoaded', function() {
4
+ // Mobile menu toggle
5
+ const mobileMenuButton = document.querySelector('.mobile-menu-button');
6
+ const mobileMenu = document.querySelector('.mobile-menu');
7
+
8
+ if (mobileMenuButton && mobileMenu) {
9
+ mobileMenuButton.addEventListener('click', function() {
10
+ mobileMenu.classList.toggle('hidden');
11
+ });
12
+ }
13
+
14
+ // Smooth scrolling for navigation links
15
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
16
+ anchor.addEventListener('click', function (e) {
17
+ e.preventDefault();
18
+ const target = document.querySelector(this.getAttribute('href'));
19
+ if (target) {
20
+ target.scrollIntoView({
21
+ behavior: 'smooth',
22
+ block: 'start'
23
+ });
24
+
25
+ // Close mobile menu if open
26
+ if (mobileMenu && !mobileMenu.classList.contains('hidden')) {
27
+ mobileMenu.classList.add('hidden');
28
+ }
29
+ }
30
+ });
31
+ });
32
+
33
+ // Form submission handling
34
+ const contactForm = document.querySelector('#contact form');
35
+ if (contactForm) {
36
+ contactForm.addEventListener('submit', function(e) {
37
+ e.preventDefault();
38
+
39
+ // Get form data
40
+ const formData = new FormData(this);
41
+ const name = formData.get('name');
42
+ const email = formData.get('email');
43
+ const company = formData.get('company');
44
+ const project = formData.get('project');
45
+
46
+ // Simple validation
47
+ if (!name || !email || !project) {
48
+ showNotification('Please fill in all required fields.', 'error');
49
+ return;
50
+ }
51
+
52
+ // Email validation
53
+ const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
54
+ if (!emailRegex.test(email)) {
55
+ showNotification('Please enter a valid email address.', 'error');
56
+ return;
57
+ }
58
+
59
+ // Simulate form submission
60
+ showNotification('Sending message...', 'info');
61
+
62
+ setTimeout(() => {
63
+ showNotification(`Thanks ${name}! Your message has been sent.`, 'success');
64
+ this.reset();
65
+ }, 2000);
66
+ });
67
+ }
68
+
69
+ // Notification system
70
+ function showNotification(message, type = 'info') {
71
+ // Remove existing notification
72
+ const existingNotification = document.querySelector('.notification');
73
+ if (existingNotification) {
74
+ existingNotification.remove();
75
+ }
76
+
77
+ // Create notification element
78
+ const notification = document.createElement('div');
79
+ notification.className = 'notification';
80
+
81
+ // Set colors based on type
82
+ let bgColor, borderColor;
83
+ switch (type) {
84
+ case 'success':
85
+ bgColor = '#f0fdf4';
86
+ borderColor = '#bbf7d0';
87
+ break;
88
+ case 'error':
89
+ bgColor = '#fef2f2';
90
+ borderColor = '#fecaca';
91
+ break;
92
+ default:
93
+ bgColor = '#f8fafc';
94
+ borderColor = '#e2e8f0';
95
+ }
96
+
97
+ notification.style.background = bgColor;
98
+ notification.style.border = `1px solid ${borderColor}`;
99
+
100
+ notification.innerHTML = `
101
+ <div class="flex items-center justify-between">
102
+ <span class="text-gray-900">${message}</span>
103
+ <button onclick="this.parentElement.parentElement.remove()" class="ml-4 text-gray-400 hover:text-gray-600">
104
+ <i data-feather="x" class="w-4 h-4"></i>
105
+ </button>
106
+ </div>
107
+ `;
108
+
109
+ // Add to page
110
+ document.body.appendChild(notification);
111
+
112
+ // Show notification
113
+ setTimeout(() => notification.classList.add('show'), 100);
114
+
115
+ // Auto hide after 5 seconds
116
+ setTimeout(() => {
117
+ if (notification && notification.parentElement) {
118
+ notification.classList.remove('show');
119
+ setTimeout(() => notification.remove(), 300);
120
+ }
121
+ }, 5000);
122
+
123
+ // Initialize feather icons in notification
124
+ if (typeof feather !== 'undefined') {
125
+ feather.replace();
126
+ }
127
+ }
128
+
129
+ // Intersection Observer for animations
130
+ const observerOptions = {
131
+ threshold: 0.1,
132
+ rootMargin: '0px 0px -50px 0px'
133
+ };
134
+
135
+ const observer = new IntersectionObserver((entries) => {
136
+ entries.forEach(entry => {
137
+ if (entry.isIntersecting) {
138
+ entry.target.style.opacity = '1';
139
+ entry.target.style.transform = 'translateY(0)';
140
+ }
141
+ });
142
+ }, observerOptions);
143
+
144
+ // Observe elements for animation
145
+ document.querySelectorAll('section').forEach(section => {
146
+ section.style.opacity = '0';
147
+ section.style.transform = 'translateY(30px)';
148
+ section.style.transition = 'opacity 0.8s ease-out, transform 0.8s ease-out';
149
+ observer.observe(section);
150
+ });
151
+
152
+ // Header scroll effect
153
+ const header = document.querySelector('header');
154
+ let lastScrollTop = 0;
155
+
156
+ window.addEventListener('scroll', function() {
157
+ const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
158
+
159
+ if (scrollTop > 100) {
160
+ header.classList.add('bg-white/95', 'backdrop-blur-sm', 'shadow-sm');
161
+ } else {
162
+ header.classList.remove('shadow-sm');
163
+ }
164
+
165
+ lastScrollTop = scrollTop;
166
+ });
167
+
168
+ // Typing animation for hero text
169
+ function typeWriter(element, text, speed = 50) {
170
+ let i = 0;
171
+ element.innerHTML = '';
172
+
173
+ function type() {
174
+ if (i < text.length) {
175
+ element.innerHTML += text.charAt(i);
176
+ i++;
177
+ setTimeout(type, speed);
178
+ }
179
+ }
180
+
181
+ type();
182
+ }
183
+
184
+ // Initialize typing animation on hero section
185
+ const heroTitle = document.querySelector('#home h1');
186
+ if (heroTitle) {
187
+ const originalText = heroTitle.innerHTML;
188
+ const spans = heroTitle.querySelectorAll('span');
189
+
190
+ if (spans.length > 0) {
191
+ typeWriter(spans[0], spans[0].textContent, 100);
192
+ }
193
+ }
194
+
195
+ // Lazy loading for images
196
+ const images = document.querySelectorAll('img');
197
+ const imageObserver = new IntersectionObserver((entries, observer) => {
198
+ entries.forEach(entry => {
199
+ if (entry.isIntersecting) {
200
+ const img = entry.target;
201
+ img.setAttribute('loaded', '');
202
+ observer.unobserve(img);
203
+ }
204
+ });
205
+ });
206
+
207
+ images.forEach(img => {
208
+ img.setAttribute('loading', '');
209
+ imageObserver.observe(img);
210
+ });
211
+
212
+ // Keyboard navigation support
213
+ document.addEventListener('keydown', function(e) {
214
+ // ESC key closes mobile menu
215
+ if (e.key === 'Escape' && mobileMenu && !mobileMenu.classList.contains('hidden')) {
216
+ mobileMenu.classList.add('hidden');
217
+ }
218
+ });
219
+
220
+ // Performance optimization: Debounce scroll events
221
+ function debounce(func, wait) {
222
+ let timeout;
223
+ return function executedFunction(...args) {
224
+ const later = () => {
225
+ clearTimeout(timeout);
226
+ func(...args);
227
+ };
228
+ clearTimeout(timeout);
229
+ timeout = setTimeout(later, wait);
230
+ };
231
+ }
232
+
233
+ // Apply debounce to scroll handler
234
+ const debouncedScrollHandler = debounce(function() {
235
+ const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
236
+
237
+ if (scrollTop > 100) {
238
+ header.classList.add('shadow-sm');
239
+ } else {
240
+ header.classList.remove('shadow-sm');
241
+ }
242
+ }, 10);
243
+
244
+ window.addEventListener('scroll', debouncedScrollHandler);
245
+
246
+ // Initialize feather icons
247
+ if (typeof feather !== 'undefined') {
248
+ feather.replace();
249
+ }
250
+
251
+ console.log('Linear Portfolio Template initialized successfully!');
252
+ });
style.css CHANGED
@@ -1,28 +1,205 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
 
 
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
 
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
 
28
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /* Linear Portfolio Template Styles */
2
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
3
+
4
+ * {
5
+ margin: 0;
6
+ padding: 0;
7
+ box-sizing: border-box;
8
+ }
9
+
10
+ html {
11
+ scroll-behavior: smooth;
12
+ }
13
+
14
  body {
15
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
16
+ line-height: 1.6;
17
+ color: #1f2937;
18
+ }
19
+
20
+ /* Custom animations */
21
+ @keyframes fadeInUp {
22
+ from {
23
+ opacity: 0;
24
+ transform: translateY(30px);
25
+ }
26
+ to {
27
+ opacity: 1;
28
+ transform: translateY(0);
29
+ }
30
+ }
31
+
32
+ @keyframes slideInLeft {
33
+ from {
34
+ opacity: 0;
35
+ transform: translateX(-30px);
36
+ }
37
+ to {
38
+ opacity: 1;
39
+ transform: translateX(0);
40
+ }
41
+ }
42
+
43
+ @keyframes slideInRight {
44
+ from {
45
+ opacity: 0;
46
+ transform: translateX(30px);
47
+ }
48
+ to {
49
+ opacity: 1;
50
+ transform: translateX(0);
51
+ }
52
+ }
53
+
54
+ /* Animation classes */
55
+ .animate-fade-in-up {
56
+ animation: fadeInUp 0.8s ease-out forwards;
57
+ }
58
+
59
+ .animate-slide-in-left {
60
+ animation: slideInLeft 0.8s ease-out forwards;
61
+ }
62
+
63
+ .animate-slide-in-right {
64
+ animation: slideInRight 0.8s ease-out forwards;
65
+ }
66
+
67
+ /* Custom scrollbar */
68
+ ::-webkit-scrollbar {
69
+ width: 6px;
70
+ }
71
+
72
+ ::-webkit-scrollbar-track {
73
+ background: #f1f5f9;
74
+ }
75
+
76
+ ::-webkit-scrollbar-thumb {
77
+ background: #cbd5e1;
78
+ border-radius: 3px;
79
+ }
80
+
81
+ ::-webkit-scrollbar-thumb:hover {
82
+ background: #94a3b8;
83
+ }
84
+
85
+ /* Form styles */
86
+ input:focus,
87
+ textarea:focus {
88
+ outline: none;
89
+ ring: 2px;
90
+ ring-color: #000000;
91
+ border-color: #000000;
92
+ }
93
+
94
+ /* Smooth transitions */
95
+ a,
96
+ button {
97
+ transition: all 0.2s ease-in-out;
98
+ }
99
+
100
+ /* Mobile optimizations */
101
+ @media (max-width: 768px) {
102
+ .mobile-menu {
103
+ border-top: 1px solid #f1f5f9;
104
+ margin-top: 1rem;
105
+ padding-top: 1rem;
106
+ }
107
+ }
108
+
109
+ /* Hero section responsive text */
110
+ @media (max-width: 640px) {
111
+ .hero-text {
112
+ font-size: 3rem;
113
+ line-height: 1.1;
114
+ }
115
+ }
116
+
117
+ /* Loading animation for images */
118
+ img {
119
+ transition: opacity 0.3s ease-in-out;
120
+ }
121
+
122
+ img[loading] {
123
+ opacity: 0;
124
+ }
125
+
126
+ img[loaded] {
127
+ opacity: 1;
128
  }
129
 
130
+ /* Custom focus styles for accessibility */
131
+ a:focus,
132
+ button:focus {
133
+ outline: 2px solid #000000;
134
+ outline-offset: 2px;
135
  }
136
 
137
+ /* Gradient text effect */
138
+ .gradient-text {
139
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
140
+ -webkit-background-clip: text;
141
+ -webkit-text-fill-color: transparent;
142
+ background-clip: text;
143
  }
144
 
145
+ /* Card hover effects */
146
+ .card-hover {
147
+ transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
 
 
 
148
  }
149
 
150
+ .card-hover:hover {
151
+ transform: translateY(-4px);
152
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
153
  }
154
+
155
+ /* Button press effect */
156
+ .btn-press:active {
157
+ transform: scale(0.98);
158
+ }
159
+
160
+ /* Custom spacing for sections */
161
+ .section-padding {
162
+ padding-top: 6rem;
163
+ padding-bottom: 6rem;
164
+ }
165
+
166
+ @media (max-width: 768px) {
167
+ .section-padding {
168
+ padding-top: 4rem;
169
+ padding-bottom: 4rem;
170
+ }
171
+ }
172
+
173
+ /* Glass morphism effect */
174
+ .glass {
175
+ background: rgba(255, 255, 255, 0.25);
176
+ backdrop-filter: blur(10px);
177
+ border: 1px solid rgba(255, 255, 255, 0.18);
178
+ }
179
+
180
+ /* Notification styles */
181
+ .notification {
182
+ position: fixed;
183
+ top: 20px;
184
+ right: 20px;
185
+ background: white;
186
+ border: 1px solid #e5e7eb;
187
+ border-radius: 8px;
188
+ padding: 16px;
189
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
190
+ z-index: 1000;
191
+ transform: translateX(100%);
192
+ transition: transform 0.3s ease-in-out;
193
+ }
194
+
195
+ .notification.show {
196
+ transform: translateX(0);
197
+ }
198
+
199
+ /* Dark mode support */
200
+ @media (prefers-color-scheme: dark) {
201
+ .dark-mode-toggle {
202
+ background: #1f2937;
203
+ color: #f9fafb;
204
+ }
205
+ }