ksuvii.github.io/index.html at main · ksuvii21/ksuvii.github.io · 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
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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Kritika Gupta | Portfolio</title>
  <link rel="stylesheet" href="style.css" />
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;700&display=swap" rel="stylesheet">
</head>
<body>

  <!-- Header -->
  <header>
    <nav class="navbar">
      <h1 class="logo"><span>Kritika Gupta</span><h3><i>Turning ideas into clean, interactive code.</i></h3></h1>
      <ul class="nav-links">
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#skills">Skills</a></li>
        <li><a href="#projects">Projects</a></li>
        <li><a href="#timeline">Experience</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  </header>

  <!-- Hero Section -->
<section class="hero" id="home">
  <div class="hero-container">
    <!-- Left Text Area -->
    <div class="hero-text">
      <h1>Hi, I'm <span class="highlight-name">Kritika Gupta</span></h1>
      <h2>Frontend Developer | UI Designer | Backend Learner</h2>
      <p>
        I design and develop responsive websites with beautiful user experiences. I enjoy solving problems and turning ideas into reality using code.
      </p>
      <div class="btn-group">
        <a href="#projects" class="btn">View Projects</a>
        <a href="resume.pdf" class="btn outline" target="_blank">View Resume</a>
      </div>
    </div>

    <!-- Right Profile Image -->
    <div class="hero-img">
      <img src="Kritika.png" alt="Kritika Gupta" />
    </div>
  </div>
</section>


  <!-- About Section -->
  <section class="about-title" id="about">
    <h3>About</h3>
    <h2><span class="bold-text">PERSONAL</span> <span class="highlight-text">DETAILS</span></h2>
  </section>
  <section class="about-skills-section">
  <div class="about-left">
    <h2><b><span class="highlight-text">I'm Kritika Gupta</span></b> and I'm a Developer</h2>
    <p>
      I am a passionate developer with expertise in creating robust and scalable
      server-side applications. As a website developer, I enjoy crafting efficient
      and dynamic web solutions using various technologies. My skills as a software
      developer allow me to build comprehensive applications that solve complex
      problems. I continuously explore new technologies and methodologies to
      enhance my skills and deliver cutting-edge solutions for my clients.
    </p>

    <div class="info-grid">
      <p><strong>📅 Date of Birth:</strong> 21 June 2006</p>
      <!--<p><strong>📞 Phone:</strong> 91+9305955072</p>-->
      <p><strong>📧 Email:</strong> k21ritikasuvi2106@gmail.com</p>
      <p><strong>🎓 Degree:</strong> BCA</p>
      <p><strong>📌 Location:</strong> Sarnath,Varanasi–221007</p>

    </div>
  </div>
  <section id="skills">
  <div class="about-right">
    <h2>Skills</h2>
    <div class="skill">
      <div class="skill-name">HTML</div>
      <div class="bar"><div class="fill" style="width: 90%;"></div></div>
    </div>
    <div class="skill">
      <div class="skill-name">CSS</div>
      <div class="bar"><div class="fill" style="width: 80%;"></div></div>
    </div>
    <div class="skill">
      <div class="skill-name">JavaScript</div>
      <div class="bar"><div class="fill" style="width: 70%;"></div></div>
    </div>
    <div class="skill">
      <div class="skill-name">Python</div>
      <div class="bar"><div class="fill" style="width: 85%;"></div></div>
    </div>
    <div class="skill">
      <div class="skill-name">Java</div>
      <div class="bar"><div class="fill" style="width: 75%;"></div></div>
    </div>
    <div class="skill">
      <div class="skill-name">MySQL</div>
      <div class="bar"><div class="fill" style="width: 80%;"></div></div>
    </div>
  </div>
  </section>
</section>


  <!-- Projects Section -->
  <section id="projects" class="section">
    <h2>MY LATEST PROJECTS</h2>
    <div class="projects-grid">
      <div class="project-card">
        <img src="Mysql.png" alt="Task Manager using MySQL" class="project-img" onclick="openLightbox(this)">
        <h3>Task Manager Using MySQL</h3>
        <p>This project implements full CRUD (Create, Read, Update, Delete) operations using MySQL for robust data storage and reporting. It allows efficient management of data by leveraging the power of a relational database with the accessibility of spreadsheets.</p>
        <a href="https://github.com/ksuvii21/CRUD-Operations-by-MySQL" target="_blank">GitHub</a> |
        <a href="https://ksuvii21.github.io/CRUD-Operations-by-MySQL" target="_blank">Live Demo</a>
      </div>
      <div class="project-card">
        <img src="Msexcel.png" alt="Task Manager using MS-Excel" class="project-img" onclick="openLightbox(this)">
        <h3>Task Manager Using MS-Excel</h3>
        <p>This project implements full CRUD (Create, Read, Update, Delete) operations using MS-Excel for robust data storage and user-friendly data interaction and reporting. It allows efficient management of data by leveraging the power of a relational database with the accessibility of spreadsheets.</p>
        <a href="https://github.com/ksuvii21/CRUD-Operations-on-Excel" target="_blank">GitHub</a> |
        <a href="https://ksuvii21.github.io/CRUD-Operations-on-Excel" target="_blank">Live Demo</a>
      </div>
      <div class="project-card">
        <img src="Temp.png" alt="Temperature Converter" class="project-img" onclick="openLightbox(this)">
        <h3>Temperature Converter</h3>
        <p>This project is a user-friendly temperature converter simulator application. It allows users to effortlessly convert temperature values between different scales, such as Celsius, Fahrenheit, and potentially Kelvin. The application is designed to provide accurate and real-time conversion results, offering a convenient tool for various practical or educational purposes.</p>
        <a href="https://github.com/ksuvii21/Temperature-Converter-Simulator" target="_blank">GitHub</a> |
        <a href="https://ksuvii21.github.io/Temperature-Converter-Simulator" target="_blank">Live Demo</a>
      </div>
      <div class="project-card">
        <img src="Pattern.png" alt="Pattern Generator" class="project-img" onclick="openLightbox(this)">
        <h3>Pattern Generator</h3>
        <p>This project implements a pattern generator that creates various patterns based on user input. It allows users to select the type of pattern they want to generate, such as numeric patterns, alphabetic patterns, or custom patterns. The application is designed to be interactive and user-friendly, providing real-time feedback and visualization of the generated patterns.</p>
        <a href="https://github.com/ksuvii21/Number-Pattern-Generator" target="_blank">GitHub</a> |
        <a href="https://ksuvii21.github.io/Number-Pattern-Generator" target="_blank">Live Demo</a>
      </div>
      <div class="project-card">
        <img src="Guess.png" alt="Guess the Game Show" class="project-img" onclick="openLightbox(this)">
        <h3>Guess the Game Show</h3>
        <p>This project implements a game show quiz application where users can participate in a quiz based on a popular game show format. It features multiple-choice questions, a timer, and a scoring system to enhance user engagement. The application is designed to be fun and interactive, providing a platform for users to test their knowledge and compete with friends.</p>
        <a href="https://github.com/ksuvii21/Guess-the-Game-Show" target="_blank">GitHub</a> |
        <a href="https://ksuvii21.github.io/Guess-the-Game-Show" target="_blank">Live Demo</a>
      </div>
    </div>
    <div id="lightbox" class="lightbox" onclick="closeLightbox()">
      <span class="lightbox-close" onclick="closeLightbox()">&times;</span>
      <img class="lightbox-img" id="lightbox-img" src="" alt="Preview">
    </div>
  </section>
  <section id="timeline" class="timeline-section">
  <h2>Experience Timeline</h2>
  <div class="timeline">
    <div class="timeline-item">
      <div class="timeline-content">
        <h3>Software Developer Intern</h3>
        <span class="date">June 2025 - July 2025</span>
        <p>Interned at Cognifyz Technologies, built full-stack web apps.</p>
      </div>
    </div>
    <div class="timeline-item">
      <div class="timeline-content">
        <h3>Graphics Designer</h3>
        <span class="date">May 2025 - June 2025</span>
        <p>Designed Interactive User Interfaces and Experiences.</p>
      </div>
    </div>
  </div>
</section>
  <section class="more-about-section" id="more-about">
  <div class="more-about-container">
    <!-- Left: Introductory Paragraph -->
    <div class="more-about-text">
      <h2>More About Me</h2>
      <p>
        I'm a passionate and detail‑oriented developer who thrives on creating elegant,
        user‑friendly web experiences. I enjoy working across the stack—designing
        beautiful frontends and crafting reliable backends.
        I continuously learn and adapt to new technologies to deliver efficient and
        delightful solutions.
      </p>
    </div>
    <!-- Right: Quick Info Box -->
    <div class="more-about-info">
      <div class="info-row">
        <div class="info-item"><strong>Birthday:</strong> 21 June 2006</div>
        <div class="info-item"><strong>Age:</strong> 19</div>
      </div>
      <div class="info-row">
        <div class="info-item"><strong>Email:</strong> k21ritikasuvi2106@gmail.com</div>
        <!--<div class="info-item"><strong>Phone:</strong> +91 9305955072</div>-->
      </div>
      <div class="info-row">
        <div class="info-item"><strong>City:</strong> Varanasi, Uttar Pradesh, India</div>
        <div class="info-item"><strong>Freelance:</strong> Available</div>
      </div>
      <div class="info-row">
        <div class="info-item"><strong>Education:</strong> BCA (2024-27)</div>
        <div class="info-item"><strong>Languages:</strong> English, Hindi</div>
      </div>
    </div>
  </div>
</section>

  <!-- Contact Section -->
  <section id="contact" class="section contact-section">
    <h2>Contact Me</h2>
    <form id="contact-form">
      <form action="https://formsubmit.co/k21ritikasuvi2106@gmail.com" method="POST">
        <input type="text" name="name" placeholder="Your Name" required>
        <input type="email" name="email" placeholder="Your Email" required>
        <textarea name="message" placeholder="Your Message" required></textarea>
        <!-- Optional: Prevent spam -->
        <input type="hidden" name="_captcha" value="false">
        <button type="submit">Send Message</button>
    </form>
    <div class="contact-icons">
    <a href="mailto:k21ritikasuvi2106@gmail.com"><i class="fas fa-envelope"></i></a>
    <a href="https://linkedin.com/in/kritika-gupta-000941367" target="_blank"><i class="fab fa-linkedin"></i></a>
    <a href="tel:+919876543210"><i class="fas fa-phone"></i></a>
  </div>
  </section>

  <!-- Footer -->
  <footer>
    <p>&copy; 2025 Kritika Gupta. All rights reserved.</p>
    <p>
      <a href="https://www.linkedin.com/in/kritika-gupta-000941367">LinkedIn</a> |
      <a href="https://github.com/ksuvii21">GitHub</a> |
      <a href="mailto:k21ritikasuvi2106@gmail.com">Email</a>
    </p>
  </footer>

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