Skip to content

Commit

Permalink
first commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@SarthakBorude
SarthakBorude committed Aug 7, 2024
0 parents commit 8076363
Show file tree
Hide file tree
Showing 4 changed files with 339 additions and 0 deletions.
69 changes: 69 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
<title>portfolio</title>
</head>
<body>
<header>
<div class="navbar">
<i class='bx bx-menu' id="menu-icon"></i>
<h2>SRTK.</h2>
<ul>
<li><a href="#">home</a></li>
<li><a href="#">stack</a></li>
<li><a href="#">projects</a></li>
<li><a href="#">contact</a></li>
</ul>
</div>
</header>

<div class="container">
<div class="textsection">
<h1>I'm</h1>
<h2>Sarthak Borude</h2>
<p> I'm Sarthak, a passionate third-year engineering student specializing in computers and electronics. I have a strong foundation in programming, circuit design, and system analysis</p>
</div>
<div class="imagesection">
<img src="pfp.jpeg" alt="Sample Image">
</div>
</div>

<div class="social-links">
<div id="twitter" class="social-btn flex-center">
<svg viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"></path></svg><span>@example</span>
</div>

<div id="linkedin" class="social-btn flex-center">
<svg viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M4.98 3.5c0 1.381-1.11 2.5-2.48 2.5s-2.48-1.119-2.48-2.5c0-1.38 1.11-2.5 2.48-2.5s2.48 1.12 2.48 2.5zm.02 4.5h-5v16h5v-16zm7.982 0h-4.968v16h4.969v-8.399c0-4.67 6.029-5.052 6.029 0v8.399h4.988v-10.131c0-7.88-8.922-7.593-11.018-3.714v-2.155z"></path></svg><span>in/example</span>
</div>

<div id="github" class="social-btn flex-center">
<svg viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"></path></svg><span>example</span>
</div>
</div>



</body>
</html>

















Binary file added pfp.jpeg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
33 changes: 33 additions & 0 deletions script.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
let menuIcon = document.querySelector('#menu-icon');
let navbar = document.querySelector('.navbar');

menuIcon.onclick = () => {
menuIcon.classList.toggle('bx bx-x');
navbar.classList.toggle('active');
}

let sections = document.querySelectorAll('section');
let navLinks = document.querySelectorAll('header nav a');

window.onscroll = () => {
sections.forEach(sec => {
let top =window.scrollY;
let offset = sec.offsetTop - 150;
let height = sec.offsetHeight;
let id = sec.getAttribute('id');

if(top >= offset && top < offset + height){
navLinks. forEach.apply(links=> {
links.classList.remove('active');
document.querySelector('header nav a[href*-' + id +']').classList.add('active')

});
};
});

let header= document.querySelector('header');
header.classList.toggle('sticky', window.scrollY > 100);

menuIcon.classList.remove('bx bx-x');
navbar.classList.remove('active');
};
237 changes: 237 additions & 0 deletions style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,237 @@
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Allura&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'poppins', sans-serif ;
scroll-behavior: smooth;
}

body{
height: 100vh;
background-color: white;

}


.navbar h2{
font-size: 3rem;
padding-left: 4rem;
}
.navbar{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 2rem;

}

.navbar ul{
display: flex;
justify-content: space-between;
}

.navbar ul li{
list-style: none;
}

.navbar ul li a{
text-decoration: none;
color: black;
margin-right: 3.2rem;
font-weight: 600;
font-size: 1.2rem;
}

.container{
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.3rem;
}

.textsection {
max-width: 60%;
}

.textsection h1{
font-family: "Allura", cursive;
font-weight: 400;
font-size: 4rem;
font-style: normal;
padding-left: 25rem;
}

.textsection h2{
font-size: 4rem;
padding-left: 12.5rem;
}

.textsection p{
padding-top: 1.2rem;
padding-left: 12.5rem;
}
.imagesection img {
width: 18.8rem;
height: 18.8rem;
border-radius: 50%;
object-fit:cover;
margin-top: 3.2rem;
margin-right: 9.5rem;
}

.socials{
padding-left: 25rem;
}

.socials button {
font-size: 22px;
padding-left: 30px;
padding-right: 30px;
border-radius: 50px;
border-color: black;
background-color: white;
cursor: pointer;
}


.social-links,.flex-center {
display: flex;
justify-content: center;
align-items: center;
}

.social-btn {
cursor: pointer;
height: 50px;
width: 50px;
font-family: 'poppins', sans-serif;
color: #333;
border-radius: 10px;
box-shadow: 0px 10px 10px rgba(0,0,0,0.1);
background: white;
margin: 5px;
transition: 0.3s;
justify-content: center;
}

.social-btn svg {
height: 24px;
width: 24px;
}

.social-btn span {
width: 0px;
overflow: hidden;
transition: 0.3s;
text-align: center;
margin-left: 5px;
}

.social-btn:hover {
width: 150px;
border-radius: 5px;
}

.social-btn:hover span {
padding: 2px;
width: 80px;
}

#twitter svg {
fill: #1da1f2;
}

#linkedin svg {
fill: #0e76a8;
}

#github {
fill: #333;
}

#menu-icon{
display:none;
}

@media (max-width: 1200px){
html{
font-size: 55%;
}
}

@media (max-width: 768px){

#menu-icon{
display: block;

}

.navbar ul{
position: absolute;
top: 100%;
left: 0;
width: 100%;
padding: 1rem 3%;
background: white;
border-top: .1rem solid rgba(0,0,0,0.2);
box-shadow: 0 .5rem 1rem rgba(0,0,0,0.1);
display: none;
}

.container{
display: flex;
flex-direction: column;
align-items: center;

}

.imagesection{
width: 100%;
display: flex;
justify-content: center;
margin-bottom: 20px;

}

.imagesection img{

margin-right: 0;
}

.textsection{
width: 100%;
text-align: center;
order: 2;
}
.textsection h1{
padding-left: 0;
}

.textsection h2{
padding-left: 0;
font-size: 3.2rem;
}

.textsection p{
padding-left: 0;
}
}
















0 comments on commit 8076363

Please sign in to comment.