Hugging Face's logo

Spaces:
BaberS
/
codeartisan-nexus
Running

App Files Community
BaberS commited on
Commit
313903e
·
verified ·
1 Parent(s): bdb551c

This is my linkediN profile page > https://www.linkedin.com/in/babers/ . Create a stunning, sharp looking, elegant and professional personal web site

Browse files
Files changed (3) hide show
  1. README.md +8 -4
  2. index.html +123 -19
  3. portfolio.html +121 -0
README.md CHANGED
@@ -1,10 +1,14 @@
1
  ---
2
- title: Codeartisan Nexus
3
- emoji: 📊
4
  colorFrom: green
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: CodeArtisan Nexus ✨
 
3
  colorFrom: green
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).
14
+
index.html CHANGED
@@ -1,19 +1,123 @@
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>Pythonic Wonderland</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/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
12
+ <style>
13
+ .code-block {
14
+ font-family: 'Courier New', monospace;
15
+ background-color: #1e1e1e;
16
+ color: #9cdcfe;
17
+ border-radius: 0.5rem;
18
+ padding: 1.5rem;
19
+ overflow-x: auto;
20
+ }
21
+ .python-keyword {
22
+ color: #569cd6;
23
+ }
24
+ .python-string {
25
+ color: #ce9178;
26
+ }
27
+ .python-comment {
28
+ color: #6a9955;
29
+ }
30
+ .python-function {
31
+ color: #dcdcaa;
32
+ }
33
+ </style>
34
+ </head>
35
+ <body class="bg-gray-900 text-white min-h-screen">
36
+ <div id="vanta-background" class="fixed inset-0 z-0"></div>
37
+
38
+ <div class="relative z-10 container mx-auto px-4 py-16">
39
+ <header class="text-center mb-16">
40
+ <h1 class="text-5xl md:text-7xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-green-400">
41
+ Pythonic Wonderland
42
+ </h1>
43
+ <p class="text-xl md:text-2xl text-gray-300 max-w-3xl mx-auto">
44
+ Where Python dreams become web reality
45
+ </p>
46
+ <div class="mt-8 flex justify-center space-x-4">
47
+ <a href="portfolio.html" class="px-6 py-3 bg-gradient-to-r from-blue-500 to-green-500 rounded-lg font-medium hover:opacity-90 transition-opacity">
48
+ View My Portfolio
49
+ </a>
50
+ <a href="https://www.linkedin.com/in/babers/" target="_blank" class="px-6 py-3 bg-gray-800 rounded-lg font-medium hover:bg-gray-700 transition-colors flex items-center">
51
+ <i data-feather="linkedin" class="mr-2"></i> LinkedIn
52
+ </a>
53
+ </div>
54
+ </header>
55
+
56
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
57
+ <!-- Card 1 -->
58
+ <div class="bg-gray-800 bg-opacity-70 backdrop-blur-lg rounded-xl p-6 border border-gray-700 transform hover:scale-105 transition duration-300 hover:shadow-xl hover:shadow-green-500/10">
59
+ <div class="flex items-center mb-4">
60
+ <div class="p-3 rounded-lg bg-blue-500 text-white mr-4">
61
+ <i data-feather="code"></i>
62
+ </div>
63
+ <h3 class="text-2xl font-bold">Flask Framework</h3>
64
+ </div>
65
+ <p class="text-gray-300 mb-4">Micro web framework written in Python. Perfect for building small to medium web applications.</p>
66
+ <div class="code-block text-sm mb-4">
67
+ <span class="python-keyword">from</span> flask <span class="python-keyword">import</span> Flask<br>
68
+ <br>
69
+ app = Flask(__name__)<br>
70
+ <br>
71
+ <span class="python-keyword">@app</span>.route(<span class="python-string">'/'</span>)<br>
72
+ <span class="python-keyword">def</span> <span class="python-function">home</span>():<br>
73
+ &nbsp;&nbsp;&nbsp;&nbsp;<span class="python-keyword">return</span> <span class="python-string">"Hello Python Web!"</span>
74
+ </div>
75
+ <a href="#" class="inline-flex items-center text-green-400 hover:text-green-300">
76
+ Learn more
77
+ <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
78
+ </a>
79
+ </div>
80
+
81
+ <!-- Card 2 -->
82
+ <div class="bg-gray-800 bg-opacity-70 backdrop-blur-lg rounded-xl p-6 border border-gray-700 transform hover:scale-105 transition duration-300 hover:shadow-xl hover:shadow-blue-500/10">
83
+ <div class="flex items-center mb-4">
84
+ <div class="p-3 rounded-lg bg-green-500 text-white mr-4">
85
+ <i data-feather="database"></i>
86
+ </div>
87
+ <h3 class="text-2xl font-bold">Django Power</h3>
88
+ </div>
89
+ <p class="text-gray-300 mb-4">High-level Python Web framework that encourages rapid development and clean, pragmatic design.</p>
90
+ <div class="code-block text-sm mb-4">
91
+ <span class="python-comment"># models.py</span><br>
92
+ <span class="python-keyword">from</span> django.db <span class="python-keyword">import</span> models<br>
93
+ <br>
94
+ <span class="python-keyword">class</span> <span class="python-function">BlogPost</span>(models.Model):<br>
95
+ &nbsp;&nbsp;&nbsp;&nbsp;title = models.CharField(max_length=100)<br>
96
+ &nbsp;&nbsp;&nbsp;&nbsp;content = models.TextField()<br>
97
+ &nbsp;&nbsp;&nbsp;&nbsp;published_date = models.DateTimeField(auto_now_add=True)
98
+ </div>
99
+ <a href="#" class="inline-flex items-center text-blue-400 hover:text-blue-300">
100
+ Learn more
101
+ <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
102
+ </a>
103
+ </div>
104
+
105
+ <!-- Card 3 -->
106
+ <div class="bg-gray-800 bg-opacity-70 backdrop-blur-lg rounded-xl p-6 border border-gray-700 transform hover:scale-105 transition duration-300 hover:shadow-xl hover:shadow-purple-500/10">
107
+ <div class="flex items-center mb-4">
108
+ <div class="p-3 rounded-lg bg-purple-500 text-white mr-4">
109
+ <i data-feather="zap"></i>
110
+ </div>
111
+ <h3 class="text-2xl font-bold">FastAPI Speed</h3>
112
+ </div>
113
+ <p class="text-gray-300 mb-4">Modern, fast (high-performance) web framework for building APIs with Python 3.7+.</p>
114
+ <div class="code-block text-sm mb-4">
115
+ <span class="python-keyword">from</span> fastapi <span class="python-keyword">import</span> FastAPI<br>
116
+ <span class="python-keyword">from</span> pydantic <span class="python-keyword">import</span> BaseModel<br>
117
+ <br>
118
+ app = FastAPI()<br>
119
+ <br>
120
+ <span class="python-keyword">class</span> <span class="python-function">Item</span>(BaseModel):<br>
121
+ &nbsp;&nbsp;&nbsp;&nbsp;name: str<br
122
+ </body>
123
+ </html>
portfolio.html ADDED
@@ -0,0 +1,121 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Bader's Portfolio | Code Artisan</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
+ <style>
12
+ .glass-card {
13
+ background: rgba(255, 255, 255, 0.1);
14
+ backdrop-filter: blur(15px);
15
+ border: 1px solid rgba(255, 255, 255, 0.18);
16
+ }
17
+ .gradient-text {
18
+ background: linear-gradient(90deg, #3b82f6, #8b5cf6);
19
+ -webkit-background-clip: text;
20
+ background-clip: text;
21
+ color: transparent;
22
+ }
23
+ </style>
24
+ </head>
25
+ <body class="bg-gray-900 text-white min-h-screen">
26
+ <div id="vanta-background" class="fixed inset-0 z-0"></div>
27
+
28
+ <div class="relative z-10 container mx-auto px-4 py-16">
29
+ <header class="flex flex-col md:flex-row items-center mb-16">
30
+ <div class="w-48 h-48 md:w-64 md:h-64 rounded-full overflow-hidden border-4 border-white/20 mb-6 md:mb-0 md:mr-12">
31
+ <img src="http://static.photos/technology/640x360/42" alt="Bader's Profile" class="w-full h-full object-cover">
32
+ </div>
33
+ <div>
34
+ <h1 class="text-4xl md:text-6xl font-bold mb-2">Bader Alrasheed</h1>
35
+ <h2 class="text-2xl md:text-3xl font-semibold mb-4 gradient-text">Full Stack Developer & AI Enthusiast</h2>
36
+ <div class="flex space-x-4">
37
+ <a href="https://www.linkedin.com/in/babers/" class="text-blue-400 hover:text-blue-300 transition-colors">
38
+ <i data-feather="linkedin"></i>
39
+ </a>
40
+ <a href="https://github.com/babers" class="text-gray-300 hover:text-white transition-colors">
41
+ <i data-feather="github"></i>
42
+ </a>
43
+ </div>
44
+ </div>
45
+ </header>
46
+
47
+ <section class="glass-card rounded-2xl p-8 mb-16">
48
+ <h3 class="text-2xl font-bold mb-6 gradient-text">About Me</h3>
49
+ <p class="text-lg text-gray-300 leading-relaxed">
50
+ Passionate full-stack developer with expertise in Python, JavaScript, and modern web technologies.
51
+ I specialize in creating elegant, performant solutions that solve real-world problems.
52
+ With a background in AI and machine learning, I bring a unique perspective to every project.
53
+ </p>
54
+ </section>
55
+
56
+ <section class="mb-16">
57
+ <h3 class="text-3xl font-bold mb-8 gradient-text">Featured Projects</h3>
58
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
59
+ <div class="glass-card rounded-xl p-6 hover:shadow-lg hover:shadow-blue-500/20 transition-shadow">
60
+ <h4 class="text-xl font-bold mb-2">AI-Powered Analytics Platform</h4>
61
+ <p class="text-gray-300 mb-4">Built with Python, TensorFlow, and React for real-time data insights</p>
62
+ <div class="flex flex-wrap gap-2">
63
+ <span class="px-3 py-1 bg-blue-900/50 rounded-full text-sm">Python</span>
64
+ <span class="px-3 py-1 bg-purple-900/50 rounded-full text-sm">TensorFlow</span>
65
+ <span class="px-3 py-1 bg-blue-800/50 rounded-full text-sm">React</span>
66
+ </div>
67
+ </div>
68
+ <div class="glass-card rounded-xl p-6 hover:shadow-lg hover:shadow-purple-500/20 transition-shadow">
69
+ <h4 class="text-xl font-bold mb-2">Blockchain Payment Gateway</h4>
70
+ <p class="text-gray-300 mb-4">Secure cryptocurrency payment processing system</p>
71
+ <div class="flex flex-wrap gap-2">
72
+ <span class="px-3 py-1 bg-yellow-900/50 rounded-full text-sm">Solidity</span>
73
+ <span class="px-3 py-1 bg-gray-800/50 rounded-full text-sm">Node.js</span>
74
+ <span class="px-3 py-1 bg-green-900/50 rounded-full text-sm">Ethereum</span>
75
+ </div>
76
+ </div>
77
+ </div>
78
+ </section>
79
+
80
+ <section class="glass-card rounded-2xl p-8">
81
+ <h3 class="text-2xl font-bold mb-6 gradient-text">Get In Touch</h3>
82
+ <form class="grid grid-cols-1 gap-6">
83
+ <div>
84
+ <label for="name" class="block text-gray-300 mb-2">Name</label>
85
+ <input type="text" id="name" class="w-full bg-gray-800/50 border border-gray-700 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500">
86
+ </div>
87
+ <div>
88
+ <label for="email" class="block text-gray-300 mb-2">Email</label>
89
+ <input type="email" id="email" class="w-full bg-gray-800/50 border border-gray-700 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500">
90
+ </div>
91
+ <div>
92
+ <label for="message" class="block text-gray-300 mb-2">Message</label>
93
+ <textarea id="message" rows="4" class="w-full bg-gray-800/50 border border-gray-700 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
94
+ </div>
95
+ <button type="submit" class="bg-gradient-to-r from-blue-500 to-purple-600 text-white font-medium py-3 px-6 rounded-lg hover:opacity-90 transition-opacity">
96
+ Send Message
97
+ </button>
98
+ </form>
99
+ </section>
100
+ </div>
101
+
102
+ <script>
103
+ VANTA.NET({
104
+ el: "#vanta-background",
105
+ mouseControls: true,
106
+ touchControls: true,
107
+ gyroControls: false,
108
+ minHeight: 200.00,
109
+ minWidth: 200.00,
110
+ scale: 1.00,
111
+ scaleMobile: 1.00,
112
+ color: 0x3b82f6,
113
+ backgroundColor: 0x111827,
114
+ points: 12.00,
115
+ maxDistance: 22.00,
116
+ spacing: 18.00
117
+ });
118
+ feather.replace();
119
+ </script>
120
+ </body>
121
+ </html>