Hugging Face's logo

Spaces:
JAYASWAROOP
/
portfolio1
Running

App Files Community
portfolio1
File size: 9,026 Bytes 
287547d
 
 
 
 
 
 
 
84e4e31
 
 
0a70f12
84e4e31
 
287547d
 
d83a6c7
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
287547d
 
d83a6c7
 
 
 
 
 
 
 
 
287547d
 
 
 
 
 
 
 
 
 
 
 
fd04485
 
 
 
 
 
 
 
 
 
 
 
 
 
287547d
 
fd04485
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
287547d
 
5179094
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
287547d
 
 
5179094
 
 
 
24c8ad3
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
5179094
 
287547d
1904640
 
 
 
 
 
 
287547d
1904640
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
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
 
<!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"> <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="https://thumbs.dreamstime.com/b/default-avatar-profile-image-vector-social-media-user-icon-potrait-182347582.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">
          <svg class="custom-icon" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
            </svg>
          <h3>Technical Skills</h3>
          <ul class="skills-list">
            <li>HTML & CSS: <div class="progress"><div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div></li>
            <li>JavaScript: <div class="progress"><div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div></li>
            <li>Bootstrap</li>
            <li>Python (Basic)</li>
          </ul>
        </div>
      </div>
      <div class="col">
        <div class="skill-card">
          <svg class="custom-icon" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
            </svg>
          <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 g-4 portfolio-grid"> <div class="col-md-6 portfolio-item">
        <div class="card h-100 shadow-sm overflow-hidden"> <img src="images/project-1.jpg" class="card-img-top" alt="Project 1">
          <div class="card-body d-flex flex-column justify-content-between"> <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 mt-auto">View Details</a> </div>
        </div>
      </div>

      <div class="col-md-6 portfolio-item">
        <div class="card h-100 shadow-sm overflow-hidden">
          <img src="images/project-2.jpg" class="card-img-top" alt="Project 2">
          <div class="card-body d-flex flex-column justify-content-between">
            <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 mt-auto">View Details</a>
          </div>
        </div>
      </div>

    </div>
  </div>
</section>
    <section class="education" id="education">
  <div class="container">
    <h2>Education</h2>
    <div class="timeline">
      <div class="timeline-item">
        <div class="timeline-badge"><i class="fas fa-graduation-cap"></i></div>
        <div class="timeline-content">
          <h3>Bachelor of Science in Computer Science</h3>
          <p>University Name, City, State - Graduation Year</p>
        </div>
      </div>
      </div>
  </div>
</section>

    <section class="contact-details" id="contact-details">
  <div class="container">
    <h2>Contact Details</h2>
    <p>Get in touch with me using the following information:</p>
    <ul class="list-unstyled">
      <li><i class="fas fa-envelope me-2"></i><a href="mailto:[email protected]">[email protected]</a></li>
      </ul>
  </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 rounded-pill">Send Message</button>
    </form>

    <div class="social-media d-flex justify-content-center mt-5">
      <a href="#" class="social-link mx-3 text-secondary"><i class="fab fa-linkedin"></i></a>
      <a href="#" class="social-link mx-3 text-secondary"><i class="fab fa-github"></i></a>
      <a href="#" class="social-link mx-3 text-secondary"><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>