Add about me section

This commit is contained in:
2025-09-01 13:14:29 +02:00
parent f4ef9fcbea
commit 0e6ddfede4
8 changed files with 124 additions and 6 deletions

BIN
linuxservice Executable file

Binary file not shown.

27
main.go
View File

@ -38,6 +38,9 @@ type PageData struct {
ErrorMessage string
SuccessMessage string
FormData ContactForm
AboutName string
AgeYears int
SonAgeYears int
}
// ContactForm holds form data
@ -311,6 +314,29 @@ func (s *Server) healthHandler(w http.ResponseWriter, r *http.Request) {
w.Write([]byte(`{"status":"healthy","service":"linuxservice"}`))
}
// aboutHandler handles the About Me page
func (s *Server) aboutHandler(w http.ResponseWriter, r *http.Request) {
data := s.createPageData("Over mij - "+s.config.CompanyName, "about")
// Populate dynamic About fields
data.AboutName = "Brendon Bosman"
now := time.Now()
birthYear, birthMonth, birthDay := 1990, time.October, 17
age := now.Year() - birthYear
if now.Month() < birthMonth || (now.Month() == birthMonth && now.Day() < birthDay) {
age--
}
data.AgeYears = age
sonYear, sonMonth, sonDay := 2022, time.March, 11
sonAge := now.Year() - sonYear
if now.Month() < sonMonth || (now.Month() == sonMonth && now.Day() < sonDay) {
sonAge--
}
data.SonAgeYears = sonAge
s.renderTemplate(w, "over-mij.html", data)
}
// setupRoutes configures all HTTP routes
func (s *Server) setupRoutes() {
// Static files
@ -320,6 +346,7 @@ func (s *Server) setupRoutes() {
// Page routes
http.HandleFunc("/", s.homeHandler)
http.HandleFunc("/contact", s.contactHandler)
http.HandleFunc("/over-mij", s.aboutHandler)
http.HandleFunc("/health", s.healthHandler)
}

BIN
static/TuxAinrom.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 MiB

View File

@ -927,6 +927,41 @@ footer {
color: #6b7280;
}
/* About page */
.about {
padding: 5rem 0;
}
.about-grid {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 3rem;
align-items: start;
}
.about-text p {
margin: 1rem 0;
line-height: 1.8;
color: #374151;
}
.about-cta {
margin-top: 2rem;
}
.about-photo img {
width: 100%;
height: auto;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}
@media (max-width: 900px) {
.about-grid {
grid-template-columns: 1fr;
}
}
/* Responsive Design */
@media (max-width: 1024px) {
.container {

View File

@ -21,6 +21,7 @@
<p>Lid van <a href="https://nllgg.nl" target="_blank">Nederlandse Linux Gebruikers Groep</a> (NLLGG.nl)</p>
<p>Actief bij <a href="https://buurtlinux.nl" target="_blank">Buurtlinux.nl</a> initiatief</p>
<p>Wij ondersteunen de <a href="https://endof10.org" target="_blank">End-of-10</a>-beweging voor duurzaam computergebruik.</p>
<p><a href="/over-mij">Over mij</a> · <a href="/contact">Contact</a></p>
</div>
</div>
<div class="footer-bottom">

View File

@ -13,6 +13,7 @@
<a href="/#voordelen">↓ Voordelen</a>
<a href="/#distros">↓ Linux-keuze</a>
<a href="/#diensten">↓ Diensten</a>
<a href="/over-mij"{{if eq .CurrentPage "about"}} class="active"{{end}}>Over mij</a>
<a href="/contact"{{if eq .CurrentPage "contact"}} class="active"{{end}}>Contact</a>
</div>
<button class="mobile-menu-toggle" onclick="toggleMobileMenu()">
@ -23,6 +24,7 @@
<a href="/#voordelen">↓ Voordelen</a>
<a href="/#distros">↓ Linux-keuze</a>
<a href="/#diensten">↓ Diensten</a>
<a href="/over-mij"{{if eq .CurrentPage "about"}} class="active"{{end}}>Over mij</a>
<a href="/contact"{{if eq .CurrentPage "contact"}} class="active"{{end}}>Contact</a>
</div>
</div>

View File

@ -97,7 +97,7 @@
<section id="home" class="hero">
<div class="hero-content">
<h2>Geef uw computer een tweede leven</h2>
<p class="hero-subtitle">Windows 10-ondersteuning eindigt binnenkort? Geen probleem! Ontdek hoe Linux uw hardware nieuw leven kan geven.</p>
<p class="hero-subtitle">Windows 10-ondersteuning eindigt binnenkort? Ik help u graag overstappen. Ontdek hoe Linux uw hardware nieuw leven kan geven.</p>
<div class="hero-buttons">
<a href="#voordelen" class="btn btn-primary">↓ Meer weten</a>
<a href="/contact" class="btn btn-secondary">Gratis advies</a>
@ -186,7 +186,7 @@
<section id="distros" class="distros">
<div class="container">
<h2>Welke Linux past bij u?</h2>
<p class="section-subtitle">Er zijn veel Linux-distributies, elk met hun eigen voordelen. Wij helpen u de perfecte keuze te maken.</p>
<p class="section-subtitle">Er zijn veel Linux-distributies, elk met hun eigen voordelen. Ik help u graag de perfecte keuze te maken.</p>
<div class="distros-grid">
<div class="distro-card">
<div class="distro-header">
@ -309,7 +309,7 @@
<div class="distro-cta">
<h3>Weet u niet welke u moet kiezen?</h3>
<p>Geen probleem! Wij adviseren u graag over de beste distributie voor uw specifieke situatie en behoeften.</p>
<p>Geen probleem! Ik adviseer u graag over de beste distributie voor uw specifieke situatie en behoeften.</p>
<a href="/contact" class="btn btn-primary">Persoonlijk advies</a>
</div>
</div>
@ -317,11 +317,11 @@
<section id="diensten" class="services">
<div class="container">
<h2>Onze diensten</h2>
<h2>Mijn diensten</h2>
<div class="services-grid">
<div class="service-card">
<h3>Gratis advies</h3>
<p>Wij bekijken uw huidige computer en adviseren over de beste Linux distributie voor uw behoeften.</p>
<p>Ik bekijk uw huidige computer en adviseer over de beste Linux distributie voor uw behoeften.</p>
</div>
<div class="service-card">
<h3>Installatieservice</h3>
@ -384,7 +384,7 @@
<section class="cta">
<div class="container">
<h2>Klaar voor de overstap?</h2>
<p>Laat uw computer niet eindigen als e-waste. Geef hem een tweede leven met Linux!</p>
<p>Laat uw computer niet eindigen als e-waste. Geef hem een tweede leven met Linux - ik help u graag.</p>
<a href="/contact" class="btn btn-primary btn-large">Neem contact op</a>
</div>
</section>

53
templates/over-mij.html Normal file
View File

@ -0,0 +1,53 @@
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{.Title}}</title>
<meta name="description" content="Over mij - mijn band met Het Hogeland en waarom ik Linux promoot.">
<link rel="stylesheet" href="/static/style.css">
</head>
<body>
{{template "header" .}}
<main>
<section class="contact-hero">
<div class="container">
<h1>Over mij</h1>
<p>Maak kennis met de Linux-evangelist van Het Hogeland.</p>
</div>
</section>
<section class="about">
<div class="container">
<div class="about-grid">
<div class="about-text">
<p>Moi! Ik ben {{.AboutName}} ({{.AgeYears}}). Ik ben opgegroeid in <strong>Baflo</strong> en woon sinds <strong>2023</strong> in <strong>Eenrum</strong>, samen met mijn partner en onze {{.SonAgeYears}}-jarige zoon. Het Hogeland is mijn thuis - en juist hier wil ik mensen helpen om hun computers duurzaam, veilig en prettig te blijven gebruiken met Linux.</p>
<p>Linux gebruik ik al ruim <strong>20 jaar</strong>. Eerst uit nieuwsgierigheid, later uit overtuiging: het is veilig, snel, privacyvriendelijk en geeft je de regie over je eigen computer. In mijn werk heb ik <strong>meer dan 10 jaar</strong> ervaring als <strong>organisch chemicus</strong> en ben ik daarna <strong>softwareontwikkelaar</strong> geworden (nu <strong>5+ jaar</strong>). In beide werelden werkte ik veel met Linux en servers - van dataverwerking tot automatisering en betrouwbare infrastructuur.</p>
<p>Met {{.CompanyName}} wil ik de <strong>Linux-evangelist van Het Hogeland</strong> zijn: iemand die je helpt bij de overstap, de juiste keuzes met je afstemt en ervoor zorgt dat jouw computer weer jaren mee kan. Of je nu wilt migreren van Windows 10, nieuwsgierig bent naar Linux, of gewoon hulp nodig hebt met je systeem - ik sta voor je klaar.</p>
<p>Naast deze service run ik ook <a href="https://chemistry.software" target="_blank" rel="noopener">chemistry.software</a>, waar ik bedrijven help met wetenschappelijke en scheikundige softwareoplossingen. Die ervaring neem ik natuurlijk mee in mijn aanpak: praktisch, zorgvuldig en toekomstbestendig.</p>
<p>Wil je weten wat Linux voor jou kan betekenen of gewoon even sparren? Neem gerust contact op, ik denk graag met je mee.</p>
<div class="about-cta">
<a href="/contact" class="btn btn-primary">Neem contact op</a>
</div>
</div>
<div class="about-photo">
<figure>
<img src="/static/TuxAinrom.webp" alt="Foto van mijzelf">
<figcaption><small>{{.AboutName}}</small></figcaption>
</figure>
</div>
</div>
</div>
</section>
</main>
{{template "footer" .}}
</body>
</html>