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 |
127
index.html
127
index.html
|
|
@ -4,8 +4,8 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Comfitu.re :: Sweet and Cozy</title>
|
||||
|
||||
<link href="style.css?v=1.3.1" rel="stylesheet"/>
|
||||
<script src="script.js?v=1.3.1" type="application/javascript"></script>
|
||||
<link href="style.css?v=1.4.0" rel="stylesheet"/>
|
||||
<script src="script.js?v=1.4.0" type="application/javascript"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
|
@ -17,8 +17,8 @@
|
|||
<pre>
|
||||
___ __ _ _
|
||||
/ __|___ _ __ / _(_) |_ _ _ _ _ ___
|
||||
| (__/ _ \ ' \| _| | _| || |_| '_/ -_) <a href="#changelog">v1.3.1</a>
|
||||
\___\___/_|_|_|_| |_|\__|\_,_(_)_| \___| by Fristi-brot.
|
||||
| (__/ _ \ ' \| _| | _| || |_| '_/ -_) <a href="#changelog">v1.4.0</a>
|
||||
\___\___/_|_|_|_| |_|\__|\_,_(_)_| \___| <script>comfiture.printMotd();</script>
|
||||
</pre>
|
||||
<a href="#home">Home</a>
|
||||
| <a href="#about">About</a>
|
||||
|
|
@ -29,89 +29,88 @@
|
|||
|
||||
<main>
|
||||
<div class="content" id="home">
|
||||
<pre>
|
||||
( )
|
||||
( )
|
||||
( )
|
||||
( )
|
||||
) )
|
||||
( ( /\
|
||||
(_) / \ /\
|
||||
________[_]________ /\/ \/ \
|
||||
/\ /\ ______ \ / /\/\ /\/\
|
||||
/ \ //_\ \ /\ \ /\/\/ \/ \
|
||||
/\ / /\/\ //___\ \__/ \ \/
|
||||
/ \ /\/ \//_____\ \ |[]| \
|
||||
/\/\/\/ //_______\ \|__| \
|
||||
/ \ /XXXXXXXXXX\ \
|
||||
\ /_I_II I__I_\__________________\
|
||||
I_I| I__I_____[]_|_[]_____I
|
||||
I_II I__I_____[]_|_[]_____I
|
||||
I II__I I XXXXXXX I
|
||||
~~~~~" "~~~~~~~~~~~~~~~~~~~~~~~~
|
||||
</pre>
|
||||
<div id="ascii"><pre>
|
||||
( )
|
||||
( )
|
||||
( )
|
||||
( )
|
||||
) )
|
||||
( ( /\
|
||||
(_) / \ /\
|
||||
________[_]________ /\/ \/ \
|
||||
/\ /\ ______ \ / /\/\ /\/\
|
||||
/ \ //_\ \ /\ \ /\/\/ \/ \
|
||||
/\ / /\/\ //___\ \__/ \ \/
|
||||
/ \ /\/ \//_____\ \ |[]| \
|
||||
/\/\/\/ //_______\ \|__| \
|
||||
/ \ /XXXXXXXXXX\ \
|
||||
\ /_I_II I__I_\__________________\
|
||||
I_I| I__I_____[]_|_[]_____I
|
||||
I_II I__I_____[]_|_[]_____I
|
||||
I II__I I XXXXXXX I
|
||||
~~~~~" "~~~~~~~~~~~~~~~~~~~~~~~~
|
||||
</pre></div>
|
||||
|
||||
<p>
|
||||
Hello, welcome to my cozy personal website! -w-
|
||||
Hello, welcome to my comfy personal website! (＾▽＾)
|
||||
</p>
|
||||
|
||||
<p>
|
||||
I am a programmer and web developer from the Netherlands.
|
||||
I spend most of my time programming in PHP, and I run a Linux server in my
|
||||
free time as a hobby. It mainly runs the subcon.town services. I also enjoy
|
||||
retro video games.
|
||||
I am Fristi, a programmer from the Netherlands. On this website you can find
|
||||
more info about me, my server and my personal projects. If you'd like to chat,
|
||||
ping me on the <a href="https://mk.toast.cafe/@fristi">fediverse</a>!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="content" id="about">
|
||||
<h1>About me</h1>
|
||||
<h1>About</h1>
|
||||
<p>
|
||||
Hi, my name is Fristi.
|
||||
I am a programmer, web developer and server admin from the Netherlands.
|
||||
I'm an easy-going guy with a love for old electronics, games and food. If you wish
|
||||
to talk to me, hit me up on the <a href="https://mk.toast.cafe/@fristi">fediverse!</a>
|
||||
Hi, my name is Fristi. I'm a PHP programmer and server hobbyist from the
|
||||
Netherlands. I love old electronics, games and food. While I generally don't
|
||||
program a lot in my spare time anymore, I do maintain a linux server
|
||||
that hosts some of my private data and services. as well as this website.
|
||||
</p>
|
||||
|
||||
<h2>Professional</h2>
|
||||
<p>
|
||||
I am mainly a back-end web developer, specializing in PHP and the Laravel Framework.
|
||||
Besides that, I also do front-end work, usually focusing on creating simplistic
|
||||
user interfaces with pure Javascript (no frameworks or jQuery) and Sass/CSS. I believe
|
||||
that refraining from javascript frameworks results in cleaner, more optimized and more controllable code.
|
||||
For a living, I mainly do backend programming in PHP, specializing in the
|
||||
Laravel framework. I also do other bits and pieces of scripting where needed,
|
||||
although I'm no expert in that. I also do a bit of front-end development where
|
||||
needed, with experience in Bootstrap, although I prefer to make my own lighter
|
||||
front-end solutions where possible.
|
||||
</p>
|
||||
<p>
|
||||
Besides programming, I also work a lot with Linux servers (and Linux in general).
|
||||
In a professional capacity, I mainly do devops work, administrating a development
|
||||
and production server, helping out with software deployments and maintenance. In
|
||||
my spare time, I run a hobby server that hosts my personal websites (including this one)
|
||||
and a couple of services I administrate.
|
||||
Besides programming, I also work a lot with Linux systems, and use it as my
|
||||
preferred operating system on my own computers. In my spare time I maintain a
|
||||
personal hobby server that holds most of my private data and services, while
|
||||
also acting as my development server.
|
||||
</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>
|
||||
</div>
|
||||
|
||||
<div class="content" id="websites">
|
||||
<h1>Websites & Blogs</h1>
|
||||
<h1>My websites</h1>
|
||||
<p>
|
||||
I currently host the following websites:
|
||||
</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>:
|
||||
my personal website, the one you're reading now.
|
||||
<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 href="https://vcs.subcon.town/fristi/something-fresh">Source</a><br />
|
||||
- <a href="https://paperbin.comfitu.re/">The Paperbin</a>:
|
||||
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://subcon.town/">Subcon Town</a>:
|
||||
the main website of my personal server.
|
||||
<a href="https://vcs.subcon.town/fristi/subcon.town">Source</a>
|
||||
<a href="https://vcs.subcon.town/fristi/paperbin">Source</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="content" id="projects">
|
||||
<h1>Projects</h1>
|
||||
<p>
|
||||
|
|
@ -132,18 +131,16 @@
|
|||
please view the <a href="https://subcon.town">Subcon Town</a> website.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="content" id="contact">
|
||||
<h1>Contact information</h1>
|
||||
<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>
|
||||
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>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="content" id="copyright">
|
||||
<h1>Copyright notice</h1>
|
||||
<p>
|
||||
|
|
@ -168,9 +165,17 @@
|
|||
<a href="mailto:fristi@subcon.town">fristi@subcon.town</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="content" id="changelog">
|
||||
<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>
|
||||
1.3.1 Patch:<br/>
|
||||
- Set background image rendering to "crisp-edges"
|
||||
|
|
@ -209,8 +214,10 @@
|
|||
</main>
|
||||
|
||||
<footer>
|
||||
<br/>
|
||||
<div style="text-align: right"><a href="#copyright">BOML</a> 2021 Comfitu.re.</div>
|
||||
<div style="text-align: right"> 2021 Comfitu.re.
|
||||
<a href="#copyright">License details</a>
|
||||
<a target="_blank" href="https://vcs.subcon.town/fristi/comfitu.re">Source</a>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
32
script.js
32
script.js
|
|
@ -2,16 +2,29 @@
|
|||
var comfiture = {};
|
||||
var activeLink;
|
||||
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 = [
|
||||
'1.gif', '2.gif', '3.gif', '4.gif',
|
||||
'5.gif', '6.gif', '7.gif', '8.gif',
|
||||
'9.gif', '10.gif', '11.gif', '12.gif',
|
||||
'13.gif', '14.gif', '15.gif', '16.gif',
|
||||
'1.gif', '3.gif', '4.gif',
|
||||
'6.gif', '7.gif', '8.gif',
|
||||
'9.gif', '10.gif', '12.gif',
|
||||
'13.gif', '14.gif', '16.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',
|
||||
'5.png', '6.png', '7.png', '8.png',
|
||||
'9.png',
|
||||
'5.png', '6.png'
|
||||
];
|
||||
|
||||
//Function to set the wallpaper
|
||||
|
|
@ -20,6 +33,11 @@
|
|||
document.querySelector('.background').style.backgroundImage = 'url("backgrounds/'+wallpaper+'")';
|
||||
};
|
||||
|
||||
comfiture.printMotd = function () {
|
||||
let motd = motds[Math.floor(Math.random() * motds.length)];
|
||||
document.write(motd);
|
||||
}
|
||||
|
||||
//Onload
|
||||
window.addEventListener('load', function(){
|
||||
//Hide all content
|
||||
|
|
|
|||
71
style.css
71
style.css
|
|
@ -33,30 +33,22 @@ body {
|
|||
.container {
|
||||
position:absolute;
|
||||
box-sizing: border-box;
|
||||
top:0;
|
||||
left:0;
|
||||
bottom:0;
|
||||
right:0;
|
||||
width: 880px;
|
||||
height: 652px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
padding:30px 40px;
|
||||
margin:auto;
|
||||
padding:8px;
|
||||
margin:0;
|
||||
|
||||
background-color: rgba(31, 37, 47, 0.9);
|
||||
color: rgba(90, 228, 70, 1);
|
||||
background-color: rgba(45, 40, 35, 0.95);
|
||||
color: rgb(210, 172, 97);
|
||||
|
||||
font-family: IBMVGA8, monospace;
|
||||
font-size: 16px;
|
||||
|
||||
line-height: 16px;
|
||||
|
||||
border-radius: 90px / 820px;
|
||||
border-style: outset;
|
||||
border-color: rgba(126, 126, 134, 1);
|
||||
border-width: 8px;
|
||||
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 1);
|
||||
border: 2px solid rgb(0, 0, 0);
|
||||
box-shadow: 5px 5px 0 rgb(0, 0, 0);
|
||||
/*box-shadow: 0 0 10px rgba(0, 0, 0, 1);*/
|
||||
}
|
||||
|
||||
header, main, footer {
|
||||
|
|
@ -68,24 +60,25 @@ header, main, footer {
|
|||
}
|
||||
|
||||
header {
|
||||
height: 96px;
|
||||
height: 112px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
main {
|
||||
height: 448px;
|
||||
height: calc(100% - 160px);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
padding: 16px;
|
||||
margin: 16px 0;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
footer {
|
||||
height: 32px;
|
||||
height: 16px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
a {
|
||||
color: rgba(240,240,240, 1);
|
||||
color: rgb(213, 209, 206);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
@ -98,8 +91,8 @@ a:after {
|
|||
}
|
||||
|
||||
a:hover, a:active {
|
||||
background-color: rgba(240,240,240, 1);
|
||||
color: rgba(31, 37, 47, 0.8);
|
||||
background-color: rgb(234, 231, 227);
|
||||
color: rgba(62, 51, 48, 0.95);
|
||||
}
|
||||
|
||||
a.active {
|
||||
|
|
@ -149,6 +142,36 @@ pre {
|
|||
font-family: IBMVGA8, monospace;
|
||||
}
|
||||
|
||||
#ascii {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#ascii pre {
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.content p:last-child {
|
||||
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