samantha/personal-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

new html design

Browse Source
This commit is contained in:
samantha42
2026-05-19 22:11:44 +02:00
parent 4569f35d11
commit 393f6de5b6
8 changed files with 100 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files
main.go
+13 -19
View File
@@ -21,18 +21,11 @@ func HelloHandler(w http.ResponseWriter, r *http.Request) {
fmt.Fprintf(w, "Hello You") fmt.Fprintf(w, "Hello You")
} }
func Home(w http.ResponseWriter, r *http.Request) { http.ServeFile(w, r, "./static/index.html") } func staticPage(path, file string) {
func Infra(w http.ResponseWriter, r *http.Request) { http.ServeFile(w, r, "./static/infra.html") } http.HandleFunc(path, func(w http.ResponseWriter, r *http.Request) {
func Finance(w http.ResponseWriter, r *http.Request) { http.ServeFile(w, r, "./static/finance.html") } http.ServeFile(w, r, "./static/"+file)
func Cinema(w http.ResponseWriter, r *http.Request) { http.ServeFile(w, r, "./static/cinema.html") } })
func Engine(w http.ResponseWriter, r *http.Request) { http.ServeFile(w, r, "./static/engine.html") }
func Portfolio(w http.ResponseWriter, r *http.Request) {
http.ServeFile(w, r, "./static/portfolio.html")
} }
func About(w http.ResponseWriter, r *http.Request) { http.ServeFile(w, r, "./static/about.html") }
func Styles(w http.ResponseWriter, r *http.Request) { http.ServeFile(w, r, "./static/styles.css") }
func Styles2(w http.ResponseWriter, r *http.Request) { http.ServeFile(w, r, "./static/styles2.css") }
// ---------- Main ---------- // ---------- Main ----------
@@ -40,21 +33,22 @@ func main() {
port := flag.String("port", "8081", "port to listen on") port := flag.String("port", "8081", "port to listen on")
flag.Parse() flag.Parse()
http.HandleFunc("/styles.css", Styles) fs := http.FileServer(http.Dir("static"))
http.HandleFunc("/styles2.css", Styles2) http.Handle("/static/", http.StripPrefix("/static/", fs))
http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) { http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
if r.URL.Path != "/" { if r.URL.Path != "/" {
http.Redirect(w, r, "/", http.StatusFound) http.Redirect(w, r, "/", http.StatusFound)
return return
} }
About(w, r) http.ServeFile(w, r, "./static/about.html")
}) })
//http.HandleFunc("/portfolio", Portfolio) //http.HandleFunc("/portfolio", Portfolio)
http.HandleFunc("/infra", Infra) staticPage("/infra", "infra.html")
http.HandleFunc("/finance", Finance) staticPage("/finance", "finance.html")
http.HandleFunc("/cinema", Cinema) staticPage("/cinema", "cinema.html")
http.HandleFunc("/engine", Engine) staticPage("/engine", "engine.html")
http.HandleFunc("/portfolio", Portfolio) //http.HandleFunc("/portfolio", Portfolio)
http.HandleFunc("/git", func(w http.ResponseWriter, r *http.Request) { http.HandleFunc("/git", func(w http.ResponseWriter, r *http.Request) {
http.Redirect(w, r, "https://git.samantha42.xyz", http.StatusFound) http.Redirect(w, r, "https://git.samantha42.xyz", http.StatusFound)
}) })
static/about.html
+46 -43
View File
@@ -6,7 +6,7 @@
<title>Samantha Vero Friis</title> <title>Samantha Vero Friis</title>
<link rel="preconnect" href="https://fonts.googleapis.com"/> <link rel="preconnect" href="https://fonts.googleapis.com"/>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500&family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap" rel="stylesheet"/> <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500&family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap" rel="stylesheet"/>
<link rel="stylesheet" href="styles2.css" /> <link rel="stylesheet" href="/static/styles2.css" />
</head> </head>
<body> <body>
@@ -149,54 +149,57 @@
<div class="section-head"><h2>Movie/Show Top list</h2></div> <div class="section-head"><h2>Movie/Show Top list</h2></div>
<div class="toplist-group"> <div class="toplist-group">
<button class="toplist-toggle" onclick="this.closest('.toplist-group').classList.toggle('collapsed')"> <h3>Top 5 Movies</h3>
Top 5 Movies <span class="toplist-toggle-icon">▾</span>
</button>
<div class="toplist-body"> <div class="toplist-body">
<ol class="toplist-ranked"> <div class="poster-grid">
<li> <div class="poster-item">
Blade Runner 2049 <img src="/static/posters/bladerunner2049.jpg" alt="Blade Runner 2049">
<img src="/static/posters/bladerunner2049.jpg"> <p>Blade Runner 2049</p>
</li> </div>
<li>A Cure of Wellness <div class="poster-item">
<img src="/static/posters/AcureForWellness.jpg"> <img src="/static/posters/AcureForWellness.jpg" alt="A Cure of Wellness">
</li> <p>A Cure of Wellness</p>
</div>
<li>Fight Club <div class="poster-item">
<img src="/static/posters/Fightclub.jpg"> <img src="/static/posters/Fightclub.jpg" alt="Fight Club">
</li> <p>Fight Club</p>
<li>Dracula: A Love Tale </div>
<img src="/static/posters/Dracula.webp"> <div class="poster-item">
</li> <img src="/static/posters/Dracula.webp" alt="Dracula: A Love Tale">
<li>Girl with a Dragon Tattoo <p>Dracula: A Love Tale</p>
<img src="/static/posters/TheGirlwiththeDragonTattoo.webp"> </div>
</li> <div class="poster-item">
</ol> <img src="/static/posters/TheGirlwiththeDragonTattoo.webp" alt="Girl with a Dragon Tattoos">
<p>Girl with a Dragon Tattoo</p>
</div>
</div> </div>
</div> </div>
<div class="toplist-group"> <div class="toplist-group">
<button class="toplist-toggle" onclick="this.closest('.toplist-group').classList.toggle('collapsed')"> <h3>Top 5 Shows</h3>
Top 5 Shows <span class="toplist-toggle-icon">▾</span>
</button>
<div class="toplist-body"> <div class="toplist-body">
<ol class="toplist-ranked"> <div class="poster-grid">
<li>Chernobyl <div class="poster-item">
<img src="/static/posters/Chernobyl.webp"> <img src="/static/posters/Chernobyl.webp" alt="Chernobyl">
</li> <p>Chernobyl</p>
<li>Succession </div>
<img src="/static/posters/Succession.webp"> <div class="poster-item">
</li> <img src="/static/posters/Succession.webp" alt="Succession">
<li>Breaking Bad <p>Succession</p>
<img src="/static/posters/Breaking Bad.webp"> </div>
</li> <div class="poster-item">
<li>Avatar: The Last Airbender <img src="/static/posters/Breaking Bad.webp" alt="Breaking Bad">
<img src="/static/posters/Avatar.webp"> <p>Breaking Bad</p>
</li> </div>
<li>Adolescence <div class="poster-item">
<img src="/static/posters/Adolescence.webp"> <img src="/static/posters/Avatar.webp" alt="Avatar: The Last Airbender">
</li> <p>Avatar: The Last Airbender</p>
</ol> </div>
<div class="poster-item">
<img src="/static/posters/Adolescence.webp" alt="Adolescence">
<p>Adolescence</p>
</div>
</div>
</div> </div>
</div> </div>
</section> </section>
static/cinema.html
+1 -1
View File
@@ -8,7 +8,7 @@
href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Syne:wght@400;700;800&display=swap" href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Syne:wght@400;700;800&display=swap"
rel="stylesheet" rel="stylesheet"
/> />
<link rel="stylesheet" href="styles.css" /> <link rel="stylesheet" href="/static/styles.css" />
</head> </head>
<body> <body>
<div class="container--narrow"> <div class="container--narrow">
static/cyber.html
+1 -1
View File
@@ -8,7 +8,7 @@
href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Syne:wght@400;700;800&display=swap" href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Syne:wght@400;700;800&display=swap"
rel="stylesheet" rel="stylesheet"
/> />
<link rel="stylesheet" href="styles.css" /> <link rel="stylesheet" href="/static/styles.css" />
</head> </head>
<body> <body>
<div class="container--narrow"> <div class="container--narrow">
static/engine.html
+1 -1
View File
@@ -6,7 +6,7 @@
<title>FP&amp;A Budgeting Engine — Samantha Vero Friis</title> <title>FP&amp;A Budgeting Engine — Samantha Vero Friis</title>
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.googleapis.com" />
<link href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Libre+Caslon+Text:wght@400;700;800&family=Syne:wght@400;700;800&display=swap" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Libre+Caslon+Text:wght@400;700;800&family=Syne:wght@400;700;800&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="styles.css" /> <link rel="stylesheet" href="/static/styles.css" />
<style> <style>
/* ── Page-specific layout ── */ /* ── Page-specific layout ── */
header { padding: 2.4rem 0 2rem; } header { padding: 2.4rem 0 2rem; }
static/finance.html
+1 -1
View File
@@ -8,7 +8,7 @@
href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Syne:wght@400;700;800&display=swap" href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Syne:wght@400;700;800&display=swap"
rel="stylesheet" rel="stylesheet"
/> />
<link rel="stylesheet" href="styles.css" /> <link rel="stylesheet" href="/static/styles.css" />
</head> </head>
<body> <body>
<div class="container--narrow"> <div class="container--narrow">
static/infra.html
+1 -1
View File
@@ -8,7 +8,7 @@
href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Syne:wght@400;700;800&display=swap" href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Syne:wght@400;700;800&display=swap"
rel="stylesheet" rel="stylesheet"
/> />
<link rel="stylesheet" href="styles.css" /> <link rel="stylesheet" href="/static/styles.css"/>
</head> </head>
<body> <body>
<div class="container"> <div class="container">
static/styles2.css
+35 -21
View File
@@ -247,27 +247,6 @@ footer{
} }
.toplist-group{
display:grid;grid-template-columns:80px 1fr;gap:1.2rem;
background:var(--surface);border:1px solid var(--border);
border-radius:6px;padding:1.2rem 1.4rem;
transition:border-color 0.2s,box-shadow 0.2s;
}
.toplist-body { display: none; }
.collapsed .toplist-body { display: block; }
.collapsed .toplist-toggle-icon { transform: rotate(-90deg); }
.toplist-toggle-icon { display: inline-block; transition: transform 0.2s; }
.toplist-ranked {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.toplist-ranked li { .toplist-ranked li {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -295,3 +274,38 @@ footer{
border-radius: 4px; border-radius: 4px;
flex-shrink: 0; flex-shrink: 0;
} }
.toplist-toggle {
display: block;
width: 100%;
text-align: center;
}
.poster-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.5rem;
padding: 1rem 0;
}
.poster-item {
display: flex;
flex-direction: column;
align-items: center;
width: 120px;
}
.poster-item img {
width: 120px;
height: 180px;
object-fit: cover;
border-radius: 6px;
}
.poster-item p {
margin-top: 8px;
font-size: 12px;
text-align: center;
line-height: 1.4;
}