Add about me section
This commit is contained in:
BIN
linuxservice
Executable file
BIN
linuxservice
Executable file
Binary file not shown.
27
main.go
27
main.go
@ -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
BIN
static/TuxAinrom.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.6 MiB |
@ -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 {
|
||||
|
@ -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">
|
||||
|
@ -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>
|
||||
|
@ -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
53
templates/over-mij.html
Normal 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>
|
||||
|
Reference in New Issue
Block a user