Hugging Face's logo

Spaces:
xyaz10x
/
undefined
Running

App Files Community
xyaz10x commited on
Commit
35eeb86
·
verified ·
1 Parent(s): 03f2398

create a homepage like a profile for a web developer

Browse files
Files changed (2) hide show
  1. README.md +9 -5
  2. index.html +126 -19
README.md CHANGED
@@ -1,10 +1,14 @@
1
  ---
2
- title: Undefined
3
- emoji: 😻
4
- colorFrom: blue
5
- colorTo: red
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: undefined
3
+ colorFrom: purple
4
+ colorTo: purple
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://deepsite.hf.co).
14
+
index.html CHANGED
@@ -1,19 +1,126 @@
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>WizzyWeb Wizards - Magical Web Building</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
12
+ <style>
13
+ .magic-gradient {
14
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
15
+ }
16
+ .card-hover {
17
+ transition: all 0.3s ease;
18
+ }
19
+ .card-hover:hover {
20
+ transform: translateY(-5px);
21
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
22
+ }
23
+ </style>
24
+ </head>
25
+ <body class="bg-gray-100">
26
+ <div id="vanta-bg" class="fixed top-0 left-0 w-full h-full z-0"></div>
27
+
28
+ <!-- Navigation -->
29
+ <nav class="relative z-10 bg-white/80 backdrop-blur-md shadow-sm">
30
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
31
+ <div class="flex justify-between h-16">
32
+ <div class="flex">
33
+ <div class="flex-shrink-0 flex items-center">
34
+ <i data-feather="code" class="h-8 w-8 text-purple-600"></i>
35
+ <span class="ml-2 text-xl font-bold text-gray-900">WizzyWeb</span>
36
+ </div>
37
+ </div>
38
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
39
+ <a href="#" class="text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">Home</a>
40
+ <a href="#" class="text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">Tools</a>
41
+ <a href="#" class="text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">Resources</a>
42
+ <a href="#" class="text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">Community</a>
43
+ <a href="#" class="bg-purple-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-purple-700 transition">Get Started</a>
44
+ </div>
45
+ <div class="-mr-2 flex items-center md:hidden">
46
+ <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-purple-500">
47
+ <i data-feather="menu"></i>
48
+ </button>
49
+ </div>
50
+ </div>
51
+ </div>
52
+ </nav>
53
+
54
+ <!-- Hero Section -->
55
+ <div class="relative z-10">
56
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-32">
57
+ <div class="text-center">
58
+ <h1 class="text-4xl md:text-6xl font-extrabold tracking-tight text-gray-900">
59
+ <span class="block">Pixel Wizardry by</span>
60
+ <span class="block text-transparent bg-clip-text magic-gradient">[Your Name]</span>
61
+ </h1>
62
+ <p class="mt-6 max-w-lg mx-auto text-xl text-gray-600">
63
+ Turning caffeine into clean code and wild ideas into pixel-perfect realities.
64
+ </p>
65
+ <div class="mt-10 flex justify-center">
66
+ <div class="inline-flex rounded-md shadow">
67
+ <a href="#" class="inline-flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white magic-gradient hover:opacity-90 md:py-4 md:text-lg md:px-10">
68
+ View My Work
69
+ </a>
70
+ </div>
71
+ <div class="ml-3 inline-flex">
72
+ <a href="#" class="inline-flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-purple-700 bg-purple-100 hover:bg-purple-200 md:py-4 md:text-lg md:px-10">
73
+ <i data-feather="message-square" class="w-5 h-5 mr-2"></i>
74
+ Let's Talk
75
+ </a>
76
+ </div>
77
+ </div>
78
+ </div>
79
+ </div>
80
+ </div>
81
+
82
+ <!-- Features Section -->
83
+ <div class="relative z-10 py-12 bg-white/80 backdrop-blur-sm">
84
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
85
+ <div class="lg:text-center">
86
+ <h2 class="text-base text-purple-600 font-semibold tracking-wide uppercase">Specialties</h2>
87
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
88
+ My Digital Craftsmanship
89
+ </p>
90
+ </div>
91
+
92
+ <div class="mt-10">
93
+ <div class="grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-3">
94
+ <!-- Feature 3 -->
95
+ <div class="card-hover bg-white p-8 rounded-lg shadow-md">
96
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-100 text-purple-600">
97
+ <i data-feather="lock"></i>
98
+ </div>
99
+ <h3 class="mt-6 text-lg font-medium text-gray-900">Security Spells</h3>
100
+ <p class="mt-2 text-base text-gray-600">
101
+ Protecting your digital realm with modern security practices and protocols.
102
+ </p>
103
+ </div>
104
+
105
+ <!-- Feature 1 -->
106
+ <div class="card-hover bg-white p-8 rounded-lg shadow-md">
107
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-100 text-purple-600">
108
+ <i data-feather="zap"></i>
109
+ </div>
110
+ <h3 class="mt-6 text-lg font-medium text-gray-900">Frontend Alchemy</h3>
111
+ <p class="mt-2 text-base text-gray-600">
112
+ Transforming designs into responsive, interactive experiences with React, Vue & Tailwind.
113
+ </p>
114
+ </div>
115
+
116
+ <!-- Feature 2 -->
117
+ <div class="card-hover bg-white p-8 rounded-lg shadow-md">
118
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-100 text-purple-600">
119
+ <i data-feather="package"></i>
120
+ </div>
121
+ <h3 class="mt-6 text-lg font-medium text-gray-900">Backend Wizardry</h3>
122
+ <p class="mt-2 text-base text-gray-600">
123
+ Crafting robust APIs and scalable architectures with Node.js and Python.
124
+ </p>
125
+ </body>
126
+ </html>