my-portfolio/src/index.html

154 lines
10 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Rohit Pai - Portfolio</title>
<link rel="stylesheet" href="css/main.css">
<script src="https://kit.fontawesome.com/ed3c25598e.js" crossorigin="anonymous"></script>
<script src="js/main.js"></script>
</head>
<body>
<header>
<nav>
<input type="checkbox" id="nav-check">
<a href="/">
<h1>rohit pai</h1>
</a>
<div class="nav-btn">
<label for="nav-check">
<span></span>
<span></span>
<span></span>
</label>
</div>
<ul>
<li><a href="#about" class="textShadow active"><span>&lt;</span>about<span>&gt;</span></a></li>
<li><a href="#curriculumVitae" class="textShadow"><span>&lt;</span>cv<span>&gt;</span></a></li>
<li><a href="#projects" class="textShadow"><span>&lt;</span>projects<span>&gt;</span></a></li>
<li><a href="#contact" class="textShadow"><span>&lt;</span>contact<span>&gt;</span></a></li>
<li><a href="#" class="textShadow"><span>&lt;</span>blog<span>&gt;</span></a></li>
</ul>
</nav>
<div>
<h1>full stack developer</h1>
<a href="" class="btn btnPrimary boxShadowIn boxShadowOut">Contact Me</a>
<a href="#about"><i class="fas fa-chevron-down"></i></a>
</div>
</header>
<main>
<section id="about">
<h1>about</h1>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae debitis dolore, illum minus
molestias
officiis quidem similique ut. Autem consectetur eum, fugit illum ipsam laudantium magnam magni minima
nesciunt numquam officia, soluta unde, voluptates! Aliquid aut, beatae dignissimos, dolorem ex
exercitationem fugiat harum itaque laudantium placeat repellat suscipit velit! Aliquam architecto autem
beatae consectetur, dicta dolorum eligendi esse harum hic iure labore, libero molestias nemo neque nisi
nostrum odio sed sunt tempora totam voluptatem voluptatibus.</p>
<a href="other/rohitpaicv.pdf" class="btn btnOutline boxShadowIn boxShadowOut" download>Download CV</a>
</div>
</section>
<section id="curriculumVitae">
<h1>curriculum vitae</h1>
<div class="cvGrid">
<!-- https://codepen.io/keithwyland/pen/wqNqvy -->
<div>
<h2>Education</h2>
<div class="timeline" id="edu">
</div>
</div>
<div>
<h2>Work</h2>
<div class="timeline" id="work">
</div>
</div>
</div>
</section>
<section id="projects">
<div class="mainProj" id="mainProj">
</div>
<div class="otherProj" id="otherProj">
<h1>other projects</h1>
<div>
</div>
<a href="" class="btn btnPrimary boxShadowIn boxShadowOut">View More</a>
</div>
</section>
<section id="contact">
<div id="findMe">
<h1>find me</h1>
<div class="findMeContainer">
<div class="flexRow socialIcons">
<div>
<a href="https://linkedin.com/in/rohitpai98">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-2 16h-2v-6h2v6zm-1-6.891c-.607 0-1.1-.496-1.1-1.109 0-.612.492-1.109 1.1-1.109s1.1.497 1.1 1.109c0 .613-.493 1.109-1.1 1.109zm8 6.891h-1.998v-2.861c0-1.881-2.002-1.722-2.002 0v2.861h-2v-6h2v1.093c.872-1.616 4-1.736 4 1.548v3.359z"/></svg>
</a >
<a href="https://github.com/rodude123">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#9ed035" d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm2.218 18.616c-.354.069-.468-.149-.468-.336v-1.921c0-.653-.229-1.079-.481-1.296 1.56-.173 3.198-.765 3.198-3.454 0-.765-.273-1.389-.721-1.879.072-.177.312-.889-.069-1.853 0 0-.587-.188-1.923.717-.561-.154-1.159-.231-1.754-.234-.595.003-1.193.08-1.753.235-1.337-.905-1.925-.717-1.925-.717-.379.964-.14 1.676-.067 1.852-.448.49-.722 1.114-.722 1.879 0 2.682 1.634 3.282 3.189 3.459-.2.175-.381.483-.444.936-.4.179-1.413.488-2.037-.582 0 0-.37-.672-1.073-.722 0 0-.683-.009-.048.426 0 0 .46.215.777 1.024 0 0 .405 1.25 2.353.826v1.303c0 .185-.113.402-.462.337-2.782-.925-4.788-3.549-4.788-6.641 0-3.867 3.135-7 7-7s7 3.133 7 7c0 3.091-2.003 5.715-4.782 6.641z"/></svg>
</a>
<a href="https://instagram.com/rodude123/">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14.829 6.302c-.738-.034-.96-.04-2.829-.04s-2.09.007-2.828.04c-1.899.087-2.783.986-2.87 2.87-.033.738-.041.959-.041 2.828s.008 2.09.041 2.829c.087 1.879.967 2.783 2.87 2.87.737.033.959.041 2.828.041 1.87 0 2.091-.007 2.829-.041 1.899-.086 2.782-.988 2.87-2.87.033-.738.04-.96.04-2.829s-.007-2.09-.04-2.828c-.088-1.883-.973-2.783-2.87-2.87zm-2.829 9.293c-1.985 0-3.595-1.609-3.595-3.595 0-1.985 1.61-3.594 3.595-3.594s3.595 1.609 3.595 3.594c0 1.985-1.61 3.595-3.595 3.595zm3.737-6.491c-.464 0-.84-.376-.84-.84 0-.464.376-.84.84-.84.464 0 .84.376.84.84 0 .463-.376.84-.84.84zm-1.404 2.896c0 1.289-1.045 2.333-2.333 2.333s-2.333-1.044-2.333-2.333c0-1.289 1.045-2.333 2.333-2.333s2.333 1.044 2.333 2.333zm-2.333-12c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6.958 14.886c-.115 2.545-1.532 3.955-4.071 4.072-.747.034-.986.042-2.887.042s-2.139-.008-2.886-.042c-2.544-.117-3.955-1.529-4.072-4.072-.034-.746-.042-.985-.042-2.886 0-1.901.008-2.139.042-2.886.117-2.544 1.529-3.955 4.072-4.071.747-.035.985-.043 2.886-.043s2.14.008 2.887.043c2.545.117 3.957 1.532 4.071 4.071.034.747.042.985.042 2.886 0 1.901-.008 2.14-.042 2.886z"/></svg>
</a>
</div>
<div>
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#9ed035" d="M15.5 14.625c0 .484-.387.875-.864.875h-5.273c-.477 0-.863-.392-.863-.875s.387-.875.863-.875h5.272c.478 0 .865.391.865.875zm-6.191-4.375h2.466c.448 0 .809-.392.809-.875s-.361-.875-.81-.875h-2.465c-.447 0-.809.392-.809.875s.362.875.809.875zm14.691 1.75c0 6.627-5.373 12-12 12s-12-5.373-12-12 5.373-12 12-12 12 5.373 12 12zm-5-1.039c0-.383-.311-.692-.691-.692h-1.138c-.583 0-.69-.446-.69-.996-.001-2.36-1.91-4.273-4.265-4.273h-2.952c-2.355 0-4.264 1.913-4.264 4.272v5.455c0 2.36 1.909 4.273 4.264 4.273h5.474c2.353 0 4.262-1.913 4.262-4.272v-3.767z"/></svg>
</a>
<a href="mailto:rohit@rohitpai.tech">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#9ed035" d="M13.718 10.528c0 .792-.268 1.829-.684 2.642-1.009 1.98-3.063 1.967-3.063-.14 0-.786.27-1.799.687-2.58 1.021-1.925 3.06-1.624 3.06.078zm10.282 1.472c0 6.627-5.373 12-12 12s-12-5.373-12-12 5.373-12 12-12 12 5.373 12 12zm-5-1.194c0-3.246-2.631-5.601-6.256-5.601-4.967 0-7.744 3.149-7.744 7.073 0 3.672 2.467 6.517 7.024 6.517 2.52 0 4.124-.726 5.122-1.288l-.687-.991c-1.022.593-2.251 1.136-4.256 1.136-3.429 0-5.733-2.199-5.733-5.473 0-5.714 6.401-6.758 9.214-5.071 2.624 1.642 2.524 5.578.582 7.083-1.034.826-2.199.799-1.821-.756 0 0 1.212-4.489 1.354-4.975h-1.364l-.271.952c-.278-.785-.943-1.295-1.911-1.295-2.018 0-3.722 2.19-3.722 4.783 0 1.73.913 2.804 2.38 2.804 1.283 0 1.95-.726 2.364-1.373-.3 2.898 5.725 1.557 5.725-3.525z"/></svg>
</a>
<a href="tel:07449063029">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#9ed035" d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm3.445 17.827c-3.684 1.684-9.401-9.43-5.8-11.308l1.053-.519 1.746 3.409-1.042.513c-1.095.587 1.185 5.04 2.305 4.497l1.032-.505 1.76 3.397-1.054.516z"/></svg>
</a>
</div>
</div>
<img src="./imgs/profile.jpg"
alt="My professional picture taken in brighton near north street at night wearing a bage jacket and checkered shirt"
class="profile"></div>
</div>
<div id="sayHello">
<h1>say hello</h1>
<form action="" id="contactForm">
<div class="flName">
<div class="formControl">
<label for="fName">First Name</label>
<input type="text" name="fName" id="fName">
</div>
<div class="formControl">
<label for="lName">Last Name</label>
<input type="text" name="lName" id="lName">
</div>
</div>
<div class="formControl">
<label for="email">Email</label>
<input type="email" id="email" name="email">
</div>
<div class="formControl">
<label for="message">Message</label>
<textarea name="message" id="message" cols="30" rows="10"></textarea></div>
<input type="submit" class="btn btnPrimary boxShadowIn boxShadowOut" value="Say Hello">
</form>
</div>
</section>
<footer class="flexRow">
<p>&copy; 2021 Rohit Pai all rights reserved</p>
<button class="goBackToTop"></button>
</footer>
</main>
</body>
</html>