Hugging Face's logo

Spaces:
JAYASWAROOP
/
portfolio1
Running

App Files Community
portfolio1
File size: 7,748 Bytes 
287547d
 
 
 
 
 
 
 
84e4e31
 
 
0a70f12
84e4e31
 
287547d
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
84e4e31
a5e8c36
 
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
 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>John Doe | Portfolio</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6OPTAhW3z8h6sEHuJIW+jozS3dBmVvzqJlL/t49giMAe7qT8yWHH2ePywxAwGnU1zZz8wEjWvmhsQ05O3Q8w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0vznvYBk4//SYzxbv4RDs09cLt7qVCJStxv4b89lZcW" crossorigin="anonymous"></script>

  <link rel="stylesheet" href="style.css">
  
</head>
<body>

  <header class="header">
    <nav class="navbar navbar-expand-lg navbar-light bg-transparent fixed-top">
      <div class="container-fluid">
        <a class="navbar-brand" href="#home">John Doe</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#home">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#about">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#skills">Skills</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#portfolio">Portfolio</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#contact">Contact</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <div class="hero d-flex flex-column justify-content-center align-items-center" id="home">
      <img src="images/profile.jpg" alt="Profile Photo" class="rounded-circle profile-img mb-3"> <h1>John Doe</h1>
      <p>Web Developer & Designer</p>
      <a href="#about" class="btn btn-primary mt-3">Learn More</a>
    </div>
  </header>

  <main class="content">
    <section class="about" id="about">
      <div class="container">
        <h2>About Me</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed urna leo. In id leo in risus ullamcorper porta. Vivamus vel nisl ac augue tincidunt laoreet nec eget massa. Donec vitae leo at nibh rutrum faucibus. Nam sed vestibulum elit. Nulla eget mauris eu libero rhoncus aliquam. Fusce vitae magna eu elit placerat aliquam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nulla vitae elit libero, a pharetra augue. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Aenean eu
        <p>I am a passionate and creative individual with a strong background in web development and design. I have 5 years of experience in building user-friendly and responsive websites, and I am proficient in various technologies including HTML, CSS, JavaScript, and Bootstrap. I am always eager to learn new things and expand my skillset, and I am highly motivated to contribute my knowledge and abilities to challenging and rewarding projects.</p>
        <p>In my free time, I enjoy playing basketball and learning new programming languages. These activities allow me to stay active, challenge myself, and enhance my problem-solving skills.</p>
      </div>
    </section>

    <section class="skills" id="skills">
      <div class="container">
        <h2>Skills</h2>
        <div class="row row-cols-1 row-cols-md-2 g-4">
          <div class="col">
            <div class="skill-card">
              <i class="fas fa-code"></i>
              <h3>Technical Skills</h3>
              <ul class="skills-list">
                <li>HTML & CSS</li>
                <li>JavaScript</li>
                <li>Bootstrap</li>
                <li>Python (Basic)</li>
              </ul>
            </div>
          </div>
          <div class="col">
            <div class="skill-card">
              <i class="fas fa-handshake"></i>
              <h3>Soft Skills</h3>
              <ul class="skills-list">
                <li>Teamwork</li>
                <li>Time Management</li>
                <li>Communication</li>
                <li>Problem Solving</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="portfolio" id="portfolio">
      <div class="container">
        <h2>Portfolio</h2>
        <div class="row">
          <div class="col-md-6 portfolio-item">
            <div class="card h-100">
              <img src="images/project-1.jpg" class="card-img-top" alt="Project 1">
              <div class="card-body">
                <h5 class="card-title">E-commerce Website</h5>
                <p class="card-text">A user-friendly e-commerce website built with HTML, CSS, JavaScript, and Bootstrap.</p>
                <a href="#" class="btn btn-primary">View Details</a>
              </div>
            </div>
          </div>
          <div class="col-md-6 portfolio-item">
            <div class="card h-100">
              <img src="images/project-2.jpg" class="card-img-top" alt="Project 2">
              <div class="card-body">
                <h5 class="card-title">Personal Portfolio Website</h5>
                <p class="card-text">A responsive personal portfolio website showcasing my skills and experience.</p>
                <a href="#" class="btn btn-primary">View Details</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section class="contact" id="contact">
      <div class="container">
        <h2>Contact Me</h2>
        <p>I am always open to new opportunities and collaborations. Feel free to reach out to me using the form below or by any of the methods listed.</p>
        <form id="contact-form">
          <div class="mb-3">
            <label for="name" class="form-label">Your Name</label>
            <input type="text" class="form-control" id="name" required>
          </div>
          <div class="mb-3">
            <label for="email" class="form-label">Email Address</label>
            <input type="email" class="form-control" id="email" required>
          </div>
          <div class="mb-3">
            <label for="message" class="form-label">Message</label>
            <textarea class="form-control" id="message" rows="3" required></textarea>
          </div>
          <button type="submit" class="btn btn-primary">Send Message</button>
        </form>

        <div class="social-media mt-5">
          <a href="#" class="social-link"><i class="fab fa-linkedin"></i></a>
          <a href="#" class="social-link"><i class="fab fa-github"></i></a>
          <a href="#" class="social-link"><i class="fab fa-twitter"></i></a>
        </div>
      </div>
    </section>
  </main>

  <footer class="footer">
    <div class="container text-center">
      <p>&copy; 2024 John Doe. All rights reserved.</p>
    </div>
  </footer>

  </body>
</html>