remake (#2)
Merge new style. Error pages need redesigning and content needs additions but overall ready to deploy. Co-authored-by: fred.boniface <fred@fjla.uk> Reviewed-on: #2
This commit is contained in:
parent
578e4377a4
commit
5590bf6fe3
18
about.php
Normal file
18
about.php
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
<?php include "./php/age.php"; ?>
|
||||||
|
<?php $page_title = "about"; ?>
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<?php include "./page-blocks/head.php"; ?>
|
||||||
|
<body>
|
||||||
|
<?php include "./page-blocks/head-img.php"; ?>
|
||||||
|
<?php include "./page-blocks/menu.php"; ?>
|
||||||
|
<?php include "./page-blocks/micro-content.php"; ?>
|
||||||
|
<div class="content hide_micro">
|
||||||
|
<p>
|
||||||
|
Sorry, I've not written anything for here yet.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<?php include "./page-blocks/footer.php"; ?>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
60
contact.php
60
contact.php
@ -1,48 +1,22 @@
|
|||||||
|
<?php include "./php/age.php"; ?>
|
||||||
|
<?php $page_title = "contact"; ?>
|
||||||
|
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
|
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<?php include "./page-blocks/head.php"; ?>
|
||||||
<?php include "./page-blocks/head.php"; ?>
|
|
||||||
<title>Contact</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
<?php include "./page-blocks/head-img.php"; ?>
|
||||||
<?php include "./page-blocks/menu.php"; ?>
|
<?php include "./page-blocks/menu.php"; ?>
|
||||||
|
<?php include "./page-blocks/micro-content.php"; ?>
|
||||||
<h1 class="page-title">Contact</h1>
|
<div class="content hide_micro">
|
||||||
<div class="page-main-content">
|
<p>
|
||||||
<a href="/downloads/vcard.vcf" class="download-link">Add me to your contacts</a>
|
I will build a contact form here. For the moment:
|
||||||
<h2>Find me elsewhere</h2>
|
<br>
|
||||||
<div class="social-links">
|
<a href="/downloads/vcard.vcf">Add me to your contacts</a>
|
||||||
<a href="https://fb.me/fred.boniface" target="_blank" rel="noreferrer noopener">
|
<br>
|
||||||
<picture>
|
or check out my social links in the menu.
|
||||||
<source media="(max-width: 600px)" srcset="/images/social-icons/fb_blue_58.png" type="image/png">
|
</p>
|
||||||
<source srcset="/images/social-icons/fb_blue_144.png" type="image/png">
|
</div>
|
||||||
<img src="/images/social-icons/fb_blue_144.png" alt="Facebook Logo">
|
<?php include "./page-blocks/footer.php"; ?>
|
||||||
</picture>
|
|
||||||
</a>
|
|
||||||
<a href="https://github.com/frdbonif" target="_blank" rel="noreferrer noopener">
|
|
||||||
<picture>
|
|
||||||
<source media="(max-width: 400px)" srcset="/images/social-icons/gh_white_64.png" type="image/png">
|
|
||||||
<img src="/images/social-icons/gh_white_120.png" alt="GitHub Logo">
|
|
||||||
</picture>
|
|
||||||
</a>
|
|
||||||
<a href="https://500px.com/p/fredboniface" target="_blank" rel="noreferrer noopener">
|
|
||||||
<picture>
|
|
||||||
<source media="(max-width: 600px)" srcset="/images/social-icons/500px_seek_58.jxl" type="image/jxl">
|
|
||||||
<source media="(max-width: 600px)" srcset="/images/social-icons/500px_seek_58.webp" type="image/webp">
|
|
||||||
<source media="(max-width: 600px)" srcset="/images/social-icons/500px_seek_58.png" type="image/png">
|
|
||||||
<source srcset="/images/social-icons/500px_seek_114.jxl" type="image/jxl">
|
|
||||||
<source srcset="/images/social-icons/500px_seek_114.webp" type="image/webp">
|
|
||||||
<img src="/images/social-icons/500px_seek_114.png" alt="500px Logo">
|
|
||||||
</picture>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<?php include "./page-blocks/footer.php"; ?>
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@ -1,65 +1,60 @@
|
|||||||
|
<?php include "./php/age.php"; ?>
|
||||||
|
<?php $page_title = "email-safety"; ?>
|
||||||
|
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
|
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<?php include "./page-blocks/head.php"; ?>
|
||||||
<?php include "./page-blocks/head.php"; ?>
|
|
||||||
<title>Email Safety</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
<?php include "./page-blocks/head-img.php"; ?>
|
||||||
<?php include "./page-blocks/menu.php"; ?>
|
<?php include "./page-blocks/menu.php"; ?>
|
||||||
|
<?php include "./page-blocks/micro-content.php"; ?>
|
||||||
<h1 class="page-title">Email Safety</h1>
|
<div class="content hide_micro">
|
||||||
<div class="page-main-content">
|
|
||||||
<p>
|
<p>
|
||||||
You are probably here beacuse you clicked a link in an email that I sent you. I was going to link to a quick guide to email safety but all I could find were specific guides aimed at children or the elderly. In the end I decided to throw a rough guide together.
|
You are probably here beacuse you clicked a link in an email that I sent you. I was going to link to a quick guide to email safety but all I could find were specific guides aimed at children or the elderly. In the end I decided to throw a rough guide together.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2>Phishing</h2>
|
||||||
|
<p>
|
||||||
|
Phishing is a technique used to try and get personal information from you. It could be styled to look like it is from a service that you use or a person that you know. Be on the lookout for:
|
||||||
|
</p>
|
||||||
|
<dl>
|
||||||
|
<dt>Spelling or grammatical errors</dt>
|
||||||
|
<dd>You will usually see spelling or grammatical errors, some people hypothesise that this is to weed out people that are savvy to the scam before they proceed</dd>
|
||||||
|
<dt>Urgent calls to action</dt>
|
||||||
|
<dd>Scam artists will use urgent language to invoke an emotive response, this can prevent you evaluating whether the email is genuine before you act.</dd>
|
||||||
|
<dt>Unusual sender addresses</dt>
|
||||||
|
<dd>Scam artists will usually send emails from an unusual looking address such as 'security-banking.xyz' or 'banking.something.xyz'. Elements of the address may even include the name of a trusted business or person.</dd>
|
||||||
|
</dl>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Even after checking for all of the above, it could be the case that the scam artist is sending an email from a real, trusted address. This is possible by hacking or spoofing. It is important that your email account is kept secure with a strong password - this helps to prevent your email address being used by scam artists.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<h2>Phishing</h2>
|
<h2>Tampering</h2>
|
||||||
<p>
|
<p>
|
||||||
Phishing is a technique used to try and get personal information from you. It could be styled to look like it is from a service that you use or a person that you know. Be on the lookout for:
|
|
||||||
</p>
|
|
||||||
<dl>
|
|
||||||
<dt>Spelling or grammatical errors</dt>
|
|
||||||
<dd>You will usually see spelling or grammatical errors, some people hypothesise that this is to weed out people that are savvy to the scam before they proceed</dd>
|
|
||||||
<dt>Urgent calls to action</dt>
|
|
||||||
<dd>Scam artists will use urgent language to invoke an emotive response, this can prevent you evaluating whether the email is genuine before you act.</dd>
|
|
||||||
<dt>Unusual sender addresses</dt>
|
|
||||||
<dd>Scam artists will usually send emails from an unusual looking address such as 'security-banking.xyz' or 'banking.something.xyz'. Elements of the address may even include the name of a trusted business or person.</dd>
|
|
||||||
</dl>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
Even after checking for all of the above, it could be the case that the scam artist is sending an email from a real, trusted address. This is possible by hacking or spoofing. It is important that your email account is kept secure with a strong password - this helps to prevent your email address being used by scam artists.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<h2>Tampering</h2>
|
|
||||||
<p>
|
|
||||||
Generally, email is an insecure means of communication. It is possible for an email to be viewed or tampered with whilst it is being transmitted.
|
Generally, email is an insecure means of communication. It is possible for an email to be viewed or tampered with whilst it is being transmitted.
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
Because of this, it is important that you review links and attachments before opening them. Web browsers are improving on the security front and often alert you if you try to open a link to a scam website or that tries to download a file but you should still hover over the link which can reveal the actual destination. Attachments should be scanned for viruses or threats before you open them.
|
Because of this, it is important that you review links and attachments before opening them. Web browsers are improving on the security front and often alert you if you try to open a link to a scam website or that tries to download a file but you should still hover over the link which can reveal the actual destination. Attachments should be scanned for viruses or threats before you open them.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<h2>Signing & Encryption</h2>
|
<h2>Signing & Encryption</h2>
|
||||||
<p>
|
<p>
|
||||||
There are technologies to digitally sign and/or encrypt email messages, both PGP and S/MIME are available.
|
There are technologies to digitally sign and/or encrypt email messages, both PGP and S/MIME are available.
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
As secure instant messaging becomes more widespread email signing and encryption is becoming less common with people leaning towards services such as WhatsApp, Signal and Telegram for secure communication.
|
As secure instant messaging becomes more widespread email signing and encryption is becoming less common with people leaning towards services such as WhatsApp, Signal and Telegram for secure communication.
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
S/MIME is more widely supported but does mean that you have to buy a certificate, cheaper certificates do not provide proof of the person sending the email, however your email client can use the certificate to check whether the email has been tampered with. More expensive certificates are available that you can use to prove your identity - these are the type of certificated used to digitally sign documents such as PDF files.
|
S/MIME is more widely supported but does mean that you have to buy a certificate, cheaper certificates do not provide proof of the person sending the email, however your email client can use the certificate to check whether the email has been tampered with. More expensive certificates are available that you can use to prove your identity - these are the type of certificated used to digitally sign documents such as PDF files.
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
PGP is not as widely supported and is more complicated for the end user, however there is no cost as you generate certificates yourself. It is then up to the sender to validate your identity, you can <a href="./pgp.php">read more about PGP</a> on my PGP page.
|
PGP is not as widely supported and is more complicated for the end user, however there is no cost as you generate certificates yourself. It is then up to the sender to validate your identity, you can <a href="/keys.php">get my public keys here</a>.
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
Both S/MIME and PGP also support encryption which involves sharing your certificates public key with others, an email can only be encrypted with that public key. It is also possible to encrypt an email with a password. I won't go on further as email encryption is a bit out of scope here.
|
Both S/MIME and PGP also support encryption which involves sharing your certificates public key with others, an email can only be encrypted with that public key. It is also possible to encrypt an email with a password. I won't go on further as email encryption is a bit out of scope here.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
<?php include "./page-blocks/footer.php"; ?>
|
||||||
<?php include "./page-blocks/footer.php"; ?>
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
53
index.php
53
index.php
@ -1,41 +1,24 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
|
|
||||||
<?php include "./php/age.php"; ?>
|
<?php include "./php/age.php"; ?>
|
||||||
|
<?php $page_title = "home"; ?>
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<?php include "./page-blocks/head.php"; ?>
|
||||||
<?php include "./page-blocks/head.php"; ?>
|
|
||||||
<title>Fred Boniface</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
<?php include "./page-blocks/head-img.php"; ?>
|
||||||
<?php include "./page-blocks/menu.php"; ?>
|
<?php include "./page-blocks/menu.php"; ?>
|
||||||
|
<?php include "./page-blocks/micro-content.php"; ?>
|
||||||
<h1 class="page-title">Hello</h1>
|
<div class="content hide_micro">
|
||||||
<div class="page-main-content">
|
<p>
|
||||||
<p>
|
Hello, I'm Fred, a <?php echo getAge(1993,11); ?> year old
|
||||||
I'm Fred Boniface - a <?php echo getAge(1993,11); ?> year old Rail
|
rail professional and Local RMT Rep. I don't intend for
|
||||||
Professional with many interests outside of work and while I do have
|
this to be about work though, I do lots of hobbies on the
|
||||||
many opinions about the state of the rail industry at present, this
|
side and you can read about them here.
|
||||||
website aims to be about my personal life and interests, rather than my
|
</p>
|
||||||
work.
|
<p>
|
||||||
</p>
|
I will eventually write more here and probably throw in some photos.
|
||||||
|
</p>
|
||||||
<p>
|
</div>
|
||||||
I am married to Jade and we have two children, Lucy & Ava-Rose - both
|
<?php include "./page-blocks/footer.php"; ?>
|
||||||
in school. I will get around to adding some images to this page - I
|
|
||||||
promise.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
To keep this homepage simple and easy to digest, I won't waffle on
|
|
||||||
about too much here, but there is more to read about each topic on
|
|
||||||
the relevant page.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<?php include "./page-blocks/footer.php"; ?>
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@ -1,11 +1,3 @@
|
|||||||
function inflateSidebar() {
|
|
||||||
document.getElementById("sidebar").style.width = "150px";
|
|
||||||
}
|
|
||||||
|
|
||||||
function collapseSidebar() {
|
|
||||||
document.getElementById("sidebar").style.width = "0px";
|
|
||||||
}
|
|
||||||
|
|
||||||
function sidebarOpen() {
|
function sidebarOpen() {
|
||||||
document.getElementById("sidebar").style.width = "50%";
|
document.getElementById("sidebar").style.width = "50%";
|
||||||
document.getElementById("sidebar_open_short").style.display = "none";
|
document.getElementById("sidebar_open_short").style.display = "none";
|
||||||
|
|||||||
42
keys.php
42
keys.php
@ -1,23 +1,33 @@
|
|||||||
|
<?php include "./php/age.php"; ?>
|
||||||
|
<?php $page_title = "keys"; ?>
|
||||||
|
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
|
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<?php include "./page-blocks/head.php"; ?>
|
||||||
<?php include "./page-blocks/head.php"; ?>
|
|
||||||
<title>GPG/PGP</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
<?php include "./page-blocks/head-img.php"; ?>
|
||||||
<?php include "./page-blocks/menu.php"; ?>
|
<?php include "./page-blocks/menu.php"; ?>
|
||||||
|
<?php include "./page-blocks/micro-content.php"; ?>
|
||||||
<h1 class="page-title">Keys</h1>
|
<div class="content hide_micro">
|
||||||
<div class="page-main-content">
|
<p>
|
||||||
|
I'll publish my public keys here, primarily so I have easy access to them
|
||||||
|
myself. You can use them to check my identity when I send signed emails, etc.
|
||||||
|
</p>
|
||||||
|
<h2>SSH</h2>
|
||||||
<p>
|
<p>
|
||||||
<a href="/downloads/f.boniface_ed25519.pub">Download SSH Public Key</a>
|
My current public SSH key has no expiry date.
|
||||||
|
<br>
|
||||||
|
<a href="/downloads/f.boniface_ed25519.pub">Download Public SSH key</a>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
<h2>GPG</h2>
|
||||||
|
<p>
|
||||||
<?php include "./page-blocks/footer.php"; ?>
|
My GPG Key is currently unavailable
|
||||||
|
</p>
|
||||||
|
<h2>S/MIME</h2>
|
||||||
|
<p>
|
||||||
|
I do not currently hold a valid S/MIME Certificate
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<?php include "./page-blocks/footer.php"; ?>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
24
page-blocks/TEMPLATE.php
Normal file
24
page-blocks/TEMPLATE.php
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
<?php include "./php/age.php"; ?>
|
||||||
|
<?php $page_title = "TEMPLATE"; ?>
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<?php include "./page-blocks/head.php"; ?>
|
||||||
|
<body>
|
||||||
|
<?php include "./page-blocks/head-img.php"; ?>
|
||||||
|
<?php include "./page-blocks/menu.php"; ?>
|
||||||
|
<?php include "./page-blocks/micro-content.php"; ?>
|
||||||
|
<div class="content hide_micro">
|
||||||
|
<p>
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut eros leo.
|
||||||
|
</p>
|
||||||
|
<h2>Ispum</h2>
|
||||||
|
<p>
|
||||||
|
Sed eleifend massa sed sagittis malesuada. Phasellus velit urna, congue sit
|
||||||
|
amet felis dictum, congue ornare tortor. Donec consequat lectus sit amet
|
||||||
|
iaculis ornare. Pellentesque luctus, orci a sagittis efficitur, dolor justo.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<?php include "./page-blocks/footer.php"; ?>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -1 +1,5 @@
|
|||||||
<footer><p>© Frederick Boniface 2022</p></footer>
|
<footer>
|
||||||
|
<p>
|
||||||
|
© Fred Boniface 2022
|
||||||
|
</p>
|
||||||
|
</footer>
|
||||||
12
page-blocks/head-img.php
Normal file
12
page-blocks/head-img.php
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
<div class="header_image" id="<?php echo $page_title; ?>">
|
||||||
|
<div id="page_title" class="hide_micro">
|
||||||
|
<?php
|
||||||
|
if (strcmp($page_title, 'home') == 0){
|
||||||
|
echo '<picture id="header_face">';
|
||||||
|
echo '<source srcset="/images/headers/index/face-150.webp" type="image/webp">';
|
||||||
|
echo '<img src="/images/headers/index/face-100.webp" alt="Face image">';
|
||||||
|
echo '</picture>';
|
||||||
|
} ?> <!-- Moved from separate include to inline -->
|
||||||
|
<h1><?php echo ucwords($page_title); ?></h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@ -1,7 +1,8 @@
|
|||||||
|
<head>
|
||||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<link rel="icon" type="image/x-icon" href="/images/favicon.png">
|
|
||||||
<meta name="author" content="Frederick Boniface">
|
<meta name="author" content="Frederick Boniface">
|
||||||
<link rel="stylesheet" href="./style/fonts.css">
|
<link rel="icon" type="image/png" href="/images/favicon.png">
|
||||||
<link rel="stylesheet" href="./style/styles.css">
|
<link rel="stylesheet" href="/style/new_style.css">
|
||||||
<script src="/js/navbar.js"></script>
|
<title><?php echo ucwords($page_title); ?></title>
|
||||||
|
</head>
|
||||||
@ -1,12 +1,57 @@
|
|||||||
<div id="sidebar" class="sidebar">
|
<div id="menubar">
|
||||||
<a href="javascript:void(0)" class="close" onclick="collapseSidebar()">×</a>
|
<script src="/js/navbar.js"></script>
|
||||||
<a href="/">Home</a>
|
<div id="menubar_logo" class="hide_micro">
|
||||||
<a href="/keys.php">Keys</a>
|
<a href="/">
|
||||||
<a href="/projects.php">Projects</a>
|
<picture>
|
||||||
<a href="/contact.php">Contact</a>
|
<source media="(min-width: 290px)" srcset="/images/logo/full-40.jxl" type="image/jxl">
|
||||||
<a href="/new_index.html">WIP Design</a>
|
<source media="(min-width: 290px)" srcset="/images/logo/full-40.webp" type="image/webp">
|
||||||
</div>
|
<source media="(min-width: 290px)" srcset="/images/logo/full-40.png" type="image/png">
|
||||||
|
<source media="(max-width: 289px)" srcset="/images/logo/short-20.jxl" type="image/jxl">
|
||||||
<div class="inflate" id="inflate">
|
<source media="(max-width: 289px)" srcset="/images/logo/short-20.png" type="image/png">
|
||||||
<button class="open" onclick="inflateSidebar()">☰</button>
|
<img src="/images/logo/full-40.png" alt="Fred Boniface logo">
|
||||||
</div>
|
</picture>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div id="menubar_hamburger" class="hide_micro">
|
||||||
|
<button class="sidebar_control" id="sidebar_open_short" onclick="sidebarOpen()">☰</button>
|
||||||
|
<button class="sidebar_control" id="sidebar_close_short" onclick="sidebarClose()">×</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="sidebar">
|
||||||
|
<a href="/">Home</a>
|
||||||
|
<a href="/keys.php">Keys</a>
|
||||||
|
<a href="/projects.php">Things I Do</a>
|
||||||
|
<a href="/contact.php">Contact</a>
|
||||||
|
<a href="/about.php">About</a>
|
||||||
|
<div id="sidebar_logo">
|
||||||
|
<picture>
|
||||||
|
<source srcset="/images/logo/short-40.jxl" type="image/jxl">
|
||||||
|
<img src="/images/logo/short-40.png" alt="">
|
||||||
|
</picture>
|
||||||
|
</div>
|
||||||
|
<div id="sidebar_social">
|
||||||
|
<a href="https://500px.com/p/fredboniface" target="_blank" rel="noreferrer noopener">
|
||||||
|
<picture>
|
||||||
|
<source media="(min-width: 399px)" srcset="/images/social-icons/500px_seek_114.jxl" type="image/jxl">
|
||||||
|
<source media="(min-width: 399px)" srcset="/images/social-icons/500px_seek_114.webp" type="image/webp">
|
||||||
|
<source srcset="/images/social-icons/500px_seek_58.jxl" type="image/jxl">
|
||||||
|
<source srcset="/images/social-icons/500px_seek_58.webp" type="image/webp">
|
||||||
|
<img src="/images/social-icons/500px_seek_58.png" alt="500px Logo">
|
||||||
|
</picture>
|
||||||
|
</a>
|
||||||
|
<a href="https://fb.me/fred.boniface" target="_blank" rel="noreferrer noopener">
|
||||||
|
<picture>
|
||||||
|
<source media="(min-width: 399px)" srcset="/images/social-icons/fb_blue_144.png" type="image/png">
|
||||||
|
<source srcset="/images/social-icons/fb_blue_58.png" type="image/png">
|
||||||
|
<img src="/images/social-icons/fb_blue_58.png" alt="Facebook Logo">
|
||||||
|
</picture>
|
||||||
|
</a>
|
||||||
|
<a href="https://github.com/frdbonif" target="_blank" rel="noreferrer noopener">
|
||||||
|
<picture>
|
||||||
|
<source media="(min-width: 399px)" srcset="/images/social-icons/gh_white_120.png" type="image/png">
|
||||||
|
<source srcset="/images/social-icons/gh_white_64.png" type="image/png">
|
||||||
|
<img src="/images/social-icons/gh_white_64.png" alt="Github Logo">
|
||||||
|
</picture>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
6
page-blocks/micro-content.php
Normal file
6
page-blocks/micro-content.php
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
<div class="content show_micro">
|
||||||
|
<p>
|
||||||
|
This website cannot correctly render on a screen this narrow,
|
||||||
|
Please resize your window or visit on a larger device.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
@ -1,21 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<?php include "./page-blocks/head.php"; ?>
|
|
||||||
<title>Page Title</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<?php include "./page-blocks/menu.php"; ?>
|
|
||||||
|
|
||||||
<h1 class="page-title">Page Title</h1>
|
|
||||||
<div class="page-main-content">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<?php include "./page-blocks/footer.php"; ?>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
32
projects.php
32
projects.php
@ -1,22 +1,20 @@
|
|||||||
|
<?php include "./php/age.php"; ?>
|
||||||
|
<?php $page_title = "projects"; ?>
|
||||||
|
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
|
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<?php include "./page-blocks/head.php"; ?>
|
||||||
<?php include "./page-blocks/head.php"; ?>
|
|
||||||
<title>Projects</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
<?php include "./page-blocks/head-img.php"; ?>
|
||||||
<?php include "./page-blocks/menu.php"; ?>
|
<?php include "./page-blocks/menu.php"; ?>
|
||||||
|
<?php include "./page-blocks/micro-content.php"; ?>
|
||||||
<h1 class="page-title">Projects</h1>
|
<div class="content hide_micro">
|
||||||
<div class="page-main-content">
|
<p>
|
||||||
<p>Sorry, there's nothing here yet</p>
|
I haven't written any content here yet.
|
||||||
<p>In the meantime check out my <a href="https://git.fjla.uk">Gitea</a> or <a href="/contact.php">Social Links</a></p>
|
<br>
|
||||||
</div>
|
In the meantime, <a href="https://git.fjla.uk">visit my Gitea Server</a>.
|
||||||
|
</p>
|
||||||
<?php include "./page-blocks/footer.php"; ?>
|
</div>
|
||||||
|
<?php include "./page-blocks/footer.php"; ?>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@ -1,53 +0,0 @@
|
|||||||
@font-face {
|
|
||||||
font-family: 'silkscreenregular';
|
|
||||||
src: url('/style/fonts/silkscreen/silkscreen-regular.woff2') format('woff2'),
|
|
||||||
url('/style/fonts/silkscreen/silkscreen-regular.woff') format('woff'),
|
|
||||||
url('/style/fonts/silkscreen/silkscreen-regular.ttf') format('truetype');
|
|
||||||
font-weight: normal;
|
|
||||||
font-style: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'concertone';
|
|
||||||
src: url('/style/fonts/concertone/concertone-regular.woff2') format('woff2'),
|
|
||||||
url('/style/fonts/concertone/concertone-regular.woff') format('woff'),
|
|
||||||
url('/style/fonts/concertone/concertone-regular.ttf') format('truetype');
|
|
||||||
font-weight: normal;
|
|
||||||
font-style: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'indieflower';
|
|
||||||
src: url('/style/fonts/indieflower/indieflower.woff2') format('woff2'),
|
|
||||||
url('/style/fonts/indieflower/indieflower.woff') format('woff'),
|
|
||||||
url('/style/fonts/indieflower/indieflower.ttf') format('truetype');
|
|
||||||
font-weight: normal;
|
|
||||||
font-style: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'oxygen';
|
|
||||||
src: url('/style/fonts/oxygen/oxygen-regular.woff2') format('woff2'),
|
|
||||||
url('/style/fonts/oxygen/oxygen-regular.woff') format('woff'),
|
|
||||||
url('/style/fonts/oxygen/oxygen-regular.ttf') format('truetype');
|
|
||||||
font-weight: normal;
|
|
||||||
font-style: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'oxygen';
|
|
||||||
src: url('/style/fonts/oxygen/oxygen-bold.woff2') format('woff2'),
|
|
||||||
url('/style/fonts/oxygen/oxygen-bold.woff') format('woff'),
|
|
||||||
url('/style/fonts/oxygen/oxygen-bold.ttf') format('truetype');
|
|
||||||
font-weight: 700;
|
|
||||||
font-style: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'oxygen';
|
|
||||||
src: url('/style/fonts/oxygen/oxygen-light.woff2') format('woff2'),
|
|
||||||
url('/style/fonts/oxygen/oxygen-light.woff') format('woff'),
|
|
||||||
url('/style/fonts/oxygen/oxygen-light.ttf') format('truetype');
|
|
||||||
font-weight: 300;
|
|
||||||
font-style: normal;
|
|
||||||
}
|
|
||||||
@ -5,6 +5,7 @@
|
|||||||
--overlay-color: #2f4f4fb8;
|
--overlay-color: #2f4f4fb8;
|
||||||
--main-text-color: azure;
|
--main-text-color: azure;
|
||||||
--link-color: cyan;
|
--link-color: cyan;
|
||||||
|
--link-visited-color: rgb(189, 0, 189);
|
||||||
}
|
}
|
||||||
/* FONTS */
|
/* FONTS */
|
||||||
@font-face {
|
@font-face {
|
||||||
@ -59,14 +60,19 @@ body {
|
|||||||
position: sticky;
|
position: sticky;
|
||||||
top: -145px;
|
top: -145px;
|
||||||
}
|
}
|
||||||
#header_index{background-color: #a04911} /* Try using image-set() here to offer different formats */
|
#home{background-color: #a04911} /* Try using image-set() here to offer different formats */
|
||||||
@media(min-width: 50px){#header_index{background-image:url("/images/headers/index/300.webp")}}
|
@media(min-width: 50px){#home{background-image:url("/images/headers/index/300.webp")}}
|
||||||
@media(min-width: 301px){#header_index{background-image:url("/images/headers/index/500.webp")}}
|
@media(min-width: 301px){#home{background-image:url("/images/headers/index/500.webp")}}
|
||||||
@media(min-width: 501px){#header_index{background-image:url("/images/headers/index/800.webp")}}
|
@media(min-width: 501px){#home{background-image:url("/images/headers/index/800.webp")}}
|
||||||
@media(min-width: 801px){#header_index{background-image:url("/images/headers/index/1024.webp")}}
|
@media(min-width: 801px){#home{background-image:url("/images/headers/index/1024.webp")}}
|
||||||
@media(min-width:1025px){#header_index{background-image:url("/images/headers/index/1920.webp")}}
|
@media(min-width:1025px){#home{background-image:url("/images/headers/index/1920.webp")}}
|
||||||
@media(min-width:1921px){#header_index{background-image:url("/images/headers/index/2800.webp")}}
|
@media(min-width:1921px){#home{background-image:url("/images/headers/index/2800.webp")}}
|
||||||
@media(min-width:2801px){#header_index{background-image:url("/images/headers/index/4096.webp")}}
|
@media(min-width:2801px){#home{background-image:url("/images/headers/index/4096.webp")}}
|
||||||
|
#contact{background-color: blue}
|
||||||
|
#keys{background-color: blue}
|
||||||
|
#projects{background-color: blue}
|
||||||
|
#email-safety{background-color: blue}
|
||||||
|
#about{background-color: blue}
|
||||||
#header_face {
|
#header_face {
|
||||||
display: flex;
|
display: flex;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -194,10 +200,20 @@ body {
|
|||||||
margin: auto;
|
margin: auto;
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
margin-bottom: 40px;
|
margin-bottom: 40px;
|
||||||
|
text-align: center;
|
||||||
color: var(--main-text-color);
|
color: var(--main-text-color);
|
||||||
font-family: oxygen, sans-serif;
|
font-family: oxygen, sans-serif;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
}
|
}
|
||||||
|
.content a {
|
||||||
|
color: var(--link-color)
|
||||||
|
}
|
||||||
|
.content a:visited {
|
||||||
|
color: var(--link-color)
|
||||||
|
}
|
||||||
|
.content a:hover {
|
||||||
|
color: var(--link-visited-color)
|
||||||
|
}
|
||||||
/* FOOTER */
|
/* FOOTER */
|
||||||
footer {
|
footer {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|||||||
168
style/styles.css
168
style/styles.css
@ -1,168 +0,0 @@
|
|||||||
html {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
min-height: 100%;
|
|
||||||
background-color: #444444;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-title {
|
|
||||||
text-align: center;
|
|
||||||
font-family: oxygen, sans-serif;
|
|
||||||
font-weight: 700;
|
|
||||||
color: #eeeeee;
|
|
||||||
padding-top: 65px;
|
|
||||||
padding-bottom: 10px;
|
|
||||||
width: 95%;
|
|
||||||
overflow: hidden;
|
|
||||||
margin: auto;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.error-title {
|
|
||||||
font-family: silkscreenregular, 'Courier New', Courier, monospace;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title-image img {
|
|
||||||
max-width: 30%;
|
|
||||||
padding-top: 30px;
|
|
||||||
padding-bottom: 30px;
|
|
||||||
margin-left: 35%;
|
|
||||||
margin-right: 35%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-main-content {
|
|
||||||
text-align: center;
|
|
||||||
font-family: oxygen, sans-serif;
|
|
||||||
font-weight: 300;
|
|
||||||
color: #f0f0f0f0;
|
|
||||||
width: 95%;
|
|
||||||
overflow: hidden;
|
|
||||||
margin: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-main-content h2 {
|
|
||||||
padding-top: 45px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.social-links img {
|
|
||||||
max-width: 58px;
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
a.download-link {
|
|
||||||
text-decoration: none;
|
|
||||||
color: #242121;
|
|
||||||
background-color: #d1caca;
|
|
||||||
padding: 10px;
|
|
||||||
border-radius: 10px;
|
|
||||||
text-align: center;
|
|
||||||
margin: 7px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
footer {
|
|
||||||
background-color: rgb(61, 61, 61);
|
|
||||||
color: #eeeeee;
|
|
||||||
font-family: monospace;
|
|
||||||
text-align: center;
|
|
||||||
width: 100%;
|
|
||||||
position: fixed;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* The sidebar menu */
|
|
||||||
.sidebar {
|
|
||||||
height: 100%;
|
|
||||||
width: 0; /* Hidden by default */
|
|
||||||
position: fixed;
|
|
||||||
padding-top: 90px;
|
|
||||||
z-index: 1;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
background-color: #111;
|
|
||||||
overflow-x: hidden;
|
|
||||||
overflow-y: hidden;
|
|
||||||
transition: 0.7s; /* 0.5 second transition effect to slide in the sidebar */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* The sidebar links */
|
|
||||||
.sidebar a {
|
|
||||||
padding: 8px 8px 8px 8px;
|
|
||||||
margin-left: 20px;
|
|
||||||
margin-top: 10px;
|
|
||||||
font-family: oxygen, sans-serif;
|
|
||||||
font-weight: 300;
|
|
||||||
text-decoration: none;
|
|
||||||
text-align: right;
|
|
||||||
font-size: 25px;
|
|
||||||
color: #bcbcbc;
|
|
||||||
display: block;
|
|
||||||
transition: 0.7s;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* When you mouse over the navigation links, change their color */
|
|
||||||
.sidebar a:hover {
|
|
||||||
color: #f1f1f1;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Position and style the close button (top right corner) */
|
|
||||||
.sidebar .close {
|
|
||||||
position: absolute;
|
|
||||||
top: -10px;
|
|
||||||
right: 20px;
|
|
||||||
font-size: 36px;
|
|
||||||
margin-left: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Position the div containing the open button */
|
|
||||||
.inflate {
|
|
||||||
position: absolute;
|
|
||||||
top: 10px;
|
|
||||||
right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* The button used to open the sidebar */
|
|
||||||
.open {
|
|
||||||
font-size: 20px;
|
|
||||||
cursor: pointer;
|
|
||||||
background-color: rgba(0, 0, 0, 0);
|
|
||||||
color: white;
|
|
||||||
padding: 10px 15px;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.open:hover {
|
|
||||||
background-color: #444;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Screens Wider than 600px */
|
|
||||||
@media screen and (min-width: 600px) {
|
|
||||||
/*Hide sidebar open/close buttons*/
|
|
||||||
.inflate {display: none;}
|
|
||||||
.sidebar .close {display: none;}
|
|
||||||
|
|
||||||
/*Change Menu Dimensions*/
|
|
||||||
.sidebar {
|
|
||||||
width: 100%;
|
|
||||||
height: 14px;
|
|
||||||
padding-top: 5px;
|
|
||||||
padding-bottom: 40px;
|
|
||||||
padding-left: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Float links */
|
|
||||||
.sidebar a {
|
|
||||||
float: left;
|
|
||||||
margin-top: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*Provice space for top menu*/
|
|
||||||
.page-title {padding-top: 90px}
|
|
||||||
|
|
||||||
/*Increase social link image size*/
|
|
||||||
.social-links img {max-width: 75px;}
|
|
||||||
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue
Block a user