1.4.0 minor update, updated css with mobile support and design overhaul, added randomized motd to header, updated site content.
This commit is contained in:
parent
308486eb21
commit
f4f68de470
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 319 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 123 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 638 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 699 KiB |
91
index.html
91
index.html
|
|
@ -4,8 +4,8 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Comfitu.re :: Sweet and Cozy</title>
|
<title>Comfitu.re :: Sweet and Cozy</title>
|
||||||
|
|
||||||
<link href="style.css?v=1.3.1" rel="stylesheet"/>
|
<link href="style.css?v=1.4.0" rel="stylesheet"/>
|
||||||
<script src="script.js?v=1.3.1" type="application/javascript"></script>
|
<script src="script.js?v=1.4.0" type="application/javascript"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
|
|
@ -17,8 +17,8 @@
|
||||||
<pre>
|
<pre>
|
||||||
___ __ _ _
|
___ __ _ _
|
||||||
/ __|___ _ __ / _(_) |_ _ _ _ _ ___
|
/ __|___ _ __ / _(_) |_ _ _ _ _ ___
|
||||||
| (__/ _ \ ' \| _| | _| || |_| '_/ -_) <a href="#changelog">v1.3.1</a>
|
| (__/ _ \ ' \| _| | _| || |_| '_/ -_) <a href="#changelog">v1.4.0</a>
|
||||||
\___\___/_|_|_|_| |_|\__|\_,_(_)_| \___| by Fristi-brot.
|
\___\___/_|_|_|_| |_|\__|\_,_(_)_| \___| <script>comfiture.printMotd();</script>
|
||||||
</pre>
|
</pre>
|
||||||
<a href="#home">Home</a>
|
<a href="#home">Home</a>
|
||||||
| <a href="#about">About</a>
|
| <a href="#about">About</a>
|
||||||
|
|
@ -29,7 +29,7 @@
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<div class="content" id="home">
|
<div class="content" id="home">
|
||||||
<pre>
|
<div id="ascii"><pre>
|
||||||
( )
|
( )
|
||||||
( )
|
( )
|
||||||
( )
|
( )
|
||||||
|
|
@ -43,75 +43,74 @@
|
||||||
/\ / /\/\ //___\ \__/ \ \/
|
/\ / /\/\ //___\ \__/ \ \/
|
||||||
/ \ /\/ \//_____\ \ |[]| \
|
/ \ /\/ \//_____\ \ |[]| \
|
||||||
/\/\/\/ //_______\ \|__| \
|
/\/\/\/ //_______\ \|__| \
|
||||||
/ \ /XXXXXXXXXX\ \
|
/ \ /XXXXXXXXXX\ \
|
||||||
\ /_I_II I__I_\__________________\
|
\ /_I_II I__I_\__________________\
|
||||||
I_I| I__I_____[]_|_[]_____I
|
I_I| I__I_____[]_|_[]_____I
|
||||||
I_II I__I_____[]_|_[]_____I
|
I_II I__I_____[]_|_[]_____I
|
||||||
I II__I I XXXXXXX I
|
I II__I I XXXXXXX I
|
||||||
~~~~~" "~~~~~~~~~~~~~~~~~~~~~~~~
|
~~~~~" "~~~~~~~~~~~~~~~~~~~~~~~~
|
||||||
</pre>
|
</pre></div>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
Hello, welcome to my cozy personal website! -w-
|
Hello, welcome to my comfy personal website! (＾▽＾)
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
I am a programmer and web developer from the Netherlands.
|
I am Fristi, a programmer from the Netherlands. On this website you can find
|
||||||
I spend most of my time programming in PHP, and I run a Linux server in my
|
more info about me, my server and my personal projects. If you'd like to chat,
|
||||||
free time as a hobby. It mainly runs the subcon.town services. I also enjoy
|
ping me on the <a href="https://mk.toast.cafe/@fristi">fediverse</a>!
|
||||||
retro video games.
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content" id="about">
|
<div class="content" id="about">
|
||||||
<h1>About me</h1>
|
<h1>About</h1>
|
||||||
<p>
|
<p>
|
||||||
Hi, my name is Fristi.
|
Hi, my name is Fristi. I'm a PHP programmer and server hobbyist from the
|
||||||
I am a programmer, web developer and server admin from the Netherlands.
|
Netherlands. I love old electronics, games and food. While I generally don't
|
||||||
I'm an easy-going guy with a love for old electronics, games and food. If you wish
|
program a lot in my spare time anymore, I do maintain a linux server
|
||||||
to talk to me, hit me up on the <a href="https://mk.toast.cafe/@fristi">fediverse!</a>
|
that hosts some of my private data and services. as well as this website.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<h2>Professional</h2>
|
<h2>Professional</h2>
|
||||||
<p>
|
<p>
|
||||||
I am mainly a back-end web developer, specializing in PHP and the Laravel Framework.
|
For a living, I mainly do backend programming in PHP, specializing in the
|
||||||
Besides that, I also do front-end work, usually focusing on creating simplistic
|
Laravel framework. I also do other bits and pieces of scripting where needed,
|
||||||
user interfaces with pure Javascript (no frameworks or jQuery) and Sass/CSS. I believe
|
although I'm no expert in that. I also do a bit of front-end development where
|
||||||
that refraining from javascript frameworks results in cleaner, more optimized and more controllable code.
|
needed, with experience in Bootstrap, although I prefer to make my own lighter
|
||||||
|
front-end solutions where possible.
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
Besides programming, I also work a lot with Linux servers (and Linux in general).
|
Besides programming, I also work a lot with Linux systems, and use it as my
|
||||||
In a professional capacity, I mainly do devops work, administrating a development
|
preferred operating system on my own computers. In my spare time I maintain a
|
||||||
and production server, helping out with software deployments and maintenance. In
|
personal hobby server that holds most of my private data and services, while
|
||||||
my spare time, I run a hobby server that hosts my personal websites (including this one)
|
also acting as my development server.
|
||||||
and a couple of services I administrate.
|
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
To get a better picture of what I've worked with, please view the projects page.
|
Please view the <a href="#websites">Websites</a> and <a href="#projects">Projects</a>
|
||||||
|
pages to get an idea of what I've worked
|
||||||
|
with. If you wish to know more, feel free to send an email to
|
||||||
|
<a href="mailto:fristi@subcon.town">fristi@subcon.town</a>.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content" id="websites">
|
<div class="content" id="websites">
|
||||||
<h1>Websites & Blogs</h1>
|
<h1>My websites</h1>
|
||||||
<p>
|
<p>
|
||||||
I currently host the following websites:
|
I currently host the following websites:
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
|
- <a href="https://subcon.town/">Subcon Town</a>:
|
||||||
|
the main website of my personal server.
|
||||||
|
<a href="https://vcs.subcon.town/fristi/subcon.town">Source</a><br/>
|
||||||
- <a href="https://comfitu.re">Comfiture</a>:
|
- <a href="https://comfitu.re">Comfiture</a>:
|
||||||
my personal website, the one you're reading now.
|
my personal website, the one you're reading now.
|
||||||
<a href="https://vcs.subcon.town/fristi/comfitu.re">Source</a><br/>
|
<a href="https://vcs.subcon.town/fristi/comfitu.re">Source</a><br/>
|
||||||
- <a href="https://something.comfitu.re/">Something Comfy</a>:
|
- <a href="https://something.comfitu.re/">Something Fresh</a>:
|
||||||
a blog featuring my random thoughts on various things.
|
a blog featuring my random thoughts on various things.
|
||||||
<a href="https://vcs.subcon.town/fristi/something-fresh">Source</a><br />
|
<a href="https://vcs.subcon.town/fristi/something-fresh">Source</a><br />
|
||||||
- <a href="https://paperbin.comfitu.re/">The Paperbin</a>:
|
- <a href="https://paperbin.comfitu.re/">The Paperbin</a>:
|
||||||
a blog where I rant about the things that annoy me.
|
a blog where I rant about the things that annoy me.
|
||||||
<a href="https://vcs.subcon.town/fristi/paperbin">Source</a><br/>
|
<a href="https://vcs.subcon.town/fristi/paperbin">Source</a>
|
||||||
- <a href="https://subcon.town/">Subcon Town</a>:
|
|
||||||
the main website of my personal server.
|
|
||||||
<a href="https://vcs.subcon.town/fristi/subcon.town">Source</a>
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content" id="projects">
|
<div class="content" id="projects">
|
||||||
<h1>Projects</h1>
|
<h1>Projects</h1>
|
||||||
<p>
|
<p>
|
||||||
|
|
@ -132,18 +131,16 @@
|
||||||
please view the <a href="https://subcon.town">Subcon Town</a> website.
|
please view the <a href="https://subcon.town">Subcon Town</a> website.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content" id="contact">
|
<div class="content" id="contact">
|
||||||
<h1>Contact information</h1>
|
<h1>Contact information</h1>
|
||||||
<p>
|
<p>
|
||||||
I can be contacted by email, or the fediverse.
|
Want to send me a message? Use one of the two methods below:
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
Email: <a href="mailto:fristi@subcon.town">fristi@subcon.town</a><br/>
|
Email: <a href="mailto:fristi@subcon.town">fristi@subcon.town</a><br/>
|
||||||
Fediverse: <a target="_blank" href="https://mk.toast.cafe/@fristi">@fristi@mk.toast.cafe</a>
|
Fediverse: <a target="_blank" href="https://mk.toast.cafe/@fristi">@fristi@mk.toast.cafe</a>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content" id="copyright">
|
<div class="content" id="copyright">
|
||||||
<h1>Copyright notice</h1>
|
<h1>Copyright notice</h1>
|
||||||
<p>
|
<p>
|
||||||
|
|
@ -168,9 +165,17 @@
|
||||||
<a href="mailto:fristi@subcon.town">fristi@subcon.town</a>.
|
<a href="mailto:fristi@subcon.town">fristi@subcon.town</a>.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content" id="changelog">
|
<div class="content" id="changelog">
|
||||||
<h1>Changelog</h1>
|
<h1>Changelog</h1>
|
||||||
|
<p>
|
||||||
|
1.4.0 Minor update:<br/>
|
||||||
|
- Added responsive sizing for mobile support<br/>
|
||||||
|
- Updated visual style of the "terminal"<br/>
|
||||||
|
- Removed a few lower-quality backgrounds<br/>
|
||||||
|
- Updated footer with direct link to source<br/>
|
||||||
|
- Refreshed content a bit<br/>
|
||||||
|
- Added randomized motd under version number
|
||||||
|
</p>
|
||||||
<p>
|
<p>
|
||||||
1.3.1 Patch:<br/>
|
1.3.1 Patch:<br/>
|
||||||
- Set background image rendering to "crisp-edges"
|
- Set background image rendering to "crisp-edges"
|
||||||
|
|
@ -209,8 +214,10 @@
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
<br/>
|
<div style="text-align: right"> 2021 Comfitu.re.
|
||||||
<div style="text-align: right"><a href="#copyright">BOML</a> 2021 Comfitu.re.</div>
|
<a href="#copyright">License details</a>
|
||||||
|
<a target="_blank" href="https://vcs.subcon.town/fristi/comfitu.re">Source</a>
|
||||||
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
32
script.js
32
script.js
|
|
@ -2,16 +2,29 @@
|
||||||
var comfiture = {};
|
var comfiture = {};
|
||||||
var activeLink;
|
var activeLink;
|
||||||
var activeContent;
|
var activeContent;
|
||||||
|
var motds = [
|
||||||
|
"Made by Fristi",
|
||||||
|
"Made by a crocodile",
|
||||||
|
"Made by a Dutch potato",
|
||||||
|
"Fristi? Fristi habe ich nicht.",
|
||||||
|
"[Subject quote here]",
|
||||||
|
"Press R or Z twice to do a barrel roll",
|
||||||
|
"You wouldn't download a car.",
|
||||||
|
"The last metroid is in captivity.",
|
||||||
|
"Suavemente, bésame",
|
||||||
|
"What is love?",
|
||||||
|
"Justice in Spades",
|
||||||
|
"Let's get Volatile",
|
||||||
|
];
|
||||||
var wallpapers = [
|
var wallpapers = [
|
||||||
'1.gif', '2.gif', '3.gif', '4.gif',
|
'1.gif', '3.gif', '4.gif',
|
||||||
'5.gif', '6.gif', '7.gif', '8.gif',
|
'6.gif', '7.gif', '8.gif',
|
||||||
'9.gif', '10.gif', '11.gif', '12.gif',
|
'9.gif', '10.gif', '12.gif',
|
||||||
'13.gif', '14.gif', '15.gif', '16.gif',
|
'13.gif', '14.gif', '16.gif',
|
||||||
'17.gif', '18.gif', '19.gif', '20.gif',
|
'17.gif', '18.gif', '19.gif', '20.gif',
|
||||||
'21.gif', '22.gif', '23.gif',
|
'22.gif', '23.gif',
|
||||||
'1.png', '2.png', '3.png',
|
'1.png', '2.png', '3.png',
|
||||||
'5.png', '6.png', '7.png', '8.png',
|
'5.png', '6.png'
|
||||||
'9.png',
|
|
||||||
];
|
];
|
||||||
|
|
||||||
//Function to set the wallpaper
|
//Function to set the wallpaper
|
||||||
|
|
@ -20,6 +33,11 @@
|
||||||
document.querySelector('.background').style.backgroundImage = 'url("backgrounds/'+wallpaper+'")';
|
document.querySelector('.background').style.backgroundImage = 'url("backgrounds/'+wallpaper+'")';
|
||||||
};
|
};
|
||||||
|
|
||||||
|
comfiture.printMotd = function () {
|
||||||
|
let motd = motds[Math.floor(Math.random() * motds.length)];
|
||||||
|
document.write(motd);
|
||||||
|
}
|
||||||
|
|
||||||
//Onload
|
//Onload
|
||||||
window.addEventListener('load', function(){
|
window.addEventListener('load', function(){
|
||||||
//Hide all content
|
//Hide all content
|
||||||
|
|
|
||||||
71
style.css
71
style.css
|
|
@ -33,30 +33,22 @@ body {
|
||||||
.container {
|
.container {
|
||||||
position:absolute;
|
position:absolute;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
top:0;
|
height: 100%;
|
||||||
left:0;
|
width: 100%;
|
||||||
bottom:0;
|
|
||||||
right:0;
|
|
||||||
width: 880px;
|
|
||||||
height: 652px;
|
|
||||||
|
|
||||||
padding:30px 40px;
|
padding:8px;
|
||||||
margin:auto;
|
margin:0;
|
||||||
|
|
||||||
background-color: rgba(31, 37, 47, 0.9);
|
background-color: rgba(45, 40, 35, 0.95);
|
||||||
color: rgba(90, 228, 70, 1);
|
color: rgb(210, 172, 97);
|
||||||
|
|
||||||
font-family: IBMVGA8, monospace;
|
font-family: IBMVGA8, monospace;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
|
|
||||||
line-height: 16px;
|
line-height: 16px;
|
||||||
|
|
||||||
border-radius: 90px / 820px;
|
border: 2px solid rgb(0, 0, 0);
|
||||||
border-style: outset;
|
box-shadow: 5px 5px 0 rgb(0, 0, 0);
|
||||||
border-color: rgba(126, 126, 134, 1);
|
/*box-shadow: 0 0 10px rgba(0, 0, 0, 1);*/
|
||||||
border-width: 8px;
|
|
||||||
|
|
||||||
box-shadow: 0 0 10px rgba(0, 0, 0, 1);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
header, main, footer {
|
header, main, footer {
|
||||||
|
|
@ -68,24 +60,25 @@ header, main, footer {
|
||||||
}
|
}
|
||||||
|
|
||||||
header {
|
header {
|
||||||
height: 96px;
|
height: 112px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
main {
|
main {
|
||||||
height: 448px;
|
height: calc(100% - 160px);
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
padding: 16px;
|
margin: 16px 0;
|
||||||
|
padding: 0 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
height: 32px;
|
height: 16px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: rgba(240,240,240, 1);
|
color: rgb(213, 209, 206);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -98,8 +91,8 @@ a:after {
|
||||||
}
|
}
|
||||||
|
|
||||||
a:hover, a:active {
|
a:hover, a:active {
|
||||||
background-color: rgba(240,240,240, 1);
|
background-color: rgb(234, 231, 227);
|
||||||
color: rgba(31, 37, 47, 0.8);
|
color: rgba(62, 51, 48, 0.95);
|
||||||
}
|
}
|
||||||
|
|
||||||
a.active {
|
a.active {
|
||||||
|
|
@ -149,6 +142,36 @@ pre {
|
||||||
font-family: IBMVGA8, monospace;
|
font-family: IBMVGA8, monospace;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#ascii {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#ascii pre {
|
||||||
|
display: inline-block;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
.content p:last-child {
|
.content p:last-child {
|
||||||
margin:0;
|
margin:0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media only screen and (min-width: 864px) {
|
||||||
|
.container {
|
||||||
|
position:absolute;
|
||||||
|
left: 32px;
|
||||||
|
bottom: 32px;
|
||||||
|
width: 800px;
|
||||||
|
height: 596px;
|
||||||
|
|
||||||
|
padding:16px;
|
||||||
|
margin:auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
height: 96px;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
height: 416px;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue