Skip to content

New theme layout changed #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Sant60 merged 3 commits into from
May 5, 2026
Merged

New theme layout changed #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c92906c
Merge pull request #2 from Sant60/blue_Theme
Sant60 May 1, 2026
93b9614
updated the theme design and added globe with technology
santosh01kumar May 5, 2026
d2a2954
Merge branch 'main' of https://github.com/Sant60/MY-Work
santosh01kumar May 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
337 changes: 274 additions & 63 deletions css/style.css
View file
Open in desktop

Large diffs are not rendered by default.

8 changes: 8 additions & 0 deletions img/css3-logo.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/hero-globe-dark.webm
View file
Open in desktop
Binary file not shown.
Binary file added img/hero-globe.webm
View file
Open in desktop
Binary file not shown.
8 changes: 8 additions & 0 deletions img/jquery-logo.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 7 additions & 0 deletions img/mongodb-logo.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed img/profile_pic.jpg
View file
Open in desktop
Binary file not shown.
Binary file added img/profile_pic.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
78 changes: 48 additions & 30 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Santosh Kumar | Front-End Developer</title>
<title>Santosh Kumar</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
Expand All @@ -31,7 +31,7 @@
<div class="navbar-nav ml-auto">
<a data-aos='fade-down' class="nav-item nav-link active" href="#cover">Home</a>
<a data-aos='fade-down' class="nav-item nav-link" href="#about">About</a>
<a data-aos='fade-down' class="nav-item nav-link" href="#tech">Tech</a>
<a data-aos='fade-down' class="nav-item nav-link" href="#tech">Technologies</a>
<a data-aos='fade-down' class="nav-item nav-link" href="#projects">Projects</a>
</div>
<button id="theme-toggle" class="theme-toggle" type="button" aria-label="Switch theme" aria-pressed="false">
Expand All @@ -44,28 +44,42 @@
</nav>
<div id="cover">
<div class="overlay">
<div class="hero-badge" data-aos='fade-down'>AI Inspired Portfolio Experience</div>
<h1 data-aos='fade-left' class="display-1 hero-title">Designing fast, modern web experiences with creative
energy.</h1>
<p data-aos='fade-left' class="hero-text">I'm Santosh Kumar, a frontend-focused developer building polished
interfaces, responsive products, and ambitious ideas with clean code.</p>
<div class="hero-actions" data-aos='fade-up'>
<a href="#projects" class="hero-btn hero-btn-primary">Explore Projects</a>
<a href="./img/Santosh_SDE_Resume.pdf" target="_blank" class="hero-btn hero-btn-secondary">Open
Resume</a>
</div>
<div class="hero-stats" data-aos='fade-up'>
<div class="hero-stat">
<span class="hero-stat-number">Frontend</span>
<span class="hero-stat-label">Responsive UI craft</span>
</div>
<div class="hero-stat">
<span class="hero-stat-number">MERN</span>
<span class="hero-stat-label">Full-stack foundation</span>
<div class="hero-layout">
<div class="hero-copy">
<div class="hero-badge" data-aos='fade-down'> Welcome to Santosh Portfolio</div>
<h1 data-aos='fade-left' class="display-1 hero-title">We create stunning visual apealing web
interfaces</h1>
<p data-aos='fade-left' class="hero-text">Aspiring Software Engineer</p>
<p data-aos='fade-left' class="hero-subtext">Hire me to see my full potential.</p>
<div class="hero-actions" data-aos='fade-up'>
<a href="#projects" class="hero-btn hero-btn-primary">Explore Projects</a>
<a href="./img/Santosh_SDE_Resume.pdf" target="_blank" class="hero-btn hero-btn-secondary">Open
Resume</a>
</div>
<div class="hero-stats" data-aos='fade-up'>
<div class="hero-stat">
<span class="hero-stat-number">Frontend</span>
<span class="hero-stat-label">Responsive UI with better user experience</span>
</div>
<div class="hero-stat">
<span class="hero-stat-number">Backend</span>
<span class="hero-stat-label">The backbone of Webpages.</span>
</div>
<div class="hero-stat">
<span class="hero-stat-number">Database</span>
<span class="hero-stat-label">A system that manage the data of webpages.</span>
</div>
</div>
</div>
<div class="hero-stat">
<span class="hero-stat-number">Creative</span>
<span class="hero-stat-label">Design + code mindset</span>
<div class="hero-media">
<div class="hero-video-shell">
<video class="hero-video hero-video-light" autoplay muted loop playsinline>
<source src="./img/hero-globe.webm" type="video/webm">
</video>
<video class="hero-video hero-video-dark" autoplay muted loop playsinline>
<source src="./img/hero-globe-dark.webm" type="video/webm">
</video>
</div>
</div>
</div>
</div>
Expand All @@ -75,12 +89,12 @@ <h1 data-aos='fade-right' class="section-heading">About Me</h1>
<div class="container py-5">
<div class="intro-shell">
<div class="intro-header text-center">
<div data-aos='fade-up' class="eyebrow">Human creativity meets modern interface engineering</div>
<div data-aos='fade-up' class="eyebrow">Hi, I am </div>
<h1 data-aos='fade-up' class="display-3">Santosh Kumar</h1>
<h1 data-aos='fade-up' class="display-4">
I'm a
<span class="display-4" id="traits"
traits='["Frontend Developer", "Competitive Programmer", "Musician"]'></span>
traits='["Web Developer", "Content Creator", "Singer"]'></span>
</h1>
</div>
<div id="intro" class="pt-5">
Expand Down Expand Up @@ -110,7 +124,8 @@ <h1 data-aos='fade-up' class="display-4">
</div>
<div class="detail-item">
<span class="detail-label">Education</span>
<span class="detail-value">Computer Science & Engineering Undergraduate</span>
<span class="detail-value">B.Tech - Computer Science & Engineering
graduate</span>
</div>
<div class="detail-item">
<span class="detail-label">Institution</span>
Expand Down Expand Up @@ -202,8 +217,7 @@ <h1 class="text-center mt-5 mt-lg-0">My Tech Stack</h1>
<img class="tech-logo" src="https://cdn.svgporn.com/logos/c-plusplus.svg" alt="C++">
<img class="tech-logo" src="https://cdn.svgporn.com/logos/python.svg" alt="Python">
<img class="tech-logo" src="https://cdn.svgporn.com/logos/html-5.svg" alt="HTML-5">
<img class="tech-logo" src="https://www.vectorlogo.zone/logos/w3_css/w3_css-official.svg"
alt="CSS-3">
<img class="tech-logo" src="./img/css3-logo.svg" alt="CSS3">
<img class="tech-logo tech-logo-sm" src="https://cdn.svgporn.com/logos/bootstrap.svg"
alt="Bootstrap">
<img class="tech-logo tech-logo-sm" src="https://cdn.svgporn.com/logos/javascript.svg"
Expand All @@ -212,10 +226,14 @@ <h1 class="text-center mt-5 mt-lg-0">My Tech Stack</h1>
<img class="tech-logo tech-logo-sm" src="https://cdn.svgporn.com/logos/nodejs.svg" alt="nodeJS">
<!-- <img class="tech-logo tech-logo-sm" src="https://cdn.svgporn.com/logos/firebase.svg"
alt=firebase> -->
<img class="tech-logo" src="https://cdn.svgporn.com/logos/jquery.svg" alt="jquery">
<img class="tech-logo tech-logo-wordmark"
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/jquery/jquery-original-wordmark.svg"
alt="jQuery">

<!-- <img class="tech-logo tech-logo-sm" src="https://cdn.svgporn.com/logos/redux.svg" alt="redux"> -->
<img class="tech-logo" src="https://cdn.svgporn.com/logos/mongodb.svg" alt="mongodb">
<img class="tech-logo tech-logo-wordmark"
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mongodb/mongodb-original-wordmark.svg"
alt="MongoDB">
</div>
</div>
</div>
Expand Down
Loading