Portfolio/index.html at main · JyotiSaxena1/Portfolio · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Jyoti Saxena | Portfolio</title>

  <!-- Meta tags for SEO -->
  <meta name="description" content="Jyoti Saxena Portfolio | IIIT Bhagalpur Student | Web Developer | Researcher | Designer" />
  <meta name="keywords" content="Jyoti Saxena, Portfolio, IIIT Bhagalpur, Web Developer, Researcher, Flood Detection, Image Segmentation" />
  <meta name="author" content="Jyoti Saxena" />
  <link rel="icon" href="images/favicon.ico" type="image/x-icon" />
  <link rel="stylesheet" href="style.css" />
  <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
</head>

<body>

  <!-- Header -->
  <header class="header">
    <a href="#" class="logo">JYOTI SAXENA<span class="animate" style="--i:1;"></span></a>
    <div class="bx bx-menu" id="menu-icon"><span class="animate" style="--i:2;"></span></div>

    <nav class="navbar">
      <a href="#home" class="active">Home</a>
      <a href="#about">About</a>
      <a href="#education">Education</a>
      <a href="#skills">Skills</a>
      <a href="#contact">Contact</a>
      <span class="active-nav"></span>
      <span class="animate" style="--i:2;"></span>
    </nav>
  </header>

  <!-- Home -->
  <section class="home show-animate" id="home">
  <div class="home-content">
    <h1>Hi, I'm <span>Jyoti</span><span class="animate" style="--i:2;"></span></h1>
    <div class="text-animate">
      <h3>Student | Developer | Designer</h3>
      <span class="animate" style="--i:3;"></span>
    </div>
    <p>
      I am an enthusiastic and self-driven learner from IIIT Bhagalpur, with strong interests in frontend design,
      research, and real-world impact through tech. I’m experienced in working on web projects, deep learning,
      and image segmentation models. I’m also proficient in DSA and programming in C, C++, and Python.
      <span class="animate" style="--i:4;"></span>
    </p>
    <div class="btn-box">
      <a href="#contact" class="btn">Hire Me</a>
      <a href="#contact" class="btn">Let's Talk</a>
      <span class="animate" style="--i:5;"></span>
    </div>
    <div class="home-sci">
      <a href="https://www.linkedin.com/in/jyoti-saxena-b7ab73294/" target="_blank"><i class='bx bxl-linkedin'></i></a>
      <a href="https://github.com/JyotiSaxena1" target="_blank"><i class='bx bxl-github'></i></a>
      <a href="https://www.instagram.com/" target="_blank"><i class='bx bxl-instagram'></i></a>
      <span class="animate" style="--i:6;"></span>
    </div>
  </div>
  <div class="home-img-container">
    <img src="images/jyoti.jpg" alt="Jyoti Photo" class="home-img" />
  </div>
</section>


  <!-- About -->
  <section class="about" id="about">
    <h2 class="heading">About <span>Me</span><span class="animate scroll" style="--i:1;"></span></h2>
    <div class="about-img">
      <img src="face.jpg" alt="My Photo" />
      <span class="circle-spin"></span>
      <span class="animate scroll" style="--i:2;"></span>
    </div>
    <div class="about-content">
      <h3>Hey there! Glad you visited.<span class="animate scroll" style="--i:3;"></span></h3>
      <p>
        I'm Jyoti, currently pursuing B.Tech at IIIT Bhagalpur. I enjoy building animated and user-friendly
        frontends, working on applied research projects, and constantly challenging myself to grow and build meaningful solutions.
        <span class="animate scroll" style="--i:4;"></span>
      </p>
      <div class="btn-box btns">
        <a href="#contact" class="btn">Contact Me</a>
        <span class="animate scroll" style="--i:5;"></span>
      </div>
    </div>
  </section>

  <!-- Education -->
  <section class="education" id="education">
    <h2 class="heading">My <span>Journey</span><span class="animate scroll" style="--i:1;"></span></h2>
    <div class="education-row">

      <div class="education-column">
        <h3 class="title">Education<span class="animate scroll" style="--i:2;"></span></h3>
        <div class="education-box">
          <div class="education-content">
            <div class="content">
              <div class="year"><i class='bx bxs-calendar'></i> 2022 – 2026</div>
              <h3>B.Tech in Computer Science - IIIT Bhagalpur</h3>
              <p>
                Specializing in Computer Science. Gaining hands-on experience in web development, AI/ML, and open-source contributions, with strong academic and project-based exposure.
              </p>
            </div>
          </div>
        </div>
        <span class="animate scroll" style="--i:3;"></span>
      </div>

      <div class="education-column">
        <h3 class="title">Projects & Research<span class="animate scroll" style="--i:5;"></span></h3>
        <div class="education-box">
          <div class="education-content">
            <div class="content">
              <div class="year"><i class='bx bxs-calendar'></i> 2024 – Present</div>
              <h3>Flood Detection Research</h3>
              <p>
                Built flood classification and segmentation pipelines using U-Net, DeepLabV3+, and EfficientNet. Focused on real-time satellite image processing and research paper preparation.
              </p>
            </div>
          </div>

          <div class="education-content">
            <div class="content">
              <div class="year"><i class='bx bxs-calendar'></i> 2025</div>
              <h3>Frontend Developer – CollabSpace</h3>
              <p>
                Developed a responsive frontend app with animated UI, group task board, timers, and chat layout using HTML, CSS, and JavaScript. Deployed live on Vercel.
              </p>
            </div>
          </div>
        </div>
        <span class="animate scroll" style="--i:6;"></span>
      </div>
    </div>
  </section>

  <!-- Skills -->
  <section class="skills" id="skills">
    <h2 class="heading">My <span>Skills</span><span class="animate scroll" style="--i:1;"></span></h2>
    <div class="skills-row">
      <div class="skills-column">
        <h3 class="title">Programming Skills<span class="animate scroll" style="--i:2;"></span></h3>
        <div class="skills-box">
          <div class="skills-content">
            <div class="progress"><h3>C++ <span>90%</span></h3><div class="bar"><span></span></div></div>
            <div class="progress"><h3>Python <span>85%</span></h3><div class="bar"><span></span></div></div>
            <div class="progress"><h3>HTML/CSS/JS <span>90%</span></h3><div class="bar"><span></span></div></div>
            <div class="progress"><h3>JavaScript <span>75%</span></h3><div class="bar"><span></span></div></div>
          </div>
          <span class="animate scroll" style="--i:3;"></span>
        </div>
      </div>

      <div class="skills-column">
        <h3 class="title">Tools & Technologies<span class="animate scroll" style="--i:5;"></span></h3>
        <div class="skills-box">
          <div class="skills-content">
            <div class="progress"><h3>React.js & Node.js <span>70%</span></h3><div class="bar"><span></span></div></div>
            <div class="progress"><h3>Image Segmentation <span>80%</span></h3><div class="bar"><span></span></div></div>
            <div class="progress"><h3>Git, GitHub, Vercel <span>90%</span></h3><div class="bar"><span></span></div></div>
            <div class="progress"><h3>Figma & Canva <span>85%</span></h3><div class="bar"><span></span></div></div>
          </div>
          <span class="animate scroll" style="--i:6;"></span>
        </div>
      </div>
    </div>
  </section>

  <!-- Contact -->
  <section class="contact" id="contact">
    <h2 class="heading">Contact <span>Me</span><span class="animate scroll" style="--i:1;"></span></h2>
    <form action="#">
      <div class="input-box">
        <div class="input-field"><input type="text" placeholder="Full Name" required /><span class="focus"></span></div>
        <div class="input-field"><input type="email" placeholder="Email" required /><span class="focus"></span></div>
        <span class="animate scroll" style="--i:3;"></span>
      </div>
      <div class="input-box">
        <div class="input-field"><input type="number" placeholder="Mobile Number" required /><span class="focus"></span></div>
        <div class="input-field"><input type="text" placeholder="Subject" required /><span class="focus"></span></div>
        <span class="animate scroll" style="--i:5;"></span>
      </div>
      <div class="textarea-field"><textarea placeholder="Your Message" required></textarea><span class="focus"></span><span class="animate scroll" style="--i:7;"></span></div>
      <div class="btn-box btns"><button type="submit" class="btn">Submit</button><span class="animate scroll" style="--i:9;"></span></div>
    </form>
  </section>

  <!-- Footer -->
  <footer class="footer">
    <div class="footer-text">
      <p>&copy; 2025 Jyoti Saxena | Portfolio Website</p>
      <span class="animate scroll" style="--i:1;"></span>
    </div>
    <div class="footer-iconTop">
      <a href="#"><i class='bx bx-up-arrow-alt'></i></a>
      <span class="animate scroll" style="--i:3;"></span>
    </div>
  </footer>

  <script src="script.js"></script>
</body>
</html>