Hugging Face's logo

Spaces:
JAYASWAROOP
/
portfolio
Running

App Files Community
portfolio
File size: 14,439 Bytes 
5cd9033
71963ab
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Designer Portfolio</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">

    <link rel="stylesheet" href="style.css" />   
</head>
<body>
    <!-- Navbar -->
    
      <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#"><img src="C:\Users\Jayasekhar\Desktop\logo.jpg" class="img1"/><span class="ml-3">Jayaswaroop</span></a>
          
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
          <div class="navbar-nav ml-auto">
            <a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
            <a class="nav-link active" href="#about">About</a>
              <a class="nav-link active" href="#projects">Projects</a>
              <a class="nav-link active" href="#skills">Skills</a>
              <a class="nav-link active" href="#education">Education</a>
              <a class="nav-link active" href="#contact">Contact</a>
          </div>
        </div>
      </nav>



    <!-- Hero Section -->
    <section class="bg-image">
        <div class="hero-text">
            <div class="container">
                <div class="row">
                    <!-- Profile Picture Container (Right Side) -->
                    <div class="col-md-6 order-md-2 text-center">
                        <img src="C:\Users\Jayasekhar\Desktop\jaya.jpg" alt="Profile Picture" class="profile-pic">
                    </div>
                    <!-- Name & Description (Left Side) -->
                    <div class="col-md-6 order-md-1">
                        <div style="margin-top: 124px;" class="d-none d-md-block">
                        <h1>D Jayaswaroop</h1>
                        <p>Some description about yourself. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
                            venenatis
                            mauris a dolor malesuada, eu fringilla nulla ullamcorper.</p>
                        </div>
                        <div class="d-md-none">
                            <h1>D Jayaswaroop</h1>
                            <p>Some description about yourself. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
                                venenatis
                                mauris a dolor malesuada, eu fringilla nulla ullamcorper.</p>
                            </div>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <!-- About Section -->
    <section id="about" class="bg-light py-5">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <h2>About Me</h2>
                    <p>Hi, I'm Jayaswaroop, a passionate web designer dedicated to crafting visually appealing and functional websites.</p>
                </div>
                <div class="col-md-6">
                    <h2>My Approach</h2>
                    <ul>
                        <li>Understanding client needs</li>
                        <li>Implementing user-centric designs</li>
                        <li>Ensuring accessibility and responsiveness</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <!-- Projects Section -->
    <section id="projects" class="py-5">
        <div class="container">
            <h2 class="text-center mb-5">Featured Projects</h2>
            <div class="row row-cols-2 row-cols-md-5 g-4">
                <!-- Sample Project Cards -->
                <div class="col">
                    <div class="card mb-4">
                        <img src="https://via.placeholder.com/400x250" class="card-img-top" alt="Project 1">
                        <div class="card-body">
                            <h5 class="card-title">Project 1</h5>
                            <p class="card-text">Description of project 1 goes here.</p>
                            <a href="#" class="btn btn-primary">View Project</a>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card mb-4">
                        <img src="https://via.placeholder.com/400x250" class="card-img-top" alt="Project 1">
                        <div class="card-body">
                            <h5 class="card-title">Project 1</h5>
                            <p class="card-text">Description of project 1 goes here.</p>
                            <a href="#" class="btn btn-primary">View Project</a>
                        </div>
                    </div>
                </div>
                
                <div class="col">
                    <div class="card mb-4">
                        <img src="https://via.placeholder.com/400x250" class="card-img-top" alt="Project 1">
                        <div class="card-body">
                            <h5 class="card-title">Project 1</h5>
                            <p class="card-text">Description of project 1 goes here.</p>
                            <a href="#" class="btn btn-primary">View Project</a>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card mb-4">
                        <img src="https://via.placeholder.com/400x250" class="card-img-top" alt="Project 1">
                        <div class="card-body">
                            <h5 class="card-title">Project 1</h5>
                            <p class="card-text">Description of project 1 goes here.</p>
                            <a href="#" class="btn btn-primary">View Project</a>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card mb-4">
                        <img src="https://via.placeholder.com/400x250" class="card-img-top" alt="Project 1">
                        <div class="card-body">
                            <h5 class="card-title">Project 1</h5>
                            <p class="card-text">Description of project 1 goes here.</p>
                            <a href="#" class="btn btn-primary">View Project</a>
                        </div>
                    </div>
                </div>
                <!-- Add more project cards here -->
            </div>
        </div>
    </section>


    <!-- Skills Section -->
    <section id="skills" class="bg-light py-5">
        <div class="container">
            <h2 class="text-center mb-5">Skills</h2>
            <div class="row row-cols-1 row-cols-md-3 g-4">
                <div class="col">
                    <div class="card mb-4">
                        <div class="card-body">
                            <h5 class="card-title">HTML</h5>
                            <p class="card-text">Proficient in creating semantic and accessible HTML structures.</p>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card mb-4">
                        <div class="card-body">
                            <h5 class="card-title">CSS</h5>
                            <p class="card-text">Skilled in crafting visually appealing and responsive designs with CSS.</p>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card mb-4">
                        <div class="card-body">
                            <h5 class="card-title">JavaScript</h5>
                            <p class="card-text">Knowledgeable in implementing interactive features using JavaScript.</p>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card mb-4">
                        <div class="card-body">
                            <h5 class="card-title">Bootstrap</h5>
                            <p class="card-text">Experience in utilizing Bootstrap for responsive web development.</p>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card mb-4">
                        <div class="card-body">
                            <h5 class="card-title">C</h5>
                            <p class="card-text">Proficiency in programming using the C language.</p>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card mb-4">
                        <div class="card-body">
                            <h5 class="card-title">C++</h5>
                            <p class="card-text">Knowledge and experience in C++ programming.</p>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card mb-4">
                        <div class="card-body">
                            <h5 class="card-title">Python</h5>
                            <p class="card-text">Proficient in Python programming language for various applications.</p>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card mb-4">
                        <div class="card-body">
                            <h5 class="card-title">XPM 4.0</h5>
                            <p class="card-text">Familiarity with XPM 4.0 for specific use cases.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    

    <!-- Education Section -->
    <section id="education" class="py-5">
        <div class="container">
            <h2 class="text-center mb-5">Education</h2>
            <ul>
                <li>Bachelor of Science in Computer Science</li>
                <li>Specialization: Web Design</li>
                <li>Graduated from ABC University, 2015 - 2019</li>
            </ul>
        </div>
       </div>
</section>


<section id="contact" class="bg-light py-5">
    <div class="container">
        <h2 class="text-center mb-4">Contact Information</h2>
        <div class="row">
            <div class="col-md-6">
                <h4>Mobile Number</h4>
                <p>+1 (123) 456-7890</p>
                <h4>Email</h4>
                <p>[email protected]</p>
                <h4>Address</h4>
                <p>123 Street Name, City, Country</p>
            </div>
        </div>
    </div>
</section>


<section id="social-media" class="py-4">
    <div class="container text-center">
        <h2 class="mb-4">Follow Me</h2>
        <div class="social-icons">
            <a href="https://www.facebook.com/yourprofile" class="social-icon bg-dark">
                <i class="fab fa-facebook-f"></i>
            </a>
            <a href="https://www.twitter.com/yourprofile" class="social-icon bg-dark">
                <i class="fab fa-twitter"></i>
            </a>
            <a href="https://www.linkedin.com/in/yourprofile" class="social-icon bg-dark">
                <i class="fab fa-linkedin-in"></i>
            </a>
            <a href="https://www.instagram.com/yourprofile" class="social-icon bg-dark">
                <i class="fab fa-instagram"></i>
            </a>
            <a href="https://www.youtube.com/yourprofile" class="social-icon bg-dark">
                <i class="fab fa-youtube"></i>
            </a>
            <!-- Add more social icons as needed -->
        </div>
    </div>
</section>




<!-- Contact Section -->
<section id="contact" class="bg-light py-5">
    <div class="container">
        <h2 class="text-center mb-5">Contact Me</h2>
        <form>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="name">Name</label>
                        <input type="text" class="form-control" id="name" placeholder="Your name">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="email">Email</label>
                        <input type="email" class="form-control" id="email" placeholder="Your email">
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label for="message">Message</label>
                <textarea class="form-control" id="message" rows="5" placeholder="Your message"></textarea>
            </div>
            <button type="submit" class="btn btn-primary mt-3">Submit</button>
        </form>
    </div>
</section>

<!-- Footer Section -->
<footer class="footer py-3">
    <div class="container">
        <p class="m-0 text-center text-white">&copy; 2024 Web Designer Portfolio</p>
    </div>
</footer>

<!-- Bootstrap JS Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>