Hugging Face's logo

Spaces:
JAYASWAROOP
/
portfolio
Running

App Files Community
JAYASWAROOP commited on
Commit
71963ab
·
1 Parent(s): e5eec27

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +320 -18
index.html CHANGED
@@ -1,19 +1,321 @@
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>Web Designer Portfolio</title>
7
+ <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
8
+ <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
10
+ <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
11
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
12
+
13
+ <link rel="stylesheet" href="style.css" />
14
+ </head>
15
+ <body>
16
+ <!-- Navbar -->
17
+
18
+ <nav class="navbar navbar-expand-lg navbar-light bg-light">
19
+ <a class="navbar-brand" href="#"><img src="C:\Users\Jayasekhar\Desktop\logo.jpg" class="img1"/><span class="ml-3">Jayaswaroop</span></a>
20
+
21
+ <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
22
+ <span class="navbar-toggler-icon"></span>
23
+ </button>
24
+ <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
25
+ <div class="navbar-nav ml-auto">
26
+ <a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
27
+ <a class="nav-link active" href="#about">About</a>
28
+ <a class="nav-link active" href="#projects">Projects</a>
29
+ <a class="nav-link active" href="#skills">Skills</a>
30
+ <a class="nav-link active" href="#education">Education</a>
31
+ <a class="nav-link active" href="#contact">Contact</a>
32
+ </div>
33
+ </div>
34
+ </nav>
35
+
36
+
37
+
38
+ <!-- Hero Section -->
39
+ <section class="bg-image">
40
+ <div class="hero-text">
41
+ <div class="container">
42
+ <div class="row">
43
+ <!-- Profile Picture Container (Right Side) -->
44
+ <div class="col-md-6 order-md-2 text-center">
45
+ <img src="C:\Users\Jayasekhar\Desktop\jaya.jpg" alt="Profile Picture" class="profile-pic">
46
+ </div>
47
+ <!-- Name & Description (Left Side) -->
48
+ <div class="col-md-6 order-md-1">
49
+ <div style="margin-top: 124px;" class="d-none d-md-block">
50
+ <h1>D Jayaswaroop</h1>
51
+ <p>Some description about yourself. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
52
+ venenatis
53
+ mauris a dolor malesuada, eu fringilla nulla ullamcorper.</p>
54
+ </div>
55
+ <div class="d-md-none">
56
+ <h1>D Jayaswaroop</h1>
57
+ <p>Some description about yourself. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
58
+ venenatis
59
+ mauris a dolor malesuada, eu fringilla nulla ullamcorper.</p>
60
+ </div>
61
+ </div>
62
+ </div>
63
+ </div>
64
+ </div>
65
+ </section>
66
+
67
+
68
+ <!-- About Section -->
69
+ <section id="about" class="bg-light py-5">
70
+ <div class="container">
71
+ <div class="row">
72
+ <div class="col-md-6">
73
+ <h2>About Me</h2>
74
+ <p>Hi, I'm Jayaswaroop, a passionate web designer dedicated to crafting visually appealing and functional websites.</p>
75
+ </div>
76
+ <div class="col-md-6">
77
+ <h2>My Approach</h2>
78
+ <ul>
79
+ <li>Understanding client needs</li>
80
+ <li>Implementing user-centric designs</li>
81
+ <li>Ensuring accessibility and responsiveness</li>
82
+ </ul>
83
+ </div>
84
+ </div>
85
+ </div>
86
+ </section>
87
+
88
+ <!-- Projects Section -->
89
+ <section id="projects" class="py-5">
90
+ <div class="container">
91
+ <h2 class="text-center mb-5">Featured Projects</h2>
92
+ <div class="row row-cols-2 row-cols-md-5 g-4">
93
+ <!-- Sample Project Cards -->
94
+ <div class="col">
95
+ <div class="card mb-4">
96
+ <img src="https://via.placeholder.com/400x250" class="card-img-top" alt="Project 1">
97
+ <div class="card-body">
98
+ <h5 class="card-title">Project 1</h5>
99
+ <p class="card-text">Description of project 1 goes here.</p>
100
+ <a href="#" class="btn btn-primary">View Project</a>
101
+ </div>
102
+ </div>
103
+ </div>
104
+ <div class="col">
105
+ <div class="card mb-4">
106
+ <img src="https://via.placeholder.com/400x250" class="card-img-top" alt="Project 1">
107
+ <div class="card-body">
108
+ <h5 class="card-title">Project 1</h5>
109
+ <p class="card-text">Description of project 1 goes here.</p>
110
+ <a href="#" class="btn btn-primary">View Project</a>
111
+ </div>
112
+ </div>
113
+ </div>
114
+
115
+ <div class="col">
116
+ <div class="card mb-4">
117
+ <img src="https://via.placeholder.com/400x250" class="card-img-top" alt="Project 1">
118
+ <div class="card-body">
119
+ <h5 class="card-title">Project 1</h5>
120
+ <p class="card-text">Description of project 1 goes here.</p>
121
+ <a href="#" class="btn btn-primary">View Project</a>
122
+ </div>
123
+ </div>
124
+ </div>
125
+ <div class="col">
126
+ <div class="card mb-4">
127
+ <img src="https://via.placeholder.com/400x250" class="card-img-top" alt="Project 1">
128
+ <div class="card-body">
129
+ <h5 class="card-title">Project 1</h5>
130
+ <p class="card-text">Description of project 1 goes here.</p>
131
+ <a href="#" class="btn btn-primary">View Project</a>
132
+ </div>
133
+ </div>
134
+ </div>
135
+ <div class="col">
136
+ <div class="card mb-4">
137
+ <img src="https://via.placeholder.com/400x250" class="card-img-top" alt="Project 1">
138
+ <div class="card-body">
139
+ <h5 class="card-title">Project 1</h5>
140
+ <p class="card-text">Description of project 1 goes here.</p>
141
+ <a href="#" class="btn btn-primary">View Project</a>
142
+ </div>
143
+ </div>
144
+ </div>
145
+ <!-- Add more project cards here -->
146
+ </div>
147
+ </div>
148
+ </section>
149
+
150
+
151
+ <!-- Skills Section -->
152
+ <section id="skills" class="bg-light py-5">
153
+ <div class="container">
154
+ <h2 class="text-center mb-5">Skills</h2>
155
+ <div class="row row-cols-1 row-cols-md-3 g-4">
156
+ <div class="col">
157
+ <div class="card mb-4">
158
+ <div class="card-body">
159
+ <h5 class="card-title">HTML</h5>
160
+ <p class="card-text">Proficient in creating semantic and accessible HTML structures.</p>
161
+ </div>
162
+ </div>
163
+ </div>
164
+ <div class="col">
165
+ <div class="card mb-4">
166
+ <div class="card-body">
167
+ <h5 class="card-title">CSS</h5>
168
+ <p class="card-text">Skilled in crafting visually appealing and responsive designs with CSS.</p>
169
+ </div>
170
+ </div>
171
+ </div>
172
+ <div class="col">
173
+ <div class="card mb-4">
174
+ <div class="card-body">
175
+ <h5 class="card-title">JavaScript</h5>
176
+ <p class="card-text">Knowledgeable in implementing interactive features using JavaScript.</p>
177
+ </div>
178
+ </div>
179
+ </div>
180
+ <div class="col">
181
+ <div class="card mb-4">
182
+ <div class="card-body">
183
+ <h5 class="card-title">Bootstrap</h5>
184
+ <p class="card-text">Experience in utilizing Bootstrap for responsive web development.</p>
185
+ </div>
186
+ </div>
187
+ </div>
188
+ <div class="col">
189
+ <div class="card mb-4">
190
+ <div class="card-body">
191
+ <h5 class="card-title">C</h5>
192
+ <p class="card-text">Proficiency in programming using the C language.</p>
193
+ </div>
194
+ </div>
195
+ </div>
196
+ <div class="col">
197
+ <div class="card mb-4">
198
+ <div class="card-body">
199
+ <h5 class="card-title">C++</h5>
200
+ <p class="card-text">Knowledge and experience in C++ programming.</p>
201
+ </div>
202
+ </div>
203
+ </div>
204
+ <div class="col">
205
+ <div class="card mb-4">
206
+ <div class="card-body">
207
+ <h5 class="card-title">Python</h5>
208
+ <p class="card-text">Proficient in Python programming language for various applications.</p>
209
+ </div>
210
+ </div>
211
+ </div>
212
+ <div class="col">
213
+ <div class="card mb-4">
214
+ <div class="card-body">
215
+ <h5 class="card-title">XPM 4.0</h5>
216
+ <p class="card-text">Familiarity with XPM 4.0 for specific use cases.</p>
217
+ </div>
218
+ </div>
219
+ </div>
220
+ </div>
221
+ </div>
222
+ </section>
223
+
224
+
225
+ <!-- Education Section -->
226
+ <section id="education" class="py-5">
227
+ <div class="container">
228
+ <h2 class="text-center mb-5">Education</h2>
229
+ <ul>
230
+ <li>Bachelor of Science in Computer Science</li>
231
+ <li>Specialization: Web Design</li>
232
+ <li>Graduated from ABC University, 2015 - 2019</li>
233
+ </ul>
234
+ </div>
235
+ </div>
236
+ </section>
237
+
238
+
239
+ <section id="contact" class="bg-light py-5">
240
+ <div class="container">
241
+ <h2 class="text-center mb-4">Contact Information</h2>
242
+ <div class="row">
243
+ <div class="col-md-6">
244
+ <h4>Mobile Number</h4>
245
+ <p>+1 (123) 456-7890</p>
246
+ <h4>Email</h4>
247
+ <p>[email protected]</p>
248
+ <h4>Address</h4>
249
+ <p>123 Street Name, City, Country</p>
250
+ </div>
251
+ </div>
252
+ </div>
253
+ </section>
254
+
255
+
256
+ <section id="social-media" class="py-4">
257
+ <div class="container text-center">
258
+ <h2 class="mb-4">Follow Me</h2>
259
+ <div class="social-icons">
260
+ <a href="https://www.facebook.com/yourprofile" class="social-icon bg-dark">
261
+ <i class="fab fa-facebook-f"></i>
262
+ </a>
263
+ <a href="https://www.twitter.com/yourprofile" class="social-icon bg-dark">
264
+ <i class="fab fa-twitter"></i>
265
+ </a>
266
+ <a href="https://www.linkedin.com/in/yourprofile" class="social-icon bg-dark">
267
+ <i class="fab fa-linkedin-in"></i>
268
+ </a>
269
+ <a href="https://www.instagram.com/yourprofile" class="social-icon bg-dark">
270
+ <i class="fab fa-instagram"></i>
271
+ </a>
272
+ <a href="https://www.youtube.com/yourprofile" class="social-icon bg-dark">
273
+ <i class="fab fa-youtube"></i>
274
+ </a>
275
+ <!-- Add more social icons as needed -->
276
+ </div>
277
+ </div>
278
+ </section>
279
+
280
+
281
+
282
+
283
+ <!-- Contact Section -->
284
+ <section id="contact" class="bg-light py-5">
285
+ <div class="container">
286
+ <h2 class="text-center mb-5">Contact Me</h2>
287
+ <form>
288
+ <div class="row">
289
+ <div class="col-md-6">
290
+ <div class="form-group">
291
+ <label for="name">Name</label>
292
+ <input type="text" class="form-control" id="name" placeholder="Your name">
293
+ </div>
294
+ </div>
295
+ <div class="col-md-6">
296
+ <div class="form-group">
297
+ <label for="email">Email</label>
298
+ <input type="email" class="form-control" id="email" placeholder="Your email">
299
+ </div>
300
+ </div>
301
+ </div>
302
+ <div class="form-group">
303
+ <label for="message">Message</label>
304
+ <textarea class="form-control" id="message" rows="5" placeholder="Your message"></textarea>
305
+ </div>
306
+ <button type="submit" class="btn btn-primary mt-3">Submit</button>
307
+ </form>
308
+ </div>
309
+ </section>
310
+
311
+ <!-- Footer Section -->
312
+ <footer class="footer py-3">
313
+ <div class="container">
314
+ <p class="m-0 text-center text-white">&copy; 2024 Web Designer Portfolio</p>
315
+ </div>
316
+ </footer>
317
+
318
+ <!-- Bootstrap JS Bundle with Popper -->
319
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
320
+ </body>
321
+ </html>