Skip to content

2200290120071_Gungun Jain_CS_3 #160

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

Open
gungunjain15 wants to merge 3 commits into
base: main
Choose a base branch
from
Open

2200290120071_Gungun Jain_CS_3 #160

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
779a6df
initial commit
gungunjain15 Oct 29, 2024
af7807b
calculator video added
gungunjain15 Oct 29, 2024
fa1467e
personal webpage video added
gungunjain15 Oct 29, 2024
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
Binary file added Easy-Style_Personal_Webpage/Personal-Webpage-recordedvideo.mp4
View file
Open in desktop
Binary file not shown.
Binary file added Easy-Style_Personal_Webpage/Style-a-basic-webpage-report.pdf
View file
Open in desktop
Binary file not shown.
Binary file added Easy-Style_Personal_Webpage/Styling-a-Basic-Webpage-My-Personal-Webpage_Presentation.pptx
View file
Open in desktop
Binary file not shown.
Binary file added Easy-Style_Personal_Webpage/image.jpeg
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.
222 changes: 222 additions & 0 deletions Easy-Style_Personal_Webpage/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,222 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gungun's Portfolio</title>
<link rel="stylesheet" href="style.css">
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
</head>

<body>
<header class="header">
<a href="#" class="logo">Gungun.</a>
<i class='bx bx-menu' id="menu-icon"></i>
<nav class="navbar">
<a href="#home" class="active">Home</a>
<a href="#about">About</a>
<a href="#education">Education</a>
<a href="#skills">Skills</a>
<a href="#contact">Contact</a>
</nav>
</header>

<section class="home" id="home">
<div class="home-content">
<h1>Hi, I'm <span>Gungun Jain</span></h1>
<h3>Frontend Developer</h3>
<p>I'm a web developer enthusiast with a passion for everything front-end. Welcome to my corner of the
internet. I'm glad you're here!<br>Working with my hands to make magic happen on the internet.</p>

<div class="home-social">
<a href="https://www.facebook.com/gungun.jain.58367?mibextid=ZbWKwL" target="_blank"><i class='bx bxl-facebook'></i></a>
<a href="https://www.linkedin.com/in/gungunjain" target="_blank"><i class="bx bxl-linkedin"></i></a>
<a href="https://github.com/gungunjain15" target="_blank"><i class="bx bxl-github"></i></a>
</div>
<button class="btn"><a href="https://www.linkedin.com/in/gungunjain">Hire Me</a></button>
</div>

<div class="home-img">
<img src="image.jpeg" alt="gungun">
</div>
<!-- <div class="home-imghover"></div> -->
</section>


<section class="about" id="about">
<h2 class="heading">About <span>Me</span></h2>
<div class="about-img">
<img src="image.jpeg" alt="">
<span class="circle-spin"></span>
</div>
<div class="about-content">
<h3>Frontened Developer! </h3>
<p>Hello World! I'm Gungun Jain, a passionate and driven third-year college student with a keen interest in web development. I believe the internet holds immense potential to shape the future and create meaningful connections worldwide.Pursuing a degree in Computer Science, I'm proficient in HTML, CSS, and JavaScript, and I enjoy crafting user-friendly websites. With an eye for design, I blend aesthetics and functionality to create visually appealing interfaces. I'm a collaborative team player, continuously seeking new challenges and learning opportunities.</p>
<p>Let's connect and build innovative digital experiences together!</p>
</div>
<button class="btn"><a href="https://github.com/gungunjain15?tab=repositories">My Projects</a></button>
</section>

<section class="education" id="education">
<h2 class="heading">My <span>Journey</span></h2>
<div class="education-row">
<div class="education-column">
<h3 class="title">Education</h3>

<div class="education-box">
<div class="education-content">
<div class="content">
<div class="year"><i class="bx bxs-calendar"></i> 2018 - 2019</div>
<h3>Secondary School Examination - 10th</h3>
<p>Lord Mahavira Academy , Saharanpur<br>Got 94.4% and Awarded with a Gold Medal</p>
</div>
</div>
<div class="education-content">
<div class="content">
<div class="year"><i class="bx bxs-calendar"></i> 2020 - 2021</div>
<h3>Senior School Examination - 12th</h3>
<p>Lord Mahavira Academy , Saharanpur<br>Got 97.6% and Secured 3rd Position in Science Stream </p>
</div>
</div>
<div class="education-content">
<div class="content">
<div class="year"><i class="bx bxs-calendar"></i> 2022 - 2026</div>
<h3>B.Tech. - Computer Science</h3>
<p>Through JEE Counselling got admission in B.Tech. Computer Science course in KIET Group Of Institutions<br>I am the Class Representative (CR) of my Section</p>
</div>
</div>
</div>
</div>

<div class="education-column">
<h3 class="title">Experience</h3>

<div class="education-box">
<div class="education-content">
<div class="content">
<div class="year"><i class="bx bxs-calendar"></i> 2022 - 2023</div>
<h3>Web Developer - Technocrats</h3>
<p>Web Team Member at Technocrats that connects, collaborates, and empowers students to become tomorrow's leaders in technology.</p>
</div>
</div>
<div class="education-content">
<div class="content">
<div class="year"><i class="bx bxs-calendar"></i> 2022 - 2023</div>
<h3>Web Developer - NSCC</h3>
<p>Web Team Member at NSCC that organise the bootcamps free of cost , provide correct guidance to anyone wishing to learn.</p>
</div>
</div>
<div class="education-content">
<div class="content">
<div class="year"><i class="bx bxs-calendar"></i> 2022 - 2023</div>
<h3>Trainee - Katalyst</h3>
<p>Trainee and Mentee at Katalyst India - Delhi Centre<br>It Empowers the women for Equality in Oppurtunity and Leadership.<br>Its aim is to empower more women to become leaders of tomorrow!</p>
</div>
</div>
</div>
</div>
</div>
</section>

<section class="skills" id="skills">
<h2 class="heading">My <span>Skills</span></h2>
<div class="skills-row">
<div class="skills-column">
<h3 class="title">Coding Skills</h3>

<div class="skills-box">
<div class="skills-content">
<div class="progress">
<h3>HTML <span>90%</span></h3>
<div class="bar"><span></span></div>
</div>
<div class="progress">
<h3>CSS <span>80%</span></h3>
<div class="bar"><span></span></div>
</div>
<div class="progress">
<h3>JAVASCRIPT <span>55%</span></h3>
<div class="bar"><span></span></div>
</div>
<div class="progress">
<h3>Python <span>65%</span></h3>
<div class="bar"><span></span></div>
</div>
</div>
</div>
</div>

<div class="skills-column">
<h3 class="title">Professional Skills</h3>

<div class="skills-box">
<div class="skills-content">
<div class="progress">
<h3>Web Design <span>85%</span></h3>
<div class="bar"><span></span></div>
</div>
<div class="progress">
<h3>Web Development <span>50%</span></h3>
<div class="bar"><span></span></div>
</div>
<div class="progress">
<h3>Graphic Design <span>65%</span></h3>
<div class="bar"><span></span></div>
</div>
<div class="progress">
<h3>Communication <span>90%</span></h3>
<div class="bar"><span></span></div>
</div>
</div>
</div>
</div>
</section>

<section class="contact" id="contact">
<h2 class="heading">Contact <span>Me!</span></h2>

<form action="#">
<div class="input-box">
<div class="input-field">
<input type="text" placeholder="Full Name" required>
<span class="focus"></span>
</div>
<div class="input-field">
<input type="text" placeholder="Email Address" required>
<span class="focus"></span>
</div>
</div>
<div class="input-box">
<div class="input-field">
<input type="number" placeholder="Mobile Number" required>
<span class="focus"></span>
</div>
<div class="input-field">
<input type="text" placeholder="Email Subject" required>
<span class="focus"></span>
</div>
</div>
<div class="textarea-field">
<textarea name="" id="" cols="30" rows="10" placeholder="Your Message" required></textarea>
<span class="focus"></span>
</div>
<div class="btn-box btns">
<button type="submit" class="btn">Submit</button>
</div>
</form>
</section>

<footer class="footer">
<div class="footer-text">
<p>Copyright &copy; 2023 by Gungun | All Rights Reserved.</p>
</div>
<div class="footer-iconTop">
<a href="#"><i class='bx bx-up-arrow-alt'></i></a>
</div>
</footer>

<script src="script.js"></script>
</body>

</html>
28 changes: 28 additions & 0 deletions Easy-Style_Personal_Webpage/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
let menuIcon = document.querySelector('#menu-icon');
let navbar = document.querySelector('.navbar');
let sections = document.querySelectorAll("section");
let navLinks = document.querySelectorAll("header nav a");

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

window.onscroll = () => {
menuIcon.classList.remove("bx-x");
navbar.classList.remove("active");

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

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