Skip to content

Commit

Permalink
Monochromatic version 1
Browse files Browse the repository at this point in the history
  • Loading branch information
@viralparmarme
viralparmarme committed Oct 9, 2022
1 parent 39115d9 commit 6dac958
Show file tree
Hide file tree
Showing 2 changed files with 373 additions and 5 deletions.
267 changes: 262 additions & 5 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,275 @@
<!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">
<meta name="description" content="The official website of Viral Parmar, the Software Engineer. Follow him everywhere on the internet @viralparmardev">
<meta name="keywords" content="Viral Parmar @viralparmardev https://viralparmar.me viralparmar">
<meta name="author" content="Viral Parmar @viralparmardev https://github.com/viralparmardev">
<meta name="description"
content="The official website of Viral Parmar, the Software Engineer. Follow him everywhere on the internet @viralparmardev">
<meta name="keywords" content="Viral Parmar @viralparmardev https://viralparmar.me viralparmar">
<meta name="author" content="Viral Parmar @viralparmardev https://github.com/viralparmardev">

<title>Viral Parmar - @viralparmardev - Official Website</title>

<link rel="stylesheet" href="./style.css"/>
<link rel="icon" type="image/png" href="./favicon.png"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="./style.css" />
<script src="https://kit.fontawesome.com/979c7b807c.js" crossorigin="anonymous"></script>
<link rel="icon" type="image/png" href="./favicon.png" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lexend+Deca&family=Michroma&display=swap" rel="stylesheet">
<link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
</head>

<body>
<div class="container">
<br>
<br>
<div class="box first-box p-5 animate__animated animate__fadeIn animate__delay-0.5s">
<div class="text-white p-4">
<h1 class="animate__animated animate__backInDown">
<b>Viral Parmar</b>
</h1>
<br>
<br>
<div class="animate__animated animate__backInUp">
<h5>Software Engineer 2 at PayPal</h5>
<h5>AWS Certified Solutions Architect</h5>
<h5>Part-time Music Producer</h5>
<h5>Fintech and Startup Enthusiast</h5>
</div>
<div class="moving-text animate__animated animate__fadeIn animate__slower animate__delay-1s">
<marquee behavior="alternate" direction="left">
<h3>
Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar <br>
Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar <br>
Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar <br>
Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar <br>
</h3>
</marquee>
</div>
</div>
</div>
<br>
<div class="box p-5 animate__animated animate__fadeIn animate__delay-1s">
<div class="text-white p-4">
<h2>
I'm everywhere on the internet as
<a href="https://twitter.com/viralparmardev" target="_blank">
@viralparmardev
</a>
</h2>
<br>
<br>
<div class="row">
<div class="col-lg-6">
<div class="row">
<div class="col-3">
<a href="https://github.com/viralparmardev" target="_blank">
<i class="fa-brands fa-github social"></i>
</a>
</div>
<div class="col-3">
<a href="https://instagram.com/viralparmardev" target="_blank">
<i class="fa-brands fa-instagram social"></i>
</a>
</div>
<div class="col-3">
<a href="https://twitter.com/viralparmardev" target="_blank">
<i class="fa-brands fa-twitter social"></i>
</a>
</div>
<div class="col-3">
<a href="https://linkedin.com/in/viralparmardev" target="_blank">
<i class="fa-brands fa-linkedin social"></i>
</a>
</div>
</div>
</div>
<div class="col-lg-6"></div>
</div>
</div>
</div>
<br>
<div class="box p-5 animate__animated animate__fadeIn animate__delay-1s">
<div class="text-white p-4">
<h2>
Here are some of the things I know
</h2>
<br>
<br>
<div class="row">
<div class="col-lg-9">
<div class="row">
<div class="col-6 col-md-3">
<u>Frontend</u>
<br>
<br>
HTML <br> CSS <br> JavaScript <br> TypeScript <br> Angular <br> React
<br>
<br>
</div>
<div class="col-6 col-md-3">
<u>Backend</u>
<br>
<br>
C++ <br> Java <br> NodeJS <br> Python <br> Oracle <br> MySQL <br> MongoDB
<br>
<br>
</div>
<div class="col-6 col-md-3">
<u>Frameworks</u>
<br>
<br>
Spring Boot <br> ExpressJS <br> Flask <br> Django <br> Git <br> Webpack <br> GraphQL
<br>
<br>
</div>
<div class="col-6 col-md-3">
<u>Cloud - AWS</u>
<br>
<br>
EC2 <br> S3 <br> Lambda <br> API Gateway <br> RDS <br> Elasticache
<br>
<br>
</div>
</div>
</div>
<div class="col-lg-3"></div>
</div>
</div>
</div>
<br>
<div class="box p-5 animate__animated animate__fadeIn animate__delay-2s">
<div class="text-white p-4">
<h2>
My work exeperience so far
</h2>
<br>
<br>
<div class="row">
<div class="col-lg-9 table-responsive">
<table class="table table-borderless text-white">
<thead>
<tr>
<td scope="col"><u>Company</u></th>
<td scope="col"><u>Role</u></th>
<td scope="col"><u>Date</u></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>PayPal</td>
<td>Software Engineer 2</td>
<td>October 2021 - Present</td>
</tr>
<tr>
<td>Karza Technologies</td>
<td>Software Engineer</td>
<td>September 2020 - September 2021</td>
</tr>
<tr>
<td>Oneture Technologies</td>
<td>Software Engineer</td>
<td>June 2019 - September 2020</td>
</tr>
<tr>
<td>Stack Pointer</td>
<td>Web Development Freelancer</td>
<td>March 2018 - April 2019</td>
</tr>
<tr>
<td>Startup Idols</td>
<td>Web Development Intern</td>
<td>December 2017 - March 2018</td>
</tr>
</tbody>
</table>
</div>
<div class="col-lg-3"></div>
</div>
</div>
</div>
<br>
<div class="box p-5 animate__animated animate__fadeIn animate__delay-2s">
<div class="text-white p-4">
<h2>
A few of my achievements and certificates
</h2>
<br>
<br>
AWS - Certified Solutions Architect – Associate Certification Exam - Feb 2021 <br><br>
Google – Foundations of Project Management - Certification - Apr 2021 <br><br>
GATE CS – Qualifier of the Graduate Aptitude Test in Engineering Exam - Mar 2019 <br><br>
AWS – Certified Cloud Practitioner – Certification Exam - Dec 2019 <br><br>
Smart India Hackathon – Finalist – India’s largest Software Hackathon - Apr 2018 <br><br>
IIT Madras – Gold Medalist – Introduction to Modern Application Development - Sep 2017 <br><br>
and many more on my
<a href="https://linkedin.com/in/viralparmardev" target="_blank">
<u>LinkedIn</u>
</a>.
</div>
</div>
<br>
<div class="box p-5 animate__animated animate__fadeIn animate__delay-2s">
<div class="text-white p-4">
<div class="row">
<div class="col-md-8">
<h2>
My online content
</h2>
<br>
<br>
<h6>Tech - <a href="https://blog.viralparmar.me/" target="_blank"><u>Hashnode</u></a></h6>
<br>
<h6>Career - <a href="https://viralparmardev.medium.com/" target="_blank"><u>Medium</u></a></h6>
<br>
<h6>Life - <a href="http://news.viralparmar.me/" target="_blank"><u>Newsletter</u></a></h6>
<br>
<h6>Threads - <a href="https://twitter.com/viralparmardev" target="_blank"><u>Twitter</u></a></h6>
<br>
<h6>And more - <a href="https://peerlist.io/viralparmar" target="_blank"><u>Peerlist</u></a></h6>
</div>
<div class="col-md-4 end-section">
<br>
<br>
Thanks for stopping by!
<br>
<br>
<a href="mailto:viralparmardev@gmail.com" target="_blank">
viralparmardev@gmail.com
</a>
<br>
<br>
<a href="https://drive.google.com/drive/folders/1OPpacdSAHkD5Guszbg3NqjOrROj0HoEO?usp=sharing" target="_blank">
<u>View my Resume</u>
</a>
<br>
<br>
<br>
<br>
This website is designed, developed, deployed and maintained by
<a href="https://twitter.com/viralparmardev" target="_blank">Viral Parmar</a>.
<br>
<br>
Copyright <script>document.write(/\d{4}/.exec(Date())[0])</script>.
All rights reserved.
<br>
<br>
</div>
</div>
</div>
</div>
<br>
<br>
</div>
</body>

</html>
111 changes: 111 additions & 0 deletions style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
body {
font-family: 'Lexend Deca', sans-serif;
text-underline-offset: 0.5em;
background-color: black;
}

.container {
overflow-y: scroll;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* Internet Explorer 10+ */
}

.container::-webkit-scrollbar { /* WebKit */
width: 0;
height: 0;
}

.box {
border: 2px solid rgba(255, 255, 255, 0.4);
border-radius: 0.3em;
border-style: dashed;
}

a {
text-decoration: none;
color: white;
}

a:hover {
text-shadow: 5px 5px 5px blue;
color: white;
}

h1:hover {
text-shadow: 5px 5px 5px red;
}

h2:hover {
text-shadow: 5px 5px 5px red;
}

h1 {
font-family: 'Michroma', sans-serif;
font-size: 6em;
}

h2, h3 {
font-family: 'Michroma', sans-serif;
}

td {
white-space: nowrap;
padding-right: 2em !important;
}

.first-box {
overflow: hidden;
position: relative;
}

.moving-text {
color: rgba(255, 255, 255, 0.3);
position: absolute;
margin-right: -40em;

-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}

.social {
font-size: 3em;
}

.end-section {
border-left: 2px solid rgba(255, 255, 255, 0.4);
border-left-style: dashed;
padding-left: 3em;
}

@media screen and (max-width: 700px) {

h1 {
font-size: 3em;
}

h2 {
font-size: 1.2em;
}

.box {
padding: 0 !important;
}

.social {
font-size: 2em;
}

.end-section {
border-left: none;
padding-left: 1em;
margin-top: 3em;
border-top: 1px solid rgba(255, 255, 255, 0.4);
border-top-style: dashed;
}

.moving-text {
display: none;
}

}

0 comments on commit 6dac958

Please sign in to comment.