bind PORT to env

.env

@@ -0,0 +1 @@
+PORT=5000

Dockerfile

@@ -10,6 +10,6 @@ COPY . .
 
 RUN go build -o main cmd/api/main.go
 
-EXPOSE 8080
+EXPOSE ${PORT}
 
 CMD ["./main"]

cmd/api/main.go

@@ -2,15 +2,20 @@ package main
 
 import (
 	"fiber/internal/server"
+	"fmt"
+	"os"
+	"strconv"
+
+	_ "github.com/joho/godotenv/autoload"
 )
 
 func main() {
 
 	server := server.New()
 
 	server.RegisterFiberRoutes()
-
-	err := server.Listen(":5000")
+	port, _ := strconv.Atoi(os.Getenv("PORT"))
+	err := server.Listen(fmt.Sprintf(":%d", port))
 	if err != nil {
 		panic("cannot start server")
 	}

docker-compose-prod.yml

@@ -0,0 +1,7 @@
+version: '3'
+
+services:
+  web:
+    image: ujstor/portfolio-web-go:1.0.2
+    ports:
+      - '${PORT}:${PORT}'

docker-compose.yml

@@ -2,6 +2,6 @@ version: '3'
 
 services:
   web:
-    image: ujstor/portfolio-web-go:1.0.1
+    build: .
     ports:
-      - '5000:5000'
+      - '${PORT}:${PORT}'

go.mod

@@ -2,18 +2,22 @@ module fiber
 
 go 1.21
 
+require (
+	github.com/gofiber/fiber/v2 v2.51.0
+	github.com/joho/godotenv v1.5.1
+	github.com/stretchr/testify v1.8.4
+)
+
 require (
 	github.com/andybalholm/brotli v1.0.6 // indirect
 	github.com/davecgh/go-spew v1.1.1 // indirect
-	github.com/gofiber/fiber/v2 v2.51.0 // indirect
 	github.com/google/uuid v1.4.0 // indirect
 	github.com/klauspost/compress v1.17.2 // indirect
 	github.com/mattn/go-colorable v0.1.13 // indirect
 	github.com/mattn/go-isatty v0.0.20 // indirect
 	github.com/mattn/go-runewidth v0.0.15 // indirect
 	github.com/pmezard/go-difflib v1.0.0 // indirect
 	github.com/rivo/uniseg v0.4.4 // indirect
-	github.com/stretchr/testify v1.8.4 // indirect
 	github.com/valyala/bytebufferpool v1.0.0 // indirect
 	github.com/valyala/fasthttp v1.51.0 // indirect
 	github.com/valyala/tcplisten v1.0.0 // indirect

go.sum

@@ -6,6 +6,8 @@ github.com/gofiber/fiber/v2 v2.51.0 h1:JNACcZy5e2tGApWB2QrRpenTWn0fq0hkFm6k0C86g
 github.com/gofiber/fiber/v2 v2.51.0/go.mod h1:xaQRZQJGqnKOQnbQw+ltvku3/h8QxvNi8o6JiJ7Ll0U=
 github.com/google/uuid v1.4.0 h1:MtMxsa51/r9yyhkyLsVeVt0B+BGQZzpQiTQ4eHZ8bc4=
 github.com/google/uuid v1.4.0/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
+github.com/joho/godotenv v1.5.1 h1:7eLL/+HRGLY0ldzfGMeQkb7vMd0as4CfYvUVzLqw0N0=
+github.com/joho/godotenv v1.5.1/go.mod h1:f4LDr5Voq0i2e/R5DDNOoa2zzDfwtkZa6DnEwAbqwq4=
 github.com/klauspost/compress v1.17.2 h1:RlWWUY/Dr4fL8qk9YG7DTZ7PDgME2V4csBXA8L/ixi4=
 github.com/klauspost/compress v1.17.2/go.mod h1:ntbaceVETuRiXiv4DpjP66DpAtAGkEQskQzEyD//IeE=
 github.com/mattn/go-colorable v0.1.13 h1:fFA4WZxdEF4tXPZVKMLwD8oUnCTTo08duU7wxecdEvA=
@@ -32,6 +34,7 @@ golang.org/x/sys v0.0.0-20220811171246-fbc7d0a398ab/go.mod h1:oPkhp1MJrh7nUepCBc
 golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.14.0 h1:Vz7Qs629MkJkGyHxUlRHizWJRG2j8fbQKjELVSNhy7Q=
 golang.org/x/sys v0.14.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
+gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405 h1:yhCVgyC4o1eVCa2tZl7eS0r+SDo693bJlVdllGtEeKM=
 gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
 gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
 gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=

website/templates/index.html

@@ -133,10 +133,15 @@ <h1>Featured Projects</h1>
       <!-- User Project #1: go-blueprint -->
       <div class="user-projects">
         <div class="images-right">
-          <picture>
-            <source type="image/webp" srcset="./static/img/webp/blueprint.webp" alt="Go-Blueprint" />
-            <img alt="blueprint" src="./static/img/jpg/blueprint.jpg" />
-          </picture>
+         <picture>
+           <source type="image/webp" 
+                   srcset="./static/img/webp/blueprint.webp" 
+                   sizes="(max-width: 600px) 480px, 800px" 
+                   alt="Go-Blueprint" />
+           <img src="./static/img/jpg/blueprint.jpg" 
+                alt="blueprint" 
+                style="width:auto;max-width:100%;" />
+        </picture>
         </div>
         <div class="contents" style="text-align: center">
           <h3>Go-Blueprint</h3>
@@ -167,8 +172,12 @@ <h3>Go-Blueprint</h3>
       <div class="user-projects">
         <div class="images-left">
           <picture>
-            <source type="image/webp" srcset="./static/img/webp/fastapi.webp" alt="Social Media FastAPI" />
-            <img alt="fastapi" src="./static/img/jpg/fastapi.jpg" />
+            <source type="image/webp" 
+                    srcset="./static/img/webp/fastapi.webp" 
+                    sizes="(max-width: 600px) 480px, 800px" />
+            <img src="./static/img/jpg/fastapi.jpg" 
+                 alt="Social Media FastAPI" 
+                 style="width:auto;max-width:100%;" />
           </picture>
         </div>
         <div class="contents-right" style="text-align: center">
@@ -216,8 +225,12 @@ <h3>Social Media FastAPI</h3>
       <div class="user-projects">
         <div class="images-right">
           <picture>
-            <source type="image/webp" srcset="./static/img/webp/probit.webp" alt="ProBit Global API" />
-            <img alt="probit" src="./static/img/jpg/probit.jpg" />
+            <source type="image/webp" 
+                    srcset="./static/img/webp/probit.webp" 
+                    sizes="(max-width: 600px) 480px, 800px" />
+            <img src="./static/img/jpg/probit.jpg" 
+                 alt="ProBit Global API" 
+                 style="width:auto;max-width:100%;" />
           </picture>
         </div>
         <div class="contents" style="text-align: center">
@@ -255,8 +268,12 @@ <h3>ProBit Global API</h3>
       <div class="user-projects">
         <div class="images-left">
           <picture>
-            <source type="image/webp" srcset="./static/img/webp/streamlit.webp" alt="Working Hours Analysis" />
-            <img alt="streamlit" src="./static/img/jpg/streamlit.jpg" />
+            <source type="image/webp" 
+                    srcset="./static/img/webp/streamlit.webp" 
+                    sizes="(max-width: 600px) 480px, 800px" />
+            <img src="./static/img/jpg/streamlit.jpg" 
+                 alt="Working Hours Analysis" 
+                 style="width:auto;max-width:100%;" />
           </picture>
         </div>
         <div class="contents-right" style="text-align: center">