1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
|
<h2>Page Layouts & Visual Hierarchy</h2>
<p class="subtitle">Desktop and mobile layouts for key pages</p>
<div class="section">
<h3>Landing Page (Homepage)</h3>
<div class="mockup" style="padding: 0;">
<div class="mockup-header">Homepage / _index.md</div>
<div class="mockup-body" style="background: linear-gradient(180deg, rgba(6, 11, 16, 0.8), rgba(16, 30, 45, 0.8)); padding: 2rem;">
<div style="text-align: center; padding: 3rem 0;">
<div style="width: 80px; height: 80px; margin: 0 auto 1.5rem; background: rgba(168, 85, 247, 0.3); border-radius: 50%; border: 2px solid #a855f7; display: flex; align-items: center; justify-content: center;">
<span style="font-size: 2rem;">📷</span>
</div>
<h1 style="font-family: 'Oxanium', sans-serif; font-size: 2rem; margin-bottom: 0.5rem; color: #a855f7;">Danilo Macrì</h1>
<p style="color: #c4d6e8; font-size: 1rem; margin-bottom: 2rem; max-width: 600px; margin-left: auto; margin-right: auto; line-height: 1.8;">Brief introduction about yourself, your focus, what you do. Keep it concise and personal. (From _index.md)</p>
<div style="display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;">
<div style="padding: 0.6rem 1.5rem; background: #a855f7; color: white; border-radius: 0.3rem; font-size: 0.9rem; cursor: pointer;">Read Articles</div>
<div style="padding: 0.6rem 1.5rem; border: 1px solid #a855f7; color: #a855f7; border-radius: 0.3rem; font-size: 0.9rem; cursor: pointer;">Get in Touch</div>
</div>
</div>
</div>
</div>
</div>
<div class="section">
<h3>Articles List Page</h3>
<div class="mockup" style="padding: 0;">
<div class="mockup-header">Articles / List View</div>
<div class="mockup-body" style="background: rgba(6, 11, 16, 0.5); padding: 2rem;">
<div style="max-width: 800px; margin: 0 auto;">
<h1 style="font-size: 1.8rem; color: #a855f7; margin-bottom: 2rem; font-family: 'Oxanium', sans-serif;">Articles</h1>
<!-- Pinned post -->
<div style="padding: 1.2rem; background: rgba(168, 85, 247, 0.12); border: 1px solid rgba(168, 85, 247, 0.3); border-radius: 0.4rem; margin-bottom: 1.5rem;">
<div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem;">
<span style="font-size: 0.75rem; color: #00ff88; font-weight: bold;">📌 PINNED</span>
</div>
<h3 style="color: #c4d6e8; margin-bottom: 0.5rem; cursor: pointer;">Why I Started This Blog</h3>
<div style="display: flex; gap: 1rem; font-size: 0.8rem; color: #7a9bb8;">
<span>Apr 14, 2026</span>
<span>•</span>
<span style="color: #a855f7;">Life</span>
</div>
</div>
<!-- Regular posts -->
<div style="border-top: 1px solid rgba(168, 85, 247, 0.15); padding: 1.2rem 0;">
<h3 style="color: #c4d6e8; margin-bottom: 0.5rem; cursor: pointer;">Building a Go CLI Tool</h3>
<div style="display: flex; gap: 1rem; font-size: 0.8rem; color: #7a9bb8;">
<span>Apr 12, 2026</span>
<span>•</span>
<span style="color: #00ff88;">Tech</span>
</div>
</div>
<div style="border-top: 1px solid rgba(168, 85, 247, 0.15); padding: 1.2rem 0;">
<h3 style="color: #c4d6e8; margin-bottom: 0.5rem; cursor: pointer;">Mountain Hiking Adventure</h3>
<div style="display: flex; gap: 1rem; font-size: 0.8rem; color: #7a9bb8;">
<span>Apr 10, 2026</span>
<span>•</span>
<span style="color: #a855f7;">Photo</span>
</div>
</div>
<div style="border-top: 1px solid rgba(168, 85, 247, 0.15); padding: 1.2rem 0;">
<h3 style="color: #c4d6e8; margin-bottom: 0.5rem; cursor: pointer;">On Simplicity</h3>
<div style="display: flex; gap: 1rem; font-size: 0.8rem; color: #7a9bb8;">
<span>Apr 8, 2026</span>
<span>•</span>
<span style="color: #a855f7;">Quote</span>
</div>
</div>
<div style="border-top: 1px solid rgba(168, 85, 247, 0.15); padding: 1.2rem 0;">
<h3 style="color: #c4d6e8; margin-bottom: 0.5rem; cursor: pointer;">Interesting Read: The Unix Philosophy</h3>
<div style="display: flex; gap: 1rem; font-size: 0.8rem; color: #7a9bb8;">
<span>Apr 5, 2026</span>
<span>•</span>
<span style="color: #00ff88;">Link</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section">
<h3>Single Article Page (Tech Example)</h3>
<div class="mockup" style="padding: 0;">
<div class="mockup-header">Article View / Single</div>
<div class="mockup-body" style="background: rgba(6, 11, 16, 0.5); padding: 2rem;">
<div style="max-width: 700px; margin: 0 auto;">
<div style="margin-bottom: 1.5rem;">
<span style="display: inline-block; padding: 0.3rem 0.8rem; background: rgba(0, 255, 136, 0.15); color: #00ff88; border-radius: 0.3rem; font-size: 0.75rem; font-weight: bold;">TECH</span>
</div>
<h1 style="font-size: 1.8rem; color: #a855f7; margin-bottom: 1rem; font-family: 'Oxanium', sans-serif;">Building a Go CLI Tool</h1>
<div style="display: flex; gap: 1rem; font-size: 0.85rem; color: #7a9bb8; margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(168, 85, 247, 0.15);">
<span>Apr 12, 2026</span>
<span>•</span>
<span>5 min read</span>
</div>
<div style="line-height: 1.8; color: #c4d6e8; font-size: 0.95rem;">
<p>Article content goes here. This is where your markdown is rendered with proper typography and spacing.</p>
<div style="margin: 1.5rem 0; padding: 1rem; background: rgba(6, 11, 16, 0.8); border-left: 3px solid #00ff88; border-radius: 0.3rem; font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; color: #00ff88; overflow-x: auto;">
<div>$ go run main.go</div>
<div>Hello, CLI!</div>
</div>
<p>More content and explanation about the code...</p>
</div>
<div style="margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(168, 85, 247, 0.15);">
<div style="font-size: 0.8rem; color: #7a9bb8;">Tags:</div>
<div style="display: flex; gap: 0.5rem; margin-top: 0.5rem; flex-wrap: wrap;">
<span style="padding: 0.3rem 0.8rem; background: rgba(168, 85, 247, 0.1); border: 1px solid rgba(168, 85, 247, 0.2); border-radius: 0.3rem; font-size: 0.8rem;">#golang</span>
<span style="padding: 0.3rem 0.8rem; background: rgba(168, 85, 247, 0.1); border: 1px solid rgba(168, 85, 247, 0.2); border-radius: 0.3rem; font-size: 0.8rem;">#cli</span>
<span style="padding: 0.3rem 0.8rem; background: rgba(168, 85, 247, 0.1); border: 1px solid rgba(168, 85, 247, 0.2); border-radius: 0.3rem; font-size: 0.8rem;">#programming</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section">
<h3>Static Pages (About, Contact, Privacy)</h3>
<div style="padding: 1.5rem; background: rgba(168, 85, 247, 0.08); border: 1px solid rgba(168, 85, 247, 0.2); border-radius: 0.4rem;">
<p style="font-size: 0.85rem; line-height: 1.8;">Static pages use a clean single-column layout. Content managed via markdown files in <code>content/</code>. All pages share the same template with consistent styling.</p>
<p style="font-size: 0.85rem; margin-top: 1rem;"><strong>Example:</strong> <code>/is</code> (About), <code>/is/here</code> (Contact), <code>/is/legal</code> (Privacy) — all defined in hugo.toml for easy management.</p>
</div>
</div>
<div class="section" style="border-top: 2px solid rgba(168, 85, 247, 0.2); padding-top: 1.5rem;">
<h3>Responsive Behavior</h3>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
<div style="padding: 1rem; background: rgba(0, 255, 136, 0.08); border: 1px solid rgba(0, 255, 136, 0.2); border-radius: 0.3rem;">
<h4 style="color: #00ff88; font-size: 0.9rem; margin-bottom: 0.5rem;">Desktop (1024px+)</h4>
<ul style="font-size: 0.8rem; line-height: 1.8; margin-left: 1.2rem;">
<li>Full navigation visible</li>
<li>Max content width ~800px</li>
<li>Comfortable spacing</li>
</ul>
</div>
<div style="padding: 1rem; background: rgba(168, 85, 247, 0.08); border: 1px solid rgba(168, 85, 247, 0.2); border-radius: 0.3rem;">
<h4 style="color: #a855f7; font-size: 0.9rem; margin-bottom: 0.5rem;">Mobile (<768px)</h4>
<ul style="font-size: 0.8rem; line-height: 1.8; margin-left: 1.2rem;">
<li>Hamburger menu toggle</li>
<li>Full-screen overlay on tap</li>
<li>Optimized spacing</li>
</ul>
</div>
</div>
</div>
|
