temp about page layout
This commit is contained in:
E. van Aubel
parent
6d9b011b53
commit
ec3c55c5d9
64
about.php
64
about.php
@ -55,11 +55,67 @@ $_SESSION['lang'] = $currentLang;
|
||||
<main class="post">
|
||||
<article class="post__article">
|
||||
<h2 class="post__title"><?php echo t('About me')?></h2>
|
||||
<div class="post__content">
|
||||
<picture>
|
||||
<div class="about__content">
|
||||
<div class="about__pic">
|
||||
<img src="https://storage.rxresu.me/cm14uwvyl071gmtv5ctrgs6yt/pictures/cm14uwvyl071gmtv5ctrgs6yt.jpg" alt="Profile Picture">
|
||||
</div>
|
||||
<p id="begin__introduction">I'm E. Van Aubel</p>
|
||||
<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 class="about__facts">
|
||||
<h1>Hard Skills</h1>
|
||||
<ul class="about__lists" role="list" aria-label="Quick Facts List">
|
||||
<li class="about__list" role="listitem">
|
||||
<p>Web Development:</p>
|
||||
<ul>
|
||||
<li><p>HTML</p></li>
|
||||
<li><p>CSS</p></li>
|
||||
<li><p>Javascript</p></li>
|
||||
<li><p>Python</p></li>
|
||||
<li><p>Php</p></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="about__list" role="listitem">
|
||||
<p>Cybersecurity</p>
|
||||
<ul>
|
||||
<li><p>API Fuzzing</p></li>
|
||||
<li><p>Securing Servers (currently learning)</p></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<h1>Soft Skills</h1>
|
||||
<ul class="about__lists" role="list" aria-label="Quick Facts List">
|
||||
<li class="about__list" role="listitem">
|
||||
<p>Creatief</p>
|
||||
</li>
|
||||
<li class="about__list" role="listitem">
|
||||
<p>Caring</p>
|
||||
</li>
|
||||
<li class="about__list" role="listitem">
|
||||
<p>Curious</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="hire__form">
|
||||
<h1>Hire Me</h1>
|
||||
<form>
|
||||
<div class="form-group">
|
||||
<label for="name">Your Name:</label>
|
||||
<input type="text" id="name" name="name" required>
|
||||
</div>
|
||||
|
||||
</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 class="form-group">
|
||||
<label for="email">Email:</label>
|
||||
<input type="email" id="email" name="email" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="message">Message:</label>
|
||||
<textarea id="message" name="message" required></textarea>
|
||||
</div>
|
||||
|
||||
<button id="hire__send" type="submit">Send Message</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<hr>
|
||||
|
||||
@ -27,7 +27,7 @@ $_SESSION['lang'] = $currentLang;
|
||||
<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">
|
||||
<link rel="stylesheet" href="../style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
|
||||
@ -26,7 +26,7 @@ $_SESSION['lang'] = $currentLang;
|
||||
<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">
|
||||
<link rel="stylesheet" href="../style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
|
||||
@ -4,19 +4,19 @@ I recently took on an exciting challenge to complete a Capture The Flag (CTF) fo
|
||||
|
||||
## 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.
|
||||
|
||||
|
||||
@ -19,7 +19,7 @@ $_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");
|
||||
header("Location: index.php");
|
||||
exit;
|
||||
}
|
||||
?>
|
||||
|
||||
24
projects.php
24
projects.php
@ -14,6 +14,7 @@ function getCurrentLang() {
|
||||
return $_COOKIE['preferred_lang'];
|
||||
}
|
||||
|
||||
return 'en';
|
||||
}
|
||||
|
||||
$currentLang = getCurrentLang();
|
||||
@ -53,24 +54,27 @@ $_SESSION['lang'] = $currentLang;
|
||||
$json = file_get_contents('json/projects.json');
|
||||
|
||||
if ($json === false) {
|
||||
die('Error reading the JSON file');
|
||||
die('Error reading the JSON file');
|
||||
}
|
||||
|
||||
$json_data = json_decode($json, true);
|
||||
|
||||
if ($json_data === null) {
|
||||
die('Error decoding the JSON file');
|
||||
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>";
|
||||
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>";
|
||||
|
||||
// Check if the translation exists, fall back to English if not
|
||||
$title = isset($project['title'][$currentLang]) ? $project['title'][$currentLang] : $project['title']['en'];
|
||||
echo "<li class='post__list'>" . htmlspecialchars($title) . "</li>";
|
||||
echo "</ul>";
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
|
||||
155
style.css
155
style.css
@ -107,14 +107,7 @@ hr {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* .content{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 auto;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0;
|
||||
} */
|
||||
|
||||
|
||||
.content__main{
|
||||
display: flex;
|
||||
@ -305,14 +298,14 @@ hr {
|
||||
.language__button {
|
||||
padding: 10px 15px;
|
||||
margin: 5px;
|
||||
background-color: #007bff; /* Bootstrap primary color */
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.language__button:hover {
|
||||
background-color: #0056b3; /* Darker shade on hover */
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
.post__article{
|
||||
@ -373,6 +366,131 @@ hr {
|
||||
text-decoration-color: #f8f8f2;
|
||||
}
|
||||
|
||||
.about__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-weight: 300;
|
||||
overflow-wrap: break-word;
|
||||
text-align: left;
|
||||
border-radius: 1rem;
|
||||
background-color: #2f3136;
|
||||
color: #ffffff;
|
||||
padding: 1.5rem;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
#begin__introduction {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
justify-content: center;
|
||||
padding: 0.9rem;
|
||||
margin-bottom: 1rem;
|
||||
margin-top: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.about__pic {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
width: 30%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.about__pic img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.about__facts {
|
||||
max-width: 80vw;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.about__facts h1 {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
border-left: 0.3rem dotted #bac2de;
|
||||
}
|
||||
|
||||
.about__lists {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.about__list {
|
||||
flex-basis: 100%;
|
||||
min-width: 200px;
|
||||
padding: 0.5rem;
|
||||
border-radius: 8px;
|
||||
transition: transform 0.3s ease;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.about__list p {
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.about__list:hover {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.hire__form{
|
||||
padding: 5rem;
|
||||
border-radius: 3rem;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
input[type="text"], input[type="email"] {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
padding: 8px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
#hire__send {
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
#hire__send:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 770px) {
|
||||
body {
|
||||
@ -449,6 +567,14 @@ hr {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.about__lists {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.about__list {
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1024px) {
|
||||
@ -464,6 +590,15 @@ hr {
|
||||
padding: 3rem;
|
||||
margin: 2rem;
|
||||
}
|
||||
|
||||
.about__lists {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.about__list {
|
||||
flex-basis: calc(45% - 0.5rem);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1440px) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user