purplebored/purplebored.pl
1
0
Fork 1
Code Issues Pull Requests Actions Activity

Initial Commit

Browse Source
This commit is contained in:
Purplebored
2023-09-14 23:51:57 +02:00
commit 715fa3528d
21 changed files with 593 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored Normal file
View File

@@ -0,0 +1 @@
.idea

33
CONTRIBUTING.md Normal file
View File

@@ -0,0 +1,33 @@
---
## Contributing
Thank you for considering contributing to this project! If you find a typo or a bug, or if you have an idea for an improvement, we welcome your contributions. To ensure a smooth and collaborative process, please follow these guidelines:
### Bug Reports and Feature Requests
If you encounter a bug or have a feature request, please submit an issue on the [issue tracker](link-to-issue-tracker) with a clear and descriptive title and description. Include steps to reproduce the issue or a detailed explanation of the requested feature.
### Pull Requests
If you'd like to contribute code to fix a bug or implement a feature:
1. Fork the repository and create your branch from `main`.
2. Ensure your code adheres to the project's coding conventions and style guide.
3. Include any necessary tests for your changes.
4. Make sure all existing tests pass successfully.
5. Submit a pull request describing the changes you've made. Provide a clear and concise explanation of the problem you're solving and the approach you've taken.
### Quick Guide to Contributing
1. Fork the repository and clone it to your local machine.
2. Install the dependencies outlined in the installation instructions.
3. Make your changes, following the coding conventions and guidelines.
4. Run the tests and ensure they pass without any failures.
5. Commit your changes with descriptive commit messages.
6. Push your changes to your forked repository.
7. Submit a pull request to the main repository, explaining the purpose and details of your changes.
I appreciate your interest in contributing to my small website! Your contributions will be reviewed and, if accepted, merged into the main codebase.
---

44
README.txt Normal file
View File

@@ -0,0 +1,44 @@
--------------
purplebored.pl
--------------
Welcome to my personal website, located at https://purplebored.pl/
This is a simple and goofy website that serves as my personal space on the internet.
My Sites:
----------
- Subdomain: cat.purplebored.pl
- A fun and simple website featuring random cat pictures! [Outdated]
- Subdomain: neko.purplebored.pl
- A clean and pleasant website with neko pictures, similar to the cat site.
Catalog of Main Sites:
----------------------
- Main Site:
https://purplebored.pl/
Contributing
------------
Please read the contribution guidelines which are located in the "CONTRIBUTING.md" file before making any contributions to this project.
License Information
-------------------
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
FAQ:
Q:Was this site written by AI?
A:Short answer no. Long answer somewhat i did used AI to write most of these comments and i did use AI to do some of the things like CSS but i wrote most of the site myself.
|------------------------------------------------------------------------|
| |
|This readme was almost fully written by AmiGGo Chatbot on gg.pl |
| |
|------------------------------------------------------------------------|

5
assets/code.svg Normal file
View File

@@ -0,0 +1,5 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.58536 17.4132C1.80488 16.6327 1.80488 15.3673 2.58536 14.5868L14.5868 2.58536C15.3673 1.80488 16.6327 1.80488 17.4132 2.58536L29.4146 14.5868C30.1951 15.3673 30.1951 16.6327 29.4146 17.4132L17.4132 29.4146C16.6327 30.1951 15.3673 30.1951 14.5868 29.4146L2.58536 17.4132Z" fill="#EE513B"/>
<path d="M12.1489 5.06152L10.9336 6.27686L14.0725 9.41577C13.9455 9.68819 13.8746 9.99201 13.8746 10.3124C13.8746 11.222 14.4461 11.9981 15.2496 12.3012V19.9798C14.4461 20.2829 13.8746 21.059 13.8746 21.9686C13.8746 23.1422 14.826 24.0936 15.9996 24.0936C17.1732 24.0936 18.1246 23.1422 18.1246 21.9686C18.1246 21.144 17.6549 20.429 16.9684 20.0768V12.3117L19.9689 15.3122C19.8481 15.5791 19.7809 15.8754 19.7809 16.1874C19.7809 17.361 20.7323 18.3124 21.9059 18.3124C23.0795 18.3124 24.0309 17.361 24.0309 16.1874C24.0309 15.0138 23.0795 14.0624 21.9059 14.0624C21.6778 14.0624 21.4582 14.0983 21.2522 14.1648L18.0297 10.9423C18.0914 10.7433 18.1246 10.5317 18.1246 10.3124C18.1246 9.13878 17.1732 8.18738 15.9996 8.18738C15.7803 8.18738 15.5688 8.22061 15.3697 8.2823L12.1489 5.06152Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

7
assets/codeberg.svg Normal file
View File

@@ -0,0 +1,7 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg xmlns="http://www.w3.org/2000/svg"
aria-label="Codeberg" role="img"
viewBox="0 0 512 512"><rect
width="512" height="512"
rx="15%"
fill="#ffffff"/><defs><linearGradient id="A" x1="259.804" x2="383.132" y1="161.4" y2="407.835" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ffffff" stop-opacity="0"/><stop offset=".5" stop-color="#71c2ff"/><stop offset="1" stop-color="#39aaff"/></linearGradient></defs><path fill="url(#A)" d="M259.804 161.4c-.44 0-1.1 0-1.32.44l-.44 1.1L332.04 440.21a192.039 192.039 0 0 0 86.77-74.437L261.125 162.06a1.762 1.762 0 0 0-1.321-.661z" opacity=".5" paint-order="stroke markers fill"/><path fill="#2185d0" d="M255.3 71.8a192 192 0 0 0-162 294l160.1-207c.5-.6 1.5-1 2.6-1s2 .4 2.6 1l160 207a192 192 0 0 0 29.4-102c0-106-86-192-192-192a192 192 0 0 0-.7 0z" paint-order="stroke markers fill"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 962 B

4
assets/discord.svg Normal file
View File

@@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18.59 5.88997C17.36 5.31997 16.05 4.89997 14.67 4.65997C14.5 4.95997 14.3 5.36997 14.17 5.69997C12.71 5.47997 11.26 5.47997 9.83001 5.69997C9.69001 5.36997 9.49001 4.95997 9.32001 4.65997C7.94001 4.89997 6.63001 5.31997 5.40001 5.88997C2.92001 9.62997 2.25001 13.28 2.58001 16.87C4.23001 18.1 5.82001 18.84 7.39001 19.33C7.78001 18.8 8.12001 18.23 8.42001 17.64C7.85001 17.43 7.31001 17.16 6.80001 16.85C6.94001 16.75 7.07001 16.64 7.20001 16.54C10.33 18 13.72 18 16.81 16.54C16.94 16.65 17.07 16.75 17.21 16.85C16.7 17.16 16.15 17.42 15.59 17.64C15.89 18.23 16.23 18.8 16.62 19.33C18.19 18.84 19.79 18.1 21.43 16.87C21.82 12.7 20.76 9.08997 18.61 5.88997H18.59ZM8.84001 14.67C7.90001 14.67 7.13001 13.8 7.13001 12.73C7.13001 11.66 7.88001 10.79 8.84001 10.79C9.80001 10.79 10.56 11.66 10.55 12.73C10.55 13.79 9.80001 14.67 8.84001 14.67ZM15.15 14.67C14.21 14.67 13.44 13.8 13.44 12.73C13.44 11.66 14.19 10.79 15.15 10.79C16.11 10.79 16.87 11.66 16.86 12.73C16.86 13.79 16.11 14.67 15.15 14.67Z" fill="#000000"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

3
assets/email.svg Normal file
View File

@@ -0,0 +1,3 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 -0.5 1025 1025" class="icon" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M509.3 606.2c-27.9 0-55.6-9-78.7-26.9L36.4 245.7c-18-15.2-20.2-42.2-5-60.1 15.2-18 42.2-20.2 60.1-5L484.3 513c14.4 11.1 36.5 11.1 52.4-1.2l396.2-331.4c18.1-15.1 45-12.8 60.1 5.4 15.1 18.1 12.7 45-5.4 60.1L590.1 578.3c-24.1 18.7-52.6 27.9-80.8 27.9z" fill="#5F6379" /><path d="M894.8 938.6H129.4c-71.3 0-129.4-58-129.4-129.4v-552c0-71.3 58-129.4 129.4-129.4h765.4c71.3 0 129.4 58 129.4 129.4v552.1c0 71.3-58.1 129.3-129.4 129.3zM129.4 213.2c-24.3 0-44 19.8-44 44v552.1c0 24.3 19.8 44 44 44h765.4c24.3 0 44-19.8 44-44V257.2c0-24.3-19.8-44-44-44H129.4z" fill="#3688FF" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 827 B

7
assets/github.svg Normal file
View File

@@ -0,0 +1,7 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg xmlns="http://www.w3.org/2000/svg"
aria-label="GitHub" role="img"
viewBox="0 0 512 512"><rect
width="512" height="512"
rx="15%"
fill="#1B1817"/><path fill="#ffffff" d="M335 499c14 0 12 17 12 17H165s-2-17 12-17c13 0 16-6 16-12l-1-50c-71 16-86-28-86-28-12-30-28-37-28-37-24-16 1-16 1-16 26 2 40 26 40 26 22 39 59 28 74 22 2-17 9-28 16-35-57-6-116-28-116-126 0-28 10-51 26-69-3-6-11-32 3-67 0 0 21-7 70 26 42-12 86-12 128 0 49-33 70-26 70-26 14 35 6 61 3 67 16 18 26 41 26 69 0 98-60 120-117 126 10 8 18 24 18 48l-1 70c0 6 3 12 16 12z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 664 B

7
assets/gitlab.svg Normal file
View File

@@ -0,0 +1,7 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg xmlns="http://www.w3.org/2000/svg"
aria-label="GitLab" role="img"
viewBox="0 0 512 512"><rect
width="512" height="512"
rx="15%"
fill="#30353e"/><path fill="#e24329" d="M84 215l43-133c2-7 12-7 14 0l115 353L371 82c2-7 12-7 14 0l43 133"/><path fill="#fc6d26" d="M256 435L84 215h100.4zm71.7-220H428L256 435l71.6-220z"/><path fill="#fca326" d="M84 215l-22 67c-2 6 0 13 6 16l188 137zm344 0l22 67c2 6 0 13-6 16L256 435z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 545 B

7
assets/mastodon.svg Normal file
View File

@@ -0,0 +1,7 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg xmlns="http://www.w3.org/2000/svg"
aria-label="Mastodon" role="img"
viewBox="0 0 512 512"
fill="#ffffff"><rect
width="512" height="512"
rx="15%"/><path d="m409 290c-5 24-43 50-85 56-86 11-137-6-137-6 3 13-4 54 70 52 31 0 58-7 58-7l2 27c-51 24-107 15-140 6-67-17-79-90-81-162v-59c0-74 49-96 49-96 50-24 180-22 222 0 0 0 49 22 49 96 0 0 1 55-7 93" fill="#3088d4"/><path d="m358 202v91h-35v-88c0-18-8-27-23-27-18 0-27 11-27 33v47h-34v-47c0-22-9-33-27-33-15 0-23 9-23 27v88h-35v-91c0-18 5-60 52-60 39 0 50 37 50 37s10-37 50-37c45 0 52 42 52 60"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 672 B

1
assets/matrix.svg Normal file
View File

@@ -0,0 +1 @@
<svg fill="#68268c" viewBox="0 0 32.00 32.00" xmlns="http://www.w3.org/2000/svg" stroke="#68268c" stroke-width="0.44800000000000006"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M0.844 0.735v30.531h2.197v0.735h-3.041v-32h3.041v0.735zM10.235 10.412v1.547h0.041c0.412-0.595 0.912-1.047 1.489-1.371 0.579-0.323 1.251-0.484 2-0.484 0.719 0 1.38 0.141 1.975 0.417 0.599 0.281 1.047 0.776 1.359 1.479 0.339-0.5 0.803-0.943 1.38-1.323 0.579-0.38 1.267-0.573 2.063-0.573 0.604 0 1.161 0.073 1.677 0.224 0.521 0.145 0.959 0.38 1.328 0.703 0.365 0.329 0.651 0.751 0.86 1.272 0.203 0.52 0.307 1.151 0.307 1.891v7.635h-3.129v-6.468c0-0.381-0.016-0.745-0.048-1.084-0.020-0.307-0.099-0.604-0.239-0.88-0.131-0.251-0.333-0.459-0.584-0.593-0.255-0.152-0.609-0.224-1.047-0.224-0.443 0-0.797 0.083-1.068 0.249-0.265 0.167-0.489 0.396-0.64 0.667-0.161 0.287-0.265 0.604-0.308 0.927-0.052 0.349-0.077 0.699-0.083 1.048v6.359h-3.131v-6.401c0-0.339-0.005-0.672-0.025-1-0.011-0.317-0.073-0.624-0.193-0.916-0.104-0.281-0.301-0.516-0.552-0.672-0.255-0.167-0.636-0.255-1.136-0.255-0.151 0-0.348 0.031-0.588 0.099-0.24 0.067-0.479 0.192-0.703 0.375-0.229 0.188-0.428 0.453-0.589 0.797-0.161 0.343-0.239 0.796-0.239 1.359v6.62h-3.131v-11.421zM31.156 31.265v-30.531h-2.197v-0.735h3.041v32h-3.041v-0.735z"></path> </g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
assets/pfp.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

32
easteregg/1.css Normal file
View File

@@ -0,0 +1,32 @@
html, body {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.container {
position: relative;
z-index: 1;
text-align: center;
padding-top: 50px;
}
#instruction {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
font-family: 'Noto Sans', sans-serif;
font-size: 24px;
color: white;
}

20
easteregg/1.html Normal file
View File

@@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="1.css">
<link rel="icon" type="image/x-icon" href="1.png">
<meta charset="UTF-8">
<title>You found it #1</title>
</head>
<body>
<video autoplay muted loop>
<source src="1.mp4" type="video/mp4">
</video>
<div class="container">
<h2 id="instruction">Click anywhere to unmute</h2>
</div>
<script src="1.js"></script>
</body>
</html>

10
easteregg/1.js Normal file
View File

@@ -0,0 +1,10 @@
document.addEventListener("DOMContentLoaded", function() {
var video = document.querySelector("video");
var instruction = document.getElementById("instruction");
document.addEventListener("click", function() {
video.play();
video.muted = false;
instruction.style.display = "none";
});
});

BIN
easteregg/1.mp4 Normal file
View File

Binary file not shown.

BIN
easteregg/1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
fish.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 125 KiB

81
index.html Normal file
View File

@@ -0,0 +1,81 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Define Open Graph meta tags for social media sharing -->
<meta property="og:url" content="https://purplebored.pl">
<meta property="og:image" content="https://purplebored.pl/assets/pfp.jpg">
<meta property="og:title" content="Epic Website\Portfolio.">
<meta property="og:description" content="Epic website people just don't trust me when I am saying that white mode is better on this site">
<!-- Define keywords for SEO -->
<meta name="keywords" content="Poland, portfolio, purplebored, niko, purplebright, personal portfolio">
<!-- Set the favicon for the website -->
<link rel="icon" href="fish.png">
<!-- Set the character encoding and viewport -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Set the title of the page -->
<title>Niko :3</title>
<!-- Link the external CSS stylesheet -->
<link rel="stylesheet" href="styles.css">
<!-- Import the 'Titillium Web' font from Google Fonts -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@200&display=swap');
</style>
</head>
<body>
<div class="popup" id="Popup">
<p>This website is still WIP (work in progress) so the site may have out of date information or just look ugly af.</p>
<button onclick="closePopup()">aight aight!</button>
</div>
<!-- Header section -->
<header>
<!-- Dark mode toggle button -->
<button id="darkModeToggle">🌙 Toggle Dark Mode</button>
<!-- "Hi, I'm Niko" text with animated dots -->
<h1 class="animated-text">Hi, I'm Niko<span class="dots-animation">...</span></h1>
</header>
<main>
<!-- The big frame with all the things -->
<div class="frame">
<h2>About Me</h2>
<p>Hi, I am Niko. I currently live in Poland, and I am passionate about web development. I am currently learning HTML, JS, and CSS, and I have plans to expand my knowledge in the future. Some of my future interests include diving deeper into Linux servers, learning Go, and exploring many more exciting things. I'm enthusiastic about this journey and eager to explore the vast possibilities in the world of technology!</p>
<h2>My Skills</h2>
<p>Currently, I am learning JavaScript, but I do have some experience in making Discord bots using discord.js@13.</p>
<h2>My Projects</h2>
<ul class="project-list">
<li>
<h3>pass.purplebored.pl</h3>
<p>Pass.purplebored is a very simple password generator.</p>
<p><a href="https://pass.purplebored.pl" target="_blank">Demo</a></p>
<p><a href="https://github.com/purplebored/project1" target="_blank">Simple-password-generator Source code</a></p>
</li>
<li>
<h3>Neko.purplebored.pl</h3>
<p>A very cool site B).</p>
<p><a href="https://neko.purplebored.pl" target="_blank">Demo</a></p>
<p><a href="https://github.com/PurpleBored/neko.purplebored.pl" target="_blank">neko.purplebored.pl Source Code</a></p>
</li>
</ul>
<h2>Contact me</h2>
<p>You can email me if you want at "purplebored@airmail.cc" or "n1kapl@protonmail.com"!</p>
</div>
</main>
<!-- Footer section -->
<footer class="site-footer">
<!-- Footer links -->
<ul class="footer-links">
<li><a href="mailto:thepolishfemboy@keemail.me" target="_blank"><img class="icon" src="assets/email.svg" alt="Email icon"> Email</a></li>
<li><a href="https://codeberg.org/Purplebored"><img class="icon" src="assets/codeberg.svg" alt="Codeberg icon"> Codeberg</a></li>
<li><a href="https://github.com/PurpleBored" target="_blank"><img class="icon" src="assets/github.svg" alt="GitHub icon"> GitHub</a></li>
<li><a href="https://gitlab.com/PurpleBored" target="_blank"><img class="icon" src="assets/gitlab.svg" alt="GitLab icon"> GitLab</a></li>
<li><a href="https://matrix.to/#/@purplebored:envs.net" target="_blank"><img class="icon" src="assets/matrix.svg" alt="Matrix icon">Matrix</a></li>
<li><a href="https://github.com/purplebored/my-personal-website" target="_blank"><img class="icon" src="assets/code.svg" alt="Source code icon">Source code</a> </li>
</ul>
<!-- Footer text -->
<p id="footer">Made with 💜 by Niko aka PurpleBored.</p>
<!-- JavaScript script -->
<script src="script.js"></script>
</footer>
</body>
</html>
<!-- HTML File by Purplebored. https://purplebored.pl -->

49
script.js Normal file
View File

@@ -0,0 +1,49 @@
// Dark mode toggle and autodetect code
const darkModeToggle = document.getElementById('darkModeToggle');
const body = document.body;
// Check user's preferred color scheme
const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
// Apply the color mode based on users preference
if (prefersDarkMode) {
body.classList.add('dark-mode');
darkModeToggle.textContent = '☀️ Toggle on Light Mode (Its Better trsut me)';
}
darkModeToggle.addEventListener('click', () => {
body.classList.toggle('dark-mode');
// Update button text to be worky worky
if (body.classList.contains('dark-mode')) {
darkModeToggle.textContent = '☀️ Toggle on Light Mode (Its Better trsut me)';
} else {
darkModeToggle.textContent = '🌙 Toggle on Amoled Dark Mode';
}
});
// Easter egg #1
document.addEventListener('DOMContentLoaded', function() {
var easterEgg = document.getElementById('footer');
// Add a click event listener to the easter egg element
easterEgg.addEventListener('click', function() {
// Redirect to 1.html (easter egg)
window.location.href = 'easteregg/1.html';
});
});
// popup wip
document.addEventListener('DOMContentLoaded', function() {
setTimeout(function() {
var cookiePopup = document.getElementById('Popup');
cookiePopup.style.display = 'block';
}, 100); // Adjust the delay (in milliseconds) as per your preference
});
function closePopup() {
var cookiePopup = document.getElementById('Popup');
cookiePopup.style.display = 'none';
}
// JS File by Purplebored. https://purplebored.pl

282
styles.css Normal file
View File

@@ -0,0 +1,282 @@
/* this css has been edited by so many ai things and me i am too scared too even touch it now lmao */
/* Set the font family, margin, padding, and background gradient for the body */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background: linear-gradient(135deg, #aecbcf, #f5f5f5, #f0f0f0);
background-size: 200% 100%;
animation: gradient-animation 8s ease-in-out infinite;
min-height: 100vh; /* Ensure the body takes up at least the full viewport height */
display: flex;
flex-direction: column; /* Arrange elements vertically */
overflow-x: hidden; /* Hide horizontal scrollbar */
}
/* Define the keyframes for the gradient animation */
@keyframes gradient-animation {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/* Customize the styles for the header */
header {
background-color: transparent;
color: #fff;
padding: 20px;
text-align: center;
}
/* Customize the styles for the main content area */
main {
flex: 1; /* Allow the main content to grow and take remaining vertical space */
padding: 20px;
text-align: center;
}
/* Customize the styles for the frame */
.frame {
display: inline-block;
padding: 10px;
border: 2px solid #000;
border-radius: 5px;
background-image: linear-gradient(45deg, #e2e2ff, #fff1e2, #e2e2ff);
background-size: 200% 200%;
animation: gradient-animation 4s ease-in-out infinite;
}
/* Customize the styles for the heading */
h2 {
margin-top: 30px; /* Adjust the spacing */
font-family: 'Titillium Web', sans-serif; /* Use the same font as the animated text */
}
/* Customize the styles for the site footer */
.site-footer {
background-color: transparent;
padding: 10px;
text-align: center;
width: 100%;
opacity: 0.9;
color: #000; /* Set the text color to black */
}
/* Customize the styles for the footer links */
.footer-links {
list-style-type: none;
margin: 0;
padding: 0;
}
.footer-links li {
display: inline;
}
.footer-links a {
color: #000000;
text-decoration: none;
padding: 5px;
}
.footer-links a:hover {
color: #302e2e;
}
.icon {
width: 20px;
height: 20px;
margin-right: 5px;
vertical-align: middle;
}
.footer-links a:hover {
color: #000;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 5px;
}
/* Define the keyframes for the dots animation */
.dots-animation {
display: inline-block;
opacity: 0;
animation: dots-animation 1s steps(3) infinite;
}
@keyframes dots-animation {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
/* Customize the styles for the animated text */
.animated-text {
font-size: 48px;
position: relative;
overflow: hidden;
white-space: nowrap;
font-family: 'Titillium Web', sans-serif;
color: #000;
/* Add frame styles */
display: inline-block;
padding: 5px;
border: 2px solid #fff;
border-radius: 5px;
/* Add gradient animation styles */
background-image: linear-gradient(45deg, #e2e2ff, #fff1e2, #e2e2ff);
background-size: 200% 200%;
animation: gradient-animation 4s ease-in-out infinite;
}
/* Define the styles for dark mode */
.dark-mode {
background: #000000;
color: #fff;
}
.dark-mode header {
background-color: #080808;
color: #fff;
}
.dark-mode main {
background-color: #080808;
color: #fff;
}
.dark-mode .frame {
background-image: none;
border: 2px solid #ebd3d3;
}
.dark-mode h2 {
color: #fff;
}
.dark-mode .site-footer {
background-color: #080808;
color: #fff;
}
.dark-mode .footer-links a {
color: #fff;
}
.dark-mode .animated-text {
background-image: none;
background-color: #000000;
border-color: #fff;
color: #fff;
}
/* Position the header and add a dark mode toggle button */
header {
position: relative;
}
#darkModeToggle {
position: absolute;
top: 10px;
right: 10px;
padding: 5px 10px;
border: none;
border-radius: 5px;
background-color: #4c2e72;
color: #000;
font-size: 16px;
font-weight: bold;
cursor: pointer;
}
.project-button {
display: inline-block;
padding: 10px 20px;
background-color: #007bff;
color: #fff;
font-family: 'Titillium Web', sans-serif;
text-decoration: none;
border-radius: 4px;
transition: background-color 0.3s ease;
}
.project-button:hover {
background-color: #0056b3;
}
.popup {
display: none;
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
background-color: #333;
color: #fff;
padding: 10px 20px;
border-radius: 8px;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2);
z-index: 999;
font-family: 'Titillium', sans-serif;
}
.popup p {
margin: 0;
line-height: 1.5;
}
.popup a {
color: #007bff;
text-decoration: underline;
}
.popup button {
background-color: #007bff;
color: #fff;
border: none;
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
}
.project-list li h3 {
text-align: center;
}
/* Remove list styles for the project list */
.project-list {
list-style: none;
padding-left: 0;
}
/* Add some spacing between projects */
.project-list li {
margin-bottom: 20px;
}
/* Add this CSS to remove the dots animation */
.animated-text {
display: inline-block;
vertical-align: middle;
}
.dots-animation {
display: none;
}
/* Set the color of hyperlinks to a specific color */
a {
color: #0000EE; /* Replace with the color you want */
text-decoration: none; /* Optional: Removes underline on links */
}
/* CSS File by Purplebored. https://purplebored.pl. */