Skip to content

Commit 2828e33

Browse files
timlinuxtimlinux
committed
Add portfolio detail page template matching blog style
- Create portfolio single.html using same layout as blog detail pages - Reuse blog-hero, blog-article CSS classes for consistent styling - Include client info, services, topics, share buttons in sidebar - Add related projects and CTA sections - Maintain prev/next navigation between portfolio items
1 parent 174486a commit 2828e33

File tree

2 files changed

+856
-0
lines changed

2 files changed

+856
-0
lines changed

‎layouts/portfolio/single.html‎

Lines changed: 187 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,187 @@
1+
{{ partial "header.html" . }}
2+
{{ partial "menu.html" . }}
3+
4+
<!-- Portfolio Hero Section -->
5+
<section class="blog-hero">
6+
<div class="blog-hero-bg">
7+
{{ $thumbnail := .Params.thumbnail | default "/img/banner-portfolio.png" }}
8+
<img src="{{ absURL $thumbnail }}" alt="{{ .Title }}" class="blog-hero-image">
9+
<div class="blog-hero-overlay"></div>
10+
</div>
11+
<div class="container">
12+
<a href="{{ absURL "portfolio/" }}" class="blog-hero-back">
13+
<i class="fas fa-arrow-left"></i>
14+
Back to Portfolio
15+
</a>
16+
<div class="blog-hero-content">
17+
<div class="blog-hero-meta">
18+
{{ if .Params.tags }}
19+
<div class="blog-hero-tags">
20+
{{ range first 2 .Params.tags }}
21+
<span class="blog-hero-tag">{{ . }}</span>
22+
{{ end }}
23+
</div>
24+
{{ end }}
25+
{{ if .Params.client }}
26+
<span class="blog-hero-date">
27+
<i class="fas fa-building"></i>
28+
{{ .Params.client }}
29+
</span>
30+
{{ end }}
31+
{{ if .Date }}
32+
<span class="blog-hero-author">
33+
<i class="fas fa-calendar-alt"></i>
34+
{{ .Date.Format "January 2006" }}{{ if .Params.endDate }} - {{ (time .Params.endDate).Format "January 2006" }}{{ end }}
35+
</span>
36+
{{ end }}
37+
</div>
38+
<h1 class="blog-hero-title">{{ .Title }}</h1>
39+
{{ if .Description }}
40+
<p class="blog-hero-subtitle">{{ .Description }}</p>
41+
{{ end }}
42+
</div>
43+
</div>
44+
</section>
45+
46+
<!-- Portfolio Content Section -->
47+
<article class="blog-article">
48+
<div class="container">
49+
<div class="blog-article-wrapper">
50+
<!-- Main Content -->
51+
<div class="blog-article-content">
52+
{{ .Content }}
53+
</div>
54+
55+
<!-- Sidebar -->
56+
<aside class="blog-article-sidebar">
57+
<!-- Client Card -->
58+
{{ if .Params.client }}
59+
<div class="sidebar-card author-card">
60+
<div class="author-avatar">
61+
<i class="fas fa-building"></i>
62+
</div>
63+
<div class="author-info">
64+
<span class="author-label">Client</span>
65+
<span class="author-name">{{ .Params.client }}</span>
66+
</div>
67+
</div>
68+
{{ end }}
69+
70+
<!-- Services -->
71+
{{ if .Params.services }}
72+
<div class="sidebar-card tags-card">
73+
<h4 class="sidebar-card-title">Services</h4>
74+
<div class="sidebar-tags">
75+
{{ range .Params.services }}
76+
<span class="sidebar-tag">{{ . }}</span>
77+
{{ end }}
78+
</div>
79+
</div>
80+
{{ end }}
81+
82+
<!-- Topics/Tags -->
83+
{{ if .Params.tags }}
84+
<div class="sidebar-card tags-card">
85+
<h4 class="sidebar-card-title">Topics</h4>
86+
<div class="sidebar-tags">
87+
{{ range .Params.tags }}
88+
<a href="{{ "/tags/" | relLangURL }}{{ . | urlize }}" class="sidebar-tag">{{ . }}</a>
89+
{{ end }}
90+
</div>
91+
</div>
92+
{{ end }}
93+
94+
<!-- Share -->
95+
<div class="sidebar-card share-card">
96+
<h4 class="sidebar-card-title">Share This</h4>
97+
<div class="share-buttons">
98+
<a href="https://twitter.com/intent/tweet?url={{ .Permalink }}&text={{ .Title }}"
99+
target="_blank" rel="noopener" class="share-btn share-twitter" title="Share on Twitter">
100+
<i class="fab fa-twitter"></i>
101+
</a>
102+
<a href="https://www.linkedin.com/shareArticle?mini=true&url={{ .Permalink }}&title={{ .Title }}"
103+
target="_blank" rel="noopener" class="share-btn share-linkedin" title="Share on LinkedIn">
104+
<i class="fab fa-linkedin-in"></i>
105+
</a>
106+
<a href="mailto:?subject={{ .Title }}&body=Check out this project: {{ .Permalink }}"
107+
class="share-btn share-email" title="Share via Email">
108+
<i class="fas fa-envelope"></i>
109+
</a>
110+
</div>
111+
</div>
112+
113+
<!-- Related Projects -->
114+
{{ $currentPage := . }}
115+
{{ $related := where (where site.RegularPages "Section" "portfolio") ".Permalink" "!=" .Permalink }}
116+
{{ $related = $related | first 3 }}
117+
{{ with $related }}
118+
<div class="sidebar-card related-card">
119+
<h4 class="sidebar-card-title">Related Projects</h4>
120+
<div class="related-posts">
121+
{{ range . }}
122+
<a href="{{ .Permalink }}" class="related-post">
123+
<span class="related-post-title">{{ .Title | truncate 60 }}</span>
124+
{{ if .Params.client }}
125+
<span class="related-post-date">{{ .Params.client }}</span>
126+
{{ end }}
127+
</a>
128+
{{ end }}
129+
</div>
130+
</div>
131+
{{ end }}
132+
</aside>
133+
</div>
134+
</div>
135+
</article>
136+
137+
<!-- CTA Section -->
138+
<section class="section blog-cta-section">
139+
<div class="container">
140+
<div class="blog-cta-content">
141+
<h2 class="blog-cta-title">Interested in a Similar Project?</h2>
142+
<p class="blog-cta-text">Let's discuss how Kartoza can help your organization achieve its geospatial goals.</p>
143+
<div class="blog-cta-buttons">
144+
<a class="button is-primary is-medium" href="{{ absURL "contact-us/" }}?subject=Project%20Enquiry:%20{{ .Title | urlquery }}">
145+
<span class="icon"><i class="fas fa-envelope"></i></span>
146+
<span>Get in Touch</span>
147+
</a>
148+
<a class="button is-light is-medium" href="{{ absURL "solutions/" }}">
149+
<span class="icon"><i class="fas fa-th-large"></i></span>
150+
<span>Our Solutions</span>
151+
</a>
152+
</div>
153+
</div>
154+
</div>
155+
</section>
156+
157+
<!-- Navigation -->
158+
<nav class="blog-navigation">
159+
<div class="container">
160+
<div class="blog-nav-wrapper">
161+
{{ with .PrevInSection }}
162+
<a href="{{ .Permalink }}" class="blog-nav-link blog-nav-prev">
163+
<span class="blog-nav-direction"><i class="fas fa-arrow-left"></i> Previous</span>
164+
<span class="blog-nav-title">{{ .Title | truncate 50 }}</span>
165+
</a>
166+
{{ else }}
167+
<div class="blog-nav-link blog-nav-empty"></div>
168+
{{ end }}
169+
170+
<a href="{{ absURL "portfolio/" }}" class="blog-nav-all">
171+
<i class="fas fa-th-large"></i>
172+
All Projects
173+
</a>
174+
175+
{{ with .NextInSection }}
176+
<a href="{{ .Permalink }}" class="blog-nav-link blog-nav-next">
177+
<span class="blog-nav-direction">Next <i class="fas fa-arrow-right"></i></span>
178+
<span class="blog-nav-title">{{ .Title | truncate 50 }}</span>
179+
</a>
180+
{{ else }}
181+
<div class="blog-nav-link blog-nav-empty"></div>
182+
{{ end }}
183+
</div>
184+
</div>
185+
</nav>
186+
187+
{{ partial "footer.html" . }}

0 commit comments

Comments
 (0)