mirror of
https://github.com/midou36o/midou36o.github.io
synced 2024-09-19 20:55:34 +05:30
Revamp the website
Stolen from Odyssey's website Co-Authored-By: Alexander J <57069715+Odyssey346@users.noreply.github.com>
This commit is contained in:
Midou36O
parent
26eefdb7f5
commit
6b06cb1c9b
11
bio-and-projects/bio.html
Normal file
11
bio-and-projects/bio.html
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Coming Soon...</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="/src/index.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1 style="text-align: center">Work in progress!</h1>
|
||||||
|
<a style="text-align: center" href="../index.html">get back to main site</a>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
11
bio-and-projects/projects.html
Normal file
11
bio-and-projects/projects.html
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Coming Soon...</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="/src/index.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1 style="text-align: center">Work in progress!</h1>
|
||||||
|
<a style="text-align: center" href="../index.html">get back to main site</a>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
74
index.html
74
index.html
@ -1,31 +1,49 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<title>Pain.</title>
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta charset="UTF-8">
|
||||||
<link rel="stylesheet" type="text/css" href="/styles/theme.css">
|
<link rel="stylesheet" type="text/css" href="src/index.css">
|
||||||
<!--<link rel="icon" href="/src/images/favicon.png" sizes="16x16" type="image/png">-->
|
<title>Midou's site</title>
|
||||||
<meta name="description" content="My website (empty)">
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||||
<!-- General Meta Tags -->
|
<meta property="og:url" content="https://miicord.com">
|
||||||
<meta property="og:url" content="https://midou36o.github.io">
|
<meta property="og:type" content="article">
|
||||||
<meta property="og:type" content="website">
|
<meta property="og:title" content="Midou's welcome page">
|
||||||
<meta property="og:title" content="Midou360">
|
<meta name="theme-color" content="#73ba25" />
|
||||||
<meta property="og:description" content="My website (empty)">
|
<meta property="og:description" content="Midou's welcome page">
|
||||||
<meta property="og:image" content="https://raw.githubusercontent.com/Midou36O/midou36o.github.io/main/small_banner.png">
|
<meta name="description" content="Totally not stolen from Odyssey's website..">
|
||||||
|
<meta name="author" content="Midou">
|
||||||
|
<meta property="og:image" content="https://raw.githubusercontent.com/Midou36O/midou36o.github.io/main/small_banner.png">
|
||||||
|
<meta name="twitter:image" content="https://raw.githubusercontent.com/Midou36O/midou36o.github.io/main/small_banner.png">
|
||||||
|
<meta name="theme-color" content="#5D366C">
|
||||||
|
</head>
|
||||||
|
<body id="content">
|
||||||
|
<div class="center">
|
||||||
|
<div class="middle">
|
||||||
|
<div class="wrapper">
|
||||||
|
<img src="https://avatars.githubusercontent.com/u/45198486?v=4" alt="Midou's profile picture" title="I don't meow and i'm not a furry. But i scream." id="profilepicture" onclick="ComicSans()"/>
|
||||||
|
<div class="h1dance"><h1>Midou</h1></div>
|
||||||
|
<div class="paragraph-start"><p id="para" style="margin-top: -15px;">Some Bored guy that does stuff based on his motivation.</p></div>
|
||||||
|
<hr style="width:60%;text-align:center;color:#fff;border-color: #fff">
|
||||||
|
<a class="sociallink" href="https://github.com/Midou36o" title="Midou's GitHub"><img style="width: 20px; height: 20px;" src="src/images/github.svg" alt="Midou's GitHub"></a>
|
||||||
|
<a class="sociallink" href="https://matrix.to/#/%40midou%3Amatrix.mutahar.rocks" title="Midou's Matrix"><img style="width: 20px; height: 20px;" src="src/images/matrix.svg" alt="Midou's Matrix"></a>
|
||||||
|
<a class="sociallink" href="mailto:miicord@miicord.com" title="Midou's E-Mail (Not working)"><img style="width: 20px; height: 20px;" src="src/images/email.svg" alt="Midou's Email but it doesn't work."></a>
|
||||||
|
|
||||||
<!-- Twitter Meta Tags -->
|
<hr style="width:10%; height: 100; border: solid 0.5px; color:rgb(73, 81, 88);border-color: rgb(73, 81, 88);">
|
||||||
<meta name="twitter:card" content="summary_large_image">
|
<div class="bio-and-projects">
|
||||||
<meta property="twitter:domain" content="midou36o.github.io">
|
<a id="bplink" href="bio-and-projects/bio.html" title="Midou's Bio">Bio</a> | <a id="plink" href="bio-and-projects/projects.html" title="Midou's Projects">Projects</a>
|
||||||
<meta property="twitter:url" content="https://midou36o.github.io">
|
</div>
|
||||||
<meta name="twitter:title" content="Midou360">
|
|
||||||
<meta name="twitter:description" content="My website (empty)">
|
<br>
|
||||||
<meta name="twitter:image" content="https://raw.githubusercontent.com/Midou36O/midou36o.github.io/main/small_banner.png">
|
</div>
|
||||||
|
<br>
|
||||||
<meta name="theme-color" content="#5D366C">
|
<script>
|
||||||
</head>
|
function ComicSans() {
|
||||||
<body>
|
document.getElementById("content").style.fontFamily = "Comic Sans MS, sans-serif";
|
||||||
<p> Placeholder website </p>
|
}
|
||||||
<img src="./nice.png" alt="Nice.">
|
</script>
|
||||||
<!-- if you can't see this image you're an idiot and that's a fact! >:3 -->
|
</div>
|
||||||
|
|
||||||
</body>
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|||||||
1
src/images/email.svg
Normal file
1
src/images/email.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Mail.Ru icon</title><path d="M15.61 12c0 1.99-1.62 3.61-3.61 3.61-1.99 0-3.61-1.62-3.61-3.61 0-1.99 1.62-3.61 3.61-3.61 1.99 0 3.61 1.62 3.61 3.61M12 0C5.383 0 0 5.383 0 12s5.383 12 12 12c2.424 0 4.761-.722 6.76-2.087l.034-.024-1.617-1.879-.027.017A9.494 9.494 0 0 1 12 21.54c-5.26 0-9.54-4.28-9.54-9.54 0-5.26 4.28-9.54 9.54-9.54 5.26 0 9.54 4.28 9.54 9.54a9.63 9.63 0 0 1-.225 2.05c-.301 1.239-1.169 1.618-1.82 1.568-.654-.053-1.42-.52-1.426-1.661V12A6.076 6.076 0 0 0 12 5.93 6.076 6.076 0 0 0 5.93 12 6.076 6.076 0 0 0 12 18.07a6.02 6.02 0 0 0 4.3-1.792 3.9 3.9 0 0 0 3.32 1.805c.874 0 1.74-.292 2.437-.821.719-.547 1.256-1.336 1.553-2.285.047-.154.135-.504.135-.507l.002-.013c.175-.76.253-1.52.253-2.457 0-6.617-5.383-12-12-12" style="fill:#AD0000"/></svg>
|
||||||
|
After Width: | Height: | Size: 839 B |
1
src/images/github.svg
Normal file
1
src/images/github.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24"><title>GitHub icon</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" style="fill:#fff"/></svg>
|
||||||
|
After Width: | Height: | Size: 845 B |
9
src/images/matrix.svg
Normal file
9
src/images/matrix.svg
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg version="1.1" viewBox="0 0 27.9 32" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
|
||||||
|
<title>Matrix (protocol) logo</title>
|
||||||
|
<g transform="translate(-.095 .005)" fill="#FFFFFF">
|
||||||
|
<path d="m27.1 31.2v-30.5h-2.19v-0.732h3.04v32h-3.04v-0.732z"/>
|
||||||
|
<path d="m8.23 10.4v1.54h0.044c0.385-0.564 0.893-1.03 1.49-1.37 0.58-0.323 1.25-0.485 1.99-0.485 0.72 0 1.38 0.14 1.97 0.42 0.595 0.279 1.05 0.771 1.36 1.48 0.338-0.5 0.796-0.941 1.38-1.32 0.58-0.383 1.27-0.574 2.06-0.574 0.602 0 1.16 0.074 1.67 0.22 0.514 0.148 0.954 0.383 1.32 0.707 0.366 0.323 0.653 0.746 0.859 1.27 0.205 0.522 0.308 1.15 0.308 1.89v7.63h-3.13v-6.46c0-0.383-0.015-0.743-0.044-1.08-0.0209-0.307-0.103-0.607-0.242-0.882-0.133-0.251-0.336-0.458-0.584-0.596-0.257-0.146-0.606-0.22-1.05-0.22-0.44 0-0.796 0.085-1.07 0.253-0.272 0.17-0.485 0.39-0.639 0.662-0.159 0.287-0.264 0.602-0.308 0.927-0.052 0.347-0.078 0.697-0.078 1.05v6.35h-3.13v-6.4c0-0.338-7e-3 -0.673-0.021-1-0.0114-0.314-0.0749-0.623-0.188-0.916-0.108-0.277-0.3-0.512-0.55-0.673-0.258-0.168-0.636-0.253-1.14-0.253-0.198 0.0083-0.394 0.042-0.584 0.1-0.258 0.0745-0.498 0.202-0.705 0.374-0.228 0.184-0.422 0.449-0.584 0.794-0.161 0.346-0.242 0.798-0.242 1.36v6.62h-3.13v-11.4z"/>
|
||||||
|
<path d="m0.936 0.732v30.5h2.19v0.732h-3.04v-32h3.03v0.732z"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.4 KiB |
BIN
src/images/profilepicture.webp
Normal file
BIN
src/images/profilepicture.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
120
src/index.css
Normal file
120
src/index.css
Normal file
@ -0,0 +1,120 @@
|
|||||||
|
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--purple-color: #7a00ec;
|
||||||
|
--brighter-purple-color: #9d41f3;
|
||||||
|
--glowish-yellow: rgb(216, 213, 15);
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
overflow-x: hidden;
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.bio-and-projects {
|
||||||
|
text-align: center;
|
||||||
|
position: fixed;
|
||||||
|
left: 5px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h1dance {
|
||||||
|
margin-top: 0;
|
||||||
|
margin: 0;
|
||||||
|
color: var(--brighter-purple-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color:rgb(30, 30, 30);
|
||||||
|
color: var(--brighter-purple-color);
|
||||||
|
margin: 0px;
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sociallink {
|
||||||
|
color: white;
|
||||||
|
animation-name: fadeIn;
|
||||||
|
animation-duration: 3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeIn {
|
||||||
|
0% {opacity: 0;}
|
||||||
|
100% {opacity: 1;}
|
||||||
|
}
|
||||||
|
|
||||||
|
#profilepicture {
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
border-style: solid;
|
||||||
|
border-radius:50%;
|
||||||
|
transition: all .5s ease-in-out;
|
||||||
|
margin-bottom: -20px;
|
||||||
|
color: var(--purple-color)
|
||||||
|
}
|
||||||
|
|
||||||
|
#profilepicture:hover {
|
||||||
|
height: 125px;
|
||||||
|
width: 125px;
|
||||||
|
color: var(--glowish-yellow)
|
||||||
|
}
|
||||||
|
.middle {
|
||||||
|
position: absolute;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
text-align: center;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
a {
|
||||||
|
color:var(--glowish-yellow);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:visited {
|
||||||
|
color:rgb(72, 115, 243);
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
color: crimson;
|
||||||
|
}
|
||||||
|
|
||||||
|
.middle-bottom {
|
||||||
|
height: 200px;
|
||||||
|
width: 400px;
|
||||||
|
position: fixed;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
margin-top: 7%;
|
||||||
|
margin-left: -200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
padding: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.center { /* <center> tag is no longer needed and is considered useless/going to be deprecated???? so im just gonna center using css and div */
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media only screen and (max-width: 600px) {
|
||||||
|
body {
|
||||||
|
font-size: calc(9px + 1vmin);
|
||||||
|
}
|
||||||
|
.pfp-holder {
|
||||||
|
margin-top: -50%;
|
||||||
|
margin-left: 0%;
|
||||||
|
position:static;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
padding: 6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user