Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@arnav786-seth
arnav786-seth authored Feb 8, 2024
0 parents commit 3df0d59
Show file tree
Hide file tree
Showing 9 changed files with 314 additions and 0 deletions.
35 changes: 35 additions & 0 deletions portfolio/css/styles.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
.bg {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-size: 300% 300%;
background-image: linear-gradient(-45deg, yellow 0%, yellow 25%, yellow 51%, #ff357f 100%);
-webkit-animation: AnimateBG 20s ease infinite;
animation: AnimateBG 20s ease infinite;
}

@-webkit-keyframes AnimateBG {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}

@keyframes AnimateBG {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
Binary file added portfolio/img/box1.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 portfolio/img/box2.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 portfolio/img/fundamentals.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 portfolio/img/main.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 portfolio/img/pic.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 portfolio/img/react.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 portfolio/img/showcase.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
279 changes: 279 additions & 0 deletions portfolio/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,279 @@
<!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">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link href="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<title>Portfolio</title>
</head>

<body class="bg-dark">
<!-- navbar section -->
<nav class="navbar navbar-expand-lg bg-dark navbar-dark py-2 fixed-top">
<div class="container">
<a href="#" class="navbar-brand">A.Seth</a>

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navmenu">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navmenu">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a href="#home" class="nav-link">Home</a>
</li>
<li class="nav-item-2">
<a href="#about" class="nav-link">About</a>
</li>
<li class="nav-item-3">
<a href="#skills" class="nav-link">Skills</a>
</li>
<li class="nav-item-4">
<a href="#projects" class="nav-link">Projects</a>
</li>
<li class="nav-item-5">
<a href="#contact" class="nav-link">Contact</a>
</li>
</ul>
</div>
</div>
</nav>

<!-- showcase -->
<div class="showcase p-1" id="home">
<div class="container p-5">
<div class="row">
<div class="col-sm-6">
<img src="img/main.png" alt="" class="img-fluid w-auto h-auto p-5 mt-5">
</div>
<div class="col-sm-6 text-center text-light mt-auto mb-auto justify-content-between px-5">
<h1 class="text">Hi! I'm Arnav Seth</h1>
<h2 class="description ">I'm a <span class="text-info">Web Developer & a UI/UX Designer</span></h2>
<a href="#" class="btn btn-default bg-light btn-lg mt-2">Get in touch</a>
</div>
</div>
</div>
</div>

<!-- About Section -->

<div class="about about-expand-lg p-5" id="about">
<div class="container p-5 mb-auto mt-auto">
<div class="row">
<h1 class="heading text-light text-center mt-5 mb-5 p-5 mb-5">ABOUT</h1>
<div class="col-lg-6">
<img src="img/pic.jpg" alt="" class="card bg-info rounded-4 img-fluid w-auto h-auto p-2 mt-lg-5 ">
</div>
<div class="col-lg-6 text-left text-light mt-3 mb-5 justify-content-between pt-5">
<p>
<h6 class="lead ">Hi my name is Arnav and I'm a web development and UI/UX designer.
With a deep passion for creating exceptional user experiences, to bringing wealth of
expertise in responsive
website development and dynamic web applications that are optimized across all devices
and platforms.</h6>
<br>
<h6 class="lead">Specializing in front-end development, I have mastery of HTML, CSS, and
JavaScript to bring designs to life with seamless transitions and intuitive
functionality. With my extensive background in UI/UX design I ensure that all web
applications deliver a stunning user experience that is visually engaging and easy to
navigate.With some experience working with diverse clients across varied industries,I am
committed to delivering high-quality work within the prescribed timelines and budget.
</h6>
<br>
<h6 class="lead">Above all,I take pride in developing collaborative relationships with
clients, working closely to understand their unique requirements and delivering results
that exceed expectations. We invite you to browse my portfolio and contact
me to discuss your next web development or UI/UX project.</h6>
</p>

</div>
</div>
</div>
</div>


<!-- skills section -->
<div class="skills mt-auto mb-auto" id="skills">
<div class="container mb-5 pb-5">
<div class="row">
<h1 class="heading text-light text-center p-5">MY SKILLS</h1>
<div class="col-sm-6">
<img src="img/showcase.png" alt="" class="img-fluid w-auto h-auto">
</div>
<div class="col-sm-6 p-5 mb-auto mt-auto justify-content-center align-center">
<div class="card rounded-4 container bg-light mt-5 mb-5 w-auto h-auto p-2 px-5">
<div class="mb-3">
<label>HTML & CSS</label>
<div class="progress w-50">
<div class="progress p-2 bg-info" style="width: 80%;" role="progressbar"
aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="mb-3">
<label>bootstrap</label>
<div class="progress w-50">
<div class="progress p-2 bg-info" style="width: 80%;" role="progressbar"
aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="mb-3">
<label>PhP</label>
<div class="progress w-50">
<div class="progress p-2 bg-info" style="width: 80%;" role="progressbar"
aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="mb-3">
<label>Figma</label>
<div class="progress w-50">
<div class="progress p-2 bg-info" style="width: 80%;" role="progressbar"
aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="mb-3">
<label>Photoshop</label>
<div class="progress w-50">
<div class="progress p-2 bg-info" style="width: 80%;" role="progressbar"
aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="mb-3">
<label>Illustrator</label>
<div class="progress w-50">
<div class="progress p-2 bg-info" style="width: 80%;" role="progressbar"
aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- boxes -->
<div class="boxes mt-auto mb-auto p-5" id="projects">
<div class="container ">
<h1 class="heading text-light text-center p-5">PROJECTS</h1>
<div class="row">
<div class="col-lg-6">
<div class=" card bg-info rounded-4 w-100 bg-image hover-overlay hover-zoom hover-shadow ripple">
<img src="img/box1.png" class=" rounded-4 w-100" />
</div>
<h2 class="FooDie text-center text-light mt-2 mb-2">FooDie</h2>
<p class="description text-light lead mt-2 text-center">The customer app makes it simple for customers to use online meal
ordering services, find the best restaurant or the item they want to eat,
place their orders, and make payments.
</p>
</div>
<div class="col-lg-6">
<div class=" card bg-info rounded-4 w-100 bg-image hover-overlay hover-zoom hover-shadow ripple">
<img src="img/box2.png" class="rounded-4 w-100" />

</div>
<h2 class="FooDie text-center text-light mt-2 mb-2">Basic Bootstrap Website</h2>
<p class="description text-light lead mt-2 text-center">This is a project created with Bootstrap 5,
HTML and CSS.It is a static website made with Bootstrap</p>
</div>
<!-- <div class="col-lg-4">
<div class=" card bg-info rounded-4 w-100 bg-image hover-overlay hover-zoom hover-shadow ripple">
<img src="img/box1.png" class=" rounded-4 w-100" />
</div>
<h2 class="FooDie text-center text-light mt-2 mb-2">FooDie</h2>
<p class="description text-light lead mt-2 text-center">Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta
consequuntur corporis repellendus dolores dolore iusto facere labore vel voluptas? Dolores
iusto esse inventore quis omnis doloribus assumenda autem veniam quisquam laboriosam nihil,
explicabo temporibus aspernatur vitae modi aliquam eveniet, saepe reiciendis at recusandae
minima soluta architecto! Aspernatur distinctio officiis et?</p>
</div> -->
</div>
</div>
</div>
<!-- contact and map -->
<div class="card rounded-4 container w-auto h-auto p-5" id="contact">
<div class="row align-center justify-content-between mt-auto mb-auto">
<div class="col-md pt-5 p-5">
<h2>Contact Info</h2>
<div class="col-md pt-5 p-5">
<ul class="list-group list-group-flush lead">
<li class="list-group-item">
<span class="fw-bold">E-mail :</span> [email protected]
</li>
<li class="list-group-item">
<span class="fw-bold">Phone Number :</span> 9891829098
</li>
<li class="list-group-item">
<span class="fw-bold">Whatsapp Number :</span> 9891829098
</li>
</ul>
</div>
</div>
<div class="col-md p-3 py-5 px-5 w-auto h-auto mt-auto mb-auto">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d14854211.866550416!2d73.47115932198258!3d20.678462927687868!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x30635ff06b92b791%3A0xd78c4fa1854213a6!2sIndia!5e0!3m2!1sen!2sin!4v1678198993517!5m2!1sen!2sin"
width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</div>
</div>
</section>
<!-- fotter -->

<footer class="p-5 text-white position-relative text-center">
<div class="container">
<p class="lead">Copyright &copy; 2023 personal portfolio</p>
<a href="#" class="position-absolute bottom-0 end-0 p-5">
<i class="bi bi-arrow-up-circle h1"></i>
</a>
</div>
</footer>
<!-- model -->
<div class="modal fade" id="enroll" tabindex="-1" aria-labelledby="enroll Label" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="enroll Label">Modal title</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p class="lead">Fill out this form and we will get back to you </p>
<form>
<div class="mb3">
<label for="first-name" class="col-form-label">
First Name:
</label>
<input type="text" class="form-control" id="first-name" />
</div>
<div class="mb-3">
<label for="last-name" class="col-form-label">Last Name:</label>
<input type="text" class="form-control" id="last-name" />
</div>
<div class="mb-3">
<label for="email" class="col-form-label">Email:</label>
<input type="email" class="form-control" id="email" />
</div>
<div class="mb-3">
<label for="phone" class="col-form-label">Phone:</label>
<input type="tel" class="form-control" id="phone" />
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
crossorigin="anonymous"></script>

</body>

</html>

0 comments on commit 3df0d59

Please sign in to comment.