167 lines
11 KiB
HTML
167 lines
11 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>
|
|
</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><</span>about<span>></span></a></li>
|
|
<li><a href="#curriculumVitae" class="textShadow"><span><</span>cv<span>></span></a></li>
|
|
<li><a href="#projects" class="textShadow"><span><</span>projects<span>></span></a></li>
|
|
<li><a href="#contact" class="textShadow"><span><</span>contact<span>></span></a></li>
|
|
<li><a href="#" class="textShadow"><span><</span>blog<span>></span></a></li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<div>
|
|
<h1>full stack developer</h1>
|
|
<a href="#sayHello" class="btn btnPrimary boxShadowIn boxShadowOut">Contact Me</a>
|
|
<a href="#about"><i class="fa-solid 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/username">
|
|
<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 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/username/">
|
|
<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 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.co.uk">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path 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:07123456789">
|
|
<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-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" method="POST">
|
|
<div class="flName">
|
|
<div class="formControl">
|
|
<label for="fName">First Name</label>
|
|
<input type="text" name="fName" id="fName" placeholder="John" required>
|
|
</div>
|
|
<div class="formControl">
|
|
<label for="lName">Last Name</label>
|
|
<input type="text" name="lName" id="lName" placeholder="Doe" required>
|
|
</div>
|
|
</div>
|
|
<div class="formControl">
|
|
<label for="email">Email</label>
|
|
<input type="email" id="email" name="email" onchange="(this.value.length !== 0) ? this.classList.add('invalid') : this.classList.remove('invalid');" placeholder="john.doe@example.com" required>
|
|
</div>
|
|
<div class="formControl">
|
|
<label for="subject">Subject</label>
|
|
<input type="text" name="subject" id="subject" placeholder="Something very important..." required/>
|
|
</div>
|
|
<div class="formControl">
|
|
<label for="message">Message</label>
|
|
<textarea name="message" id="message" cols="30" rows="10" placeholder="Heyyy!" required></textarea>
|
|
</div>
|
|
<div class="message hidden" id="contactError">
|
|
<button class="close" type="button">×</button>
|
|
<div></div>
|
|
</div>
|
|
<input type="submit" class="btn btnPrimary boxShadowIn boxShadowOut" value="Say Hello">
|
|
</form>
|
|
</div>
|
|
</section>
|
|
|
|
<footer class="flexRow">
|
|
<div class="spacer"></div>
|
|
<p>© <span id="year"></span> Rohit Pai all rights reserved</p>
|
|
<div class="button">
|
|
<button id="goBackToTop"><i class="fa-solid fa-chevron-up"></i></button>
|
|
</div>
|
|
</footer>
|
|
</main>
|
|
<script src="js/main.js"></script>
|
|
</body>
|
|
</html>
|