Skip to content

Commit

Permalink
first commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@deepakgupta-D3
deepakgupta-D3 committed Mar 24, 2024
0 parents commit 0506182
Show file tree
Hide file tree
Showing 5 changed files with 948 additions and 0 deletions.
Binary file added img/fb-image.jpg
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/galaxi-png.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
300 changes: 300 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,300 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- ...CSS... -->
<link rel="stylesheet" href="style.css"/>

<title>Personal website..</title>
</head>
<body>


<!-- ...Header... -->
<header>
<div class="profile">
<img src="./img/fb-image.jpg" alt="image" width="150px">
<h1>Deepak</h1>
<div class="social-icons">

<a href="https://www.linkedin.com/in/deepak-gupta-8690481b9/" target="_blank"><i class="fa-brands fa-linkedin"></i></a>
<a href="#"><i class="fa-brands fa-facebook"></i></a>
<a href="#"><i class="fa-brands fa-twitter"></i></a>
<a href="https://www.instagram.com/__kumar_deepak.03/" target="_blank"><i class="fa-brands fa-instagram"></i></a>
</div>
</div>

<!-- ...Navbar... -->
<nav>
<ul>
<li><a href="#home" class="home"><i class="fa-solid fa-house"></i>Home</a></li>
<li><a href="#about" id="aboutMe"><i class="fa-solid fa-user"></i>About me</a></li>
<li><a href="#resume" id="re-sume"><i class="fa fa-address-card-o"></i>Resume</a></li>
<li><a href="#portfolio" id="Port-fol"><i class="fa-solid fa-briefcase"></i>Portfolio</a></li>
<li><a href="#contact" id="con-tact"><i class="fa-solid fa-envelope"></i>Conatct</a></li>
</ul>
</nav>

<!-- ...Header ka footer... -->
<div class="footer">
<p>&copy; Copyright 2023 <br>Designed By <a href="" target="blank">Deep-Creation</a></p>
</div>

</header>

<!-- ....Mobile Nav Toggle.... -->
<i class="fa-solid fa-bars" id="MenuBtn"></i>
<!-- *******Header DONE******* -->

<!-- ........BODY........... -->
<main>

<!-- ...HOME Section... -->
<section id="home">
<div class="home-row">
<h1>Hi, This is <br>Deepak-Gupta<span>.</span></h1>
<p>i'm a <span class="auto-input"></span></p>
</div>
</section>
<!-- ...Home section Done... -->

<!-- ...About section... -->
<section id="about">
<h1 class="sub-heading">About Me</h1>
<div class="divider"></div>
<p>I am results-driven and highly motivated candidate with a strong foundation in C++, Web Development, and Object-Oriented Programming seeking a
challenging position in an esteemed IT company. Eager to contribute my technical expertise, creativity, and dedication to deliver innovative solutions
that drive business growth and provide a seamless user experience. As a proactive learner with excellent problem-solving skills, I aim to collaborate
with a dynamic team, continuously learn and grow in the fast-paced IT industry, and become an integral part of the organization's success story!</p>

<div class="about-col">
<!-- ..img-section.. -->
<div class="img-col">
<img src="./img/fb-image.jpg" alt="image"/>
</div>

<!-- ...info... -->
<div class="info-col">
<h2>Full-Stack Developer!</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. architecto odit maxime recusandae vitae natus consequuntur mollitia fugit!</p>

<div class="icon-list-col">
<!-- ..left-side-list.. -->
<div class="icon-list">
<ul>
<li><i class="fa-solid fa-angle-right"></i><strong>Age:</strong><span> 22</span></li>
<li><i class="fa-solid fa-angle-right"></i><strong>Website:</strong><span> deep.xyz</span></li>
<li><i class="fa-solid fa-angle-right"></i><strong>Phone:</strong><span> +91 77019 71178</span></li>
<li><i class="fa-solid fa-angle-right"></i><strong>City:</strong><span> Gurugram, Haryana</span></li>
</ul>
</div>
<!-- ..Right-side-list.. -->
<div class="icon-list">
<ul>
<li><i class="fa-solid fa-angle-right"></i><strong>Degree:</strong><span> B.Tech</span></li>
<li><i class="fa-solid fa-angle-right"></i><strong>Email:</strong><span> [email protected]</span></li>
<li><i class="fa-solid fa-angle-right"></i><strong>Freelancer:</strong><span> Available</span></li>
<li><i class="fa-solid fa-angle-right"></i><strong>Country:</strong><span> INDIA</span></li>
</ul>
</div>
</div>
</div>
</div>
</section>

<!-- ...SKILLS... -->
<section id="skill">

<h1 class="sub-heading">Skills</h1>
<div class="divider"></div>

<div class="skill-row">
<!-- ..Skill 1.. -->
<div class="skill-box">
<div class="skill-info">
<h2>HTML</h2>
<h2>85%</h2>
</div>
<div class="skill-outter-line">
<div class="skill-inner-line" style="width: 85%"></div>
</div>
</div>
<!-- ..Skill 2.. -->
<div class="skill-box">
<div class="skill-info">
<h2>CSS</h2>
<h2>75%</h2>
</div>
<div class="skill-outter-line">
<div class="skill-inner-line" style="width: 75%"></div>
</div>
</div>
<!-- ..Skill 3.. -->
<div class="skill-box">
<div class="skill-info">
<h2>JavaScript</h2>
<h2>70%</h2>
</div>
<div class="skill-outter-line">
<div class="skill-inner-line" style="width: 70%"></div>
</div>
</div>
<!-- ..Skill 4.. -->
<div class="skill-box">
<div class="skill-info">
<h2>C++</h2>
<h2>79%</h2>
</div>
<div class="skill-outter-line">
<div class="skill-inner-line" style="width: 79%"></div>
</div>
</div>
<!-- ..Skill 5.. -->
<div class="skill-box">
<div class="skill-info">
<h2>Data Structure</h2>
<h2>80%</h2>
</div>
<div class="skill-outter-line">
<div class="skill-inner-line" style="width: 80%"></div>
</div>
</div>
</div>

</section>

<!-- **********Resume Part******* -->
<section id="resume">

<h1 class="sub-heading">Resume</h1>
<div class="divider"></div>
<p class="sub-para">These are the some of my educational details mentioned below :-</p>

<!-- ...Left col... -->
<h2>Educational Details</h2>

<div class="resume-col">
<div class="my-edu">
<h3>BACHELORE OF TECHNOLOGY IN COMPUTER ENGINEERING</h3>
<span class="sp-box">2021-Present</span>
<p>J.C Bose University of Science and Technology, YMCA, Faridabad.</p>
<p>Current CGPA: 7.56</p>
</div>
<div class="my-edu">
<h3>CLASS 12<sup>th</sup></h3>
<span class="sp-box">2019-21</span>
<p>Prashant Public School, Muzaffarpur, Bihar.</p>
<p>Score: 82%</p>
</div>
<div class="my-edu">
<h3>CLASS 10<sup>th</sup></h3>
<span class="sp-box">2019</span>
<p>G.D Mother International School, Muzaffarpur, Bihar.</p>
<p>CGPA: 10</p>
</div>
</div>
</section>

<!-- ***********Project Portfolio******** -->
<section id="portfolio">
<h1 class="sub-heading">Project-Portfolio</h1>
<div class="divider"></div>
<p class="sub-para">Here are my few main Projects</p>

<div class="proj-col">
<!-- ..projects items-1.. -->
<div class="proj-item">
<ol type="1">
<li class="list"><h2>E-Commerse Website</h2>
<p>It is an e-commerse website where we can shop things </p>
<div class="skill">
<p>Key skills: </p>
<p>Project Link: <a href="">e-commerce</a></p>
</div>
</li>
<li class="list"><h2>Study Notion</h2>
<p>It is a study material website</p>
<div class="skill">
<p>Key skills: </p>
<p>Project Link: <a href="">study notion</a></p>
</div>
</li>
<li class="list"><h2>Laptop Price Predictor</h2>
<p>It a Laptop price predictor, which tells you about price of laptops in the market</p>
<div class="skill">
<p>Key skills: </p>
<p>Project Link: <a href="">laptop price</a></p>
</div>
</li>
</ol>
</div>
</div>
</section>

<!-- *********CONTACT******* -->

<section id="contact">

<h1 class="sub-heading">Contact</h1>
<div class="divider"></div>
<p class="sub-para">You can connect with me :</p>

<div class="contact-row">
<!-- ..left-col.. -->
<div class="contact-left">
<div class="icon-box">
<div class="icon"><i class="fa-solid fa-envelope"></i></div>
<div class="contact-info">
<h4>Emial: </h4>
<p>[email protected]</p>
</div>
</div>
<!-- ..Call-box.. -->
<div class="icon-box">
<div class="icon"><i class="fa-solid fa-phone"></i></div>
<div class="contact-info">
<h4>Call: </h4>
<p>+91 77019 71778</p>
</div>
</div>
<!-- ..Location-box.. -->
<div class="icon-box">
<div class="icon"><i class="fa-solid fa-location-dot"></i></div>
<div class="contact-info">
<h4>Location: </h4>
<p>Faridabad, Haryana, INDIA</p>
</div>
</div>
<!-- ..Map.. -->
<div class="map-div">
<iframe class="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3510.6116570691674!2d77.3193758!3d28.370588199999993!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390cdd4f4ee6afd9%3A0x625414bf5adc1f3c!2sGulmohar%20PG!5e0!3m2!1sen!2sin!4v1711235375260!5m2!1sen!2sin" width="350px" height="250px" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</div>
<!-- ..Right-col.. -->
<div class="contact-right">

<form action="">

<input type="text" name="name" id="name" placeholder="Your Name">
<input type="email" name="email" id="email" placeholder="Your Email">
<input type="text" name="phone" id="pnone" placeholder="Your Phone No.">
<textarea name="msg" id="msg" rows="9" placeholder="Drop a message"></textarea>
<input type="submit" value="Send Message">

</form>
</div>
</div>
</section>
</main>


<!-- ...Typed.js for typing effect.. -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<!-- ...js file... -->
<script src="script.js"></script>
<!-- ...Awesome font... -->
<script src="https://kit.fontawesome.com/f9154e14a8.js" crossorigin="anonymous"></script>
</body>
</html>
19 changes: 19 additions & 0 deletions script.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
// Header Toggle

let MenuBtn = document.getElementById('MenuBtn');


MenuBtn.addEventListener('click', function(e) {
document.querySelector('body').classList.toggle('mobile-nav-active');
this.classList.toggle('fa-xmark');
})

// typing effect
let typed = new Typed('.auto-input', {

strings: ['Software Engineer!','Front-End Developer!', 'UI Designer!'],
typeSpeed: 30,
backSpeed: 30,
backDelay: 2000,
loop: true,
})
Loading

0 comments on commit 0506182

Please sign in to comment.