165 lines
No EOL
7.7 KiB
HTML
165 lines
No EOL
7.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>My Portfolio</title>
|
||
<link rel="stylesheet" href="style.css">
|
||
<script src="https://kit.fontawesome.com/fbdbc269e8.js" crossorigin="anonymous"></script>
|
||
</head>
|
||
|
||
<body>
|
||
<div id="header">
|
||
<div class="container">
|
||
<nav>
|
||
<img src="images/logo1.png" class="logo">
|
||
<ul>
|
||
<li><a href="#">Home</a></li>
|
||
<li><a href="#">About</a></li>
|
||
<li><a href="#">Services</a></li>
|
||
<li><a href="#">Portfolio</a></li>
|
||
<li><a href="#">Contact</a></li>
|
||
</ul>
|
||
</nav>
|
||
<div class="header-text">
|
||
<p>Aspiring software developer....</p>
|
||
<h1>Hi, I'm <span>Arpita</span><br> from India</h1>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="about">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="about-col-1">
|
||
<img src="images/img2.jpg" alt="">
|
||
</div>
|
||
<div class="about-col-2">
|
||
<h1 class="sub-title">About Me</h1>
|
||
<p>Dedicated computer application graduate with 1.8 years of experience in java development seeking
|
||
a position as a junior java developer to leverage skills in Java, spring boot & MySQL.
|
||
</p>
|
||
<div class="tab-titles">
|
||
<p class="tab-links active-link" onclick="opentab('skills')">Skills</p>
|
||
<p class="tab-links" onclick="opentab('experience')">Experience</p>
|
||
<p class="tab-links" onclick="opentab('education')">Education</p>
|
||
</div>
|
||
<div class="tab-contents active-tab" id="skills">
|
||
<ul>
|
||
<li>Java</li>
|
||
<li>Spring boot</li>
|
||
<li>MySQL</li>
|
||
<li>CSS</li>
|
||
<li>HTML</li>
|
||
<li>Git</li>
|
||
</ul>
|
||
</div>
|
||
<div class="tab-contents" id="experience">
|
||
<ul>
|
||
<li>Company name - System Associate [2022 Aug - 2023 Oct]
|
||
- Haven’t got any chance to work on any projects due to lack of experience/projects in
|
||
the company. Eventually got laid off.</li>
|
||
<li>Company name - System associate trainee [2022 Mar – 2023 Jul]
|
||
- Successfully completed training which covered fundamentals of Java(OOPS), spring Boot,
|
||
REST API’s, MySQL, HTML, CSS, Git & software engineering practices.</li>
|
||
</ul>
|
||
</div>
|
||
<div class="tab-contents" id="education">
|
||
<ul>
|
||
<li><span>2021</span><br>Bachelor's of computer application from xxx college</li>
|
||
<li><span>2018</span><br>Pre-university from xxx college</li>
|
||
<li><span>2016</span><br>High school from xxx school</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!------------------------services---------------------------->
|
||
<div id="services">
|
||
<div class="container">
|
||
<h1 class="sub-title">My Projects</h1>
|
||
<div class="services-list">
|
||
<div>
|
||
<i class="fa-solid fa-code"></i>
|
||
<h2>Project 1</h2>
|
||
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quae laborum sapiente, autem
|
||
consequatur itaque, ullam laudantium et dignissimos enim, eum facere ipsum harum sit! Error
|
||
reiciendis repudiandae vel totam harum ullam expedita hic dolores sed!</p>
|
||
<a href="#">Learn more</a>
|
||
</div>
|
||
<div>
|
||
<i class="fa-solid fa-crop"></i>
|
||
<h2>Project 2</h2>
|
||
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quae laborum sapiente, autem
|
||
consequatur itaque, ullam laudantium et dignissimos enim, eum facere ipsum harum sit! Error
|
||
reiciendis repudiandae vel totam harum ullam expedita hic dolores sed!</p>
|
||
<a href="#">Learn more</a>
|
||
</div>
|
||
<div>
|
||
<i class="fa-brands fa-app-store"></i>
|
||
<h2>Project 3</h2>
|
||
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quae laborum sapiente, autem
|
||
consequatur itaque, ullam laudantium et dignissimos enim, eum facere ipsum harum sit!
|
||
Error
|
||
reiciendis repudiandae vel totam harum ullam expedita hic dolores sed!</p>
|
||
<a href="#">Learn more</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-----------------------------------portfolio------------------------------>
|
||
<div id="portfolio">
|
||
<div class="container">
|
||
<h1 class="sub-title">My Work</h1>
|
||
<div class="work-list">
|
||
<div class="work">
|
||
<img src="images/coffe_shop.jpg" alt="">
|
||
<div class="layer">
|
||
<h3>Coffee Shop</h3>
|
||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet distinctio laudantium
|
||
repellendus consequatur iusto vel enim commodi perspiciatis quia quis.</p>
|
||
<a href="#"><i class="fa-solid fa-arrow-up-right-from-square"></i></a>
|
||
</div>
|
||
</div>
|
||
<div class="work">
|
||
<img src="images/travel.jpg" alt="">
|
||
<div class="layer">
|
||
<h3>Travel Website</h3>
|
||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet distinctio laudantium
|
||
repellendus consequatur iusto vel enim commodi perspiciatis quia quis.</p>
|
||
<a href="#"><i class="fa-solid fa-arrow-up-right-from-square"></i></a>
|
||
</div>
|
||
</div>
|
||
<div class="work">
|
||
<img src="images/Online_shop.jpg" alt="">
|
||
<div class="layer">
|
||
<h3>Online Shopping</h3>
|
||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet distinctio laudantium
|
||
repellendus consequatur iusto vel enim commodi perspiciatis quia quis.</p>
|
||
<a href="#"><i class="fa-solid fa-arrow-up-right-from-square"></i></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
|
||
var tablinks = document.getElementsByClassName("tab-links");
|
||
var tabcontents = document.getElementsByClassName("tab-contents");
|
||
|
||
function opentab(tabname) {
|
||
for (tablink of tablinks) {
|
||
tablink.classList.remove("active-link");
|
||
}
|
||
for (tabcontent of tabcontents) {
|
||
tabcontent.classList.remove("active-tab");
|
||
}
|
||
event.currentTarget.classList.add("active-link");
|
||
document.getElementById(tabname).classList.add("active-tab");
|
||
}
|
||
</script>
|
||
</body>
|
||
|
||
</html> |