Publish
This commit is contained in:
Parker M
commit
6f8c48fe8b
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
.DS_Store
|
||||||
24
LICENSE
Normal file
24
LICENSE
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
This is free and unencumbered software released into the public domain.
|
||||||
|
|
||||||
|
Anyone is free to copy, modify, publish, use, compile, sell, or
|
||||||
|
distribute this software, either in source code form or as a compiled
|
||||||
|
binary, for any purpose, commercial or non-commercial, and by any
|
||||||
|
means.
|
||||||
|
|
||||||
|
In jurisdictions that recognize copyright laws, the author or authors
|
||||||
|
of this software dedicate any and all copyright interest in the
|
||||||
|
software to the public domain. We make this dedication for the benefit
|
||||||
|
of the public at large and to the detriment of our heirs and
|
||||||
|
successors. We intend this dedication to be an overt act of
|
||||||
|
relinquishment in perpetuity of all present and future rights to this
|
||||||
|
software under copyright law.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||||
|
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
||||||
|
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
|
||||||
|
IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
|
||||||
|
OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
|
||||||
|
ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
|
||||||
|
OTHER DEALINGS IN THE SOFTWARE.
|
||||||
|
|
||||||
|
For more information, please refer to <https://unlicense.org>
|
||||||
3
README.md
Normal file
3
README.md
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
# [PKRM.DEV](https://pkrm.dev)
|
||||||
|
|
||||||
|
This is the repo for my personal website ([pkrm.dev](https://pkrm.dev)). Feel free to fork this project or download the code and use it for your needs. Happy coding!
|
||||||
144
contact/index.html
Normal file
144
contact/index.html
Normal file
@ -0,0 +1,144 @@
|
|||||||
|
<!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">
|
||||||
|
<!-- import font awesome through CDN link -->
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
|
||||||
|
<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=Kanit:wght@200;300;400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
<title>Contact | pkrm.dev</title>
|
||||||
|
|
||||||
|
<meta name="robots" content="index, follow">
|
||||||
|
<meta name="theme-color" content="#000" />
|
||||||
|
<meta name="apple-mobile-web-app-title" content="Parker M. | Contact" />
|
||||||
|
|
||||||
|
<meta property="og:title" content="Parker M. | Contact" />
|
||||||
|
<meta property="og:url" content="https://pkrm.dev" />
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<meta property="og:description" content="Fill out this form in order to contact me." />
|
||||||
|
|
||||||
|
<meta name="description" content="Fill out this form in order to contact me." />
|
||||||
|
<meta name="robots" content="index, follow" />
|
||||||
|
<meta name="http-equiv" content="X-Robots-Tag : index, follow" />
|
||||||
|
<meta name="googlebot" content="index, follow" />
|
||||||
|
|
||||||
|
<meta name="twitter:card" content="summary" />
|
||||||
|
<script src="/contact/script.js" defer></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<a href="/">Back Home</a>
|
||||||
|
<div class="container">
|
||||||
|
<form name="contact" onsubmit="event.preventDefault(); checkForm();">
|
||||||
|
<input name="name" placeholder="Name">
|
||||||
|
<input name="email" placeholder="Email">
|
||||||
|
<textarea name="message" placeholder="Message"></textarea>
|
||||||
|
<button>Send</button>
|
||||||
|
</form>
|
||||||
|
<p class="response">This is placeholder text in order to take up space so that elements stay in place.</p>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
font-family: 'Kanit', sans-serif;
|
||||||
|
margin: 0;
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
body{
|
||||||
|
overflow-x: hidden;
|
||||||
|
background-image: url(/bg.png);
|
||||||
|
background-size: cover;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
font-weight: bold;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
padding-top: 5vh;
|
||||||
|
font-size: 4vh;
|
||||||
|
color: #fff;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* "Back Home" media query for mobile */
|
||||||
|
@media only screen and (max-width: 600px) {
|
||||||
|
a {
|
||||||
|
font-size: 6vh;
|
||||||
|
padding-top: 8vh;
|
||||||
|
width: 90%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
form {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
form input, form textarea, form button {
|
||||||
|
color: white;
|
||||||
|
background-color: #242424;
|
||||||
|
border: 2px solid #242424;
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 1vh;
|
||||||
|
margin: 1vh;
|
||||||
|
width: 50vw;
|
||||||
|
font-size: 3vh;
|
||||||
|
resize: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
form button {
|
||||||
|
width: 20vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
form button:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
background-color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Form media query for mobile */
|
||||||
|
@media only screen and (max-width: 600px) {
|
||||||
|
form input, form textarea, form button {
|
||||||
|
width: 70vw;
|
||||||
|
font-size: 3vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
form button {
|
||||||
|
width: 50vw;
|
||||||
|
margin-left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.response {
|
||||||
|
font-size: 2.5vh;
|
||||||
|
text-align: center;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/@mojs/curve-editor"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/@mojs/core"></script>
|
||||||
76
contact/script.js
Normal file
76
contact/script.js
Normal file
@ -0,0 +1,76 @@
|
|||||||
|
const nameInput = document.querySelector('input[name="name"]');
|
||||||
|
const email = document.querySelector('input[name="email"]');
|
||||||
|
const message = document.querySelector('textarea[name="message"]');
|
||||||
|
|
||||||
|
window.onload = validateForm();
|
||||||
|
|
||||||
|
function validateForm() {
|
||||||
|
nameInput.addEventListener('input', () => {
|
||||||
|
if (nameInput.value.length > 0) {
|
||||||
|
nameInput.style.border = '2px solid #242424';
|
||||||
|
} else {
|
||||||
|
nameInput.style.border = '2px solid #FA5B5B';
|
||||||
|
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
email.addEventListener('input', () => {
|
||||||
|
if (email.value.length > 0) {
|
||||||
|
email.style.border = '2px solid #242424';
|
||||||
|
} else {
|
||||||
|
email.style.border = '2px solid #FA5B5B';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
message.addEventListener('input', () => {
|
||||||
|
if (message.value.length > 0) {
|
||||||
|
message.style.border = '2px solid #242424';
|
||||||
|
} else {
|
||||||
|
message.style.border = '2px solid #FA5B5B';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function checkForm() {
|
||||||
|
if (nameInput.value.length > 0 && email.value.length > 0 && message.value.length > 0) {
|
||||||
|
// Send a POST request to the server with the form data in JSON
|
||||||
|
const xhr = new XMLHttpRequest();
|
||||||
|
xhr.open('POST', 'https://contact.pkrm.dev', true);
|
||||||
|
xhr.setRequestHeader("Content-Type", "application/json; charset=UTF-8");
|
||||||
|
|
||||||
|
const body = JSON.stringify({
|
||||||
|
name: nameInput.value,
|
||||||
|
email: email.value,
|
||||||
|
message: message.value
|
||||||
|
});
|
||||||
|
xhr.onload = () => {
|
||||||
|
const response = document.querySelector('.response');
|
||||||
|
if (xhr.status == 200) {
|
||||||
|
response.innerHTML = 'Thank you for submitting your message. I will get back to you as soon as possible.';
|
||||||
|
response.style.visibility = 'visible';
|
||||||
|
response.style.color = "#73C276"
|
||||||
|
nameInput.value = '';
|
||||||
|
email.value = '';
|
||||||
|
message.value = '';
|
||||||
|
} else {
|
||||||
|
response.innerHTML = "Sorry, there was an error when submitting your message. Please try again later.";
|
||||||
|
response.style.visibility = 'visible';
|
||||||
|
response.style.color = "#FA5B5B"
|
||||||
|
}
|
||||||
|
};
|
||||||
|
xhr.send(body);
|
||||||
|
|
||||||
|
} else {
|
||||||
|
if (nameInput.value.length == 0) {
|
||||||
|
nameInput.style.border = '2px solid #FA5B5B';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (email.value.length == 0) {
|
||||||
|
email.style.border = '2px solid #FA5B5B';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (message.value.length == 0) {
|
||||||
|
message.style.border = '2px solid #FA5B5B';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
128
index.html
Normal file
128
index.html
Normal file
@ -0,0 +1,128 @@
|
|||||||
|
<!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">
|
||||||
|
<!-- import font awesome through CDN link -->
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
|
||||||
|
<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=Kanit:wght@200;300;400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
<title>Parker | pkrm.dev</title>
|
||||||
|
|
||||||
|
<meta name="robots" content="index, follow">
|
||||||
|
<meta name="theme-color" content="#000" />
|
||||||
|
<meta name="apple-mobile-web-app-title" content="Parker M." />
|
||||||
|
|
||||||
|
<meta property="og:title" content="Parker M." />
|
||||||
|
<meta property="og:url" content="https://pkrm.dev" />
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<meta property="og:description" content="This is my website. Take a look around." />
|
||||||
|
|
||||||
|
<meta name="description" content="This is my website. Take a look around." />
|
||||||
|
<meta name="robots" content="index, follow" />
|
||||||
|
<meta name="http-equiv" content="X-Robots-Tag : index, follow" />
|
||||||
|
<meta name="googlebot" content="index, follow" />
|
||||||
|
|
||||||
|
<meta name="twitter:card" content="summary" />
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="/style.css">
|
||||||
|
<script src="/script.js" defer></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<section id="main">
|
||||||
|
<a id="hamburger"><i class="fa-solid fa-bars"></i></a>
|
||||||
|
<a id="x"><i class="fa-solid fa-times"></i></a>
|
||||||
|
|
||||||
|
<nav>
|
||||||
|
<a href="#home">Home</a>
|
||||||
|
<a href="#about">About</a>
|
||||||
|
<a href="#projects">Projects</a>
|
||||||
|
<a href="/contact">Contact</a>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<header>
|
||||||
|
<h2>Hi, I'm</h2>
|
||||||
|
<h1>PARKER</h1>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<nav class="icons">
|
||||||
|
<a href="https://github.com/fiji05" target="_blank"><i class="fa-brands fa-github"></i></a>
|
||||||
|
<a href="mailto:contact@pkrm.dev" target="_blank"><i class="fa-solid fa-envelope"></i></a>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<a href="#about" id="about-text"><i class="fa fa-angle-down"></i></a>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="about">
|
||||||
|
<h1>About Me</h1>
|
||||||
|
<p>I am a Senior in high school and enjoy learning about new technologies. I currently use HTML/CSS, Python, Javascript, and SQL. I have competed at the district and state levels in SkillsUSA for Cybersecurity and Programming, as have placed 2nd for the Congressional App Challenge. This year I plan on learning more about web3 and artificial intelligence.</p>
|
||||||
|
|
||||||
|
<a href="#projects"><i class="fa fa-angle-down"></i></a>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="projects">
|
||||||
|
<div class="slider">
|
||||||
|
<input type="radio" name="slider" title="slide1" checked="checked" class="slider__nav"/>
|
||||||
|
<input type="radio" name="slider" title="slide2" class="slider__nav"/>
|
||||||
|
<input type="radio" name="slider" title="slide3" class="slider__nav"/>
|
||||||
|
<input type="radio" name="slider" title="slide4" class="slider__nav"/>
|
||||||
|
<input type="radio" name="slider" title="slide5" class="slider__nav"/>
|
||||||
|
<div class="slider__inner">
|
||||||
|
<div class="slider__contents">
|
||||||
|
<h2 class="slider__caption">PeakPass</h2>
|
||||||
|
<p class="slider__txt">
|
||||||
|
PeakPass is a password manager that also doubles as a tool to check your passwords against those that have been affected in previous data breaches. Along with this we offer a blog to teach users about standards that keep them safe online.
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<a href="https://github.com/peakpass/peakpass" target="_blank" referrerpolicy="no-referrer" class="slider__button">Source Code</a>
|
||||||
|
<a href="https://peakpass.pkrm.dev" target="_blank" referrerpolicy="no-referrer" class="slider__button">View Site</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="slider__contents">
|
||||||
|
<h2 class="slider__caption">Aqua Bot</h2>
|
||||||
|
<p class="slider__txt">
|
||||||
|
A multipurpose Discord bot made with the discord.py 2.0 library. Aqua Bot has features like moderation, an economy, gambling. In addition to this, users can play music from YouTube, Spotify, and SoundCloud thanks to lavalink.py
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<a href="https://github.com/fiji05/aquabot" target="_blank" referrerpolicy="no-referrer" class="slider__button">Source Code</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="slider__contents">
|
||||||
|
<h2 class="slider__caption">elijahmvaldez</h2>
|
||||||
|
<p class="slider__txt">
|
||||||
|
Elijah Valdez is an independent American singer, songwriter, and producer. This website was created to promote the artist's music and social media as well as their online store.
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<a href="https://github.com/fiji05/elijahmvaldez" target="_blank" referrerpolicy="no-referrer" class="slider__button">Source Code</a>
|
||||||
|
<a href="https://elijahmvaldez.com" target="_blank" referrerpolicy="no-referrer" class="slider__button">View Site</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="slider__contents">
|
||||||
|
<h2 class="slider__caption">VaultCheck</h2>
|
||||||
|
<p class="slider__txt">
|
||||||
|
Uses the bitwarden-cli tool, the Twilio API, and the HaveIBeenPwned API in order to check your vault for leaked passwords. If a compromised password is found, it alerts you with a text message.
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<a href="https://github.com/Fiji05/bitwarden-password-checker" target="_blank" referrerpolicy="no-referrer" class="slider__button">Source Code</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="slider__contents">
|
||||||
|
<h2 class="slider__caption">Twilio News</h2>
|
||||||
|
<p class="slider__txt">
|
||||||
|
News Messenger sends the current news and weather, along with an affirmation using the Twilio API. Links can also be shortened using personal or non personal domains with the rebrandly.com API.
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<a href="https://github.com/Fiji05/twilio-news" target="_blank" referrerpolicy="no-referrer" class="slider__button">Source Code</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/@mojs/curve-editor"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/@mojs/core"></script>
|
||||||
220
script.js
Normal file
220
script.js
Normal file
@ -0,0 +1,220 @@
|
|||||||
|
// Define the variables
|
||||||
|
const hamburger = document.querySelector('.fa-bars');
|
||||||
|
const x = document.querySelector('.fa-times');
|
||||||
|
const nav = document.querySelectorAll('nav')[0];
|
||||||
|
const navOptions = nav.querySelectorAll('a');
|
||||||
|
const main = document.getElementById('main');
|
||||||
|
const mainh1 = main.getElementsByTagName('h1')[0];
|
||||||
|
const mainh2 = main.getElementsByTagName('h2')[0];
|
||||||
|
const iconNav = document.querySelectorAll('nav')[1];
|
||||||
|
const icons = document.querySelectorAll('nav')[1].getElementsByTagName('i');
|
||||||
|
const arrow = document.getElementById('about-text')
|
||||||
|
const projects = document.getElementById('projects');
|
||||||
|
|
||||||
|
// If the user is on mobile
|
||||||
|
if (window.innerWidth < 768) {
|
||||||
|
x.style.display = 'none';
|
||||||
|
hamburger.style.display = 'block';
|
||||||
|
nav.style.display = 'none';
|
||||||
|
mobileAnimations();
|
||||||
|
} else {
|
||||||
|
x.style.display = 'none';
|
||||||
|
hamburger.style.display = 'none';
|
||||||
|
nav.style.display = 'flex';
|
||||||
|
desktopAnimations();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Only create listener if the user is on mobile
|
||||||
|
if (window.innerWidth < 768) {
|
||||||
|
// When the hamburger is clicked, show the X and open the menu
|
||||||
|
hamburger.addEventListener('click', function () {
|
||||||
|
hamburger.style.display = 'none';
|
||||||
|
x.style.display = 'block';
|
||||||
|
mainh1.style.display = 'none';
|
||||||
|
mainh2.style.display = 'none';
|
||||||
|
iconNav.style.display = 'none';
|
||||||
|
arrow.style.display = 'none';
|
||||||
|
|
||||||
|
// Slowly fade in the nav with keyframes
|
||||||
|
nav.style.display = 'flex';
|
||||||
|
nav.style.animation = 'fadeIn 0.75s ease-in-out';
|
||||||
|
|
||||||
|
// Lock the scroll
|
||||||
|
document.body.style.overflow = 'hidden';
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Collapse the mobile nav menu
|
||||||
|
function collapseMenu() {
|
||||||
|
hamburger.style.display = 'block';
|
||||||
|
x.style.display = 'none';
|
||||||
|
nav.style.display = 'none';
|
||||||
|
|
||||||
|
// Slowly fade in the h1, h2, icons, and arrow with keyframes
|
||||||
|
mainh1.style.display = 'block';
|
||||||
|
mainh1.style.animation = 'fadeIn 0.75s ease-in-out';
|
||||||
|
mainh2.style.display = 'block';
|
||||||
|
mainh2.style.animation = 'fadeIn 0.75s ease-in-out';
|
||||||
|
iconNav.style.display = 'flex';
|
||||||
|
iconNav.style.animation = 'fadeIn 0.75s ease-in-out';
|
||||||
|
arrow.style.display = 'block';
|
||||||
|
arrow.style.animation = 'fadeIn 0.75s ease-in-out';
|
||||||
|
|
||||||
|
// Unlock the scroll
|
||||||
|
document.body.style.overflow = 'auto';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Only create listener if the user is on mobile
|
||||||
|
if (window.innerWidth < 768) {
|
||||||
|
// When the X is clicked, show the hamburger and close the menu
|
||||||
|
x.addEventListener('click', function () {
|
||||||
|
collapseMenu();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// When a nav link is clicked, close the menu
|
||||||
|
const navLinks = document.querySelectorAll('nav a');
|
||||||
|
navLinks.forEach(function (link) {
|
||||||
|
link.addEventListener('click', function () {
|
||||||
|
// Only collapse the menu if the user is on mobile
|
||||||
|
if (window.innerWidth < 768) {
|
||||||
|
collapseMenu();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Animation for the desktop version
|
||||||
|
function desktopAnimations() {
|
||||||
|
let everythingSlideUp = new mojs.Html({
|
||||||
|
el: main,
|
||||||
|
y: {150: 0},
|
||||||
|
duration: 1000,
|
||||||
|
delay: 250,
|
||||||
|
easing: 'sin.out'
|
||||||
|
}).play();
|
||||||
|
|
||||||
|
let everythingOpacity = new mojs.Html({
|
||||||
|
el: main,
|
||||||
|
opacity: {0: 1},
|
||||||
|
duration: 2000,
|
||||||
|
delay: 250,
|
||||||
|
easing: 'sin.out'
|
||||||
|
}).play();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Animation for the mobile version
|
||||||
|
function mobileAnimations() {
|
||||||
|
let h2ScaleUp = new mojs.Html({
|
||||||
|
el: mainh2,
|
||||||
|
y: {75: 75},
|
||||||
|
opacity: {0: 1},
|
||||||
|
scale: {0.5: 1},
|
||||||
|
duration: 1500,
|
||||||
|
easing: mojs.easing.path('M0,100 C50,100 50,67.578125 50,50 C50,32.421875 50,0 100,0')
|
||||||
|
}).play();
|
||||||
|
|
||||||
|
let h2SlideUp = new mojs.Html({
|
||||||
|
el: mainh2,
|
||||||
|
y: {75: 0},
|
||||||
|
duration: 1500,
|
||||||
|
delay: 1000,
|
||||||
|
easing: mojs.easing.path('M0,100 C50,100 50,67.578125 50,50 C50,32.421875 50,0 100,0')
|
||||||
|
}).play();
|
||||||
|
|
||||||
|
let h1Opacity = new mojs.Html({
|
||||||
|
el: mainh1,
|
||||||
|
opacity: {0: 1},
|
||||||
|
duration: 2000,
|
||||||
|
delay: 1750,
|
||||||
|
easing: 'sin.out'
|
||||||
|
}).play();
|
||||||
|
|
||||||
|
let iconBringIn1 = new mojs.Html({
|
||||||
|
el: icons[0],
|
||||||
|
y: {25: 0},
|
||||||
|
opacity: {0: 1},
|
||||||
|
duration: 1000,
|
||||||
|
delay: 2000,
|
||||||
|
easing: 'sin.out'
|
||||||
|
}).play();
|
||||||
|
|
||||||
|
let iconBringIn2 = new mojs.Html({
|
||||||
|
el: icons[1],
|
||||||
|
y: {25: 0},
|
||||||
|
opacity: {0: 1},
|
||||||
|
duration: 1000,
|
||||||
|
delay: 2250,
|
||||||
|
easing: 'sin.out'
|
||||||
|
}).play();
|
||||||
|
|
||||||
|
let iconBringIn3 = new mojs.Html({
|
||||||
|
el: icons[2],
|
||||||
|
y: {25: 0},
|
||||||
|
opacity: {0: 1},
|
||||||
|
duration: 1000,
|
||||||
|
delay: 2500,
|
||||||
|
easing: 'sin.out'
|
||||||
|
}).play();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Rotate the projects every 4 seconds, only for desktop
|
||||||
|
window.onload = slideProjects();
|
||||||
|
function slideProjects() {
|
||||||
|
const inputs = document.querySelectorAll('input');
|
||||||
|
if (window.innerWidth >= 768) {
|
||||||
|
let i = 0;
|
||||||
|
setInterval(() => {
|
||||||
|
if (i == -1) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
inputs[i].checked = true;
|
||||||
|
i++;
|
||||||
|
|
||||||
|
if (i >= inputs.length) {
|
||||||
|
i = 0;
|
||||||
|
}
|
||||||
|
}, 4000);
|
||||||
|
|
||||||
|
// If one of the inputs is clicked, stop the rotation of the projects
|
||||||
|
inputs.forEach(input => {
|
||||||
|
input.addEventListener('click', () => {
|
||||||
|
i = -1;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// For mobile - whenever the user slides left or right on the screen in the projects
|
||||||
|
// section, slide to the next or previous project
|
||||||
|
projects.addEventListener('touchend', function (e) {
|
||||||
|
// Get the touch position
|
||||||
|
touchEndX = e.changedTouches[0].pageX;
|
||||||
|
|
||||||
|
if (touchStartX > touchEndX) {
|
||||||
|
let checked = document.querySelector('input[name="slider"]:checked');
|
||||||
|
let next = checked.nextElementSibling;
|
||||||
|
|
||||||
|
if (next.nodeName === 'DIV') {
|
||||||
|
document.querySelector('input[name="slider"]').checked = true;
|
||||||
|
} else if (next) {
|
||||||
|
next.checked = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (touchStartX < touchEndX) {
|
||||||
|
let checked = document.querySelector('input[name="slider"]:checked');
|
||||||
|
let prev = checked.previousElementSibling;
|
||||||
|
|
||||||
|
if (prev) {
|
||||||
|
prev.checked = true;
|
||||||
|
} else {
|
||||||
|
document.querySelector('input[name="slider"]:last-of-type').checked = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
function sendContactMessage() {
|
||||||
|
// Send a POST request to https://contact.pkrm.dev with the form data
|
||||||
|
|
||||||
|
}
|
||||||
397
style.css
Normal file
397
style.css
Normal file
@ -0,0 +1,397 @@
|
|||||||
|
* {
|
||||||
|
font-family: 'Kanit', sans-serif;
|
||||||
|
margin: 0;
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
body{
|
||||||
|
overflow-x: hidden;
|
||||||
|
background-image: url(/bg.png);
|
||||||
|
background-size: cover;
|
||||||
|
color: #fff;
|
||||||
|
will-change: transform;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa-angle-down {
|
||||||
|
color: #fff;
|
||||||
|
font-size: 3.5vh;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 5vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa-angle-down:hover {
|
||||||
|
opacity: .6;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Navbar mobile icons */
|
||||||
|
#hamburger i {
|
||||||
|
font-size: 4vh;
|
||||||
|
position: absolute;
|
||||||
|
top: 40px;
|
||||||
|
right: 40px;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#x i {
|
||||||
|
font-size: 4vh;
|
||||||
|
position: absolute;
|
||||||
|
top: 40px;
|
||||||
|
right: 40px;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Main page (Hi I'm Parker) */
|
||||||
|
#main {
|
||||||
|
height: 100vh;
|
||||||
|
width: 100vw;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 3.5vh;
|
||||||
|
margin: 0 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav a:hover {
|
||||||
|
opacity: .6;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icons {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icons i {
|
||||||
|
font-size: 6vh;
|
||||||
|
margin: 2vh 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icons i:hover {
|
||||||
|
opacity: .6;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
text-align: center;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
header h1 {
|
||||||
|
font-size: 16vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
header h2 {
|
||||||
|
font-size: 6vh;
|
||||||
|
animation: bringIn 2s;
|
||||||
|
padding-right: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Main section media query for tablets */
|
||||||
|
@media screen and (max-width: 1280px) {
|
||||||
|
nav a {
|
||||||
|
font-size: 2.5vh;
|
||||||
|
margin-bottom: 7vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
header h1 {
|
||||||
|
font-size: 10vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
header h2 {
|
||||||
|
font-size: 5vh;
|
||||||
|
padding-right: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icons {
|
||||||
|
margin-top: 5vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icons i {
|
||||||
|
font-size: 5vh;
|
||||||
|
margin: 0 25px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Main section media query for mobile */
|
||||||
|
@media screen and (max-width: 600px) {
|
||||||
|
nav {
|
||||||
|
flex-direction: column;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav a {
|
||||||
|
font-size: 3.5vh;
|
||||||
|
margin-bottom: 5vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
flex-direction: column;
|
||||||
|
bottom: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header h1 {
|
||||||
|
font-size: 10vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
header h2 {
|
||||||
|
font-size: 5vh;
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icons {
|
||||||
|
flex-direction: row;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 30vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icons i {
|
||||||
|
font-size: 6vh;
|
||||||
|
margin: 0 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Create the keyframes fade in */
|
||||||
|
@keyframes fadeIn {
|
||||||
|
0% { opacity: 0; }
|
||||||
|
100% { opacity: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes fadeIn {
|
||||||
|
0% { opacity: 0; }
|
||||||
|
100% { opacity: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* About me section */
|
||||||
|
#about {
|
||||||
|
height: 100vh;
|
||||||
|
width: 100vw;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
#about h1 {
|
||||||
|
font-size: 8vh;
|
||||||
|
margin-bottom: 3vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
#about p {
|
||||||
|
font-size: 3vh;
|
||||||
|
width: 50%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* About section media query for tablets */
|
||||||
|
@media screen and (max-width: 1280px) {
|
||||||
|
#about p {
|
||||||
|
font-size: 2.5vh;
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* About section media query for mobile */
|
||||||
|
@media screen and (max-width: 600px) {
|
||||||
|
#about h1 {
|
||||||
|
font-size: 6vh;
|
||||||
|
}
|
||||||
|
#about p {
|
||||||
|
font-size: 2.5vh;
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Slider for Projects - Credit to this codepen - https://codepen.io/maheshambure21/pen/qZZrxy */
|
||||||
|
*, *:before, *:after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider {
|
||||||
|
height: 100vh;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row nowrap;
|
||||||
|
align-items: flex-end;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider__nav {
|
||||||
|
width: 2vh;
|
||||||
|
height: 2vh;
|
||||||
|
margin: 2vh 1vh;
|
||||||
|
border-radius: 50%;
|
||||||
|
z-index: 10;
|
||||||
|
outline: 14px solid white;
|
||||||
|
outline-offset: -14px;
|
||||||
|
cursor: pointer;
|
||||||
|
appearance: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider__nav:checked {
|
||||||
|
-webkit-animation: check 0.4s linear forwards;
|
||||||
|
animation: check 0.4s linear forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider__nav:checked:nth-of-type(1) ~ .slider__inner {
|
||||||
|
left: 0%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider__nav:checked:nth-of-type(2) ~ .slider__inner {
|
||||||
|
left: -100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider__nav:checked:nth-of-type(3) ~ .slider__inner {
|
||||||
|
left: -200%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider__nav:checked:nth-of-type(4) ~ .slider__inner {
|
||||||
|
left: -300%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider__nav:checked:nth-of-type(5) ~ .slider__inner {
|
||||||
|
left: -400%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider__inner {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 500%;
|
||||||
|
height: 100%;
|
||||||
|
-webkit-transition: left 0.7s;
|
||||||
|
transition: left 0.7s;
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider__contents {
|
||||||
|
height: 100%;
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
flex: 1;
|
||||||
|
flex-flow: column nowrap;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider__caption {
|
||||||
|
font-size: 8vh;
|
||||||
|
margin: 3vh;
|
||||||
|
max-width: 75%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider__txt {
|
||||||
|
color: white;
|
||||||
|
max-width: 30%;
|
||||||
|
font-size: 3vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider__button {
|
||||||
|
font-size: 3vh;
|
||||||
|
padding: .75vh 2vh;
|
||||||
|
border-radius: 5px;
|
||||||
|
background: #333;
|
||||||
|
color: white;
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-right: 2vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider__button:hover {
|
||||||
|
opacity: .6;
|
||||||
|
transition: all .2s ease-in-out;
|
||||||
|
-webkit-transition: all .2s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Projects section media query for tablets */
|
||||||
|
@media screen and (max-width: 1280px) {
|
||||||
|
.slider__caption {
|
||||||
|
max-width: 95%;
|
||||||
|
}
|
||||||
|
.slider__txt {
|
||||||
|
font-size: 2.5vh;
|
||||||
|
max-width: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider__button {
|
||||||
|
font-size: 2.5vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider__nav {
|
||||||
|
margin-bottom: 5vh;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Projects section media query for mobile */
|
||||||
|
@media screen and (max-width: 600px) {
|
||||||
|
.slider__caption {
|
||||||
|
font-size: 6vh;
|
||||||
|
max-width: 95%;
|
||||||
|
}
|
||||||
|
.slider__txt {
|
||||||
|
font-size: 2.5vh;
|
||||||
|
max-width: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider__button {
|
||||||
|
font-size: 2.5vh;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin: 0;
|
||||||
|
margin-bottom: 2.5vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider__nav {
|
||||||
|
margin-bottom: 5vh;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* REWORK THIS SHIT BECAUSE I DONT LIKE IT OR UNDERSTAND IT */
|
||||||
|
|
||||||
|
|
||||||
|
@-webkit-keyframes check {
|
||||||
|
50% {
|
||||||
|
outline-color: #333;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
outline-color: #333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes check {
|
||||||
|
50% {
|
||||||
|
outline-color: #333;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
outline-color: #333;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user