gitea/templates/pages/portfolio.tmpl

{{template "pages/base_head" .}}
<style>
	/* Portfolio-specific styles - Gallery/Creative design */
	.pages-portfolio {
		background: #1a1a1a;
		color: #fff;
	}
	.pages-portfolio .pages-header {
		background: transparent;
		border-bottom: 1px solid rgba(255,255,255,0.1);
	}
	.pages-portfolio .pages-nav-brand,
	.pages-portfolio .pages-nav-link {
		color: #fff;
	}
	.pages-portfolio .pages-nav-link:hover {
		color: var(--pages-primary);
	}
	.pages-portfolio .pages-hero {
		background: linear-gradient(180deg, #1a1a1a 0%, #2d2d2d 100%);
		padding: 100px 0 60px;
	}
	.pages-portfolio .pages-title {
		color: #fff;
		font-size: 2.5rem;
		letter-spacing: -0.02em;
	}
	.pages-portfolio .pages-tagline {
		color: rgba(255,255,255,0.7);
	}
	.pages-portfolio .pages-logo {
		border-radius: 50%;
		border: 3px solid rgba(255,255,255,0.2);
	}
	.pages-gallery {
		padding: 60px 0;
		background: #1a1a1a;
	}
	.pages-gallery-grid {
		display: grid;
		grid-template-columns: repeat(var(--columns, 3), 1fr);
		gap: 16px;
	}
	.pages-gallery-item {
		position: relative;
		overflow: hidden;
		border-radius: 8px;
		aspect-ratio: 1;
		background: #2d2d2d;
	}
	.pages-gallery-item a {
		display: block;
		width: 100%;
		height: 100%;
	}
	.pages-gallery-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform 0.3s ease, filter 0.3s ease;
	}
	.pages-gallery-item:hover .pages-gallery-image {
		transform: scale(1.05);
		filter: brightness(0.8);
	}
	.pages-gallery-caption {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 16px;
		background: linear-gradient(transparent, rgba(0,0,0,0.8));
		color: #fff;
		font-size: 0.875rem;
		font-weight: 500;
		opacity: 0;
		transform: translateY(10px);
		transition: opacity 0.3s ease, transform 0.3s ease;
	}
	.pages-gallery-item:hover .pages-gallery-caption {
		opacity: 1;
		transform: translateY(0);
	}
	.pages-portfolio .pages-readme {
		background: #2d2d2d;
		padding: 60px 0;
	}
	.pages-portfolio .pages-readme .markup {
		color: rgba(255,255,255,0.9);
	}
	.pages-portfolio .pages-readme .markup h1,
	.pages-portfolio .pages-readme .markup h2,
	.pages-portfolio .pages-readme .markup h3 {
		color: #fff;
	}
	.pages-portfolio .pages-readme .markup a {
		color: var(--pages-primary);
	}
	.pages-portfolio .pages-readme .markup code {
		background: rgba(255,255,255,0.1);
		color: #fff;
	}
	.pages-portfolio .pages-footer {
		background: #111;
	}
	/* Empty gallery placeholder */
	.pages-gallery-empty {
		grid-column: 1 / -1;
		text-align: center;
		padding: 60px;
		color: rgba(255,255,255,0.5);
	}
	.pages-gallery-empty-icon {
		font-size: 3rem;
		margin-bottom: 16px;
	}
	@media (max-width: 768px) {
		.pages-gallery-grid {
			grid-template-columns: repeat(2, 1fr);
		}
	}
	@media (max-width: 480px) {
		.pages-gallery-grid {
			grid-template-columns: 1fr;
		}
	}
</style>
<div class="pages-landing pages-portfolio">
	{{template "pages/header" .}}

	<main class="pages-main">
		<!-- Hero Section -->
		<section class="pages-hero">
			<div class="container">
				{{if .Config.Branding.Logo}}
				<img src="{{.Config.Branding.Logo}}" alt="{{.Repository.Name}}" class="pages-logo">
				{{end}}
				<h1 class="pages-title">{{if .Config.Hero.Title}}{{.Config.Hero.Title}}{{else}}{{.Repository.Name}}{{end}}</h1>
				{{if .Config.Hero.Tagline}}
				<p class="pages-tagline">{{.Config.Hero.Tagline}}</p>
				{{end}}
				<div class="pages-cta">
					{{if .Config.Hero.CTAPrimary.Text}}
					<a href="{{.Config.Hero.CTAPrimary.Link}}" class="ui primary button">
						{{.Config.Hero.CTAPrimary.Text}}
					</a>
					{{end}}
					{{if .Config.Hero.CTASecondary.Text}}
					<a href="{{.Config.Hero.CTASecondary.Link}}" class="ui button basic inverted">
						{{.Config.Hero.CTASecondary.Text}}
					</a>
					{{end}}
				</div>
			</div>
		</section>

		<!-- Gallery Section -->
		<section class="pages-gallery">
			<div class="container">
				{{if .Config.Gallery.Items}}
				<div class="pages-gallery-grid" style="--columns: {{if .Config.Gallery.Columns}}{{.Config.Gallery.Columns}}{{else}}3{{end}}">
					{{range .Config.Gallery.Items}}
					<div class="pages-gallery-item">
						{{if .Link}}<a href="{{.Link}}">{{end}}
						<img src="{{.Image}}" alt="{{.Title}}" class="pages-gallery-image">
						{{if .Title}}
						<div class="pages-gallery-caption">{{.Title}}</div>
						{{end}}
						{{if .Link}}</a>{{end}}
					</div>
					{{end}}
				</div>
				{{else}}
				<div class="pages-gallery-grid" style="--columns: 3">
					<div class="pages-gallery-empty">
						{{svg "octicon-image" 48}}
						<p>Add gallery items in your landing.yaml configuration</p>
					</div>
				</div>
				{{end}}
			</div>
		</section>

		<!-- README Section -->
		{{if .ReadmeContent}}
		<section class="pages-readme">
			<div class="container">
				<div class="markup">
					{{.ReadmeContent}}
				</div>
			</div>
		</section>
		{{end}}
	</main>

	{{template "pages/footer" .}}
</div>
{{template "pages/base_footer" .}}