diff options
Diffstat (limited to 'layouts')
| -rw-r--r-- | layouts/_partials/hero.html | 65 | ||||
| -rw-r--r-- | layouts/_partials/post-card.html | 44 | ||||
| -rw-r--r-- | layouts/home.html | 49 |
3 files changed, 97 insertions, 61 deletions
diff --git a/layouts/_partials/hero.html b/layouts/_partials/hero.html index ac8a4e1..1be5f71 100644 --- a/layouts/_partials/hero.html +++ b/layouts/_partials/hero.html @@ -1,39 +1,40 @@ <section class="hero" role="region" aria-label="Hero"> - <div class="hero-left"> - <div class="hero-prompt">// Featured</div> - <h1 class="hero-name" data-text="{{ .Site.Params.author }}">{{ .Site.Params.author }}</h1> - <div class="hero-role" id="typed" data-phrases='{{ .Site.Params.typingPhrases | jsonify }}'></div> - <p class="hero-tagline">{{ .Site.Params.description }}</p> - <div class="hero-buttons"> - <a href="/articles/" class="btn btn-primary">Read Articles</a> - <a href="#articles" class="btn btn-outline">Explore</a> - </div> - </div> - - <div class="hero-right"> - <div class="hero-terminal"> - <div class="terminal-bar"> - <span class="terminal-dot" style="background: #ff6b6b;"></span> - <span class="terminal-dot" style="background: #ffd93d;"></span> - <span class="terminal-dot" style="background: #6bcf7f;"></span> + <div class="hero-container"> + <div class="hero-left"> + <div class="hero-prompt">welcome to</div> + <h1 class="hero-name" data-text="{{ .Site.Params.author }}">{{ .Site.Params.author }}</h1> + <div class="hero-role" id="typed" data-phrases='{{ .Site.Params.typingPhrases | jsonify }}'></div> + <p class="hero-tagline">{{ .Site.Params.description }}</p> + <div class="hero-buttons"> + <a href="/articles/" class="btn btn-primary">Read Articles</a> + <a href="/is/" class="btn btn-outline">About Me</a> </div> - <div class="terminal-content"> - <div>$ <span class="terminal-prompt">whoami</span></div> - <div>danilo</div> - <div>$ <span class="terminal-prompt">pwd</span></div> - <div>/home/danilo/web</div> - <div>$ <span class="terminal-prompt">ls -la</span></div> - <div>total 48</div> - <div>drwxr-xr-x 5 danilo staff 160 Apr 9 2026 .</div> - <div>-rw-r--r-- 1 danilo staff 4.2K blog.md</div> + </div> + <div class="hero-right"> + <div class="hero-terminal"> + <div class="terminal-bar"> + <span class="terminal-dot" style="background: #ff5f57;"></span> + <span class="terminal-dot" style="background: #febc2e;"></span> + <span class="terminal-dot" style="background: #28c840;"></span> + <span class="terminal-title">root@danix.xyz</span> + </div> + <div class="terminal-content"> + <div class="tl tl-d1"><span class="tc-dim">$ </span><span class="tc-ok">whoami</span></div> + <div class="tl tl-d2">danilo</div> + <div class="tl tl-d3"><span class="tc-dim">$ </span><span class="tc-ok">cat roles.txt</span></div> + <div class="tl tl-d4"><span class="tc-key">Security</span> & Web Dev</div> + <div class="tl tl-d5"><span class="tc-key">WordPress</span> Developer</div> + <div class="tl tl-d6"><span class="tc-key">Bash</span> Enthusiast</div> + <div class="tl tl-d7"><span class="tc-dim">$ </span><span class="tc-ok">uptime</span></div> + <div class="tl tl-d8">up 4 years, still learning</div> + <div class="tl tl-d9"><span class="tc-dim">$ </span><span class="tc-ok">_</span></div> + </div> </div> </div> - </div> + </div><!-- /.hero-container --> - <div class="scroll-indicator"> - <span>Scroll to explore</span> - <svg width="20" height="20" viewBox="0 0 20 20" fill="none"> - <path d="M10 3v10M6 9l4 4 4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> - </svg> + <div class="scroll-indicator" aria-hidden="true"> + <span>scroll</span> + <div class="scroll-line"></div> </div> </section> diff --git a/layouts/_partials/post-card.html b/layouts/_partials/post-card.html index 7dd8c9a..f3a1362 100644 --- a/layouts/_partials/post-card.html +++ b/layouts/_partials/post-card.html @@ -1,16 +1,30 @@ -{{ $featured := .featured }} -<article class="post-card {{ if $featured }}featured{{ end }}"> - {{ if .image }} - <img src="{{ .image }}" alt="{{ .title }}" class="post-card-image"> - {{ else }} - <div class="post-card-image" style="background: linear-gradient(135deg, var(--color-{{ .type }}), var(--bg2));"></div> - {{ end }} - <div class="post-card-body"> - <div class="post-type-badge {{ .type }}">{{ .type }}</div> - <h3 class="post-card-title"><a href="{{ .url }}">{{ .title }}</a></h3> - <p class="post-card-excerpt">{{ .description }}</p> - <div class="post-card-meta"> - <span>{{ dateFormat "Jan 2, 2006" .date }}</span> +{{ if eq .context "home" }} + <article class="article-card reveal" data-type="{{ .type }}"> + <div class="article-type" style="background: var(--type-{{ .type }});">{{ .type }}</div> + <div class="article-content"> + <h3 class="article-title"><a href="{{ .url }}">{{ .title }}</a></h3> + <p class="article-excerpt">{{ .description }}</p> + <div class="article-meta"> + <span>{{ dateFormat "Jan 2, 2006" .date }}</span> + <a href="{{ .url }}" class="article-read">Read →</a> + </div> </div> - </div> -</article> + </article> +{{ else }} + {{ $featured := .featured }} + <article class="post-card {{ if $featured }}featured{{ end }}"> + {{ if .image }} + <img src="{{ .image }}" alt="{{ .title }}" class="post-card-image"> + {{ else }} + <div class="post-card-image" style="background: linear-gradient(135deg, var(--color-{{ .type }}), var(--bg2));"></div> + {{ end }} + <div class="post-card-body"> + <div class="post-type-badge {{ .type }}">{{ .type }}</div> + <h3 class="post-card-title"><a href="{{ .url }}">{{ .title }}</a></h3> + <p class="post-card-excerpt">{{ .description }}</p> + <div class="post-card-meta"> + <span>{{ dateFormat "Jan 2, 2006" .date }}</span> + </div> + </div> + </article> +{{ end }} diff --git a/layouts/home.html b/layouts/home.html index 6328ee5..54d8087 100644 --- a/layouts/home.html +++ b/layouts/home.html @@ -3,25 +3,46 @@ {{ define "main" }} {{ partial "hero.html" . }} - <section id="articles" class="section-container reveal-group"> + <section id="articles" class="section-container reveal-group" + style="background: var(--bg2); padding: 6rem 2rem;"> + + <div class="section-header"> + <p class="section-eyebrow">// latest posts</p> + <h2 class="section-title">Recent Articles</h2> + </div> + {{ $articlesSection := .Site.GetPage "/articles" }} {{ if $articlesSection }} {{ $articles := $articlesSection.Pages }} - {{ $articles := sort $articles "Date" "desc" }} - {{ range first 6 $articles }} - {{ $type := .Params.type }} - {{ if not $type }}{{ $type = "article" }}{{ end }} - - {{ $excerpt := .Params.excerpt }} - {{ if not $excerpt }} - {{ $excerpt = .Summary | plainify | truncate 150 }} - {{ end }} + {{ $articles = sort $articles "Date" "desc" }} + <div class="articles-grid"> + {{ range first 6 $articles }} + {{ $type := .Params.type }} + {{ if not $type }}{{ $type = "article" }}{{ end }} - {{ $data := dict "title" .Title "type" $type "description" $excerpt "date" .Date "url" .RelPermalink "image" .Params.image "featured" .Params.featured }} - {{ partial "post-card.html" $data }} - {{ end }} + {{ $excerpt := .Params.excerpt }} + {{ if not $excerpt }} + {{ $excerpt = .Summary | plainify | truncate 150 }} + {{ end }} + + {{ $data := dict + "title" .Title + "type" $type + "description" $excerpt + "date" .Date + "url" .RelPermalink + "image" .Params.image + "featured" .Params.featured + "context" "home" + }} + {{ partial "post-card.html" $data }} + {{ end }} + </div> {{ end }} - <a href="/articles/" class="btn btn-outline">View All Articles</a> + <div style="text-align: center; margin-top: 3rem;"> + <a href="/articles/" class="btn btn-outline">View All Articles</a> + </div> + </section> {{ end }} |