Skip to content

Commit

Permalink
DA-1
Browse files Browse the repository at this point in the history
  • Loading branch information
@22BCI0034
22BCI0034 committed Apr 20, 2024
0 parents commit a6d01a4
Show file tree
Hide file tree
Showing 17 changed files with 879 additions and 0 deletions.
Binary file added assets/about-pic.png
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 assets/arrow.png
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 assets/checkmark.png
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 assets/education.png
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 assets/email.png
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 assets/experience.png
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 assets/github.png
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 assets/linkedin.png
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 assets/profile-pic.png
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 assets/project-1.png
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 assets/project-2.png
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 assets/project-3.png
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 assets/resume-vibhor.pdf
Binary file not shown.
294 changes: 294 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,294 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Portfolio</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="mediaqueries.css" />
</head>
<body>
<nav id="desktop-nav">
<div class="logo"><strong>Vibhor Puri</strong></div>
<div>
<ul class="nav-links">
<li><a href="#about">About</a></li>
<li><a href="#experience">Experience</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</nav>
<nav id="hamburger-nav">
<div class="logo">Vibhor Puri</div>
<div class="hamburger-menu">
<div class="hamburger-icon" onclick="toggleMenu()">
<span></span>
<span></span>
<span></span>
</div>
<div class="menu-links">
<li><a href="#about" onclick="toggleMenu()">About</a></li>
<li><a href="#experience" onclick="toggleMenu()">Experience</a></li>
<li><a href="#projects" onclick="toggleMenu()">Projects</a></li>
<li><a href="#contact" onclick="toggleMenu()">Contact</a></li>
</div>
</div>
</nav>
<section id="profile">
<div class="section__pic-container">
<img src="./assets/profile-pic.png" alt="Vibhor Puri profile picture" />
</div>
<div class="section__text">
<p class="section__text__p1">Hello, I'm</p>
<h1 class="title">Vibhor Puri</h1>
<p class="section__text__p2">Computer Science Student</p>
<div class="btn-container">
<button
class="btn btn-color-2"
onclick="window.open('./assets/resume-example.pdf')"
>
Download Resume
</button>
<button class="btn btn-color-1" onclick="location.href='./#contact'">
Contact Info
</button>
</div>
<div id="socials-container">
<img
src="./assets/linkedin.png"
alt="My LinkedIn profile"
class="icon"
onclick="location.href='https://www.linkedin.com/in/vibhor-puri-7401a3275'"
/>
<img
src="./assets/github.png"
alt="My Github profile"
class="icon"
onclick="location.href='https://github.com/22BCI0034/Portfolio'"
/>
</div>
</div>
</section>
<section id="about">
<p class="section__text__p1">Get To Know More</p>
<h1 class="title">About Me</h1>
<div class="section-container">
<div class="section__pic-container">
<img
src="./assets/about-pic.png"
alt="Profile picture"
class="about-pic"
/>
</div>
<div class="about-details-container">
<div class="about-containers">
<div class="details-container1">
<img
src="./assets/experience.png"
alt="Experience icon"
class="icon"
/>
<h3>Experience</h3>
<p>Board Member of English Literary Association<br />Member of Association for Computing Machinery<br />Frontend Development</p>
</div>
<div class="details-container1">
<img
src="./assets/education.png"
alt="Education icon"
class="icon"
/>
<h3>Education</h3>
<p>B.tech. 2nd year Bachelors Degree
</div>
</div>
<div class="text-container">
<p>
12th Standard from Delhi Public School<br>Btech in Computer science with specialization in Information security from <strong>VIT Vellore</strong>
</p>
</div>
</div>
</div>
<img
src="./assets/arrow.png"
alt="Arrow icon"
class="icon arrow"
onclick="location.href='./#experience'"
/>
</section>
<section id="experience">
<p class="section__text__p1">Explore My</p>
<h1 class="title">Experience</h1>
<div class="experience-details-container">
<div class="about-containers">
<div class="details-container2">
<h2 class="experience-sub-title">Frontend Development</h2>
<div class="article-container">
<article>
<img
src="./assets/checkmark.png"
alt="Experience icon"
class="icon"
/>
<div>
<h3>HTML</h3>
<p>Experienced</p>
</div>
</article>
<article>
<img
src="./assets/checkmark.png"
alt="Experience icon"
class="icon"
/>
<div>
<h3>CSS</h3>
<p>Intermediate</p>
</div>
</article>
<article>
<img
src="./assets/checkmark.png"
alt="Experience icon"
class="icon"
/>
<div>
<h3>Figma</h3>
<p>Intermediate</p>
</div>
</article>
<article>
<img
src="./assets/checkmark.png"
alt="Experience icon"
class="icon"
/>
<div>
<h3>JavaScript</h3>
<p>Basic</p>
</div>
</article>
<article>
<img
src="./assets/checkmark.png"
alt="Experience icon"
class="icon"
/>
<div>
<h3>TypeScript</h3>
<p>Basic</p>
</div>
</article>
</div>
</div>
<div class="details-container2">
<h2 class="experience-sub-title">Backend Development</h2>
<div class="article-container">
<article>
<img
src="./assets/checkmark.png"
alt="Experience icon"
class="icon"
/>
<div>
<h3>Git</h3>
<p>Basic</p>
</div>
</article>
</div>
</div>
</div>
</div>
<img
src="./assets/arrow.png"
alt="Arrow icon"
class="icon arrow"
onclick="location.href='./#projects'"
/>
</section>
<section id="projects">
<p class="section__text__p1">Browse My Recent</p>
<h1 class="title">Projects</h1>
<div class="experience-details-container">
<div class="about-containers">
<div class="details-container color-container">
<div class="article-container">
<img
src="./assets/project-1.png"
alt="Project 1"
class="project-img"
/>
</div>
<h2 class="numberofproject">Project One</h2>
<p class="app-bios">MUSE<br>a social app</p>
</div>
<div class="details-container color-container">
<div class="article-container">
<img
src="./assets/project-2.png"
alt="Project 2"
class="project-img"
/>
</div>
<h2 class="numberofproject">Project Two</h2>
<p class="app-bios">Kitchen Story<br>a recipe based delivery app</p>
</div>
<div class="details-container color-container">
<div class="article-container">
<img
src="./assets/project-3.png"
alt="Project 3"
class="project-img"
/>
</div>
<h2 class="numberofproject">Project Three</h2>
<p class="app-bios">Binge Buddy<br>a Movie/Web-series review/watchlist app</p>
</div>
</div>
</div>
<img
src="./assets/arrow.png"
alt="Arrow icon"
class="icon_arrow1"
onclick="location.href='./#contact'"
/>
</section>
<section id="contact">
<p class="section__text__p1">Get in Touch</p>
<h1 class="title">Contact Me</h1>
<div class="contact-info-upper-container">
<div class="contact-info-container">
<img
src="./assets/email.png"
alt="Email icon"
class="icon contact-icon email-icon"
/>
<p><a href="mailto:[email protected]">[email protected]</a></p>
</div>
<div class="contact-info-container">
<img
src="./assets/linkedin.png"
alt="LinkedIn icon"
class="icon contact-icon"
/>
<p><a href="https://www.linkedin.com/in/vibhor-puri-7401a3275">LinkedIn</a></p>
</div>
</div>
</section>
<footer>
<nav>
<div class="nav-links-container">
<ul class="nav-links">
<li><a href="#about">About</a></li>
<li><a href="#experience">Experience</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</nav>
<p>Copyright &#169; 2024 Vibhor Puri. All Rights Reserved.</p>
</footer>
<script src="script.js"></script>
</body>
</html>
104 changes: 104 additions & 0 deletions mediaqueries.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
@media screen and (max-width: 1400px) {
#profile {
height: 83vh;
margin-bottom: 6rem;
}
.about-containers {
flex-wrap: wrap;
}
#contact,
#projects {
height: fit-content;
}
}

@media screen and (max-width: 1200px) {
#desktop-nav {
display: none;
}
#hamburger-nav {
display: flex;
}
#experience,
.experience-details-container {
margin-top: 2rem;
}
#profile,
.section-container {
display: block;
}
.arrow {
display: none;
}
section,
.section-container {
height: fit-content;
}
section {
margin: 0 5%;
}
.section__pic-container {
width: 275px;
height: 275px;
margin: 0 auto 2rem;
}
.about-containers {
margin-top: 0;
}
}

@media screen and (max-width: 600px) {
#contact,
footer {
height: 40vh;
}
#profile {
height: 83vh;
margin-bottom: 0;
}
article {
font-size: 1rem;
}
footer nav {
height: fit-content;
margin-bottom: 2rem;
}
.about-containers,
.contact-info-upper-container,
.btn-container {
flex-wrap: wrap;
}
.contact-info-container {
margin: 0;
}
.contact-info-container p,
.nav-links li a {
font-size: 1rem;
}
.experience-sub-title {
font-size: 1.25rem;
}
.logo {
font-size: 1.5rem;
}
.nav-links {
flex-direction: column;
gap: 0.5rem;
text-align: center;
}
.section__pic-container {
width: auto;
height: 46vw;
justify-content: center;
}
.section__text__p2 {
font-size: 1.25rem;
margin-left: 3rem;
}
.title {
font-size: 2rem;
}
.text-container {
text-align: justify;
}
}
Loading

0 comments on commit a6d01a4

Please sign in to comment.