Hugging Face's logo

Spaces:
sdama
/
codecraft-portfolio-nebula
Running

App Files Community
sdama commited on
Commit
2679945
·
verified ·
1 Parent(s): 9d27f53

I want to make a site where I can showcase my hobby coding projects.

Browse files
Files changed (3) hide show
  1. README.md +8 -5
  2. about.html +86 -0
  3. index.html +215 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Codecraft Portfolio Nebula
3
- emoji: 🌖
4
- colorFrom: yellow
5
- colorTo: indigo
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: CodeCraft Portfolio Nebula
3
+ colorFrom: pink
4
+ colorTo: yellow
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).
about.html ADDED
@@ -0,0 +1,86 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" class="dark">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>About Me | CodeCraft Portfolio</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://unpkg.com/feather-icons"></script>
10
+ <script>
11
+ tailwind.config = {
12
+ darkMode: 'class',
13
+ theme: {
14
+ extend: {
15
+ colors: {
16
+ primary: '#8B5CF6',
17
+ secondary: '#06D6A0'
18
+ }
19
+ }
20
+ }
21
+ }
22
+ </script>
23
+ </head>
24
+ <body class="bg-gray-900 text-gray-100 min-h-screen transition-colors duration-300">
25
+ <!-- Navigation -->
26
+ <nav class="fixed w-full bg-gray-900/90 backdrop-blur-lg z-50 border-b border-gray-800">
27
+ <div class="container mx-auto px-6 py-4">
28
+ <div class="flex justify-between items-center">
29
+ <a href="index.html" class="text-2xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">CodeCraft<span class="text-secondary">.dev</span></a>
30
+ <div class="hidden md:flex space-x-8">
31
+ <a href="index.html" class="hover:text-primary transition-colors">Home</a>
32
+ <a href="about.html" class="text-primary font-semibold">About</a>
33
+ <a href="projects.html" class="hover:text-primary transition-colors">Projects</a>
34
+ <a href="contact.html" class="hover:text-primary transition-colors">Contact</a>
35
+ </div>
36
+ <button id="themeToggle" class="p-2 rounded-lg bg-gray-800 hover:bg-gray-700 transition-colors">
37
+ <i data-feather="moon" class="hidden"></i>
38
+ <i data-feather="sun" class="hidden"></i>
39
+ </button>
40
+ <button class="md:hidden p-2 rounded-lg bg-gray-800 hover:bg-gray-700 transition-colors">
41
+ <i data-feather="menu"></i>
42
+ </button>
43
+ </div>
44
+ </div>
45
+ </nav>
46
+
47
+ <!-- About Section -->
48
+ <section class="pt-32 pb-20">
49
+ <div class="container mx-auto px-6">
50
+ <div class="grid lg:grid-cols-2 gap-12 items-center">
51
+ <div>
52
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">Hello, I'm <span class="bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">Alex Developer</span></h1>
53
+ <p class="text-lg text-gray-300 mb-6 leading-relaxed">
54
+ A passionate full-stack developer with over 5 years of experience crafting digital solutions
55
+ that blend creativity with technical excellence. I specialize in transforming complex ideas
56
+ into elegant, user-friendly applications.
57
+ </p>
58
+ <p class="text-lg text-gray-300 mb-8 leading-relaxed">
59
+ When I'm not coding, you'll find me exploring new technologies, contributing to open-source
60
+ projects, or sharing knowledge through technical writing and community workshops.
61
+ </p>
62
+ <div class="flex flex-wrap gap-4">
63
+ <a href="projects.html" class="bg-primary hover:bg-primary/90 text-white px-6 py-3 rounded-lg font-semibold transition-all">View My Work</a>
64
+ <a href="contact.html" class="border border-secondary text-secondary hover:bg-secondary/10 px-6 py-3 rounded-lg font-semibold transition-all">Get In Touch</a>
65
+ </div>
66
+ </div>
67
+ <div class="relative">
68
+ <div class="bg-gradient-to-br from-primary/20 to-secondary/20 rounded-2xl p-8 transform rotate-3">
69
+ <img src="http://static.photos/technology/640x360/42" alt="Profile" class="rounded-xl shadow-2xl transform -rotate-3">
70
+ </div>
71
+ <div class="absolute -bottom-4 -right-4 bg-secondary text-gray-900 px-4 py-2 rounded-lg font-semibold">
72
+ Available for freelance
73
+ </div>
74
+ </div>
75
+ </div>
76
+ </div>
77
+ </section>
78
+
79
+ <!-- Skills Section -->
80
+ <section class="py-20 bg-gray-800/50">
81
+ <div class="container mx-auto px-6">
82
+ <h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Technical Skills</h2>
83
+ <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
84
+ <div class="text-center">
85
+ </body>
86
+ </html>
index.html CHANGED
@@ -1,19 +1,216 @@
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" class="dark">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>CodeCraft Portfolio | Home</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://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ darkMode: 'class',
14
+ theme: {
15
+ extend: {
16
+ colors: {
17
+ primary: '#8B5CF6', // vibrant purple
18
+ secondary: '#06D6A0' // teal green
19
+ }
20
+ }
21
+ }
22
+ }
23
+ </script>
24
+ </head>
25
+ <body class="bg-gray-900 text-gray-100 min-h-screen transition-colors duration-300">
26
+ <!-- Navigation -->
27
+ <nav class="fixed w-full bg-gray-900/90 backdrop-blur-lg z-50 border-b border-gray-800">
28
+ <div class="container mx-auto px-6 py-4">
29
+ <div class="flex justify-between items-center">
30
+ <a href="index.html" class="text-2xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">CodeCraft<span class="text-secondary">.dev</span></a>
31
+ <div class="hidden md:flex space-x-8">
32
+ <a href="index.html" class="hover:text-primary transition-colors">Home</a>
33
+ <a href="about.html" class="hover:text-primary transition-colors">About</a>
34
+ <a href="projects.html" class="hover:text-primary transition-colors">Projects</a>
35
+ <a href="contact.html" class="hover:text-primary transition-colors">Contact</a>
36
+ </div>
37
+ <button id="themeToggle" class="p-2 rounded-lg bg-gray-800 hover:bg-gray-700 transition-colors">
38
+ <i data-feather="moon" class="hidden"></i>
39
+ <i data-feather="sun" class="hidden"></i>
40
+ </button>
41
+ <button class="md:hidden p-2 rounded-lg bg-gray-800 hover:bg-gray-700 transition-colors">
42
+ <i data-feather="menu"></i>
43
+ </button>
44
+ </div>
45
+ </div>
46
+ </nav>
47
+
48
+ <!-- Hero Section -->
49
+ <section class="min-h-screen flex items-center justify-center relative overflow-hidden">
50
+ <div id="vanta-bg" class="absolute inset-0 z-0"></div>
51
+ <div class="container mx-auto px-6 text-center z-10">
52
+ <h1 class="text-5xl md:text-7xl font-bold mb-6 bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">Crafting Digital Dreams</h1>
53
+ <p class="text-xl md:text-2xl text-gray-300 mb-8 max-w-3xl mx-auto">Transforming ideas into interactive experiences through code, creativity, and cutting-edge technology.</p>
54
+ <div class="flex flex-col sm:flex-row gap-4 justify-center">
55
+ <a href="projects.html" class="bg-primary hover:bg-primary/90 text-white px-8 py-3 rounded-lg font-semibold transition-all transform hover:scale-105">Explore Projects</a>
56
+ <a href="contact.html" class="border border-secondary text-secondary hover:bg-secondary/10 px-8 py-3 rounded-lg font-semibold transition-all">Get In Touch</a>
57
+ </div>
58
+ </div>
59
+ <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce">
60
+ <i data-feather="chevron-down" class="text-gray-400"></i>
61
+ </div>
62
+ </section>
63
+
64
+ <!-- Featured Projects Preview -->
65
+ <section class="py-20 bg-gray-800/50">
66
+ <div class="container mx-auto px-6">
67
+ <h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Featured Projects</h2>
68
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
69
+ <!-- Project Card 1 -->
70
+ <div class="bg-gray-800 rounded-xl p-6 hover:transform hover:scale-105 transition-all duration-300 border border-gray-700 hover:border-primary/50">
71
+ <div class="w-full h-48 bg-gradient-to-br from-primary/20 to-secondary/20 rounded-lg mb-4 flex items-center justify-center">
72
+ <i data-feather="code" class="text-6xl text-primary"></i>
73
+ </div>
74
+ <h3 class="text-xl font-bold mb-2">Nexus Dashboard</h3>
75
+ <p class="text-gray-400 mb-4">Real-time analytics platform with interactive data visualization</p>
76
+ <div class="flex flex-wrap gap-2 mb-4">
77
+ <span class="bg-primary/20 text-primary px-3 py-1 rounded-full text-sm">React</span>
78
+ <span class="bg-secondary/20 text-secondary px-3 py-1 rounded-full text-sm">Node.js</span>
79
+ <span class="bg-gray-700 text-gray-300 px-3 py-1 rounded-full text-sm">MongoDB</span>
80
+ </div>
81
+ <a href="project-nexus.html" class="text-primary hover:text-primary/80 font-semibold flex items-center gap-2">
82
+ View Details <i data-feather="arrow-right" class="w-4 h-4"></i>
83
+ </a>
84
+ </div>
85
+
86
+ <!-- Project Card 2 -->
87
+ <div class="bg-gray-800 rounded-xl p-6 hover:transform hover:scale-105 transition-all duration-300 border border-gray-700 hover:border-primary/50">
88
+ <div class="w-full h-48 bg-gradient-to-br from-secondary/20 to-primary/20 rounded-lg mb-4 flex items-center justify-center">
89
+ <i data-feather="shopping-cart" class="text-6xl text-secondary"></i>
90
+ </div>
91
+ <h3 class="text-xl font-bold mb-2">Quantum Store</h3>
92
+ <p class="text-gray-400 mb-4">E-commerce platform with AI-powered recommendations</p>
93
+ <div class="flex flex-wrap gap-2 mb-4">
94
+ <span class="bg-primary/20 text-primary px-3 py-1 rounded-full text-sm">Vue.js</span>
95
+ <span class="bg-secondary/20 text-secondary px-3 py-1 rounded-full text-sm">Python</span>
96
+ <span class="bg-gray-700 text-gray-300 px-3 py-1 rounded-full text-sm">PostgreSQL</span>
97
+ </div>
98
+ <a href="project-quantum.html" class="text-primary hover:text-primary/80 font-semibold flex items-center gap-2">
99
+ View Details <i data-feather="arrow-right" class="w-4 h-4"></i>
100
+ </a>
101
+ </div>
102
+
103
+ <!-- Project Card 3 -->
104
+ <div class="bg-gray-800 rounded-xl p-6 hover:transform hover:scale-105 transition-all duration-300 border border-gray-700 hover:border-primary/50">
105
+ <div class="w-full h-48 bg-gradient-to-br from-primary/20 to-gray-600/20 rounded-lg mb-4 flex items-center justify-center">
106
+ <i data-feather="message-circle" class="text-6xl text-primary"></i>
107
+ </div>
108
+ <h3 class="text-xl font-bold mb-2">Nebula Chat</h3>
109
+ <p class="text-gray-400 mb-4">Real-time messaging app with end-to-end encryption</p>
110
+ <div class="flex flex-wrap gap-2 mb-4">
111
+ <span class="bg-primary/20 text-primary px-3 py-1 rounded-full text-sm">Socket.io</span>
112
+ <span class="bg-secondary/20 text-secondary px-3 py-1 rounded-full text-sm">Express</span>
113
+ <span class="bg-gray-700 text-gray-300 px-3 py-1 rounded-full text-sm">Redis</span>
114
+ </div>
115
+ <a href="project-nebula.html" class="text-primary hover:text-primary/80 font-semibold flex items-center gap-2">
116
+ View Details <i data-feather="arrow-right" class="w-4 h-4"></i>
117
+ </a>
118
+ </div>
119
+ </div>
120
+ <div class="text-center mt-12">
121
+ <a href="projects.html" class="inline-flex items-center gap-2 bg-secondary hover:bg-secondary/90 text-gray-900 px-6 py-3 rounded-lg font-semibold transition-all">
122
+ View All Projects <i data-feather="arrow-right" class="w-4 h-4"></i>
123
+ </a>
124
+ </div>
125
+ </div>
126
+ </section>
127
+
128
+ <!-- Footer -->
129
+ <footer class="bg-gray-800 border-t border-gray-700 py-12">
130
+ <div class="container mx-auto px-6">
131
+ <div class="grid md:grid-cols-4 gap-8">
132
+ <div>
133
+ <h3 class="text-xl font-bold mb-4 bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">CodeCraft.dev</h3>
134
+ <p class="text-gray-400">Building the future one line of code at a time.</p>
135
+ </div>
136
+ <div>
137
+ <h4 class="font-semibold mb-4">Quick Links</h4>
138
+ <ul class="space-y-2 text-gray-400">
139
+ <li><a href="index.html" class="hover:text-primary transition-colors">Home</a></li>
140
+ <li><a href="about.html" class="hover:text-primary transition-colors">About</a></li>
141
+ <li><a href="projects.html" class="hover:text-primary transition-colors">Projects</a></li>
142
+ <li><a href="contact.html" class="hover:text-primary transition-colors">Contact</a></li>
143
+ </ul>
144
+ </div>
145
+ <div>
146
+ <h4 class="font-semibold mb-4">Connect</h4>
147
+ <div class="flex space-x-4">
148
+ <a href="#" class="text-gray-400 hover:text-primary transition-colors"><i data-feather="github"></i></a>
149
+ <a href="#" class="text-gray-400 hover:text-primary transition-colors"><i data-feather="linkedin"></i></a>
150
+ <a href="#" class="text-gray-400 hover:text-primary transition-colors"><i data-feather="twitter"></i></a>
151
+ <a href="#" class="text-gray-400 hover:text-primary transition-colors"><i data-feather="mail"></i></a>
152
+ </div>
153
+ </div>
154
+ <div>
155
+ <h4 class="font-semibold mb-4">Newsletter</h4>
156
+ <div class="flex">
157
+ <input type="email" placeholder="Your email" class="bg-gray-700 text-white px-4 py-2 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-primary flex-1">
158
+ <button class="bg-primary hover:bg-primary/90 px-4 py-2 rounded-r-lg transition-colors">
159
+ <i data-feather="send" class="w-4 h-4"></i>
160
+ </button>
161
+ </div>
162
+ </div>
163
+ </div>
164
+ <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
165
+ <p>&copy; 2024 CodeCraft Portfolio. All rights reserved.</p>
166
+ </div>
167
+ </div>
168
+ </footer>
169
+
170
+ <script>
171
+ // Vanta.js Background
172
+ VANTA.NET({
173
+ el: "#vanta-bg",
174
+ mouseControls: true,
175
+ touchControls: true,
176
+ gyroControls: false,
177
+ minHeight: 200.00,
178
+ minWidth: 200.00,
179
+ scale: 1.00,
180
+ scaleMobile: 1.00,
181
+ color: 0x8b5cf6,
182
+ backgroundColor: 0x111827,
183
+ points: 12.00,
184
+ maxDistance: 25.00
185
+ });
186
+
187
+ // Theme Toggle
188
+ const themeToggle = document.getElementById('themeToggle');
189
+ const moonIcon = themeToggle.querySelector('feather[moon]');
190
+ const sunIcon = themeToggle.querySelector('feather[sun]');
191
+
192
+ if (localStorage.getItem('theme') === 'light') {
193
+ document.documentElement.classList.remove('dark');
194
+ sunIcon.classList.remove('hidden');
195
+ } else {
196
+ moonIcon.classList.remove('hidden');
197
+ }
198
+
199
+ themeToggle.addEventListener('click', () => {
200
+ document.documentElement.classList.toggle('dark');
201
+ if (document.documentElement.classList.contains('dark')) {
202
+ localStorage.setItem('theme', 'dark');
203
+ moonIcon.classList.remove('hidden');
204
+ sunIcon.classList.add('hidden');
205
+ } else {
206
+ localStorage.setItem('theme', 'light');
207
+ sunIcon.classList.remove('hidden');
208
+ moonIcon.classList.add('hidden');
209
+ }
210
+ });
211
+
212
+ // Initialize Feather Icons
213
+ feather.replace();
214
+ </script>
215
+ </body>
216
  </html>