Skip to content

Instantly share code, notes, and snippets.

@MayankVikash

MayankVikash/Personal Portfolio

Last active February 23, 2022 06:55
Show Gist options
  • Save MayankVikash/8c3f627dd37c47bab070015b9148701f to your computer and use it in GitHub Desktop.
Save MayankVikash/8c3f627dd37c47bab070015b9148701f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Personal Portfolio
<!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 user-scalable=0">
<!-- Primary Meta Tags -->
<title>Mayank Vikash</title>
<meta name="title" content="Mayank Vikash">
<meta name="description" content="Mayank Vikash (born on 16th August 2007) is a Software Developer and the founder of M SHORTS.">
<meta name="robots" content="index, follow">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="English">
<meta name="revisit-after" content="1 days">
<meta name="author" content="Mayank Vikash">
<meta name="keywords" content="Mayank Vikash, mayankvikash, developer, website, Indian, Official Website, Mayank Vikash Official Website">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://mayankvikash.ml/">
<meta property="og:title" content="Mayank Vikash">
<meta property="og:description" content="Mayank Vikash (born on 16th August 2007) is a Software Developer and the founder of M SHORTS.">
<meta property="og:image" content="https://mayankvikash.ml/Mayank_Logo.png">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://mayankvikash.ml/">
<meta property="twitter:title" content="Mayank Vikash">
<meta property="twitter:description" content="Mayank Vikash (born on 16th August 2007) is a Software Developer and the founder of M SHORTS.">
<meta property="twitter:image" content="https://mayankvikash.ml/Mayank_Logo.png">
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "Person",
"name": "Mayank Vikash",
"url": "https://mayankvikash.ml/",
"image": "https://mayankvikash.ml/Mayank_Logo.png",
"sameAs": [
"https://twitter.com/MayankVikash1",
"https://www.youtube.com/channel/UCzzy9siWUUPmQeLOsxZcuAA",
"https://www.linkedin.com/in/mayank-vikash-466972200/",
"https://soundcloud.com/mayankvikash?id=1000009324",
"https://github.com/MayankVikash",
"https://mayankvikash.ml/",
"https://www.facebook.com/mayank.vikash.56"
],
"jobTitle": "Founder",
"worksFor": {
"@type": "Organization",
"name": "M'"
}
}
</script>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
scroll-behavior: smooth;
}
html {
color: #ffffff;
}
.home-mine {
position: relative;
height: 100vh;
width: 100%;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
background: url('https://images.unsplash.com/photo-1515462277126-2dd0c162007a?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8ZGFyayUyMHRoZW1lfGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60');
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
background-size: 100% 100%;
display: flex;
justify-content: center;
align-items: center;
}
.home-text-logo-mine {
position: absolute;
top: 30%;
font-size: 3rem;
color: rgb(255, 195, 116);
}
.home-text-mine {
position: absolute;
top: 50%;
overflow: hidden;
white-space: nowrap;
font-size: 0.8rem;
width: 54ch;
border-right: .15em solid rgb(255, 255, 255);
animation: typing 4s steps(22) infinite, blink-caret .75s infinite;
color: rgb(255, 255, 255);
}
@keyframes typing {
0%,
25%,
100% {
width: 0;
}
50%,
75% {
width: 54ch;
}
}
/* The typewriter cursor effect */
@keyframes blink-caret {
from,
to {
border-color: transparent
}
50% {
border-color: #ffffff;
}
}
nav {
text-align: center;
}
.about {
position: relative;
width: 100%;
height: fit-content;
}
#about {
height: fit-content;
}
/* Animated Circles CSS */
.circles {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: -1;
box-sizing: border-box;
}
.circles li {
position: absolute;
left: 50%;
display: block;
list-style: none;
width: 20px;
height: 20px;
background: rgba(0, 0, 0, 0.1);
animation: animate 25s linear infinite;
bottom: calc(-150px - 40vh);
max-width: 100%;
}
.circles li:nth-child(1) {
left: 25%;
width: 80px;
height: 80px;
animation-delay: 0s;
animation-duration: 20s;
border-radius: 50%;
border-top-left-radius: 0 !important;
background: rgba(0, 0, 0, 0.1);
max-width: 100%;
}
.circles li:nth-child(2) {
left: 10%;
width: 20px;
height: 20px;
animation-delay: 0s;
animation-duration: 25s;
border-radius: 50%;
border-top-left-radius: 0 !important;
background: rgba(36, 29, 29, 0.1);
max-width: 100%;
}
.circles li:nth-child(3) {
left: 50%;
width: 20px;
height: 20px;
animation-delay: 0s;
animation-duration: 20s;
border-radius: 50%;
border-top-left-radius: 0 !important;
background: rgba(0, 0, 0, 0.1);
max-width: 100%;
}
.circles li:nth-child(4) {
left: 70%;
width: 60px;
height: 60px;
animation-delay: 0s;
animation-duration: 15s;
border-radius: 50%;
border-top-left-radius: 0 !important;
background: rgba(44, 39, 39, 0.1);
max-width: 100%;
}
.circles li:nth-child(5) {
left: 65%;
width: 20px;
height: 20px;
animation-delay: 0s;
animation-duration: 20s;
border-radius: 50%;
border-top-left-radius: 0 !important;
background: rgba(49, 41, 41, 0.1);
max-width: 100%;
}
.circles li:nth-child(6) {
left: 55%;
width: 90px;
height: 90px;
animation-delay: 0s;
animation-duration: 25s;
border-radius: 50%;
border-top-left-radius: 0 !important;
background: rgba(77, 48, 95, 0.1);
max-width: 100%;
}
.circles li:nth-child(7) {
left: 35%;
width: 50px;
height: 50px;
animation-delay: 0s;
animation-duration: 30s;
border-radius: 50%;
border-top-left-radius: 0 !important;
background: rgba(31, 19, 19, 0.1);
max-width: 100%;
}
.circles li:nth-child(8) {
left: 30%;
width: 25px;
height: 25px;
animation-delay: 0s;
animation-duration: 35s;
border-radius: 50%;
border-top-left-radius: 0 !important;
background: rgba(85, 60, 97, 0.1);
max-width: 100%;
}
.circles li:nth-child(9) {
left: 80%;
width: 15px;
height: 15px;
animation-delay: 0s;
animation-duration: 40s;
border-radius: 50%;
border-top-left-radius: 0 !important;
background: rgba(44, 24, 24, 0.1);
max-width: 100%;
}
.circles li:nth-child(10) {
left: 5%;
width: 50px;
height: 50px;
animation-delay: 0s;
animation-duration: 45s;
border-radius: 50%;
border-top-left-radius: 0 !important;
background: rgba(0, 0, 0, 0.1);
max-width: 100%;
}
@keyframes animate {
0% {
transform: translateY(0) rotate(0deg);
opacity: 0;
}
50% {
transform: translateY(-60vh) rotate(360deg);
opacity: 1;
}
100% {
transform: translateY(-120vh) rotate(720deg);
opacity: 0;
}
}
.about-div {
position: absolute;
overflow-wrap: break-word;
}
table.GeneratedTable {
width: 100%;
background-color: #ffffff;
border-collapse: collapse;
border-width: 2px;
border-color: #000000;
border-style: solid;
color: #000000;
}
table.GeneratedTable td,
table.GeneratedTable th {
border-width: 2px;
border-color: #000000;
border-style: solid;
padding: 3px;
}
table.GeneratedTable thead {
background-color: #ffcc00;
}
#table-mylogo-image {
width: 150px;
height: 78.8px;
}
.projects {
position: relative;
width: 100%;
}
#form-email {
width: 100%;
background: #ffa3a33d;
}
#form-message {
width: 100%;
background: #ffa3a33d;
}
#form-button {
width: 80px;
background: #ffcc00;
}
#prd-txt1 {
color: #F4C430;
}
#prd-txt2 {
color: #fff;
}
#prd-txt3 {
color: #138808;
}
#indian {
position: relative;
bottom: 0;
color: #fff;
background-color: #1b1b1b;
left: 0;
width: 100%;
top: 60vh;
}
#contact {
height: fit-content;
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<main>
<nav class="navbar navbar-dark bg-dark">
<a class="navbar-brand" href="#">Mayank Vikash</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#home">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#about">About</a>
<a class="nav-item nav-link" href="#projects">Projects</a>
<a class="nav-item nav-link disabled" href="#contact">Contact</a>
</div>
</div>
</nav>
<div class="home-mine" id="home">
<h1 class="home-text-logo-mine">Mayank Vikash</h1>
<p class="home-text-mine">Mayank Vikash (born on 16th August, 2007) is an Indian developer.</p>
</div> <br>
<div class="about" id="about">
<ul class="circles">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<h1 class="about-h1">About</h1>
<div class="about-div">
<p class="about-p">
Mayank Vikash (born on 16th August, 2007) is a Software Developer. Started in 2017, he learned various languagues (including, Java, Python, JavaScript and PHP) and made number of projects and free services. Some of his popular projects are - M SHORTS,
Personal A.I. Assistant. He is also working on his own game series, Alone. <br>
<b>More about Alone (Game Series)</b> <br> First game of the series: Alone - The Deads are Living <br> Expected Release: 2022 <br>
<a class="twitter-timeline" href="https://twitter.com/MayankVikash1" data-tweet-limit="5">
Tweets by @MayankVikash1</a> <br> <br>
<h2>Social Links</h2>
<a href="https://twitter.com/MayankVikash1" target="_blank" rel="noopener noreferrer">Twitter</a> <br>
<a href="https://mayankvikash.blogspot.com/" target="_blank" rel="noopener noreferrer">Blog</a> <br>
<a href="https://www.trustpilot.com/review/mayankvikash.ml" target="_blank" rel="noopener noreferrer">Trustpilot</a> <br>
<a href="https://mayankvikash.fandom.com" target="_blank" rel="noopener noreferrer">Fandom</a> <br>
<a href="https://g.co/kgs/SggE71" target="_blank" rel="noopener noreferrer">Knowledge Panel</a> <br>
<a href="https://www.youtube.com/channel/UCzzy9siWUUPmQeLOsxZcuAA" target="_blank" rel="noopener noreferrer">YouTube</a> <br>
<a href="https://www.linkedin.com/in/mayank-vikash-466972200/" target="_blank" rel="noopener noreferrer">LinkedIn</a> <br>
<a href="https://www.crunchbase.com/person/mayank-vikash-3403" target="_blank" rel="noopener noreferrer">CruchBase</a> <br>
<a href="https://medium.com/@MayankVikash" target="_blank" rel="noopener noreferrer">Medium</a> <br>
<a href="https://open.spotify.com/artist/3kooWVIGKiSD1JVnyAa2QJ" target="_blank" rel="noopener noreferrer">Spotify</a> <br>
<a href="https://dev.to/mayankvikash" target="_blank" rel="noopener noreferrer">Dev Community</a> <br>
<a href="https://www.freecodecamp.org/mayankvikash" target="_blank" rel="noopener noreferrer">freecodecamp</a> <br>
<a href="https://gist.github.com/MayankVikash" target="_blank" rel="noopener noreferrer">Github Gists</a> <br>
<a href="https://github.com/MayankVikash" target="_blank" rel="noopener noreferrer">Github</a> <br>
<a href="https://mayankvikash.unaux.com/" target="_blank" rel="noopener noreferrer">Contact Form</a> <br>
<a href="https://www.mayankvikash.rf.gd/" target="_blank" rel="noopener noreferrer">Website</a> <br>
<a href="https://mayankvikash.blogspot.com/2021/10/Mayank.html" target="_blank" rel="noopener noreferrer">Bio</a> <br>
<table class="GeneratedTable">
<thead>
<tr>
<td>Name</td>
<td>Mayank Vikash</td>
</tr>
</thead>
<tbody>
<tr>
<td>Image</td>
<td><img id="table-mylogo-image" src="https://mayankvikash.ml/Mayank_Logo.png" alt="Mayank Vikash" srcset=""></td>
</tr>
<tr>
<td>Born</td>
<td>16th August, 2007 (Age: 14)</td>
</tr>
<tr>
<td>Birth Place</td>
<td>Delhi, India</td>
</tr>
<tr>
<td>Occupation</td>
<td>Developer</td>
</tr>
<tr>
<td>Known For</td>
<td>M SHORTS</td>
</tr>
</tbody>
</table>
<br>
</p>
<div class="projects" id="projects">
<ul class="circles">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<h1>Projects</h1>
<ul>
<li>M SHORTS</li>
<li>Personal AI Assistant</li>
<li>Alone - Game Series</li>
<li><a href="https://mayankvikash.blogspot.com/p/projects.html" target="_blank" rel="noopener noreferrer">More</a></li>
</ul>
<h2>Future Projects</h2>
<ul>
<li>Alone - Short Anime</li>
<li>M Links (Url Shortner)</li>
</ul>
</div>
<br>
<div class="contact" id="contact">
<ul class="circles">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<h1>Contact</h1>
<p>
Email: <a href="mailto:support@mayankvikash.ml">support@mayankvikash.ml</a> <br>
<h6>Alternatively, fill this form. You will receive a confirmation email in your inbox, also check the spam folder. Someone will get in touch soon.</h6> <br>
<form action="https://formspree.io/f/moqygjqq" method="POST">
<label>
Your email:
<input type="email" name="_replyto" id="form-email">
</label>
<br>
<label>
Your message:
<textarea name="message" id="form-message"></textarea>
</label> <br>
<button type="submit" id="form-button">Send</button>
</form>
<br>
</p>
<br>
<footer id="indian">
<b>Proudly
<span id="prd-txt1">IN</span><span id="prd-txt2">DI</span><span id="prd-txt3">AN</span> </b>
<br> <br> ©2021 Mayank Vikash
</footer>
</div>
</div>
</div>
</main>
<!-- contact form php -->
<!-- contact form php -->
<!-- Boostrap cdn -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- Boostrap cdn -->
<!-- background shapes movements -->
<script>
jQuery(document).ready(function() {
jQuery(".container-wrap").append(
"<ul class='circles'><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>"
);
});
</script>
<!-- background shapes movements -->
<!-- twitter latest tweets -->
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</body>
</html>
@MayankVikash
Copy link
Author

Thanks for reading, check out how I made a report card program in java: https://mayankvikash.ml//posts/simple-report-card-in-java.html

Made by @MayankVikash

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment