Skip to content

Commit a004760

Browse files
phonnzphonnz
committed
Improve about template
1 parent da4326b commit a004760

File tree

2 files changed

+72
-7
lines changed

2 files changed

+72
-7
lines changed

‎fullstack/lib/fullstack_web/controllers/about_html.ex

+71-6
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,77 @@ defmodule FullstackWeb.AboutHTML do
55

66
def index(assigns) do
77
~H"""
8-
<h1>The projects</h1>
9-
<ul>
10-
<li><a href="/">FullStack Phoenix Project</a></li>
11-
<li><a href={~p"/chat"}> Chat application</a></li>
12-
<li><a href={~p"/transactions"}> Basic Dashboard Sample</a></li>
13-
</ul>
8+
<div class="container px-4 py-8 mx-auto">
9+
<h1 class="mb-8 text-3xl font-bold text-center text-gray-800">Happy Demos!</h1>
10+
<div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
11+
<a href="/" class="block group">
12+
<div class="overflow-hidden relative bg-white rounded-lg shadow-md transition-all duration-300 hover:shadow-xl">
13+
<div class="relative">
14+
<img src="https://placehold.co/600x400/png" alt="Phoenix Project" class="object-cover w-full h-48"/>
15+
<div class="absolute inset-0 bg-gradient-to-t opacity-0 transition-opacity duration-300 from-black/80 to-black/0 group-hover:opacity-100"></div>
16+
</div>
17+
<h2 class="p-4 text-xl font-semibold text-gray-800">FullStack Phoenix Project</h2>
18+
<div class="flex absolute inset-0 items-end opacity-0 transition-opacity duration-300 group-hover:opacity-100">
19+
<div class="p-8 text-white">
20+
<p class="mb-10 text-sm leading-relaxed">
21+
A comprehensive Phoenix application showcasing full-stack development capabilities with modern web technologies.
22+
</p>
23+
</div>
24+
</div>
25+
</div>
26+
</a>
27+
28+
<a href={~p"/chat"} class="block group">
29+
<div class="overflow-hidden relative bg-white rounded-lg shadow-md transition-all duration-300 hover:shadow-xl">
30+
<div class="relative">
31+
<img src="https://placehold.co/600x400/png" alt="Chat Application" class="object-cover w-full h-48"/>
32+
<div class="absolute inset-0 bg-gradient-to-t opacity-0 transition-opacity duration-300 from-black/80 to-black/0 group-hover:opacity-100"></div>
33+
</div>
34+
<h2 class="p-4 text-xl font-semibold text-gray-800">Chat Application</h2>
35+
<div class="flex absolute inset-0 items-end opacity-0 transition-opacity duration-300 group-hover:opacity-100">
36+
<div class="p-8 text-white">
37+
<p class="mb-10 text-sm leading-relaxed">
38+
Real-time chat application built with Phoenix LiveView, enabling instant communication and updates.
39+
</p>
40+
</div>
41+
</div>
42+
</div>
43+
</a>
44+
<a href={~p"/fibonacci"} class="block group">
45+
<div class="overflow-hidden relative bg-white rounded-lg shadow-md transition-all duration-300 hover:shadow-xl">
46+
<div class="relative">
47+
<img src="https://placehold.co/600x400/png" alt="Dashboard Sample" class="object-cover w-full h-48"/>
48+
<div class="absolute inset-0 bg-gradient-to-t opacity-0 transition-opacity duration-300 from-black/80 to-black/0 group-hover:opacity-100"></div>
49+
</div>
50+
<h2 class="p-4 text-xl font-semibold text-gray-800">Fibonacci</h2>
51+
<div class="flex absolute inset-0 items-end opacity-0 transition-opacity duration-300 group-hover:opacity-100">
52+
<div class="p-8 text-white">
53+
<p class="mb-10 text-sm leading-relaxed">
54+
Fibonacci examples.
55+
</p>
56+
</div>
57+
</div>
58+
</div>
59+
</a>
60+
<a href={~p"/transactions"} class="block group">
61+
<div class="overflow-hidden relative bg-white rounded-lg shadow-md transition-all duration-300 hover:shadow-xl">
62+
<div class="relative">
63+
<img src="https://placehold.co/600x400/png" alt="Dashboard Sample" class="object-cover w-full h-48"/>
64+
<div class="absolute inset-0 bg-gradient-to-t opacity-0 transition-opacity duration-300 from-black/80 to-black/0 group-hover:opacity-100"></div>
65+
</div>
66+
<h2 class="p-4 text-xl font-semibold text-gray-800">Basic Dashboard Sample</h2>
67+
<div class="flex absolute inset-0 items-end opacity-0 transition-opacity duration-300 group-hover:opacity-100">
68+
<div class="p-8 text-white">
69+
<p class="mb-10 text-sm leading-relaxed">
70+
Interactive dashboard displaying transaction data with filtering and sorting capabilities.
71+
</p>
72+
<h2 class="mb-2 text-xl font-semibold">Basic Dashboard Sample</h2>
73+
</div>
74+
</div>
75+
</div>
76+
</a>
77+
</div>
78+
</div>
1479
"""
1580
end
1681
end

‎fullstack/lib/fullstack_web/router.ex

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ defmodule FullstackWeb.Router do
2020
scope "/", FullstackWeb do
2121
pipe_through :browser
2222
live "/fibonacci", Public.FibonacciLive.Index, :index
23+
live "/transactions", Public.TransactionsLive.PublicTransactions, :public_transactions
2324

2425
resources "/about", AboutController, only: [:index]
2526
live "/chat", ChatLive
@@ -29,7 +30,6 @@ defmodule FullstackWeb.Router do
2930

3031
live "/devices/:id", DeviceLive.Show, :show
3132
live "/devices/:id/show/edit", DeviceLive.Show, :edit
32-
live "/transactions", Public.TransactionsLive.PublicTransactions, :public_trasactions
3333

3434
live "/urls", UrlLive.Index, :index
3535
live "/urls/new", UrlLive.Index, :new

0 commit comments

Comments
 (0)