├── LICENSE
├── README.md
├── port.js
├── port.css
└── index.html


/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2024 Abbireddy Venkata Chandu
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | 
  2 | ## **Data Science and Machine Learning Enthusiast**
  3 | 
  4 | **About Me**
  5 | 
  6 | I'm a passionate data scientist and machine learning enthusiast with a strong foundation in web development. I thrive on solving complex problems and leveraging data to extract valuable insights. I'm always eager to learn new technologies and techniques to stay ahead of the curve.
  7 | 
  8 | **Skills**
  9 | 
 10 | * **Data Science**
 11 |   * Data cleaning and preprocessing
 12 |   * Exploratory data analysis (EDA)
 13 |   * Feature engineering
 14 |   * Statistical modeling
 15 |   * Machine learning algorithms (regression, classification, clustering)
 16 |   * Model evaluation and optimization
 17 | 
 18 | * **Machine Learning**
 19 |   * Deep learning frameworks (TensorFlow, PyTorch)
 20 |   * Natural language processing (NLP)
 21 |   * Computer vision
 22 |   * Reinforcement learning
 23 | 
 24 | * **Web Development**
 25 |   * Front-end development (HTML, CSS, JavaScript)
 26 |   * Back-end development (Python, Flask, Django)
 27 |   * Database management (SQL, NoSQL)
 28 | 
 29 | **Projects**
 30 | **Here are some potential project ideas incorporating sentiment analysis, Black Friday sales analysis, and social media analysis:**
 31 | 
 32 | ### Sentiment Analysis Projects
 33 | 
 34 | 1. **Product Review Sentiment Analysis:**
 35 |    * **Goal:** Analyze customer reviews to gauge product sentiment and identify areas for improvement.
 36 |    * **Approach:**
 37 |      * Collect product reviews from e-commerce platforms or social media.
 38 |      * Preprocess the text data (cleaning, tokenization, stop word removal).
 39 |      * Use sentiment analysis techniques (e.g., VADER, TextBlob) to classify reviews as positive, negative, or neutral.
 40 |      * Visualize the sentiment distribution and identify trends.
 41 | 
 42 | 2. **Brand Sentiment Analysis on Social Media:**
 43 |    * **Goal:** Monitor brand reputation and customer sentiment on social media platforms.
 44 |    * **Approach:**
 45 |      * Collect brand-related tweets, posts, or comments from platforms like Twitter, Instagram, and Facebook.
 46 |      * Preprocess the text data and perform sentiment analysis.
 47 |      * Track sentiment trends over time and identify potential crisis situations.
 48 |      * Use sentiment analysis to measure the impact of marketing campaigns or product launches.
 49 | 
 50 | ### Black Friday Sales Analysis
 51 | 
 52 | 1. **Sales Trend Analysis:**
 53 |    * **Goal:** Analyze historical Black Friday sales data to identify trends and patterns.
 54 |    * **Approach:**
 55 |      * Collect sales data from previous Black Friday events.
 56 |      * Visualize sales trends over time, by product category, or by region.
 57 |      * Identify peak sales periods and popular product categories.
 58 |      * Use statistical analysis to forecast future sales.
 59 | 
 60 | 2. **Customer Segmentation and Targeting:**
 61 |    * **Goal:** Segment customers based on their purchasing behavior during Black Friday sales.
 62 |    * **Approach:**
 63 |      * Use clustering techniques (e.g., K-means, hierarchical clustering) to group customers with similar purchase patterns.
 64 |      * Identify high-value customers and target them with personalized marketing campaigns.
 65 |      * Analyze customer demographics and preferences to tailor marketing messages.
 66 | 
 67 | ### Social Media Analysis
 68 | 
 69 | 1. **Social Media Listening:**
 70 |    * **Goal:** Monitor brand mentions and customer conversations on social media.
 71 |    * **Approach:**
 72 |      * Use social media listening tools to track brand-related keywords and hashtags.
 73 |      * Analyze the sentiment of social media posts to gauge customer satisfaction.
 74 |      * Identify potential customer service issues and respond promptly.
 75 |      * Use social media analytics to measure the reach and engagement of marketing campaigns.
 76 | 
 77 | 2. **Influencer Marketing Analysis:**
 78 |    * **Goal:** Evaluate the effectiveness of influencer marketing campaigns.
 79 |    * **Approach:**
 80 |      * Track the performance of influencer-sponsored posts and measure engagement metrics (likes, comments, shares).
 81 |      * Analyze the sentiment of comments and replies to influencer posts.
 82 |      * Identify influential individuals in the target market and build relationships with them.
 83 | 
 84 | By combining these techniques, you can gain valuable insights into consumer behavior, market trends, and brand reputation.
 85 |  
 86 | **Would you like to explore any of these project ideas further or discuss another project idea?**
 87 | 
 88 | 
 89 | **Tools and Technologies**
 90 | 
 91 | * **Programming Languages:** Python, R, JavaScript
 92 | * **Data Science Libraries:** Pandas, NumPy, Scikit-learn, TensorFlow, PyTorch
 93 | * **Web Development Frameworks:** Flask, Django, React, Angular
 94 | * **Cloud Platforms:** AWS, GCP, Azure
 95 | 
 96 | **Let's Connect**
 97 | 
 98 | I'm always open to new opportunities and collaborations. Feel free to reach out to me via:
 99 | * **Portfolio:** [click here](https://venkat-0706.github.io/Venkat-Chandu-Portfolio-/)
100 | 
101 | * **GitHub:** [Venkat-0706](https://github.com/venkat-0706)
102 | * **LinkedIn:** [chandu0706](https://www.linkedin.com/in/chandu0706/)
103 | * **Email:** [chandu](chanduabbireddy247@gmail.com)
104 | 
105 | **Thank you for visiting my profile!**
106 | 


--------------------------------------------------------------------------------
/port.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | // Element toggle function
  4 | const elementToggleFunc = function (elem) {
  5 |   elem.classList.toggle("active");
  6 | };
  7 | 
  8 | // Sidebar variables
  9 | const sidebar = document.querySelector("[data-sidebar]");
 10 | const sidebarBtn = document.querySelector("[data-sidebar-btn]");
 11 | 
 12 | // Sidebar toggle functionality for mobile
 13 | sidebarBtn.addEventListener("click", function () {
 14 |   elementToggleFunc(sidebar);
 15 | });
 16 | 
 17 | // Project page 
 18 | 
 19 | // Custom select variables
 20 | const select = document.querySelector("[data-select]");
 21 | const selectItems = document.querySelectorAll("[data-select-item]");
 22 | const selectValue = document.querySelector("[data-selecct-value]");
 23 | const filterBtn = document.querySelectorAll("[data-filter-btn]");
 24 | 
 25 | select.addEventListener("click", function () {
 26 |   elementToggleFunc(this);
 27 | });
 28 | 
 29 | // Filter variables
 30 | const filterItems = document.querySelectorAll("[data-filter-item]");
 31 | 
 32 | const filterFunc = function (selectedValue) {
 33 |   for (let i = 0; i < filterItems.length; i++) {
 34 |     const category = filterItems[i].dataset.category.toLowerCase();
 35 |     if (selectedValue === "all") {
 36 |       filterItems[i].classList.add("active");
 37 |     } else if (selectedValue === category) {
 38 |       filterItems[i].classList.add("active");
 39 |     } else {
 40 |       filterItems[i].classList.remove("active");
 41 |     }
 42 |   }
 43 | };
 44 | 
 45 | // Add event in all select items
 46 | for (let i = 0; i < selectItems.length; i++) {
 47 |   selectItems[i].addEventListener("click", function () {
 48 |     const selectedValue = this.innerText.toLowerCase();
 49 |     selectValue.innerText = this.innerText;
 50 |     elementToggleFunc(select);
 51 |     filterFunc(selectedValue);
 52 |   });
 53 | }
 54 | 
 55 | // Add event in all filter button items for large screen
 56 | let lastClickedBtn = filterBtn[0];
 57 | for (let i = 0; i < filterBtn.length; i++) {
 58 |   filterBtn[i].addEventListener("click", function () {
 59 |     const selectedValue = this.innerText.toLowerCase();
 60 |     selectValue.innerText = this.innerText;
 61 |     filterFunc(selectedValue);
 62 |     lastClickedBtn.classList.remove("active");
 63 |     this.classList.add("active");
 64 |     lastClickedBtn = this;
 65 |   });
 66 | }
 67 | /* Certifications */
 68 | 
 69 | // Custom select variables for certifications
 70 | const select1 = document.querySelector("[data-select1]");
 71 | const selectItems1 = document.querySelectorAll("[data-select-item1]");
 72 | const selectValue1 = document.querySelector("[data-select-value1]");
 73 | const filterBtn1 = document.querySelectorAll("[data-filter-btn1]");
 74 | const filterItems1 = document.querySelectorAll("[data-filter-item]"); // Correct selector for filter items
 75 | 
 76 | select1.addEventListener("click", function () {
 77 |   elementToggleFunc(this);
 78 | });
 79 | 
 80 | const filterFunc1 = function (selectedValue) {
 81 |   for (let i = 0; i < filterItems1.length; i++) {
 82 |     const category = filterItems1[i].dataset.category.toLowerCase(); // Use dataset.category to match with selectedValue
 83 |     if (selectedValue === "all") {
 84 |       filterItems1[i].classList.add("active");
 85 |     } else if (selectedValue === category) {
 86 |       filterItems1[i].classList.add("active");
 87 |     } else {
 88 |       filterItems1[i].classList.remove("active");
 89 |     }
 90 |   }
 91 | };
 92 | 
 93 | // Add event in all select items
 94 | for (let i = 0; i < selectItems1.length; i++) {
 95 |   selectItems1[i].addEventListener("click", function () {
 96 |     const selectedValue1 = this.getAttribute("data-select-item1");
 97 |     selectValue1.innerText = this.innerText;
 98 |     elementToggleFunc(select1); // Close the dropdown after selection
 99 |     filterFunc1(selectedValue1);
100 |   });
101 | }
102 | 
103 | // Add event in all filter button items for large screen
104 | let lastClickedBtn1 = filterBtn1[0];
105 | for (let i = 0; i < filterBtn1.length; i++) {
106 |   filterBtn1[i].addEventListener("click", function () {
107 |     const selectedValue1 = this.getAttribute("data-filter-btn1");
108 |     selectValue1.innerText = this.innerText;
109 |     filterFunc1(selectedValue1);
110 |     lastClickedBtn1.classList.remove("active");
111 |     this.classList.add("active");
112 |     lastClickedBtn1 = this;
113 |   });
114 | }
115 | 
116 | // Contact page
117 | 
118 | // Contact form variables
119 | const form = document.querySelector("[data-form]");
120 | const formInputs = document.querySelectorAll("[data-form-input]");
121 | const formBtn = document.querySelector("[data-form-btn]");
122 | 
123 | // Add event to all form input fields
124 | for (let i = 0; i < formInputs.length; i++) {
125 |   formInputs[i].addEventListener("input", function () {
126 |     // Check form validation
127 |     if (form.checkValidity()) {
128 |       formBtn.removeAttribute("disabled");
129 |     } else {
130 |       formBtn.setAttribute("disabled", "");
131 |     }
132 |   });
133 | }
134 | 
135 | // Page navigation variables
136 | const navigationLinks = document.querySelectorAll("[data-nav-link]");
137 | const pages = document.querySelectorAll("[data-page]");
138 | 
139 | // Add event to all nav links
140 | for (let i = 0; i < navigationLinks.length; i++) {
141 |   navigationLinks[i].addEventListener("click", function () {
142 |     for (let j = 0; j < pages.length; j++) {
143 |       if (this.innerHTML.toLowerCase() === pages[j].dataset.page) {
144 |         pages[j].classList.add("active");
145 |         navigationLinks[j].classList.add("active");
146 |         window.scrollTo(0, 0);
147 |       } else {
148 |         pages[j].classList.remove("active");
149 |         navigationLinks[j].classList.remove("active");
150 |       }
151 |     }
152 |   });
153 | };
154 | 
155 | document.addEventListener("DOMContentLoaded", () => {
156 |   const modeToggle = document.getElementById("mode-toggle");
157 |   const body = document.body;
158 |   const sidebarBtn = document.querySelector("[data-sidebar-btn]");
159 |   const sidebarInfoMore = document.querySelector(".sidebar-info_more");
160 |   const navLinks = document.querySelectorAll("[data-nav-link]");
161 |   const pages = document.querySelectorAll("[data-page]");
162 | 
163 |   // Set initial mode
164 |   if (!body.classList.contains('dark-mode') && !body.classList.contains('light-mode')) {
165 |     body.classList.add('dark-mode');
166 |   }
167 | 
168 |   // Toggle dark mode
169 |   modeToggle.addEventListener("click", () => {
170 |     body.classList.toggle("dark-mode");
171 |     body.classList.toggle("light-mode");
172 |     modeToggle.innerHTML = body.classList.contains("dark-mode")
173 |       ? '<ion-icon name="sunny-outline"></ion-icon>'
174 |       : '<ion-icon name="moon-outline"></ion-icon>';
175 |   });
176 | 
177 |   // Show/Hide sidebar contacts
178 |   sidebarBtn.addEventListener("click", () => {
179 |     sidebarInfoMore.classList.toggle("visible");
180 |   });
181 | 
182 |   // Navigate between sections
183 |   navLinks.forEach(link => {
184 |     link.addEventListener("click", () => {
185 |       navLinks.forEach(nav => nav.classList.remove("active"));
186 |       link.classList.add("active");
187 | 
188 |       const targetPage = link.textContent.toLowerCase();
189 |       pages.forEach(page => {
190 |         if (page.getAttribute("data-page") === targetPage) {
191 |           page.classList.add("active");
192 |         } else {
193 |           page.classList.remove("active");
194 |         }
195 |       });
196 |     });
197 |   });
198 | });


--------------------------------------------------------------------------------
/port.css:
--------------------------------------------------------------------------------
   1 | /*-----------------------------------*\
   2 |   #CUSTOM PROPERTY
   3 | \*-----------------------------------*/
   4 | 
   5 | :root {
   6 | 
   7 |     /*
   8 |       colors
   9 |     */
  10 |   
  11 |     /* gradient */
  12 |   
  13 |     --bg-gradient-onyx: linear-gradient(
  14 |       to bottom right, 
  15 |       hsl(240, 1%, 25%) 3%, 
  16 |       hsl(0, 0%, 19%) 97%
  17 |     );
  18 |     --bg-gradient-jet: linear-gradient(
  19 |       to bottom right, 
  20 |       hsla(240, 1%, 18%, 0.251) 0%, 
  21 |       hsla(240, 2%, 11%, 0) 100%
  22 |     ), hsl(240, 2%, 13%);
  23 |     --bg-gradient-yellow-1: linear-gradient(
  24 |       to bottom right, 
  25 |       hsl(45, 100%, 71%) 0%, 
  26 |       hsla(36, 100%, 69%, 0) 50%
  27 |     );
  28 |     --bg-gradient-yellow-2: linear-gradient(
  29 |       135deg, 
  30 |       hsla(45, 100%, 71%, 0.251) 0%, 
  31 |       hsla(35, 100%, 68%, 0) 59.86%
  32 |     ), hsl(240, 2%, 13%);
  33 |     --border-gradient-onyx: linear-gradient(
  34 |       to bottom right, 
  35 |       hsl(0, 0%, 25%) 0%, 
  36 |       hsla(0, 0%, 25%, 0) 50%
  37 |     );
  38 |     --text-gradient-yellow: linear-gradient(
  39 |       to right, 
  40 |       hsl(45, 100%, 72%), 
  41 |       hsl(35, 100%, 68%)
  42 |     );
  43 |   
  44 |     /* solid */
  45 |   
  46 |     --jet: hsl(0, 0%, 22%);
  47 |     --onyx: hsl(240, 1%, 17%);
  48 |     --eerie-black-1: hsl(240, 2%, 13%);
  49 |     --eerie-black-2: hsl(240, 2%, 12%);
  50 |     --smoky-black: hsl(0, 0%, 7%);
  51 |     --white-1: hsl(0, 0%, 100%);
  52 |     --white-2: hsl(0, 0%, 98%);
  53 |     --orange-yellow-crayola: hsl(45, 100%, 72%);
  54 |     --vegas-gold: hsl(45, 54%, 58%);
  55 |     --light-gray: hsl(0, 0%, 84%);
  56 |     --light-gray-70: hsla(0, 0%, 84%, 0.7);
  57 |     --bittersweet-shimmer: hsl(0, 43%, 51%);
  58 |   
  59 |     /**
  60 |      * typography
  61 |      */
  62 |   
  63 |     /* font-family */
  64 |     --ff-poppins: 'Poppins', sans-serif;
  65 |   
  66 |     /* font-size */
  67 |     --fs-1: 24px;
  68 |     --fs-2: 18px;
  69 |     --fs-3: 17px;
  70 |     --fs-4: 16px;
  71 |     --fs-5: 15px;
  72 |     --fs-6: 14px;
  73 |     --fs-7: 13px;
  74 |     --fs-8: 11px;
  75 |   
  76 |     /* font-weight */
  77 |     --fw-300: 300;
  78 |     --fw-400: 400;
  79 |     --fw-500: 500;
  80 |     --fw-600: 600;
  81 |     /**
  82 |      * shadow
  83 |      */
  84 |     --shadow-1: -4px 8px 24px hsla(0, 0%, 0%, 0.25);
  85 |     --shadow-2: 0 16px 30px hsla(0, 0%, 0%, 0.25);
  86 |     --shadow-3: 0 16px 40px hsla(0, 0%, 0%, 0.25);
  87 |     --shadow-4: 0 25px 50px hsla(0, 0%, 0%, 0.15);
  88 |     --shadow-5: 0 24px 80px hsla(0, 0%, 0%, 0.25);
  89 |     /**
  90 |      * transition
  91 |      */
  92 |     --transition-1: 0.25s ease;
  93 |     --transition-2: 0.5s ease-in-out;
  94 |   }
  95 |   /*-----------------------------------*\
  96 |     #RESET
  97 |   \*-----------------------------------*/
  98 |   
  99 |   *, *::before, *::after {
 100 |     margin: 0;
 101 |     padding: 0;
 102 |     box-sizing: border-box;
 103 |   }
 104 |   
 105 |   a { text-decoration: none; }
 106 |   
 107 |   li { list-style: none; }
 108 |   
 109 |   img, ion-icon, a, button, time, span { display: block; }
 110 |   
 111 |   button {
 112 |     font: inherit;
 113 |     background: none;
 114 |     border: none;
 115 |     text-align: left;
 116 |     cursor: pointer;
 117 |   }
 118 |   
 119 |   input, textarea {
 120 |     display: block;
 121 |     width: 100%;
 122 |     background: none;
 123 |     font: inherit;
 124 |   }
 125 |   
 126 |   ::selection {
 127 |     background: var(--orange-yellow-crayola);
 128 |     color: var(--smoky-black);
 129 |   }
 130 |   
 131 |   :focus { outline-color: var(--orange-yellow-crayola); }
 132 |   
 133 |   html { font-family: var(--ff-poppins); }
 134 |   
 135 |   body { background: var(--smoky-black); }
 136 |   /*-----------------------------------*\
 137 |     #REUSED STYLE
 138 |   \*-----------------------------------*/
 139 |   
 140 |   .sidebar,
 141 |   article {
 142 |     background: var(--eerie-black-2);
 143 |     border: 1px solid var(--jet);
 144 |     border-radius: 20px;
 145 |     padding: 15px;
 146 |     box-shadow: var(--shadow-1);
 147 |     z-index: 1;
 148 |   }
 149 |   .separator {
 150 |     width: 100%;
 151 |     height: 1px;
 152 |     background: var(--jet);
 153 |     margin: 16px 0;
 154 |   }
 155 |   .icon-box {
 156 |     position: relative;
 157 |     background: var(--border-gradient-onyx);
 158 |     width: 30px;
 159 |     height: 30px;
 160 |     border-radius: 8px;
 161 |     display: flex;
 162 |     justify-content: center;
 163 |     align-items: center;
 164 |     font-size: 16px;
 165 |     color: var(--orange-yellow-crayola);
 166 |     box-shadow: var(--shadow-1);
 167 |     z-index: 1;
 168 |   }
 169 |   .icon-box::before {
 170 |     content: "";
 171 |     position: absolute;
 172 |     inset: 1px;
 173 |     background: var(--eerie-black-1);
 174 |     border-radius: inherit;
 175 |     z-index: -1;
 176 |   }
 177 |   .icon-box ion-icon { --ionicon-stroke-width: 35px; }
 178 |   article { display: none; }
 179 |   article.active {
 180 |     display: block;
 181 |     animation: fade 0.5s ease backwards;
 182 |   }
 183 |   @keyframes fade {
 184 |     0% { opacity: 0; }
 185 |     100% { opacity: 1; }
 186 |   }
 187 |   .h2,
 188 |   .h3,
 189 |   .h4,
 190 |   .h5 {
 191 |     color: var(--white-2);
 192 |     text-transform: capitalize;
 193 |   }
 194 |   .h2 { font-size: var(--fs-1); }
 195 |   
 196 |   .h3 { font-size: var(--fs-2); }
 197 |   
 198 |   .h4 { font-size: var(--fs-4); }
 199 |   
 200 |   .h5 {
 201 |     font-size: var(--fs-7);
 202 |     font-weight: var(--fw-500);
 203 |   }
 204 |   .article-title {
 205 |     position: relative;
 206 |     padding-bottom: 7px;
 207 |   }
 208 |   .article-title::after {
 209 |     content: "";
 210 |     position: absolute;
 211 |     bottom: 0;
 212 |     left: 0;
 213 |     width: 30px;
 214 |     height: 3px;
 215 |     background: var(--text-gradient-yellow);
 216 |     border-radius: 3px;
 217 |   }
 218 |   .has-scrollbar::-webkit-scrollbar {
 219 |     width: 5px; /* for vertical scrollbar */
 220 |     height: 5px; /* for horizontal scrollbar */
 221 |   }
 222 |   
 223 |   .has-scrollbar::-webkit-scrollbar-track {
 224 |     background: var(--onyx);
 225 |     border-radius: 5px;
 226 |   }
 227 |   .has-scrollbar::-webkit-scrollbar-thumb {
 228 |     background: var(--orange-yellow-crayola);
 229 |     border-radius: 5px;
 230 |   }
 231 |   .has-scrollbar::-webkit-scrollbar-button { width: 20px; }
 232 |   .content-card {
 233 |     position: relative;
 234 |     background: var(--border-gradient-onyx);
 235 |     padding: 15px;
 236 |     padding-top: 45px;
 237 |     border-radius: 14px;
 238 |     box-shadow: var(--shadow-2);
 239 |     cursor: pointer;
 240 |     z-index: 1;
 241 |   }
 242 |   .content-card::before {
 243 |     content: "";
 244 |     position: absolute;
 245 |     inset: 1px;
 246 |     background: var(--bg-gradient-jet);
 247 |     border-radius: inherit;
 248 |     z-index: -1;
 249 |   }
 250 |   /*-----------------------------------*\
 251 |     #MAIN
 252 |   \*-----------------------------------*/
 253 |   
 254 |   main {
 255 |     margin: 15px 12px;
 256 |     margin-bottom: 75px;
 257 |     min-width: 259px;
 258 |   }
 259 | 
 260 |   /*-----------------------------------*\
 261 |     #SIDEBAR
 262 |   \*-----------------------------------*/
 263 |   
 264 |   :root {
 265 |     --neon-color-dark: var(--orange-yellow-crayola);
 266 |     --neon-color-light: #0000FF; /* Define a more intense neon dark blue color */
 267 |   }
 268 |   
 269 |   /* Light mode specific styles */
 270 |   body.light-mode {
 271 |     --neon-color: var(--neon-color-light);
 272 |   }
 273 |   
 274 |   /* Dark mode specific styles */
 275 |   body.dark-mode {
 276 |     --neon-color: var(--neon-color-dark);
 277 |   }
 278 |   
 279 |   @keyframes neon-border {
 280 |     0% {
 281 |       box-shadow: 0 0 2px var(--neon-color), 0 0 2px var(--neon-color);
 282 |     }
 283 |     50% {
 284 |       box-shadow: 0 0 10px var(--neon-color), 0 0 8px var(--neon-color);
 285 |     }
 286 |     100% {
 287 |       box-shadow: 0 0 2px var(--neon-color), 0 0 2px var(--neon-color);
 288 |     }
 289 |   }
 290 |   
 291 |   .sidebar {
 292 |     margin-bottom: 15px;
 293 |     max-height: 112px;
 294 |     overflow: hidden;
 295 |     transition: var(--transition-2);
 296 |     border: 1px solid var(--neon-color);
 297 |     animation: neon-border 2s infinite;
 298 |   }
 299 |   
 300 |   
 301 |   
 302 |   
 303 |   .sidebar.active { 
 304 |     max-height: 405px; 
 305 |   }
 306 |   
 307 |   .sidebar-info {
 308 |     position: relative;
 309 |     display: flex;
 310 |     justify-content: flex-start;
 311 |     align-items: center;
 312 |     gap: 15px;
 313 |   }
 314 |   
 315 |   .info-content .name {
 316 |     color: var(--white-2);
 317 |     font-size: var(--fs-4);
 318 |     font-weight: var(--fw-500);
 319 |     letter-spacing: -0.25px;
 320 |     margin-bottom: 10px;
 321 |   }
 322 |   
 323 |   .info-content .title {
 324 |     color: var(--white-1);
 325 |     background: var(--onyx);
 326 |     font-size: var(--fs-8);
 327 |     font-weight: var(--fw-300);
 328 |     width: max-content;
 329 |     padding: 3px 12px;
 330 |     border-radius: 8px;
 331 |   }
 332 |   
 333 |   .info_more-btn {
 334 |     position: absolute;
 335 |     top: -15px;
 336 |     right: -15px;
 337 |     border-radius: 0 15px;
 338 |     font-size: 13px;
 339 |     color: var(--orange-yellow-crayola);
 340 |     background: var(--border-gradient-onyx);
 341 |     padding: 10px;
 342 |     box-shadow: var(--shadow-2);
 343 |     transition: var(--transition-1);
 344 |     z-index: 1;
 345 |   }
 346 |   
 347 |   .info_more-btn::before {
 348 |     content: "";
 349 |     position: absolute;
 350 |     inset: 1px;
 351 |     border-radius: inherit;
 352 |     background: var(--bg-gradient-jet);
 353 |     transition: var(--transition-1);
 354 |     z-index: -1;
 355 |   }
 356 |   
 357 |   .info_more-btn:hover,
 358 |   .info_more-btn:focus { 
 359 |     background: var(--bg-gradient-yellow-1); 
 360 |   }
 361 |   
 362 |   .info_more-btn:hover::before,
 363 |   .info_more-btn:focus::before { 
 364 |     background: var(--bg-gradient-yellow-2); 
 365 |   }
 366 |   
 367 |   .info_more-btn span { 
 368 |     display: none; 
 369 |   }
 370 |   
 371 |   .sidebar-info_more {
 372 |     opacity: 0;
 373 |     visibility: hidden;
 374 |     transition: var(--transition-2);
 375 |   }
 376 |   
 377 |   .sidebar.active .sidebar-info_more {
 378 |     opacity: 1;
 379 |     visibility: visible;
 380 |   }
 381 |   
 382 |   
 383 |   
 384 |   .contacts-list {
 385 |     display: grid;
 386 |     grid-template-columns: 1fr;
 387 |     gap: 16px;
 388 |   }
 389 |   
 390 |   .contact-item {
 391 |     min-width: 100%;
 392 |     display: flex;
 393 |     align-items: center;
 394 |     gap: 16px;
 395 |   }
 396 |   
 397 |   .contact-info {
 398 |     max-width: calc(100% - 46px);
 399 |     width: calc(100% - 46px);
 400 |   }
 401 |   
 402 |   .contact-title {
 403 |     color: var(--light-gray-70);
 404 |     font-size: var(--fs-8);
 405 |     text-transform: uppercase;
 406 |     margin-bottom: 2px;
 407 |   }
 408 |   
 409 |   .contact-info :is(.contact-link, time, address) {
 410 |     color: var(--white-2);
 411 |     font-size: var(--fs-7);
 412 |   }
 413 |   
 414 |   .contact-info address { font-style: normal; }
 415 |   
 416 |   .social-list {
 417 |     display: flex;
 418 |     justify-content: flex-start;
 419 |     align-items: center;
 420 |     gap: 15px;
 421 |     padding-bottom: 4px;
 422 |     padding-left: 7px;
 423 |   }
 424 |   
 425 |   .social-item .social-link {
 426 |     color: var(--light-gray-70);
 427 |     font-size: 18px;
 428 |   }
 429 |   .social-item .social-link:hover { color: var(--light-gray); }
 430 |   
 431 |  /* Default dark mode styles */
 432 | /* Navbar styling */
 433 | nav {
 434 |   position: fixed;
 435 |   top: 1;
 436 |   width: 100%;
 437 |   z-index: 1000; /* Ensure it stays above other elements */
 438 |   background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent background */
 439 |   backdrop-filter: blur(10px); /* Apply blur effect to the navbar */
 440 |   color: #000;
 441 | }
 442 | 
 443 | /* Default dark mode styles */
 444 | body.dark-mode {
 445 |   background-color: #121212;
 446 |   color: #ffffff;
 447 | }
 448 | 
 449 | /* Light mode styles */
 450 | body.light-mode {
 451 |   background-color: #cacaca; /* Light mode background color */
 452 |   color: #ffffff; /* Text color in light mode */
 453 | }
 454 | 
 455 | /* Description text specific styling */
 456 | body.dark-mode .about-text p {
 457 |   color: #ffffff; /* White color in dark mode */
 458 | }
 459 | 
 460 | body.light-mode .about-text p {
 461 |   color: #ffffff; /* Black color in light mode */
 462 | }
 463 | 
 464 | /* Mode toggle button styling */
 465 | .mode-toggle {
 466 |   position: fixed;
 467 |   top: 10px;
 468 |   left: 10px; /* Adjusted for better positioning */
 469 |   padding: 10px 5px;
 470 |   cursor: pointer;
 471 |   background-color: #000;
 472 |   color: #fff;
 473 |   border: 2px solid;
 474 |   border-radius: 5px;
 475 | }
 476 | 
 477 | body.light-mode .mode-toggle {
 478 |   background-color: #fff;
 479 |   color: #000;
 480 | }
 481 | 
 482 | /* Ensure body content is not hidden behind fixed navbar */
 483 | body {
 484 |   padding-top: 50px; /* Adjust this value to match the height of your navbar */
 485 | }
 486 | 
 487 |   /*-----------------------------------*\
 488 |     #NAVBAR
 489 |   \*-----------------------------------*/
 490 |   
 491 |   .navbar {
 492 |     position: fixed;
 493 |     bottom: 0;
 494 |     left: 0;
 495 |     width: 100%;
 496 |     background: hsla(240, 1%, 17%, 0.75);
 497 |     backdrop-filter: blur(10px);
 498 |     border: 1px solid var(--jet);
 499 |     border-radius: 12px 12px 0 0;
 500 |     box-shadow: var(--shadow-2);
 501 |     z-index: 5;
 502 |   }
 503 |   
 504 |   .navbar-list {
 505 |     display: flex;
 506 |     flex-wrap: wrap;
 507 |     justify-content: center;
 508 |     align-items: center;
 509 |     padding: 0 10px;
 510 |   }
 511 |   
 512 |   .navbar-link {
 513 |     color: var(--light-gray);
 514 |     font-size: var(--fs-8);
 515 |     padding: 20px 7px;
 516 |     transition: color var(--transition-1);
 517 |   }
 518 |   
 519 |   .navbar-link:hover,
 520 |   .navbar-link:focus { color: var(--light-gray-70); }
 521 |   
 522 |   .navbar-link.active { color: var(--orange-yellow-crayola); }
 523 |   /*-----------------------------------*\
 524 |     #ABOUT
 525 |   \*-----------------------------------*/
 526 |   
 527 |   .about .article-title { margin-bottom: 15px; }
 528 |   
 529 |   .about-text {
 530 |     color: var(--light-gray);
 531 |     font-size: var(--fs-6);
 532 |     font-weight: var(--fw-300);
 533 |     line-height: 1.6;
 534 |   }
 535 |   
 536 |   .about-text p { margin-bottom: 15px; }
 537 |   /**
 538 |    * #service in about page
 539 |    */
 540 |    .service { margin-bottom: 35px; }
 541 |   
 542 |   .service-title { margin-bottom: 20px; }
 543 |   
 544 |   .service-list {
 545 |     display: grid;
 546 |     grid-template-columns: 1fr;
 547 |     gap: 20px;
 548 |   }
 549 |   
 550 |   .service-item {
 551 |     position: relative;
 552 |     background: var(--border-gradient-onyx);
 553 |     padding: 20px;
 554 |     border-radius: 14px;
 555 |     box-shadow: var(--shadow-2);
 556 |     z-index: 1;
 557 |   }
 558 |   
 559 |   .service-item::before {
 560 |     content: "";
 561 |     position: absolute;
 562 |     inset: 1px;
 563 |     background: var(--bg-gradient-jet);
 564 |     border-radius: inherit;
 565 |     z-index: -1;
 566 |   }
 567 |   
 568 |   .service-icon-box { margin-bottom: 10px; }
 569 |   
 570 |   .service-icon-box img { margin: auto; }
 571 |   
 572 |   .service-content-box { text-align: center; }
 573 |   
 574 |   .service-item-title { margin-bottom: 7px; }
 575 |   
 576 |   .service-item-text {
 577 |     color: var(--light-gray);
 578 |     font-size: var(--fs-6);
 579 |     font-weight: var(--fw-3);
 580 |     line-height: 1.6;
 581 |   }
 582 |   
 583 |   .stats-image {
 584 |     flex: 1 1 300px; /* Flex-grow, flex-shrink, flex-basis */
 585 |     max-width: 100%;
 586 |     height: auto;
 587 |   }
 588 | 
 589 |   .stats-container {
 590 |     display: flex;
 591 |     justify-content: center;
 592 |     align-items: center;
 593 |     flex-wrap: wrap;
 594 |     gap: 13px; /* 2px gap between images */
 595 |   }
 596 |   
 597 |   .responsive-image {
 598 |     max-width: 100%;
 599 |     height: auto;
 600 |   }
 601 |   
 602 |   .stats-wrapper {
 603 |     width: 100%;
 604 |     max-width: 400px; /* Set a max-width for the container */
 605 |     margin: 0 auto;
 606 |   }
 607 |   /*-----------------------------------*\
 608 |     #RESUME
 609 |   \*-----------------------------------*/
 610 |   
 611 |   .article-title { margin-bottom: 30px; }
 612 |   /**
 613 |    * education and experience 
 614 |    */
 615 |   .timeline { margin-bottom: 30px; }
 616 |   .timeline .title-wrapper {
 617 |     display: flex;
 618 |     align-items: center;
 619 |     gap: 15px;
 620 |     margin-bottom: 25px;
 621 |   }
 622 |   
 623 |   .timeline-list {
 624 |     font-size: var(--fs-6);
 625 |     margin-left: 45px;
 626 |   }
 627 |   .timeline-item { position: relative; }
 628 |   .timeline-item:not(:last-child) { margin-bottom: 20px; }
 629 |   .timeline-item-title {
 630 |     font-size: var(--fs-6);
 631 |     line-height: 1.3;
 632 |     margin-bottom: 7px;
 633 |   }
 634 |   .timeline-list span {
 635 |     color: var(--vegas-gold);
 636 |     font-weight: var(--fw-400);
 637 |     line-height: 1.6;
 638 |   }
 639 |   .timeline-item:not(:last-child)::before {
 640 |     content: "";
 641 |     position: absolute;
 642 |     top: -25px;
 643 |     left: -30px;
 644 |     width: 1px;
 645 |     height: calc(100% + 50px);
 646 |     background: var(--jet);
 647 |   }
 648 |   .timeline-item::after {
 649 |     content: "";
 650 |     position: absolute;
 651 |     top: 5px;
 652 |     left: -33px;
 653 |     height: 6px;
 654 |     width: 6px;
 655 |     background: var(--text-gradient-yellow);
 656 |     border-radius: 50%;
 657 |     box-shadow: 0 0 0 4px var(--jet);
 658 |   }
 659 |   .timeline-text {
 660 |     color: var(--light-gray);
 661 |     font-weight: var(--fw-300);
 662 |     line-height: 1.6;
 663 |   }
 664 | .container {
 665 |     text-align: center;
 666 |     margin-top: 20px;
 667 | }
 668 | #downloadBtn {
 669 |     background-color: #4CAF50;
 670 |     color: white;
 671 |     border: none;
 672 |     padding: 15px 32px;
 673 |     text-align: center;
 674 |     text-decoration: none;
 675 |     display: inline-block;
 676 |     font-size: 16px;
 677 |     margin: 4px 2px;
 678 |     cursor: pointer;
 679 |     border-radius: 4px;
 680 |     transition: background-color 0.3s ease;
 681 | }
 682 | 
 683 | #downloadBtn:hover {
 684 |     background-color: #48854b;
 685 | } 
 686 |   /*
 687 |     skills 
 688 |    */
 689 |    /* General styling for the skill section */
 690 | .skill {
 691 |   padding: 10px;
 692 | }
 693 | 
 694 | .skills-title {
 695 |   margin-bottom: 20px;
 696 |   font-size: 22px;
 697 | }
 698 | 
 699 | .skills-list {
 700 |   list-style-type: none;
 701 |   padding: 10;
 702 | }
 703 | 
 704 | .skills-item {
 705 |   display: flex;
 706 |   flex-wrap: wrap;
 707 |   justify-content: space-between;
 708 |   margin-bottom: 10px;
 709 | }
 710 | 
 711 | .skills-item b {
 712 |   flex: 1;
 713 |   min-width: 150px; /* Ensure labels don't get too narrow */
 714 |   font-size: 14px;
 715 | }
 716 | 
 717 | .skills-item span {
 718 |   flex: 2;
 719 |   text-align: left;
 720 |   font-size: 14px;
 721 | }
 722 | 
 723 | /* Adjustments for smaller screens */
 724 | @media (max-width: 768px) {
 725 |   .skills-item {
 726 |     flex-direction: column;
 727 |     align-items: flex-start;
 728 |   }
 729 | 
 730 |   .skills-item b {
 731 |     margin-bottom: 5px; /* Add some spacing between label and content */
 732 |     min-width: auto; /* Reset min-width */
 733 |   }
 734 | 
 735 |   .skills-item span {
 736 |     text-align: left;
 737 |   }
 738 | }
 739 | 
 740 |   /*-----------------------------------*\
 741 |     #PRojects page
 742 |   \*-----------------------------------*/
 743 |   
 744 |   .filter-list { display: none; }
 745 |   
 746 |   .filter-select-box {
 747 |     position: relative;
 748 |     margin-bottom: 25px;
 749 |   }
 750 |   
 751 |   .filter-select {
 752 |     background: var(--eerie-black-2);
 753 |     color: var(--light-gray);
 754 |     display: flex;
 755 |     justify-content: space-between;
 756 |     align-items: center;
 757 |     width: 100%;
 758 |     padding: 12px 16px;
 759 |     border: 1px solid var(--jet);
 760 |     border-radius: 14px;
 761 |     font-size: var(--fs-6);
 762 |     font-weight: var(--fw-300);
 763 |   }
 764 |   
 765 |   .filter-select.active .select-icon { transform: rotate(0.5turn); }
 766 |   
 767 |   .select-list {
 768 |     background: var(--eerie-black-2);
 769 |     position: absolute;
 770 |     top: calc(100% + 6px);
 771 |     width: 100%;
 772 |     padding: 6px;
 773 |     border: 1px solid var(--jet);
 774 |     border-radius: 14px;
 775 |     z-index: 2;
 776 |     opacity: 0;
 777 |     visibility: hidden;
 778 |     pointer-events: none;
 779 |     transition: 0.15s ease-in-out;
 780 |   }
 781 |   
 782 |   .filter-select.active + .select-list {
 783 |     opacity: 1;
 784 |     visibility: visible;
 785 |     pointer-events: all;
 786 |   }
 787 |   
 788 |   .select-item button {
 789 |     background: var(--eerie-black-2);
 790 |     color: var(--light-gray);
 791 |     font-size: var(--fs-6);
 792 |     font-weight: var(--fw-300);
 793 |     text-transform: capitalize;
 794 |     width: 100%;
 795 |     padding: 8px 10px;
 796 |     border-radius: 8px;
 797 |   }
 798 |   
 799 |   .select-item button:hover { --eerie-black-2: hsl(240, 2%, 20%); }
 800 |   
 801 |   .project-list {
 802 |     display: grid;
 803 |     grid-template-columns: 1fr;
 804 |     gap: 30px;
 805 |     margin-bottom: 10px;
 806 |   }
 807 |   
 808 |   .project-item { display: none; }
 809 |   
 810 |   .project-item.active {
 811 |     display: block;
 812 |     animation: scaleUp 0.25s ease forwards;
 813 |   }
 814 |   
 815 |   @keyframes scaleUp {
 816 |     0% { transform: scale(0.5); }
 817 |     100% { transform: scale(1); }
 818 |   }
 819 |   
 820 |   .project-item > a { width: 100%; }
 821 |   
 822 |   .project-img {
 823 |     position: relative;
 824 |     width: 100%;
 825 |     height: 200px;
 826 |     border-radius: 16px;
 827 |     overflow: hidden;
 828 |     margin-bottom: 15px;
 829 |   }
 830 |   
 831 |   .project-img::before {
 832 |     content: "";
 833 |     position: absolute;
 834 |     top: 0;
 835 |     left: 0;
 836 |     width: 100%;
 837 |     height: 100%;
 838 |     background: transparent;
 839 |     z-index: 1;
 840 |     transition: var(--transition-1);
 841 |   }
 842 |   
 843 |   .project-item > a:hover .project-img::before { background: hsla(0, 0%, 0%, 0.5); }
 844 |   
 845 |   .project-item-icon-box {
 846 |     --scale: 0.8;
 847 |   
 848 |     background: var(--jet);
 849 |     color: var(--orange-yellow-crayola);
 850 |     position: absolute;
 851 |     top: 50%;
 852 |     left: 50%;
 853 |     transform: translate(-50%, -50%) scale(var(--scale));
 854 |     font-size: 20px;
 855 |     padding: 18px;
 856 |     border-radius: 12px;
 857 |     opacity: 0;
 858 |     z-index: 1;
 859 |     transition: var(--transition-1);
 860 |   }
 861 |   
 862 |   .project-item > a:hover .project-item-icon-box {
 863 |     --scale: 1;
 864 |     opacity: 1;
 865 |   }
 866 |   
 867 |   .project-item-icon-box ion-icon { --ionicon-stroke-width: 50px; }
 868 |   
 869 |   .project-img img {
 870 |     width: 100%;
 871 |     height: 100%;
 872 |     object-fit: cover;
 873 |     transition: var(--transition-1);
 874 |   }
 875 |   
 876 |   .project-item > a:hover img { transform: scale(1.1); }
 877 |   
 878 |   .project-title,
 879 |   .project-category { margin-left: 10px; }
 880 |   
 881 |   .project-title {
 882 |     color: var(--white-2);
 883 |     font-size: var(--fs-5);
 884 |     font-weight: var(--fw-400);
 885 |     text-transform: capitalize;
 886 |     line-height: 1.3;
 887 |   }
 888 |   .project-title a {
 889 |     color: inherit; /* Match the link color with the text */
 890 |     text-decoration: none; /* Remove underline from the link */
 891 |     font-weight: bold; /* Make the link bold or adjust as needed */
 892 |   }
 893 |   
 894 |   .project-title a:hover {
 895 |     text-decoration: underline; /* Add underline on hover or any hover effect you prefer */
 896 |   }
 897 |   
 898 |   .project-category {
 899 |     color: var(--light-gray-70);
 900 |     font-size: var(--fs-6);
 901 |     font-weight: var(--fw-300);
 902 |   }
 903 | 
 904 | /*
 905 | Filtering items in certification page
 906 | */
 907 | .filter-list1 { display: none; }
 908 |   
 909 | .filter-select-box1 {
 910 |   position: relative;
 911 |   margin-bottom: 25px;
 912 | }
 913 | 
 914 | .filter-select1 {
 915 |   background: var(--eerie-black-2);
 916 |   color: var(--light-gray);
 917 |   display: flex;
 918 |   justify-content: space-between;
 919 |   align-items: center;
 920 |   width: 100%;
 921 |   padding: 12px 16px;
 922 |   border: 1px solid var(--jet);
 923 |   border-radius: 14px;
 924 |   font-size: var(--fs-6);
 925 |   font-weight: var(--fw-300);
 926 | }
 927 | 
 928 | .filter-select1.active .select-icon1 { transform: rotate(0.5turn); }
 929 | 
 930 | .select-list1 {
 931 |   background: var(--eerie-black-2);
 932 |   position: absolute;
 933 |   top: calc(100% + 6px);
 934 |   width: 100%;
 935 |   padding: 6px;
 936 |   border: 1px solid var(--jet);
 937 |   border-radius: 14px;
 938 |   z-index: 2;
 939 |   opacity: 0;
 940 |   visibility: hidden;
 941 |   pointer-events: none;
 942 |   transition: 0.15s ease-in-out;
 943 | }
 944 | 
 945 | .filter-select1.active + .select-list1 {
 946 |   opacity: 1;
 947 |   visibility: visible;
 948 |   pointer-events: all;
 949 | }
 950 | 
 951 | .select-item1 button {
 952 |   background: var(--eerie-black-2);
 953 |   color: var(--light-gray);
 954 |   font-size: var(--fs-6);
 955 |   font-weight: var(--fw-300);
 956 |   text-transform: capitalize;
 957 |   width: 100%;
 958 |   padding: 8px 10px;
 959 |   border-radius: 8px;
 960 | }
 961 | 
 962 | .select-item1 button:hover { --eerie-black-2: hsl(240, 2%, 20%); }
 963 |   
 964 |   
 965 |   /*-----------------------------------*\
 966 |     #CONTACT
 967 |   \*-----------------------------------*/
 968 |   
 969 |   .mapbox {
 970 |     position: relative;
 971 |     height: 250px;
 972 |     width: 100%;
 973 |     border-radius: 16px;
 974 |     margin-bottom: 30px;
 975 |     border: 1px solid var(--jet);
 976 |     overflow: hidden;
 977 |   }
 978 |   
 979 |   .mapbox figure { height: 100%; }
 980 |   
 981 |   .mapbox iframe {
 982 |     width: 100%;
 983 |     height: 100%;
 984 |     border: none;
 985 |     filter: grayscale(1) invert(1);
 986 |   }
 987 |   
 988 |   .contact-form { margin-bottom: 10px; }
 989 |   
 990 |   .form-title { margin-bottom: 20px; }
 991 |   
 992 |   .input-wrapper {
 993 |     display: grid;
 994 |     grid-template-columns: 1fr;
 995 |     gap: 25px;
 996 |     margin-bottom: 25px;
 997 |   }
 998 |   
 999 |   .form-input {
1000 |     color: var(--white-2);
1001 |     font-size: var(--fs-6);
1002 |     font-weight: var(--fw-400);
1003 |     padding: 13px 20px;
1004 |     border: 1px solid var(--jet);
1005 |     border-radius: 14px;
1006 |     outline: none;
1007 |   }
1008 |   
1009 |   .form-input::placeholder { font-weight: var(--fw-500); }
1010 |   
1011 |   .form-input:focus { border-color: var(--orange-yellow-crayola); }
1012 |   
1013 |   textarea.form-input {
1014 |     min-height: 100px;
1015 |     height: 120px;
1016 |     max-height: 200px;
1017 |     resize: vertical;
1018 |     margin-bottom: 25px;
1019 |   }
1020 |   
1021 |   textarea.form-input::-webkit-resizer { display: none; }
1022 |   
1023 |   .form-input:focus:invalid { border-color: var(--bittersweet-shimmer); }
1024 |   
1025 |   .form-btn {
1026 |     position: relative;
1027 |     width: 100%;
1028 |     background: var(--border-gradient-onyx);
1029 |     color: var(--orange-yellow-crayola);
1030 |     display: flex;
1031 |     justify-content: center;
1032 |     align-items: center;
1033 |     gap: 10px;
1034 |     padding: 13px 20px;
1035 |     border-radius: 14px;
1036 |     font-size: var(--fs-6);
1037 |     text-transform: capitalize;
1038 |     box-shadow: var(--shadow-3);
1039 |     z-index: 1;
1040 |     transition: var(--transition-1);
1041 |   }
1042 |   
1043 |   .form-btn::before {
1044 |     content: "";
1045 |     position: absolute;
1046 |     inset: 1px;
1047 |     background: var(--bg-gradient-jet);
1048 |     border-radius: inherit;
1049 |     z-index: -1;
1050 |     transition: var(--transition-1);
1051 |   }
1052 |   
1053 |   .form-btn ion-icon { font-size: 16px; }
1054 |   
1055 |   .form-btn:hover { background: var(--bg-gradient-yellow-1); }
1056 |   
1057 |   .form-btn:hover::before { background: var(--bg-gradient-yellow-2); }
1058 |   
1059 |   .form-btn:disabled {
1060 |     opacity: 0.7;
1061 |     cursor: not-allowed;
1062 |   }
1063 |   
1064 |   .form-btn:disabled:hover { background: var(--border-gradient-onyx); }
1065 |   
1066 |   .form-btn:disabled:hover::before { background: var(--bg-gradient-jet); }
1067 |   
1068 |   /*-----------------------------------*\
1069 |     #RESPONSIVE
1070 |   \*-----------------------------------*/
1071 |   
1072 |   /**
1073 |    * responsive larger than 450px screen
1074 |    */
1075 |   
1076 |   @media (min-width: 450px) {
1077 |     .clients-item { min-width: calc(33.33% - 10px); } 
1078 |     .project-img,
1079 |     .Certifications-banner-box { height: auto; }
1080 |   
1081 |   }
1082 |   /**
1083 |    * responsive larger than 580px screen
1084 |    */
1085 |   
1086 |   @media (min-width: 580px) {
1087 |   
1088 |     /**
1089 |      * CUSTOM PROPERTY
1090 |      */
1091 |   
1092 |     :root {
1093 |       /**
1094 |        * typography
1095 |        */
1096 |   
1097 |       --fs-1: 32px;
1098 |       --fs-2: 24px;
1099 |       --fs-3: 26px;
1100 |       --fs-4: 18px;
1101 |       --fs-6: 15px;
1102 |       --fs-7: 15px;
1103 |       --fs-8: 12px;
1104 |     }
1105 |     /**
1106 |      * #REUSED STYLE
1107 |      */
1108 |   
1109 |     .sidebar, article {
1110 |       width: 520px;
1111 |       margin-inline: auto;
1112 |       padding: 30px;
1113 |     }
1114 |     .article-title {
1115 |       font-weight: var(--fw-600);
1116 |       padding-bottom: 15px;
1117 |     }
1118 |     .article-title::after {
1119 |       width: 40px;
1120 |       height: 5px;
1121 |     }
1122 |   
1123 |     .icon-box {
1124 |       width: 48px;
1125 |       height: 48px;
1126 |       border-radius: 12px;
1127 |       font-size: 18px;
1128 |     }
1129 |     /**
1130 |      * #MAIN
1131 |      */
1132 |     main {
1133 |       margin-top: 60px;
1134 |       margin-bottom: 100px;
1135 |     }
1136 |     /**
1137 |      * #SIDEBAR
1138 |      */
1139 |     .sidebar {
1140 |       max-height: 180px;
1141 |       margin-bottom: 30px;
1142 |     }
1143 |     .sidebar.active { max-height: 584px; }
1144 |     .sidebar-info { gap: 25px; }
1145 |     .avatar-box { border-radius: 30px; }
1146 |     .avatar-box img { width: 120px; }
1147 |     .info-content .name { margin-bottom: 15px; }
1148 |     .info-content .title { padding: 5px 18px; }
1149 |     .info_more-btn {
1150 |       top: -30px;
1151 |       right: -30px;
1152 |       padding: 10px 15px;
1153 |     }
1154 |   
1155 |     .info_more-btn span {
1156 |       display: block;
1157 |       font-size: var(--fs-8);
1158 |     }
1159 |   
1160 |     .info_more-btn ion-icon { display: none; }
1161 |     .separator { margin: 32px 0; }
1162 |     .contacts-list { gap: 20px; }
1163 |     .contact-info {
1164 |       max-width: calc(100% - 64px);
1165 |       width: calc(100% - 64px);
1166 |     }
1167 |     /**
1168 |      * #NAVBAR
1169 |      */
1170 |     .navbar { border-radius: 20px 20px 0 0; }
1171 |     .navbar-list { gap: 20px; }
1172 |     .navbar-link { --fs-8: 14px; }
1173 |     /**
1174 |      * #ABOUT
1175 |      */
1176 |     .about .article-title { margin-bottom: 20px; }
1177 |     .about-text { margin-bottom: 40px; }
1178 |     /* service */
1179 |     .service-item {
1180 |       display: flex;
1181 |       justify-content: flex-start;
1182 |       align-items: flex-start;
1183 |       gap: 18px;
1184 |       padding: 30px;
1185 |     }
1186 |     .service-icon-box {
1187 |       margin-bottom: 0;
1188 |       margin-top: 5px;
1189 |     }
1190 |   
1191 |     .service-content-box { text-align: left; }
1192 |     /**
1193 |      * #RESUME
1194 |      */
1195 |     .timeline-list { margin-left: 65px; }
1196 |     .timeline-item:not(:last-child)::before { left: -40px; }
1197 |     .timeline-item::after {
1198 |       height: 8px;
1199 |       width: 8px;
1200 |       left: -43px;
1201 |     }
1202 |     .skills-item:not(:last-child) { margin-bottom: 25px; }
1203 |     /**
1204 |      * #Projects and certifications
1205 |      */
1206 |   
1207 |     .project-img, .Certifications-banner-box { border-radius: 16px; }
1208 |     .Certifications-posts-list { gap: 30px; }
1209 |     .Certifications-content { padding: 25px; }
1210 |     /**
1211 |      * #CONTACT
1212 |      */
1213 |   
1214 |     .mapbox {
1215 |       height: 380px;
1216 |       border-radius: 18px;
1217 |     }
1218 |     .input-wrapper {
1219 |       gap: 30px;
1220 |       margin-bottom: 30px;
1221 |     }
1222 |     .form-input { padding: 15px 20px; }
1223 |     textarea.form-input { margin-bottom: 30px; }
1224 |     .form-btn {
1225 |       --fs-6: 16px;
1226 |       padding: 16px 20px;
1227 |     }
1228 |     .form-btn ion-icon { font-size: 18px; }
1229 |   }
1230 |   /**
1231 |    * responsive larger than 768px screen
1232 |    */
1233 |   
1234 |   @media (min-width: 768px) {
1235 |     /**
1236 |      * REUSED STYLE
1237 |      */
1238 |   
1239 |     .sidebar, article { width: 700px; }
1240 |   
1241 |     .has-scrollbar::-webkit-scrollbar-button { width: 100px; }
1242 |     .contacts-list {
1243 |       grid-template-columns: 1fr 1fr;
1244 |       gap: 30px 15px;
1245 |     }
1246 |     /**
1247 |      * NAVBAR
1248 |      */
1249 |     .navbar-link { --fs-8: 15px; }
1250 |     /*
1251 |      * Projects page
1252 |      */
1253 |   
1254 |     .article-title { padding-bottom: 20px; }
1255 |     .filter-select-box { display: none; }
1256 |     .filter-list {
1257 |       display: flex;
1258 |       justify-content: flex-start;
1259 |       align-items: center;
1260 |       gap: 25px;
1261 |       padding-left: 5px;
1262 |       margin-bottom: 30px;
1263 |     }
1264 |     .filter-item button {
1265 |       color: var(--light-gray);
1266 |       font-size: var(--fs-5);
1267 |       transition: var(--transition-1);
1268 |     }
1269 |     .filter-item button:hover { color: var(--light-gray-70); }
1270 |     .filter-item button.active { color: var(--orange-yellow-crayola); }
1271 |     /* projects and certifications page */
1272 |     .project-list, .Certifications-posts-list { grid-template-columns: 1fr 1fr; }
1273 |     /**
1274 |      * CONTACT
1275 |      */
1276 |     .input-wrapper { grid-template-columns: 1fr 1fr; }
1277 |     .form-btn {
1278 |       width: max-content;
1279 |       margin-left: auto;
1280 |     }
1281 |     
1282 |   }
1283 |   /**
1284 |    * responsive larger than 1024px screen
1285 |    */
1286 |   @media (min-width: 1024px) {
1287 |   
1288 |     /**
1289 |      * CUSTOM PROPERTY
1290 |      */
1291 |     :root {
1292 |   
1293 |       /**
1294 |       * shadow
1295 |       */
1296 |   
1297 |       --shadow-1: -4px 8px 24px hsla(0, 0%, 0%, 0.125);
1298 |       --shadow-2: 0 16px 30px hsla(0, 0%, 0%, 0.125);
1299 |       --shadow-3: 0 16px 40px hsla(0, 0%, 0%, 0.125);
1300 |   
1301 |     }
1302 |     /**
1303 |      * REUSED STYLE
1304 |      */
1305 |   
1306 |     .sidebar, article {
1307 |       width: 950px;
1308 |       box-shadow: var(--shadow-5);
1309 |     }
1310 |     /**
1311 |      * MAIN 
1312 |      */
1313 |   
1314 |     main { margin-bottom: 60px; }
1315 |   
1316 |     .main-content {
1317 |       position: relative;
1318 |       width: max-content;
1319 |       margin: auto;
1320 |     }
1321 |     /**
1322 |      * NAVBAR
1323 |      */
1324 |   
1325 |     .navbar {
1326 |       position: absolute;
1327 |       bottom: auto;
1328 |       top: 0;
1329 |       left: auto;
1330 |       right: 0;
1331 |       width: max-content;
1332 |       border-radius: 0 20px;
1333 |       padding: 0 20px;
1334 |       box-shadow: none;
1335 |     }
1336 |   
1337 |     .navbar-list {
1338 |       gap: 30px;
1339 |       padding: 0 20px;
1340 |     }
1341 |   
1342 |     .navbar-link { font-weight: var(--fw-500); }
1343 |     /* service */
1344 |     .service-list {
1345 |       grid-template-columns: 1fr 1fr;
1346 |       gap: 20px 25px;
1347 |     }
1348 |     /**
1349 |      * Projects & certifications
1350 |      */
1351 |   
1352 |     .project-list { grid-template-columns: repeat(3, 1fr); }
1353 |     .Ceritifications-banner-box { height: 230px; }
1354 |   
1355 |   }
1356 |   
1357 |   /**
1358 |    * responsive larger than 1250px screen
1359 |    */
1360 |   
1361 |   @media (min-width: 1250px) {
1362 |   
1363 |     /**
1364 |      * RESET
1365 |      */
1366 |     body::-webkit-scrollbar { width: 20px; }
1367 |     body::-webkit-scrollbar-track { background: var(--smoky-black); }
1368 |     body::-webkit-scrollbar-thumb {
1369 |       border: 5px solid var(--smoky-black);
1370 |       background: hsla(0, 0%, 100%, 0.1);
1371 |       border-radius: 20px;
1372 |       box-shadow: inset 1px 1px 0 hsla(0, 0%, 100%, 0.11),
1373 |                   inset -1px -1px 0 hsla(0, 0%, 100%, 0.11);
1374 |     }
1375 |     body::-webkit-scrollbar-thumb:hover { background: hsla(0, 0%, 100%, 0.15); }
1376 |     body::-webkit-scrollbar-button { height: 60px; }
1377 |     /**
1378 |      * REUSED STYLE
1379 |      */
1380 |   
1381 |     .sidebar, article { width: auto; }
1382 |   
1383 |     article { min-height: 100%; }
1384 |   
1385 |     /**
1386 |      * MAIN
1387 |      */
1388 |   
1389 |     main {
1390 |       max-width: 1200px;
1391 |       margin-inline: auto;
1392 |       display: flex;
1393 |       justify-content: center;
1394 |       align-items: stretch;
1395 |       gap: 25px;
1396 |     }
1397 |   
1398 |     .main-content {
1399 |       min-width: 75%;
1400 |       width: 75%;
1401 |       margin: 0;
1402 |     }
1403 |     /**
1404 |      * SIDEBAR
1405 |      */
1406 |   
1407 |     .sidebar {
1408 |       position: sticky;
1409 |       top: 60px;
1410 |       max-height: max-content;
1411 |       height: 100%;
1412 |       margin-bottom: 0;
1413 |       padding-top: 60px;
1414 |       z-index: 1;
1415 |     }
1416 |   
1417 |     .sidebar-info { flex-direction: column; }
1418 |   
1419 |     .avatar-box img { width: 150px; }
1420 |   
1421 |     .info-content .name {
1422 |       white-space: nowrap;
1423 |       text-align: center;
1424 |     }
1425 |   
1426 |     .info-content .title { margin: auto; }
1427 |   
1428 |     .info_more-btn { display: none; }
1429 |   
1430 |     .sidebar-info_more {
1431 |       opacity: 1;
1432 |       visibility: visible;
1433 |     }
1434 | 
1435 |     .contacts-list { grid-template-columns: 1fr; }
1436 |   
1437 |     .contact-info :is(.contact-link) {
1438 |       white-space: nowrap;
1439 |       overflow: hidden;
1440 |       text-overflow: ellipsis;
1441 |     }
1442 |   
1443 |     .contact-info :is(.contact-link, time, address) {
1444 |       --fs-7: 14px;
1445 |       font-weight: var(--fw-300);
1446 |     }
1447 |   
1448 |     .separator:last-of-type {
1449 |       margin: 15px 0;
1450 |       opacity: 0;
1451 |     }
1452 |   
1453 |     .social-list { justify-content: center; }
1454 |     /**
1455 |        * RESUME
1456 |        */
1457 |   
1458 |     .timeline-text { max-width: 700px; }
1459 |   
1460 |   }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
   1 | 
   2 | <!DOCTYPE html>
   3 | <html lang="en">
   4 | 
   5 | <head>
   6 |   <meta charset="UTF-8">
   7 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   8 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   9 |   <title>Venkat Chandu Portfolio</title>
  10 |   <link rel="shortcut icon" href="./assets/images/venky.jpg" type="image/x-icon">
  11 |   <link rel="stylesheet" href="port.css">
  12 |   <link rel="preconnect" href="https://fonts.googleapis.com">
  13 |   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  14 |   <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
  15 |   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  16 | </head>
  17 | <body class="dark-mode">
  18 |   <button id="mode-toggle" class="mode-toggle"><ion-icon name="moon-outline"></ion-icon></button>
  19 |   <main>
  20 |     <!--
  21 |       - #SIDEBAR
  22 |     -->
  23 |     <aside class="sidebar" data-sidebar>
  24 |       <div class="sidebar-info">
  25 |         <figure class="avatar-box">
  26 |           <img src="https://res.cloudinary.com/dhmixzenl/image/upload/v1734070039/22P31A0557-fotor-20241213113646_uog4nf.png" alt="Venkat" width="80">
  27 |         </figure>
  28 |         <div class="info-content">
  29 |           <h1 class="name" title="Abbireddy Venkata Chandu">Venkata Chandu</h1>
  30 |           <p class="title">Computer Science Student</p>
  31 |         </div>
  32 |         <button class="info_more-btn" data-sidebar-btn>
  33 |           <span>Show Contacts</span>
  34 |           <ion-icon name="chevron-down"></ion-icon>
  35 |         </button>
  36 |       </div>
  37 |       <div class="sidebar-info_more">
  38 |         <div class="separator"></div>
  39 |         <ul class="contacts-list">
  40 |           <li class="contact-item">
  41 |             <div class="icon-box">
  42 |               <ion-icon name="mail-outline"></ion-icon>
  43 |             </div>
  44 |             <div class="contact-info">
  45 |               <p class="contact-title">Email</p>
  46 |               <a href="mailto:chanduabbireddy247@gmail.com" class="contact-link">chanduabbireddy247@gmail.com</a>
  47 |             </div>
  48 |           </li>
  49 |           <li class="contact-item">
  50 |             <div class="icon-box">
  51 |               <ion-icon name="phone-portrait-outline"></ion-icon>
  52 |             </div>
  53 |             <div class="contact-info">
  54 |               <p class="contact-title">Phone</p>
  55 |               <a href="tel:+919640186272" class="contact-link">+91 9640186272</a>
  56 |             </div>
  57 |           </li>
  58 |           <li class="contact-item">
  59 |             <div class="icon-box">
  60 |               <ion-icon name="calendar-outline"></ion-icon>
  61 |             </div>
  62 |             <div class="contact-info">
  63 |               <p class="contact-title">DOB</p>
  64 |               <time datetime="2005-03-07">jun 07, 2003</time>
  65 |             </div>
  66 |           </li>
  67 |           <li class="contact-item">
  68 |             <div class="icon-box">
  69 |               <ion-icon name="location-outline"></ion-icon>
  70 |             </div>
  71 |             <div class="contact-info">
  72 |               <p class="contact-title">Location</p>
  73 |               <address>Pithapuram , Kakinada , Andhra Pradesh</address>
  74 |             </div>
  75 |           </li>
  76 |         </ul>
  77 |         <div class="separator"></div>
  78 |         <ul class="social-list">
  79 |           <li class="social-item">
  80 |             <a href="https://www.instagram.com/ch4ndu7/" class="social-link">
  81 |               <ion-icon name="logo-instagram"></ion-icon>
  82 |             </a>
  83 |           </li>
  84 |           <li class="social-item">
  85 |             <a href="https://github.com/venkat-0706" class="social-link" target="_blank" rel="noopener noreferrer">
  86 |               <ion-icon name="logo-github"></ion-icon>
  87 |             </a>
  88 |           </li>
  89 |           <li class="social-item">
  90 |             <a href="https://www.linkedin.com/in/chandu0706/" class="social-link" target="_blank" rel="noopener noreferrer">
  91 |               <ion-icon name="logo-linkedin"></ion-icon>
  92 |             </a>
  93 |           </li>
  94 |         </ul>
  95 |       </div>
  96 |     </aside>
  97 |     <!--
  98 |       - #main-content
  99 |     -->
 100 |     <div class="main-content">
 101 |       <!--
 102 |         - #NAVBAR
 103 |       -->
 104 |       <nav class="navbar">
 105 |         <ul class="navbar-list">
 106 |           <li class="navbar-item">
 107 |             <button class="navbar-link  active" data-nav-link>About</button>
 108 |           </li>
 109 |           <li class="navbar-item">
 110 |             <button class="navbar-link" data-nav-link>Resume</button>
 111 |           </li>
 112 |           <li class="navbar-item">
 113 |             <button class="navbar-link" data-nav-link>Projects</button>
 114 |           </li>
 115 |           <li class="navbar-item">
 116 |             <button class="navbar-link" data-nav-link>Certifications</button>
 117 |           </li>
 118 |           <li class="navbar-item">
 119 |             <button class="navbar-link" data-nav-link>Blogs</button>
 120 |           </li>
 121 |           <li class="navbar-item">
 122 |             <button class="navbar-link" data-nav-link>Contact</button>
 123 |           </li>
 124 |         </ul>
 125 |       </nav>
 126 |       <!--
 127 |         - #ABOUT
 128 |         -->
 129 |     <article class="about  active" data-page="about">
 130 |         <header>
 131 |         <h2 class="h2 article-title">About me</h2>
 132 |         </header>
 133 |         <section class="about-text">
 134 |         <p>
 135 |           I am a dedicated third-year Computer Science and Engineering student with a strong passion for data science and software engineering. My technical skills encompass data analytics, machine learning, web development, and programming languages like Python and SQL. I am proficient in data visualization tools such as Tableau and have validated my skills through the HackerRank Software Engineer certification. I am eager to apply my knowledge and learn from experienced professionals by securing an internship opportunity to contribute to innovative projects.
 136 |         </p>
 137 |         </section>
 138 |         <!--
 139 |             - service
 140 |         -->
 141 |         <section class="service">
 142 |         <h3 class="h3 service-title">What I'm doing</h3>
 143 |         <ul class="service-list">
 144 |             <li class="service-item">
 145 |             <div class="service-icon-box">
 146 |                 <img src="https://res.cloudinary.com/dhmixzenl/image/upload/v1733581917/R_fjx3vp-Circle-removebg-preview_gqt9tu.png" alt="design icon" width="40">
 147 |             </div>
 148 |             <div class="service-content-box">
 149 |                 <h4 class="h4 service-item-title">Data Analysis</h4>
 150 |                 <p class="service-item-text">
 151 |                     Data Science / Analysis involves extracting insights and knowledge from data to inform business decisions.
 152 |                 </p>
 153 |                 </p>
 154 |             </div>
 155 |             </li>
 156 |             <li class="service-item">
 157 |             <div class="service-icon-box">
 158 |                 <img src="https://res.cloudinary.com/dhmixzenl/image/upload/v1734068747/OIP.VRbrA-5P0bs5qNseo-eU-AHaE2_buwskt-Circle-removebg-preview_nxfj8p.png" alt="Web development icon" width="40">
 159 |             </div> 
 160 |             <div class="service-content-box">
 161 |                 <h4 class="h4 service-item-title">Machine Learning</h4>
 162 |                 <p class="service-item-text">
 163 |                     Building robust and efficient artificial intelligence models using neural networks to solve complex problems and make accurate predictions.
 164 |                 </p>
 165 |             </div>
 166 |             </li>
 167 |             <li class="service-item">
 168 |             <div class="service-icon-box">
 169 |                 <img src="https://res.cloudinary.com/dhmixzenl/image/upload/v1733587551/Evolution-of-Coding-scaled_b7vdon-Circle-removebg-preview_dgkqgv.png" alt="mobile app icon" width="40">
 170 |             </div>
 171 |             <div class="service-content-box">
 172 |                 <h4 class="h4 service-item-title">Programming</h4>
 173 |                 <p class="service-item-text">
 174 |                   Crafting efficient and elegant code solutions across various programming languages and platforms.
 175 |                 </p>
 176 |             </div>
 177 |             </li>
 178 |             <li class="service-item">
 179 |             <div class="service-icon-box">
 180 |                 <img src="https://res.cloudinary.com/dhmixzenl/image/upload/v1733587056/OIP-removebg-preview_1_gcctuw.png" alt="camera icon" width="40">
 181 |             </div>
 182 |             <div class="service-content-box">
 183 |                 <h4 class="h4 service-item-title">Web Development</h4>
 184 |                 <p class="service-item-text">
 185 |                     Crafting efficient and elegant code solutions to build scalable, user-friendly, and visually appealing web applications.
 186 |                 </p>
 187 |             </div>
 188 |             </li>
 189 |         </ul>
 190 |         </section>
 191 |         <section>
 192 |           <header>
 193 |             <h2 class="h3 article-title">Github - Stats</h2>
 194 |           </header>
 195 |           <div class="stats-container">
 196 |             <img class="stats-image" src="https://github-readme-stats.vercel.app/api?username=venkat-0706&show_icons=true&theme=radical" alt="mystats" />
 197 |             <img class="stats-image" src="https://github-readme-stats.vercel.app/api/top-langs/?username=venkat-0706&layout=compact&theme=radical" alt="Top Langs" />
 198 |           </div>
 199 |         </section>
 200 |         <section>
 201 |           <header>
 202 |             <h2 class="h3 article-title"><br>Leetcode - Stats</h2>
 203 |           </header>
 204 |           <div class="stats-container">
 205 |             <div class="stats-wrapper">
 206 |               <img  align=top flex-grow=1 src="https://leetcard.jacoblin.cool/venkat-0706?theme=dark&font=Nunito&ext=heatmap" /> 
 207 |             </div>
 208 |           </div>
 209 |         </section>                 
 210 |     </article>
 211 |       <!--
 212 |         - #RESUME
 213 |       -->
 214 |       <article class="resume" data-page="resume">
 215 |         <header>
 216 |           <h2 class="h2 article-title">Resume</h2>
 217 |         </header>
 218 |         <section class="timeline">
 219 |           <div class="title-wrapper">
 220 |             <div class="icon-box">
 221 |               <ion-icon name="book-outline"></ion-icon>
 222 |             </div>
 223 |             <h3 class="h3">Education</h3>
 224 |           </div>
 225 |           <ol class="timeline-list">
 226 |             <li class="timeline-item">
 227 |               <h4 class="h4 timeline-item-title">Z.P.High School</h4>
 228 |               <span>2019 — 2020</span>
 229 |               <p class="timeline-text">
 230 |                 10th Standard
 231 |               </p>
 232 |             </li>
 233 |             <li class="timeline-item">
 234 |               <h4 class="h4 timeline-item-title">S.H.R.M Junior College</h4>
 235 |               <span>2020 - 2022</span>
 236 |               <p class="timeline-text">
 237 |                 Intermediate MPC
 238 |               </p>
 239 |             </li>
 240 |             <li class="timeline-item">
 241 |               <h4 class="h4 timeline-item-title">Aditya College Of Engineering and Technology</h4>
 242 |               <span>2022 — 2026</span>
 243 |               <p class="timeline-text">
 244 |                 B.Tech - CSE
 245 |               </p>
 246 |             </li>
 247 |           </ol>
 248 |         </section>
 249 |         <section class="timeline">
 250 |           <div class="title-wrapper">
 251 |             <div class="icon-box">
 252 |               <ion-icon name="book-outline"></ion-icon>
 253 |             </div>
 254 |             <h3 class="h3">Experience</h3>
 255 |           </div>
 256 |           <ol class="timeline-list">
 257 |             <li class="timeline-item"></li>
 258 |                 <h4 class="h4 timeline-item-title">Machine Learning & Data Science Trainee</h4>
 259 |                 <span>Jun,2024 - May,2025 (11 mos)</span>
 260 |                 <p class="timeline-text">
 261 |                     I'm thoroughly enjoying my Data Science learning journey at GeeksforGeeks, where I'm gaining hands-on experience with real-world problems and projects, and the platform's comprehensive resources and expert guidance are helping me build a strong foundation in the field. The interactive coding environment, quizzes, and practice problems are making my learning experience engaging and effective.
 262 |                 </p>
 263 |               </li>
 264 |             <li class="timeline-item">
 265 |               <h4 class="h4 timeline-item-title">Nueral Networks Trainee</h4>
 266 |               <span>Oct,2024 - Dec,2024 (3 mos)</span>
 267 |               <p class="timeline-text">
 268 |                 As a "Nureal Network Trainee"  at Coursera, Neural Networks are a type of machine learning model inspired by the structure and function of the human brain, composed of layers of interconnected nodes (neurons) that process and transmit information. They're used for tasks like image and speech recognition, natural language processing, and decision-making, and are a key component of Artificial Intelligence systems
 269 |               </p>
 270 |             </li>
 271 |             <li class="timeline-item">
 272 |               <h4 class="h4 timeline-item-title">AI/ML Internship</h4>
 273 |               <span>Jun,2024 - Aug,2024 (2 mos)</span>
 274 |               <p class="timeline-text">
 275 |                 An AI/ML internship is a hands-on opportunity to gain practical experience in the field of artificial intelligence and machine learning. It typically involves working on real-world projects that apply machine learning techniques to various domains and problems. As an intern, you would work closely with experienced professionals to develop and implement machine learning models, algorithms, and systems.
 276 |               </p>
 277 |             </li>
 278 |              <li class="timeline-item">
 279 |               <h4 class="h4 timeline-item-title">Become Coder</h4>
 280 |               <span>Mar,2023 - Jul,2023 (5 mos)</span>
 281 |               <p class="timeline-text">
 282 |                 During my tenure as an Become Coder trainee at the technical hub, I extensively explored core programming and web development technologies. Throughout this immersive experience, I honed my expertise in HTML, CSS, Python, and Data Structures, cultivating a robust skill set in each domain.
 283 |               </p>
 284 |             </li>
 285 |             <li class="timeline-item">
 286 |               <h4 class="h4 timeline-item-title">Ignite Coder</h4>
 287 |               <span>Oct,2022 - JFeb,2023 (5 mos)</span>
 288 |               <p class="timeline-text">
 289 |                 During my tenure as an Ignite Coder trainee at the technical hub, I extensively explored core programming and web development technologies. Throughout this immersive experience, I honed my expertise in HTML, CSS, C, Python, and Data Structures, cultivating a robust skill set in each domain.
 290 |               </p>
 291 |             </li>
 292 |           </ol>
 293 |         </section>
 294 |         <section class="skill">
 295 |           <h3 class="h3 skills-title">My Skills</h3>
 296 |           <ul class="skills-list content-card">
 297 |             <!-- Programming Languages -->
 298 |             <li class="skills-item">
 299 |               <b>Programming Languages:</b>
 300 |               <span>C / C++, Java, Python</span>
 301 |             </li>
 302 |             <!-- Core -->
 303 |             <li class="skills-item">
 304 |               <b>Core:</b>
 305 |               <span>Data Structures and Algorithms, OOP, DBMS</span>
 306 |             </li>
 307 |             <!-- Front-End Tools -->
 308 |             <li class="skills-item">
 309 |               <b>Front-End Tools:</b>
 310 |               <span>HTML5, CSS, JavaScript (Basic)</span>
 311 |             </li>
 312 |             <!-- Databases -->
 313 |             <li class="skills-item">
 314 |               <b>Databases:</b>
 315 |               <span>MySQL</span>
 316 |             </li>
 317 |             <!-- System Skills -->
 318 |             <li class="skills-item">
 319 |               <b>System Skills:</b>
 320 |               <span>Linux (Redhat)</span>
 321 |             </li>
 322 |             <!-- Developer Tools -->
 323 |             <li class="skills-item">
 324 |               <b>Developer Tools:</b>
 325 |               <span>GitHub</span>
 326 |             </li>
 327 |             <!-- Technologies -->
 328 |             <li class="skills-item">
 329 |               <b>Technologies:</b>
 330 |               <span>Web Development, Nueral Networks, Machine Learning</span>
 331 |             </li>
 332 |           </ul>
 333 |         </section>        
 334 |         <div class="container">
 335 |           <button id="downloadBtn" onclick="window.open('https://drive.google.com/file/d/1JY5HbODCY7CONqq3-o4MC7CmXF8t5ORu/view?usp=sharing')"> Download Resume</button>
 336 |         </div>
 337 |       </article>
 338 |       <!--
 339 |         - #Projects
 340 |       -->
 341 |       <article class="projects" data-page="projects">
 342 |         <header>
 343 |           <h2 class="h2 article-title">projects</h2>
 344 |         </header>
 345 |         <section class="projects">
 346 |           <ul class="filter-list">
 347 |             <li class="filter-item">
 348 |               <button class="active" data-filter-btn>All</button>
 349 |             </li>
 350 |             <li class="filter-item">
 351 |               <button data-filter-btn>Web development</button>
 352 |             </li>
 353 |             <li class="filter-item">
 354 |                 <button data-filter-btn>Data Science</button>
 355 |               </li>
 356 |             <li class="filter-item">
 357 |               <button data-filter-btn>Machine Learning</button>
 358 |             </li>
 359 |             <li class="filter-item">
 360 |               <button data-filter-btn>Tableau</button>
 361 |             </li>
 362 |             <li class="filter-item">
 363 |               <button data-filter-btn>Nueral Netwroks</button>
 364 |             </li>
 365 |             <li class="filter-item">
 366 |               <button data-filter-btn>Games</button>
 367 |             </li>
 368 |           </ul>
 369 | 
 370 |           <div class="filter-select-box">
 371 |             <button class="filter-select" data-select>
 372 |               <div class="select-value" data-selecct-value>Select category</div>
 373 |               <div class="select-icon">
 374 |                 <ion-icon name="chevron-down"></ion-icon>
 375 |               </div>
 376 |             </button>
 377 |             <ul class="select-list">
 378 |               <li class="select-item">
 379 |                 <button data-select-item>All</button>
 380 |               </li>
 381 |               <li class="select-item">
 382 |                 <button data-select-item>Web development</button>
 383 |               </li>
 384 |               <li class="select-item">
 385 |                 <button data-select-item>Machine Learning</button>
 386 |               </li>
 387 |               <li class="select-item">
 388 |                 <button data-select-item>Data Science</button>
 389 |               </li>
 390 |               <li class="filter-item">
 391 |                 <button data-filter-btn>Tableau</button>
 392 |               </li>
 393 |               <li class="filter-item">
 394 |                 <button data-filter-btn>Nueral Networks</button>
 395 |               </li>
 396 |               <li class="filter-item">
 397 |                 <button data-filter-btn>Games</button>
 398 |               </li>
 399 |             </ul>
 400 |           </div>
 401 |           <ul class="project-list">
 402 |             <li class="project-item  active" data-filter-item data-category="web development">
 403 |               <a href="https://res.cloudinary.com/dhmixzenl/image/upload/v1724212348/ven_ojc97q.jpg">
 404 |                 <figure class="project-img">
 405 |                   <div class="project-item-icon-box">
 406 |                     <ion-icon name="eye-outline"></ion-icon>
 407 |                   </div>
 408 |                   <img src="https://res.cloudinary.com/dhmixzenl/image/upload/v1724212348/ven_ojc97q.jpg" alt="Portfolio" loading="lazy">
 409 |                 </figure>
 410 |                 <h3 class="project-title">Portfolio</h3>
 411 |                 <p class="project-category">Web development</p>
 412 |                 <ul class="social-list">
 413 |                   <li class="social-item">
 414 |                     <a href="https://github.com/venkat-0706" class="social-link" target="_blank" rel="noopener noreferrer">
 415 |                       <ion-icon name="logo-github"></ion-icon>
 416 |                     </a>
 417 |                   </li>
 418 |                   <li class="social-item">
 419 |                     <a href="https://venkat-0706.github.io/Venkat-Chandu-Portfolio-/" class="social-link" target="_blank" rel="noopener noreferrer">
 420 |                       <ion-icon name="globe-outline"></ion-icon>
 421 |                     </a>
 422 |                   </li>
 423 |                 </ul>
 424 |               </a>
 425 |             </li>
 426 |             <li class="project-item active" data-filter-item data-category="web development">
 427 |               <a href="https://res.cloudinary.com/dhmixzenl/image/upload/v1733464028/OIP_yitzuc.jpg">
 428 |                 <figure class="project-img">
 429 |                   <div class="project-item-icon-box">
 430 |                     <ion-icon name="eye-outline"></ion-icon>
 431 |                   </div>
 432 |                   <img src="https://res.cloudinary.com/dhmixzenl/image/upload/v1733464028/OIP_yitzuc.jpg" alt="profile-card" loading="lazy">
 433 |                 </figure>
 434 |                 <h3 class="project-title">Profile-Card</h3>
 435 |                 <p class="project-category">Web development</p>
 436 |                 <ul class="social-list">
 437 |                   <li class="social-item">
 438 |                     <a href="https://github.com/venkat-0706/profile-card" class="social-link" target="_blank" rel="noopener noreferrer">
 439 |                       <ion-icon name="logo-github"></ion-icon>
 440 |                     </a>
 441 |                   </li>
 442 |                   <li class="social-item">
 443 |                     <a href="https://venkat-0706.github.io/Profile-Card/" class="social-link" target="_blank" rel="noopener noreferrer">
 444 |                       <ion-icon name="globe-outline"></ion-icon>
 445 |                     </a>
 446 |                   </li>
 447 |                 </ul>
 448 |               </a>
 449 |             </li>
 450 |             <li class="project-item  active" data-filter-item data-category="web development">
 451 |               <a href="https://res.cloudinary.com/dhmixzenl/image/upload/v1724234280/OIP_k2z88a.jpg">
 452 |                 <figure class="project-img">
 453 |                   <div class="project-item-icon-box">
 454 |                     <ion-icon name="eye-outline"></ion-icon>
 455 |                   </div>
 456 |                   <img src="https://res.cloudinary.com/dhmixzenl/image/upload/v1724234280/OIP_k2z88a.jpg" alt="To-Do" loading="lazy">
 457 |                 </figure>
 458 |                 <h3 class="project-title">To-Do List</h3>
 459 |                 <p class="project-category">Web development</p>
 460 |                 <ul class="social-list">
 461 |                   <li class="social-item">
 462 |                     <a href="https://github.com/venkat-0706/TO-DO-LIST" class="social-link" target="_blank" rel="noopener noreferrer">
 463 |                       <ion-icon name="logo-github"></ion-icon>
 464 |                     </a>
 465 |                   </li>
 466 |                   <li class="social-item">
 467 |                     <a href="https://incredible-heliotrope-a33067.netlify.app/" class="social-link" target="_blank" rel="noopener noreferrer">
 468 |                       <ion-icon name="globe-outline"></ion-icon>
 469 |                     </a>
 470 |                   </li>
 471 |                 </ul>
 472 |               </a>
 473 |             </li>
 474 |             <li class="project-item  active" data-filter-item data-category="web development">
 475 |               <a href="https://res.cloudinary.com/dhmixzenl/image/upload/v1733466846/Login_20_20Registration_20Form_fvfmrd.png">
 476 |                 <figure class="project-img">
 477 |                   <div class="project-item-icon-box">
 478 |                     <ion-icon name="eye-outline"></ion-icon>
 479 |                   </div>
 480 |                   <img src="https://res.cloudinary.com/dhmixzenl/image/upload/v1733466846/Login_20_20Registration_20Form_fvfmrd.png" alt="sign-up" loading="lazy">
 481 |                 </figure>
 482 |                 <h3 class="project-title">Sign-up Form</h3>
 483 |                 <p class="project-category">Web development</p>
 484 |                 <ul class="social-list">
 485 |                   <li class="social-item">
 486 |                     <a href="https://github.com/venkat-0706/Sign-up-Form" class="social-link" target="_blank" rel="noopener noreferrer">
 487 |                       <ion-icon name="logo-github"></ion-icon>
 488 |                     </a>
 489 |                   </li>
 490 |                   <li class="social-item">
 491 |                     <a href="https://venkat-0706.github.io/Sign-up-Form/" class="social-link" target="_blank" rel="noopener noreferrer">
 492 |                       <ion-icon name="globe-outline"></ion-icon>
 493 |                     </a>
 494 |                   </li>
 495 |                 </ul>
 496 |               </a>
 497 |             </li>
 498 |              <li class="project-item  active" data-filter-item data-category="web development">
 499 |               <a href="https://res.cloudinary.com/dhmixzenl/image/upload/v1737082378/FUSION-OF-FLAVOURS3_tpmcsu.jpg">
 500 |                 <figure class="project-img">
 501 |                   <div class="project-item-icon-box">
 502 |                     <ion-icon name="eye-outline"></ion-icon>
 503 |                   </div>
 504 |                   <img src="https://res.cloudinary.com/dhmixzenl/image/upload/v1737082378/FUSION-OF-FLAVOURS3_tpmcsu.jpg" alt="sign-up" loading="lazy">
 505 |                 </figure>
 506 |                 <h3 class="project-title"> FlavorFusion </h3>
 507 |                 <p class="project-category">Web development</p>
 508 |                 <ul class="social-list">
 509 |                   <li class="social-item">
 510 |                     <a href="https://github.com/venkat-0706/FlavorFusion" class="social-link" target="_blank" rel="noopener noreferrer">
 511 |                       <ion-icon name="logo-github"></ion-icon>
 512 |                     </a>
 513 |                   </li>
 514 |                   <li class="social-item">
 515 |                     <a href="https://venkat-0706.github.io/FlavorFusion/" class="social-link" target="_blank" rel="noopener noreferrer">
 516 |                       <ion-icon name="globe-outline"></ion-icon>
 517 |                     </a>
 518 |                   </li>
 519 |                 </ul>
 520 |               </a>
 521 |             </li>
 522 |             <li class="project-item  active" data-filter-item data-category="Machine Learning">
 523 |                 <a href="https://res.cloudinary.com/dhmixzenl/image/upload/v1738914982/face_emotion_u8gahj.png">
 524 |                   <figure class="project-img">
 525 |                     <div class="project-item-icon-box">
 526 |                       <ion-icon name="eye-outline"></ion-icon>
 527 |                     </div>
 528 |                     <img src="https://res.cloudinary.com/dhmixzenl/image/upload/v1738914982/face_emotion_u8gahj.png" alt="Social Media" loading="lazy">
 529 |                   </figure>
 530 |                   <h3 class="project-title">Face Expression Recognition</h3>
 531 |                   <p class="project-category">Machine Learning</p>
 532 |                   <ul class="social-list">
 533 |                     <li class="social-item">
 534 |                       <a href="https://github.com/venkat-0706/EmotionXpert-PyTorch" class="social-link" target="_blank" rel="noopener noreferrer">
 535 |                         <ion-icon name="logo-github"></ion-icon>
 536 |                       </a>
 537 |                     </li>
 538 |                   <li class="social-item">
 539 |                     <a href="https://colab.research.google.com/github/venkat-0706/FaceExpressionRecognition-Pytorch/blob/main/Facial_Expression_Recognition_with_PyTorch.ipynb" class="social-link" target="_blank" rel="noopener noreferrer">
 540 |                       <ion-icon name="globe-outline"></ion-icon>
 541 |                     </a>
 542 |                   </li>
 543 |                   </ul>
 544 |                 </a>
 545 |               </li>
 546 |             
 547 |             <li class="project-item  active" data-filter-item data-category="Data Science">
 548 |                 <a href="https://res.cloudinary.com/dhmixzenl/image/upload/v1723783469/image1-5-780x470_b9mkg7.jpg">
 549 |                   <figure class="project-img">
 550 |                     <div class="project-item-icon-box">
 551 |                       <ion-icon name="eye-outline"></ion-icon>
 552 |                     </div>
 553 |                     <img src="https://res.cloudinary.com/dhmixzenl/image/upload/v1723783469/image1-5-780x470_b9mkg7.jpg" alt="Social Media" loading="lazy">
 554 |                   </figure>
 555 |                   <h3 class="project-title">Social Media Analysis</h3>
 556 |                   <p class="project-category">Data Science</p>
 557 |                   <ul class="social-list">
 558 |                     <li class="social-item">
 559 |                       <a href="https://github.com/venkat-0706/Social-Media-Analysis" class="social-link" target="_blank" rel="noopener noreferrer">
 560 |                         <ion-icon name="logo-github"></ion-icon>
 561 |                       </a>
 562 |                     </li>
 563 |                   </ul>
 564 |                 </a>
 565 |               </li>
 566 |               <li class="project-item  active" data-filter-item data-category="Data Science">
 567 |                 <a href="https://res.cloudinary.com/dhmixzenl/image/upload/v1733464126/blackfriday001_mwx1hj.png">
 568 |                   <figure class="project-img">
 569 |                     <div class="project-item-icon-box">
 570 |                       <ion-icon name="eye-outline"></ion-icon>
 571 |                     </div>
 572 |                     <img src="https://res.cloudinary.com/dhmixzenl/image/upload/v1733464126/blackfriday001_mwx1hj.png" alt="Social Media" loading="lazy">
 573 |                   </figure>
 574 |                   <h3 class="project-title">Black Friday</h3>
 575 |                   <p class="project-category">Data Science</p>
 576 |                   <ul class="social-list">
 577 |                     <li class="social-item">
 578 |                       <a href="https://github.com/venkat-0706/Black-Friday" class="social-link" target="_blank" rel="noopener noreferrer">
 579 |                         <ion-icon name="logo-github"></ion-icon>
 580 |                       </a>
 581 |                     </li>
 582 |                   </ul>
 583 |                 </a>
 584 |               </li>
 585 |               <li class="project-item  active" data-filter-item data-category="Data Science">
 586 |                 <a href="https://res.cloudinary.com/dhmixzenl/image/upload/v1733580827/8302b3ff-d176-430b-a7c4-7aeab20f68a8_bgcfwh.jpg">
 587 |                   <figure class="project-img">
 588 |                     <div class="project-item-icon-box">
 589 |                       <ion-icon name="eye-outline"></ion-icon>
 590 |                     </div>
 591 |                     <img src="https://res.cloudinary.com/dhmixzenl/image/upload/v1733580827/8302b3ff-d176-430b-a7c4-7aeab20f68a8_bgcfwh.jpg" alt="Social Media" loading="lazy">
 592 |                   </figure>
 593 |                   <h3 class="project-title">Sugarcane Production</h3>
 594 |                   <p class="project-category">Data Science</p>
 595 |                   <ul class="social-list">
 596 |                     <li class="social-item">
 597 |                       <a href="https://github.com/venkat-0706/Social-Media-Analysis" class="social-link" target="_blank" rel="noopener noreferrer">
 598 |                         <ion-icon name="logo-github"></ion-icon>
 599 |                       </a>
 600 |                     </li>
 601 |                   </ul>
 602 |                 </a>
 603 |               </li>
 604 |             <li class="project-item  active" data-filter-item data-category="">
 605 |                 <a href="https://res.cloudinary.com/dhmixzenl/image/upload/v1733467630/sentiment_analysis_q9rrzd.jpg">
 606 |                   <figure class="project-img">
 607 |                     <div class="project-item-icon-box">
 608 |                       <ion-icon name="eye-outline"></ion-icon>
 609 |                     </div>
 610 |                     <img src="https://res.cloudinary.com/dhmixzenl/image/upload/v1733467630/sentiment_analysis_q9rrzd.jpg" alt="Netflix" loading="lazy">
 611 |                   </figure>
 612 |                   <h3 class="project-title">Sentimental Analysis</h3>
 613 |                   <p class="project-category">Machine Learning</p>
 614 |                   <ul class="social-list">
 615 |                     <li class="social-item">
 616 |                       <a href="https://github.com/venkat-0706/Sentimental-Analysis"  class="social-link" target="_blank" rel="noopener noreferrer">
 617 |                         <ion-icon name="logo-github"></ion-icon>
 618 |                       </a>
 619 |                     </li>
 620 |                   </ul>
 621 |                 </a>
 622 |               </li>
 623 |             <li class="project-item  active" data-filter-item data-category="JDBC">
 624 |               <a href="https://res.cloudinary.com/dhmixzenl/image/upload/v1733588945/OIP_mmkhfs.jpg">
 625 |                 <figure class="project-img">
 626 |                   <div class="project-item-icon-box">
 627 |                     <ion-icon name="eye-outline"></ion-icon>
 628 |                   </div>
 629 |                   <img src="https://res.cloudinary.com/dhmixzenl/image/upload/v1733588945/OIP_mmkhfs.jpg" alt="IVM" loading="lazy">
 630 |                 </figure>
 631 |                 <h3 class="project-title">Book Store System</h3>
 632 |                 <p class="project-category">JDBC</p>
 633 |                 <ul class="social-list">
 634 |                   <li class="social-item">
 635 |                     <a href="https://github.com/venkatesh1545/Java-Programming/blob/main/JDBC/Projects/BookStore.java" class="social-link" target="_blank" rel="noopener noreferrer">
 636 |                       <ion-icon name="logo-github"></ion-icon>
 637 |                     </a>
 638 |                   </li>
 639 |                 </ul>
 640 |               </a>
 641 |             </li>
 642 |             <li class="project-item  active" data-filter-item data-category="JDBC">
 643 |               <a href="https://res.cloudinary.com/dhmixzenl/image/upload/v1733588755/OIP_1_wfmqtx.jpg">
 644 |                 <figure class="project-img">
 645 |                   <div class="project-item-icon-box">
 646 |                     <ion-icon name="eye-outline"></ion-icon>
 647 |                   </div>
 648 |                   <img src="https://res.cloudinary.com/dhmixzenl/image/upload/v1733588755/OIP_1_wfmqtx.jpg" alt="IVM" loading="lazy">
 649 |                 </figure>
 650 |                 <h3 class="project-title">Inventory Management System</h3>
 651 |                 <p class="project-category">JDBC</p>
 652 |                 <ul class="social-list">
 653 |                   <li class="social-item">
 654 |                     <a href="https://github.com/venkatesh1545/Java-Programming/tree/main/JDBC/Projects/IMS" class="social-link" target="_blank" rel="noopener noreferrer">
 655 |                       <ion-icon name="logo-github"></ion-icon>
 656 |                     </a>
 657 |                   </li>
 658 |                 </ul>
 659 |               </a>
 660 |             </li>
 661 | 
 662 |             <li class="project-item  active" data-filter-item data-category="Machine Learning">
 663 |               <a href="https://res.cloudinary.com/dhmixzenl/image/upload/v1733589044/OIP_ob6qgd.jpg">
 664 |                 <figure class="project-img">
 665 |                   <div class="project-item-icon-box">
 666 |                     <ion-icon name="eye-outline"></ion-icon>
 667 |                   </div>
 668 |                   <img src="https://res.cloudinary.com/dhmixzenl/image/upload/v1733589044/OIP_ob6qgd.jpg" alt="Netflix" loading="lazy">
 669 |                 </figure>
 670 |                 <h3 class="project-title">Netflix Movie Recommendation System</h3>
 671 |                 <p class="project-category">Machine Learning</p>
 672 |                 <ul class="social-list">
 673 |                   <li class="social-item">
 674 |                     <a href="https://github.com/venkatesh1545/Machine-learning/tree/main/Netflix%20Project" class="social-link" target="_blank" rel="noopener noreferrer">
 675 |                       <ion-icon name="logo-github"></ion-icon>
 676 |                     </a>
 677 |                   </li>
 678 |                 </ul>
 679 |               </a>
 680 |             </li>
 681 | 
 682 |             <li class="project-item  active" data-filter-item data-category="Machine Learning">
 683 |               <a href="https://res.cloudinary.com/dhmixzenl/image/upload/v1733589151/2375817c-018b-4343-b29a-5a556d9148cf_qgp1xz.jpg">
 684 |                 <figure class="project-img">
 685 |                   <div class="project-item-icon-box">
 686 |                     <ion-icon name="eye-outline"></ion-icon>
 687 |                   </div>
 688 |                   <img src="https://res.cloudinary.com/dhmixzenl/image/upload/v1733589151/2375817c-018b-4343-b29a-5a556d9148cf_qgp1xz.jpg" alt="OTT" loading="lazy">
 689 |                 </figure>
 690 |                 <h3 class="project-title">OTT Recommendation System</h3>
 691 |                 <p class="project-category">Machine Learning</p>
 692 |                 <ul class="social-list">
 693 |                   <li class="social-item">
 694 |                     <a href="https://github.com/venkatesh1545/Machine-learning/blob/main/ott_recommendation_system%20(1).ipynb" class="social-link" target="_blank" rel="noopener noreferrer">
 695 |                       <ion-icon name="logo-github"></ion-icon>
 696 |                     </a>
 697 |                   </li>
 698 |                 </ul>
 699 |               </a>
 700 |             </li>
 701 |             <li class="project-item  active" data-filter-item data-category="Games">
 702 |               <a href="https://res.cloudinary.com/dhmixzenl/image/upload/v1733577988/snake-game-header_dyqehz.jpg">
 703 |                 <figure class="project-img">
 704 |                   <div class="project-item-icon-box">
 705 |                     <ion-icon name="eye-outline"></ion-icon>
 706 |                   </div>
 707 |                   <img src="https://res.cloudinary.com/dhmixzenl/image/upload/v1733577988/snake-game-header_dyqehz.jpg" alt="Social Media" loading="lazy">
 708 |                 </figure>
 709 |                 <h3 class="project-title">Snake Game </h3>
 710 |                 <p class="project-category">Games</p>
 711 |                 <ul class="social-list">
 712 |                   <li class="social-item">
 713 |                     <a href="https://github.com/venkat-0706/Snake-Game" class="social-link" target="_blank" rel="noopener noreferrer">
 714 |                       <ion-icon name="logo-github"></ion-icon>
 715 |                     </a>
 716 |                   </li>
 717 |                 </ul>
 718 |               </a>
 719 |             </li>
 720 |             <li class="project-item  active" data-filter-item data-category="Games">
 721 |               <a href="https://res.cloudinary.com/dhmixzenl/image/upload/v1733578213/hangman_facebook_gxvclq.jpg">
 722 |                 <figure class="project-img">
 723 |                   <div class="project-item-icon-box">
 724 |                     <ion-icon name="eye-outline"></ion-icon>
 725 |                   </div>
 726 |                   <img src="https://res.cloudinary.com/dhmixzenl/image/upload/v1733578213/hangman_facebook_gxvclq.jpg" alt="Social Media" loading="lazy">
 727 |                 </figure>
 728 |                 <h3 class="project-title">HangMan Game </h3>
 729 |                 <p class="project-category">Games</p>
 730 |                 <ul class="social-list">
 731 |                   <li class="social-item">
 732 |                     <a href="https://github.com/venkat-0706/Hangman-Game-Python" class="social-link" target="_blank" rel="noopener noreferrer">
 733 |                       <ion-icon name="logo-github"></ion-icon>
 734 |                     </a>
 735 |                   </li>
 736 |                 </ul>
 737 |               </a>
 738 |             </li>
 739 |             <li class="project-item  active" data-filter-item data-category="Games">
 740 |               <a href="https://res.cloudinary.com/dhmixzenl/image/upload/v1733578432/number-guessing-game_rv6ave.jpg">
 741 |                 <figure class="project-img">
 742 |                   <div class="project-item-icon-box">
 743 |                     <ion-icon name="eye-outline"></ion-icon>
 744 |                   </div>
 745 |                   <img src="https://res.cloudinary.com/dhmixzenl/image/upload/v1733578432/number-guessing-game_rv6ave.jpg" alt="Social Media" loading="lazy">
 746 |                 </figure>
 747 |                 <h3 class="project-title">Number Guessing Game </h3>
 748 |                 <p class="project-category">Games</p>
 749 |                 <ul class="social-list">
 750 |                   <li class="social-item">
 751 |                     <a href="https://github.com/venkat-0706/Number-Guessing-Game---Python" class="social-link" target="_blank" rel="noopener noreferrer">
 752 |                       <ion-icon name="logo-github"></ion-icon>
 753 |                     </a>
 754 |                   </li>
 755 |                 </ul>
 756 |               </a>
 757 |             </li>
 758 |             <li class="project-item  active" data-filter-item data-category="Games">
 759 |               <a href="https://res.cloudinary.com/dhmixzenl/image/upload/v1733578291/OIP_edunjn.jpg">
 760 |                 <figure class="project-img">
 761 |                   <div class="project-item-icon-box">
 762 |                     <ion-icon name="eye-outline"></ion-icon>
 763 |                   </div>
 764 |                   <img src="https://res.cloudinary.com/dhmixzenl/image/upload/v1733578291/OIP_edunjn.jpg" alt="Social Media" loading="lazy">
 765 |                 </figure>
 766 |                 <h3 class="project-title">Tic Tac Toe Game </h3>
 767 |                 <p class="project-category">Games</p>
 768 |                 <ul class="social-list">
 769 |                   <li class="social-item">
 770 |                     <a href="https://github.com/venkat-0706/Tic-Tac-Toe-Game" class="social-link" target="_blank" rel="noopener noreferrer">
 771 |                       <ion-icon name="logo-github"></ion-icon>
 772 |                     </a>
 773 |                   </li>
 774 |                 </ul>
 775 |               </a>
 776 |             </li>
 777 |             <li class="project-item  active" data-filter-item data-category="Games">
 778 |               <a href="https://res.cloudinary.com/dhmixzenl/image/upload/v1733579079/OIP_eba6sf.jpg">
 779 |                 <figure class="project-img">
 780 |                   <div class="project-item-icon-box">
 781 |                     <ion-icon name="eye-outline"></ion-icon>
 782 |                   </div>
 783 |                   <img src="https://res.cloudinary.com/dhmixzenl/image/upload/v1733579079/OIP_eba6sf.jpg" alt="Social Media" loading="lazy">
 784 |                 </figure>
 785 |                 <h3 class="project-title">Rock Paper Scissor Game </h3>
 786 |                 <p class="project-category">Games</p>
 787 |                 <ul class="social-list">
 788 |                   <li class="social-item">
 789 |                     <a href="https://github.com/venkat-0706/Rock-Paper-Scissor-game" class="social-link" target="_blank" rel="noopener noreferrer">
 790 |                       <ion-icon name="logo-github"></ion-icon>
 791 |                     </a>
 792 |                   </li>
 793 |                 </ul>
 794 |               </a>
 795 |             </li>
 796 | 
 797 |           </ul>
 798 |         </section>
 799 |       </article>
 800 |       <!--
 801 |         Certifications
 802 |       -->
 803 |       <article class="Certifications" data-page="certifications">
 804 |         <header>
 805 |           <h2 class="h2 article-title">Certifications</h2>
 806 |         </header>
 807 |         <section class="Certifications">
 808 |           <ul class="filter-list1">
 809 |               <li class="filter-item1">
 810 |                 <button class="active" data-filter-btn1="all">All</button>
 811 |               </li>
 812 |               <li class="filter-item1">
 813 |                 <button data-filter-btn1="certificates">Certificates</button>
 814 |               </li>
 815 |               <li class="filter-item1">
 816 |                 <button data-filter-btn1="internships">Internships</button>
 817 |               </li>
 818 |               <li class="filter-item1">
 819 |                 <button data-filter-btn1="badges">Badges</button>
 820 |               </li>
 821 |             </ul>
 822 |         
 823 |             <div class="filter-select-box1">
 824 |               <button class="filter-select1" data-select1>
 825 |                 <div class="select-value1" data-select-value1>Select category</div>
 826 |                 <div class="select-icon1">
 827 |                   <ion-icon name="chevron-down"></ion-icon>
 828 |                 </div>
 829 |               </button>
 830 |               <ul class="select-list1">
 831 |                 <li class="select-item1">
 832 |                   <button data-select-item1="all">All</button>
 833 |                 </li>
 834 |                 <li class="select-item1">
 835 |                   <button data-select-item1="certificates">Certificates</button>
 836 |                 </li>
 837 |                 <li class="select-item1">
 838 |                   <button data-select-item1="internships">Internships</button>
 839 |                 </li>
 840 |                 <li class="select-item1">
 841 |                   <button data-select-item1="badges">Badges</button>
 842 |                 </li>
 843 |               </ul>
 844 |             </div>
 845 | 
 846 |           <ul class="project-list">
 847 |             <li class="project-item  active" data-filter-item data-category="Certificates">
 848 |               <a href="https://res.cloudinary.com/dhmixzenl/image/upload/v1733554230/mfvek43v4qcnfthnlmyo.jpg" target="_blank">
 849 |                 <figure class="project-img">
 850 |                   <div class="project-item-icon-box">
 851 |                     <ion-icon name="eye-outline"></ion-icon>
 852 |                   </div>
 853 |                   <img src="https://res.cloudinary.com/dhmixzenl/image/upload/v1733554230/mfvek43v4qcnfthnlmyo.jpg" alt="HTML,CSS" loading="lazy">
 854 |                 </figure>
 855 |                 <h3 class="project-title">HTML and CSS Certification - IT Specialist Certiport</h3>
 856 |                 <p class="project-category">
 857 |                   I am proud to have earned the HTML and CSS Certification from IT Specialist Certiport, a globally recognized certification provider. This certification validates my proficiency in HTML and CSS, demonstrating my ability to build and style modern web pages effectively.
 858 |                 </p>
 859 |               </a>
 860 |             </li>
 861 |             <li class="project-item  active" data-filter-item data-category="Certificates">
 862 |               <a href="https://res.cloudinary.com/dhmixzenl/image/upload/v1733478555/cnnn_yyvdqa.jpg" target="_blank">
 863 |                 <figure class="project-img">
 864 |                   <div class="project-item-icon-box">
 865 |                     <ion-icon name="eye-outline"></ion-icon>
 866 |                   </div>
 867 |                   <img src="https://res.cloudinary.com/dhmixzenl/image/upload/v1733478555/cnnn_yyvdqa.jpg" alt="Python" loading="lazy">
 868 |                 </figure>
 869 |                 <h3 class="project-title">Python Certificate from IT Specialist in 2023</h3>
 870 |                 <p class="project-category">
 871 |                   I earned the Python Programming Certificate from IT Specialist, demonstrating my proficiency in Python, one of the most versatile and widely-used programming languages in the industry.
 872 |                 </p>
 873 |               </a>
 874 |             </li>
 875 |             <li class="project-item  active" data-filter-item data-category="Certificates">
 876 |               <a href="https://res.cloudinary.com/dhmixzenl/image/upload/v1733525266/open_hyz9lo.jpg" target="_blank">
 877 |                 <figure class="project-img">
 878 |                   <div class="project-item-icon-box">
 879 |                     <ion-icon name="eye-outline"></ion-icon>
 880 |                   </div>
 881 |                   <img src="https://res.cloudinary.com/dhmixzenl/image/upload/v1733525266/open_hyz9lo.jpg" alt="Pyhon" loading="lazy">
 882 |                 </figure>
 883 |                 <h3 class="project-title">Programming Essentials in Python - OpenEDG Python Institute</h3>
 884 |                 <p class="project-category">
 885 |                   I earned the "Programming Essentials in Python" certification from the OpenEDG Python Institute, which provided a comprehensive foundation in Python programming.
 886 |                 </p>
 887 |               </a>
 888 |             </li>
 889 |             <li class="project-item  active" data-filter-item data-category="Certificates">
 890 |               <a href="https://res.cloudinary.com/dhmixzenl/image/upload/v1733480199/ds_mxmii7.jpg" target="_blank">
 891 |                 <figure class="project-img">
 892 |                   <div class="project-item-icon-box">
 893 |                     <ion-icon name="eye-outline"></ion-icon>
 894 |                   </div>
 895 |                   <img src="https://res.cloudinary.com/dhmixzenl/image/upload/v1733480199/ds_mxmii7.jpg" alt="Pyhon" loading="lazy">
 896 |                 </figure>
 897 |                 <h3 class="project-title">SQL(Advanced) - Hackerrank</h3>
 898 |                 <p class="project-category">
 899 |                   Demonstrated proficiency in advanced SQL concepts, including complex queries, data modeling, window functions, and optimization techniques. Gained hands-on experience in writing efficient and optimized SQL queries to solve real-world data challenges. Developed a strong foundation in SQL and its applications in data analysis and manipulation.
 900 |                 </p>
 901 |               </a>
 902 |             </li>
 903 |             <li class="project-item  active" data-filter-item data-category="Certificates">
 904 |               <a href="https://res.cloudinary.com/dhmixzenl/image/upload/v1733479117/c_pcyz74.jpg" target="_blank">
 905 |                 <figure class="project-img">
 906 |                   <div class="project-item-icon-box">
 907 |                     <ion-icon name="eye-outline"></ion-icon>
 908 |                   </div>
 909 |                   <img src="https://res.cloudinary.com/dhmixzenl/image/upload/v1733479117/c_pcyz74.jpg" alt="Programming-C" loading="lazy">
 910 |                 </figure>
 911 |                 <h3 class="project-title">Programming Essentials in C Certificate</h3>
 912 |                 <p class="project-category">
 913 |                   I am proud to have earned the "Programming Essentials in C" certificate from Cisco, a globally recognized leader in networking solutions. This certification validates my proficiency in the fundamental concepts of the C programming language, a cornerstone of modern software development.
 914 |                 </p>
 915 |               </a>
 916 |             </li>
 917 |             <li class="project-item  active" data-filter-item data-category="Certificates">
 918 |               <a href="https://res.cloudinary.com/dhmixzenl/image/upload/v1733480133/cham_ujivtc.jpg" target="_blank">
 919 |                 <figure class="project-img">
 920 |                   <div class="project-item-icon-box">
 921 |                     <ion-icon name="eye-outline"></ion-icon>
 922 |                   </div>
 923 |                   <img src="https://res.cloudinary.com/dhmixzenl/image/upload/v1733480133/cham_ujivtc.jpg" alt="problem-solving" loading="lazy">
 924 |                 </figure>
 925 |                 <h3 class="project-title"> Problem solving Intermediate</h3>
 926 |                 <p class="project-category">
 927 |                   Demonstrated proficiency in intermediate problem-solving skills, including data structures (hash maps, stacks, queues, heaps) and algorithms (optimal solutions, time/space complexity analysis). Gained hands-on experience in implementing solutions and analyzing their efficiency. Developed a strong foundation in problem-solving techniques and algorithmic thinking.
 928 |                 </p>
 929 |               </a>
 930 |             </li>
 931 |             <li class="project-item  active" data-filter-item data-category="Certificates">
 932 |               <a href="https://res.cloudinary.com/dhmixzenl/image/upload/v1733522677/web_msvfwh.jpg" target="_blank">
 933 |                 <figure class="project-img">
 934 |                   <div class="project-item-icon-box">
 935 |                     <ion-icon name="eye-outline"></ion-icon>
 936 |                   </div>
 937 |                   <img src="https://res.cloudinary.com/dhmixzenl/image/upload/v1733522677/web_msvfwh.jpg" alt="problem-solving" loading="lazy">
 938 |                 </figure>
 939 |                 <h3 class="project-title"> Web Development</h3>
 940 |                 <p class="project-category">
 941 |                   Demonstrated proficiency in intermediate problem-solving skills, including data structures (hash maps, stacks, queues, heaps) and algorithms (optimal solutions, time/space complexity analysis). Gained hands-on experience in implementing solutions and analyzing their efficiency. Developed a strong foundation in problem-solving techniques and algorithmic thinking.
 942 |                 </p>
 943 |               </a>
 944 |             </li>
 945 |             <li class="project-item  active" data-filter-item data-category="certificates">
 946 |               <a href="https://res.cloudinary.com/dhmixzenl/image/upload/v1733526102/info_quku6n.jpg" target="_blank">
 947 |                 <figure class="project-img">
 948 |                   <div class="project-item-icon-box">
 949 |                     <ion-icon name="eye-outline"></ion-icon>
 950 |                   </div>
 951 |                   <img src="https://res.cloudinary.com/dhmixzenl/image/upload/v1733526102/info_quku6n.jpg" alt="certificate" loading="lazy">
 952 |                 </figure>
 953 |                 <h3 class="project-title">software Engineer - Infosys Springboard</h3>
 954 |                 <p class="project-category">
 955 |                   I am proud to have earned a certificate in software Engineering from Infosys Springboard , this certification validates my proficiency in fundamental software engineering skills, including data structures, algorithms, and SQL.
 956 |   It demonstrates my ability to solve complex coding problems efficiently and write clean, well-structured code. This certification is a testament to my commitment to continuous learning and technical excellence.
 957 |                 </p>
 958 |               </a>
 959 |             </li>
 960 |             <li class="project-item  active" data-filter-item data-category="Certificates">
 961 |               <a href="https://res.cloudinary.com/dhmixzenl/image/upload/v1733480207/se_q7ypdz.jpg" target="_blank">
 962 |                 <figure class="project-img">
 963 |                   <div class="project-item-icon-box">
 964 |                     <ion-icon name="eye-outline"></ion-icon>
 965 |                   </div>
 966 |                   <img src="https://res.cloudinary.com/dhmixzenl/image/upload/v1733480207/se_q7ypdz.jpg" alt="Oracle" loading="lazy">
 967 |                 </figure>
 968 |                 <h3 class="project-title"> Java Programming Certificate</h3>
 969 |                 <p class="project-category">
 970 |                   I am proud to have earned a certificate in Java Programming from Hackerrank, a globally recognized leader in software development education. This certification reflects my comprehensive understanding and proficiency in Java, one of the most widely used programming languages in the industry.
 971 |                 </p>
 972 |               </a>
 973 |             </li>
 974 |             <li class="project-item  active" data-filter-item data-category="certificates">
 975 |               <a href="https://res.cloudinary.com/dhmixzenl/image/upload/v1733522354/cm_vdqery.jpg" target="_blank">
 976 |                 <figure class="project-img">
 977 |                   <div class="project-item-icon-box">
 978 |                     <ion-icon name="eye-outline"></ion-icon>
 979 |                   </div>
 980 |                   <img src="https://res.cloudinary.com/dhmixzenl/image/upload/v1733522354/cm_vdqery.jpg" alt="Red Hat" loading="lazy">
 981 |                 </figure>
 982 |                 <h3 class="project-title">Meta Database Engineer</h3>
 983 |                 <p class="project-category">Meta Database Engineer Professional Certificate from Coursera. This certification validates my skills in database management, SQL, Python, and database design. I've gained expertise in creating, managing, and optimizing databases, as well as building database-driven applications.</p>
 984 |               </a>
 985 |             </li>
 986 |             <li class="project-item  active" data-filter-item data-category="certificates">
 987 |               <a href="https://res.cloudinary.com/dhmixzenl/image/upload/v1733480206/java_xvskyu.jpg" target="_blank">
 988 |                 <figure class="project-img">
 989 |                   <div class="project-item-icon-box">
 990 |                     <ion-icon name="eye-outline"></ion-icon>
 991 |                   </div>
 992 |                   <img src="https://res.cloudinary.com/dhmixzenl/image/upload/v1733480206/java_xvskyu.jpg" alt="certificate" loading="lazy">
 993 |                 </figure>
 994 |                 <h3 class="project-title">software Engineer</h3>
 995 |                 <p class="project-category">
 996 |                   This certification validates my proficiency in fundamental software engineering skills, including data structures, algorithms, and SQL.
 997 |   It demonstrates my ability to solve complex coding problems efficiently and write clean, well-structured code. This certification is a testament to my commitment to continuous learning and technical excellence.
 998 |                 </p>
 999 |               </a>
1000 |             </li>
1001 |             <li class="project-item  active" data-filter-item data-category="Internships">
1002 |               <a href="https://res.cloudinary.com/dhmixzenl/image/upload/v1733523739/prodigy_qexqph.jpg" target="_blank">
1003 |                 <figure class="project-img">
1004 |                   <div class="project-item-icon-box">
1005 |                     <ion-icon name="eye-outline"></ion-icon>
1006 |                   </div>
1007 |                   <img src="https://res.cloudinary.com/dhmixzenl/image/upload/v1733523739/prodigy_qexqph.jpg" alt="Internship" loading="lazy">
1008 |                 </figure>
1009 |                 <h3 class="project-title">Internship Completion in Data Science - Prodigy InfoTech</h3>
1010 |                 <p class="project-category">
1011 |                   I am proud to have successfully completed an intensive Data Science internship with Prodigy InfoTech, a leading platform for professional education. During this internship, I gained hands-on experience and advanced knowledge in various aspects of Data Science.
1012 |                 </p>
1013 |               </a>
1014 |             </li>
1015 |             <li class="project-item  active" data-filter-item data-category="Internships">
1016 |               <a href="https://res.cloudinary.com/dhmixzenl/image/upload/v1733524261/ap_my7ang.jpg" target="_blank">
1017 |                 <figure class="project-img">
1018 |                   <div class="project-item-icon-box">
1019 |                     <ion-icon name="eye-outline"></ion-icon>
1020 |                   </div>
1021 |                   <img src="https://res.cloudinary.com/dhmixzenl/image/upload/v1733524261/ap_my7ang.jpg" alt="THub" loading="lazy">
1022 |                 </figure>
1023 |                 <h3 class="project-title">Artificial Intelligence And Machine Learning - APSSDC </h3>
1024 |                 <p class="project-category">
1025 |                   During my APSSDC internship, I applied AI and ML techniques, including supervised and unsupervised learning, as well as deep learning with TensorFlow and PyTorch. I collaborated on real-world projects, gaining practical experience in image recognition and NLP.
1026 |                 </p>
1027 |               </a>
1028 |             </li>
1029 |             <li class="project-item  active" data-filter-item data-category="Badges">
1030 |               <a href="https://res.cloudinary.com/dhmixzenl/image/upload/v1733528119/2023-50_sbkkbc.gif" target="_blank">
1031 |                 <figure class="project-img">
1032 |                   <div class="project-item-icon-box">
1033 |                     <ion-icon name="eye-outline"></ion-icon>
1034 |                   </div>
1035 |                   <img src="https://res.cloudinary.com/dhmixzenl/image/upload/v1733528119/2023-50_sbkkbc.gif" alt="IT Specialist" loading="lazy">
1036 |                 </figure>
1037 |                 <h3 class="project-title">50 Days Active Badge(2023)</h3>
1038 |                 <p class="project-category">Leetcode</p>
1039 |               </a>
1040 |             </li>
1041 |             <li class="project-item  active" data-filter-item data-category="Badges">
1042 |               <a href="https://res.cloudinary.com/dhmixzenl/image/upload/v1733528891/Top_SQL_50_jb3jnw.gif" target="_blank">
1043 |                 <figure class="project-img">
1044 |                   <div class="project-item-icon-box">
1045 |                     <ion-icon name="eye-outline"></ion-icon>
1046 |                   </div>
1047 |                   <img src="https://res.cloudinary.com/dhmixzenl/image/upload/v1733528891/Top_SQL_50_jb3jnw.gif" alt="IT Specialist" loading="lazy">
1048 |                 </figure>
1049 |                 <h3 class="project-title">Top SQL 50 (2024) </S></h3>
1050 |                 <p class="project-category">Leetcode</p>
1051 |               </a>
1052 |             </li>
1053 |             <li class="project-item  active" data-filter-item data-category="Badges">
1054 |               <a href="https://res.cloudinary.com/dhmixzenl/image/upload/v1733528859/Introduction_to_Pandas_onjrsw.gif" target="_blank">
1055 |                 <figure class="project-img">
1056 |                   <div class="project-item-icon-box">
1057 |                     <ion-icon name="eye-outline"></ion-icon>
1058 |                   </div>
1059 |                   <img src="https://res.cloudinary.com/dhmixzenl/image/upload/v1733528859/Introduction_to_Pandas_onjrsw.gif" alt="IT Specialist" loading="lazy">
1060 |                 </figure>
1061 |                 <h3 class="project-title">Introduction to Pandas (2024)</h3>
1062 |                 <p class="project-category">Leetcode</p>
1063 |               </a>
1064 |             </li>
1065 |             <li class="project-item  active" data-filter-item data-category="Badges">
1066 |               <a href="https://res.cloudinary.com/dhmixzenl/image/upload/v1733527989/2024-50_nji8ur.gif" target="_blank">
1067 |                 <figure class="project-img">
1068 |                   <div class="project-item-icon-box">
1069 |                     <ion-icon name="eye-outline"></ion-icon>
1070 |                   </div>
1071 |                   <img src="https://res.cloudinary.com/dhmixzenl/image/upload/v1733527989/2024-50_nji8ur.gif" alt="IT Specialist" loading="lazy">
1072 |                 </figure>
1073 |                 <h3 class="project-title">50 Days Active Badge(2024)</h3>
1074 |                 <p class="project-category">Leetcode</p>
1075 |               </a>
1076 |             </li>
1077 |             <li class="project-item  active" data-filter-item data-category="Badges">
1078 |               <a href="https://res.cloudinary.com/dhmixzenl/image/upload/v1733527440/2024-100-new_p2w1ej.gif" target="_blank">
1079 |                 <figure class="project-img">
1080 |                   <div class="project-item-icon-box">
1081 |                     <ion-icon name="eye-outline"></ion-icon>
1082 |                   </div>
1083 |                   <img src="https://res.cloudinary.com/dhmixzenl/image/upload/v1733527440/2024-100-new_p2w1ej.gif" alt="IT Specialist" loading="lazy">
1084 |                 </figure>
1085 |                 <h3 class="project-title">100 Days Active Badge(2024)</h3>
1086 |                 <p class="project-category">Leetcode</p>
1087 |               </a>
1088 |             </li>
1089 |             <li class="project-item  active" data-filter-item data-category="Badges">
1090 |               <a href="https://res.cloudinary.com/dhmixzenl/image/upload/v1733528337/2024-04_lf48zb.gif" target="_blank">
1091 |                 <figure class="project-img">
1092 |                   <div class="project-item-icon-box">
1093 |                     <ion-icon name="eye-outline"></ion-icon>
1094 |                   </div>
1095 |                   <img src="https://res.cloudinary.com/dhmixzenl/image/upload/v1733528337/2024-04_lf48zb.gif" alt="IT Specialist" loading="lazy">
1096 |                 </figure>
1097 |                 <h3 class="project-title">April LeetCode Challenge Badge (2024)</h3>
1098 |                 <p class="project-category">Leetcode</p>
1099 |               </a>
1100 |             </li>
1101 |             <li class="project-item  active" data-filter-item data-category="Badges">
1102 |               <a href="https://res.cloudinary.com/dhmixzenl/image/upload/v1733528698/2024-05_aaqkg5.gif" target="_blank">
1103 |                 <figure class="project-img">
1104 |                   <div class="project-item-icon-box">
1105 |                     <ion-icon name="eye-outline"></ion-icon>
1106 |                   </div>
1107 |                   <img src="https://res.cloudinary.com/dhmixzenl/image/upload/v1733528698/2024-05_aaqkg5.gif" alt="IT Specialist" loading="lazy">
1108 |                 </figure>
1109 |                 <h3 class="project-title">May LeetCode Challenge Badge (2024)</h3>
1110 |                 <p class="project-category">Leetcode</p>
1111 |               </a>
1112 |             </li>
1113 |             <li class="project-item  active" data-filter-item data-category="Badges">
1114 |               <a href="https://res.cloudinary.com/dhmixzenl/image/upload/v1733528730/2024-06_tphodz.gif" target="_blank">
1115 |                 <figure class="project-img">
1116 |                   <div class="project-item-icon-box">
1117 |                     <ion-icon name="eye-outline"></ion-icon>
1118 |                   </div>
1119 |                   <img src="https://res.cloudinary.com/dhmixzenl/image/upload/v1733528730/2024-06_tphodz.gif" alt="IT Specialist" loading="lazy">
1120 |                 </figure>
1121 |                 <h3 class="project-title">June LeetCode Challenge Badge (2024)</h3>
1122 |                 <p class="project-category">Leetcode</p>
1123 |               </a>
1124 |             </li>
1125 |             <li class="project-item  active" data-filter-item data-category="Badges">
1126 |               <a href="https://res.cloudinary.com/dhmixzenl/image/upload/v1733528761/2024-07_n12ekk.gif" target="_blank">
1127 |                 <figure class="project-img">
1128 |                   <div class="project-item-icon-box">
1129 |                     <ion-icon name="eye-outline"></ion-icon>
1130 |                   </div>
1131 |                   <img src="https://res.cloudinary.com/dhmixzenl/image/upload/v1733528761/2024-07_n12ekk.gif" alt="IT Specialist" loading="lazy">
1132 |                 </figure>
1133 |                 <h3 class="project-title">July LeetCode Challenge Badge (2024)</h3>
1134 |                 <p class="project-category">Leetcode</p>
1135 |               </a>
1136 |             </li>
1137 | 
1138 |             <li class="project-item  active" data-filter-item data-category="Badges">
1139 |               <a href="https://res.cloudinary.com/dhmixzenl/image/upload/v1733526959/leet-200_eh04iy.gif" target="_blank">
1140 |                 <figure class="project-img">
1141 |                   <div class="project-item-icon-box">
1142 |                     <ion-icon name="eye-outline"></ion-icon>
1143 |                   </div>
1144 |                   <img src="https://res.cloudinary.com/dhmixzenl/image/upload/v1733526959/leet-200_eh04iy.gif" alt="IT Specialist" loading="lazy">
1145 |                 </figure>
1146 |                 <h3 class="project-title">200 Days Active Badge(2024)</h3>
1147 |                 <p class="project-category">Leetcode</p>
1148 |               </a>
1149 |             </li>
1150 |             <li class="project-item  active" data-filter-item data-category="Badges">
1151 |               <a href="https://res.cloudinary.com/dhmixzenl/image/upload/v1733528789/2024-11_wjoojc.gif" target="_blank">
1152 |                 <figure class="project-img">
1153 |                   <div class="project-item-icon-box">
1154 |                     <ion-icon name="eye-outline"></ion-icon>
1155 |                   </div>
1156 |                   <img src="https://res.cloudinary.com/dhmixzenl/image/upload/v1733528789/2024-11_wjoojc.gif" alt="IT Specialist" loading="lazy">
1157 |                 </figure>
1158 |                 <h3 class="project-title">November LeetCode Challenge Badge (2024)</h3>
1159 |                 <p class="project-category">Leetcode</p>
1160 |               </a>
1161 |             </li>
1162 |              <li class="project-item  active" data-filter-item data-category="Badges">
1163 |               <a href="https://res.cloudinary.com/dhmixzenl/image/upload/v1735655323/2024-12_c2h149.gif" target="_blank">
1164 |                 <figure class="project-img">
1165 |                   <div class="project-item-icon-box">
1166 |                     <ion-icon name="eye-outline"></ion-icon>
1167 |                   </div>
1168 |                   <img src="https://res.cloudinary.com/dhmixzenl/image/upload/v1735655323/2024-12_c2h149.gif" alt="IT Specialist" loading="lazy">
1169 |                 </figure>
1170 |                 <h3 class="project-title">December LeetCode Challenge Badge (2024)</h3>
1171 |                 <p class="project-category">Leetcode</p>
1172 |               </a>
1173 |             </li>
1174 |           <li class="project-item  active" data-filter-item data-category="Badges">
1175 |               <a href="https://res.cloudinary.com/dhmixzenl/image/upload/v1737678400/365_new_mnjrg4.gif" target="_blank">
1176 |                 <figure class="project-img">
1177 |                   <div class="project-item-icon-box">
1178 |                     <ion-icon name="eye-outline"></ion-icon>
1179 |                   </div>
1180 |                   <img src="https://res.cloudinary.com/dhmixzenl/image/upload/v1737678400/365_new_mnjrg4.gif" alt="IT Specialist" loading="lazy">
1181 |                 </figure>
1182 |                 <h3 class="project-title">365 Days Active Badge (2025) </h3>
1183 |                 <p class="project-category">Leetcode</p>
1184 |               </a>
1185 |             </li>
1186 |           <li class="project-item  active" data-filter-item data-category="Badges">
1187 |               <a href="https://res.cloudinary.com/dhmixzenl/image/upload/v1738286140/202501_fxyvro.gif" target="_blank">
1188 |                 <figure class="project-img">
1189 |                   <div class="project-item-icon-box">
1190 |                     <ion-icon name="eye-outline"></ion-icon>
1191 |                   </div>
1192 |                   <img src="https://res.cloudinary.com/dhmixzenl/image/upload/v1738286140/202501_fxyvro.gif" alt="IT Specialist" loading="lazy">
1193 |                 </figure>
1194 |                 <h3 class="project-title">December LeetCode Challenge Badge (2024)</h3>
1195 |                 <p class="project-category">Leetcode</p>
1196 |               </a>
1197 |             </li>
1198 |           </ul>
1199 |         </section>
1200 |       </article>
1201 |    
1202 | 
1203 |             
1204 | 
1205 |       <!--
1206 |         - #CONTACT
1207 |       -->
1208 |       <article class="contact" data-page="contact">
1209 | 
1210 |         <header>
1211 |           <h2 class="h2 article-title">Contact</h2>
1212 |         </header>
1213 | 
1214 |         <section class="mapbox" data-mapbox>
1215 |           <figure>
1216 |             <iframe
1217 |               src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d199666.5651251294!2d-121.58334177520186!3d38.56165006739519!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x809ac672b28397f9%3A0x921f6aaa74197fdb!2sSacramento%2C%20CA%2C%20USA!5e0!3m2!1sen!2sbd!4v1647608789441!5m2!1sen!2sbd"
1218 |               width="400" height="300" loading="lazy"></iframe>
1219 |           </figure>
1220 |         </section>
1221 | 
1222 |         <section class="contact-form">
1223 | 
1224 |           <h3 class="h3 form-title">Contact Form</h3>
1225 | 
1226 |           <form action="#" class="form" data-form>
1227 | 
1228 |             <div class="input-wrapper">
1229 |               <input type="text" name="fullname" class="form-input" placeholder="Full name" required data-form-input>
1230 | 
1231 |               <input type="email" name="email" class="form-input" placeholder="Email address" required data-form-input>
1232 |             </div>
1233 | 
1234 |             <textarea name="message" class="form-input" placeholder="Your Message" required data-form-input></textarea>
1235 | 
1236 |             <button class="form-btn" type="submit" disabled data-form-btn>
1237 |               <ion-icon name="paper-plane"></ion-icon>
1238 |               <span>Send Message</span>
1239 |             </button>
1240 | 
1241 |           </form>
1242 | 
1243 |         </section>
1244 | 
1245 |       </article>
1246 |     </div>
1247 |   </main>
1248 |   <!--
1249 |     - custom js link
1250 |   -->
1251 |   <script src="port.js"></script>
1252 |   <!--
1253 |     - ionicon link
1254 |   -->
1255 |   <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
1256 |   <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
1257 | </body>
1258 | </html>
1259 | 


--------------------------------------------------------------------------------