diff --git a/data/dg1.json b/data/dg1.json
new file mode 100644
index 0000000..823240f
--- /dev/null
+++ b/data/dg1.json
@@ -0,0 +1,128 @@
+[
+ {
+ "Name": "dashboard",
+ "Author": "Philip Gaber",
+ "Size": "1920x1080",
+ "Tools": "GIMP / Adobe XD",
+ "Date": "2019-09-27",
+ "Desc": "Light design for the dashboard of a website meant to explain the sport Curling to a broarder audience and give information about the Swedish Curling Team. The website should also include information about the Olympic Winter Games in Beijing.",
+ "BlogLink": "none"
+ },
+ {
+ "Name": "dashboard_dark",
+ "Author": "Philip Gaber",
+ "Size": "1920x1080",
+ "Tools": "GIMP / Adobe XD",
+ "Date": "2019-09-27",
+ "Desc": "Dark concept design for the dashboard of a website meant to explain the sport Curling to a broarder audience and give information about the Swedish Curling Team. The website should also include information about the Olympic Winter Games in Beijing.",
+ "BlogLink": "none"
+ },
+ {
+ "Name": "dashboard_open",
+ "Author": "Philip Gaber",
+ "Size": "1920x1080",
+ "Tools": "GIMP / Adobe XD",
+ "Date": "2019-09-27",
+ "Desc": "A concept for the social links on this website.",
+ "BlogLink": "none"
+ },
+ {
+ "Name": "gameplay",
+ "Author": "Philip Gaber",
+ "Size": "1920x1080",
+ "Tools": "GIMP / Adobe XD",
+ "Date": "2019-09-27",
+ "Desc": "A concept for the page where the sport curling is described in more detail. The individual 'info tiles' can be clicked to get even more information.",
+ "BlogLink": "none"
+ },
+ {
+ "Name": "gameplay_open",
+ "Author": "Philip Gaber",
+ "Size": "1920x1080",
+ "Tools": "GIMP / Adobe XD",
+ "Date": "2019-09-27",
+ "Desc": "A concept for the page where the sport curling is described in more detail. This shows the state after a 'info tile' got clicked.",
+ "BlogLink": "none"
+ },
+ {
+ "Name": "history",
+ "Author": "Philip Gaber",
+ "Size": "1920x1080",
+ "Tools": "GIMP / Adobe XD",
+ "Date": "2019-09-27",
+ "Desc": "Concept for the history page where important events in the history of curling are described.",
+ "BlogLink": "none"
+ },
+ {
+ "Name": "infographic",
+ "Author": "Philip Gaber",
+ "Size": "Double-sided A4 page",
+ "Tools": "Inkscape",
+ "Date": "2019-10-11",
+ "Desc": "This is a concept for an infographic for the company Videum / Videum Science Park. The goal was to summarize and visualize 30+ pages of the annual report in two A4 pages.",
+ "BlogLink": "none"
+ },
+ {
+ "Name": "olympia_curl",
+ "Author": "Philip Gaber",
+ "Size": "Variable SVG",
+ "Tools": "Inkscape",
+ "Date": "2019-09-20",
+ "Desc": "One of 4 logo ideas for the swedish curling team / Olympic Winter Games in Beijing.",
+ "BlogLink": "none"
+ },
+ {
+ "Name": "olympia_masc_curl",
+ "Author": "Philip Gaber",
+ "Size": "Variable SVG",
+ "Tools": "Inkscape",
+ "Date": "2019-09-20",
+ "Desc": "One of 4 logo ideas for the swedish curling team / Olympic Winter Games in Beijing. The idea was to have a separate mascot which is a swedish version of the official mascot for the OWG in Beijing.",
+ "BlogLink": "none"
+ },
+ {
+ "Name": "swed_curl_future",
+ "Author": "Philip Gaber",
+ "Size": "Variable SVG",
+ "Tools": "Inkscape",
+ "Date": "2019-09-20",
+ "Desc": "One of 4 logo ideas for the swedish curling team / Olympic Winter Games in Beijing. This is a more futuristic version of a curling stone.",
+ "BlogLink": "none"
+ },
+ {
+ "Name": "swed_curl_young",
+ "Author": "Philip Gaber",
+ "Size": "Variable SVG",
+ "Tools": "Inkscape",
+ "Date": "2019-09-20",
+ "Desc": "One of 4 logo ideas for the swedish curling team / Olympic Winter Games in Beijing. This is a curling version of the popular X logo (original NYHC) to speak to a younger audience.",
+ "BlogLink": "none"
+ },
+ {
+ "Name": "team",
+ "Author": "Philip Gaber",
+ "Size": "1920x1080",
+ "Tools": "GIMP / Adobe XD",
+ "Date": "2019-09-27",
+ "Desc": "Concept for the team page where the individual players of the swedish team could be highlighted.",
+ "BlogLink": "none"
+ },
+ {
+ "Name": "team_open",
+ "Author": "Philip Gaber",
+ "Size": "1920x1080",
+ "Tools": "GIMP / Adobe XD",
+ "Date": "2019-09-27",
+ "Desc": "Concept for the team page where the individual players of the swedish team could be highlighted. Here is the state after a click on the player card. More information an a video of the best plays could be displayed.",
+ "BlogLink": "none"
+ },
+ {
+ "Name": "timetable",
+ "Author": "Philip Gaber",
+ "Size": "1920x1080",
+ "Tools": "GIMP / Adobe XD",
+ "Date": "2019-09-27",
+ "Desc": "Concept for the timetable page where the upcoming matches could be displayed in a scrollable table.",
+ "BlogLink": "none"
+ }
+]
diff --git a/exhibit.go b/exhibit.go
index a7b1b2b..2286fdc 100644
--- a/exhibit.go
+++ b/exhibit.go
@@ -1,21 +1,26 @@
package main
import (
+ "encoding/json"
+ "fmt"
"html/template"
"io/ioutil"
"log"
"net/http"
- "strings"
- // "fmt"
+ "regexp"
)
// var t = template.Must(template.ParseFiles("tmpl/layouts/base.html", "tmpl/index.html", "tmpl/blog.html", "tmpl/about.html", "tmpl/contact.html", ))
+var validImg = regexp.MustCompile("^/info/([\\w_\\- ]+)")
+var exhibit Exhibition
func main() {
+ exhibit.Pics = make(map[string]Picture)
http.HandleFunc("/", handleIndex)
http.HandleFunc("/blog", handleBlog)
http.HandleFunc("/about", handleAbout)
http.HandleFunc("/contact", handleContact)
+ http.HandleFunc("/info/", handleInfo)
http.Handle("/inc/", http.StripPrefix("/inc/", http.FileServer(http.Dir("inc"))))
log.Fatalln(http.ListenAndServe(":8080", nil))
}
@@ -26,18 +31,16 @@ type Picture struct {
Size string
Tools string
Date string
- Price float32
Desc string
BlogLink string
}
type Exhibition struct {
- Pics []Picture
+ Pics map[string]Picture
}
func handleIndex(w http.ResponseWriter, r *http.Request) {
- var exhibit Exhibition
- exhibit.parsePictures("./inc/images")
+ exhibit.parseExhibitions("./data")
t, _ := template.ParseFiles("tmpl/layouts/index.html", "tmpl/gallery.html", "tmpl/header.html")
t.Execute(w, exhibit)
}
@@ -57,16 +60,54 @@ func handleContact(w http.ResponseWriter, r *http.Request) {
t.Execute(w, nil)
}
-func (ex *Exhibition) parsePictures(dir string) {
+func handleInfo(w http.ResponseWriter, r *http.Request) {
+ imgName := validImg.FindStringSubmatch(r.URL.Path)
+ if imgName == nil {
+ http.NotFound(w, r)
+ return
+ }
+ img, ok := exhibit.Pics[imgName[1]]
+ if !ok {
+ http.NotFound(w, r)
+ return
+ }
+ info, err := json.Marshal(img)
+ if err != nil {
+ http.Error(w, err.Error(), http.StatusInternalServerError)
+ return
+ }
+
+ w.Header().Set("Content-Type", "application/json")
+ w.Write(info)
+}
+
+// file, _ := json.MarshalIndent(ex.Pics, "", " ")
+// err := ioutil.WriteFile(dir+"/dg1.json", file, 0644)
+// if err != nil {
+// fmt.Println("WRITE", err)
+// }
+// load the exhibition data into the struct
+func (ex *Exhibition) parseExhibitions(dir string) {
files, err := ioutil.ReadDir(dir)
if err != nil {
- log.Fatal(err)
+ fmt.Println("E1", err)
+ return
}
for _, f := range files {
if !f.IsDir() {
- ex.Pics = append(ex.Pics,
- Picture{Name: strings.TrimSuffix(f.Name(), ".jpg")})
+ var pics []Picture
+ content, err := ioutil.ReadFile(dir + "/" + f.Name())
+ if err != nil {
+ fmt.Println("E2", err)
+ }
+ err = json.Unmarshal(content, &pics)
+ if err != nil {
+ fmt.Println("E3", err)
+ }
+ for _, pic := range pics {
+ ex.Pics[pic.Name] = pic
+ }
}
}
}
diff --git a/inc/js/main.js b/inc/js/main.js
index ee5c415..b0fc3e9 100644
--- a/inc/js/main.js
+++ b/inc/js/main.js
@@ -3,8 +3,9 @@
* functions to power my portfolio
* Author: phga/teord
* Date: 2019-10-18
- * Version: 1.0
+ * Version: 1.1
*/
+"use strict";
document.addEventListener("DOMContentLoaded", run);
// global var to control the animation of the text
var runTextAnimation = true;
@@ -64,7 +65,6 @@ function initialize() {
// this scroll is NOT smooth
function doSlide(elem, dist) {
- console.log(dist);
let hM = elem.scrollHeight;
let sT = elem.scrollTop;
if (dist < 0)
@@ -81,7 +81,6 @@ function handleThumb(overlay, elem) {
// save last eventlistener func to remove it...
var resize;
function showOverlay(overlay, imgName) {
- let info = getInfoForImg(imgName);
let magni = document.getElementById("zoom");
let infoTable = document.getElementById("img-description");
let img = document.createElement("img");
@@ -104,28 +103,33 @@ function showOverlay(overlay, imgName) {
magni.innerHTML = "";
magni.appendChild(img);
- infoTable.innerHTML =
- `
-| Author: | ${info.author} |
+ getInfoForImg(imgName).then(info => {
+ let infos = `
+| Author: | ${info.Author} |
-| Size: | ${info.size} |
+Size: | ${info.Size} |
-| Tools: | ${info.tools} |
+Tools: | ${info.Tools} |
-| Date: | ${info.date} |
+Date: | ${info.Date} |
| Description: |
-| ${info.desc} |
+${info.Desc} |
-
-| Read more... |
-
`;
+`;
+ if (info.BlogLink != "none") {
+ infos += `
+| Read more... |
+
`;
+ }
+ infoTable.innerHTML = infos;
+ });
overlay.classList.remove("hidden");
}
@@ -134,9 +138,8 @@ function hideElement(elem) {
}
// Get info from server
-function getInfoForImg(imgName) {
- let info = {author: "Philip Gaber", size: "1920x1080 @24MP", tools: "Sony a5100", date: "2019-10-10",
- desc: "A couple words about the piece of art. I like trees, I am groot, Winter is coming!!!", price: "2999,99 €",
- blog: "./blog/some/url"};
+async function getInfoForImg(imgName) {
+ let res = await fetch(`/info/${imgName}`);
+ let info = await res.json();
return info;
}
diff --git a/inc/js/text.js b/inc/js/text.js
index 72c8e66..854671e 100644
--- a/inc/js/text.js
+++ b/inc/js/text.js
@@ -6,6 +6,7 @@
* Version: 1.0
*/
// set a global var "run" to true before running this function
+"use strict";
async function flyingText(canvas) {
// TODO: move to argument, load from backend
let statements = ["Keyboard-Nerd", "🖤", "Emacs",
diff --git a/inc/js/zoom.js b/inc/js/zoom.js
index 3b99857..9c35e89 100644
--- a/inc/js/zoom.js
+++ b/inc/js/zoom.js
@@ -6,6 +6,7 @@
* Date: 2019-10-20
* Version: 1.2
*/
+"use strict";
function zoom(factor, imgName) {
let winW = Math.max(document.documentElement.clientWidth, window.innerWidth);
let img = document.getElementById(imgName);
@@ -40,7 +41,7 @@ function zoom(factor, imgName) {
};
let getOffsetToMiddle = function(cursor) {
- let elem, x = y = 0;
+ let elem, x = 0, y = 0;
cursor = cursor || window.event;
// get elem bounding box
diff --git a/tmpl/gallery.html b/tmpl/gallery.html
index 971339d..837654f 100644
--- a/tmpl/gallery.html
+++ b/tmpl/gallery.html
@@ -10,9 +10,9 @@
- {{range .Pics}}
+ {{range $key, $val := .Pics}}
-
+
