my-portfolio/index.html at main · pranathiK25/my-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
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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Pranathi — Portfolio</title>

  <!-- Google fonts (only external) -->
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&family=Space+Grotesk:wght@400;600&display=swap" rel="stylesheet">

  <link rel="stylesheet" href="style.css">
</head>
<body class="theme-light">

  <!-- NAV -->
  <header class="nav">
    <div class="nav-inner">
      <div class="brand">
        <div class="logo-dot"></div>
        <span class="brand-text">Pranathi</span>
      </div>

      <nav class="links">
        <a href="#home">Home</a>
        <a href="#about">About</a>
        <a href="#skills">Skills</a>
        <a href="#projects">Projects</a>
        <a href="#contact">Contact</a>
      </nav>

      <div class="controls">
        <button id="themeToggle" aria-label="Toggle theme" class="theme-btn">
          <svg id="themeIcon" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6">
            <!-- Icon toggled by JS -->
          </svg>
        </button>
      </div>
    </div>
  </header>

  <!-- HERO -->
  <main>
    <section id="home" class="hero">
      <div class="hero-inner">
        <h1 class="hero-title">Hi — I’m <span class="name">Pranathi Sai Kalavagunta</span></h1>
        <p class="hero-sub">I build elegant interfaces and thoughtful software.</p>

        <div class="typewrap">
          <span class="type-prefix">I am a</span>
          <span id="typewriter" class="typewriter" aria-hidden="true"></span>
        </div>

        <div class="hero-cta">
          <a class="cta-btn" href="#projects">See My Work</a>
          <a class="cta-ghost" href="#contact">Contact</a>
        </div>

        <!-- <div class="hero-floating">
          <img src="C:\Users\pranu\portfolio\me.jpg" alt="Pranathi" class="profile-img" />
        </div> -->
      </div>

      <a href="#about" class="scroll-indicator" aria-label="Scroll to about">
        <span class="arrow">↓</span>
      </a>
    </section>

    <!-- ABOUT -->
    <section id="about" class="about reveal">
      <div class="container">
        <div class="about-left">
          <h2>About Me</h2>
          <p>Pursuing a Bachelor of Technology in Computer Science and Engineering with practical experience in HTML, CSS, JavaScript, and object-oriented programming. Contributed to open-source projects, Eager to support web application design, development, and maintenance in a dynamic team environment while leveraging a strong technical foundation and commitment to continuous learning.</p>

          <ul class="about-list">
            <li><strong>Location:</strong> India</li>
            <li><strong>Role:</strong> Computer Science & Engineering Student</li>
            <li><strong>Focus:</strong> Software Engineering</li>
          </ul>
        </div>

        <div class="about-right">
          <div class="glass-card">
            <h3>Journey</h3>
            <ol class="timeline">
              <li><span>2023</span> Started building games in Java</li>
              <li><span>2024</span> Built hobby projects</li>
              <li><span>2025</span> Open for Internship & Job roles</li>
            </ol>
          </div>
        </div>
      </div>
    </section>

    <!-- SKILLS -->
    <section id="skills" class="skills reveal">
      <h2>Skills</h2>
      <div class="skills-grid container">
        <div class="skill-block">
          <div class="skill-head">
            <h4>Java</h4><span>Proficient</span>
          </div>
          <div class="bar">
            <div class="fill" data-fill="95"></div>
          </div>
        </div>

        <div class="skill-block">
          <div class="skill-head">
            <h4>OOPs</h4><span>Proficient</span>
          </div>
          <div class="bar">
            <div class="fill" data-fill="90"></div>
          </div>
        </div>

        <div class="skill-block">
          <div class="skill-head">
            <h4>SQL</h4><span>Intermediate</span>
          </div>
          <div class="bar">
            <div class="fill" data-fill="75"></div>
          </div>
        </div>

        <div class="skill-block">
          <div class="skill-head">
            <h4>Git & GitHub</h4><span>Intermediate</span>
          </div>
          <div class="bar">
            <div class="fill" data-fill="70"></div>
          </div>
        </div>

        <div class="skill-block">
          <div class="skill-head">
            <h4>HTML</h4><span>Intermediate</span>
          </div>
          <div class="bar">
            <div class="fill" data-fill="70"></div>
          </div>
        </div>

        <div class="skill-block">
          <div class="skill-head">
            <h4>CSS</h4><span>Intermediate</span>
          </div>
          <div class="bar">
            <div class="fill" data-fill="65"></div>
          </div>
        </div>

        <div class="skill-block">
          <div class="skill-head">
            <h4>Python</h4><span>Intermediate</span>
          </div>
          <div class="bar">
            <div class="fill" data-fill="65"></div>
          </div>
        </div>

        <div class="skill-block">
          <div class="skill-head">
            <h4>DSA</h4><span>Beginner</span>
          </div>
          <div class="bar">
            <div class="fill" data-fill="40"></div>
          </div>
        </div>

        <div class="skill-block">
          <div class="skill-head">
            <h4>JS</h4><span>Beginner</span>
          </div>
          <div class="bar">
            <div class="fill" data-fill="40"></div>
          </div>
        </div>
      </div>
    </section>

    <!-- PROJECTS -->
    <section id="projects" class="projects reveal">
      <h2>Selected Projects</h2>
      <div class="project-grid container">
        <!-- Replace hrefs with your real repos -->
         <article class="project-card" data-github="#">
          <div class="card-inner">
            <h3>Flip-Flop Word Game</h3>
            <p>Built a desktop word-memorization game in Java Swing with timers, scoring, and word-shuffling logic.</p>
            <div class="meta"><span>Java • Game</span><a class="repo" href="#https://github.com/pranuuk/Flip_flop_word_game" target="_blank" rel="noreferrer">GitHub</a></div>
          </div>
        </article>

        <article class="project-card" data-github="#">
          <div class="card-inner">
            <h3>Flip-Flop Word Game</h3>
            <p>Recreated the game as a cross-platform app using Python and Flet, with reusable components and widget-based UI.</p>
            <div class="meta"><span>Python • Game</span><a class="repo" href="#https://github.com/pranuuk/FLIP-FLOP" target="_blank" rel="noreferrer">GitHub</a></div>
          </div>
        </article>

        <article class="project-card" data-github="#">
          <div class="card-inner">
            <h3>Pac-Man Game</h3>
            <p>Java Swing game with custom ghost AI, pellet system and collision handling.</p>
            <div class="meta"><span>Java • Game</span><a class="repo" href="#https://github.com/pranuuk/Pac-man" target="_blank" rel="noreferrer">GitHub</a></div>
          </div>
        </article>

        <article class="project-card" data-github="#">
          <div class="card-inner">
            <h3>Snake Game</h3>
            <p>Classic Snake implemented in Java with smooth controls, scoring and restart flow.</p>
            <div class="meta"><span>Java • Game</span><a class="repo" href="#https://github.com/pranuuk/Snake-Game" target="_blank" rel="noreferrer">GitHub</a></div>
          </div>
        </article>

      </div>
    </section>

    <!-- CONTACT -->
    <section id="contact" class="contact reveal">
      <h2>Contact</h2>
      <div class="contact-grid container">
        <form action="https://formspree.io/f/mandbpwy" method="post" id="contactForm" class="contact-form">
          <input name="name" type="text" placeholder="Your name" required />
          <input name="email" type="email" placeholder="Email" required />
          <textarea name="message" rows="6" placeholder="Message" required></textarea>
          <button type="submit" class="cta-btn">Send Message</button>
        </form>

        <div class="contact-card">
          <h3>Let’s Connect</h3>
          <p>Prefer GitHub or email. I reply fast and love collaborating on thoughtful projects.</p>
          <div class="socials">
            <a href="#" class="social">GitHub</a>
            <a href="#" class="social">LinkedIn</a>
            <a href="mailto:youremail@example.com" class="social">Email</a>
          </div>
        </div>
      </div>
    </section>

    <!-- FOOTER -->
    <footer class="footer">
      <div class="container">
        <p>© 2025 Pranathi • Built with ❤️</p>
      </div>
    </footer>
  </main>

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