Hugging Face's logo

Spaces:
BaberS
/
undefined
Running

App Files Community
BaberS commited on
Commit
43cea29
·
verified ·
1 Parent(s): c7eec78

This is my linkediN profile page > https://www.linkedin.com/in/babers/

Browse files
Files changed (3) hide show
  1. README.md +8 -4
  2. index.html +121 -19
  3. linkedin.html +79 -0
README.md CHANGED
@@ -1,10 +1,14 @@
1
  ---
2
- title: Undefined
3
- emoji: 🐢
4
- colorFrom: indigo
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: gray
 
4
  colorTo: red
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,121 @@
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">
47
+ <a href="linkedin.html" class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-blue-500 to-blue-600 rounded-lg font-medium hover:from-blue-600 hover:to-blue-700 transition-all">
48
+ <i data-feather="user" class="mr-2"></i>
49
+ View My LinkedIn Profile
50
+ </a>
51
+ </div>
52
+ </header>
53
+
54
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
55
+ <!-- Card 1 -->
56
+ <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">
57
+ <div class="flex items-center mb-4">
58
+ <div class="p-3 rounded-lg bg-blue-500 text-white mr-4">
59
+ <i data-feather="code"></i>
60
+ </div>
61
+ <h3 class="text-2xl font-bold">Flask Framework</h3>
62
+ </div>
63
+ <p class="text-gray-300 mb-4">Micro web framework written in Python. Perfect for building small to medium web applications.</p>
64
+ <div class="code-block text-sm mb-4">
65
+ <span class="python-keyword">from</span> flask <span class="python-keyword">import</span> Flask<br>
66
+ <br>
67
+ app = Flask(__name__)<br>
68
+ <br>
69
+ <span class="python-keyword">@app</span>.route(<span class="python-string">'/'</span>)<br>
70
+ <span class="python-keyword">def</span> <span class="python-function">home</span>():<br>
71
+ &nbsp;&nbsp;&nbsp;&nbsp;<span class="python-keyword">return</span> <span class="python-string">"Hello Python Web!"</span>
72
+ </div>
73
+ <a href="#" class="inline-flex items-center text-green-400 hover:text-green-300">
74
+ Learn more
75
+ <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
76
+ </a>
77
+ </div>
78
+
79
+ <!-- Card 2 -->
80
+ <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">
81
+ <div class="flex items-center mb-4">
82
+ <div class="p-3 rounded-lg bg-green-500 text-white mr-4">
83
+ <i data-feather="database"></i>
84
+ </div>
85
+ <h3 class="text-2xl font-bold">Django Power</h3>
86
+ </div>
87
+ <p class="text-gray-300 mb-4">High-level Python Web framework that encourages rapid development and clean, pragmatic design.</p>
88
+ <div class="code-block text-sm mb-4">
89
+ <span class="python-comment"># models.py</span><br>
90
+ <span class="python-keyword">from</span> django.db <span class="python-keyword">import</span> models<br>
91
+ <br>
92
+ <span class="python-keyword">class</span> <span class="python-function">BlogPost</span>(models.Model):<br>
93
+ &nbsp;&nbsp;&nbsp;&nbsp;title = models.CharField(max_length=100)<br>
94
+ &nbsp;&nbsp;&nbsp;&nbsp;content = models.TextField()<br>
95
+ &nbsp;&nbsp;&nbsp;&nbsp;published_date = models.DateTimeField(auto_now_add=True)
96
+ </div>
97
+ <a href="#" class="inline-flex items-center text-blue-400 hover:text-blue-300">
98
+ Learn more
99
+ <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
100
+ </a>
101
+ </div>
102
+
103
+ <!-- Card 3 -->
104
+ <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">
105
+ <div class="flex items-center mb-4">
106
+ <div class="p-3 rounded-lg bg-purple-500 text-white mr-4">
107
+ <i data-feather="zap"></i>
108
+ </div>
109
+ <h3 class="text-2xl font-bold">FastAPI Speed</h3>
110
+ </div>
111
+ <p class="text-gray-300 mb-4">Modern, fast (high-performance) web framework for building APIs with Python 3.7+.</p>
112
+ <div class="code-block text-sm mb-4">
113
+ <span class="python-keyword">from</span> fastapi <span class="python-keyword">import</span> FastAPI<br>
114
+ <span class="python-keyword">from</span> pydantic <span class="python-keyword">import</span> BaseModel<br>
115
+ <br>
116
+ app = FastAPI()<br>
117
+ <br>
118
+ <span class="python-keyword">class</span> <span class="python-function">Item</span>(BaseModel):<br>
119
+ &nbsp;&nbsp;&nbsp;&nbsp;name: str<br
120
+ </body>
121
+ </html>
linkedin.html ADDED
@@ -0,0 +1,79 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>My LinkedIn Profile | Code Wizard's Linked Lounge</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
+ <style>
11
+ .linkedin-card {
12
+ background: linear-gradient(135deg, #0077b5 0%, #00a0dc 100%);
13
+ }
14
+ .skill-pill {
15
+ background-color: rgba(255,255,255,0.1);
16
+ backdrop-filter: blur(10px);
17
+ }
18
+ </style>
19
+ </head>
20
+ <body class="bg-gray-100 min-h-screen">
21
+ <div class="container mx-auto px-4 py-12">
22
+ <div class="max-w-4xl mx-auto">
23
+ <!-- LinkedIn Profile Card -->
24
+ <div class="linkedin-card rounded-xl shadow-2xl overflow-hidden text-white mb-12">
25
+ <div class="p-8 md:p-12 flex flex-col md:flex-row items-center">
26
+ <div class="w-32 h-32 md:w-48 md:h-48 rounded-full border-4 border-white overflow-hidden mb-6 md:mb-0 md:mr-8">
27
+ <img src="http://static.photos/people/320x240/42" alt="Profile" class="w-full h-full object-cover">
28
+ </div>
29
+ <div class="flex-1 text-center md:text-left">
30
+ <h1 class="text-3xl md:text-4xl font-bold mb-2">Bader Alrashed</h1>
31
+ <p class="text-xl opacity-90 mb-4">Software Engineer & Web Developer</p>
32
+ <div class="flex flex-wrap justify-center md:justify-start gap-2 mb-6">
33
+ <span class="skill-pill px-4 py-1 rounded-full">Python</span>
34
+ <span class="skill-pill px-4 py-1 rounded-full">JavaScript</span>
35
+ <span class="skill-pill px-4 py-1 rounded-full">HTML/CSS</span>
36
+ <span class="skill-pill px-4 py-1 rounded-full">React</span>
37
+ </div>
38
+ <a href="https://www.linkedin.com/in/babers/" target="_blank" class="inline-flex items-center bg-white text-blue-700 px-6 py-3 rounded-lg font-medium hover:bg-opacity-90 transition">
39
+ <i data-feather="linkedin" class="mr-2"></i>
40
+ View My LinkedIn Profile
41
+ </a>
42
+ </div>
43
+ </div>
44
+ </div>
45
+
46
+ <!-- Experience Section -->
47
+ <div class="bg-white rounded-xl shadow-lg p-8 mb-8">
48
+ <h2 class="text-2xl font-bold text-gray-800 mb-6">Professional Experience</h2>
49
+ <div class="space-y-6">
50
+ <div class="border-l-4 border-blue-500 pl-6 py-1">
51
+ <h3 class="text-xl font-semibold">Senior Software Engineer</h3>
52
+ <p class="text-gray-600">XYZ Company • 2020 - Present</p>
53
+ <p class="text-gray-700 mt-2">Leading development of web applications using modern JavaScript frameworks and Python backend services.</p>
54
+ </div>
55
+ <div class="border-l-4 border-blue-500 pl-6 py-1">
56
+ <h3 class="text-xl font-semibold">Web Developer</h3>
57
+ <p class="text-gray-600">ABC Tech • 2017 - 2020</p>
58
+ <p class="text-gray-700 mt-2">Developed and maintained multiple client websites with responsive design and CMS integrations.</p>
59
+ </div>
60
+ </div>
61
+ </div>
62
+
63
+ <!-- Education Section -->
64
+ <div class="bg-white rounded-xl shadow-lg p-8">
65
+ <h2 class="text-2xl font-bold text-gray-800 mb-6">Education</h2>
66
+ <div class="border-l-4 border-blue-500 pl-6 py-1">
67
+ <h3 class="text-xl font-semibold">Bachelor of Computer Science</h3>
68
+ <p class="text-gray-600">University of Technology • 2013 - 2017</p>
69
+ <p class="text-gray-700 mt-2">Specialized in Software Engineering and Web Development.</p>
70
+ </div>
71
+ </div>
72
+ </div>
73
+ </div>
74
+
75
+ <script>
76
+ feather.replace();
77
+ </script>
78
+ </body>
79
+ </html>