diff --git a/api/webHandler/aboutpageHandler.go b/api/webHandler/aboutpageHandler.go new file mode 100644 index 0000000..eed753c --- /dev/null +++ b/api/webHandler/aboutpageHandler.go @@ -0,0 +1,24 @@ +package webHandler + +import ( + "html/template" + "net/http" +) + +func InitAboutpage(w http.ResponseWriter, r *http.Request) { + + tmpl := template.Must(template.ParseFiles( + "./templates/about/index.html", + "./templates/navbar/index.html", + "./templates/themeSelector/index.html", + )) + + err := tmpl.Execute(w, nil) + if err != nil { + _, err := w.Write([]byte("failed to load")) + if err != nil { + return + } + return + } +} diff --git a/api/webRoutes.go b/api/webRoutes.go index 013629f..17c47d9 100644 --- a/api/webRoutes.go +++ b/api/webRoutes.go @@ -10,6 +10,8 @@ func WebRoutes(mux **http.ServeMux) { // Register the routes and webHandler m.HandleFunc("GET /{$}", webHandler.InitHomepage) m.HandleFunc("GET /projecten/{$}", webHandler.InitProjectpage) + m.HandleFunc("GET /about/{$}", webHandler.InitAboutpage) + m.HandleFunc("POST /theme", webHandler.UpdateTheme) m.HandleFunc("GET /test", webHandler.Test) diff --git a/templates/about/index.html b/templates/about/index.html new file mode 100644 index 0000000..42e58c8 --- /dev/null +++ b/templates/about/index.html @@ -0,0 +1,102 @@ + + + + + + + Portfolio Darius + + + + + + + + + + + {{template "navbar"}} + {{template "themeSelector"}} + + + + + + diff --git a/templates/assets/brand/Darius_pasfoto_2023_Large.png b/templates/assets/brand/Darius_pasfoto_2023_Large.png new file mode 100644 index 0000000..609232e Binary files /dev/null and b/templates/assets/brand/Darius_pasfoto_2023_Large.png differ diff --git a/templates/homepage/index.html b/templates/homepage/index.html index d7eb51b..339ad0a 100644 --- a/templates/homepage/index.html +++ b/templates/homepage/index.html @@ -93,9 +93,53 @@ {{template "navbar"}} - {{template "themeSelector" - }} - + {{template "themeSelector"}} - + + +
+
+
+ + Italian Trulli + Mijn portfolio + +
+ +
+
+

Wie ben ik?

+

+ Mijn naam is Darius Klein. Ik ben een backend developer in opleiding. +

+ Meer over mij +
+
+ +
+
+
+

Change the background

+

Swap the background-color utility and add a `.text-*` color utility to mix up the jumbotron look. Then, mix and match with additional component themes and more.

+ +
+
+
+
+

Add borders

+

Or, keep it light and add a border for some added definition to the boundaries of your content. Be sure to look under the hood at the source HTML here as we've adjusted the alignment and sizing of both column's content for equal-height.

+ +
+
+
+ + +
+
+ + + + diff --git a/templates/jumbotron/index.html b/templates/jumbotron/index.html new file mode 100644 index 0000000..374dfcc --- /dev/null +++ b/templates/jumbotron/index.html @@ -0,0 +1,97 @@ + + + + + + + + + + Jumbotron example ยท Bootstrap v5.3 + + + + + + + + + + + + + + + +
+
+
+ + Bootstrap + Jumbotron example + +
+ +
+
+

Custom jumbotron

+

Using a series of utilities, you can create this jumbotron, just like the one in previous versions of Bootstrap. Check out the examples below for how you can remix and restyle it to your liking.

+ +
+
+ +
+
+
+

Change the background

+

Swap the background-color utility and add a `.text-*` color utility to mix up the jumbotron look. Then, mix and match with additional component themes and more.

+ +
+
+
+
+

Add borders

+

Or, keep it light and add a border for some added definition to the boundaries of your content. Be sure to look under the hood at the source HTML here as we've adjusted the alignment and sizing of both column's content for equal-height.

+ +
+
+
+ + +
+
+ + + +