├── CNAME ├── README.md ├── script.js ├── index.html └── styles.css /CNAME: -------------------------------------------------------------------------------- 1 | ashutoshsingh.me -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Ashutosh Singh - Software Engineer Portfolio 2 | 3 | A modern, secure and high-performance portfolio website showcasing professional experience, education, projects, and GitHub contributions. 4 | 5 | ## Features 6 | 7 | ### Content Features 8 | - Responsive design that works on desktop, tablet, and mobile devices 9 | - Professional education section with institution logos 10 | - GitHub statistics with real-time data 11 | - Dynamic news ticker for latest achievements 12 | - Internship & experience showcase 13 | - Education timeline with institutional branding 14 | - Project portfolio with interactive previews 15 | - Tech stack and skills visualization 16 | - Coding profiles integration (GitHub, LeetCode, CodeForces) 17 | 18 | ### Technical Features 19 | - **Security & Privacy** 20 | - Strong Content Security Policy (CSP) 21 | - Protection against XSS attacks and clickjacking 22 | - Subresource Integrity (SRI) for external resources 23 | - Advanced sanitization of dynamic content 24 | - Secure external links (rel="noopener noreferrer") 25 | - Permissions Policy limiting access to sensitive browser features 26 | 27 | - **Performance Optimizations** 28 | - Smart caching strategy with automatic version management 29 | - Critical CSS inlining for faster initial rendering 30 | - Resource preloading for key assets 31 | - Progressive image loading with fallbacks 32 | - Service Worker for offline capability 33 | - Lazy loading of non-critical resources 34 | 35 | - **User Experience** 36 | - Enhanced mobile menu animations 37 | - Improved scrolling behavior 38 | - Streamlined navigation 39 | - Smart error handling with graceful fallbacks 40 | - Animation performance optimizations 41 | 42 | - **Developer Experience** 43 | - Modular JavaScript architecture 44 | - Centralized version management 45 | - Automated cache invalidation 46 | - Clean, semantic HTML structure 47 | 48 | ## Technologies Used 49 | 50 | - **Core Technologies** 51 | - HTML5 with semantic markup 52 | - CSS3 with modern features (Grid, Flexbox, Variables) 53 | - Vanilla JavaScript with ES6+ features 54 | 55 | - **Performance & Security** 56 | - Service Workers for offline capabilities 57 | - Intersection Observer API for efficient animations 58 | - Content Security Policy (CSP) 59 | - LocalStorage/SessionStorage for state management 60 | - Cache API for resource management 61 | 62 | - **External Integrations** 63 | - GitHub REST API for profile data 64 | - Font Awesome for iconography 65 | - Custom GitHub stats widgets 66 | 67 | ## Project Structure 68 | 69 | ``` 70 | portfolio-site/ 71 | │ 72 | ├── index.html # Main HTML file with structured content and security headers 73 | ├── styles.css # CSS styles with optimized loading 74 | ├── script.js # Modern JavaScript with modular architecture 75 | ├── sw.js # Service Worker with advanced caching strategies 76 | └── README.md # Comprehensive project documentation 77 | ``` 78 | 79 | ## Security Features 80 | 81 | ### Content Security Policy (CSP) 82 | A strict CSP that allows content only from trusted sources: 83 | - Scripts only from same origin and cdnjs.cloudflare.com 84 | - Styles from same origin and cdnjs.cloudflare.com 85 | - Images from specific trusted domains 86 | - No inline scripts allowed (except those with nonces) 87 | - No dangerous eval() or Function constructors 88 | 89 | ### Protection Headers 90 | - **X-Frame-Options**: Prevents clickjacking attacks 91 | - **X-Content-Type-Options**: Prevents MIME type sniffing 92 | - **Referrer-Policy**: Limits information leakage 93 | - **Permissions-Policy**: Restricts access to sensitive browser features 94 | - **Strict-Transport-Security**: Enforces HTTPS connections 95 | 96 | ### Link Protection 97 | - All external links use rel="noopener noreferrer" 98 | - Protection against tabnabbing attacks 99 | 100 | ### Content Sanitization 101 | - HTML content is sanitized before rendering 102 | - Allowlist-based approach for HTML tags and attributes 103 | - Safe DOM manipulation helpers prevent XSS vulnerabilities 104 | 105 | ## Performance Optimizations 106 | 107 | ### Resource Loading 108 | - CSS preloading for critical resources 109 | - Efficient font loading strategy 110 | - Optimized image loading with width/height attributes 111 | - Preconnect hints for external domains 112 | 113 | ### Caching Strategy 114 | - Multiple cache levels for different resource types: 115 | - Network-first for HTML/CSS/JS (always fresh) 116 | - Cache-first for static assets (images, icons) 117 | - Stale-while-revalidate for fonts and API data 118 | 119 | ### Version Management 120 | - Centralized version control for resources 121 | - Automatic cache invalidation on deployments 122 | - Clean version transition without page reloads 123 | 124 | ## Getting Started 125 | 126 | 1. Clone the repository 127 | ``` 128 | git clone https://github.com/ashutosh-engineer/Portfolio-Software-Engineer.git 129 | ``` 130 | 131 | 2. Open `index.html` in your browser or use a local development server 132 | 133 | ## Deployment 134 | 135 | This website can be deployed on any web hosting service or platforms like: 136 | 137 | - GitHub Pages 138 | - Netlify 139 | - Vercel 140 | - Any traditional web hosting 141 | 142 | ## Browser Support 143 | 144 | This portfolio website is compatible with all modern browsers including: 145 | 146 | - Chrome 147 | - Firefox 148 | - Safari 149 | - Edge 150 | 151 | ## Contact 152 | 153 | Ashutosh Singh - [LinkedIn](https://www.linkedin.com/in/ashutosh-singh-7945812b2/) 154 | GitHub: [https://github.com/ashutosh-engineer](https://github.com/ashutosh-engineer) -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | // Global version for cache management 2 | const APP_VERSION = '1.0.0'; 3 | 4 | // DOM manipulation helpers 5 | const DOM = { 6 | // Create elements 7 | createElement(tag, attributes = {}, text = '') { 8 | const element = document.createElement(tag); 9 | 10 | // Set attributes 11 | Object.keys(attributes).forEach(attr => { 12 | element.setAttribute(attr, attributes[attr]); 13 | }); 14 | 15 | // Set text content 16 | if (text) { 17 | element.textContent = text; 18 | } 19 | 20 | return element; 21 | }, 22 | 23 | // Append multiple child elements 24 | appendChildren(parent, children) { 25 | if (!parent || !children) return; 26 | 27 | children.forEach(child => { 28 | if (child) parent.appendChild(child); 29 | }); 30 | 31 | return parent; 32 | } 33 | }; 34 | 35 | // Wait for the DOM to be fully loaded 36 | document.addEventListener('DOMContentLoaded', () => { 37 | // Mobile Menu Toggle with improved functionality 38 | initMobileMenu(); 39 | 40 | // Add tooltip data attributes from alt text for certification logos 41 | addCertTooltips(); 42 | 43 | // Project carousel functionality 44 | initProjectCarousel(); 45 | 46 | // Smooth scrolling for navigation 47 | initSmoothScrolling(); 48 | 49 | // Fixed header effects 50 | initFixedHeader(); 51 | 52 | // Initialize animations for elements 53 | initAnimations(); 54 | 55 | // Duplicate news ticker items 56 | initNewsTicker(); 57 | 58 | // Initialize events modal 59 | initEventsModal(); 60 | 61 | // Fetch GitHub avatar 62 | fetchGitHubData(); 63 | }); 64 | 65 | // Function to reload CSS files 66 | function reloadCSS() { 67 | const timestamp = new Date().getTime(); 68 | const styleSheets = document.querySelectorAll('link[rel="stylesheet"]'); 69 | 70 | styleSheets.forEach(linkElement => { 71 | // Only update local CSS files, not external CDN resources 72 | if (linkElement.href.includes(window.location.origin)) { 73 | const originalHref = linkElement.href.split('?')[0]; 74 | linkElement.href = `${originalHref}?v=${timestamp}`; 75 | } 76 | }); 77 | } 78 | 79 | // Function to initialize mobile menu 80 | function initMobileMenu() { 81 | const menuToggle = document.querySelector('.menu-toggle'); 82 | const navLinks = document.querySelector('.nav-links'); 83 | 84 | if (menuToggle && navLinks) { 85 | menuToggle.addEventListener('click', () => { 86 | navLinks.classList.toggle('active'); 87 | menuToggle.classList.toggle('active'); 88 | 89 | // Toggle body scroll when menu is open 90 | if (navLinks.classList.contains('active')) { 91 | document.body.style.overflow = 'hidden'; 92 | } else { 93 | document.body.style.overflow = ''; 94 | } 95 | }); 96 | 97 | // Close menu when clicking outside 98 | document.addEventListener('click', (e) => { 99 | if (navLinks.classList.contains('active') && 100 | !navLinks.contains(e.target) && 101 | !menuToggle.contains(e.target)) { 102 | navLinks.classList.remove('active'); 103 | menuToggle.classList.remove('active'); 104 | document.body.style.overflow = ''; 105 | } 106 | }); 107 | } 108 | } 109 | 110 | // Function to add tooltips to certification logos 111 | function addCertTooltips() { 112 | document.querySelectorAll('.cert-item img').forEach(img => { 113 | const altText = img.getAttribute('alt'); 114 | if (altText) { 115 | img.parentElement.setAttribute('data-tooltip', altText); 116 | } 117 | }); 118 | } 119 | 120 | // Function to initialize project carousel 121 | function initProjectCarousel() { 122 | const projectCards = document.querySelectorAll('.project-card'); 123 | const prevBtn = document.querySelector('.prev-btn'); 124 | const nextBtn = document.querySelector('.next-btn'); 125 | const dots = document.querySelectorAll('.dot'); 126 | let currentIndex = 0; 127 | 128 | // Project expansion functionality 129 | document.querySelectorAll('.project-preview').forEach(preview => { 130 | preview.addEventListener('click', function() { 131 | const projectCard = this.closest('.project-card'); 132 | const details = projectCard.querySelector('.project-details'); 133 | 134 | if (details.style.display === 'block') { 135 | details.style.display = 'none'; 136 | this.classList.remove('expanded'); 137 | } else { 138 | details.style.display = 'block'; 139 | this.classList.add('expanded'); 140 | } 141 | }); 142 | }); 143 | 144 | document.querySelectorAll('.expand-btn').forEach(btn => { 145 | btn.addEventListener('click', function(e) { 146 | e.stopPropagation(); 147 | const projectCard = this.closest('.project-card'); 148 | const details = projectCard.querySelector('.project-details'); 149 | const preview = projectCard.querySelector('.project-preview'); 150 | 151 | details.style.display = 'block'; 152 | preview.classList.add('expanded'); 153 | }); 154 | }); 155 | 156 | document.querySelectorAll('.collapse-btn').forEach(btn => { 157 | btn.addEventListener('click', function() { 158 | const projectCard = this.closest('.project-card'); 159 | const details = projectCard.querySelector('.project-details'); 160 | const preview = projectCard.querySelector('.project-preview'); 161 | 162 | details.style.display = 'none'; 163 | preview.classList.remove('expanded'); 164 | }); 165 | }); 166 | 167 | // Carousel navigation functionality 168 | function showProject(index) { 169 | projectCards.forEach((card, i) => { 170 | card.style.display = i === index ? 'block' : 'none'; 171 | }); 172 | 173 | dots.forEach((dot, i) => { 174 | dot.classList.toggle('active', i === index); 175 | }); 176 | 177 | currentIndex = index; 178 | } 179 | 180 | if (prevBtn && nextBtn) { 181 | prevBtn.addEventListener('click', () => { 182 | currentIndex = (currentIndex - 1 + projectCards.length) % projectCards.length; 183 | showProject(currentIndex); 184 | }); 185 | 186 | nextBtn.addEventListener('click', () => { 187 | currentIndex = (currentIndex + 1) % projectCards.length; 188 | showProject(currentIndex); 189 | }); 190 | } 191 | 192 | dots.forEach((dot, i) => { 193 | dot.addEventListener('click', () => { 194 | showProject(i); 195 | }); 196 | }); 197 | } 198 | 199 | // Function to initialize smooth scrolling 200 | function initSmoothScrolling() { 201 | document.querySelectorAll('a[href^="#"]').forEach(anchor => { 202 | anchor.addEventListener('click', function(e) { 203 | e.preventDefault(); 204 | 205 | const targetId = this.getAttribute('href'); 206 | const targetElement = document.querySelector(targetId); 207 | 208 | if (targetElement) { 209 | const headerHeight = 65; // Height of the fixed header 210 | const elementPosition = targetElement.getBoundingClientRect().top; 211 | const offsetPosition = elementPosition + window.pageYOffset - headerHeight; 212 | 213 | window.scrollTo({ 214 | top: offsetPosition, 215 | behavior: 'smooth' 216 | }); 217 | 218 | // Close mobile menu after clicking a link 219 | const navLinks = document.querySelector('.nav-links'); 220 | const menuToggle = document.querySelector('.menu-toggle'); 221 | 222 | if (navLinks && navLinks.classList.contains('active')) { 223 | navLinks.classList.remove('active'); 224 | if (menuToggle) menuToggle.classList.remove('active'); 225 | document.body.style.overflow = ''; 226 | } 227 | } 228 | }); 229 | }); 230 | } 231 | 232 | // Function to initialize fixed header effects 233 | function initFixedHeader() { 234 | window.addEventListener('scroll', function() { 235 | const header = document.querySelector('header'); 236 | if (header) { 237 | if (window.scrollY > 50) { 238 | header.style.boxShadow = '0 5px 15px rgba(0, 0, 0, 0.5)'; 239 | header.style.backgroundColor = 'rgba(17, 17, 17, 0.98)'; 240 | } else { 241 | header.style.boxShadow = '0 2px 10px rgba(0, 0, 0, 0.4)'; 242 | header.style.backgroundColor = 'rgba(17, 17, 17, 0.9)'; 243 | } 244 | } 245 | }); 246 | } 247 | 248 | // Function to initialize animations 249 | function initAnimations() { 250 | const observedElements = document.querySelectorAll('.project-card, .profile-link, .tech-tag, .featured-project-card, .github-stat-card'); 251 | 252 | if ('IntersectionObserver' in window) { 253 | const observer = new IntersectionObserver((entries) => { 254 | entries.forEach(entry => { 255 | if (entry.isIntersecting) { 256 | entry.target.style.opacity = 1; 257 | entry.target.style.transform = entry.target.classList.contains('tech-tag') ? 258 | 'translateY(0)' : 'translateY(0)'; 259 | // Stop observing after animation 260 | observer.unobserve(entry.target); 261 | } 262 | }); 263 | }, { threshold: 0.1 }); 264 | 265 | observedElements.forEach(element => { 266 | element.style.opacity = 0; 267 | element.style.transform = element.classList.contains('tech-tag') ? 268 | 'translateY(10px)' : 'translateY(20px)'; 269 | element.style.transition = 'opacity 0.5s ease, transform 0.5s ease'; 270 | observer.observe(element); 271 | }); 272 | } else { 273 | // Fallback for browsers without IntersectionObserver 274 | observedElements.forEach(element => { 275 | element.style.opacity = 1; 276 | element.style.transform = 'translateY(0)'; 277 | }); 278 | } 279 | } 280 | 281 | // Function to initialize news ticker 282 | function initNewsTicker() { 283 | const tickerContent = document.querySelector('.news-ticker-content'); 284 | if (!tickerContent) return; 285 | 286 | // Clone items for continuous scrolling 287 | const originalItems = Array.from(tickerContent.children); 288 | originalItems.forEach(item => { 289 | const clone = item.cloneNode(true); 290 | tickerContent.appendChild(clone); 291 | }); 292 | 293 | // Set animation speed based on screen width and content length 294 | const totalWidth = tickerContent.scrollWidth; 295 | const isMobile = window.innerWidth <= 768; 296 | 297 | // Slower animation for mobile to ensure all items are visible 298 | const animationDuration = isMobile 299 | ? Math.max(25, totalWidth / 60) // Slower on mobile 300 | : Math.max(15, totalWidth / 120); // Faster on desktop 301 | 302 | tickerContent.style.animationDuration = `${animationDuration}s`; 303 | 304 | // Ensure ticker content has proper width and spacing 305 | if (isMobile) { 306 | // Add extra spacing on mobile between items 307 | const tickerItems = tickerContent.querySelectorAll('.ticker-item'); 308 | tickerItems.forEach(item => { 309 | item.style.marginRight = '200px'; // More spacing on mobile 310 | item.style.paddingLeft = '15px'; 311 | item.style.paddingRight = '15px'; 312 | }); 313 | } 314 | 315 | // Handle window resize events to adjust animation speed 316 | window.addEventListener('resize', () => { 317 | const newIsMobile = window.innerWidth <= 768; 318 | const newDuration = newIsMobile 319 | ? Math.max(25, tickerContent.scrollWidth / 60) 320 | : Math.max(15, tickerContent.scrollWidth / 120); 321 | 322 | tickerContent.style.animationDuration = `${newDuration}s`; 323 | 324 | // Update spacing on resize 325 | const tickerItems = tickerContent.querySelectorAll('.ticker-item'); 326 | tickerItems.forEach(item => { 327 | item.style.marginRight = newIsMobile ? '200px' : '120px'; 328 | item.style.paddingLeft = newIsMobile ? '15px' : ''; 329 | item.style.paddingRight = newIsMobile ? '15px' : ''; 330 | }); 331 | }); 332 | 333 | // --- ENHANCED INTERACTIVITY --- 334 | // Pause/resume on hover or focus 335 | function pauseTicker() { 336 | tickerContent.style.animationPlayState = 'paused'; 337 | } 338 | function resumeTicker() { 339 | tickerContent.style.animationPlayState = 'running'; 340 | } 341 | tickerContent.addEventListener('mouseenter', pauseTicker); 342 | tickerContent.addEventListener('mouseleave', resumeTicker); 343 | tickerContent.addEventListener('focusin', pauseTicker); 344 | tickerContent.addEventListener('focusout', resumeTicker); 345 | 346 | // Add tooltips to ticker items for clarity 347 | document.querySelectorAll('.ticker-item').forEach(item => { 348 | if (!item.title) { 349 | item.title = item.textContent.trim(); 350 | } 351 | }); 352 | } 353 | 354 | // Function to initialize events modal 355 | function initEventsModal() { 356 | const modal = document.getElementById('events-modal'); 357 | const whatsNewLabel = document.getElementById('whats-new-label'); 358 | const closeModal = document.querySelector('.close-modal'); 359 | 360 | if (!modal || !whatsNewLabel || !closeModal) return; 361 | 362 | // Add data-label attributes to table cells for mobile view 363 | const tableCells = document.querySelectorAll('.events-table tbody td'); 364 | const headerTexts = Array.from(document.querySelectorAll('.events-table th')).map(th => th.textContent); 365 | 366 | tableCells.forEach((cell, index) => { 367 | const headerIndex = index % headerTexts.length; 368 | cell.setAttribute('data-label', headerTexts[headerIndex]); 369 | }); 370 | 371 | // Helper function to open modal 372 | const openModalFunction = (e) => { 373 | e.preventDefault(); 374 | e.stopPropagation(); 375 | modal.classList.add('show'); 376 | document.body.style.overflow = 'hidden'; // Prevent scrolling 377 | console.log('Modal opened'); 378 | }; 379 | 380 | // Improved mobile touch handling 381 | let touchStarted = false; 382 | 383 | // Handle touch events for mobile 384 | whatsNewLabel.addEventListener('touchstart', (e) => { 385 | touchStarted = true; 386 | e.preventDefault(); 387 | e.stopPropagation(); 388 | }, {passive: false}); 389 | 390 | whatsNewLabel.addEventListener('touchend', (e) => { 391 | if (touchStarted) { 392 | e.preventDefault(); 393 | e.stopPropagation(); 394 | openModalFunction(e); 395 | touchStarted = false; 396 | } 397 | }, {passive: false}); 398 | 399 | // Handle click events for desktop (only if not a touch device or touch didn't occur) 400 | whatsNewLabel.addEventListener('click', (e) => { 401 | if (!touchStarted) { 402 | openModalFunction(e); 403 | } 404 | }); 405 | 406 | // Make sure the entire label area is clickable - apply same logic to span 407 | const labelSpan = whatsNewLabel.querySelector('span'); 408 | if (labelSpan) { 409 | labelSpan.addEventListener('touchstart', (e) => { 410 | touchStarted = true; 411 | e.preventDefault(); 412 | e.stopPropagation(); 413 | }, {passive: false}); 414 | 415 | labelSpan.addEventListener('touchend', (e) => { 416 | if (touchStarted) { 417 | e.preventDefault(); 418 | e.stopPropagation(); 419 | openModalFunction(e); 420 | touchStarted = false; 421 | } 422 | }, {passive: false}); 423 | 424 | labelSpan.addEventListener('click', (e) => { 425 | if (!touchStarted) { 426 | openModalFunction(e); 427 | } 428 | }); 429 | } 430 | 431 | // Close modal when clicking on X button 432 | closeModal.addEventListener('click', () => { 433 | modal.classList.remove('show'); 434 | document.body.style.overflow = ''; // Restore scrolling 435 | console.log('Modal closed via X button'); 436 | }); 437 | // Keyboard accessibility for close button 438 | closeModal.addEventListener('keydown', (e) => { 439 | if (e.key === 'Enter' || e.key === ' ') { 440 | modal.classList.remove('show'); 441 | document.body.style.overflow = ''; 442 | e.preventDefault(); 443 | } 444 | }); 445 | 446 | // Close modal when clicking outside the modal content 447 | modal.addEventListener('click', (e) => { 448 | if (e.target === modal) { 449 | modal.classList.remove('show'); 450 | document.body.style.overflow = ''; // Restore scrolling 451 | console.log('Modal closed via outside click'); 452 | } 453 | }); 454 | 455 | // Close modal on Escape key 456 | document.addEventListener('keydown', (e) => { 457 | if (e.key === 'Escape' && modal.classList.contains('show')) { 458 | modal.classList.remove('show'); 459 | document.body.style.overflow = ''; // Restore scrolling 460 | console.log('Modal closed via Escape key'); 461 | } 462 | }); 463 | } 464 | 465 | 466 | // Format a date string 467 | function formatDate(dateString) { 468 | const date = new Date(dateString); 469 | return date.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' }); 470 | } 471 | 472 | // Handle user input 473 | function sanitizeInput(input) { 474 | return input.trim(); 475 | } 476 | 477 | // Simple HTML sanitizing function 478 | function sanitizeHTML(html) { 479 | return html; 480 | } 481 | 482 | // Function to fetch GitHub data (avatar only) 483 | async function fetchGitHubData() { 484 | const username = 'ashutosh-engineer'; 485 | 486 | try { 487 | // Fetch user profile information 488 | const profileResponse = await fetch(`https://api.github.com/users/${username}`); 489 | 490 | if (!profileResponse.ok) { 491 | throw new Error(`HTTP error! Status: ${profileResponse.status}`); 492 | } 493 | 494 | const profileData = await profileResponse.json(); 495 | 496 | // Update hero image with GitHub avatar 497 | const profileImgPlaceholder = document.querySelector('.profile-img-placeholder'); 498 | if (profileImgPlaceholder && profileData.avatar_url) { 499 | // Create image element 500 | const img = document.createElement('img'); 501 | img.src = profileData.avatar_url; 502 | img.alt = 'Ashutosh Singh Profile Image'; 503 | img.className = 'profile-img'; 504 | 505 | // Add error handler for image loading failures 506 | img.onerror = function() { 507 | this.onerror = null; 508 | this.src = 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Ccircle cx="12" cy="12" r="12" fill="%23333"/%3E%3Cpath d="M7 15v2h10v-2H7zm2-8h6v2H9V7z" fill="%23FFF"/%3E%3C/svg%3E'; 509 | }; 510 | 511 | // Clear placeholder and add image 512 | profileImgPlaceholder.innerHTML = ''; 513 | profileImgPlaceholder.appendChild(img); 514 | } 515 | } catch (error) { 516 | console.error('Error fetching GitHub data:', error); 517 | 518 | // Provide fallback for profile image on error 519 | const profileImgPlaceholder = document.querySelector('.profile-img-placeholder'); 520 | if (profileImgPlaceholder) { 521 | profileImgPlaceholder.innerHTML = ''; 522 | } 523 | } 524 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Ashutosh Singh | Software Engineer 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 65 | 66 | 67 | 70 | 71 | 72 | 88 | 89 | 90 |
91 | 109 |
110 | 111 |
112 |
113 |
114 |

Hello, I'm Ashutosh Singh

115 |

Aspiring Software Engineer

116 |

Java DSA • MERN Stack • AI • B.Tech @ Parul University

117 | 118 |
119 | View My Work 120 | Contact Me 121 |
122 |
123 |
124 |
125 | 126 |
127 |
128 |
129 |
130 | 131 | 132 | 133 |
134 |
135 | 136 | 137 |
138 |
139 | What's New 140 |
141 |
142 |
143 | 144 | 145 | 146 | Ranked #13634 in Codeforces Round 1042 (Div. 3): View Contest History 147 | Aug 2025 148 | 149 | 150 | 151 | 152 | Ranked Top 500 Globally in LeetCode Biweekly Contest 161: View Profile 153 | Aug 2024 154 | 155 | 156 | 157 | 158 | Solved #506 (Gap Analysis & Matching Optimization) in OWASP OpenCRE: PR #617 159 | Jul 24, 2024 160 | 161 | 162 | 163 | 164 | Solved #585 (Automatic Mapping of Standards to CREs) in OWASP OpenCRE: PR #618 165 | Jul 24, 2024 166 | 167 | 168 | 169 | 170 | Solved #614 in OWASP OpenCRE: View Pull Request 171 | Jul 23, 2024 172 | 173 |
174 |
175 |
176 | 177 | 178 | 247 | 248 |
249 |

About Me

250 |
251 |
252 |

Aspiring Software Engineer with a strong foundation in Data Structures & Algorithms (Java) and full-stack development (MERN). Currently on a focused 2-year roadmap targeting scalable system design, AI integration, and development excellence.

253 | 254 |

Previously contributed at NMS Software and Innovation India Pvt Ltd, where I worked on AI-driven, high-performance solutions involving scalable architecture and modern system design strategies.

255 | 256 |

Collaborated with iNeuron.ai on a climate change analysis project leveraging ML/DL techniques for actionable insights. Pursuing a Diploma in Information Technology at Parul University with active interests in backend engineering (Node.js), containerization (Docker), and zero-to-one product building.

257 | 258 |

Actively preparing for high-impact engineering roles with a strong focus on open-source contribution, Google Summer of Code (GSoC), and startup-driven innovation. My long-term vision includes solving large-scale problems at companies like Google, Meta, and other product-first tech giants, through a blend of algorithmic depth, system design expertise, and end-to-end ownership.

259 | 260 |

My technical skills include:

261 |
262 | Java 263 | DSA 264 | JavaScript 265 | React 266 | Node.js 267 | MongoDB 268 | Express 269 | ML 270 | Docker 271 | System Design 272 |
273 |
274 |
275 |
276 | 277 |
278 |

Education

279 |
280 |
281 | 284 |
285 |
286 |

Bachelors in CSE

287 | 2026 - 2029 288 |
289 |
290 |

Parul University

291 |
292 |

Computer Science and Engineering

293 |
294 |
295 |
296 | 297 |
298 | 301 |
302 |
303 |

Diploma in Information Technology

304 | 2023 - 2026 305 |
306 |
307 |

Parul University

308 |
309 |
310 | CGPA 311 | 9.6 312 |
313 |
314 |
315 |
316 |
317 |
318 | 319 |
320 |

Course Work

321 |
322 |
323 | 324 |
325 | 326 |
327 |
328 | 329 |
330 |
331 | 332 |
333 |
334 | 335 |
336 | 337 | 338 |
339 | 340 |
341 |
342 | 343 |
344 |
345 | 346 |
347 |
348 | 349 |
350 | 351 | 352 |
353 | 354 |
355 |
356 | 357 |
358 |
359 | 360 |
361 |
362 | 363 |
364 |
365 |
366 |
367 | 368 | 436 | 437 |
438 |

Internships & Contributions

439 |
440 | 441 |
442 | 445 |
446 |

Open Source Contributor Open Source Contribution

447 |

GirlScript Summer of Code

448 |

449 | Participated in India's largest beginner-friendly open source program. Contributed to multiple open source projects, collaborated with developers worldwide, and enhanced coding skills through real-world project contributions. GSSoC is a 3-month long program that helps beginners get started with Open Source Development. 450 |

451 |
452 | Open Source 453 | Git 454 | GitHub 455 | Collaboration 456 | Code Review 457 | Documentation 458 |
459 |
460 | LinkedIn Post 461 |
462 |
463 |
464 | 465 | 466 |
467 | 470 |
471 |

Software Engineer Internship

472 |

NMS Softwares and Innovation India Pvt Ltd

473 |

474 | Contributed to ML-driven, high-performance solutions involving scalable architecture and modern system design strategies. Worked with cutting-edge technologies to develop robust and efficient software solutions. 475 |

476 |
477 | Java 478 | ML 479 | MERN Stack 480 | System Design 481 | Scalable Architecture 482 |
483 |
484 | Company Website 485 | LinkedIn 486 |
487 |
488 |
489 | 490 | 491 |
492 | 495 |
496 |

Machine Learning Engineer Project-based Internship

497 |

iNeuron.ai

498 |

499 | Project: Analysis and Prediction of Climate Change in the United States of America. Implemented machine learning and deep learning techniques to analyze climate data patterns and develop predictive models for temperature trends and climate change impacts. 500 |

501 |
502 | Python 503 | Machine Learning 504 | Deep Learning 505 | Data Analysis 506 | Time Series 507 |
508 |
509 | Offer Letter 510 |
511 |
512 |
513 |
514 |
515 | 516 |
517 |

GitHub Stats

518 |
519 |
520 | Ashutosh's GitHub Stats 521 | Top Languages 522 |
523 |
524 |
525 | 526 |
527 |

Coding Profiles

528 |
529 | 530 | 531 | GitHub 532 | 533 | 534 | 535 | LeetCode 536 | 537 | 538 | 539 | CodeForces 540 | 541 |
542 |
543 | 544 | 545 | 546 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | /* Global Styles */ 2 | * { 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | } 7 | 8 | :root { 9 | /* Dark theme variables (now default) */ 10 | --primary-color: #6d8eff; 11 | --secondary-color: #3d4b75; 12 | --accent-color: #ff7a7a; 13 | --bg-color: #121212; 14 | --card-bg: #1e1e1e; 15 | --text-color: #ffffff; 16 | --text-secondary: #b0b0b0; 17 | --light-gray: #333; 18 | --dark-gray: #999; 19 | --border-color: #444; 20 | --shadow: 0 5px 15px rgba(0, 0, 0, 0.3); 21 | 22 | /* Progress bar colors */ 23 | --easy-color: #43a047; 24 | --medium-color: #fb8c00; 25 | --hard-color: #e91e63; 26 | } 27 | 28 | html { 29 | scroll-behavior: smooth; 30 | } 31 | 32 | body { 33 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 34 | line-height: 1.6; 35 | color: var(--text-color); 36 | background-color: var(--bg-color); 37 | } 38 | 39 | a { 40 | text-decoration: none; 41 | color: var(--primary-color); 42 | transition: color 0.3s ease; 43 | } 44 | 45 | .btn { 46 | display: inline-block; 47 | padding: 0.8rem 1.5rem; 48 | background-color: var(--primary-color); 49 | color: white; 50 | border-radius: 4px; 51 | transition: all 0.3s ease; 52 | border: none; 53 | cursor: pointer; 54 | font-size: 1rem; 55 | text-align: center; 56 | font-weight: 500; 57 | letter-spacing: 0.5px; 58 | } 59 | 60 | .btn:hover { 61 | background-color: var(--secondary-color); 62 | transform: translateY(-2px); 63 | box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); 64 | } 65 | 66 | .btn-outline { 67 | background-color: transparent; 68 | border: 2px solid var(--primary-color); 69 | color: var(--primary-color); 70 | } 71 | 72 | .btn-outline:hover { 73 | background-color: var(--primary-color); 74 | color: white; 75 | } 76 | 77 | .section-title { 78 | text-align: center; 79 | font-size: 2.5rem; 80 | margin-bottom: 0.5rem; 81 | position: relative; 82 | color: var(--text-color); 83 | } 84 | 85 | .section-title::after { 86 | content: ''; 87 | position: absolute; 88 | bottom: -10px; 89 | left: 50%; 90 | transform: translateX(-50%); 91 | width: 80px; 92 | height: 4px; 93 | background-color: var(--accent-color); 94 | } 95 | 96 | .section-description { 97 | text-align: center; 98 | color: var(--text-secondary); 99 | margin-bottom: 2rem; 100 | max-width: 800px; 101 | margin-left: auto; 102 | margin-right: auto; 103 | padding: 0 1rem; 104 | } 105 | 106 | /* Header & Navigation */ 107 | header { 108 | background-color: rgba(17, 17, 17, 0.9); 109 | box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); 110 | position: fixed; 111 | width: 100%; 112 | top: 0; 113 | z-index: 100; 114 | transition: all 0.3s ease; 115 | } 116 | 117 | nav { 118 | display: flex; 119 | justify-content: space-between; 120 | align-items: center; 121 | padding: 0.7rem 4%; 122 | max-width: 1600px; 123 | margin: 0 auto; 124 | height: 65px; 125 | } 126 | 127 | .logo h1 { 128 | font-size: 1.5rem; 129 | color: var(--primary-color); 130 | font-weight: 600; 131 | letter-spacing: 0.5px; 132 | } 133 | 134 | .menu-toggle { 135 | display: none; 136 | font-size: 1.5rem; 137 | cursor: pointer; 138 | color: var(--text-color); 139 | width: 40px; 140 | height: 40px; 141 | border-radius: 50%; 142 | display: none; 143 | align-items: center; 144 | justify-content: center; 145 | transition: all 0.3s ease; 146 | z-index: 110; 147 | } 148 | 149 | .menu-toggle:hover { 150 | background-color: rgba(255, 255, 255, 0.1); 151 | color: var(--primary-color); 152 | } 153 | 154 | .nav-links { 155 | display: flex; 156 | list-style: none; 157 | } 158 | 159 | .nav-links li { 160 | margin-left: 2rem; 161 | } 162 | 163 | .nav-links a { 164 | color: var(--text-color); 165 | font-weight: 500; 166 | font-size: 0.95rem; 167 | transition: color 0.3s ease; 168 | position: relative; 169 | } 170 | 171 | .nav-links a:after { 172 | content: ''; 173 | position: absolute; 174 | width: 0; 175 | height: 2px; 176 | bottom: -5px; 177 | left: 0; 178 | background-color: var(--primary-color); 179 | transition: width 0.3s ease; 180 | } 181 | 182 | .nav-links a:hover { 183 | color: var(--primary-color); 184 | } 185 | 186 | .nav-links a:hover:after { 187 | width: 100%; 188 | } 189 | 190 | /* Add a down arrow indicating to scroll down at the bottom of the hero section */ 191 | .scroll-indicator { 192 | position: absolute; 193 | bottom: 30px; 194 | left: 50%; 195 | transform: translateX(-50%); 196 | text-align: center; 197 | animation: bounce 2s infinite; 198 | cursor: pointer; 199 | } 200 | 201 | .scroll-indicator i { 202 | font-size: 1.8rem; 203 | color: var(--text-color); 204 | } 205 | 206 | @keyframes bounce { 207 | 0%, 20%, 50%, 80%, 100% { 208 | transform: translateY(0) translateX(-50%); 209 | } 210 | 40% { 211 | transform: translateY(-15px) translateX(-50%); 212 | } 213 | 60% { 214 | transform: translateY(-7px) translateX(-50%); 215 | } 216 | } 217 | 218 | /* Hero Section */ 219 | .hero { 220 | min-height: 100vh; 221 | width: 100%; 222 | display: flex; 223 | align-items: center; 224 | justify-content: center; 225 | padding: 0; 226 | margin-top: 0; 227 | background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1549692520-acc6669e2f0c?q=80&w=1974&auto=format&fit=crop') no-repeat center center/cover; 228 | color: white; 229 | position: relative; 230 | } 231 | 232 | .hero-content { 233 | max-width: 1400px; 234 | width: 100%; 235 | display: grid; 236 | grid-template-columns: 3fr 2fr; 237 | gap: 3rem; 238 | align-items: center; 239 | padding: 0 4%; 240 | margin-top: 65px; /* Adjust for fixed header */ 241 | } 242 | 243 | .hero-text { 244 | text-align: left; 245 | } 246 | 247 | .hero h1 { 248 | font-size: 3.8rem; 249 | margin-bottom: 1rem; 250 | line-height: 1.2; 251 | } 252 | 253 | .hero h2 { 254 | font-size: 2.2rem; 255 | margin-bottom: 1.5rem; 256 | font-weight: 400; 257 | } 258 | 259 | .hero p { 260 | font-size: 1.3rem; 261 | margin-bottom: 2rem; 262 | } 263 | 264 | /* News Ticker */ 265 | .news-ticker-container { 266 | width: 100%; 267 | background-color: rgba(25, 25, 35, 0.95); 268 | display: flex; 269 | position: relative; 270 | border-top: 1px solid rgba(255, 255, 255, 0.05); 271 | border-bottom: 1px solid rgba(255, 255, 255, 0.05); 272 | z-index: 10; 273 | box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2); 274 | overflow: hidden; 275 | } 276 | 277 | .news-ticker-label { 278 | min-width: 140px; 279 | padding: 12px 20px; 280 | background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); 281 | display: flex; 282 | align-items: center; 283 | justify-content: center; 284 | font-weight: 600; 285 | font-size: 0.9rem; 286 | text-transform: uppercase; 287 | letter-spacing: 1px; 288 | color: white; 289 | position: relative; 290 | box-shadow: 5px 0 15px rgba(0, 0, 0, 0.2); 291 | z-index: 2; 292 | cursor: pointer; 293 | transition: all 0.3s ease; 294 | } 295 | 296 | .news-ticker-label:hover { 297 | background: linear-gradient(135deg, var(--secondary-color), var(--primary-color)); 298 | transform: translateY(-2px); 299 | } 300 | 301 | .news-ticker-label::after { 302 | content: ''; 303 | position: absolute; 304 | right: -15px; 305 | top: 0; 306 | border-top: 20px solid transparent; 307 | border-bottom: 20px solid transparent; 308 | border-left: 15px solid var(--secondary-color); 309 | z-index: 2; 310 | } 311 | 312 | .news-ticker { 313 | flex: 1; 314 | overflow: hidden; 315 | padding: 12px 0; 316 | position: relative; 317 | } 318 | 319 | .news-ticker::before { 320 | content: ''; 321 | position: absolute; 322 | top: 0; 323 | left: 0; 324 | width: 50px; 325 | height: 100%; 326 | background: linear-gradient(to right, rgba(25, 25, 35, 0.95), transparent); 327 | z-index: 1; 328 | } 329 | 330 | .news-ticker::after { 331 | content: ''; 332 | position: absolute; 333 | top: 0; 334 | right: 0; 335 | width: 50px; 336 | height: 100%; 337 | background: linear-gradient(to left, rgba(25, 25, 35, 0.95), transparent); 338 | z-index: 1; 339 | } 340 | 341 | .news-ticker-content { 342 | display: flex; 343 | animation: marquee 20s linear infinite; 344 | white-space: nowrap; 345 | padding-right: 50px; 346 | } 347 | 348 | .ticker-item { 349 | display: inline-flex; 350 | align-items: center; 351 | margin-right: 120px; 352 | color: var(--text-color); 353 | font-size: 1rem; 354 | padding: 0 10px; 355 | } 356 | 357 | .ticker-item i { 358 | margin-right: 10px; 359 | color: var(--accent-color); 360 | } 361 | 362 | .ticker-item a { 363 | color: var(--primary-color); 364 | text-decoration: none; 365 | transition: color 0.2s ease, text-decoration 0.2s ease; 366 | margin: 0 5px; 367 | } 368 | 369 | .ticker-item a:hover { 370 | color: var(--accent-color); 371 | text-decoration: underline; 372 | } 373 | 374 | .ticker-date { 375 | display: inline-block; 376 | margin-left: 10px; 377 | font-size: 0.8rem; 378 | background-color: rgba(255, 255, 255, 0.05); 379 | padding: 2px 8px; 380 | border-radius: 10px; 381 | color: var(--text-secondary); 382 | font-weight: 500; 383 | } 384 | 385 | @keyframes marquee { 386 | 0% { 387 | transform: translateX(100%); 388 | } 389 | 100% { 390 | transform: translateX(-100%); 391 | } 392 | } 393 | 394 | .news-ticker:hover .news-ticker-content { 395 | animation-play-state: paused; 396 | } 397 | 398 | @media (max-width: 768px) { 399 | .news-ticker-label { 400 | min-width: 120px; 401 | font-size: 0.8rem; 402 | padding: 12px 15px; 403 | } 404 | 405 | .ticker-item { 406 | font-size: 0.9rem; 407 | } 408 | } 409 | 410 | @media (max-width: 480px) { 411 | .news-ticker-container { 412 | flex-direction: column; 413 | height: auto; 414 | overflow: visible; 415 | } 416 | 417 | .news-ticker-label { 418 | width: 100%; 419 | padding: 12px 15px; 420 | position: relative; 421 | z-index: 20; 422 | border-radius: 0; 423 | display: flex; 424 | background: linear-gradient(135deg, var(--accent-color), var(--primary-color)); 425 | box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); 426 | font-weight: bold; 427 | } 428 | 429 | .news-ticker-label::after { 430 | display: none; 431 | } 432 | 433 | /* Add an explicit tap/click indicator for mobile */ 434 | .news-ticker-label::before { 435 | content: '\f0a9'; /* Font Awesome arrow icon */ 436 | font-family: 'Font Awesome 5 Free'; 437 | font-weight: 900; 438 | margin-right: 8px; 439 | font-size: 0.9rem; 440 | } 441 | 442 | .news-ticker-label span { 443 | display: flex; 444 | align-items: center; 445 | justify-content: center; 446 | width: 100%; 447 | } 448 | 449 | .news-ticker { 450 | padding: 8px 10px; 451 | width: 100%; 452 | height: auto; 453 | max-height: 100px; 454 | overflow: hidden; 455 | } 456 | 457 | .news-ticker-content { 458 | animation: marquee-mobile-compact 25s linear infinite; 459 | padding-right: 20px; 460 | white-space: nowrap; 461 | } 462 | 463 | @keyframes marquee-mobile-compact { 464 | 0% { 465 | transform: translateX(100%); 466 | } 467 | 100% { 468 | transform: translateX(-200%); 469 | } 470 | } 471 | 472 | .ticker-item { 473 | font-size: 0.8rem; 474 | margin-right: 40px; 475 | white-space: nowrap; 476 | display: inline-flex; 477 | align-items: center; 478 | line-height: 1.3; 479 | flex-shrink: 0; 480 | max-width: none; 481 | } 482 | 483 | /* Compact mobile news layout */ 484 | .ticker-item .news-logo { 485 | width: 16px; 486 | height: 16px; 487 | margin-right: 6px; 488 | } 489 | 490 | .ticker-item i:not(.fa-bell) { 491 | font-size: 0.8rem; 492 | margin-right: 6px; 493 | } 494 | 495 | .ticker-date { 496 | font-size: 0.7rem; 497 | padding: 1px 6px; 498 | margin-left: 6px; 499 | } 500 | } 501 | 502 | @media (max-width: 992px) { 503 | .hero-content { 504 | grid-template-columns: 1fr; 505 | text-align: center; 506 | } 507 | 508 | .hero-text { 509 | text-align: center; 510 | } 511 | 512 | .hero-buttons { 513 | justify-content: center; 514 | } 515 | } 516 | 517 | .hero-buttons { 518 | display: flex; 519 | gap: 1rem; 520 | } 521 | 522 | .highlight { 523 | color: var(--accent-color); 524 | } 525 | 526 | .hero-image { 527 | display: flex; 528 | justify-content: center; 529 | align-items: center; 530 | } 531 | 532 | .profile-img-placeholder { 533 | width: 280px; 534 | height: 280px; 535 | border-radius: 50%; 536 | background-color: rgba(255, 255, 255, 0.1); 537 | display: flex; 538 | align-items: center; 539 | justify-content: center; 540 | border: 4px solid var(--accent-color); 541 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); 542 | overflow: hidden; 543 | } 544 | 545 | .profile-img-placeholder i { 546 | font-size: 8rem; 547 | color: rgba(255, 255, 255, 0.8); 548 | } 549 | 550 | .profile-img-placeholder img { 551 | width: 100%; 552 | height: 100%; 553 | object-fit: cover; 554 | } 555 | 556 | /* About section */ 557 | .about { 558 | padding: 5rem 1rem; 559 | padding-top: 120px; /* Extra padding for fixed header */ 560 | background-color: var(--bg-color); 561 | position: relative; 562 | } 563 | 564 | .about-content { 565 | max-width: 900px; 566 | margin: 3rem auto 0; 567 | } 568 | 569 | .about-text p { 570 | margin-bottom: 1.5rem; 571 | font-size: 1.1rem; 572 | color: var(--text-color); 573 | } 574 | 575 | .tech-stack { 576 | display: flex; 577 | flex-wrap: wrap; 578 | gap: 0.8rem; 579 | margin: 1.5rem 0; 580 | } 581 | 582 | .tech-tag { 583 | background-color: var(--light-gray); 584 | color: var(--text-color); 585 | padding: 0.5rem 1rem; 586 | border-radius: 30px; 587 | font-size: 0.9rem; 588 | transition: all 0.3s ease; 589 | } 590 | 591 | .tech-tag:hover { 592 | background-color: var(--primary-color); 593 | color: white; 594 | transform: translateY(-3px); 595 | } 596 | 597 | /* Education section */ 598 | .education { 599 | padding: 5rem 1rem; 600 | padding-top: 120px; /* Extra padding for fixed header */ 601 | background-color: var(--bg-color); 602 | position: relative; 603 | } 604 | 605 | .education-container { 606 | max-width: 900px; 607 | margin: 3rem auto 0; 608 | display: flex; 609 | flex-direction: column; 610 | gap: 2.5rem; 611 | } 612 | 613 | .education-card { 614 | display: flex; 615 | background: linear-gradient(145deg, rgba(30, 30, 30, 0.6), rgba(20, 20, 20, 0.8)); 616 | border-radius: 12px; 617 | overflow: hidden; 618 | box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); 619 | transition: all 0.3s ease; 620 | position: relative; 621 | border: 1px solid rgba(255, 255, 255, 0.05); 622 | } 623 | 624 | .education-card:hover { 625 | transform: translateY(-8px); 626 | box-shadow: 0 15px 40px rgba(109, 142, 255, 0.1); 627 | border-color: rgba(109, 142, 255, 0.2); 628 | } 629 | 630 | .education-card::before { 631 | content: ''; 632 | position: absolute; 633 | left: 0; 634 | top: 0; 635 | height: 100%; 636 | width: 3px; 637 | background: linear-gradient(to bottom, var(--primary-color), var(--accent-color)); 638 | } 639 | 640 | .education-logo { 641 | flex: 0 0 160px; 642 | display: flex; 643 | align-items: center; 644 | justify-content: center; 645 | padding: 1.5rem; 646 | background-color: white; 647 | border-right: 1px solid rgba(255, 255, 255, 0.05); 648 | } 649 | 650 | .education-logo img { 651 | max-width: 120px; 652 | height: auto; 653 | transition: transform 0.3s ease; 654 | filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1)); 655 | } 656 | 657 | .education-card:hover .education-logo img { 658 | transform: scale(1.05); 659 | } 660 | 661 | .education-details { 662 | flex: 1; 663 | padding: 2rem; 664 | position: relative; 665 | } 666 | 667 | .education-header { 668 | display: flex; 669 | justify-content: space-between; 670 | align-items: center; 671 | flex-wrap: wrap; 672 | margin-bottom: 1rem; 673 | } 674 | 675 | .education-header h3 { 676 | font-size: 1.6rem; 677 | font-weight: 600; 678 | color: var(--text-color); 679 | margin: 0; 680 | padding: 0; 681 | } 682 | 683 | .education-year { 684 | color: var(--primary-color); 685 | font-size: 1.1rem; 686 | font-weight: 500; 687 | background-color: rgba(109, 142, 255, 0.1); 688 | padding: 0.3rem 1rem; 689 | border-radius: 20px; 690 | margin-left: 1rem; 691 | } 692 | 693 | .education-divider { 694 | width: 100%; 695 | height: 1px; 696 | background: linear-gradient(to right, var(--primary-color), transparent); 697 | margin: 1rem 0; 698 | } 699 | 700 | .education-institution { 701 | font-size: 1.2rem; 702 | color: var(--text-secondary); 703 | margin-bottom: 1.2rem; 704 | font-weight: 500; 705 | letter-spacing: 0.5px; 706 | } 707 | 708 | .education-content { 709 | margin-top: 1.5rem; 710 | color: var(--text-secondary); 711 | font-size: 1.1rem; 712 | } 713 | 714 | .education-achievement { 715 | display: inline-block; 716 | background-color: rgba(255, 255, 255, 0.05); 717 | padding: 0.8rem 1.5rem; 718 | border-radius: 8px; 719 | margin-top: 0.5rem; 720 | display: flex; 721 | align-items: center; 722 | gap: 1rem; 723 | border-left: 3px solid var(--accent-color); 724 | } 725 | 726 | .achievement-label { 727 | font-weight: 600; 728 | color: var(--text-secondary); 729 | } 730 | 731 | .achievement-value { 732 | font-size: 1.3rem; 733 | font-weight: 700; 734 | color: var(--accent-color); 735 | } 736 | 737 | @media (max-width: 768px) { 738 | .education-card { 739 | flex-direction: column; 740 | } 741 | 742 | .education-card::before { 743 | width: 100%; 744 | height: 3px; 745 | top: 0; 746 | left: 0; 747 | background: linear-gradient(to right, var(--primary-color), var(--accent-color)); 748 | } 749 | 750 | .education-logo { 751 | padding: 1.5rem; 752 | border-right: none; 753 | border-bottom: 1px solid rgba(255, 255, 255, 0.05); 754 | flex: unset; 755 | width: 100%; 756 | } 757 | 758 | .education-header { 759 | flex-direction: column; 760 | align-items: flex-start; 761 | } 762 | 763 | .education-year { 764 | margin-left: 0; 765 | margin-top: 0.5rem; 766 | } 767 | } 768 | 769 | @media (max-width: 480px) { 770 | .education-details { 771 | padding: 1.5rem; 772 | } 773 | 774 | .education-header h3 { 775 | font-size: 1.3rem; 776 | } 777 | 778 | .education-logo img { 779 | max-width: 100px; 780 | } 781 | } 782 | 783 | /* Course Work section */ 784 | .course-work { 785 | padding: 2.5rem 1rem; 786 | padding-top: 100px; /* Reduced padding for fixed header */ 787 | background-color: var(--bg-color); /* Single color background */ 788 | position: relative; 789 | } 790 | 791 | .course-work-content { 792 | max-width: 800px; 793 | margin: 1.5rem auto 0; 794 | } 795 | 796 | .tech-certifications { 797 | display: grid; 798 | grid-template-columns: repeat(4, 1fr); 799 | gap: 2.5rem; 800 | justify-content: center; 801 | align-items: center; 802 | max-width: 600px; 803 | margin: 0 auto; 804 | position: relative; 805 | padding: 1.5rem 0; 806 | } 807 | 808 | /* Offset every other row to create diamond pattern */ 809 | .tech-certifications .cert-item:nth-child(4n-2), 810 | .tech-certifications .cert-item:nth-child(4n-1) { 811 | transform: translateY(1.5rem); 812 | } 813 | 814 | .cert-item { 815 | text-align: center; 816 | transition: all 0.3s ease; 817 | position: relative; 818 | perspective: 1000px; 819 | } 820 | 821 | .cert-item:hover { 822 | transform: translateY(-10px) scale(1.1); 823 | z-index: 5; 824 | } 825 | 826 | /* Reset the hover for the offset items to maintain diamond pattern */ 827 | .tech-certifications .cert-item:nth-child(4n-2):hover, 828 | .tech-certifications .cert-item:nth-child(4n-1):hover { 829 | transform: translateY(-10px) scale(1.1); 830 | } 831 | 832 | .cert-logo { 833 | width: 60px; 834 | height: 60px; 835 | filter: grayscale(20%); /* Consistent styling */ 836 | opacity: 0.9; 837 | transition: all 0.3s ease; 838 | background-color: rgba(255, 255, 255, 0.05); 839 | border-radius: 12px; 840 | padding: 10px; 841 | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 842 | transform-style: preserve-3d; 843 | } 844 | 845 | .cert-item:hover .cert-logo { 846 | filter: grayscale(0%); 847 | opacity: 1; 848 | box-shadow: 0 8px 16px rgba(109, 142, 255, 0.2); 849 | background-color: rgba(255, 255, 255, 0.08); 850 | transform: translateZ(20px) rotateY(10deg); 851 | } 852 | 853 | .cert-item::before { 854 | content: ''; 855 | position: absolute; 856 | width: 100%; 857 | height: 100%; 858 | background: radial-gradient(circle at center, rgba(109, 142, 255, 0.1), transparent 70%); 859 | top: 0; 860 | left: 0; 861 | opacity: 0; 862 | transition: opacity 0.3s ease; 863 | border-radius: 12px; 864 | pointer-events: none; 865 | z-index: -1; 866 | } 867 | 868 | .cert-item:hover::before { 869 | opacity: 1; 870 | } 871 | 872 | .cert-item:hover::after { 873 | content: attr(data-tooltip); 874 | position: absolute; 875 | top: -40px; 876 | left: 50%; 877 | transform: translateX(-50%); 878 | background-color: var(--primary-color); 879 | color: white; 880 | padding: 6px 12px; 881 | border-radius: 4px; 882 | font-size: 0.8rem; 883 | white-space: nowrap; 884 | opacity: 0; 885 | animation: fadeIn 0.3s forwards; 886 | z-index: 10; 887 | box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); 888 | } 889 | 890 | @keyframes fadeIn { 891 | to { 892 | opacity: 1; 893 | } 894 | } 895 | 896 | /* Enable title tooltip on hover via JavaScript for better UX */ 897 | .cert-item img { 898 | cursor: pointer; 899 | } 900 | 901 | @media (max-width: 768px) { 902 | .tech-certifications { 903 | grid-template-columns: repeat(3, 1fr); 904 | gap: 2rem; 905 | } 906 | 907 | /* Reset diamond pattern on tablets */ 908 | .tech-certifications .cert-item:nth-child(4n-2), 909 | .tech-certifications .cert-item:nth-child(4n-1) { 910 | transform: translateY(0); 911 | } 912 | 913 | /* Create new diamond pattern for 3 column layout */ 914 | .tech-certifications .cert-item:nth-child(3n-1) { 915 | transform: translateY(1.5rem); 916 | } 917 | 918 | .tech-certifications .cert-item:nth-child(3n-1):hover { 919 | transform: translateY(-10px) scale(1.1); 920 | } 921 | } 922 | 923 | @media (max-width: 576px) { 924 | .course-work { 925 | padding: 2rem 0.5rem; 926 | } 927 | 928 | .tech-certifications { 929 | grid-template-columns: repeat(2, 1fr); 930 | gap: 1.5rem; 931 | } 932 | 933 | /* Reset all offset patterns */ 934 | .tech-certifications .cert-item:nth-child(4n-2), 935 | .tech-certifications .cert-item:nth-child(4n-1), 936 | .tech-certifications .cert-item:nth-child(3n-1) { 937 | transform: translateY(0); 938 | } 939 | 940 | .cert-logo { 941 | width: 50px; 942 | height: 50px; 943 | padding: 8px; 944 | } 945 | 946 | .section-title { 947 | margin-bottom: 0.3rem; 948 | } 949 | } 950 | 951 | /* Projects section */ 952 | .projects { 953 | padding: 5rem 1rem; 954 | padding-top: 120px; /* Extra padding for fixed header */ 955 | background-color: var(--light-gray); 956 | } 957 | 958 | .project-grid { 959 | max-width: 1200px; 960 | margin: 3rem auto 0; 961 | display: grid; 962 | grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 963 | gap: 2rem; 964 | } 965 | 966 | .project-card { 967 | background-color: var(--bg-color); 968 | border-radius: 8px; 969 | overflow: hidden; 970 | box-shadow: var(--shadow); 971 | transition: transform 0.3s ease, box-shadow 0.3s ease; 972 | padding: 1.5rem; 973 | display: flex; 974 | flex-direction: column; 975 | } 976 | 977 | .project-card:hover { 978 | transform: translateY(-10px); 979 | box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); 980 | } 981 | 982 | .project-card h3 { 983 | font-size: 1.5rem; 984 | margin-bottom: 0.8rem; 985 | color: var(--text-color); 986 | } 987 | 988 | .project-card p { 989 | margin-bottom: 1.5rem; 990 | color: var(--text-secondary); 991 | flex-grow: 1; 992 | } 993 | 994 | .project-links { 995 | display: flex; 996 | gap: 1rem; 997 | margin-top: auto; 998 | } 999 | 1000 | .project-links .btn { 1001 | padding: 0.5rem 1rem; 1002 | font-size: 0.9rem; 1003 | } 1004 | 1005 | .loading { 1006 | text-align: center; 1007 | padding: 2rem; 1008 | color: var(--text-secondary); 1009 | } 1010 | 1011 | /* Coding Profiles Section */ 1012 | .coding-profiles { 1013 | padding: 5rem 1rem; 1014 | padding-top: 120px; /* Extra padding for fixed header */ 1015 | background-color: var(--bg-color); 1016 | } 1017 | 1018 | .profiles-container { 1019 | max-width: 1000px; 1020 | margin: 3rem auto; 1021 | display: flex; 1022 | justify-content: center; 1023 | align-items: center; 1024 | gap: 5rem; 1025 | } 1026 | 1027 | .profile-link { 1028 | display: flex; 1029 | flex-direction: column; 1030 | align-items: center; 1031 | text-decoration: none; 1032 | color: var(--text-color); 1033 | transition: transform 0.3s ease; 1034 | } 1035 | 1036 | .profile-link:hover { 1037 | transform: translateY(-10px); 1038 | } 1039 | 1040 | .profile-logo { 1041 | width: 70px; 1042 | height: 70px; 1043 | margin-bottom: 1rem; 1044 | object-fit: contain; 1045 | transition: transform 0.3s ease; 1046 | } 1047 | 1048 | /* Specific logo styling */ 1049 | .github-logo { 1050 | background-color: #fff; 1051 | border-radius: 50%; 1052 | padding: 5px; 1053 | } 1054 | 1055 | .leetcode-logo { 1056 | border-radius: 10px; 1057 | } 1058 | 1059 | .codeforces-logo { 1060 | border-radius: 10px; 1061 | } 1062 | 1063 | .profile-link span { 1064 | font-size: 1.1rem; 1065 | font-weight: 500; 1066 | letter-spacing: 0.5px; 1067 | margin-top: 0.5rem; 1068 | color: #fff; 1069 | } 1070 | 1071 | /* Media query for smaller screens */ 1072 | @media (max-width: 768px) { 1073 | .profiles-container { 1074 | gap: 3rem; 1075 | flex-wrap: wrap; 1076 | } 1077 | 1078 | .profile-logo { 1079 | width: 60px; 1080 | height: 60px; 1081 | } 1082 | } 1083 | 1084 | @media (max-width: 576px) { 1085 | .profiles-container { 1086 | gap: 2rem; 1087 | } 1088 | 1089 | .profile-logo { 1090 | width: 50px; 1091 | height: 50px; 1092 | } 1093 | } 1094 | 1095 | /* Featured Project Section */ 1096 | .featured-project { 1097 | padding: 5rem 1rem; 1098 | padding-top: 120px; /* Extra padding for fixed header */ 1099 | background-color: var(--bg-color); 1100 | } 1101 | 1102 | .featured-project-container { 1103 | max-width: 1000px; 1104 | margin: 3rem auto 0; 1105 | position: relative; 1106 | } 1107 | 1108 | /* Project Slider Styles */ 1109 | .featured-project-slider { 1110 | width: 100%; 1111 | overflow: hidden; 1112 | position: relative; 1113 | display: flex; 1114 | transition: transform 0.5s ease; 1115 | } 1116 | 1117 | .project-card { 1118 | flex: 0 0 100%; 1119 | background-color: rgba(255, 255, 255, 0.03); 1120 | border-radius: 12px; 1121 | box-shadow: var(--shadow); 1122 | margin-bottom: 2rem; 1123 | overflow: hidden; 1124 | position: relative; 1125 | transition: all 0.3s ease; 1126 | } 1127 | 1128 | .project-card:not(:first-child) { 1129 | display: none; 1130 | } 1131 | 1132 | .project-preview { 1133 | padding: 2rem; 1134 | cursor: pointer; 1135 | position: relative; 1136 | border-bottom: 1px solid rgba(255, 255, 255, 0.05); 1137 | display: flex; 1138 | flex-direction: column; 1139 | align-items: center; 1140 | text-align: center; 1141 | background: linear-gradient(to bottom, rgba(255, 255, 255, 0.05), transparent); 1142 | } 1143 | 1144 | .project-preview h3 { 1145 | font-size: 1.8rem; 1146 | margin-bottom: 1rem; 1147 | color: var(--primary-color); 1148 | transition: color 0.3s ease; 1149 | } 1150 | 1151 | .project-details { 1152 | padding: 0 2rem 2rem; 1153 | display: none; 1154 | animation: fadeInUp 0.5s ease forwards; 1155 | } 1156 | 1157 | .project-details h3 { 1158 | font-size: 1.6rem; 1159 | margin-bottom: 1rem; 1160 | color: var(--primary-color); 1161 | margin-top: 2rem; 1162 | } 1163 | 1164 | .award-badge { 1165 | display: inline-block; 1166 | color: #ffcc00; 1167 | padding: 0.5rem 0; 1168 | font-size: 0.95rem; 1169 | margin-bottom: 1.5rem; 1170 | font-weight: 500; 1171 | } 1172 | 1173 | .project-description { 1174 | color: var(--text-secondary); 1175 | margin-bottom: 1.5rem; 1176 | font-size: 1.1rem; 1177 | line-height: 1.7; 1178 | } 1179 | 1180 | .expand-btn, .collapse-btn { 1181 | background: none; 1182 | border: none; 1183 | color: var(--primary-color); 1184 | font-size: 1.2rem; 1185 | cursor: pointer; 1186 | margin-top: 1rem; 1187 | padding: 0.5rem; 1188 | border-radius: 50%; 1189 | width: 40px; 1190 | height: 40px; 1191 | display: flex; 1192 | align-items: center; 1193 | justify-content: center; 1194 | transition: all 0.3s ease; 1195 | background-color: rgba(255, 255, 255, 0.05); 1196 | } 1197 | 1198 | .expand-btn:hover, .collapse-btn:hover { 1199 | background-color: var(--primary-color); 1200 | color: white; 1201 | transform: translateY(-3px); 1202 | } 1203 | 1204 | .slider-controls { 1205 | display: flex; 1206 | justify-content: center; 1207 | align-items: center; 1208 | gap: 1.5rem; 1209 | margin-top: 1rem; 1210 | } 1211 | 1212 | .slider-btn { 1213 | background: none; 1214 | border: none; 1215 | color: var(--text-color); 1216 | font-size: 1.2rem; 1217 | cursor: pointer; 1218 | padding: 0.5rem; 1219 | border-radius: 50%; 1220 | width: 40px; 1221 | height: 40px; 1222 | display: flex; 1223 | align-items: center; 1224 | justify-content: center; 1225 | transition: all 0.3s ease; 1226 | background-color: rgba(255, 255, 255, 0.05); 1227 | } 1228 | 1229 | .slider-btn:hover { 1230 | background-color: var(--primary-color); 1231 | color: white; 1232 | transform: translateY(-2px); 1233 | } 1234 | 1235 | .slider-dots { 1236 | display: flex; 1237 | gap: 0.5rem; 1238 | align-items: center; 1239 | } 1240 | 1241 | .dot { 1242 | width: 10px; 1243 | height: 10px; 1244 | border-radius: 50%; 1245 | background-color: var(--light-gray); 1246 | cursor: pointer; 1247 | transition: all 0.3s ease; 1248 | } 1249 | 1250 | .dot.active { 1251 | background-color: var(--primary-color); 1252 | transform: scale(1.2); 1253 | } 1254 | 1255 | @keyframes fadeInUp { 1256 | from { 1257 | opacity: 0; 1258 | transform: translateY(20px); 1259 | } 1260 | to { 1261 | opacity: 1; 1262 | transform: translateY(0); 1263 | } 1264 | } 1265 | 1266 | /* Fix Button Styling */ 1267 | .btn { 1268 | display: inline-block; 1269 | padding: 0.8rem 1.8rem; 1270 | background-color: var(--primary-color); 1271 | color: white; 1272 | border-radius: 50px; 1273 | transition: all 0.3s ease; 1274 | border: none; 1275 | cursor: pointer; 1276 | font-size: 0.95rem; 1277 | text-align: center; 1278 | font-weight: 500; 1279 | letter-spacing: 0.5px; 1280 | box-shadow: 0 4px 12px rgba(109, 142, 255, 0.2); 1281 | position: relative; 1282 | overflow: hidden; 1283 | } 1284 | 1285 | .btn:hover { 1286 | background-color: var(--secondary-color); 1287 | transform: translateY(-3px); 1288 | box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); 1289 | } 1290 | 1291 | .btn:active { 1292 | transform: translateY(-1px); 1293 | box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); 1294 | } 1295 | 1296 | .btn::after { 1297 | content: ''; 1298 | position: absolute; 1299 | top: 50%; 1300 | left: 50%; 1301 | width: 120%; 1302 | height: 120%; 1303 | background: rgba(255, 255, 255, 0.1); 1304 | border-radius: 50%; 1305 | transform: translate(-50%, -50%) scale(0); 1306 | opacity: 0; 1307 | transition: transform 0.4s ease, opacity 0.3s ease; 1308 | } 1309 | 1310 | .btn:hover::after { 1311 | transform: translate(-50%, -50%) scale(1); 1312 | opacity: 1; 1313 | } 1314 | 1315 | .project-links .btn { 1316 | padding: 0.7rem 1.6rem; 1317 | font-size: 0.9rem; 1318 | margin-top: 0.5rem; 1319 | } 1320 | 1321 | /* Media Queries */ 1322 | 1323 | /* Media Queries */ 1324 | 1325 | /* Internships Section */ 1326 | .internships { 1327 | padding: 5rem 1rem; 1328 | padding-top: 120px; /* Extra padding for fixed header */ 1329 | background-color: var(--bg-color); /* Changed to match main background */ 1330 | position: relative; 1331 | } 1332 | 1333 | .internships-container { 1334 | max-width: 1000px; 1335 | margin: 3rem auto 0; 1336 | display: flex; 1337 | flex-direction: column; 1338 | gap: 2.5rem; 1339 | } 1340 | 1341 | .internship-card { 1342 | background-color: var(--bg-color); 1343 | border-radius: 12px; 1344 | overflow: hidden; 1345 | box-shadow: var(--shadow); 1346 | display: flex; 1347 | transition: transform 0.3s ease, box-shadow 0.3s ease; 1348 | position: relative; 1349 | } 1350 | 1351 | .internship-card:hover { 1352 | transform: translateY(-10px); 1353 | box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); 1354 | } 1355 | 1356 | .company-logo { 1357 | flex: 0 0 180px; 1358 | padding: 1.5rem; 1359 | display: flex; 1360 | align-items: center; 1361 | justify-content: center; 1362 | background-color: rgba(255, 255, 255, 0.03); 1363 | border-right: 1px solid rgba(255, 255, 255, 0.05); 1364 | } 1365 | 1366 | .styled-logo { 1367 | display: flex; 1368 | flex-direction: column; 1369 | align-items: center; 1370 | justify-content: center; 1371 | width: 120px; 1372 | height: 120px; 1373 | border-radius: 12px; 1374 | overflow: hidden; 1375 | background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); 1376 | box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); 1377 | transition: all 0.3s ease; 1378 | padding: 1rem; 1379 | text-align: center; 1380 | } 1381 | 1382 | .nms-logo { 1383 | background: linear-gradient(135deg, #3d4b75, #6d8eff); 1384 | } 1385 | 1386 | .ineuron-logo { 1387 | background: linear-gradient(135deg, #0f2027, #203a43, #2c5364); 1388 | } 1389 | 1390 | .logo-text { 1391 | font-size: 2rem; 1392 | font-weight: 700; 1393 | color: white; 1394 | letter-spacing: 1px; 1395 | margin-bottom: 0.3rem; 1396 | text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); 1397 | } 1398 | 1399 | .logo-subtext { 1400 | font-size: 0.9rem; 1401 | font-weight: 400; 1402 | color: rgba(255, 255, 255, 0.9); 1403 | letter-spacing: 0.5px; 1404 | } 1405 | 1406 | .internship-card:hover .styled-logo { 1407 | transform: scale(1.05); 1408 | box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3); 1409 | } 1410 | 1411 | .company-img { 1412 | width: 100%; 1413 | max-width: 120px; 1414 | height: auto; 1415 | object-fit: contain; 1416 | filter: grayscale(20%); 1417 | transition: filter 0.3s ease; 1418 | } 1419 | 1420 | .internship-card:hover .company-img { 1421 | filter: grayscale(0%); 1422 | } 1423 | 1424 | .internship-details { 1425 | flex: 1; 1426 | padding: 1.5rem 2rem; 1427 | } 1428 | 1429 | .internship-details h3 { 1430 | font-size: 1.5rem; 1431 | margin-bottom: 0.5rem; 1432 | color: var(--primary-color); 1433 | display: flex; 1434 | align-items: center; 1435 | flex-wrap: wrap; 1436 | gap: 1rem; 1437 | } 1438 | 1439 | .internship-tag { 1440 | font-size: 0.8rem; 1441 | font-weight: 500; 1442 | padding: 0.2rem 0.8rem; 1443 | background-color: var(--secondary-color); 1444 | color: white; 1445 | border-radius: 20px; 1446 | display: inline-block; 1447 | } 1448 | 1449 | .company-name { 1450 | font-size: 1.1rem; 1451 | color: var(--text-secondary); 1452 | margin-bottom: 1rem; 1453 | font-weight: 400; 1454 | } 1455 | 1456 | .internship-description { 1457 | margin-bottom: 1.5rem; 1458 | color: var(--text-secondary); 1459 | line-height: 1.6; 1460 | } 1461 | 1462 | .internship-links { 1463 | display: flex; 1464 | gap: 1rem; 1465 | margin-top: 1.5rem; 1466 | } 1467 | 1468 | @media (max-width: 768px) { 1469 | .internship-card { 1470 | flex-direction: column; 1471 | } 1472 | 1473 | .company-logo { 1474 | flex: 0; 1475 | padding: 2rem; 1476 | border-right: none; 1477 | border-bottom: 1px solid rgba(255, 255, 255, 0.05); 1478 | } 1479 | 1480 | .company-img { 1481 | max-width: 100px; 1482 | } 1483 | } 1484 | 1485 | /* Chart and Progress Bar Styles */ 1486 | .leetcode-distribution { 1487 | margin-top: 1.5rem; 1488 | width: 100%; 1489 | } 1490 | 1491 | .difficulty-bar { 1492 | margin-bottom: 1rem; 1493 | } 1494 | 1495 | .difficulty-label { 1496 | font-size: 0.9rem; 1497 | margin-bottom: 0.3rem; 1498 | color: var(--text-secondary); 1499 | display: block; 1500 | } 1501 | 1502 | .progress-container { 1503 | background-color: var(--light-gray); 1504 | border-radius: 20px; 1505 | height: 10px; 1506 | position: relative; 1507 | overflow: hidden; 1508 | width: 100%; 1509 | } 1510 | 1511 | .progress-bar { 1512 | height: 100%; 1513 | border-radius: 20px; 1514 | transition: width 1s ease; 1515 | } 1516 | 1517 | .progress-bar.easy { 1518 | background-color: var(--easy-color); 1519 | } 1520 | 1521 | .progress-bar.medium { 1522 | background-color: var(--medium-color); 1523 | } 1524 | 1525 | .progress-bar.hard { 1526 | background-color: var(--hard-color); 1527 | } 1528 | 1529 | .progress-text { 1530 | position: absolute; 1531 | right: 5px; 1532 | top: -20px; 1533 | font-size: 0.8rem; 1534 | color: var(--text-secondary); 1535 | } 1536 | 1537 | /* Chart containers */ 1538 | .chart-container { 1539 | width: 100%; 1540 | height: 150px; 1541 | background-color: rgba(255, 255, 255, 0.05); 1542 | border-radius: 8px; 1543 | margin-top: 1.5rem; 1544 | display: flex; 1545 | align-items: center; 1546 | justify-content: center; 1547 | color: var(--text-secondary); 1548 | } 1549 | 1550 | /* GitHub Stats Section */ 1551 | .github-stats { 1552 | padding: 5rem 1rem; 1553 | padding-top: 120px; /* Extra padding for fixed header */ 1554 | background-color: var(--bg-color); 1555 | } 1556 | 1557 | .github-stats-container { 1558 | max-width: 1000px; 1559 | margin: 3rem auto 0; 1560 | } 1561 | 1562 | .github-readme-stats { 1563 | display: flex; 1564 | flex-wrap: wrap; 1565 | justify-content: center; 1566 | gap: 2rem; 1567 | margin-bottom: 2rem; 1568 | } 1569 | 1570 | .github-stats-card-img { 1571 | border-radius: 12px; 1572 | box-shadow: var(--shadow); 1573 | transition: transform 0.3s ease, box-shadow 0.3s ease; 1574 | max-width: 100%; 1575 | height: auto; 1576 | } 1577 | 1578 | .github-stats-card-img:hover { 1579 | transform: translateY(-8px); 1580 | box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3); 1581 | } 1582 | 1583 | @media (max-width: 768px) { 1584 | .github-readme-stats { 1585 | flex-direction: column; 1586 | align-items: center; 1587 | } 1588 | 1589 | .github-stats-card-img { 1590 | max-width: 100%; 1591 | } 1592 | } 1593 | 1594 | /* Coding Profiles Section */ 1595 | @media (max-width: 992px) { 1596 | .hero-content { 1597 | grid-template-columns: 1fr; 1598 | text-align: center; 1599 | } 1600 | 1601 | .hero-text { 1602 | text-align: center; 1603 | } 1604 | 1605 | .hero-buttons { 1606 | justify-content: center; 1607 | } 1608 | } 1609 | 1610 | /* Mobile menu animations and styling */ 1611 | @media (max-width: 768px) { 1612 | .menu-toggle { 1613 | display: flex; 1614 | } 1615 | 1616 | .section-title { 1617 | font-size: 2rem; 1618 | } 1619 | 1620 | .nav-links { 1621 | position: fixed; 1622 | top: 65px; 1623 | left: -100%; 1624 | width: 100%; 1625 | height: calc(100vh - 65px); 1626 | background-color: rgba(17, 17, 17, 0.98); 1627 | flex-direction: column; 1628 | align-items: center; 1629 | justify-content: flex-start; 1630 | padding-top: 2rem; 1631 | transition: all 0.4s cubic-bezier(0.77, 0.2, 0.05, 1.0); 1632 | z-index: 99; 1633 | backdrop-filter: blur(10px); 1634 | -webkit-backdrop-filter: blur(10px); 1635 | } 1636 | 1637 | .nav-links.active { 1638 | left: 0; 1639 | box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); 1640 | } 1641 | 1642 | .nav-links li { 1643 | margin: 0; 1644 | width: 80%; 1645 | opacity: 0; 1646 | transform: translateY(20px); 1647 | transition: opacity 0.4s ease, transform 0.4s ease; 1648 | transition-delay: 0.1s; 1649 | } 1650 | 1651 | .nav-links.active li { 1652 | opacity: 1; 1653 | transform: translateY(0); 1654 | } 1655 | 1656 | .nav-links li:nth-child(2) { 1657 | transition-delay: 0.15s; 1658 | } 1659 | 1660 | .nav-links li:nth-child(3) { 1661 | transition-delay: 0.2s; 1662 | } 1663 | 1664 | .nav-links li:nth-child(4) { 1665 | transition-delay: 0.25s; 1666 | } 1667 | 1668 | .nav-links li:nth-child(5) { 1669 | transition-delay: 0.3s; 1670 | } 1671 | 1672 | .nav-links li:nth-child(6) { 1673 | transition-delay: 0.35s; 1674 | } 1675 | 1676 | .nav-links li:nth-child(7) { 1677 | transition-delay: 0.4s; 1678 | } 1679 | 1680 | .nav-links a { 1681 | display: block; 1682 | padding: 1rem 0; 1683 | text-align: center; 1684 | font-size: 1.1rem; 1685 | width: 100%; 1686 | border-bottom: 1px solid rgba(255, 255, 255, 0.05); 1687 | } 1688 | 1689 | .nav-links a:after { 1690 | bottom: -2px; 1691 | } 1692 | 1693 | /* Hamburger Icon Animation */ 1694 | .menu-toggle { 1695 | position: relative; 1696 | } 1697 | 1698 | .menu-toggle i { 1699 | transition: all 0.3s ease; 1700 | } 1701 | 1702 | .menu-toggle.active i.fa-bars { 1703 | transform: rotate(90deg); 1704 | opacity: 0; 1705 | } 1706 | 1707 | .menu-toggle.active:before { 1708 | content: '\f00d'; 1709 | font-family: 'Font Awesome 5 Free'; 1710 | font-weight: 900; 1711 | position: absolute; 1712 | font-size: 1.5rem; 1713 | color: var(--primary-color); 1714 | animation: rotateIn 0.3s ease; 1715 | } 1716 | 1717 | @keyframes rotateIn { 1718 | from { 1719 | transform: rotate(-90deg); 1720 | opacity: 0; 1721 | } 1722 | to { 1723 | transform: rotate(0); 1724 | opacity: 1; 1725 | } 1726 | } 1727 | 1728 | /* Restore other mobile styles */ 1729 | .hero h1 { 1730 | font-size: 2.5rem; 1731 | } 1732 | 1733 | .hero h2 { 1734 | font-size: 1.5rem; 1735 | } 1736 | 1737 | .hero-image { 1738 | margin-top: 2rem; 1739 | } 1740 | 1741 | .profile-img-placeholder { 1742 | width: 200px; 1743 | height: 200px; 1744 | } 1745 | 1746 | .tech-stack { 1747 | justify-content: center; 1748 | } 1749 | } 1750 | 1751 | @media (max-width: 576px) { 1752 | .section-title { 1753 | font-size: 1.8rem; 1754 | } 1755 | 1756 | .hero h1 { 1757 | font-size: 2rem; 1758 | } 1759 | 1760 | .hero h2 { 1761 | font-size: 1.2rem; 1762 | } 1763 | 1764 | .hero p { 1765 | font-size: 1rem; 1766 | } 1767 | 1768 | .about-text p { 1769 | font-size: 1rem; 1770 | } 1771 | 1772 | .profile-img-placeholder { 1773 | width: 180px; 1774 | height: 180px; 1775 | } 1776 | } 1777 | 1778 | /* News Section */ 1779 | .news-section { 1780 | width: 100%; 1781 | background-color: rgba(25, 25, 35, 0.95); 1782 | padding: 25px 0; 1783 | border-top: 1px solid rgba(255, 255, 255, 0.05); 1784 | border-bottom: 1px solid rgba(255, 255, 255, 0.05); 1785 | box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2); 1786 | } 1787 | 1788 | .news-header { 1789 | text-align: center; 1790 | margin-bottom: 20px; 1791 | } 1792 | 1793 | .news-header h3 { 1794 | display: inline-block; 1795 | background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); 1796 | color: white; 1797 | padding: 8px 25px; 1798 | border-radius: 30px; 1799 | font-size: 1.2rem; 1800 | font-weight: 600; 1801 | text-transform: uppercase; 1802 | letter-spacing: 1px; 1803 | box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); 1804 | } 1805 | 1806 | .news-items { 1807 | max-width: 1000px; 1808 | margin: 0 auto; 1809 | padding: 0 20px; 1810 | display: flex; 1811 | flex-direction: column; 1812 | gap: 15px; 1813 | } 1814 | 1815 | .news-item { 1816 | display: flex; 1817 | align-items: center; 1818 | background-color: rgba(255, 255, 255, 0.03); 1819 | border-radius: 8px; 1820 | padding: 15px; 1821 | transition: transform 0.3s ease, box-shadow 0.3s ease; 1822 | border-left: 3px solid var(--primary-color); 1823 | } 1824 | 1825 | .news-item:hover { 1826 | transform: translateY(-3px); 1827 | box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); 1828 | background-color: rgba(255, 255, 255, 0.05); 1829 | } 1830 | 1831 | .news-item i { 1832 | font-size: 1.4rem; 1833 | color: var(--accent-color); 1834 | margin-right: 15px; 1835 | } 1836 | 1837 | .news-content { 1838 | flex: 1; 1839 | display: flex; 1840 | justify-content: space-between; 1841 | align-items: center; 1842 | flex-wrap: wrap; 1843 | gap: 10px; 1844 | } 1845 | 1846 | .news-content p { 1847 | margin: 0; 1848 | font-size: 1rem; 1849 | color: var(--text-color); 1850 | } 1851 | 1852 | .news-date { 1853 | font-size: 0.85rem; 1854 | background-color: rgba(255, 255, 255, 0.05); 1855 | padding: 3px 10px; 1856 | border-radius: 20px; 1857 | color: var(--text-secondary); 1858 | white-space: nowrap; 1859 | } 1860 | 1861 | .news-item a { 1862 | color: var(--primary-color); 1863 | text-decoration: none; 1864 | transition: color 0.2s ease, text-decoration 0.2s ease; 1865 | } 1866 | 1867 | .news-item a:hover { 1868 | color: var(--accent-color); 1869 | text-decoration: underline; 1870 | } 1871 | 1872 | @media (max-width: 768px) { 1873 | .news-content { 1874 | flex-direction: column; 1875 | align-items: flex-start; 1876 | } 1877 | 1878 | .news-item { 1879 | padding: 12px; 1880 | } 1881 | 1882 | .news-date { 1883 | align-self: flex-start; 1884 | } 1885 | } 1886 | 1887 | @media (max-width: 480px) { 1888 | .news-item i { 1889 | font-size: 1.2rem; 1890 | margin-right: 10px; 1891 | } 1892 | 1893 | .news-content p { 1894 | font-size: 0.9rem; 1895 | } 1896 | } 1897 | 1898 | /* Modal Styles */ 1899 | .modal { 1900 | display: none; 1901 | position: fixed; 1902 | z-index: 1000; 1903 | left: 0; 1904 | top: 0; 1905 | width: 100%; 1906 | height: 100%; 1907 | overflow: auto; 1908 | background-color: rgba(0, 0, 0, 0.8); 1909 | backdrop-filter: blur(5px); 1910 | opacity: 0; 1911 | transition: opacity 0.3s ease; 1912 | } 1913 | 1914 | .modal.show { 1915 | display: block; 1916 | opacity: 1; 1917 | } 1918 | 1919 | .modal-content { 1920 | background-color: var(--card-bg); 1921 | margin: 5vh auto; 1922 | width: 90%; 1923 | max-width: 1000px; 1924 | border-radius: 10px; 1925 | box-shadow: 0 5px 30px rgba(0, 0, 0, 0.5); 1926 | animation: modalFadeIn 0.5s ease; 1927 | max-height: 90vh; 1928 | display: flex; 1929 | flex-direction: column; 1930 | } 1931 | 1932 | .modal-header { 1933 | padding: 20px 25px; 1934 | display: flex; 1935 | justify-content: space-between; 1936 | align-items: center; 1937 | border-bottom: 1px solid rgba(255, 255, 255, 0.1); 1938 | } 1939 | 1940 | .modal-header h2 { 1941 | margin: 0; 1942 | color: var(--primary-color); 1943 | font-size: 1.5rem; 1944 | } 1945 | 1946 | .close-modal { 1947 | color: var(--text-secondary); 1948 | font-size: 28px; 1949 | font-weight: bold; 1950 | cursor: pointer; 1951 | transition: all 0.3s ease; 1952 | } 1953 | 1954 | .close-modal:hover { 1955 | color: var(--accent-color); 1956 | transform: scale(1.1); 1957 | } 1958 | 1959 | .modal-body { 1960 | padding: 20px 25px; 1961 | overflow-y: auto; 1962 | flex: 1; 1963 | } 1964 | 1965 | .modal-footer { 1966 | padding: 10px 25px; 1967 | text-align: center; 1968 | border-top: 1px solid rgba(255, 255, 255, 0.1); 1969 | color: var(--text-secondary); 1970 | font-size: 0.9rem; 1971 | } 1972 | 1973 | .table-container { 1974 | width: 100%; 1975 | overflow-x: auto; 1976 | } 1977 | 1978 | .events-table { 1979 | width: 100%; 1980 | border-collapse: separate; 1981 | border-spacing: 0; 1982 | } 1983 | 1984 | .events-table th, 1985 | .events-table td { 1986 | padding: 12px 15px; 1987 | text-align: left; 1988 | border-bottom: 1px solid rgba(255, 255, 255, 0.1); 1989 | } 1990 | 1991 | .events-table th { 1992 | background-color: rgba(0, 0, 0, 0.3); 1993 | color: var(--primary-color); 1994 | font-weight: 600; 1995 | text-transform: uppercase; 1996 | font-size: 0.8rem; 1997 | letter-spacing: 1px; 1998 | } 1999 | 2000 | .events-table tr { 2001 | background-color: rgba(255, 255, 255, 0.02); 2002 | transition: background-color 0.3s ease; 2003 | } 2004 | 2005 | .events-table tr:nth-child(odd) { 2006 | background-color: rgba(255, 255, 255, 0.04); 2007 | } 2008 | 2009 | .events-table tr:hover { 2010 | background-color: rgba(255, 255, 255, 0.08); 2011 | } 2012 | 2013 | .events-table td a.btn-sm { 2014 | display: inline-block; 2015 | padding: 5px 12px; 2016 | background-color: var(--primary-color); 2017 | color: white; 2018 | font-size: 0.8rem; 2019 | border-radius: 20px; 2020 | transition: all 0.3s ease; 2021 | text-decoration: none; 2022 | text-align: center; 2023 | } 2024 | 2025 | .events-table td a.btn-sm:hover { 2026 | background-color: var(--accent-color); 2027 | transform: translateY(-2px); 2028 | } 2029 | 2030 | @keyframes modalFadeIn { 2031 | from { 2032 | opacity: 0; 2033 | transform: translateY(-20px); 2034 | } 2035 | to { 2036 | opacity: 1; 2037 | transform: translateY(0); 2038 | } 2039 | } 2040 | 2041 | /* Mobile Optimizations */ 2042 | @media (max-width: 992px) { 2043 | .modal-content { 2044 | width: 95%; 2045 | margin: 3vh auto; 2046 | } 2047 | 2048 | .modal-header h2 { 2049 | font-size: 1.3rem; 2050 | } 2051 | } 2052 | 2053 | @media (max-width: 768px) { 2054 | .news-ticker-label { 2055 | min-width: 120px; 2056 | font-size: 0.8rem; 2057 | padding: 12px 15px; 2058 | } 2059 | 2060 | .ticker-item { 2061 | font-size: 0.9rem; 2062 | } 2063 | 2064 | .events-table th, 2065 | .events-table td { 2066 | padding: 10px; 2067 | font-size: 0.9rem; 2068 | } 2069 | 2070 | /* Stack columns on mobile */ 2071 | .events-table thead { 2072 | display: none; 2073 | } 2074 | 2075 | .events-table tr { 2076 | margin-bottom: 15px; 2077 | display: block; 2078 | border: 1px solid rgba(255, 255, 255, 0.1); 2079 | border-radius: 8px; 2080 | padding: 10px; 2081 | } 2082 | 2083 | .events-table td { 2084 | display: flex; 2085 | text-align: right; 2086 | padding: 8px 10px; 2087 | border-bottom: 1px solid rgba(255, 255, 255, 0.05); 2088 | } 2089 | 2090 | .events-table td:last-child { 2091 | border-bottom: none; 2092 | } 2093 | 2094 | .events-table td::before { 2095 | content: attr(data-label); 2096 | font-weight: bold; 2097 | text-align: left; 2098 | color: var(--primary-color); 2099 | padding-right: 10px; 2100 | flex: 1; 2101 | } 2102 | } 2103 | 2104 | @media (max-width: 480px) { 2105 | .news-ticker-container { 2106 | flex-direction: column; 2107 | } 2108 | 2109 | .news-ticker-label { 2110 | width: 100%; 2111 | padding: 15px 20px; 2112 | position: relative; 2113 | z-index: 20; 2114 | border-radius: 0; 2115 | min-height: 48px; /* Ensure minimum touch target size */ 2116 | touch-action: manipulation; /* Optimize for touch */ 2117 | -webkit-tap-highlight-color: rgba(109, 142, 255, 0.3); /* Add tap highlight */ 2118 | user-select: none; /* Prevent text selection on touch */ 2119 | } 2120 | 2121 | .news-ticker-label::after { 2122 | display: none; 2123 | } 2124 | 2125 | /* Add an explicit tap/click indicator for mobile */ 2126 | .news-ticker-label::before { 2127 | content: '\f0a9'; /* Font Awesome arrow icon */ 2128 | font-family: 'Font Awesome 5 Free'; 2129 | font-weight: 900; 2130 | margin-right: 8px; 2131 | font-size: 0.9rem; 2132 | } 2133 | 2134 | .news-ticker-label span { 2135 | display: flex; 2136 | align-items: center; 2137 | justify-content: center; 2138 | width: 100%; 2139 | pointer-events: none; /* Let parent handle all events */ 2140 | } 2141 | 2142 | /* Improve mobile button interaction */ 2143 | .news-ticker-label:active { 2144 | background: linear-gradient(135deg, var(--secondary-color), var(--primary-color)); 2145 | transform: scale(0.98); 2146 | } 2147 | 2148 | /* Ensure ticker items are visible on mobile */ 2149 | .ticker-item { 2150 | font-size: 0.85rem; 2151 | white-space: normal; 2152 | display: inline-block; 2153 | padding: 5px 0; 2154 | line-height: 1.4; 2155 | } 2156 | 2157 | /* Ensure proper display of ticker content on mobile */ 2158 | .news-ticker { 2159 | padding: 15px 0; 2160 | overflow-x: hidden; 2161 | } 2162 | 2163 | /* Ensure the ticker content stays visible */ 2164 | .news-ticker-content { 2165 | animation-duration: 30s !important; 2166 | display: flex; 2167 | align-items: center; 2168 | } 2169 | 2170 | .modal-content { 2171 | width: 100%; 2172 | height: 100%; 2173 | max-height: none; 2174 | margin: 0; 2175 | border-radius: 0; 2176 | } 2177 | 2178 | .modal-body { 2179 | padding: 15px; 2180 | } 2181 | 2182 | .events-table td { 2183 | font-size: 0.85rem; 2184 | padding: 6px 8px; 2185 | } 2186 | } 2187 | 2188 | /* --- News Ticker Enhancements --- */ 2189 | .animated-badge { 2190 | animation: bellPulse 1.2s infinite alternate; 2191 | color: var(--accent-color); 2192 | margin-left: 6px; 2193 | } 2194 | @keyframes bellPulse { 2195 | 0% { filter: drop-shadow(0 0 0px var(--accent-color)); } 2196 | 100% { filter: drop-shadow(0 0 8px var(--accent-color)); } 2197 | } 2198 | .news-badge { 2199 | display: inline-block; 2200 | background: var(--accent-color); 2201 | color: #fff; 2202 | font-size: 0.7em; 2203 | border-radius: 50%; 2204 | width: 16px; 2205 | height: 16px; 2206 | text-align: center; 2207 | line-height: 16px; 2208 | margin-left: 8px; 2209 | box-shadow: 0 0 8px var(--accent-color); 2210 | animation: badgeGlow 1.5s infinite alternate; 2211 | } 2212 | @keyframes badgeGlow { 2213 | 0% { box-shadow: 0 0 8px var(--accent-color); } 2214 | 100% { box-shadow: 0 0 16px var(--accent-color); } 2215 | } 2216 | .news-logo { 2217 | width: 22px; 2218 | height: 22px; 2219 | object-fit: contain; 2220 | border-radius: 4px; 2221 | margin-right: 8px; 2222 | vertical-align: middle; 2223 | box-shadow: 0 1px 4px rgba(0,0,0,0.10); 2224 | } 2225 | /* --- Modal Enhancements --- */ 2226 | .modal-badge { 2227 | display: inline-block; 2228 | background: var(--accent-color); 2229 | color: #fff; 2230 | font-size: 0.7em; 2231 | border-radius: 12px; 2232 | padding: 2px 10px; 2233 | margin-left: 10px; 2234 | vertical-align: middle; 2235 | animation: badgeGlow 1.5s infinite alternate; 2236 | } 2237 | .news-logo-table { 2238 | width: 18px; 2239 | height: 18px; 2240 | object-fit: contain; 2241 | border-radius: 3px; 2242 | margin-right: 5px; 2243 | vertical-align: middle; 2244 | } 2245 | /* --- Highlight most recent row in modal --- */ 2246 | .highlight-row { 2247 | background: rgba(255, 255, 255, 0.08); 2248 | font-weight: 600; 2249 | border-left: 4px solid var(--accent-color); 2250 | } --------------------------------------------------------------------------------