initial commit

2024-03-11 23:29:00 +03:00
commit 4352c5579a
35 changed files with 6438 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,4 @@
+.idea
+node_modules
+.vscode
+credentials.json
--- a/11
+++ b/11
@@ -0,0 +1,11 @@
+FROM golang:1.21 AS compiler
+WORKDIR /src/app
+COPY go.mod go.sum ./
+RUN go mod download
+COPY . .
+RUN CGO_ENABLED=0 go build -o ./a.out ./cmd/main.go
+
+FROM gcr.io/distroless/static
+COPY --from=compiler /src/app/a.out /server
+COPY --from=compiler /src/app/resources /resources
+ENTRYPOINT ["/server"]
--- a/6
+++ b/6
@@ -0,0 +1,6 @@
+templ:
+	@templ generate
+run:
+	@npx tailwindcss -i ./resources/global.css -o ./styles/output.css
+	@templ generate
+	@go run ./cmd/main.go
--- a/cmd/main.go
+++ b/cmd/main.go
@@ -0,0 +1,18 @@
+package main
+
+import (
+	"fmt"
+	"github.com/bakyazi/gotemplresume/router"
+	"github.com/labstack/echo/v4"
+	"os"
+)
+
+func main() {
+	port := os.Getenv("PORT")
+	if port == "" {
+		port = "8080"
+	}
+	e := echo.New()
+	router.Init(e)
+	e.Logger.Fatal(e.Start(fmt.Sprintf("%s:%s", os.Getenv("LISTEN_ADDR"), port)))
+}
--- a/dto/resume.go
+++ b/dto/resume.go
@@ -0,0 +1,29 @@
+package dto
+
+type Resume struct {
+	WorkExperiences []ExperienceItem `json:"workExperiences,omitempty"`
+	Education       []ExperienceItem `json:"education,omitempty"`
+	Skills          Skills           `json:"skills"`
+}
+
+type ExperienceItem struct {
+	StartDate   string `json:"startDate,omitempty"`
+	EndDate     string `json:"endDate,omitempty"`
+	Header      string `json:"header,omitempty"`
+	Location    string `json:"location,omitempty"`
+	Description string `json:"description,omitempty"`
+}
+
+type Skills struct {
+	ProgrammingLanguages []Skill `json:"programmingLanguages,omitempty"`
+	Frameworks           []Skill `json:"frameworks,omitempty"`
+	OperatingSystems     []Skill `json:"operatingSystems,omitempty"`
+	CiCd                 []Skill `json:"ciCd,omitempty"`
+	Tools                []Skill `json:"tools,omitempty"`
+}
+
+type Skill struct {
+	Name string  `json:"name,omitempty"`
+	Rank float64 `json:"rank,omitempty"`
+	Key  string  `json:"key,omitempty"`
+}
--- a/go.mod
+++ b/go.mod
@@ -0,0 +1,17 @@
+module github.com/bakyazi/gotemplresume
+
+go 1.21.4
+
+require (
+	github.com/a-h/templ v0.2.598 // indirect
+	github.com/labstack/echo/v4 v4.11.4 // indirect
+	github.com/labstack/gommon v0.4.2 // indirect
+	github.com/mattn/go-colorable v0.1.13 // indirect
+	github.com/mattn/go-isatty v0.0.20 // indirect
+	github.com/valyala/bytebufferpool v1.0.0 // indirect
+	github.com/valyala/fasttemplate v1.2.2 // indirect
+	golang.org/x/crypto v0.17.0 // indirect
+	golang.org/x/net v0.19.0 // indirect
+	golang.org/x/sys v0.15.0 // indirect
+	golang.org/x/text v0.14.0 // indirect
+)
--- a/go.sum
+++ b/go.sum
@@ -0,0 +1,25 @@
+github.com/a-h/templ v0.2.598 h1:6jMIHv6wQZvdPxTuv87erW4RqN/FPU0wk7ZHN5wVuuo=
+github.com/a-h/templ v0.2.598/go.mod h1:SA7mtYwVEajbIXFRh3vKdYm/4FYyLQAtPH1+KxzGPA8=
+github.com/labstack/echo/v4 v4.11.4 h1:vDZmA+qNeh1pd/cCkEicDMrjtrnMGQ1QFI9gWN1zGq8=
+github.com/labstack/echo/v4 v4.11.4/go.mod h1:noh7EvLwqDsmh/X/HWKPUl1AjzJrhyptRyEbQJfxen8=
+github.com/labstack/gommon v0.4.2 h1:F8qTUNXgG1+6WQmqoUWnz8WiEU60mXVVw0P4ht1WRA0=
+github.com/labstack/gommon v0.4.2/go.mod h1:QlUFxVM+SNXhDL/Z7YhocGIBYOiwB0mXm1+1bAPHPyU=
+github.com/mattn/go-colorable v0.1.13 h1:fFA4WZxdEF4tXPZVKMLwD8oUnCTTo08duU7wxecdEvA=
+github.com/mattn/go-colorable v0.1.13/go.mod h1:7S9/ev0klgBDR4GtXTXX8a3vIGJpMovkB8vQcUbaXHg=
+github.com/mattn/go-isatty v0.0.16/go.mod h1:kYGgaQfpe5nmfYZH+SKPsOc2e4SrIfOl2e/yFXSvRLM=
+github.com/mattn/go-isatty v0.0.20 h1:xfD0iDuEKnDkl03q4limB+vH+GxLEtL/jb4xVJSWWEY=
+github.com/mattn/go-isatty v0.0.20/go.mod h1:W+V8PltTTMOvKvAeJH7IuucS94S2C6jfK/D7dTCTo3Y=
+github.com/valyala/bytebufferpool v1.0.0 h1:GqA5TC/0021Y/b9FG4Oi9Mr3q7XYx6KllzawFIhcdPw=
+github.com/valyala/bytebufferpool v1.0.0/go.mod h1:6bBcMArwyJ5K/AmCkWv1jt77kVWyCJ6HpOuEn7z0Csc=
+github.com/valyala/fasttemplate v1.2.2 h1:lxLXG0uE3Qnshl9QyaK6XJxMXlQZELvChBOCmQD0Loo=
+github.com/valyala/fasttemplate v1.2.2/go.mod h1:KHLXt3tVN2HBp8eijSv/kGJopbvo7S+qRAEEKiv+SiQ=
+golang.org/x/crypto v0.17.0 h1:r8bRNjWL3GshPW3gkd+RpvzWrZAwPS49OmTGZ/uhM4k=
+golang.org/x/crypto v0.17.0/go.mod h1:gCAAfMLgwOJRpTjQ2zCCt2OcSfYMTeZVSRtQlPC7Nq4=
+golang.org/x/net v0.19.0 h1:zTwKpTd2XuCqf8huc7Fo2iSy+4RHPd10s4KzeTnVr1c=
+golang.org/x/net v0.19.0/go.mod h1:CfAk/cbD4CthTvqiEl8NpboMuiuOYsAr/7NOjZJtv1U=
+golang.org/x/sys v0.0.0-20220811171246-fbc7d0a398ab/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.15.0 h1:h48lPFYpsTvQJZF4EKyI4aLHaev3CxivZmv7yZig9pc=
+golang.org/x/sys v0.15.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
+golang.org/x/text v0.14.0 h1:ScX5w1eTa3QqT8oi6+ziP7dTV1S2+ALU0bI+0zXKWiQ=
+golang.org/x/text v0.14.0/go.mod h1:18ZOQIKpY8NJVqYksKHtTdi31H5itFRjB5/qKTNYzSU=
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,5 @@
+{
+  "devDependencies": {
+    "tailwindcss": "^3.4.1"
+  }
+}
--- a/pages/base.templ
+++ b/pages/base.templ
@@ -0,0 +1,28 @@
+package pages
+
+templ Base() {
+	<!DOCTYPE html>
+	<html lang="en" data-theme="dark">
+		<head>
+			<meta charset="UTF-8"/>
+			<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+			<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+			<meta name="google" content="notranslate"/>
+			<link rel="shortcut icon" href="/img/gopher-svgrepo-com.svg" type="image/svg+xml"/>
+			<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" integrity="sha512-PgQMlq+nqFLV4ylk1gwUOgm6CtIIXkKwaIHp/PAIWHzig/lKZSEGKEysh0TCVbHJXCLN7WetD8TFecIky75ZfQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+			<script src="https://kit.fontawesome.com/43e7c21a59.js" crossorigin="anonymous"></script>
+			<script src="https://cdn.tailwindcss.com"></script>
+			<link rel="stylesheet" href="/resources/output.css"/>
+			<title>Environment Mutex by bakyazi</title>
+			<script src="https://unpkg.com/htmx.org@1.9.9" integrity="sha384-QFjmbokDn2DjBjq+fM+8LUIVrAgqcNW2s0PjAxHETgRn9l4fvX31ZxDxvwQnyMOX" crossorigin="anonymous"></script>
+			<script src="https://unpkg.com/hyperscript.org@0.9.12"></script>
+		</head>
+		<body hx-boost="true" hx-on::before-request="clearErrorNodes();" hx-on::after-request="clearLoader();">
+            @Header(){}
+            <div className="site-container antialiased">
+                {children...}
+            </div>
+		</body>
+
+	</html>
+}
--- a/pages/base_templ.go
+++ b/pages/base_templ.go
@@ -0,0 +1,51 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.543
+package pages
+
+//lint:file-ignore SA4006 This context is only used if a nested component is present.
+
+import "github.com/a-h/templ"
+import "context"
+import "io"
+import "bytes"
+
+func Base() templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var1 == nil {
+			templ_7745c5c3_Var1 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!doctype html><html lang=\"en\" data-theme=\"dark\"><head><meta charset=\"UTF-8\"><meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><meta name=\"google\" content=\"notranslate\"><link rel=\"shortcut icon\" href=\"/img/gopher-svgrepo-com.svg\" type=\"image/svg+xml\"><link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css\" integrity=\"sha512-PgQMlq+nqFLV4ylk1gwUOgm6CtIIXkKwaIHp/PAIWHzig/lKZSEGKEysh0TCVbHJXCLN7WetD8TFecIky75ZfQ==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\"><script src=\"https://kit.fontawesome.com/43e7c21a59.js\" crossorigin=\"anonymous\"></script><script src=\"https://cdn.tailwindcss.com\"></script><link rel=\"stylesheet\" href=\"/resources/output.css\"><title>Environment Mutex by bakyazi</title><script src=\"https://unpkg.com/htmx.org@1.9.9\" integrity=\"sha384-QFjmbokDn2DjBjq+fM+8LUIVrAgqcNW2s0PjAxHETgRn9l4fvX31ZxDxvwQnyMOX\" crossorigin=\"anonymous\"></script><script src=\"https://unpkg.com/hyperscript.org@0.9.12\"></script></head><body hx-boost=\"true\" hx-on::before-request=\"clearErrorNodes();\" hx-on::after-request=\"clearLoader();\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = Header().Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div className=\"site-container antialiased\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templ_7745c5c3_Var1.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></body></html>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
--- a/pages/components/rating.templ
+++ b/pages/components/rating.templ
@@ -0,0 +1,16 @@
+package components
+
+templ Rating(rate int) {
+<div class="flex items-center">
+    for i:=0; i<rate;i++ {
+        <svg class="w-4 h-4 text-yellow-300 ms-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 22 20">
+            <path d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z"/>
+        </svg>
+    }
+    for i:=0;i< 5-rate;i++ {
+        <svg class="w-4 h-4 ms-1 text-gray-300 dark:text-gray-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 22 20">
+            <path d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z"/>
+        </svg>
+    }
+</div>
+}
--- a/pages/components/rating_templ.go
+++ b/pages/components/rating_templ.go
@@ -0,0 +1,51 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.543
+package components
+
+//lint:file-ignore SA4006 This context is only used if a nested component is present.
+
+import "github.com/a-h/templ"
+import "context"
+import "io"
+import "bytes"
+
+func Rating(rate int) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var1 == nil {
+			templ_7745c5c3_Var1 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"flex items-center\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		for i := 0; i < rate; i++ {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<svg class=\"w-4 h-4 text-yellow-300 ms-1\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 22 20\"><path d=\"M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z\"></path></svg>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		for i := 0; i < 5-rate; i++ {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<svg class=\"w-4 h-4 ms-1 text-gray-300 dark:text-gray-500\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 22 20\"><path d=\"M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z\"></path></svg>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
--- a/pages/components/socialbar.templ
+++ b/pages/components/socialbar.templ
@@ -0,0 +1,32 @@
+package components
+
+templ SocialBar() {
+    <div class="social-icons">
+        <a href="mailto:berkay.akyazi@gmail.com" target="_blank">
+            <div class="social-icon">
+                <i class="fas fa-mail-bulk"></i>
+            </div>
+        </a>
+        <a href="https://www.linkedin.com/in/berkayakyazi/" target="_blank">
+          <div class="social-icon">
+                <i class="fab fa-linkedin"></i>
+          </div>
+        </a>
+        <a href="https://github.com/bakyazi" target="_blank">
+          <div class="social-icon">
+                <i class="fab fa-github"></i>
+          </div>
+        </a>
+        <a href="https://twitter.com/berkyzi" target="_blank">
+          <div class="social-icon">
+                <i class="fab fa-twitter"></i>
+          </div>
+        </a>
+        <a href="https://www.instagram.com/berkyzi/" target="_blank">
+          <div class="social-icon">
+                <i class="fab fa-instagram"></i>
+          </div>
+        </a>
+
+    </div>
+}
--- a/pages/components/socialbar_templ.go
+++ b/pages/components/socialbar_templ.go
@@ -0,0 +1,35 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.543
+package components
+
+//lint:file-ignore SA4006 This context is only used if a nested component is present.
+
+import "github.com/a-h/templ"
+import "context"
+import "io"
+import "bytes"
+
+func SocialBar() templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var1 == nil {
+			templ_7745c5c3_Var1 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"social-icons\"><a href=\"mailto:berkay.akyazi@gmail.com\" target=\"_blank\"><div class=\"social-icon\"><i class=\"fas fa-mail-bulk\"></i></div></a> <a href=\"https://www.linkedin.com/in/berkayakyazi/\" target=\"_blank\"><div class=\"social-icon\"><i class=\"fab fa-linkedin\"></i></div></a> <a href=\"https://github.com/bakyazi\" target=\"_blank\"><div class=\"social-icon\"><i class=\"fab fa-github\"></i></div></a> <a href=\"https://twitter.com/berkyzi\" target=\"_blank\"><div class=\"social-icon\"><i class=\"fab fa-twitter\"></i></div></a> <a href=\"https://www.instagram.com/berkyzi/\" target=\"_blank\"><div class=\"social-icon\"><i class=\"fab fa-instagram\"></i></div></a></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
--- a/pages/components/timeline.templ
+++ b/pages/components/timeline.templ
@@ -0,0 +1,16 @@
+package components
+
+import "github.com/bakyazi/gotemplresume/dto"
+
+templ Timeline(title string,items []dto.ExperienceItem) {
+    <div class="timeline">
+      <div class="timeline-title">
+        {title}
+      </div>
+      <div class="timeline-items">
+        for _, item := range items {
+            @TimelineItem(item){}
+        }
+      </div>
+    </div>
+}
--- a/pages/components/timeline_item.templ
+++ b/pages/components/timeline_item.templ
@@ -0,0 +1,24 @@
+package components
+
+import "github.com/bakyazi/gotemplresume/dto"
+
+templ TimelineItem(item dto.ExperienceItem){
+    <div class="timeline-item">
+      <div class="timeline-item-time">
+        <div class="timeline-item-time-start">
+          {item.StartDate}
+        </div>
+        <div class="timeline-item-time-seperator">
+          -
+        </div>
+        <div class="timeline-item-time-end">
+          {item.EndDate}
+        </div>
+      </div>
+      <div class="timeline-item-detail">
+      <p class="item-location">{item.Location}</p>
+        <p class="item-title">{item.Header}</p>
+        <p class="item-details">{item.Description}</p>
+      </div>
+    </div>
+}
--- a/pages/components/timeline_item_templ.go
+++ b/pages/components/timeline_item_templ.go
@@ -0,0 +1,102 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.543
+package components
+
+//lint:file-ignore SA4006 This context is only used if a nested component is present.
+
+import "github.com/a-h/templ"
+import "context"
+import "io"
+import "bytes"
+
+import "github.com/bakyazi/gotemplresume/dto"
+
+func TimelineItem(item dto.ExperienceItem) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var1 == nil {
+			templ_7745c5c3_Var1 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"timeline-item\"><div class=\"timeline-item-time\"><div class=\"timeline-item-time-start\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var2 string
+		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(item.StartDate)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pages/components/timeline_item.templ`, Line: 8, Col: 25}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div class=\"timeline-item-time-seperator\">-</div><div class=\"timeline-item-time-end\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var3 string
+		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(item.EndDate)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pages/components/timeline_item.templ`, Line: 14, Col: 23}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div><div class=\"timeline-item-detail\"><p class=\"item-location\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var4 string
+		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(item.Location)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pages/components/timeline_item.templ`, Line: 18, Col: 45}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</p><p class=\"item-title\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var5 string
+		templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(item.Header)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pages/components/timeline_item.templ`, Line: 19, Col: 42}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</p><p class=\"item-details\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var6 string
+		templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(item.Description)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pages/components/timeline_item.templ`, Line: 20, Col: 49}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</p></div></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
--- a/pages/components/timeline_templ.go
+++ b/pages/components/timeline_templ.go
@@ -0,0 +1,60 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.543
+package components
+
+//lint:file-ignore SA4006 This context is only used if a nested component is present.
+
+import "github.com/a-h/templ"
+import "context"
+import "io"
+import "bytes"
+
+import "github.com/bakyazi/gotemplresume/dto"
+
+func Timeline(title string, items []dto.ExperienceItem) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var1 == nil {
+			templ_7745c5c3_Var1 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"timeline\"><div class=\"timeline-title\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var2 string
+		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(title)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pages/components/timeline.templ`, Line: 7, Col: 14}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div class=\"timeline-items\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		for _, item := range items {
+			templ_7745c5c3_Err = TimelineItem(item).Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
--- a/pages/header.templ
+++ b/pages/header.templ
@@ -0,0 +1,21 @@
+package pages
+
+templ Header() {
+    <header class="header site-container pt-1 pb-1">
+      <nav class="header-nav">
+        <a href="/" class="header-item">
+            ABOUT
+        </a>
+        <a href="/skills" class="header-item">
+            SKILLS
+        </a>
+        <a href="/resume" class="header-item">
+            RESUME
+        </a>
+        <a class="header-item" href="https://medium.com/@berkay.akyazi" target="_blank">
+            BLOG
+          </a>
+      </nav>
+      <hr />
+      </header>
+}
--- a/pages/header_templ.go
+++ b/pages/header_templ.go
@@ -0,0 +1,35 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.543
+package pages
+
+//lint:file-ignore SA4006 This context is only used if a nested component is present.
+
+import "github.com/a-h/templ"
+import "context"
+import "io"
+import "bytes"
+
+func Header() templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var1 == nil {
+			templ_7745c5c3_Var1 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<header class=\"header site-container pt-1 pb-1\"><nav class=\"header-nav\"><a href=\"/\" class=\"header-item\">ABOUT</a> <a href=\"/skills\" class=\"header-item\">SKILLS</a> <a href=\"/resume\" class=\"header-item\">RESUME</a> <a class=\"header-item\" href=\"https://medium.com/@berkay.akyazi\" target=\"_blank\">BLOG</a></nav><hr></header>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
--- a/pages/home.templ
+++ b/pages/home.templ
@@ -0,0 +1,43 @@
+package pages
+
+import "github.com/bakyazi/gotemplresume/pages/components"
+
+templ Home() {
+   @Base() {
+      <div class="site-container social-container">
+      @components.SocialBar(){}
+      <div>
+      <div class="text-justify text-lg">
+        <h2 class="text-2xl pb-4">
+            Hi, I am <b class="text-cyan-700">Berkay Akyazı</b>
+        </h2>
+        <p class="pb-2">
+          I live in <b class="text-cyan-700 text-xl">Ankara, Turkey</b>. I'm a full stack developer.  I am always looking for new challenges and opportunities. I am passionate about learning new technologies and are constantly trying to improve.
+        </p>
+        <br/>
+        <p class="pb-2">
+          I've been learning programming since I was a kid. When I was in elementary school, I started using <b class="text-cyan-700 text-xl">HTML, CSS,</b> and <b class="text-cyan-700 text-xl">JavaScript</b> a little. After I  started studying, I learned about the programming languages <b class="text-cyan-700 text-xl">Python</b> and <b class="text-cyan-700 text-xl">C / C++</b>, and my passion for programming began. After that, I  met <b class="text-cyan-700 text-xl">Java</b> in a summer internship. Since then, I've been writing Java in my professional career.
+        </p>
+        <br/>
+        <p class="pb-2">
+        In recent times, I prefer Golang for software development. I am fan of its ability to facilitate rapid development, in addition to being both simple and powerful.
+        </p>
+        <br/>
+        <p class="pb-2">
+          Besides Golang and Java, I use <b class="text-cyan-700 text-xl">Python, React</b> and <b class="text-cyan-700 text-xl">Vue.js</b> in my professional career and everyday life. I love Python for small hands-on projects and web crawls. React is usually my first choice for front-end work. I am currently looking for go + templ + htmx tech stack and I am very passionate about it.
+        </p>
+      </div>
+            <div class="mt-20">
+              <img src="resources/me.jpg" alt="sorry i can't find nice pic for here" />
+            </div>
+            <div class="text-lg">
+              <p class="py-6">
+                <i>
+                  You can access the source code of this resume website by clicking <a href="https://github.com/bakyazi/nextjs-resume" target="_blank" class="text-cyan-700 text-xl">here</a>.
+                </i>
+              </p>
+            </div>
+            </div>
+            </div>
+      }
+}
--- a/pages/home_templ.go
+++ b/pages/home_templ.go
@@ -0,0 +1,60 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.543
+package pages
+
+//lint:file-ignore SA4006 This context is only used if a nested component is present.
+
+import "github.com/a-h/templ"
+import "context"
+import "io"
+import "bytes"
+
+import "github.com/bakyazi/gotemplresume/pages/components"
+
+func Home() templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var1 == nil {
+			templ_7745c5c3_Var1 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Var2 := templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+			templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+			if !templ_7745c5c3_IsBuffer {
+				templ_7745c5c3_Buffer = templ.GetBuffer()
+				defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"site-container social-container\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = components.SocialBar().Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div><div class=\"text-justify text-lg\"><h2 class=\"text-2xl pb-4\">Hi, I am <b class=\"text-cyan-700\">Berkay Akyazı</b></h2><p class=\"pb-2\">I live in <b class=\"text-cyan-700 text-xl\">Ankara, Turkey</b>. I'm a full stack developer.  I am always looking for new challenges and opportunities. I am passionate about learning new technologies and are constantly trying to improve.</p><br><p class=\"pb-2\">I've been learning programming since I was a kid. When I was in elementary school, I started using <b class=\"text-cyan-700 text-xl\">HTML, CSS,</b> and <b class=\"text-cyan-700 text-xl\">JavaScript</b> a little. After I  started studying, I learned about the programming languages <b class=\"text-cyan-700 text-xl\">Python</b> and <b class=\"text-cyan-700 text-xl\">C / C++</b>, and my passion for programming began. After that, I  met <b class=\"text-cyan-700 text-xl\">Java</b> in a summer internship. Since then, I've been writing Java in my professional career.</p><br><p class=\"pb-2\">In recent times, I prefer Golang for software development. I am fan of its ability to facilitate rapid development, in addition to being both simple and powerful.</p><br><p class=\"pb-2\">Besides Golang and Java, I use <b class=\"text-cyan-700 text-xl\">Python, React</b> and <b class=\"text-cyan-700 text-xl\">Vue.js</b> in my professional career and everyday life. I love Python for small hands-on projects and web crawls. React is usually my first choice for front-end work. I am currently looking for go + templ + htmx tech stack and I am very passionate about it.</p></div><div class=\"mt-20\"><img src=\"resources/me.jpg\" alt=\"sorry i can&#39;t find nice pic for here\"></div><div class=\"text-lg\"><p class=\"py-6\"><i>You can access the source code of this resume website by clicking <a href=\"https://github.com/bakyazi/nextjs-resume\" target=\"_blank\" class=\"text-cyan-700 text-xl\">here</a>.</i></p></div></div></div>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			if !templ_7745c5c3_IsBuffer {
+				_, templ_7745c5c3_Err = io.Copy(templ_7745c5c3_W, templ_7745c5c3_Buffer)
+			}
+			return templ_7745c5c3_Err
+		})
+		templ_7745c5c3_Err = Base().Render(templ.WithChildren(ctx, templ_7745c5c3_Var2), templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
--- a/pages/resume.templ
+++ b/pages/resume.templ
@@ -0,0 +1,23 @@
+package pages
+
+import "github.com/bakyazi/gotemplresume/dto"
+import "github.com/bakyazi/gotemplresume/pages/components"
+
+templ Resume(r dto.Resume) {
+    @Base(){
+    <div class="site-container">
+      <div class="flex justify-end items-center space-x-4">
+        <a href="/resources/cv.pdf" target="_blank">
+          <div class="flex justify-end items-center text-cyan-700 hover:bg-cyan-700 hover:bg-opacity-60 p-1.5 rounded-md hover:text-white"
+          >
+            <label class="cursor-pointer">Download CV</label>
+          </div>
+        </a>
+      </div>
+      <div>
+        @components.Timeline("Work Experience", r.WorkExperiences){}
+        @components.Timeline("Education", r.Education){}
+      </div>
+      </div>
+    }
+}
--- a/pages/resume_templ.go
+++ b/pages/resume_templ.go
@@ -0,0 +1,65 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.543
+package pages
+
+//lint:file-ignore SA4006 This context is only used if a nested component is present.
+
+import "github.com/a-h/templ"
+import "context"
+import "io"
+import "bytes"
+
+import "github.com/bakyazi/gotemplresume/dto"
+import "github.com/bakyazi/gotemplresume/pages/components"
+
+func Resume(r dto.Resume) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var1 == nil {
+			templ_7745c5c3_Var1 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Var2 := templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+			templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+			if !templ_7745c5c3_IsBuffer {
+				templ_7745c5c3_Buffer = templ.GetBuffer()
+				defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"site-container\"><div class=\"flex justify-end items-center space-x-4\"><a href=\"/resources/cv.pdf\" target=\"_blank\"><div class=\"flex justify-end items-center text-cyan-700 hover:bg-cyan-700 hover:bg-opacity-60 p-1.5 rounded-md hover:text-white\"><label class=\"cursor-pointer\">Download CV</label></div></a></div><div>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = components.Timeline("Work Experience", r.WorkExperiences).Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = components.Timeline("Education", r.Education).Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			if !templ_7745c5c3_IsBuffer {
+				_, templ_7745c5c3_Err = io.Copy(templ_7745c5c3_W, templ_7745c5c3_Buffer)
+			}
+			return templ_7745c5c3_Err
+		})
+		templ_7745c5c3_Err = Base().Render(templ.WithChildren(ctx, templ_7745c5c3_Var2), templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
--- a/pages/skills.templ
+++ b/pages/skills.templ
@@ -0,0 +1,68 @@
+package pages
+
+import "github.com/bakyazi/gotemplresume/dto"
+import "github.com/bakyazi/gotemplresume/pages/components"
+
+templ Skills(r dto.Resume) {
+    @Base(){
+    <div class="site-container">
+        <div class="skills-sections">
+            <div class="skills-section">
+                <label class="text-left text-cyan-700">Programming Languages</label>
+                <div class="skills-container">
+                    for _, pl := range r.Skills.ProgrammingLanguages {
+                        <div class="rate-card">
+                            {pl.Name}
+                            @components.Rating(int(pl.Rank))
+                        </div>
+                    }
+                </div>
+            </div>
+            <div class="skills-section">
+                <label class="text-left text-cyan-700">Frameworks</label>
+                <div class="skills-container">
+                    for _, pl := range r.Skills.Frameworks {
+                        <div class="rate-card">
+                            {pl.Name}
+                            @components.Rating(int(pl.Rank))
+                        </div>
+                    }
+                </div>
+            </div>
+            <div class="skills-section">
+                <label class="text-left text-cyan-700">Operating Systems</label>
+                <div class="skills-container">
+                    for _, pl := range r.Skills.OperatingSystems {
+                        <div class="rate-card">
+                            {pl.Name}
+                            @components.Rating(int(pl.Rank))
+                        </div>
+                    }
+                </div>
+            </div>
+            <div class="skills-section">
+                <label class="text-left text-cyan-700">CI/CD</label>
+                <div class="skills-container">
+                    for _, pl := range r.Skills.CiCd {
+                        <div class="rate-card">
+                            {pl.Name}
+                            @components.Rating(int(pl.Rank))
+                        </div>
+                    }
+                </div>
+            </div>
+            <div class="skills-section">
+                <label class="text-left text-cyan-700">Tools</label>
+                <div class="skills-container">
+                    for _, pl := range r.Skills.Tools {
+                        <div class="rate-card">
+                            {pl.Name}
+                            @components.Rating(int(pl.Rank))
+                        </div>
+                    }
+                </div>
+            </div>
+        </div>
+    </div>
+    }
+}
--- a/pages/skills_templ.go
+++ b/pages/skills_templ.go
@@ -0,0 +1,188 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.543
+package pages
+
+//lint:file-ignore SA4006 This context is only used if a nested component is present.
+
+import "github.com/a-h/templ"
+import "context"
+import "io"
+import "bytes"
+
+import "github.com/bakyazi/gotemplresume/dto"
+import "github.com/bakyazi/gotemplresume/pages/components"
+
+func Skills(r dto.Resume) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var1 == nil {
+			templ_7745c5c3_Var1 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Var2 := templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+			templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+			if !templ_7745c5c3_IsBuffer {
+				templ_7745c5c3_Buffer = templ.GetBuffer()
+				defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"site-container\"><div class=\"skills-sections\"><div class=\"skills-section\"><label class=\"text-left text-cyan-700\">Programming Languages</label><div class=\"skills-container\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			for _, pl := range r.Skills.ProgrammingLanguages {
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"rate-card\">")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var3 string
+				templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(pl.Name)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `pages/skills.templ`, Line: 14, Col: 36}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				templ_7745c5c3_Err = components.Rating(int(pl.Rank)).Render(ctx, templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div>")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div><div class=\"skills-section\"><label class=\"text-left text-cyan-700\">Frameworks</label><div class=\"skills-container\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			for _, pl := range r.Skills.Frameworks {
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"rate-card\">")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var4 string
+				templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(pl.Name)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `pages/skills.templ`, Line: 25, Col: 36}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				templ_7745c5c3_Err = components.Rating(int(pl.Rank)).Render(ctx, templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div>")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div><div class=\"skills-section\"><label class=\"text-left text-cyan-700\">Operating Systems</label><div class=\"skills-container\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			for _, pl := range r.Skills.OperatingSystems {
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"rate-card\">")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var5 string
+				templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(pl.Name)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `pages/skills.templ`, Line: 36, Col: 36}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				templ_7745c5c3_Err = components.Rating(int(pl.Rank)).Render(ctx, templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div>")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div><div class=\"skills-section\"><label class=\"text-left text-cyan-700\">CI/CD</label><div class=\"skills-container\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			for _, pl := range r.Skills.CiCd {
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"rate-card\">")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var6 string
+				templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(pl.Name)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `pages/skills.templ`, Line: 47, Col: 36}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				templ_7745c5c3_Err = components.Rating(int(pl.Rank)).Render(ctx, templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div>")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div><div class=\"skills-section\"><label class=\"text-left text-cyan-700\">Tools</label><div class=\"skills-container\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			for _, pl := range r.Skills.Tools {
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"rate-card\">")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var7 string
+				templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(pl.Name)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `pages/skills.templ`, Line: 58, Col: 36}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				templ_7745c5c3_Err = components.Rating(int(pl.Rank)).Render(ctx, templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div>")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div></div></div>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			if !templ_7745c5c3_IsBuffer {
+				_, templ_7745c5c3_Err = io.Copy(templ_7745c5c3_W, templ_7745c5c3_Buffer)
+			}
+			return templ_7745c5c3_Err
+		})
+		templ_7745c5c3_Err = Base().Render(templ.WithChildren(ctx, templ_7745c5c3_Var2), templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
--- a/resources/cv.pdf
+++ b/resources/cv.pdf
--- a/resources/global.css
+++ b/resources/global.css
@@ -0,0 +1,136 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+    .site-container {
+        @apply max-w-2xl mx-auto px-6 font-mono py-24
+    }
+
+    .site-3xl-container {
+        @apply max-w-3xl mx-auto
+    }
+
+    /* headers */
+    .header {
+        @apply fixed w-full right-0 left-0 bg-white top-0 z-50
+    }
+
+    .header-nav {
+        @apply flex justify-between h-12 text-center cursor-pointer
+    }
+
+    .header-item {
+        @apply hover:text-cyan-700 hover:bg-cyan-700 hover:bg-opacity-30 grow rounded-xl flex flex-col justify-center font-mono
+    }
+
+    .item-location {
+        @apply text-cyan-700 font-bold text-xl
+    }
+
+    .item-title {
+        @apply text-cyan-600 text-lg
+    }
+
+    /* icons */
+    .social-container {
+        @apply flex md:flex-row flex-col
+    }
+
+    .social-icons {
+        @apply flex-none flex md:flex-col flex-row md:justify-start justify-center md:space-y-3 md:relative md:before:absolute md:before:h-full md:before:w-px md:before:ease-linear md:before:bg-cyan-700 md:before:bg-opacity-60 md:before:right-0 mx-2 px-4 items-center
+    }
+
+    .social-icon {
+        @apply text-cyan-700 text-2xl hover:bg-cyan-700 hover:bg-opacity-30 w-11 h-11 text-center rounded-full flex flex-col justify-center items-center cursor-pointer
+    }
+
+    .contact-form {
+        @apply flex-auto
+    }
+
+    .contact-form-field {
+        @apply relative my-5
+    }
+
+    .contact-form-label {
+        @apply absolute inline-block bg-white left-5 -top-3 px-2
+    }
+
+    .contact-form-input {
+        @apply border-2 border-solid border-cyan-700 w-full rounded-lg leading-8 pl-2 pt-2
+    }
+
+    .contact-form-button {
+        @apply text-cyan-700 border-2 text-lg rounded-lg px-4 py-2 inline-block
+    }
+
+    .button-icon {
+        @apply mr-2
+    }
+
+    /* Skills */
+    .skills-container {
+        @apply grid grid-cols-3 gap-4 place-content-end pt-4
+    }
+
+    .rate-card {
+        @apply basis-1/3 flex flex-col justify-center
+    }
+
+    .skills-section {
+        @apply pb-5
+    }
+
+
+    /* Timeline */
+    .timeline {
+        @apply pb-3
+    }
+
+    .timeline-title {
+        @apply flex pb-2 relative text-2xl before:absolute before:h-1.5 before:w-1/3 before:ease-linear before:rounded-lg before:bg-cyan-700 before:bottom-0 after:absolute after:h-1.5 after:w-full after:ease-linear after:rounded-lg after:bg-cyan-700 after:bottom-0 after:bg-opacity-60
+    }
+
+    .timeline-items {
+        @apply pt-4
+    }
+
+    .timeline-item {
+        @apply flex relative pl-7 pb-5 md:flex-row flex-col
+    }
+
+    .timeline-item-time {
+        @apply md:w-1/4 w-full relative flex md:flex-col flex-row
+    }
+
+    .timeline-item-time-start, .timeline-item-time-end {
+        @apply md:w-full
+    }
+
+    .timeline-item-time-seperator {
+        @apply md:hidden inline
+    }
+
+    .timeline-item-detail {
+        @apply md:w-3/4 w-full text-justify
+    }
+
+    .timeline-item {
+        @apply before:absolute before:h-full before:w-1 before:ease-linear before:bg-cyan-700 before:bg-opacity-60
+    }
+
+    .timeline-item-time-start {
+        @apply after:absolute after:w-4 after:h-4 after:rounded-full after:bg-cyan-700
+    }
+}
+
+.timeline-item::before {
+    left: calc(8px - 2.5px);
+    top: -1px;
+}
+
+.timeline-item-time-start::after {
+    left: -28px;
+    top: 5px;
+}
--- a/resources/me.jpg
+++ b/resources/me.jpg
--- a/resources/output.css
+++ b/resources/output.css
--- a/resources/resume.json
+++ b/resources/resume.json
@@ -0,0 +1,156 @@
+{
+    "workExperiences": [
+        {
+            "startDate": "Mar 01, 2023",
+            "endDate": "Present",
+            "header": "Tech Lead",
+            "location": "Picus Security",
+            "description": "I am leading one of the development teams of Picus as a senior backend developer. Making decision on design of Attack Surface Management product. Also developing backend by Golang"
+        },
+        {
+            "startDate": "May 16, 2022",
+            "endDate": "Mar 01, 2023",
+            "header": "Software Engineer",
+            "location": "Picus Security",
+            "description": "Working on modules integrating with SIEM/EDR tools. Developing backend by Go."
+        },
+        {
+            "startDate": "Oct 5, 2020",
+            "endDate": "May 15, 2002",
+            "header": "Software Engineer",
+            "location": "ARGELA Technologies",
+            "description": "Working on multiple projects as a team member. Developing backend in Java (Spring-Boot) and network and telecommunication applications in Java and Python."
+        },
+        {
+            "startDate": "Dec 2, 2019",
+            "endDate": "Oct 5, 2020",
+            "header": "Software Engineer",
+            "location": "STM Defence",
+            "description": "I was working on multiple projects as a team member. I mostly developed frontend applications in ReactJS and VueJS. In addition to these, I was designin AWS DynomoDB structure, API Gateway, and developing AWS Lambda functions for API."
+        },
+        {
+            "startDate": "Jul 2, 2018",
+            "endDate": "Dec 2, 2019",
+            "header": "Software Engineer",
+            "location": "ARGELA Technologies",
+            "description": "Working on multiple projects as a team member. Developing backend and network/telecominication applications in Java (Spring-Boot)"
+        },
+        {
+            "startDate": "Jun 5, 2017",
+            "endDate": "Sep 29, 2017",
+            "header": "Intern Software Engineer",
+            "location": "BOTT",
+            "description": "Working as an intern, I developed desktop client application to communicate with web services in JavaFX."
+        },
+        {
+            "startDate": "Jul 18, 2016",
+            "endDate": "Sep 2, 2016 ",
+            "header": "Intern Software Engineer",
+            "location": "TAI",
+            "description": "Working as an intern, I developed a C++/OpenCV software to recognizing aircrafts and calculate distance."
+        }
+    ],
+    "education": [
+        {
+            "startDate": "Oct 7, 2013",
+            "endDate": "Jun 16, 2018",
+            "department": "Department of Computer Engineering",
+            "location": "Middle East Technical University",
+            "description": "Programming concepts, Data Structures, Algorithms and etc. I love my University because it taught me a lot. METU Rocks!!"
+        },
+        {
+            "startDate": "2009",
+            "endDate": "2013",
+            "department": "Science",
+            "location": "Ümitköy Anatolian High School",
+            "description": "There is nothing to say so much. It was an ordinary school but I have good memories there."
+        }
+    ],
+    "skills": {
+        "programmingLanguages": [
+            {
+                "name": "Golang",
+                "rank": 4.5,
+                "key": "golang"
+            },
+            {
+                "name": "Java",
+                "rank": 4.5,
+                "key": "java"
+            },
+            {
+                "name": "Python",
+                "rank": 4.0,
+                "key": "python"
+            },
+            {
+                "name": "JavaScript",
+                "rank": 3.5,
+                "key": "javascript"
+            }
+        ],
+        "frameworks": [
+            {
+                "name": "Spring",
+                "rank": 3.5,
+                "key": "spring"
+            },
+            {
+                "name": "React",
+                "rank": 3,
+                "key": "react"
+            },
+            {
+                "name": "Vue",
+                "rank": 2,
+                "key": "vue"
+            }
+        ],
+        "operatingSystems": [
+            {
+                "name": "Ubuntu",
+                "rank": 4.5,
+                "key": "ubuntu"
+            },
+            {
+                "name": "CentOS",
+                "rank": 4,
+                "key": "centos"
+            },
+            {
+                "name": "MacOS",
+                "rank": 3.5,
+                "key": "macos"
+            }
+        ],
+        "ciCd": [
+            {
+                "name": "Jenkins",
+                "rank": 3.5,
+                "key": "jenkins"
+            },
+            {
+                "name": "TravisCI",
+                "rank": 2,
+                "key": "travisci"
+            }
+        ],
+        "tools": [
+            {
+                "name": "JIRA",
+                "rank": 5,
+                "key": "jira"
+            },
+            {
+                "name": "Bitbucket",
+                "rank": 5,
+                "key": "bitbucket"
+            },
+            {
+                "name": "GitHub",
+                "rank": 5,
+                "key": "github"
+            }
+        ]
+    }
+}
--- a/router/router.go
+++ b/router/router.go
@@ -0,0 +1,62 @@
+package router
+
+import (
+	"encoding/json"
+	"github.com/bakyazi/gotemplresume/dto"
+	"github.com/bakyazi/gotemplresume/pages"
+	"github.com/labstack/echo/v4"
+	"os"
+)
+
+type Router struct {
+}
+
+func Init(e *echo.Echo) {
+	router := &Router{}
+	e.Static("/resources", "resources")
+	e.GET("/", router.Home)
+	e.GET("/skills", router.Skills)
+	e.GET("/resume", router.Resume)
+}
+
+func (r *Router) Home(c echo.Context) error {
+	return pages.Home().Render(c.Request().Context(), c.Response().Writer)
+}
+
+func (r *Router) Skills(c echo.Context) error {
+
+	resumeFile, err := os.Open("resources/resume.json")
+	if err != nil {
+		return err
+	}
+	defer resumeFile.Close()
+
+	resumeDecoder := json.NewDecoder(resumeFile)
+
+	var resume dto.Resume
+
+	err = resumeDecoder.Decode(&resume)
+	if err != nil {
+		return err
+	}
+	return pages.Skills(resume).Render(c.Request().Context(), c.Response().Writer)
+}
+
+func (r *Router) Resume(c echo.Context) error {
+
+	resumeFile, err := os.Open("resources/resume.json")
+	if err != nil {
+		return err
+	}
+	defer resumeFile.Close()
+
+	resumeDecoder := json.NewDecoder(resumeFile)
+
+	var resume dto.Resume
+
+	err = resumeDecoder.Decode(&resume)
+	if err != nil {
+		return err
+	}
+	return pages.Resume(resume).Render(c.Request().Context(), c.Response().Writer)
+}
--- a/styles/output.css
+++ b/styles/output.css
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./resources/global.css"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+