Released
This commit is contained in:
Eugene van Aubel
parent
f8aa2e8cef
commit
6d9b011b53
@ -1,2 +1,4 @@
|
|||||||
# Personal-Space
|
# Personal-Space
|
||||||
This site is a glimpse into my world
|
This site is a glimpse into my world
|
||||||
|
|
||||||
|
Sorry for the messy code
|
||||||
80
about.php
Normal file
80
about.php
Normal file
@ -0,0 +1,80 @@
|
|||||||
|
<?php
|
||||||
|
require_once 'src/languages.php';
|
||||||
|
|
||||||
|
// Ensure the session is started
|
||||||
|
if (session_status() === PHP_SESSION_NONE) {
|
||||||
|
session_start();
|
||||||
|
}
|
||||||
|
|
||||||
|
function getCurrentLang() {
|
||||||
|
if (isset($_GET['lang'])) {
|
||||||
|
return $_GET['lang'];
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isset($_COOKIE['preferred_lang'])) {
|
||||||
|
return $_COOKIE['preferred_lang'];
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
$currentLang = getCurrentLang();
|
||||||
|
$_SESSION['lang'] = $currentLang;
|
||||||
|
?>
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>About Me</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<header class="header">
|
||||||
|
<a href="index.php">
|
||||||
|
<div class="logo">
|
||||||
|
<h3 class="logo__symbol">Hello world</h3>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<nav class="menu">
|
||||||
|
<ul class="menu__inner">
|
||||||
|
<li>
|
||||||
|
<a href="about.php"><?php echo t('About')?></a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="projects.php"><?php echo t('Projects')?></a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="blogs.php"><?php echo t('Blogs')?></a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<div class="content">
|
||||||
|
<main class="post">
|
||||||
|
<article class="post__article">
|
||||||
|
<h2 class="post__title"><?php echo t('About me')?></h2>
|
||||||
|
<div class="post__content">
|
||||||
|
<picture>
|
||||||
|
|
||||||
|
</picture>
|
||||||
|
<p><?php echo t("E. Van Aubel is a software development student who is scared of CSS and is living in Amsterdam, Netherlands. They are passionate about free and open-source software and privacy advocacy. Their skills include programming in Python and JavaScript, web development with CSS and HTML, and proficiency in the Laravel framework and Tailwind CSS. E. Van Aubel enjoys movies, anime, and music in their free time. They are equipped with an HP 15s-eq0xxx laptop featuring an AMD Ryzen 3 3200U processor. This young developer is well-positioned to contribute to innovative tech projects with their growing expertise in software development and commitment to open-source principles.")?></p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<hr>
|
||||||
|
<div class="post__info">
|
||||||
|
<p>11-3-2024</p>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="footer__inner">
|
||||||
|
<div class="footer__content">
|
||||||
|
<p>Made by E. van Aubel</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
1996
blog/Parsedown.php
Normal file
1996
blog/Parsedown.php
Normal file
File diff suppressed because it is too large
Load Diff
79
blog/ctf.php
Normal file
79
blog/ctf.php
Normal file
@ -0,0 +1,79 @@
|
|||||||
|
<?php
|
||||||
|
require_once '../src/languages.php';
|
||||||
|
|
||||||
|
// Ensure the session is started
|
||||||
|
if (session_status() === PHP_SESSION_NONE) {
|
||||||
|
session_start();
|
||||||
|
}
|
||||||
|
|
||||||
|
function getCurrentLang() {
|
||||||
|
if (isset($_GET['lang'])) {
|
||||||
|
return $_GET['lang'];
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isset($_COOKIE['preferred_lang'])) {
|
||||||
|
return $_COOKIE['preferred_lang'];
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
$currentLang = getCurrentLang();
|
||||||
|
$_SESSION['lang'] = $currentLang;
|
||||||
|
?>
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Blog</title>
|
||||||
|
<link rel="stylesheet" href="/Webster/style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<header class="header">
|
||||||
|
<a href="../index.php">
|
||||||
|
<div class="logo">
|
||||||
|
<h3 class="logo__symbol">Hello world</h3>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<nav class="menu">
|
||||||
|
<ul class="menu__inner">
|
||||||
|
<li>
|
||||||
|
<a href="../about.php"><?php echo t('About'); ?></a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../projects.php"><?php echo t('Projects'); ?></a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../blogs.php"><?php echo t('Blogs'); ?></a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<div class="content">
|
||||||
|
<main class="post">
|
||||||
|
<?php
|
||||||
|
require_once ('Parsedown.php');
|
||||||
|
|
||||||
|
$Parsedown = new Parsedown();
|
||||||
|
$myblog = fopen("markdowns/ctf.md", "r") or die("Unable to open file!");
|
||||||
|
echo $Parsedown->text(fread($myblog, filesize("markdowns/ctf.md")));
|
||||||
|
fclose($myblog);
|
||||||
|
?>
|
||||||
|
<hr>
|
||||||
|
<div class="post__info">
|
||||||
|
<p>16-6-2024</p>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="footer__inner">
|
||||||
|
<div class="footer__content">
|
||||||
|
<p>Made by E. van Aubel</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
68
blog/drive.php
Normal file
68
blog/drive.php
Normal file
@ -0,0 +1,68 @@
|
|||||||
|
<?php
|
||||||
|
require_once '../src/languages.php';
|
||||||
|
// Ensure the session is started
|
||||||
|
if (session_status() === PHP_SESSION_NONE) {
|
||||||
|
session_start();
|
||||||
|
}
|
||||||
|
|
||||||
|
function getCurrentLang() {
|
||||||
|
if (isset($_GET['lang'])) {
|
||||||
|
return $_GET['lang'];
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isset($_COOKIE['preferred_lang'])) {
|
||||||
|
return $_COOKIE['preferred_lang'];
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
$currentLang = getCurrentLang();
|
||||||
|
$_SESSION['lang'] = $currentLang;
|
||||||
|
?>
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Driving Blog</title>
|
||||||
|
<link rel="stylesheet" href="/Webster/style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<header class="header">
|
||||||
|
<a href="../index.php"><h3>Hello World</h3></a>
|
||||||
|
<nav class="menu">
|
||||||
|
<ul class="menu__inner">
|
||||||
|
<li>
|
||||||
|
<a href="../about.php"><?php echo t('About'); ?></a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../projects.php"><?php echo t('Projects'); ?></a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../blogs.php"><?php echo t('Blogs'); ?></a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<main class="post">
|
||||||
|
<article class="blog__article">
|
||||||
|
<?php
|
||||||
|
require_once ('Parsedown.php');
|
||||||
|
|
||||||
|
$Parsedown = new Parsedown();
|
||||||
|
$myblog = fopen("markdowns/blog.md", "r") or die("Unable to open file!");
|
||||||
|
echo $Parsedown->text(fread($myblog, filesize("markdowns/blog.md")));
|
||||||
|
fclose($myblog);
|
||||||
|
?>
|
||||||
|
</article>
|
||||||
|
<footer>
|
||||||
|
<br>
|
||||||
|
<p>11-3-2024</p>
|
||||||
|
<p>Afbeelding credits naar: Rijschool animo</p>
|
||||||
|
</footer>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
50
blog/markdowns/blog.md
Normal file
50
blog/markdowns/blog.md
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
|
||||||
|
============
|
||||||
|
|
||||||
|
> *markup.rocks* is a client-side app that lets you **edit**, **preview** and
|
||||||
|
> **convert** between documents written in various markup languages in your
|
||||||
|
> browser.
|
||||||
|
|
||||||
|
----
|
||||||
|
|
||||||
|
## Open source!
|
||||||
|
Check out markup.rocks on [github] to view the source code, file issues and
|
||||||
|
contribute.
|
||||||
|
|
||||||
|
markup.rocks wouldn't be possible without these open source projects:
|
||||||
|
|
||||||
|
* [GHCJS] - Amazing Haskell to JavaScript compiler
|
||||||
|
* [Pandoc] - Extraordinary document converter which I shamelessly compiled to
|
||||||
|
JS and built an interface around
|
||||||
|
* [Reflex] and [Reflex-DOM] - Great set of libraries that hold this app
|
||||||
|
together with the Functional Reactive Programming constructs they provide.
|
||||||
|
|
||||||
|
1. First item
|
||||||
|
2. Second item
|
||||||
|
- Nested item
|
||||||
|
3. Third item
|
||||||
|
|
||||||
|
- Item 1
|
||||||
|
- Item 2
|
||||||
|
- Subitem 1
|
||||||
|
- Subitem 2
|
||||||
|
- Item 3
|
||||||
|
|
||||||
|
|
||||||
|
### Building
|
||||||
|
|
||||||
|
The easiest way to get a working GHCJS installation is to use the provided
|
||||||
|
nix-based build environment.
|
||||||
|
|
||||||
|
```bash
|
||||||
|
$ git clone https://github.com/osener/markup.rocks.env
|
||||||
|
$ git clone https://github.com/osener/markup.rocks
|
||||||
|
$ markup.rocks.env/activate # this will take a while
|
||||||
|
$ make -C markup.rocks
|
||||||
|
```
|
||||||
|
|
||||||
|
[github]:https://github.com/osener/markup.rocks
|
||||||
|
[GHCJS]:https://github.com/ghcjs/ghcjs
|
||||||
|
[Pandoc]:http://pandoc.org/
|
||||||
|
[Reflex]:https://github.com/ryantrinkle/reflex
|
||||||
|
[Reflex-DOM]:https://github.com/ryantrinkle/reflex-dom
|
||||||
24
blog/markdowns/ctf.md
Normal file
24
blog/markdowns/ctf.md
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
# I'm done with the CTF
|
||||||
|
|
||||||
|
I recently took on an exciting challenge to complete a Capture The Flag (CTF) for WordPress, and I managed to find all three keys!
|
||||||
|
|
||||||
|
## First Key
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
The first key, with the value **073403c8a58a1f80d943455fb30724b9**, was found at the address `http://[IP ADDRESS OF MR.ROBOT]/key-1-of-3.txt`. It felt amazing to find this key and get one step closer to completing the challenge.
|
||||||
|
|
||||||
|
## Second Key
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Next, I found the second key, with the value **822c73956184f694993bede3eb39f959**, in the `home/robot` directory. It was a euphoric moment to find this key and realize that I was getting closer to the end goal.
|
||||||
|
|
||||||
|
## Third Key
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
The third key, with the value **04787ddef27c3dee1ee161b21670b4e4**, was located in the root directory. It was a challenging hunt, but it felt amazing when I also found this key and successfully completed the challenge.
|
||||||
|
|
||||||
|
|
||||||
|
Overall, it was a great experience to do this CTF for WordPress, and I'm happy to have found all three keys. It tested my skills and helped me expand my knowledge. I'm already looking forward to the next challenge!
|
||||||
102
blogs.php
Normal file
102
blogs.php
Normal file
@ -0,0 +1,102 @@
|
|||||||
|
<?php
|
||||||
|
require_once 'src/languages.php';
|
||||||
|
|
||||||
|
// Ensure the session is started
|
||||||
|
if (session_status() === PHP_SESSION_NONE) {
|
||||||
|
session_start();
|
||||||
|
}
|
||||||
|
|
||||||
|
function getCurrentLang() {
|
||||||
|
if (isset($_GET['lang'])) {
|
||||||
|
return $_GET['lang'];
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isset($_COOKIE['preferred_lang'])) {
|
||||||
|
return $_COOKIE['preferred_lang'];
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
$currentLang = getCurrentLang();
|
||||||
|
$_SESSION['lang'] = $currentLang;
|
||||||
|
?>
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="<?php echo isset($_GET['lang']) ? $_GET['lang'] : 'en'; ?>">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Articles</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<header class="header">
|
||||||
|
<a href="index.php">
|
||||||
|
<div class="logo">
|
||||||
|
<h3 class="logo__symbol">Hello world</h3>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<nav class="menu">
|
||||||
|
<ul class="menu__inner">
|
||||||
|
<li>
|
||||||
|
<a href="about.php"><?php echo t('About')?></a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="projects.php"><?php echo t('Projects')?></a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="blogs.php"><?php echo t('Blogs')?></a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<div class="content">
|
||||||
|
<main class="post">
|
||||||
|
<article class="post__article">
|
||||||
|
<h2 class="post__title"><?php echo t('Blogs')?></h2>
|
||||||
|
<div class="post__content">
|
||||||
|
<p><?php echo t("These are my own articles/blog mostly about my own projects, rant's, thought's etc")?></p>
|
||||||
|
<?php
|
||||||
|
// Load JSON file
|
||||||
|
$json = file_get_contents('json/blogs.json');
|
||||||
|
|
||||||
|
if ($json === false) {
|
||||||
|
die('Error reading the JSON file');
|
||||||
|
}
|
||||||
|
|
||||||
|
$json_data = json_decode($json, true);
|
||||||
|
|
||||||
|
if ($json_data === null) {
|
||||||
|
die('Error decoding the JSON file');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check for language parameter
|
||||||
|
$lang = isset($_SESSION['lang']) ? $_SESSION['lang'] : 'en';
|
||||||
|
// Generate HTML output based on selected language
|
||||||
|
$html = "<ul class='post__lists'>";
|
||||||
|
foreach ($json_data['blogs']['items'] as $blogs) {
|
||||||
|
$html .= "<li class='" . $blogs['class'] . "'>";
|
||||||
|
$html .= "<a href='" . $blogs['href'] . "'>" . $blogs['text'][$lang] . "</a>";
|
||||||
|
$html .= "<span class='post__subtext'>" . $blogs['subtext'][$lang] . "</span>";
|
||||||
|
$html .= "<time class='post__date' datetime='" . $blogs['date'] . "'>" . date('Y-m-d', strtotime($blogs['date'])) . "</time>";
|
||||||
|
$html .= "</li>";
|
||||||
|
}
|
||||||
|
$html .= "</ul>";
|
||||||
|
|
||||||
|
echo $html;
|
||||||
|
?>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="footer__inner">
|
||||||
|
<div class="footer__content">
|
||||||
|
<p><?php echo t('Made by E. van Aubel')?></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
2
halted/check.php
Normal file
2
halted/check.php
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
14
halted/webring.json
Normal file
14
halted/webring.json
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
[
|
||||||
|
{
|
||||||
|
"url": "https://example1.com",
|
||||||
|
"title": "Example 1"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"url": "https://example2.com",
|
||||||
|
"title": "Example 2"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"url": "https://example3.com",
|
||||||
|
"title": "Example 3"
|
||||||
|
}
|
||||||
|
]
|
||||||
64
halted/webrings.php
Normal file
64
halted/webrings.php
Normal file
@ -0,0 +1,64 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Portofolio</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<header class="header">
|
||||||
|
<a href="index.html">
|
||||||
|
<div class="logo">
|
||||||
|
<h3 class="logo__symbol">Hello world</h3>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<nav class="menu">
|
||||||
|
<ul class="menu__inner">
|
||||||
|
<li>
|
||||||
|
<a href="/about.html">About</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/projects.html">Projects</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/articles.html">Articles</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<main class="post">
|
||||||
|
<h1>These are SD webrings:</h1>
|
||||||
|
<?php
|
||||||
|
$json = file_get_contents('webring.json');
|
||||||
|
$webring = json_decode($json, true);
|
||||||
|
if (isset($_GET['action']) && $_GET['action'] === 'random') {
|
||||||
|
$randomIndex = array_rand($webring);
|
||||||
|
header("Location: ". $webring[$randomIndex]['url']);
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
if (!isset($_GET['action']) || $_GET['action']!== 'random') {
|
||||||
|
foreach ($webring as $website) {
|
||||||
|
echo '<a href="'. $website['url']. '">'. $website['title']. '</a><br>';
|
||||||
|
}
|
||||||
|
}?>
|
||||||
|
</main>
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="footer__inner">
|
||||||
|
<div class="footer__content">
|
||||||
|
<a href="https://polarisfm.neocities.org/">Inspired by Polarisfm</a>
|
||||||
|
<p>|</p>
|
||||||
|
<p>Made by E. van Aubel</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
144
index.php
Normal file
144
index.php
Normal file
@ -0,0 +1,144 @@
|
|||||||
|
<?php
|
||||||
|
require_once 'src/languages.php';
|
||||||
|
|
||||||
|
function getCurrentLang() {
|
||||||
|
if (isset($_GET['lang'])) {
|
||||||
|
return $_GET['lang'];
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isset($_COOKIE['preferred_lang'])) {
|
||||||
|
return $_COOKIE['preferred_lang'];
|
||||||
|
}
|
||||||
|
|
||||||
|
return 'en';
|
||||||
|
}
|
||||||
|
|
||||||
|
$currentLang = getCurrentLang();
|
||||||
|
$_SESSION['lang'] = $currentLang;
|
||||||
|
|
||||||
|
if ($_SERVER['REQUEST_METHOD'] == 'GET' && isset($_GET['lang'])) {
|
||||||
|
$lang = $_GET['lang'];
|
||||||
|
setcookie('preferred_lang', $lang, time() + 60*60*24*30);
|
||||||
|
header("Location: index.php?lang=$lang");
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="<?php echo isset($_GET['lang']) ? $_GET['lang'] : 'en'; ?>">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Portofolio</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<header class="header">
|
||||||
|
<a href="index.php">
|
||||||
|
<div class="logo">
|
||||||
|
<h3 class="logo__symbol">Hello world</h3>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<nav class="menu">
|
||||||
|
<ul class="menu__inner">
|
||||||
|
<li>
|
||||||
|
<a href="about.php"><?php echo t('About')?></a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="projects.php"><?php echo t('Projects')?></a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="blogs.php"><?php echo t('Blogs')?></a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<div class="content">
|
||||||
|
<main class="content__main">
|
||||||
|
<div class="content__div">
|
||||||
|
<img class="profile__picture" src="media/image_proxy.png">
|
||||||
|
<img class="handwriting__svg" src=<?php echo t('media/handwriting/welcome.svg')?> alt="">
|
||||||
|
<br>
|
||||||
|
<img class="handwriting__svg" src=<?php echo t('media/handwriting/im-e-van-aubel.svg')?> alt="">
|
||||||
|
<br>
|
||||||
|
<img class="handwriting__svg" src=<?php echo t('media/handwriting/im-a-software-developer.svg')?> alt="">
|
||||||
|
<br>
|
||||||
|
</div>
|
||||||
|
<?php
|
||||||
|
$json = file_get_contents('json/socials.json');
|
||||||
|
|
||||||
|
if ($json === false) {
|
||||||
|
die('Error reading the JSON file');
|
||||||
|
}
|
||||||
|
|
||||||
|
$json_data = json_decode($json, true);
|
||||||
|
|
||||||
|
if ($json_data === null) {
|
||||||
|
die('Error decoding the JSON file');
|
||||||
|
}
|
||||||
|
$html = '<div class="content__menu">';
|
||||||
|
foreach ($json_data['socials']['links'] as $link) {
|
||||||
|
$html .= '<a href="' . htmlspecialchars($link['href']) . '">';
|
||||||
|
$html .= '<img class="icon__svg" src="' . htmlspecialchars($link['iconSrc']) . '" alt="' . htmlspecialchars($link['iconAlt']) . '"/>';
|
||||||
|
$html .= '</a>';
|
||||||
|
}
|
||||||
|
|
||||||
|
$html .= '</ul>';
|
||||||
|
$html .= '</div>';
|
||||||
|
|
||||||
|
echo $html;
|
||||||
|
?>
|
||||||
|
</main>
|
||||||
|
<main class="post">
|
||||||
|
<article class="post__article">
|
||||||
|
<ul class="post__lists">
|
||||||
|
<li class="post__list"><?php echo t('Highlighted Skills')?></li>
|
||||||
|
<a href="https://www.python.org/"><img class="icon__svg" src="media/python.svg" alt="python icon"></a>
|
||||||
|
<a href="https://www.php.net/"><img class="icon__svg" src="media/php.svg" alt="php icon"></a>
|
||||||
|
<a href="https://developer.mozilla.org/en-US/docs/Web/javascript"><img class="icon__svg" src="media/javascript.svg" alt="javascript icon"></a>
|
||||||
|
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS"><img class="icon__svg" src="media/css3.svg" alt="css icon"></a>
|
||||||
|
</ul>
|
||||||
|
<ul class="post__lists">
|
||||||
|
<li class="post__list"><?php echo t('Highlighted Project')?></li>
|
||||||
|
<section class="post__icons">
|
||||||
|
<li class="post__list"> <a href="https://github.com/JerukPurut404/EindOpdrachtVGM"><img class="icon__svg" src="media/github.svg" alt="github icon"></a> </li>
|
||||||
|
<li class="post__list"> <a href="https://35023.hosts1.ma-cloud.nl/EindOpdrachtVGM/Eugene's_folder/index.html"><img class="icon__svg" src="media/globe.svg" alt="website icon"></a></li>
|
||||||
|
</section>
|
||||||
|
<li class="post__list"><?php echo t('National Videogame Museum Redesign Website.')?></li>
|
||||||
|
</ul>
|
||||||
|
<li class="box-wrapper">
|
||||||
|
<ul class="box__lists">
|
||||||
|
<li class="box__list"><?php echo t('View my CV here:')?></li>
|
||||||
|
<section class="box__icons">
|
||||||
|
<a href="https://rxresu.me/john.krow/e-van-aubel" class="cv__button"><?php echo t('Go to my CV')?></a>
|
||||||
|
</section>
|
||||||
|
</ul>
|
||||||
|
<ul class="box__lists">
|
||||||
|
<li class="box__list"><?php echo t('Select Language:')?></li>
|
||||||
|
<section class="box__icons">
|
||||||
|
<li class="box__list">
|
||||||
|
<a href="index.php?lang=nl" class="language__button">NL</a>
|
||||||
|
</li>
|
||||||
|
<li class="box__list">
|
||||||
|
<a href="index.php?lang=en" class="language__button">EN</a>
|
||||||
|
</li>
|
||||||
|
<li class="box__list">
|
||||||
|
<a href="index.php?lang=id" class="language__button">ID</a>
|
||||||
|
</li>
|
||||||
|
</section>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</article>
|
||||||
|
</main>
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="footer__inner">
|
||||||
|
<div class="footer__content">
|
||||||
|
<p><?php echo t('Made by E. van Aubel')?></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
36
json/blogs.json
Normal file
36
json/blogs.json
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
{
|
||||||
|
"blogs": {
|
||||||
|
"items": [
|
||||||
|
{
|
||||||
|
"class": "blog__list",
|
||||||
|
"href": "blog/drive.php",
|
||||||
|
"text": {
|
||||||
|
"en": "Auto driving in brief",
|
||||||
|
"nl": "Auto rijden in het kort",
|
||||||
|
"id": "Mengemudi mobil secara singkat"
|
||||||
|
},
|
||||||
|
"subtext": {
|
||||||
|
"en": "A short introduction about automating control systems.",
|
||||||
|
"nl": "Een korte inleiding over het automatiseren van controlesystemen.",
|
||||||
|
"id": "Pengantar singkat tentang sistem kontrol otomatis."
|
||||||
|
},
|
||||||
|
"date": "2023-05-10"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"class": "blog__list",
|
||||||
|
"href": "blog/ctf.php",
|
||||||
|
"text": {
|
||||||
|
"en": "I'm done with the CTF",
|
||||||
|
"nl": "Ik ben klaar met de CTF",
|
||||||
|
"id": "Saya menyelesaikan CTF"
|
||||||
|
},
|
||||||
|
"subtext": {
|
||||||
|
"en": "Report of my recent challenge to complete a Capture The Flag (CTF) for WordPress.",
|
||||||
|
"nl": "Verslag van mijn recente uitdaging om een Capture The Flag (CTF) voor WordPress te voltooien.",
|
||||||
|
"id": "Laporan tentang tantangan saya baru-baru ini untuk menyelesaikan Capture The Flag (CTF) untuk WordPress."
|
||||||
|
},
|
||||||
|
"date": "2023-05-15"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
56
json/projects.json
Normal file
56
json/projects.json
Normal file
@ -0,0 +1,56 @@
|
|||||||
|
{
|
||||||
|
"projects": [
|
||||||
|
{
|
||||||
|
"title": {
|
||||||
|
"en": "National Videogame Museum Redesign Website.",
|
||||||
|
"nl": "National Videogame Museum Herontwerp Website.",
|
||||||
|
"id": "Desain Ulang Situs Web Museum Videogame Nasional."
|
||||||
|
},
|
||||||
|
"links": [
|
||||||
|
{
|
||||||
|
"type": "GitHub",
|
||||||
|
"url": "https://github.com/JerukPurut404/EindOpdrachtVGM",
|
||||||
|
"icon": "github.svg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "Website",
|
||||||
|
"url": "https://35023.hosts1.ma-cloud.nl/EindOpdrachtVGM/Eugene's_folder/index.html",
|
||||||
|
"icon": "globe.svg"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": {
|
||||||
|
"en": "Discontinued 9292chan",
|
||||||
|
"nl": "Stopgezette 9292chan",
|
||||||
|
"id": "Dihentikan 9292chan"
|
||||||
|
},
|
||||||
|
"links": [
|
||||||
|
{
|
||||||
|
"type": "GitHub",
|
||||||
|
"url": "https://github.com/JerukPurut404/9292chan",
|
||||||
|
"icon": "github.svg"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": {
|
||||||
|
"en": "Based Dictionary",
|
||||||
|
"nl": "Based Woordenboek",
|
||||||
|
"id": "Kamus Based"
|
||||||
|
},
|
||||||
|
"links": [
|
||||||
|
{
|
||||||
|
"type": "GitHub",
|
||||||
|
"url": "https://github.com/JerukPurut404/BasedDictionary",
|
||||||
|
"icon": "github.svg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "Website",
|
||||||
|
"url": "https://35023.hosts1.ma-cloud.nl/baseddict/",
|
||||||
|
"icon": "globe.svg"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
28
json/socials.json
Normal file
28
json/socials.json
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
{
|
||||||
|
"socials": {
|
||||||
|
"type": "div",
|
||||||
|
"className": "content__menu",
|
||||||
|
"links": [
|
||||||
|
{
|
||||||
|
"href": "mailto:privateduck@renn.es",
|
||||||
|
"iconSrc": "media/mail.svg",
|
||||||
|
"iconAlt": "mail icon"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"href": "https://github.com/JerukPurut404",
|
||||||
|
"iconSrc": "media/github.svg",
|
||||||
|
"iconAlt": "github icon"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"href": "https://anilist.co/user/JerukPurut/",
|
||||||
|
"iconSrc": "media/anilist.svg",
|
||||||
|
"iconAlt": "Anilist icon"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"href": "https://www.linkedin.com/in/e-van-aubel",
|
||||||
|
"iconSrc": "media/linkedin.svg",
|
||||||
|
"iconAlt": "linkedin icon"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
media/Keren.jpg
Normal file
BIN
media/Keren.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 182 KiB |
BIN
media/achteruit.jpg
Normal file
BIN
media/achteruit.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 197 KiB |
1
media/anilist.svg
Normal file
1
media/anilist.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>AniList</title><path d="M6.361 2.943L0 21.056h4.942l1.077-3.133H11.4l1.052 3.133H22.9c.71 0 1.1-.392 1.1-1.101V17.53c0-.71-.39-1.101-1.1-1.101h-6.483V4.045c0-.71-.392-1.102-1.101-1.102h-2.422c-.71 0-1.101.392-1.101 1.102v1.064l-.758-2.166zm2.324 5.948l1.688 5.018H7.144z"/></svg>
|
||||||
|
After Width: | Height: | Size: 357 B |
BIN
media/blogs/ctf/8hKuBbzL.jpg
Normal file
BIN
media/blogs/ctf/8hKuBbzL.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 942 KiB |
BIN
media/blogs/ctf/QKNmVAwi.jpg
Normal file
BIN
media/blogs/ctf/QKNmVAwi.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
BIN
media/blogs/ctf/p8UpweNt.jpg
Normal file
BIN
media/blogs/ctf/p8UpweNt.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 852 KiB |
1
media/css3.svg
Normal file
1
media/css3.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>CSS3</title><path d="M1.5 0h21l-1.91 21.563L11.977 24l-8.565-2.438L1.5 0zm17.09 4.413L5.41 4.41l.213 2.622 10.125.002-.255 2.716h-6.64l.24 2.573h6.182l-.366 3.523-2.91.804-2.956-.81-.188-2.11h-2.61l.29 3.855L12 19.288l5.373-1.53L18.59 4.414z"/></svg>
|
||||||
|
After Width: | Height: | Size: 328 B |
BIN
media/file-parkeren.jpg
Normal file
BIN
media/file-parkeren.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 174 KiB |
1
media/github.svg
Normal file
1
media/github.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-github"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
|
||||||
|
After Width: | Height: | Size: 470 B |
1
media/globe.svg
Normal file
1
media/globe.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#000000"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 287 B |
1
media/handwriting/ik-ben-e-van-aubel.svg
Normal file
1
media/handwriting/ik-ben-e-van-aubel.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 33 KiB |
1
media/handwriting/ik-ben-een-software-developer.svg
Normal file
1
media/handwriting/ik-ben-een-software-developer.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 58 KiB |
1
media/handwriting/im-a-software-developer.svg
Normal file
1
media/handwriting/im-a-software-developer.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 51 KiB |
1
media/handwriting/im-e-van-aubel.svg
Normal file
1
media/handwriting/im-e-van-aubel.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 31 KiB |
1
media/handwriting/nama-saya-e-van-aubel.svg
Normal file
1
media/handwriting/nama-saya-e-van-aubel.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 43 KiB |
1
media/handwriting/saya-seorang-software-developer.svg
Normal file
1
media/handwriting/saya-seorang-software-developer.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 66 KiB |
1
media/handwriting/selamat-datang.svg
Normal file
1
media/handwriting/selamat-datang.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 34 KiB |
1
media/handwriting/welcome.svg
Normal file
1
media/handwriting/welcome.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 17 KiB |
1
media/handwriting/welkom.svg
Normal file
1
media/handwriting/welkom.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 15 KiB |
1
media/javascript.svg
Normal file
1
media/javascript.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>JavaScript</title><path d="M0 0h24v24H0V0zm22.034 18.276c-.175-1.095-.888-2.015-3.003-2.873-.736-.345-1.554-.585-1.797-1.14-.091-.33-.105-.51-.046-.705.15-.646.915-.84 1.515-.66.39.12.75.42.976.9 1.034-.676 1.034-.676 1.755-1.125-.27-.42-.404-.601-.586-.78-.63-.705-1.469-1.065-2.834-1.034l-.705.089c-.676.165-1.32.525-1.71 1.005-1.14 1.291-.811 3.541.569 4.471 1.365 1.02 3.361 1.244 3.616 2.205.24 1.17-.87 1.545-1.966 1.41-.811-.18-1.26-.586-1.755-1.336l-1.83 1.051c.21.48.45.689.81 1.109 1.74 1.756 6.09 1.666 6.871-1.004.029-.09.24-.705.074-1.65l.046.067zm-8.983-7.245h-2.248c0 1.938-.009 3.864-.009 5.805 0 1.232.063 2.363-.138 2.711-.33.689-1.18.601-1.566.48-.396-.196-.597-.466-.83-.855-.063-.105-.11-.196-.127-.196l-1.825 1.125c.305.63.75 1.172 1.324 1.517.855.51 2.004.675 3.207.405.783-.226 1.458-.691 1.811-1.411.51-.93.402-2.07.397-3.346.012-2.054 0-4.109 0-6.179l.004-.056z"/></svg>
|
||||||
|
After Width: | Height: | Size: 974 B |
1
media/linkedin.svg
Normal file
1
media/linkedin.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#000000"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg>
|
||||||
|
After Width: | Height: | Size: 275 B |
1
media/mail.svg
Normal file
1
media/mail.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#000000"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
|
||||||
|
After Width: | Height: | Size: 233 B |
1
media/php.svg
Normal file
1
media/php.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>PHP</title><path d="M7.01 10.207h-.944l-.515 2.648h.838c.556 0 .97-.105 1.242-.314.272-.21.455-.559.55-1.049.092-.47.05-.802-.124-.995-.175-.193-.523-.29-1.047-.29zM12 5.688C5.373 5.688 0 8.514 0 12s5.373 6.313 12 6.313S24 15.486 24 12c0-3.486-5.373-6.312-12-6.312zm-3.26 7.451c-.261.25-.575.438-.917.551-.336.108-.765.164-1.285.164H5.357l-.327 1.681H3.652l1.23-6.326h2.65c.797 0 1.378.209 1.744.628.366.418.476 1.002.33 1.752a2.836 2.836 0 0 1-.305.847c-.143.255-.33.49-.561.703zm4.024.715l.543-2.799c.063-.318.039-.536-.068-.651-.107-.116-.336-.174-.687-.174H11.46l-.704 3.625H9.388l1.23-6.327h1.367l-.327 1.682h1.218c.767 0 1.295.134 1.586.401s.378.7.263 1.299l-.572 2.944h-1.389zm7.597-2.265a2.782 2.782 0 0 1-.305.847c-.143.255-.33.49-.561.703a2.44 2.44 0 0 1-.917.551c-.336.108-.765.164-1.286.164h-1.18l-.327 1.682h-1.378l1.23-6.326h2.649c.797 0 1.378.209 1.744.628.366.417.477 1.001.331 1.751zM17.766 10.207h-.943l-.516 2.648h.838c.557 0 .971-.105 1.242-.314.272-.21.455-.559.551-1.049.092-.47.049-.802-.125-.995s-.524-.29-1.047-.29z"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.1 KiB |
1
media/python.svg
Normal file
1
media/python.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Python</title><path d="M14.25.18l.9.2.73.26.59.3.45.32.34.34.25.34.16.33.1.3.04.26.02.2-.01.13V8.5l-.05.63-.13.55-.21.46-.26.38-.3.31-.33.25-.35.19-.35.14-.33.1-.3.07-.26.04-.21.02H8.77l-.69.05-.59.14-.5.22-.41.27-.33.32-.27.35-.2.36-.15.37-.1.35-.07.32-.04.27-.02.21v3.06H3.17l-.21-.03-.28-.07-.32-.12-.35-.18-.36-.26-.36-.36-.35-.46-.32-.59-.28-.73-.21-.88-.14-1.05-.05-1.23.06-1.22.16-1.04.24-.87.32-.71.36-.57.4-.44.42-.33.42-.24.4-.16.36-.1.32-.05.24-.01h.16l.06.01h8.16v-.83H6.18l-.01-2.75-.02-.37.05-.34.11-.31.17-.28.25-.26.31-.23.38-.2.44-.18.51-.15.58-.12.64-.1.71-.06.77-.04.84-.02 1.27.05zm-6.3 1.98l-.23.33-.08.41.08.41.23.34.33.22.41.09.41-.09.33-.22.23-.34.08-.41-.08-.41-.23-.33-.33-.22-.41-.09-.41.09zm13.09 3.95l.28.06.32.12.35.18.36.27.36.35.35.47.32.59.28.73.21.88.14 1.04.05 1.23-.06 1.23-.16 1.04-.24.86-.32.71-.36.57-.4.45-.42.33-.42.24-.4.16-.36.09-.32.05-.24.02-.16-.01h-8.22v.82h5.84l.01 2.76.02.36-.05.34-.11.31-.17.29-.25.25-.31.24-.38.2-.44.17-.51.15-.58.13-.64.09-.71.07-.77.04-.84.01-1.27-.04-1.07-.14-.9-.2-.73-.25-.59-.3-.45-.33-.34-.34-.25-.34-.16-.33-.1-.3-.04-.25-.02-.2.01-.13v-5.34l.05-.64.13-.54.21-.46.26-.38.3-.32.33-.24.35-.2.35-.14.33-.1.3-.06.26-.04.21-.02.13-.01h5.84l.69-.05.59-.14.5-.21.41-.28.33-.32.27-.35.2-.36.15-.36.1-.35.07-.32.04-.28.02-.21V6.07h2.09l.14.01zm-6.47 14.25l-.23.33-.08.41.08.41.23.33.33.23.41.08.41-.08.33-.23.23-.33.08-.41-.08-.41-.23-.33-.33-.23-.41-.08-.41.08z"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
BIN
media/vooruit.jpg
Normal file
BIN
media/vooruit.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 207 KiB |
100
old_html_pages/old_index.html
Normal file
100
old_html_pages/old_index.html
Normal file
@ -0,0 +1,100 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Portofolio</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<header class="header">
|
||||||
|
<a href="index.html">
|
||||||
|
<div class="logo">
|
||||||
|
<h3 class="logo__symbol">Hello world</h3>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<nav class="menu">
|
||||||
|
<ul class="menu__inner">
|
||||||
|
<li>
|
||||||
|
<a href="/about.html">About</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/projects.html">Projects</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/check.php">Blogs</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<div class="content">
|
||||||
|
<main class="content__main">
|
||||||
|
<div class="content__div">
|
||||||
|
<img class="profile__picture" src="media/image_proxy.png">
|
||||||
|
<img class="handwriting__svg" src="media/handwriting/welcome.svg" alt="">
|
||||||
|
<br>
|
||||||
|
<img class="handwriting__svg" src="media/handwriting/im-e-van-aubel.svg" alt="">
|
||||||
|
<br>
|
||||||
|
<img class="handwriting__svg" src="media/handwriting/im-a-software-developer.svg" alt="">
|
||||||
|
<br>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="content__menu">
|
||||||
|
<a href="mailto:privateduck@renn.es"><img class="icon__svg" src="media/mail.svg" alt="mail icon"></a>
|
||||||
|
<a href="https://github.com/JerukPurut404"><img class="icon__svg" src="media/github.svg" alt="github icon"></a>
|
||||||
|
<a href="https://anilist.co/user/JerukPurut/"><img class="icon__svg" src="media/anilist.svg" alt="Anilist icon"></a>
|
||||||
|
<a href="https://www.linkedin.com/in/e-van-aubel"><img class="icon__svg" src="media/linkedin.svg" alt="linkedin icon"></a>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<main class="post">
|
||||||
|
<article class="post__article">
|
||||||
|
<ul class="post__lists">
|
||||||
|
<li class="post__list">Highlighted Skills</li>
|
||||||
|
<a href="https://www.python.org/"><img class="icon__svg" src="media/python.svg" alt="python icon"></a>
|
||||||
|
<a href="https://www.php.net/"><img class="icon__svg" src="media/php.svg" alt="php icon"></a>
|
||||||
|
<a href="https://developer.mozilla.org/en-US/docs/Web/javascript"><img class="icon__svg" src="media/javascript.svg" alt="javascript icon"></a>
|
||||||
|
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS"><img class="icon__svg" src="media/css3.svg" alt="css icon"></a>
|
||||||
|
</ul>
|
||||||
|
<ul class="post__lists">
|
||||||
|
<li class="post__list">Highlighted Project</li>
|
||||||
|
<section class="post__icons">
|
||||||
|
<li class="post__list"> <a href="https://github.com/JerukPurut404/EindOpdrachtVGM"><img class="icon__svg" src="media/github.svg" alt="github icon"></a> </li>
|
||||||
|
<li class="post__list"> <a href="https://35023.hosts1.ma-cloud.nl/EindOpdrachtVGM/Eugene's_folder/index.html"><img class="icon__svg" src="media/globe.svg" alt="website icon"></a></li>
|
||||||
|
</section>
|
||||||
|
<li class="post__list"> National Videogame Museum Redesign Website. </li>
|
||||||
|
</ul>
|
||||||
|
<li class="box-wrapper">
|
||||||
|
<ul class="box__lists">
|
||||||
|
<li class="box__list">Highlighted Project 1</li>
|
||||||
|
<section class="box__icons">
|
||||||
|
<li class="box__list"> <a href="https://github.com/JerukPurut404/EindOpdrachtVGM"><img class="icon__svg" src="media/github.svg" alt="github icon"></a> </li>
|
||||||
|
<li class="box__list"> <a href="https://35023.hosts1.ma-cloud.nl/EindOpdrachtVGM/Eugene's_folder/index.html"><img class="icon__svg" src="media/globe.svg" alt="website icon"></a></li>
|
||||||
|
</section>
|
||||||
|
<li class="box__list"> National Videogame Museum Redesign Website. </li>
|
||||||
|
</ul>
|
||||||
|
<ul class="box__lists">
|
||||||
|
<li class="box__list">Highlighted Project 2</li>
|
||||||
|
<section class="box__icons">
|
||||||
|
<li class="box__list"> <a href="https://github.com/JerukPurut404/EindOpdrachtVGM"><img class="icon__svg" src="media/github.svg" alt="github icon"></a> </li>
|
||||||
|
<li class="box__list"> <a href="https://35023.hosts1.ma-cloud.nl/EindOpdrachtVGM/Eugene's_folder/index.html"><img class="icon__svg" src="media/globe.svg" alt="website icon"></a></li>
|
||||||
|
</section>
|
||||||
|
<li class="box__list"> National Videogame Museum Redesign Website. </li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
</article>
|
||||||
|
</main>
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="footer__inner">
|
||||||
|
<div class="footer__content">
|
||||||
|
<p>Made by E. van Aubel</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
71
old_html_pages/old_projects.html
Normal file
71
old_html_pages/old_projects.html
Normal file
@ -0,0 +1,71 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Projects</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<header class="header">
|
||||||
|
<a href="index.html">
|
||||||
|
<div class="logo">
|
||||||
|
<h3 class="logo__symbol">Hello world</h3>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<nav class="menu">
|
||||||
|
<ul class="menu__inner">
|
||||||
|
<li>
|
||||||
|
<a href="/about.html">About</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/projects.html">Projects</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/articles.html">Articles</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<div class="content">
|
||||||
|
<main class="post">
|
||||||
|
<article class="post__article">
|
||||||
|
<h2 class="post__title">Projects</h2>
|
||||||
|
<div class="post__content">
|
||||||
|
<p>These are my previous projects in my school and all of them are avaliable in Github</p>
|
||||||
|
<ul class="post__lists">
|
||||||
|
<section class="post__icons">
|
||||||
|
<li class="post__list"> <a href="https://github.com/JerukPurut404/EindOpdrachtVGM"><img class="icon__svg" src="media/github.svg" alt="github icon"></a> </li>
|
||||||
|
<li class="post__list"> <a href="https://35023.hosts1.ma-cloud.nl/EindOpdrachtVGM/Eugene's_folder/index.html"><img class="icon__svg" src="media/globe.svg" alt="website icon"></a></li>
|
||||||
|
</section>
|
||||||
|
<li class="post__list"> National Videogame Museum Redesign Website. </li>
|
||||||
|
</ul>
|
||||||
|
<ul class="post__lists">
|
||||||
|
<section class="post__icons">
|
||||||
|
<li class="post__list"><a href="https://github.com/JerukPurut404/9292chan"><img class="icon__svg" src="media/github.svg" alt="github icon"></a></li>
|
||||||
|
</section>
|
||||||
|
<li class="post__list">Discontinued 9292chan</li>
|
||||||
|
</ul>
|
||||||
|
<ul class="post__lists">
|
||||||
|
<section class="post__icons">
|
||||||
|
<li class="post__list"> <a href="https://github.com/JerukPurut404/BasedDictionary"><img class="icon__svg" src="media/github.svg" alt="github icon"></a> </li>
|
||||||
|
<li class="post__list"> <a href="https://35023.hosts1.ma-cloud.nl/baseddict/"><img class="icon__svg" src="media/globe.svg" alt="website icon"></a></li>
|
||||||
|
</section>
|
||||||
|
<li class="post__list"> Based Dictionary</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</main>
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="footer__inner">
|
||||||
|
<div class="footer__content">
|
||||||
|
<a href="https://polarisfm.neocities.org/">Inspired by Polarisfm</a>
|
||||||
|
<p>|</p>
|
||||||
|
<p>Made by E. van Aubel</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
88
projects.php
Normal file
88
projects.php
Normal file
@ -0,0 +1,88 @@
|
|||||||
|
<?php
|
||||||
|
require_once 'src/languages.php';
|
||||||
|
|
||||||
|
if (session_status() === PHP_SESSION_NONE) {
|
||||||
|
session_start();
|
||||||
|
}
|
||||||
|
|
||||||
|
function getCurrentLang() {
|
||||||
|
if (isset($_GET['lang'])) {
|
||||||
|
return $_GET['lang'];
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isset($_COOKIE['preferred_lang'])) {
|
||||||
|
return $_COOKIE['preferred_lang'];
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
$currentLang = getCurrentLang();
|
||||||
|
$_SESSION['lang'] = $currentLang;
|
||||||
|
?>
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="<?php echo $currentLang; ?>">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title><?php echo t('Projects'); ?></title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<header class="header">
|
||||||
|
<a href="index.php">
|
||||||
|
<div class="logo">
|
||||||
|
<h3 class="logo__symbol">Hello world</h3>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<nav class="menu">
|
||||||
|
<ul class="menu__inner">
|
||||||
|
<li><a href="about.php"><?php echo t('About'); ?></a></li>
|
||||||
|
<li><a href="projects.php"><?php echo t('Projects'); ?></a></li>
|
||||||
|
<li><a href="blogs.php"><?php echo t('Blogs'); ?></a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<div class="content">
|
||||||
|
<main class="post">
|
||||||
|
<article class="post__article">
|
||||||
|
<h2 class="post__title"><?php echo t('Projects'); ?></h2>
|
||||||
|
<div class="post__content">
|
||||||
|
<p><?php echo t("These are my previous projects in my school and all of them are avaliable in Github");?></p>
|
||||||
|
<?php
|
||||||
|
$json = file_get_contents('json/projects.json');
|
||||||
|
|
||||||
|
if ($json === false) {
|
||||||
|
die('Error reading the JSON file');
|
||||||
|
}
|
||||||
|
|
||||||
|
$json_data = json_decode($json, true);
|
||||||
|
|
||||||
|
if ($json_data === null) {
|
||||||
|
die('Error decoding the JSON file');
|
||||||
|
}
|
||||||
|
|
||||||
|
foreach ($json_data['projects'] as $project) {
|
||||||
|
echo "<ul class='post__lists'>";
|
||||||
|
echo "<section class='post__icons'>";
|
||||||
|
foreach ($project['links'] as $link) {
|
||||||
|
echo "<li class='post__list'> <a href='" . htmlspecialchars($link['url']) . "'><img class='icon__svg' src='media/" . htmlspecialchars($link['icon']) . "' alt='" . htmlspecialchars($link['type']) . " icon'></a></li>";
|
||||||
|
}
|
||||||
|
echo "</section>";
|
||||||
|
echo "<li class='post__list'>" . htmlspecialchars($project['title'][$currentLang]) . "</li>";
|
||||||
|
echo "</ul>";
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</main>
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="footer__inner">
|
||||||
|
<div class="footer__content">
|
||||||
|
<p><?php echo t("Made by E. van Aubel"); ?></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
82
src/languages.php
Normal file
82
src/languages.php
Normal file
@ -0,0 +1,82 @@
|
|||||||
|
<?php
|
||||||
|
session_start(); // Start the session here
|
||||||
|
|
||||||
|
function t($key) {
|
||||||
|
global $translations;
|
||||||
|
|
||||||
|
// Get the current language from the session
|
||||||
|
$currentLang = isset($_SESSION['lang']) ? $_SESSION['lang'] : 'en';
|
||||||
|
|
||||||
|
// Ensure the translation array exists for the current language
|
||||||
|
if (!isset($translations[$currentLang])) {
|
||||||
|
$currentLang = 'en';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Return the translated string or the original key if not found
|
||||||
|
return isset($translations[$currentLang][$key]) ? $translations[$currentLang][$key] : $key;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
$languages = ['nl' => 'Dutch', 'en' => 'English', 'id' => 'Indonesian'];
|
||||||
|
|
||||||
|
$translations = [
|
||||||
|
'en' => [
|
||||||
|
'About' => 'About',
|
||||||
|
'About me' => 'About me',
|
||||||
|
'Projects' => 'Projects',
|
||||||
|
'Blogs' => 'Blogs',
|
||||||
|
'Highlighted Skills' => 'Highlighted Skills',
|
||||||
|
'Highlighted Project' => 'Highlighted Project',
|
||||||
|
'National Videogame Museum Redesign Website.' => 'National Videogame Museum Redesign Website.',
|
||||||
|
'Made by E. van Aubel' => 'Made by E. van Aubel',
|
||||||
|
'media/handwriting/welcome.svg' => 'media/handwriting/welcome.svg',
|
||||||
|
'media/handwriting/im-e-van-aubel.svg' => 'media/handwriting/im-e-van-aubel.svg',
|
||||||
|
'media/handwriting/im-a-software-developer.svg' => 'media/handwriting/im-a-software-developer.svg',
|
||||||
|
"These are my own articles/blog mostly about my own projects, rant's, thought's etc" => "These are my own articles/blog mostly about my own projects, rant's, thought's etc",
|
||||||
|
"These are my previous projects in my school and all of them are avaliable in Github" => "These are my previous projects in my school and all of them are avaliable in Github",
|
||||||
|
"View my CV here:" => "View my CV here",
|
||||||
|
"Go to my CV" => "Go to my CV",
|
||||||
|
"Select Language:" => "Select Language:",
|
||||||
|
"E. Van Aubel is a software development student who is scared of CSS and is living in Amsterdam, Netherlands. They are passionate about free and open-source software and privacy advocacy. Their skills include programming in Python and JavaScript, web development with CSS and HTML, and proficiency in the Laravel framework and Tailwind CSS. E. Van Aubel enjoys movies, anime, and music in their free time. They are equipped with an HP 15s-eq0xxx laptop featuring an AMD Ryzen 3 3200U processor. This young developer is well-positioned to contribute to innovative tech projects with their growing expertise in software development and commitment to open-source principles." => "E. Van Aubel is a software development student who is scared of CSS and is living in Amsterdam, Netherlands. They are passionate about free and open-source software and privacy advocacy. Their skills include programming in Python and JavaScript, web development with CSS and HTML, and proficiency in the Laravel framework and Tailwind CSS. E. Van Aubel enjoys movies, anime, and music in their free time. They are equipped with an HP 15s-eq0xxx laptop featuring an AMD Ryzen 3 3200U processor. This young developer is well-positioned to contribute to innovative tech projects with their growing expertise in software development and commitment to open-source principles."
|
||||||
|
|
||||||
|
],
|
||||||
|
'nl' => [
|
||||||
|
'About' => 'Over',
|
||||||
|
'About me' => 'Over mij',
|
||||||
|
'Projects' => 'Projecten',
|
||||||
|
'Blogs' => 'Blogs',
|
||||||
|
'Highlighted Skills' => 'Uitgelichte Vaardigheden',
|
||||||
|
'Highlighted Project' => 'Uitgelichte Projecten',
|
||||||
|
'National Videogame Museum Redesign Website.' => 'Herontwerp website Nationaal Videogame Museum.',
|
||||||
|
'Made by E. van Aubel' => 'Gemaakt door E. van Aubel',
|
||||||
|
'media/handwriting/welcome.svg' => 'media/handwriting/welkom.svg',
|
||||||
|
'media/handwriting/im-e-van-aubel.svg' => 'media/handwriting/ik-ben-e-van-aubel.svg',
|
||||||
|
'media/handwriting/im-a-software-developer.svg' => 'media/handwriting/ik-ben-een-software-developer.svg',
|
||||||
|
"These are my own articles/blog mostly about my own projects, rant's, thought's etc" => "Dit zijn mijn eigen artikelen/blogs over mijn eigen projecten, rant's, gedachten enz.",
|
||||||
|
"These are my previous projects in my school and all of them are avaliable in Github" => "Dit zijn mijn vorige projecten op mijn school en ze zijn allemaal beschikbaar op Github",
|
||||||
|
"View my CV here:" => "Bekijk mijn CV hier:",
|
||||||
|
"Go to my CV" => "Ga nu naar mijn CV",
|
||||||
|
"Select Language:" => "Selecteer taal:",
|
||||||
|
"E. Van Aubel is a software development student who is scared of CSS and is living in Amsterdam, Netherlands. They are passionate about free and open-source software and privacy advocacy. Their skills include programming in Python and JavaScript, web development with CSS and HTML, and proficiency in the Laravel framework and Tailwind CSS. E. Van Aubel enjoys movies, anime, and music in their free time. They are equipped with an HP 15s-eq0xxx laptop featuring an AMD Ryzen 3 3200U processor. This young developer is well-positioned to contribute to innovative tech projects with their growing expertise in software development and commitment to open-source principles." => "E. Van Aubel is een student softwareontwikkeling die bang is voor CSS en woont in Amsterdam, Nederland. Ze zijn gepassioneerd door vrije en open-source software en privacy advocacy. Hun vaardigheden omvatten programmeren in Python en JavaScript, webontwikkeling met CSS en HTML, en vaardigheid in het Laravel framework en Tailwind CSS. E. Van Aubel houdt in hun vrije tijd van films, anime en muziek. Hij is uitgerust met een HP 15s-eq0xxx laptop met een AMD Ryzen 3 3200U processor. Deze jonge ontwikkelaar is goed gepositioneerd om bij te dragen aan innovatieve technische projecten met hun groeiende expertise in softwareontwikkeling en toewijding aan open-source principes."
|
||||||
|
],
|
||||||
|
'id' => [
|
||||||
|
'About' => 'Tentang',
|
||||||
|
'About me' => 'Tentang saya',
|
||||||
|
'Projects' => 'Proyek',
|
||||||
|
'Blogs' => 'Blogs',
|
||||||
|
'Highlighted Skills' => 'Sorotan Keterampilan',
|
||||||
|
'Highlighted Project' => 'Sorotan Proyek',
|
||||||
|
'National Videogame Museum Redesign Website.' => 'Desain Ulang Situs Web Museum Videogame Nasional.',
|
||||||
|
'Made by E. van Aubel' => 'Dibuat oleh E. van Aubel',
|
||||||
|
'media/handwriting/welcome.svg' => 'media/handwriting/selamat-datang.svg',
|
||||||
|
'media/handwriting/im-e-van-aubel.svg' => 'media/handwriting/nama-saya-e-van-aubel.svg',
|
||||||
|
'media/handwriting/im-a-software-developer.svg' => 'media/handwriting/saya-seorang-software-developer.svg',
|
||||||
|
"These are my own articles/blog mostly about my own projects, rant's, thought's etc" => "Ini adalah artikel/blog saya sendiri yang sebagian besar berisi tentang proyek-proyek saya sendiri, ocehan, pemikiran, dan lain-lain",
|
||||||
|
"These are my previous projects in my school and all of them are avaliable in Github" => "Ini adalah proyek-proyek saya sebelumnya di sekolah saya dan semuanya tersedia di Github",
|
||||||
|
"View my CV here:" => "Lihat CV saya di sini:",
|
||||||
|
"Go to my CV" => "Pergi ke CV saya",
|
||||||
|
"Select Language:" => "Pilih bahasa:",
|
||||||
|
"E. Van Aubel is a software development student who is scared of CSS and is living in Amsterdam, Netherlands. They are passionate about free and open-source software and privacy advocacy. Their skills include programming in Python and JavaScript, web development with CSS and HTML, and proficiency in the Laravel framework and Tailwind CSS. E. Van Aubel enjoys movies, anime, and music in their free time. They are equipped with an HP 15s-eq0xxx laptop featuring an AMD Ryzen 3 3200U processor. This young developer is well-positioned to contribute to innovative tech projects with their growing expertise in software development and commitment to open-source principles." => "E. Van Aubel adalah seorang mahasiswa software developer yang takut dengan CSS dan tinggal di Amsterdam, Belanda. Mereka sangat menyukai free and open-source software serta advokasi privasi. Keahlian mereka meliputi pemrograman dalam Python dan JavaScript, pengembangan web dengan CSS dan HTML, serta kemahiran dalam kerangka kerja Laravel dan Tailwind CSS. E. Van Aubel menikmati film, anime, dan musik di waktu luang mereka. Mereka dilengkapi dengan laptop HP 15s-eq0xxx yang dilengkapi dengan prosesor AMD Ryzen 3 3200U. Pengembang muda ini memiliki posisi yang tepat untuk berkontribusi pada proyek-proyek teknologi inovatif dengan keahlian mereka yang terus berkembang dalam pengembangan perangkat lunak dan komitmen terhadap prinsip-prinsip sumber terbuka."
|
||||||
|
]
|
||||||
|
];
|
||||||
|
|
||||||
475
style.css
Normal file
475
style.css
Normal file
@ -0,0 +1,475 @@
|
|||||||
|
@keyframes typing {
|
||||||
|
from { width: 0 }
|
||||||
|
to { width: 100% }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes blink-caret {
|
||||||
|
from, to { border-color: transparent }
|
||||||
|
50% { border-color: white; }
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
*, *::before, *::after {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 62.5%;
|
||||||
|
letter-spacing: 0.2rem;
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-size: 2rem;
|
||||||
|
line-height: 1.5;
|
||||||
|
display: flex;
|
||||||
|
min-height: 100vh;
|
||||||
|
flex-direction: column;
|
||||||
|
background-color: #282a36;
|
||||||
|
color: #f8f8f2;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
background-color: transparent;
|
||||||
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover{
|
||||||
|
text-decoration: underline white;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover{
|
||||||
|
text-decoration: underline white;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
hr {
|
||||||
|
margin: 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header{
|
||||||
|
margin-top: 2rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0.5rem;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__inner{
|
||||||
|
display: flex;
|
||||||
|
padding: 2rem;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__right{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo__symbol{
|
||||||
|
overflow: hidden;
|
||||||
|
border-right: .15em solid white;
|
||||||
|
white-space: nowrap;
|
||||||
|
margin: 0 auto;
|
||||||
|
animation:
|
||||||
|
typing 3.5s steps(40, end),
|
||||||
|
blink-caret .75s step-end infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu{
|
||||||
|
border-right: 1px solid;
|
||||||
|
margin-right: 10px;
|
||||||
|
z-index: 9999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu__inner{
|
||||||
|
gap: 2rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu__inner li{
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* .content{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex: 1 auto;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin: 0;
|
||||||
|
} */
|
||||||
|
|
||||||
|
.content__main{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
margin: 5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content__div{
|
||||||
|
margin: 2rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 2rem;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content__main h1{
|
||||||
|
font-size: 3rem;
|
||||||
|
font-weight: 500;
|
||||||
|
margin: 0.67em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.icon__svg{
|
||||||
|
filter: invert(85%) sepia(11%) saturate(825%) hue-rotate(195deg) brightness(101%) contrast(91%);
|
||||||
|
padding: 0 1rem;
|
||||||
|
margin: 0 1rem;
|
||||||
|
width: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon__svg:hover{
|
||||||
|
opacity: 50%;
|
||||||
|
outline-color:transparent;
|
||||||
|
outline-style: dotted;
|
||||||
|
box-shadow: 0 0 0 1px #7dc4e4;
|
||||||
|
transition: 0.7s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile__picture{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: row;
|
||||||
|
width: 15%;
|
||||||
|
height: auto;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.handwriting__svg{
|
||||||
|
width: 25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer__content{
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 2rem;
|
||||||
|
align-items: center;
|
||||||
|
padding-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post{
|
||||||
|
width: 100%;
|
||||||
|
max-width: 100rem;
|
||||||
|
padding: 2rem;
|
||||||
|
margin: 4rem auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post__info{
|
||||||
|
margin-top: 3rem;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
line-height: normal;
|
||||||
|
opacity: .6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post__info p{
|
||||||
|
font-size: 1.3rem;
|
||||||
|
margin: 0 .8em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post__title{
|
||||||
|
font-size: 2.5rem;
|
||||||
|
margin: 0 0 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post__content{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
font-weight: 300;
|
||||||
|
overflow-wrap: break-word;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post__content p{
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post__subtext{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog__content{
|
||||||
|
display: flex;
|
||||||
|
margin-top: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog__content{
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post__icons{
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post__lists{
|
||||||
|
padding: 1rem;
|
||||||
|
border: 1px solid #f8f8f2;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
margin-top: 2rem;
|
||||||
|
border-radius: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post__list{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog__list{
|
||||||
|
padding: 1rem;
|
||||||
|
border: 1px solid #8bd5ca;
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post__subtext {
|
||||||
|
color: #a5adcb;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
font-size: 0.9em;
|
||||||
|
margin-top: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post__date {
|
||||||
|
color: #6e738d;
|
||||||
|
font-size: 0.8em;
|
||||||
|
margin-left: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box__list{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin: 1rem;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box__lists{
|
||||||
|
padding: 1rem;
|
||||||
|
border: 1px solid #f8f8f2;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
margin-top: 2rem;
|
||||||
|
border-radius: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.box-wrapper{
|
||||||
|
display: flex;
|
||||||
|
gap: 3rem;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cv__button{
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 2.5rem;
|
||||||
|
text-decoration: none;
|
||||||
|
padding: 1px 6px;
|
||||||
|
border: 1px outset buttonborder;
|
||||||
|
border-radius: 3px;
|
||||||
|
color: buttontext;
|
||||||
|
background-color: buttonface;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.language__button {
|
||||||
|
padding: 10px 15px;
|
||||||
|
margin: 5px;
|
||||||
|
background-color: #007bff; /* Bootstrap primary color */
|
||||||
|
color: white;
|
||||||
|
text-decoration: none;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.language__button:hover {
|
||||||
|
background-color: #0056b3; /* Darker shade on hover */
|
||||||
|
}
|
||||||
|
|
||||||
|
.post__article{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog__article{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog__article blockquote{
|
||||||
|
padding-left: 1rem;
|
||||||
|
border-left: .3rem solid #ed8796;
|
||||||
|
border-radius: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog__article ul{
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post__img {
|
||||||
|
display: block;
|
||||||
|
margin-left: auto;
|
||||||
|
border-radius: .5rem;
|
||||||
|
margin-right: auto;
|
||||||
|
object-fit: cover;
|
||||||
|
max-width: 50%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post__description {
|
||||||
|
flex: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post__text{
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post__subtext{
|
||||||
|
text-align: left;
|
||||||
|
line-height: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post__links{
|
||||||
|
font-weight: 600;
|
||||||
|
text-decoration: underline;
|
||||||
|
text-decoration-color: #a5adcb;
|
||||||
|
text-decoration-thickness: .2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post__links:hover{
|
||||||
|
text-decoration-color: #f8f8f2;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media only screen and (max-width: 770px) {
|
||||||
|
body {
|
||||||
|
font-size: 1.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container{
|
||||||
|
padding: 5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header{
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__inner {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__right {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile__picture{
|
||||||
|
width: 55%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
border: none;
|
||||||
|
margin: 0;
|
||||||
|
padding-top: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu__inner{
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post {
|
||||||
|
padding: 0rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content__menu{
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post__text {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog__content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post__img > img {
|
||||||
|
object-fit: contain;
|
||||||
|
max-width: 50%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post__description {
|
||||||
|
margin-top: 2rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-wrapper{
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 1024px) {
|
||||||
|
.header__inner {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__right {
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content__main {
|
||||||
|
padding: 3rem;
|
||||||
|
margin: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 1440px) {
|
||||||
|
.content__main {
|
||||||
|
padding: 2rem;
|
||||||
|
margin: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user