Skip to content

made portfolio site nav,footer and experience section mobile responsive #863

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
merged 4 commits into from
Oct 21, 2025
Merged

made portfolio site nav,footer and experience section mobile responsive #863

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
767bb6f
made portfolio site nav,footer and experience section mobile responsive
princekotadia Oct 17, 2025
8e21dec
added hamburger menu
princekotadia Oct 18, 2025
494bb35
hamburger-size-reduced
princekotadia Oct 18, 2025
acb354d
navbar design improved
princekotadia Oct 21, 2025
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
168 changes: 156 additions & 12 deletions Portfoliowebsite/port.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,11 @@ body{
color: aliceblue;
overflow:auto;
}

.components{
display:flex;
list-style: none;

height: 40px;
}
.name{
list-style: none;
Expand All @@ -31,9 +32,12 @@ nav{
height: 3rem;

}
ul li {
margin: auto;
}
ul li a{
margin:5px 10px;
padding:8px;
/* padding:8px; */
font-family: 'Mukta', sans-serif;
color: aliceblue;
text-decoration: none;
Expand Down Expand Up @@ -70,6 +74,7 @@ ul li a:hover{
padding:77px;
height: 290px;
}

.right_section img{
margin-top: -30px;
width:600px;
Expand Down Expand Up @@ -101,7 +106,7 @@ ul li a:hover{
height:540px;
}
.one{
height:65px;
height:40px;
border-left: 3px solid white;
}
.container{
Expand All @@ -119,11 +124,6 @@ ul li a:hover{
font-family: 'Merriweather', serif;

}
.year{

margin:7.5px;
font-family: 'Merriweather', serif;
}

#icon{
margin:8px 0px;
Expand All @@ -144,7 +144,7 @@ ul li a:hover{

}
#vertical{
height: 70px;
height: 50px;
}
.btn{

Expand All @@ -171,12 +171,18 @@ ul li a:hover{
}
.footer{
display:flex;
justify-content: space-evenly;

justify-content: space-around;
position: relative;
}
.service{
display: flex;
gap: 50px;
flex-wrap: wrap;
}
footer{
margin-top: 50px;
background-color: black;
height:140px;
/* height:140px; */
padding: 30px 18px;

}
Expand All @@ -192,3 +198,141 @@ footer{
background-color: blueviolet;
height: 0.1rem;
}

.menu, .hamburger{
display: none;
}

@media (max-width: 950px){
.con{
flex-direction: column;
}

.container{
flex-direction: column;
justify-content: space-around;
}

.exp{
display: flex;
}

.one{
width: 50px;
height: 2px;
background-color: aliceblue;
}

#vertical{
height: auto;
margin: 10px;
}

.Experience{
margin: 40px 100px;
height: auto;
}

.service{
gap: 30px;
}

.box{
display: flex;
justify-content: space-evenly;
}

.components{
font-size: 14px;
}

}

@media (max-width: 650px){
.one{
width: 20px;
height: 2px;
background-color: aliceblue;
}

.Experience{
margin: 40px 60px;
}

.service{
flex-direction: column;
gap: 10px;
}

.box{
justify-content: space-around;
height: 50px;
/* margin-top: 0px; */
}


.components{
display: none;
}

.menu {
display: block;
}

.hamburger{
display: inline;
}

.hamburger {
position: fixed;
/* a large z-index puts the ham button above the rest of the page*/
z-index: 99;
background: transparent;
border: none;
cursor: pointer;
top: 1rem;
right: 1rem;
}

.menu {
position: fixed;
/* give the menu a larger z-index than the ham link
to put the menu above it */
z-index: 100;
top: 0;
left: 40;
right: 0;
bottom: 0;
width: 40%;
height: 70%;
/* basic menu styling*/
list-style: none;
background: rgb(31, 31, 87);
display: flex;

box-shadow: 10px 0px 13px rgb(44, 44, 125);
border-bottom-left-radius: 40px;
flex-direction: column;
/* animate slide up/down */
transform: translateY(-100%);
transition: transform 0.2s ease;
}

.close {
position: absolute;
border: none;
color: white;
cursor: pointer;
top: 1rem;
right: 1rem;
}

.menu:target {
/* show menu */
transform: translateY(0);
}

.service{
display: none;
}
}
120 changes: 71 additions & 49 deletions Portfoliowebsite/port.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,9 @@
<link href="https://fonts.googleapis.com/css2?family=Mukta:wght@700&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@900&display=swap"
rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>

<body>
Expand All @@ -32,6 +34,23 @@


</ul>
<ul class="menu" id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Contact Me</a></li>
<a class="close" href="#">
<span class="material-icons">
close
</span>
</a>
</ul>
<a class="hamburger" href="#menu">
<span class="material-icons">
menu
</span>
</a>
</nav>
</section>

Expand Down Expand Up @@ -65,56 +84,59 @@
What I have done so far
</div>
<h1 class="heading">Work Experience</h1>
<div class="container" id="icon">
<img src="https://img.icons8.com/?size=1x&id=90qJ6Mat3B0I&format=gif" alt="Error" srcset="">
<img src="https://img.icons8.com/?size=1x&id=13912&format=png" alt="Error" srcset="">
<img src="https://img.icons8.com/?size=1x&id=32323&format=png" alt="Error" srcset="">
<img src="https://img.icons8.com/?size=512&id=13963&format=png" alt="Error" srcset="">
<img src="https://img.icons8.com/?size=1x&id=19318&format=png" alt="Error" srcset="">
<img src="https://img.icons8.com/?size=1x&id=22989&format=png" alt="Error" srcset="">
</div>
<hr class="division">
<div class="container" id="vertical">
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
</div>
<div class="con" id="skills">
<div class="units">
<h4>HTML Developer -</h4>
<div class="year">Pinterest (2010-2012)</div>
<p class="p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit odit sapiente vero optio aliquid nesciunt perspiciatis vitae nostrum? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Asperiores, illum vero sed sit tempora voluptatibus! </p>
</div>
<div class="units">
<h4>Web Designer -</h4>
<div class="year">Facebook (2012-2014)</div>
<p class="p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit odit sapiente vero optio aliquid nesciunt perspiciatis vitae nostrum?Lorem ipsum dolor, sit amet consectetur adipisicing elit. Veritatis corporis deleniti officia ipsam placeat.</p>
<div class="exp">
<div class="container" id="icon">
<img src="https://img.icons8.com/?size=1x&id=90qJ6Mat3B0I&format=gif" alt="Error" srcset="">
<img src="https://img.icons8.com/?size=1x&id=13912&format=png" alt="Error" srcset="">
<img src="https://img.icons8.com/?size=1x&id=32323&format=png" alt="Error" srcset="">
<img src="https://img.icons8.com/?size=512&id=13963&format=png" alt="Error" srcset="">
<img src="https://img.icons8.com/?size=1x&id=19318&format=png" alt="Error" srcset="">
<img src="https://img.icons8.com/?size=1x&id=22989&format=png" alt="Error" srcset="">
</div>
<div class="units">
<h4>Frontend Developer-</h4>
<div class="year">Instagram (2014-2015)</div>
<p class="p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit odit sapiente vero optio aliquid nesciunt perspiciatis vitae nostrum? Lorem ipsum dolor sit amet consectetur adipisicing elit. A, ipsa natus eligendi adipisci sapiente ratione?</p>
<!-- <hr class="division"> -->
<div class="container" id="vertical">
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
</div>
<div class="units">
<h4>Node.js Developer -</h4>
<div class="year">Twitter (2015-2016)</div>
<p class="p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit odit sapiente vero optio aliquid nesciunt perspiciatis vitae nostrum? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis blanditiis voluptatum omnis, eum hicdo</p>
</div>
<div class="units">
<h4>FullStack Developer -</h4>
<div class="year">Youtube (2016-2018)</div>
<p class="p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit odit sapiente vero optio aliquid nesciunt perspiciatis vitae nostrum? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellendus, perferendis repudiandae. Quae sit soluta.</p>
</div>
<div class="units">
<h4>Software Developer -</h4>
<div class="year">Microsoft (2018-2023)</div>
<p class="p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit odit sapiente vero optio aliquid nesciunt perspiciatis vitae nostrum? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam dicta illo molestias fuga, laboriosam .</p>
<div class="con" id="skills">
<div class="units">
<h4>HTML Developer -
<span>Pinterest (2010-2012)</span></h4>
<p class="p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit odit sapiente vero optio aliquid nesciunt perspiciatis vitae nostrum? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Asperiores, illum vero sed sit tempora voluptatibus! </p>
</div>
<div class="units">
<h4>Web Designer -
<span>Facebook (2012-2014)</span></h4>
<p class="p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit odit sapiente vero optio aliquid nesciunt perspiciatis vitae nostrum?Lorem ipsum dolor, sit amet consectetur adipisicing elit. Veritatis corporis deleniti officia ipsam placeat.</p>
</div>
<div class="units">
<h4>Frontend Developer -
<span>Instagram (2014-2015)</span></h4>
<p class="p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit odit sapiente vero optio aliquid nesciunt perspiciatis vitae nostrum? Lorem ipsum dolor sit amet consectetur adipisicing elit. A, ipsa natus eligendi adipisci sapiente ratione?</p>
</div>
<div class="units">
<h4>Node.js Developer -
<span>Twitter (2015-2016)</span></h4>
<p class="p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit odit sapiente vero optio aliquid nesciunt perspiciatis vitae nostrum? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis blanditiis voluptatum omnis, eum hicdo</p>
</div>
<div class="units">
<h4>FullStack Developer -
<span>Youtube (2016-2018)</span></h4>
<p class="p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit odit sapiente vero optio aliquid nesciunt perspiciatis vitae nostrum? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellendus, perferendis repudiandae. Quae sit soluta.</p>
</div>
<div class="units">
<h4>Software Developer -
<span>Microsoft (2018-2023)</span></h4>
<p class="p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit odit sapiente vero optio aliquid nesciunt perspiciatis vitae nostrum? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam dicta illo molestias fuga, laboriosam .</p>
</div>

</div>

</div>


</section>
<footer>
Expand All @@ -131,7 +153,7 @@ <h4>Software Developer -</h4>
<div>Services</div>
<div>Contact</div>
</div>
<div>
<!-- <div>
<div>Home</div>
<div>About</div>
<div>Services</div>
Expand All @@ -144,7 +166,7 @@ <h4>Software Developer -</h4>
<div>Services</div>
<div>Contact</div>

</div>
</div> -->

</div>

Expand Down