diff --git a/content/books/the-midnight-library.md b/content/books/the-midnight-library.md
new file mode 100644
index 0000000..437b406
--- /dev/null
+++ b/content/books/the-midnight-library.md
@@ -0,0 +1,10 @@
+---
+title: "The Midnight Library"
+category: "Books"
+image: "/img/midnight-library.jpg"
+rating: 4.0
+description: "A novel about choices, regrets, and the infinite possibilities of life."
+link:
+ url: "#"
+ label: "Learn more"
+---
diff --git a/content/movies/inception.md b/content/movies/inception.md
new file mode 100644
index 0000000..903cab2
--- /dev/null
+++ b/content/movies/inception.md
@@ -0,0 +1,10 @@
+---
+title: "Inception"
+category: "Movies"
+image: "/img/inception.jpg"
+rating: 4.8
+description: "A mind-bending thriller about dream invasion."
+link:
+ url: "#"
+ label: "View details"
+---
diff --git a/content/recipes/spaghetti-carbonara.md b/content/recipes/spaghetti-carbonara.md
new file mode 100644
index 0000000..f799692
--- /dev/null
+++ b/content/recipes/spaghetti-carbonara.md
@@ -0,0 +1,10 @@
+---
+title: "Spaghetti Carbonara"
+category: "Recipes"
+image: "/img/carbonara.jpg"
+rating: 5.0
+description: "Classic Italian pasta dish with eggs, cheese, and pancetta."
+link:
+ url: "#"
+ label: "Get recipe"
+---
diff --git a/content/tvseries/stranger-things.md b/content/tvseries/stranger-things.md
new file mode 100644
index 0000000..9856422
--- /dev/null
+++ b/content/tvseries/stranger-things.md
@@ -0,0 +1,10 @@
+---
+title: "Stranger Things"
+category: "TV Series"
+image: "/img/stranger-things.jpg"
+rating: 4.2
+description: "Kids in a small town uncover supernatural mysteries."
+link:
+ url: "#"
+ label: "Explore series"
+---
diff --git a/content/youtube/tech-gadget-review.md b/content/youtube/tech-gadget-review.md
new file mode 100644
index 0000000..361699f
--- /dev/null
+++ b/content/youtube/tech-gadget-review.md
@@ -0,0 +1,10 @@
+---
+title: "Tech Gadget Review"
+category: "YouTube"
+image: "/img/tech-gadget.jpg"
+likes: "1.2M Likes"
+description: "Unboxing and review of the latest cool tech gadgets."
+link:
+ url: "#"
+ label: "Watch video"
+---
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 5b09ff9..9a97c3a 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -1,19 +1,22 @@
-
+
{{ .Title }}
- {{ .Site.Title }}
+
-
+ ☰
+ My Favorite Stuff
{{ block "main" . }}{{ end }}
-
+ +
diff --git a/layouts/_default/index.html b/layouts/_default/index.html
index 6c28b82..a37ff6f 100644
--- a/layouts/_default/index.html
+++ b/layouts/_default/index.html
@@ -1,20 +1,32 @@
{{ define "main" }}
-
- {{ .Title }}
- {{ .Content }}
-
-
- Recent Posts
-
+
+ {{ $categories := slice "Books" "Movies" "TV Series" "Recipes" "YouTube" "Music" "Concerts" }}
+ {{ range $i, $cat := $categories }}
+
{{ $cat }}
+ {{ end }}
+
+ {{ $current := "Books" }}
+ {{ range where .Site.RegularPages ".Params.category" $current }}
+ {{ partial "card.html" . }}
+ {{ end }}
+
+
{{ end }}
diff --git a/layouts/partials/card.html b/layouts/partials/card.html
new file mode 100644
index 0000000..654b4e3
--- /dev/null
+++ b/layouts/partials/card.html
@@ -0,0 +1,8 @@
+
+ {{ with .Params.image }}
{{ end }}
+
{{ .Title }}
+ {{ with .Params.rating }}
{{ partial "stars.html" (dict "rating" .) }} {{ . }}
{{ end }}
+ {{ with .Params.likes }}
👍 {{ . }}
{{ end }}
+
{{ .Params.description }}
+ {{ with .Params.link }}
{{ .label }} → {{ end }}
+
+ {{ range seq 1 $full }}★{{ end }}
+ {{ if $half }}½{{ end }}
+ {{ range seq 1 $empty }}☆{{ end }}
+
diff --git a/static/css/style.css b/static/css/style.css
new file mode 100644
index 0000000..17ac37f
--- /dev/null
+++ b/static/css/style.css
@@ -0,0 +1,120 @@
+body {
+ font-family: 'Roboto', Arial, sans-serif;
+ background: #f4f6fa;
+ margin: 0;
+ color: #222;
+}
+header {
+ background: #fff;
+ padding: 24px 32px 12px 32px;
+ box-shadow: 0 2px 8px rgba(0,0,0,0.03);
+ display: flex;
+ align-items: center;
+ gap: 16px;
+}
+header h1 {
+ font-size: 2rem;
+ margin: 0;
+}
+.tabs {
+ display: flex;
+ gap: 32px;
+ border-bottom: 2px solid #e0e5ec;
+ margin: 0 32px;
+ font-size: 1.1rem;
+}
+.tab {
+ padding: 12px 0;
+ cursor: pointer;
+ border-bottom: 2px solid transparent;
+ color: #666;
+ transition: border 0.2s, color 0.2s;
+}
+.tab.active {
+ border-bottom: 2px solid #1976d2;
+ color: #1976d2;
+ font-weight: 500;
+}
+.cards {
+ display: flex;
+ gap: 24px;
+ flex-wrap: wrap;
+ margin: 32px;
+}
+.card {
+ background: #fff;
+ border-radius: 16px;
+ box-shadow: 0 2px 8px rgba(0,0,0,0.07);
+ width: 240px;
+ padding: 0 0 20px 0;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ transition: box-shadow 0.2s;
+}
+.card:hover {
+ box-shadow: 0 6px 24px rgba(25, 118, 210, 0.09);
+}
+.card img {
+ width: 100%;
+ height: 180px;
+ object-fit: cover;
+ border-radius: 16px 16px 0 0;
+}
+.card-title {
+ font-size: 1.1rem;
+ font-weight: 500;
+ margin: 16px 0 0 16px;
+}
+.card-rating {
+ margin-left: 16px;
+ color: #fbc02d;
+ font-size: 1.1rem;
+}
+.card-desc {
+ margin: 8px 16px 0 16px;
+ color: #444;
+ font-size: 0.98rem;
+}
+.card-link {
+ margin: 10px 16px 0 16px;
+ color: #1976d2;
+ text-decoration: none;
+ font-weight: 500;
+ font-size: 0.97rem;
+ display: flex;
+ align-items: center;
+ gap: 4px;
+}
+.card-link:hover {
+ text-decoration: underline;
+}
+.card-likes {
+ margin-left: 16px;
+ color: #e53935;
+ font-size: 0.97rem;
+ display: flex;
+ align-items: center;
+ gap: 4px;
+}
+.fab {
+ position: fixed;
+ right: 32px;
+ bottom: 32px;
+ width: 56px;
+ height: 56px;
+ border-radius: 50%;
+ background: #1976d2;
+ color: #fff;
+ font-size: 2.2rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ box-shadow: 0 4px 24px rgba(25, 118, 210, 0.18);
+ cursor: pointer;
+ z-index: 100;
+}
+@media (max-width: 900px) {
+ .cards { flex-direction: column; gap: 32px; }
+ .card { width: 100%; }
+}