PageSourceSearch

https://portfolio-ruby-tau-62.vercel.app/

html portfolio-ruby-tau-62.vercel.app collected 2026-10-03 07:31:11 UTC 28,225 bytes, 534 lines download raw bytes

1<!doctype html>
2<html lang="en">
3
4<head>
5  <meta charset="UTF-8" />
6  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7  <title>Rakesh Kannepelli | Creative Tech Portfolio</title>
8  <link rel="preconnect" href="https://fonts.googleapis.com">
9  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10  <link
11    href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&family=Outfit:wght@400;700;800&display=swap"
12    rel="stylesheet">
13  
13<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js"></script>
13
14  
14<script type="text/javascript">
15    (function () {
16      emailjs.init({
17        publicKey: "6OgblLNzm1hswe6_C",
18      });
19    })();
20  </script>
20
21  
21<script type="module" crossorigin src="/assets/index-mtJdwOoh.js"></script>
21
22  <link rel="stylesheet" crossorigin href="/assets/index-CdLxHGAq.css">
23</head>
24
25<body class="dark-mode">
26
27  <!-- Floating AI Bot -->
28  <div id="ai-bot" class="ai-bot">
29    <div class="bot-eyes">
30      <div class="bot-iris left-eye">
31        <div class="bot-eye"></div>
32      </div>
33      <div class="bot-iris right-eye">
34        <div class="bot-eye"></div>
35      </div>
36    </div>
37    <div class="bot-tooltip hidden">Hey!</div>
38  </div>
39
40  <nav class="navbar">
41    <div class="logo">RK</div>
42    <div class="nav-links">
43      <a href="#about">About</a>
44      <a href="#skills">Skills</a>
45      <a href="#projects">Projects</a>
46      <a href="#certifications">Certifications</a>
47      <a href="#contact">Contact</a>
48    </div>
49    <button id="theme-toggle" class="theme-btn" aria-label="Toggle theme">
50      <svg id="moon-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
51        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="hidden">
52        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
53      </svg>
54      <svg id="sun-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
55        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
56        <circle cx="12" cy="12" r="5"></circle>
57        <line x1="12" y1="1" x2="12" y2="3"></line>
58        <line x1="12" y1="21" x2="12" y2="23"></line>
59        <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
60        <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
61        <line x1="1" y1="12" x2="3" y2="12"></line>
62        <line x1="21" y1="12" x2="23" y2="12"></line>
63        <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
64        <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
65      </svg>
66    </button>
67  </nav>
68
69  <main>
70    <section id="hero" class="hero">
71      <div class="hero-content">
72        <p class="greeting">Hello, This is </p>
73        <div class="name-container" id="name-animation-container">
74          <div class="word" id="word-first">
75            <div class="letter-wrapper" data-id="R"><span class="actual-letter">R</span></div>
76            <div class="letter-wrapper" data-id="A_first"><span class="actual-letter">A</span></div>
77            <div class="letter-wrapper" data-id="K_first"><span class="actual-letter">K</span></div>
78            <div class="letter-wrapper" data-id="E_first"><span class="actual-letter">E</span></div>
79            <div class="letter-wrapper" data-id="S"><span class="actual-letter">S</span></div>
80            <div class="letter-wrapper" data-id="H"><span class="actual-letter">H</span></div>
81          </div>
82
83          <div class="word" id="word-last">
84            <div class="letter-wrapper" data-id="K_last"><span class="actual-letter">K</span></div>
85            <div class="letter-wrapper" data-id="A_last"><span class="actual-letter">A</span></div>
86            <div class="letter-wrapper" data-id="N_first"><span class="actual-letter">N</span></div>
87            <div class="letter-wrapper" data-id="N_last"><span class="actual-letter">N</span></div>
88            <div class="letter-wrapper" data-id="E_mid"><span class="actual-letter">E</span></div>
89            <div class="letter-wrapper" data-id="P"><span class="actual-letter">P</span></div>
90            <div class="letter-wrapper" data-id="E_last"><span class="actual-letter">E</span></div>
91            <div class="letter-wrapper" data-id="L_first"><span class="actual-letter">L</span></div>
92            <div class="letter-wrapper" data-id="L_last"><span class="actual-letter">L</span></div>
93            <div class="letter-wrapper" data-id="I"><span class="actual-letter">I</span></div>
94          </div>
95        </div>
96        <p class="subtitle">Interested in tech</p>
97      </div>
98    </section>
99
100    <!-- About Section -->
101    <section id="about" class="placeholder-section perspective-section">
102      <div class="section-content about-content">
103
104        <!-- ReactBits Pixel Card Profile -->
105        <div class="pixel-card-wrapper">
106          <div class="pixel-card" id="pixel-profile-card">
107            <canvas class="pixel-canvas" id="pixel-canvas"></canvas>
108            <div class="pixel-card-inner">
109              <img src="/assets/profile-C7efWBI-.jpeg" alt="Profile Photo" class="pixel-profile-photo" id="profile-img" />
110              <h3 class="profile-card-name" style="margin-top: 1rem; z-index: 2;">Rakesh Kannepelli</h3>
111              <p class="profile-card-role" style="z-index: 2;">AI/ML · Full Stack Dev</p>
112            </div>
113          </div>
114        </div>
115
116        <div class="about-text">
117          <h2>About Me</h2>
118          <p>Computer Science student focused on AI/ML and Full Stack Development, experienced in developing Generative
119            AI applications. Proficient in Python and modern web technologies, with strong analytical thinking and an
120            ability to quickly adapt to new technologies. Interested in Vibe Coding.</p>
121
122          <div class="social-links">
123            <a href="https://github.com/rakeshkannepelli" target="_blank" aria-label="GitHub">
124              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
125                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
126                <path
127                  d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22">
128                </path>
129              </svg>
130            </a>
131            <a href="https://www.linkedin.com/in/rakesh-kannepelli-50a456286/" target="_blank" aria-label="LinkedIn">
132              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
133                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
134                <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path>
135                <rect x="2" y="9" width="4" height="12"></rect>
136                <circle cx="4" cy="4" r="2"></circle>
137              </svg>
138            </a>
139            <a href="https://leetcode.com/u/rakeshkannepelli/" target="_blank" aria-label="LeetCode">
140              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
141                <path
142                  d="M16.102 17.93l-2.697 2.607c-.466.467-1.111.662-1.823.662s-1.357-.195-1.824-.662l-4.332-4.363c-.467-.467-.702-1.15-.702-1.863s.235-1.357.702-1.824l4.319-4.38c.467-.467 1.125-.645 1.837-.645s1.357.195 1.823.662l2.697 2.606c.514.515 1.365.497 1.9-.038.535-.536.553-1.387.039-1.901l-2.609-2.636a5.055 5.055 0 0 0-2.445-1.337l2.467-2.503c.516-.514.498-1.366-.037-1.901-.535-.535-1.387-.552-1.902-.038l-10.1 10.101c-.981.982-1.469 2.263-1.469 3.545 0 1.282.488 2.563 1.469 3.545l4.348 4.348c.981.981 2.263 1.469 3.545 1.469s2.564-.488 3.545-1.469l2.697-2.607c.516-.514.498-1.366-.037-1.901-.535-.535-1.387-.552-1.902-.038z" />
143              </svg>
144            </a>
145            <a href="mailto:[email protected]" target="_blank" aria-label="Email">
146              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
147                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
148                <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
149                <polyline points="22,6 12,13 2,6"></polyline>
150              </svg>
151            </a>
152          </div>
153
154          <a href="/resume.pdf" class="resume-btn" id="resume-btn" download="Rakesh_Kannepelli_Resume.pdf"
155            style="margin-top: 1.5rem;">
156            <span class="resume-icon">
157              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
158                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
159                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
160                <polyline points="7 10 12 15 17 10"></polyline>
161                <line x1="12" y1="15" x2="12" y2="3"></line>
162              </svg>
163            </span>
164            <span class="resume-text">Download Resume</span>
165          </a>
166        </div>
167      </div>
168    </section>
169
170    <!-- Skills Section -->
171    <section id="skills" class="placeholder-section perspective-section">
172      <div class="section-content">
173        <h2>Technical Skills</h2>
174        <div class="skills-grid">
175
176          <div class="skill-category">
177            <h3>Languages</h3>
178            <div class="skill-cards">
179              <div class="skill-card">
180                <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/python/python-original.svg"
181                  alt="Python" />
182                <span>Python</span>
183              </div>
184              <div class="skill-card">
185                <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/html5/html5-original.svg"
186                  alt="HTML" />
187                <span>HTML</span>
188              </div>
189              <div class="skill-card">
190                <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/css3/css3-original.svg" alt="CSS" />
191                <span>CSS</span>
192              </div>
193            </div>
194          </div>
195
196          <div class="skill-category">
197            <h3>Libraries</h3>
198            <div class="skill-cards">
199              <div class="skill-card">
200                <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/numpy/numpy-original.svg"
201                  alt="NumPy" />
202                <span>NumPy</span>
203              </div>
204              <div class="skill-card">
205                <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/pandas/pandas-original.svg"
206                  alt="Pandas" />
207                <span>Pandas</span>
208              </div>
209              <div class="skill-card">
210                <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/matplotlib/matplotlib-original.svg"
211                  alt="Matplotlib" />
212                <span>Matplotlib</span>
213              </div>
214              <div class="skill-card">
215                <!-- Seaborn doesn't have an official devicon, using a generic chart or text -->
216                <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none"
217                  stroke="#3b82f6" stroke-width="2">
218                  <path d="M3 3v18h18" />
219                  <path d="M18 17V9" />
220                  <path d="M13 17V5" />
221                  <path d="M8 17v-3" />
222                </svg>
223                <span>Seaborn</span>
224              </div>
225            </div>
226          </div>
227
228          <div class="skill-category">
229            <h3>Tools & Frameworks</h3>
230            <div class="skill-cards">
231              <div class="skill-card">
232                <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/git/git-original.svg" alt="Git" />
233                <span>Git</span>
234              </div>
235              <div class="skill-card">
236                <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/github/github-original.svg"
237                  alt="GitHub" />
238                <span>GitHub</span>
239              </div>
240              <div class="skill-card">
241                <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/vscode/vscode-original.svg"
242                  alt="VS Code" />
243                <span>VS Code</span>
244              </div>
245              <div class="skill-card">
246                <img
247                  src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/scikitlearn/scikitlearn-original.svg"
248                  alt="Scikit-learn" />
249                <span>Scikit-learn</span>
250              </div>
251              <div class="skill-card">
252                <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/linux/linux-original.svg"
253                  alt="Linux" />
254                <span>Linux</span>
255              </div>
256            </div>
257          </div>
258
259          <div class="skill-category">
260            <h3>Databases</h3>
261            <div class="skill-cards">
262              <div class="skill-card">
263                <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/sqlite/sqlite-original.svg"
264                  alt="SQLite" />
265                <span>SQLite</span>
266              </div>
267            </div>
268          </div>
269
270          <div class="skill-category">
271            <h3>Cloud & Deployment</h3>
272            <div class="skill-cards">
273              <div class="skill-card">
274                <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/vercel/vercel-original.svg"
275                  alt="Vercel" />
276                <span>Vercel</span>
277              </div>
278              <div class="skill-card">
279                <!-- Render SVG -->
280                <svg viewBox="0 0 24 24" width="30" height="30" fill="currentColor">
281                  <path d="M12 0C5.37 0 0 5.37 0 12s5.37 12 12 12 12-5.37 12-12S18.63 0 12 0zm0 4a8 8 0 1 1 0 16 8 8 0 0 1 0-16z"/>
282                </svg>
283                <span>Render</span>
284              </div>
285              <div class="skill-card">
286                <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/netlify/netlify-original.svg"
287                  alt="Netlify" />
288                <span>Netlify</span>
289              </div>
290            </div>
291          </div>
292
293          <div class="skill-category">
294            <h3>AI Tools</h3>
295            <div class="skill-cards">
296              <div class="skill-card">
297                <!-- Custom Antigravity SVG -->
298                <svg viewBox="0 0 100 100" width="30" height="30" xmlns="http://www.w3.org/2000/svg">
299                  <defs>
300                    <linearGradient id="agSkillGrad" x1="0%" y1="100%" x2="100%" y2="100%">
301                      <stop offset="0%" stop-color="#3b82f6" />
302                      <stop offset="30%" stop-color="#10b981" />
303                      <stop offset="50%" stop-color="#f59e0b" />
304                      <stop offset="70%" stop-color="#ef4444" />
305                      <stop offset="100%" stop-color="#8b5cf6" />
306                    </linearGradient>
307                  </defs>
308                  <path
309                    d="M 15 85 C 30 75, 35 25, 50 25 C 65 25, 70 75, 85 85 C 75 90, 65 75, 50 45 C 35 75, 25 90, 15 85 Z"
310                    fill="url(#agSkillGrad)" />
311                </svg>
312                <span>Antigravity</span>
313              </div>
314              <div class="skill-card">
315                <!-- Claude SVG -->
316                <svg role="img" viewBox="0 0 24 24" width="30" height="30" xmlns="http://www.w3.org/2000/svg"
317                  fill="currentColor">
318                  <path
319                    d="M17.472 2.659A10.36 10.36 0 0 0 12 1.488C6.182 1.488 1.464 6.205 1.464 12c0 5.818 4.718 10.535 10.536 10.535 5.818 0 10.535-4.717 10.535-10.535 0-1.89-.5-3.666-1.385-5.21l-3.328 6.551-2.923-1.484zm-3.082 16.593A7.525 7.525 0 0 1 12 19.585c-4.183 0-7.575-3.393-7.575-7.576 0-4.184 3.392-7.576 7.575-7.576 1.157 0 2.253.262 3.232.73l-1.077 2.12c-.66-.275-1.383-.427-2.146-.427-2.99 0-5.413 2.423-5.413 5.413s2.423 5.413 5.413 5.413c1.782 0 3.364-.863 4.343-2.193z" />
320                </svg>
321                <span>Claude</span>
322              </div>
323              <div class="skill-card">
324                <!-- GitHub Copilot SVG -->
325                <svg width="30" height="30" viewBox="0 0 16 16" fill="currentColor">
326                  <path d="M7.998 15.035c-4.562 0-7.873-2.914-7.998-3.749V9.338c.085-.628.677-1.686 1.588-2.065.013-.07.024-.143.036-.218.029-.183.06-.384.126-.612-.201-.508-.254-1.084-.254-1.656 0-.87.128-1.769.693-2.484.579-.733 1.494-1.124 2.724-1.261 1.206-.134 2.262.034 2.944.765.05.053.096.108.139.165.044-.057.094-.112.143-.165.682-.731 1.738-.899 2.944-.765 1.23.137 2.145.528 2.724 1.261.566.715.693 1.614.693 2.484 0 .572-.053 1.148-.254 1.656.066.228.098.429.126.612.012.076.024.148.037.218.924.385 1.522 1.471 1.591 2.095v1.872c0 .766-3.351 3.795-8.002 3.795Z"/>
327                </svg>
328                <span>GitHub Copilot</span>
329              </div>
330              <div class="skill-card">
331                <!-- ChatGPT SVG -->
332                <svg width="30" height="30" viewBox="0 0 24 24" fill="currentColor">
333                  <path d="M22.28 10.45a5.55 5.55 0 0 0-.48-4.71 5.66 5.66 0 0 0-4.09-2.7 5.56 5.56 0 0 0-4.66.9 5.58 5.58 0 0 0-4.57-.48 5.66 5.66 0 0 0-3.7 3.22 5.57 5.57 0 0 0-1.07 4.63 5.56 5.56 0 0 0 .48 4.7 5.66 5.66 0 0 0 4.09 2.71 5.59 5.59 0 0 0 4.66-.91 5.56 5.56 0 0 0 4.57.49 5.66 5.66 0 0 0 3.7-3.23 5.57 5.57 0 0 0 1.07-4.62zm-9.39 10.63a3.86 3.86 0 0 1-2.09-.61l.13-.08 3.51-2.02a.85.85 0 0 0 .43-.74v-4.96l1.49.86v4.06a3.87 3.87 0 0 1-3.47 3.49zm-8.03-4.22a3.86 3.86 0 0 1-.52-2.11l.13.08 3.51 2.02a.85.85 0 0 0 .86 0l4.3-2.48v1.73l-3.52 2.03a3.87 3.87 0 0 1-4.76-1.25zm-1.1-9.03a3.86 3.86 0 0 1 1.57-1.5l.13.08 3.51 2.03a.85.85 0 0 0 .43.74v4.96l-1.49-.86V9.22a3.87 3.87 0 0 1-4.15-4.39zm12.35.32l-3.51-2.02a.85.85 0 0 0-.86 0L7.74 8.63V6.9l3.52-2.03a3.87 3.87 0 0 1 5.28 1.86zm2.74 3.73a3.86 3.86 0 0 1 .52 2.11l-.13-.08-3.51-2.03a.85.85 0 0 0-.86 0l-4.3 2.48V10.7l3.52-2.03a3.87 3.87 0 0 1 4.76 1.25zM12 13.73l-2.08-1.2 2.08-1.2 2.08 1.2z"/>
334                </svg>
335                <span>ChatGPT</span>
336              </div>
337            </div>
338          </div>
339
340        </div>
341      </div>
342    </section>
343
344    <!-- Projects Section -->
345    <section id="projects" class="placeholder-section perspective-section">
346      <div class="section-content">
347        <h2>Projects</h2>
348        <div class="projects-grid">
349          
350          <a href="https://github.com/rakeshkannepelli/E-com-Product-Recommendation-System" target="_blank" class="project-card">
351            <div class="project-icon">
352              <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none"
353                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
354                <circle cx="9" cy="21" r="1"></circle>
355                <circle cx="20" cy="21" r="1"></circle>
356                <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
357              </svg>
358            </div>
359            <div class="project-info">
360              <h3>E-Commerce Recommendation System</h3>
361              <p>Full-stack e-commerce web platform featuring intelligent product recommendations built with the MERN stack.</p>
362              <div class="project-tags">
363                <span>React</span>
364                <span>NodeJS</span>
365                <span>Express</span>
366                <span>MongoDB</span>
367                <span>TypeScript</span>
368              </div>
369            </div>
370          </a>
371
372          <a href="https://github.com/rakeshkannepelli/LOG_CUSTOMER_COMPLAINT" target="_blank" class="project-card">
373            <div class="project-icon">
374              <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none"
375                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
376                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
377                <polyline points="14 2 14 8 20 8"></polyline>
378                <line x1="16" y1="13" x2="8" y2="13"></line>
379                <line x1="16" y1="17" x2="8" y2="17"></line>
380                <polyline points="10 9 9 9 8 9"></polyline>
381              </svg>
382            </div>
383            <div class="project-info">
384              <h3>Customer Complaint Logger</h3>
385              <p>AI-driven customer complaint logging and assessment management system developed for AIVOA.AI.</p>
386              <div class="project-tags">
387                <span>Python</span>
388                <span>AI Assessment</span>
389                <span>Data Analysis</span>
390              </div>
391            </div>
392          </a>
393
394          <a href="https://github.com/rakeshkannepelli/MY_LEETHUB" target="_blank" class="project-card">
395            <div class="project-icon">
396              <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none"
397                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
398                <polyline points="16 18 22 12 16 6"></polyline>
399                <polyline points="8 6 2 12 8 18"></polyline>
400              </svg>
401            </div>
402            <div class="project-info">
403              <h3>LeetCode Solutions Vault (MY_LEETHUB)</h3>
404              <p>Automated repository archiving solved data structures & algorithms LeetCode challenges for interview prep.</p>
405              <div class="project-tags">
406                <span>Python</span>
407                <span>Algorithms</span>
408                <span>Data Structures</span>
409              </div>
410            </div>
411          </a>
412
413          <a href="https://github.com/rakeshkannepelli/R-Links" target="_blank" class="project-card">
414            <div class="project-icon">
415              <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none"
416                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
417                <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
418                <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
419              </svg>
420            </div>
421            <div class="project-info">
422              <h3>Local Link-Manager (R-Links)</h3>
423              <p>Local link manager web application designed to store and organize bookmarks and web resources locally.</p>
424              <div class="project-tags">
425                <span>Web App</span>
426                <span>JavaScript</span>
427                <span>Utility</span>
428              </div>
429            </div>
430          </a>
431
432        </div>
433      </div>
434    </section>
435
436    <!-- Certifications Section -->
437    <section id="certifications" class="placeholder-section perspective-section">
438      <div class="section-content">
439        <h2>Certifications</h2>
440        
441        <div class="cert-grid">
442          <!-- Deloitte Data Analytics Certification -->
443          <div class="cert-card" tabindex="0">
444            <svg class="cert-icon" xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 24 24"
445              fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
446              <defs>
447                <linearGradient id="deloitteGrad" x1="0%" y1="0%" x2="100%" y2="100%">
448                  <stop offset="0%" stop-color="#86efac" />
449                  <stop offset="100%" stop-color="#3b82f6" />
450                </linearGradient>
451              </defs>
452              <path
453                d="M12 15C15.866 15 19 11.866 19 8C19 4.13401 15.866 1 12 1C8.13401 1 5 4.13401 5 8C5 11.866 8.13401 15 12 15Z"
454                fill="url(#deloitteGrad)" stroke="none"></path>
455              <polyline points="8.21 13.89 7 23 12 20 17 23 15.79 13.88" stroke="url(#deloitteGrad)" fill="none"
456                stroke-width="2"></polyline>
457              <path d="M12 5L12 11 M9 8L15 8" stroke="white" stroke-width="2"></path>
458            </svg>
459            <div class="cert-info">
460              <h3>Data Analytics Job Simulation</h3>
461              <h4>Deloitte · Forage</h4>
462              <p>Completed practical tasks in Data Analysis and Forensic Technology (Issued June 25, 2026).</p>
463              <div class="cert-meta">
464                <span class="cert-badge">Verification: dRR8Xwhswt9fvNFXQ</span>
465                <span class="cert-badge">User Code: 6a3cbe7808d38a2c3865404a</span>
466              </div>
467            </div>
468          </div>
469
470          <!-- GitHub Professional Certificate -->
471          <a href="https://www.linkedin.com/learning/certificates/3e58cdbec47186dc78d6ae14857ea5e1f8d1429fb7e4faf65be1d477a1e8eb81"
472            target="_blank" class="cert-card" aria-label="View Certificate">
473            <svg class="cert-icon" xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewB
473ox="0 0 24 24"
474              fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
475              <defs>
476                <linearGradient id="certGrad" x1="0%" y1="0%" x2="100%" y2="100%">
477                  <stop offset="0%" stop-color="#10b981" />
478                  <stop offset="100%" stop-color="#3b82f6" />
479                </linearGradient>
480              </defs>
481              <path
482                d="M12 15C15.866 15 19 11.866 19 8C19 4.13401 15.866 1 12 1C8.13401 1 5 4.13401 5 8C5 11.866 8.13401 15 12 15Z"
483                fill="url(#certGrad)" stroke="none"></path>
484              <polyline points="8.21 13.89 7 23 12 20 17 23 15.79 13.88" stroke="url(#certGrad)" fill="none"
485                stroke-width="2"></polyline>
486              <path d="M12 5L12 11 M9 8L15 8" stroke="white" stroke-width="2"></path>
487            </svg>
488            <div class="cert-info">
489              <h3>Career Essentials in GitHub Professional Certificate</h3>
490              <h4>LinkedIn Learning</h4>
491              <p>Comprehensive training in version control, collaboration workflows, and GitHub best practices.</p>
492            </div>
493          </a>
494        </div>
495      </div>
496    </section>
497
498    <!-- Contact Section with EmailJS -->
499    <section id="contact" class="placeholder-section perspective-section">
500      <div class="section-content">
501        <h2>Let's Connect</h2>
502
503        <form class="contact-form" id="contact-form">
504          <p class="contact-subtitle">Have an exciting project or want to chat? Send me a message!</p>
505          <!-- Hidden field: tells EmailJS exactly where to deliver the message -->
506          <input type="hidden" name="to_email" value="[email protected]">
507          <input type="hidden" name="to_name" value="Rakesh Kannepelli">
508          <div class="form-group">
509            <input type="text" name="user_name" placeholder="Your Name" required>
510          </div>
511          <div class="form-group">
512            <input type="email" name="user_email" placeholder="Your Email" required>
513          </div>
514          <div class="form-group">
515            <textarea name="message" placeholder="Your Message" rows="5" required></textarea>
516          </div>
517
518          <button type="submit" class="submit-btn">
519            <span>Send Message</span>
520            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
521              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
522              <line x1="22" y1="2" x2="11" y2="13"></line>
523              <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
524            </svg>
525          </button>
526          <p class="form-result hidden" id="form-result"></p>
527        </form>
528      </div>
529    </section>
530  </main>
531
532</body>
533
534</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.