feat: update site
This commit is contained in:
Strix
parent
71b2aaae4f
commit
a6ff285b2e
6 changed files with 321 additions and 37 deletions
BIN
public/assets/logo.webp
Normal file
BIN
public/assets/logo.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 178 KiB |
|
|
@ -3,67 +3,104 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<meta name="description" content="Nebulosus, a company focused on providing an intuitive interface for anything and anyone. Making applications that are useful.">
|
|
||||||
<meta name="keywords" content="website,software,developer,nederland,web">
|
|
||||||
<title>Nebulosus</title>
|
<title>Nebulosus</title>
|
||||||
|
<meta name="description" content="Nebulosus is a dutch company focusing on intuitivism, simplicity, redundancy, reliability and friendliness.">
|
||||||
|
<link rel="icon" href="/assets/logo.webp" type="image/webp">
|
||||||
<link rel="stylesheet" href="./res/style.css">
|
<link rel="stylesheet" href="./res/style.css">
|
||||||
<script src="./res/cases.js" defer></script>
|
<script src="./res/cases.js" defer></script>
|
||||||
<script src="./res/anchors.js" defer></script>
|
<script src="./res/anchors.js" defer></script>
|
||||||
|
<script src="./res/locale.js" defer></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
[data-i18n-show] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<header style="display: flex; justify-content: space-between;">
|
<header style="display: flex; justify-content: space-between;">
|
||||||
<div class="logo" style="display: flex; align-items: center; gap: .75rem">
|
<div class="logo" style="display: flex; align-items: center; gap: .75rem;">
|
||||||
<img src="/assets/logo.webp" height="40" width="40" alt="" />
|
<img src="/assets/logo.webp" height="40" width="40" alt="" />
|
||||||
<span>Nebulosus</span>
|
<span>Nebulosus</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="columns" style="padding: 1rem; justify-content: center;">
|
<div class="columns" style="padding: 1.5rem; justify-content: center;">
|
||||||
<a href="/">Home</a>
|
<a href="/">Home</a>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<main>
|
<main data-i18n-show>
|
||||||
<section id="intro">
|
<section id="intro">
|
||||||
<div class="columns" style="align-items: flex-start; padding: 2rem; gap: 2rem;">
|
<div class="columns" style="align-items: flex-start; padding: 2rem; gap: 2rem;">
|
||||||
<img src="/assets/logo.webp" height="100" width="100" style="filter: drop-shadow(0 0 20px #fff);" />
|
<img src="/assets/logo.webp" height="100" width="100" style="filter: drop-shadow(0 0 20px #fff);" />
|
||||||
<div class="rows">
|
<div class="rows">
|
||||||
<h1>Nebulosus</h1>
|
<h1>Nebulosus</h1>
|
||||||
<span>Focused on innovation.</span>
|
<span data-i18n="$.motto"></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<div>
|
|
||||||
<section id="offer">
|
<!-- keep some sample text for SEO n stuff -->
|
||||||
<h2>What does Nebulosus offer?</h2>
|
<section id="about">
|
||||||
<span>Nebulosus offers a variety of services:</span>
|
<h2 data-i18n="about.title">About</h2>
|
||||||
<ol class="rows" style="gap: .5em;">
|
<p data-i18n="about.text">
|
||||||
<li><span style="border-bottom: 1px solid blue">Website / Application Development</span></li>
|
Nebulosus is a dutch company focusing on intuitivism, simplicity, redundancy, reliability and
|
||||||
<li><span style="border-bottom: 1px solid darkcyan">Server Hosting</span></li>
|
friendliness.
|
||||||
<li><span style="border-bottom: 1px solid darkblue">Technical Support</span></li>
|
Software should be intuitive, aware of it's environment. That's what Nebulosus strives for.
|
||||||
</ol>
|
If you want to develop an app with intuitive design and a redundant infrastructure, please reach out!
|
||||||
<button id="cases-button" hidden>Cases</button>
|
If you're looking for a company site, let's discuss it!
|
||||||
<div id="cases" hidden></div>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
<section id="about">
|
|
||||||
<h2>About Nebulosus</h2>
|
<section id="offer">
|
||||||
<p>
|
<h2 data-i18n="offer.title">Offer</h2>
|
||||||
Nebulosus is a dutch company focusing on intuitivism, <span style="letter-spacing: 1px;">simplicity</span>, <b style="color: darkgoldenrod;">redundancy</b>, <span style="color: darkcyan; text-decoration: underline;">reliability</span> and <i style="color: green">friendliness</i>. <br />
|
<div style="display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));">
|
||||||
Software should be intuitive, aware of it's environment. That's what Nebulosus strives for.
|
<div>
|
||||||
<br />
|
<h4 data-i18n="offer.it-consultancy.title"></h4>
|
||||||
If you want to develop an app with intuitive design and a redundant infrastructure, please reach out! <br/>
|
<p data-i18n="offer.it-consultancy.tagline"></p>
|
||||||
If you're looking for a company site, let's discuss it!
|
<p data-i18n="offer.it-consultancy.description"></p>
|
||||||
</p>
|
<span data-i18n="offer.it-consultancy.solutions"></span>
|
||||||
</section>
|
</div>
|
||||||
</div>
|
<div>
|
||||||
<section id="more-info">
|
<h4 data-i18n="offer.managed-hosting.title"></h4>
|
||||||
<h2>More information about Nebulosus</h2>
|
<p data-i18n="offer.managed-hosting.tagline"></p>
|
||||||
|
<p data-i18n="offer.managed-hosting.description"></p>
|
||||||
|
<span data-i18n="offer.managed-hosting.solutions"></span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 data-i18n="offer.tech-support.title"></h4>
|
||||||
|
<p data-i18n="offer.tech-support.tagline"></p>
|
||||||
|
<p data-i18n="offer.tech-support.description"></p>
|
||||||
|
<span data-i18n="offer.tech-support.solutions"></span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 data-i18n="offer.development.title"></h4>
|
||||||
|
<p data-i18n="offer.development.tagline"></p>
|
||||||
|
<p data-i18n="offer.development.description"></p>
|
||||||
|
<span data-i18n="offer.development.solutions"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="info">
|
||||||
|
<h2>Information</h2>
|
||||||
<div class="rows">
|
<div class="rows">
|
||||||
<span>E-mail: <a href="mailto:info@nebulosus.nl">info@nebulosus.nl</a></span>
|
<span><span data-i18n="dict.mail"></span>: <a href="#" data-i18n="$.mail"
|
||||||
<span>Chamber of Commerce number: <strong>93409583</strong></span>
|
onclick="window.open('mailto:info'+'@'+''+'nebulosus'+'.n'+'l', '_self')"></a></span>
|
||||||
|
<span><span data-i18n="dict.kvk"></span>: <strong data-i18n="$.kvk" href="#"></strong></span>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<div style="display: flex; justify-content: space-between">
|
||||||
|
<span>© 2025 Nebulosus</span>
|
||||||
|
<div>
|
||||||
|
<button onclick="locale.setPreferredLocale('en')">EN</button>
|
||||||
|
<button onclick="locale.setPreferredLocale('nl')">NL</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
<!-- Want to collaborate? -->
|
<!-- Want to collaborate? -->
|
||||||
<!-- E-Mail: didier (at) nebulosus (dot) nl -->
|
<!-- E-Mail: didier (at) nebulosus (dot) nl -->
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
103
public/res/locale.js
Normal file
103
public/res/locale.js
Normal file
|
|
@ -0,0 +1,103 @@
|
||||||
|
(() => {
|
||||||
|
const getLocale = () => {
|
||||||
|
const cacheLocale = localStorage.getItem('preferredLocale')
|
||||||
|
if (cacheLocale) return cacheLocale
|
||||||
|
localStorage.setItem('preferredLocale', navigator.language);
|
||||||
|
return locale
|
||||||
|
}
|
||||||
|
|
||||||
|
const setPreferredLocale = (locale) => {
|
||||||
|
localStorage.setItem('preferredLocale', locale);
|
||||||
|
setLocale()
|
||||||
|
}
|
||||||
|
|
||||||
|
const getLocaleURL = (locale = getLocale()) => {
|
||||||
|
const lang = locale.split('-')[0];
|
||||||
|
return `/res/locale/${lang}.json`
|
||||||
|
}
|
||||||
|
|
||||||
|
const loadLocale = async (locale = getLocale()) => {
|
||||||
|
// check localStorage
|
||||||
|
const cacheDate = localStorage.getItem(`locale-${locale}`)
|
||||||
|
if (cacheDate) {
|
||||||
|
if (Date.now() - cacheDate < 1000 * 60 * 60 * 24) { // 1 day
|
||||||
|
return JSON.parse(localStorage.getItem(`locale-${locale}-data`))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
const response = await fetch(getLocaleURL(locale), { cache: 'no-store' })
|
||||||
|
if (response.ok) {
|
||||||
|
const data = await response.json()
|
||||||
|
localStorage.setItem(`locale-${locale}`, Date.now())
|
||||||
|
localStorage.setItem(`locale-${locale}-data`, JSON.stringify(data))
|
||||||
|
return data
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error)
|
||||||
|
if (cacheDate) { // if error then return cache even if expired
|
||||||
|
return JSON.parse(localStorage.getItem(`locale-${locale}-data`))
|
||||||
|
} else {
|
||||||
|
if (locale !== 'en') return await loadLocale('en');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
|
||||||
|
const setLocale = async (locale = getLocale()) => {
|
||||||
|
const data = await loadLocale(locale)
|
||||||
|
document.querySelectorAll('[data-i18n]').forEach(async (element) => {
|
||||||
|
try {
|
||||||
|
// main.intro.title => {main: {intro: {title: 'value'}}}
|
||||||
|
const keys = element.getAttribute('data-i18n').split('.');
|
||||||
|
console.log(keys)
|
||||||
|
let value = data;
|
||||||
|
keys.forEach((key) => value = value[key]);
|
||||||
|
console.log(value)
|
||||||
|
// if array then into ul list
|
||||||
|
if (Array.isArray(value)) {
|
||||||
|
element.innerHTML = ''
|
||||||
|
const ul = document.createElement('ul')
|
||||||
|
value.forEach((item) => {
|
||||||
|
const li = document.createElement('li')
|
||||||
|
li.innerHTML = item
|
||||||
|
ul.appendChild(li)
|
||||||
|
})
|
||||||
|
element.appendChild(ul)
|
||||||
|
} else {
|
||||||
|
element.innerHTML = value ?? '###';
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error)
|
||||||
|
element.innerHTML = '###';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
document.querySelectorAll('[data-i18n-show').forEach(el => el.removeAttribute('data-i18n-show'))
|
||||||
|
}
|
||||||
|
|
||||||
|
window.locale = {
|
||||||
|
setPreferredLocale,
|
||||||
|
getLocale,
|
||||||
|
getLocaleURL,
|
||||||
|
loadLocale,
|
||||||
|
setLocale,
|
||||||
|
expireLocale: () => {
|
||||||
|
localStorage.removeItem(`locale-${getLocale()}`)
|
||||||
|
localStorage.removeItem(`locale-${getLocale()}-data`)
|
||||||
|
setLocale()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
window.locale.setLocale();
|
||||||
|
|
||||||
|
// expiry management
|
||||||
|
// check if locale is older than EXPIRY_TIME then fetch again
|
||||||
|
function checkExpiry() {
|
||||||
|
const cacheDate = localStorage.getItem(`locale-${getLocale()}`)
|
||||||
|
if (cacheDate) {
|
||||||
|
if (Date.now() - cacheDate > 1000 * 60 * 60 * 24) { // 1 day
|
||||||
|
window.locale.expireLocale()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
setInterval(checkExpiry, 1000 * 60 * 60); // 1 hour
|
||||||
|
checkExpiry()
|
||||||
|
})()
|
||||||
66
public/res/locale/en.json
Normal file
66
public/res/locale/en.json
Normal file
|
|
@ -0,0 +1,66 @@
|
||||||
|
{
|
||||||
|
"$": {
|
||||||
|
"name": "Nebulosus",
|
||||||
|
"kvk": 93409583,
|
||||||
|
"mail": "info@nebulosus.nl",
|
||||||
|
"motto": "Focused on innovation."
|
||||||
|
},
|
||||||
|
"about": {
|
||||||
|
"title": "About",
|
||||||
|
"text": "Nebulosus is a Dutch company focused on intuition, <span style='letter-spacing: 1px;'>simplicity</span>, <b style='color: darkgoldenrod;'>redundancy</b>, <span style='color: darkcyan; text-decoration: underline;'>reliability</span>, and <i style='color: green'>friendliness</i>. <br /> We believe software should be intuitive and aware of its environment. This is the standard we aim for at Nebulosus.<br />Looking to develop an app with intuitive design and robust infrastructure? Get in touch!<br />Need a company website? Let’s discuss how we can help."
|
||||||
|
},
|
||||||
|
"offer": {
|
||||||
|
"title": "Offer",
|
||||||
|
"it-consultancy": {
|
||||||
|
"title": "IT Consultancy",
|
||||||
|
"tagline": "IT consultancy services for your business.",
|
||||||
|
"description": "Nebulosus offers IT consultancy services for your business. Giving you a clear understanding of the technology you need to move forward.",
|
||||||
|
"solutions": [
|
||||||
|
"IT Strategy",
|
||||||
|
"Infrastructure",
|
||||||
|
"Security",
|
||||||
|
"Compliance",
|
||||||
|
"Training"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"managed-hosting": {
|
||||||
|
"title": "Managed Hosting",
|
||||||
|
"tagline": "Managed hosting services for your website.",
|
||||||
|
"description": "Nebulosus offers managed hosting services for your website. Taking care of the technical stuff so you can focus on your business.",
|
||||||
|
"solutions": [
|
||||||
|
"Application Hosting",
|
||||||
|
"DNS Management (Domain and Subdomains)",
|
||||||
|
"SSL Certificates",
|
||||||
|
"Email Hosting"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"tech-support": {
|
||||||
|
"title": "Tech Support",
|
||||||
|
"tagline": "Professional support for your technical issues.",
|
||||||
|
"description": "Having an issue with your website, computer, or network? Nebulosus offers professional support for all your technical issues.",
|
||||||
|
"solutions": [
|
||||||
|
"Android/iOS Support",
|
||||||
|
"Windows/Mac/Linux Support",
|
||||||
|
"Network Support",
|
||||||
|
"Installation and Configuration",
|
||||||
|
"Advice and Guidance"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"development": {
|
||||||
|
"title": "Development",
|
||||||
|
"tagline": "Development services for your business.",
|
||||||
|
"description": "Nebulosus offers development services for your application. Whether you need a website, custom integration, or want to automate your business, Nebulosus can help.",
|
||||||
|
"solutions": [
|
||||||
|
"(Web)applications",
|
||||||
|
"Integration development",
|
||||||
|
"Automation",
|
||||||
|
"API Development",
|
||||||
|
"Database Development"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"dict": {
|
||||||
|
"kvk": "Chamber of Commerce",
|
||||||
|
"mail": "Email"
|
||||||
|
}
|
||||||
|
}
|
||||||
66
public/res/locale/nl.json
Normal file
66
public/res/locale/nl.json
Normal file
|
|
@ -0,0 +1,66 @@
|
||||||
|
{
|
||||||
|
"$": {
|
||||||
|
"name": "Nebulosus",
|
||||||
|
"kvk": 93409583,
|
||||||
|
"mail": "info@nebulosus.nl",
|
||||||
|
"motto": "Gericht op innovatie."
|
||||||
|
},
|
||||||
|
"about": {
|
||||||
|
"title": "Over",
|
||||||
|
"text": "Nebulosus is een Nederlands bedrijf dat streeft naar intuïtieve, eenvoudige en betrouwbare software, met redundantie en gebruiksvriendelijkheid als kernwaarden. <br /> Software moet intuïtief en omgevingsbewust zijn. Daar zetten wij ons voor in.<br />Wil je een app met intuïtief design en een robuuste infrastructuur? Neem contact op!<br />Op zoek naar een bedrijfssite? Laten we het bespreken!"
|
||||||
|
},
|
||||||
|
"offer": {
|
||||||
|
"title": "Aanbod",
|
||||||
|
"it-consultancy": {
|
||||||
|
"title": "IT Consultancy",
|
||||||
|
"tagline": "IT-consultancydiensten voor uw bedrijf.",
|
||||||
|
"description": "Technologie moet je vooruithelpen, niet tegenwerken. Strategisch advies waarmee uw bedrijf wendbaar blijft in een snel veranderend digitaal landschap.",
|
||||||
|
"solutions": [
|
||||||
|
"IT-strategie",
|
||||||
|
"Infrastructuur",
|
||||||
|
"Beveiliging",
|
||||||
|
"Compliance",
|
||||||
|
"Training"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"managed-hosting": {
|
||||||
|
"title": "Beheerde Hosting",
|
||||||
|
"tagline": "Beheerde hostingdiensten voor uw website.",
|
||||||
|
"description": "Nebulosus biedt beheerde hostingdiensten voor uw website. Terwijl de technische zaken worden geregeld, kunt u zich richten op uw bedrijf.",
|
||||||
|
"solutions": [
|
||||||
|
"Applicatie Hosting",
|
||||||
|
"DNS-beheer (Domeinnaam en subdomeinen)",
|
||||||
|
"SSL-certificaten",
|
||||||
|
"E-mailhosting"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"tech-support": {
|
||||||
|
"title": "Technische Ondersteuning",
|
||||||
|
"tagline": "Professionele ondersteuning bij uw technische problemen.",
|
||||||
|
"description": "Een probleem met uw website, computer of netwerk? Nebulosus biedt professionele ondersteuning voor al uw technische problemen.",
|
||||||
|
"solutions": [
|
||||||
|
"Android/iOS-ondersteuning",
|
||||||
|
"Windows/Mac/Linux-ondersteuning",
|
||||||
|
"Netwerkondersteuning",
|
||||||
|
"Installatie en configuratie",
|
||||||
|
"Advies en begeleiding"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"development": {
|
||||||
|
"title": "Ontwikkeling",
|
||||||
|
"tagline": "Ontwikkelingsdiensten voor uw bedrijf.",
|
||||||
|
"description": "Nebulosus biedt ontwikkelingsdiensten voor uw applicatie. Of u nu een website, mobiele app of aangepaste software nodig heeft, Nebulosus kan helpen.",
|
||||||
|
"solutions": [
|
||||||
|
"(Web)applicaties",
|
||||||
|
"Integratie ontwikkeling",
|
||||||
|
"Automatisering",
|
||||||
|
"API's",
|
||||||
|
"Databaseontwikkeling"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"dict": {
|
||||||
|
"kvk": "Kamer van Koophandel",
|
||||||
|
"mail": "E-mail"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -25,7 +25,6 @@ header {
|
||||||
color: #000;
|
color: #000;
|
||||||
align-content: center;
|
align-content: center;
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
box-shadow: 0 0 20px var(--theme-color-lowlight);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
header div.logo {
|
header div.logo {
|
||||||
|
|
@ -80,6 +79,20 @@ div section {
|
||||||
|
|
||||||
/* --- */
|
/* --- */
|
||||||
|
|
||||||
|
footer {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
width: calc(100vw - 5em);
|
||||||
|
height: 2rem;
|
||||||
|
padding-left: 2.5em;
|
||||||
|
background-color: #fff;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- */
|
||||||
|
|
||||||
/* for anchors.js */
|
/* for anchors.js */
|
||||||
h2:hover {
|
h2:hover {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
@ -148,7 +161,7 @@ button {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: var(--theme-color-highlight-2);
|
border: 1px solid var(--theme-color-highlight);
|
||||||
}
|
}
|
||||||
|
|
||||||
transition: background-color .2s ease-in-out;
|
transition: background-color .2s ease-in-out;
|
||||||
|
|
@ -156,7 +169,6 @@ button {
|
||||||
|
|
||||||
.columns {
|
.columns {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
@media (max-width: 600px) {
|
@media (max-width: 600px) {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue