Create your own version of the site</h1> <article> <h1>Create your own version of the site</h1> <p>Tue, 11 Feb 2025 14:38:33 +0200</p> <p>This article is a guide to help you create your own version of the site using <a href="https://github.com/zetxek/adritian-free-hugo-theme">Adritian</a>. It will cover the main steps to get started with the theme, and how to customize it to your needs.</p> </picture> <h3 id="creating-a-site">Creating a site</h3> <p>This theme is for the content management system <a href="https://gohugo.io/">Hugo</a>, so that will be a pre-requirement. Make sure that you install the <code>extended</code> version of Hugo, as the theme uses SCSS for styling, as well as image optimization.</p> </article> <article> <h1>How to Add Custom Icons to the Adritian Theme</h1> <p>Fri, 28 Feb 2025 08:05:05 +0100</p> <h1 id="how-to-add-custom-icons-to-the-adritian-theme">How to Add Custom Icons to the Adritian Theme</h1> <div class="table-of-contents"> <h2 class="toc-heading">Table of Contents</h2> <div class="toc-content"> <nav id="TableOfContents"> <ul> <li><a href="#prerequisites">Prerequisites</a></li> <li><a href="#overview">Overview</a></li> <li><a href="#step-1-export-current-configuration">Step 1: Export Current Configuration</a></li> <li><a href="#step-2-import-configuration-to-fontello">Step 2: Import Configuration to Fontello</a></li> <li><a href="#step-3-add-new-icons">Step 3: Add New Icons</a></li> <li><a href="#step-4-download-updated-font">Step 4: Download Updated Font</a></li> <li><a href="#step-5-option-1-update-theme-files-manually">Step 5 (option 1): Update Theme Files Manually</a></li> <li><a href="#step-5-option-2-update-theme-files-with-npm-script">Step 5 (option 2): Update Theme Files with npm script</a></li> <li><a href="#step-6-using-the-new-icon">Step 6: Using the New Icon</a></li> <li><a href="#example-usage">Example Usage</a></li> <li><a href="#troubleshooting">Troubleshooting</a> <ul> <li><a href="#icons-not-displaying">Icons Not Displaying</a></li> <li><a href="#icons-show-as-squares">Icons Show as Squares</a></li> <li><a href="#build-errors">Build Errors</a></li> </ul> </li> <li><a href="#best-practices">Best Practices</a></li> <li><a href="#additional-resources">Additional Resources</a></li> </ul> </nav> </div> </div> <p>This guide will walk you through adding custom icons to your Adritian Hugo theme. Whether you need new social media icons, brand logos, or custom symbols, follow these steps to integrate them seamlessly.</p> </article> <article> <h1>Icons</h1> <p>Fri, 28 Feb 2025 08:05:05 +0100</p> <p>The theme has multiple icons available for use.</p> <p>You can see them rendered here:</p> <ul> <li> <a href="https://example.com" target="_blank" rel="noopener noreferrer" aria-label="threads" ><i class="icon-threads"></i> </a> <code>threads</code></li> <li> <a href="https://example.com" target="_blank" rel="noopener noreferrer" aria-label="bluesky" ><i class="icon-bluesky"></i> </a> <code>bluesky</code></li> <li> <a href="https://example.com" target="_blank" rel="noopener noreferrer" aria-label="x-twitter" ><i class="icon-x-twitter"></i> </a> <code>x-twitter</code></li> <li> <a href="https://example.com" target="_blank" rel="noopener noreferrer" aria-label="email" ><i class="icon-email"></i> </a> <code>email</code></li> <li> <a href="https://example.com" target="_blank" rel="noopener noreferrer" aria-label="user" ><i class="icon-user"></i> </a> <code>user</code></li> <li> <a href="https://example.com" target="_blank" rel="noopener noreferrer" aria-label="table-list" ><i class="icon-table-list"></i> </a> <code>table-list</code></li> <li> <a href="https://example.com" target="_blank" rel="noopener noreferrer" aria-label="download" ><i class="icon-download"></i> </a> <code>download</code></li> <li> <a href="https://example.com" target="_blank" rel="noopener noreferrer" aria-label="circle-info" ><i class="icon-circle-info"></i> </a> <code>circle-info</code></li> <li> <a href="https://example.com" target="_blank" rel="noopener noreferrer" aria-label="square-twitter" ><i class="icon-square-twitter"></i> </a> <code>square-twitter</code></li> <li> <a href="https://example.com" target="_blank" rel="noopener noreferrer" aria-label="square-facebook" ><i class="icon-square-facebook"></i> </a> <code>square-facebook</code></li> <li> <a href="https://example.com" target="_blank" rel="noopener noreferrer" aria-label="linkedin" ><i class="icon-linkedin"></i> </a> <code>linkedin</code></li> <li> <a href="https://example.com" target="_blank" rel="noopener noreferrer" aria-label="square-github" ><i class="icon-square-github"></i> </a> <code>square-github</code></li> <li> <a href="https://example.com" target="_blank" rel="noopener noreferrer" aria-label="circle-arrow-left" ><i class="icon-circle-arrow-left"></i> </a> <code>circle-arrow-left</code></li> <li> <a href="https://example.com" target="_blank" rel="noopener noreferrer" aria-label="circle-arrow-right" ><i class="icon-circle-arrow-right"></i> </a> <code>circle-arrow-right</code></li> <li> <a href="https://example.com" target="_blank" rel="noopener noreferrer" aria-label="circle-arrow-up" ><i class="icon-circle-arrow-up"></i> </a> <code>circle-arrow-up</code></li> <li> <a href="https://example.com" target="_blank" rel="noopener noreferrer" aria-label="circle-arrow-down" ><i class="icon-circle-arrow-down"></i> </a> <code>circle-arrow-down</code></li> <li> <a href="https://example.com" target="_blank" rel="noopener noreferrer" aria-label="quote-left" ><i class="icon-quote-left"></i> </a> <code>quote-left</code></li> <li> <a href="https://example.com" target="_blank" rel="noopener noreferrer" aria-label="face-smile" ><i class="icon-face-smile"></i> </a> <code>face-smile</code></li> <li> <a href="https://example.com" target="_blank" rel="noopener noreferrer" aria-label="square-arrow-up-right" ><i class="icon-square-arrow-up-right"></i> </a> <code>square-arrow-up-right</code></li> <li> <a href="https://example.com" target="_blank" rel="noopener noreferrer" aria-label="youtube" ><i class="icon-youtube"></i> </a> <code>youtube</code></li> <li> <a href="https://example.com" target="_blank" rel="noopener noreferrer" aria-label="square-xing" ><i class="icon-square-xing"></i> </a> <code>square-xing</code></li> <li> <a href="https://example.com" target="_blank" rel="noopener noreferrer" aria-label="instagram" ><i class="icon-instagram"></i> </a> <code>instagram</code></li> <li> <a href="https://example.com" target="_blank" rel="noopener noreferrer" aria-label="dribbble" ><i class="icon-dribbble"></i> </a> <code>dribbble</code></li> <li> <a href="https://example.com" target="_blank" rel="noopener noreferrer" aria-label="behance" ><i class="icon-behance"></i> </a> <code>behance</code></li> <li> <a href="https://example.com" target="_blank" rel="noopener noreferrer" aria-label="file-pdf" ><i class="icon-file-pdf"></i> </a> <code>file-pdf</code></li> <li> <a href="https://example.com" target="_blank" rel="noopener noreferrer" aria-label="codepen" ><i class="icon-codepen"></i> </a> <code>codepen</code></li> <li> <a href="https://example.com" target="_blank" rel="noopener noreferrer" aria-label="yelp" ><i class="icon-yelp"></i> </a> <code>yelp</code></li> <li> <a href="https://example.com" target="_blank" rel="noopener noreferrer" aria-label="cloud-arrow-down" ><i class="icon-cloud-arrow-down"></i> </a> <code>cloud-arrow-down</code></li> <li> <a href="https://example.com" target="_blank" rel="noopener noreferrer" aria-label="medium" ><i class="icon-medium"></i> </a> <code>medium</code></li> <li> <a href="https://example.com" target="_blank" rel="noopener noreferrer" aria-label="stack-overflow" ><i class="icon-stack-overflow"></i> </a> <code>stack-overflow</code></li> <li> <a href="https://example.com" target="_blank" rel="noopener noreferrer" aria-label="meetup" ><i class="icon-meetup"></i> </a> <code>meetup</code></li> <li> <a href="https://example.com" target="_blank" rel="noopener noreferrer" aria-label="tiktok" ><i class="icon-tiktok"></i> </a> <code>tiktok</code></li> </ul> <p>You can use them in several ways.</p> </article> <article> <h1>Showcase</h1> <p>Sun, 15 Mar 2026 00:00:00 +0000</p> <p>These are real websites built by the community using the Adritian Hugo theme.</p> <p><strong>Is your site missing?</strong> <a href="https://github.com/zetxek/adritian-free-hugo-theme/issues/new?template=showcase-submission.md">Submit it via GitHub</a> — we’d love to feature it here!</p> </article> <article> <h1>Search improvements: multilingual, reliable, and configurable</h1> <p>Thu, 01 Jan 2026 09:00:00 +0000</p> <p>The search functionality in the theme is powered by Fuse.js and runs entirely in the browser. This post explains how it works, how the search index is built, and how to customize it for multilingual and subdirectory deployments.</p> <h2 id="how-search-works">How search works</h2> <p>Search is client-side:</p> <ol> <li>Hugo generates a JSON index (<code>index.json</code>) that contains the title, plain content, tags, categories, and other metadata for each page.</li> <li>The search page loads <code>fuse.js</code> and downloads the JSON index.</li> <li>Fuse.js performs a fast in-browser search and renders the results.</li> </ol> <p>Because the index is a normal Hugo output, it follows your <code>baseURL</code> and language configuration automatically.</p> </article> <article> <h1>Responsive Images</h1> <p>Sat, 15 Mar 2025 10:00:00 +0000</p> <p>The Adritian theme includes a <code>responsive-image</code> shortcode that generates optimized <code><picture></code> elements with WebP conversion, multiple srcset widths, and lazy loading.</p> <h3 id="basic-usage">Basic usage</h3> <p>Place your images in the <code>assets/</code> directory and reference them with the shortcode:</p> </picture> <p>The shortcode above produces a <code><picture></code> element with:</p> <ul> <li><strong>WebP srcset</strong> at 400w, 800w, and 1200w (up to the original image width)</li> <li><strong>Original format srcset</strong> at the same widths</li> <li><strong>Lazy loading</strong> via <code>loading="lazy"</code> and <code>decoding="async"</code></li> <li><strong>CLS prevention</strong> via <code>width</code> and <code>height</code> attributes</li> </ul> <h3 id="custom-sizes-hint">Custom sizes hint</h3> <p>Use the <code>sizes</code> parameter to give the browser a layout hint for which srcset entry to pick:</p> </article> <article> <h1>Test Post - Images Array Format</h1> <p>Tue, 04 Mar 2025 10:00:00 +0000</p> <p>This is a test post to verify that the JSON-LD schema correctly extracts the first image from the <code>images</code> array format.</p> </article> <article> <h1>Test Post - No Image Fallback</h1> <p>Mon, 03 Mar 2025 10:00:00 +0000</p> <p>This is a test post with no image specified in frontmatter. The JSON-LD schema should fallback to the site-level image configured in hugo.toml.</p> </article> <article> <h1>Test Post - FeaturedImage Parameter</h1> <p>Sun, 02 Mar 2025 10:00:00 +0000</p> <p>This is a test post to verify that the JSON-LD schema correctly extracts the image from the <code>featuredImage</code> frontmatter parameter.</p> </article> <article> <h1>Test Post - YAML Image Format</h1> <p>Sat, 01 Mar 2025 10:00:00 +0000</p> <p>This is a test post to verify that the JSON-LD schema correctly extracts the image from the <code>images.featured_image</code> YAML frontmatter parameter.</p> </article> <article> <h1>New Theme Features Demo</h1> <p>Thu, 20 Feb 2025 10:00:00 +0000</p> <p>This post demonstrates the new features that have been added to the Adritian Hugo theme to make it more feature-complete and competitive with other popular Hugo themes.</p> <h2 id="overview-of-new-features">Overview of New Features</h2> <p>The Adritian theme now includes several enhancements that are commonly found in modern Hugo themes for personal websites and portfolios.</p> <h3 id="related-posts">Related Posts</h3> <p>At the end of each blog post, you’ll now see a section showing related posts based on shared tags and publish dates. This helps visitors discover more relevant content on your site.</p> </article> <article> <h1>Theme shortcodes</h1> <p>Fri, 14 Feb 2025 14:38:33 +0200</p> <p>Shortcodes are a convenient <a href="https://gohugo.io/content-management/shortcodes/">functionality of Hugo</a>, allowing you to embed templates or layouts within other content.</p> <p>Some of the example built-in shortcodes are Instagram posts, YouTube videos, QR codes, etc. You can find <a href="https://gohugo.io/content-management/shortcodes/#embedded">the full list in the official docs</a>.</p> <p>The theme provides custom shortcodes to allow you to customize your landing page as you want:</p> <ul> <li><code>toc</code>: Generates a styled table of contents from page headings.</li> <li><code>education-list</code>: Displays a list of educational qualifications.</li> <li><code>experience-list</code>: Shows a list of professional experiences.</li> <li><code>platform-links</code>: Embeds links to various platforms with icons.</li> <li><code>newsletter-section</code>: Adds a section for newsletter subscription.</li> <li><code>link</code>: Creates a hyperlink with an icon.</li> <li><code>experience-section</code>: Inserts a detailed experience section.</li> <li><code>contact-section</code>: Adds a contact information section, with a customizable form and information.</li> <li><code>client-and-work-section</code>: Displays a section for clients and work.</li> <li><code>about-section</code>: About section, with image, buttons for call to action and image.</li> <li><code>testimonial-section</code>: Adds references from customers, colleagues, etc.</li> <li><code>showcase</code>: two-column block with a full-width image to the left, and a text snippet to the right. Great for a call to action or introduction of the person (assuming it’s a personal website).</li> <li><code>text-section</code>: utility shortcode used to render text in some parts of the theme where it would otherwise be full-width, appearing “too floaty”. See <a href="https://github.com/zetxek/adritian-free-hugo-theme/issues/260">the github issue #260 for context</a>.</li> <li><code>spacer</code>: Adds vertical spacing before the next element.</li> <li><code>responsive-image</code>: Renders a responsive <code><picture></code> element with WebP srcset and lazy loading.</li> </ul> <p>The shortcodes can be customized with different arguments:</p> </article> <article> <h1>Other installation methods</h1> <p>Tue, 11 Feb 2025 14:38:33 +0200</p> <p>This is a guide that extends the default instructions offered in <a href="https://github.com/zetxek/adritian-free-hugo-theme/blob/main/README.md">the theme readme</a>.</p> <h3 id="manual-configuration">Manual configuration</h3> <p>If you prefer to manually set your site, you need to replace the contents of your config file (<code>hugo.toml</code>) file by these:</p> <details> <summary>hugo.toml configuration</summary> <div class="highlight-wrapper"> <button class="copy-code-btn" type="button" aria-label="Copy code to clipboard"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect> <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path> </svg> <span class="copy-text">Copy</span> </button><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">baseURL = "<your website url>" </span></span><span class="line"><span class="cl">languageCode = "en" </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl">[module] </span></span><span class="line"><span class="cl">[module.hugoVersion] </span></span><span class="line"><span class="cl"># We use hugo.Deps to list dependencies, which was added in Hugo 0.92.0 </span></span><span class="line"><span class="cl">min = "0.92.0" </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl">[[module.imports]] </span></span><span class="line"><span class="cl">path="github.com/zetxek/adritian-free-hugo-theme" </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl">## Base mounts - so your site's assets are available </span></span><span class="line"><span class="cl"> [[module.mounts]] </span></span><span class="line"><span class="cl"> source = "archetypes" </span></span><span class="line"><span class="cl"> target = "archetypes" </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> [[module.mounts]] </span></span><span class="line"><span class="cl"> source = "assets" </span></span><span class="line"><span class="cl"> target = "assets" </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> [[module.mounts]] </span></span><span class="line"><span class="cl"> source = "i18n" </span></span><span class="line"><span class="cl"> target = "i18n" </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> [[module.mounts]] </span></span><span class="line"><span class="cl"> source = "layouts" </span></span><span class="line"><span class="cl"> target = "layouts" </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> [[module.mounts]] </span></span><span class="line"><span class="cl"> source = "static" </span></span><span class="line"><span class="cl"> target = "static" </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"># The following mounts are required for the theme to be able to load bootstrap </span></span><span class="line"><span class="cl"># Remember also to copy the theme's `package.json` to your site, and run `npm install` </span></span><span class="line"><span class="cl">[[module.mounts]] </span></span><span class="line"><span class="cl"> source = "node_modules/bootstrap/scss" </span></span><span class="line"><span class="cl"> target = "assets/scss/bootstrap" </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl">[[module.mounts]] </span></span><span class="line"><span class="cl"> source = "node_modules/bootstrap/dist/js" </span></span><span class="line"><span class="cl"> target = "assets/js/bootstrap" </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl">[[module.mounts]] </span></span><span class="line"><span class="cl"> source = "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js" </span></span><span class="line"><span class="cl"> target = "assets/js/vendor/bootstrap.bundle.min.js" </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl">## Optional, if you want print improvements (to PDF/printed) </span></span><span class="line"><span class="cl">[[module.mounts]] </span></span><span class="line"><span class="cl">source = "node_modules/bootstrap-print-css/css/bootstrap-print.css" </span></span><span class="line"><span class="cl">target = "assets/css/bootstrap-print.css" </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl">[params] </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> title = 'Your website title' </span></span><span class="line"><span class="cl"> description = 'Your website description' </span></span><span class="line"><span class="cl"> sections = ["showcase", "about", "education", "experience", "client-and-work", "testimonial", "contact", "newsletter"] </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> # If you want to display an image logo in the header, you can add it here </span></span><span class="line"><span class="cl"> # logo = '/img/hugo.svg' </span></span><span class="line"><span class="cl"> homepageExperienceCount = 6 </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> [params.analytics] </span></span><span class="line"><span class="cl"> ## Analytics parameters. </span></span><span class="line"><span class="cl"> ### Supported so far: Vercel (Page Insights, Analytics) </span></span><span class="line"><span class="cl"> ### And Google (Tag Manager, Analytics) </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> # controls vercel page insights - disabled by default </span></span><span class="line"><span class="cl"> # to enable, just set to true </span></span><span class="line"><span class="cl"> vercelPageInsights = false </span></span><span class="line"><span class="cl"> vercelAnalytics = false </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> # google analytics and tag manager. to enable, set "enabled" to true </span></span><span class="line"><span class="cl"> # and add the tracking code (UA-something for analytics, GTM-something for tag manager) </span></span><span class="line"><span class="cl"> [params.analytics.googleAnalytics] </span></span><span class="line"><span class="cl"> code = "UA-XXXXX-Y" </span></span><span class="line"><span class="cl"> enabled = false </span></span><span class="line"><span class="cl"> [params.analytics.googleTagManager] </span></span><span class="line"><span class="cl"> code = "GTM-XXXXX" </span></span><span class="line"><span class="cl"> enabled = false </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl">[build] </span></span><span class="line"><span class="cl"> [build.buildStats] </span></span><span class="line"><span class="cl"> disableClasses = false </span></span><span class="line"><span class="cl"> disableIDs = false </span></span><span class="line"><span class="cl"> disableTags = false </span></span><span class="line"><span class="cl"> enable = true </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl">[params.languages.selector.disable] </span></span><span class="line"><span class="cl"> footer = false </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl">[languages] </span></span><span class="line"><span class="cl"> [languages.en] </span></span><span class="line"><span class="cl"> disabled = false </span></span><span class="line"><span class="cl"> languageCode = 'en' </span></span><span class="line"><span class="cl"> languageDirection = 'ltr' </span></span><span class="line"><span class="cl"> languageName = 'English' </span></span><span class="line"><span class="cl"> title = '' </span></span><span class="line"><span class="cl"> weight = 0 </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> [languages.en.menus] </span></span><span class="line"><span class="cl"> [[languages.en.menus.header]] </span></span><span class="line"><span class="cl"> name = 'About' </span></span><span class="line"><span class="cl"> URL = '#about' </span></span><span class="line"><span class="cl"> weight = 2 </span></span><span class="line"><span class="cl"> [[languages.en.menus.header]] </span></span><span class="line"><span class="cl"> name = 'Portfolio' </span></span><span class="line"><span class="cl"> URL = '#portfolio' </span></span><span class="line"><span class="cl"> weight = 3 </span></span><span class="line"><span class="cl"> # [[languages.en.menus.header]] </span></span><span class="line"><span class="cl"> # name = "Experience" </span></span><span class="line"><span class="cl"> # URL = "#experience" </span></span><span class="line"><span class="cl"> # weight = 4 </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> [[languages.en.menus.header]] </span></span><span class="line"><span class="cl"> name = "Blog" </span></span><span class="line"><span class="cl"> URL = "/blog" </span></span><span class="line"><span class="cl"> weight = 5 </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> [[languages.en.menus.header]] </span></span><span class="line"><span class="cl"> name = "Contact" </span></span><span class="line"><span class="cl"> URL = "#contact" </span></span><span class="line"><span class="cl"> weight = 6 </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> [[languages.en.menus.footer]] </span></span><span class="line"><span class="cl"> name = "About" </span></span><span class="line"><span class="cl"> URL = "#about" </span></span><span class="line"><span class="cl"> weight = 2 </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> [[languages.en.menus.footer]] </span></span><span class="line"><span class="cl"> name = "Portfolio" </span></span><span class="line"><span class="cl"> URL = "#portfolio" </span></span><span class="line"><span class="cl"> weight = 3 </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> [[languages.en.menus.footer]] </span></span><span class="line"><span class="cl"> name = "Contact" </span></span><span class="line"><span class="cl"> URL = "#contact" </span></span><span class="line"><span class="cl"> weight = 4 </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> [languages.es] </span></span><span class="line"><span class="cl"> disabled = false </span></span><span class="line"><span class="cl"> languageCode = 'es' </span></span><span class="line"><span class="cl"> languageDirection = 'ltr' </span></span><span class="line"><span class="cl"> languageName = 'Español' </span></span><span class="line"><span class="cl"> title = '' </span></span><span class="line"><span class="cl"> weight = 0 </span></span><span class="line"><span class="cl"> [[languages.es.menus.header]] </span></span><span class="line"><span class="cl"> name = 'Sobre mi' </span></span><span class="line"><span class="cl"> URL = '/es/#about' </span></span><span class="line"><span class="cl"> weight = 2 </span></span><span class="line"><span class="cl"> [[languages.es.menus.header]] </span></span><span class="line"><span class="cl"> name = 'Portfolio' </span></span><span class="line"><span class="cl"> URL = '/es/#portfolio' </span></span><span class="line"><span class="cl"> weight = 3 </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> # [[languages.es.menus.header]] </span></span><span class="line"><span class="cl"> # name = "Experiencia" </span></span><span class="line"><span class="cl"> # URL = "/es/#experience" </span></span><span class="line"><span class="cl"> # weight = 4 </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> [[languages.es.menus.header]] </span></span><span class="line"><span class="cl"> name = "Blog" </span></span><span class="line"><span class="cl"> URL = "/es/blog" </span></span><span class="line"><span class="cl"> weight = 5 </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> [[languages.es.menus.header]] </span></span><span class="line"><span class="cl"> name = "Contacto" </span></span><span class="line"><span class="cl"> URL = "/es/#contact" </span></span><span class="line"><span class="cl"> weight = 6 </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> [[languages.es.menus.footer]] </span></span><span class="line"><span class="cl"> name = "Sobre mi" </span></span><span class="line"><span class="cl"> URL = "/es/#about" </span></span><span class="line"><span class="cl"> weight = 2 </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> [[languages.es.menus.footer]] </span></span><span class="line"><span class="cl"> name = "Portfolio" </span></span><span class="line"><span class="cl"> URL = "/es/#portfolio" </span></span><span class="line"><span class="cl"> weight = 3 </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> [[languages.es.menus.footer]] </span></span><span class="line"><span class="cl"> name = "Contact" </span></span><span class="line"><span class="cl"> URL = "/es/#contact" </span></span><span class="line"><span class="cl"> weight = 4 </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> [languages.fr] </span></span><span class="line"><span class="cl"> disabled = false </span></span><span class="line"><span class="cl"> languageCode = 'fr' </span></span><span class="line"><span class="cl"> languageDirection = 'ltr' </span></span><span class="line"><span class="cl"> languageName = 'Français' </span></span><span class="line"><span class="cl"> title = '' </span></span><span class="line"><span class="cl"> weight = 0 </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> [languages.fr.menus] </span></span><span class="line"><span class="cl"> [[languages.fr.menus.header]] </span></span><span class="line"><span class="cl"> name = 'About' </span></span><span class="line"><span class="cl"> URL = '#about' </span></span><span class="line"><span class="cl"> weight = 2 </span></span><span class="line"><span class="cl"> [[languages.fr.menus.header]] </span></span><span class="line"><span class="cl"> name = 'Portfolio' </span></span><span class="line"><span class="cl"> URL = '#portfolio' </span></span><span class="line"><span class="cl"> weight = 3 </span></span><span class="line"><span class="cl"> # [[languages.fr.menus.header]] </span></span><span class="line"><span class="cl"> # name = "Experience" </span></span><span class="line"><span class="cl"> # URL = "#experience" </span></span><span class="line"><span class="cl"> # weight = 4 </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> [[languages.fr.menus.header]] </span></span><span class="line"><span class="cl"> name = "Blog" </span></span><span class="line"><span class="cl"> URL = "/blog" </span></span><span class="line"><span class="cl"> weight = 5 </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> [[languages.fr.menus.header]] </span></span><span class="line"><span class="cl"> name = "Contact" </span></span><span class="line"><span class="cl"> URL = "#contact" </span></span><span class="line"><span class="cl"> weight = 6 </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> [[languages.fr.menus.footer]] </span></span><span class="line"><span class="cl"> name = "About" </span></span><span class="line"><span class="cl"> URL = "#about" </span></span><span class="line"><span class="cl"> weight = 2 </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> [[languages.fr.menus.footer]] </span></span><span class="line"><span class="cl"> name = "Portfolio" </span></span><span class="line"><span class="cl"> URL = "#portfolio" </span></span><span class="line"><span class="cl"> weight = 3 </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> [[languages.fr.menus.footer]] </span></span><span class="line"><span class="cl"> name = "Contact" </span></span><span class="line"><span class="cl"> URL = "#contact" </span></span><span class="line"><span class="cl"> weight = 4 </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"># Plugins </span></span><span class="line"><span class="cl">[params.plugins] </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> # CSS Plugins </span></span><span class="line"><span class="cl"> [[params.plugins.css]] </span></span><span class="line"><span class="cl"> URL = "css/custom.css" </span></span><span class="line"><span class="cl"> [[params.plugins.css]] </span></span><span class="line"><span class="cl"> URL = "css/adritian-icons.css" </span></span><span class="line"><span class="cl"> ## Optional, if you want print improvements (to PDF/printed) </span></span><span class="line"><span class="cl"> [[params.plugins.css]] </span></span><span class="line"><span class="cl"> URL = "css/bootstrap-print.css" </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> # JS Plugins </span></span><span class="line"><span class="cl"> [[params.plugins.js]] </span></span><span class="line"><span class="cl"> URL = "js/rad-animations.js" </span></span><span class="line"><span class="cl"> [[params.plugins.js]] </span></span><span class="line"><span class="cl"> URL = "js/sticky-header.js" </span></span><span class="line"><span class="cl"> [[params.plugins.js]] </span></span><span class="line"><span class="cl"> URL = "js/library/fontfaceobserver.js" </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> # SCSS Plugins </span></span><span class="line"><span class="cl"> [[params.plugins.scss]] </span></span><span class="line"><span class="cl"> URL = "scss/adritian.scss" </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"># theme/color style </span></span><span class="line"><span class="cl">[params.colorTheme] </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl">## the following configuration would disable automatic theme selection </span></span><span class="line"><span class="cl"># [params.colorTheme.auto] </span></span><span class="line"><span class="cl"># disable = true </span></span><span class="line"><span class="cl"># [params.colorTheme.forced] </span></span><span class="line"><span class="cl"># theme = "dark" </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl">## the following parameter will disable theme override in the footer </span></span><span class="line"><span class="cl"># [params.colorTheme.selector.disable] </span></span><span class="line"><span class="cl"># footer = true </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl">## by default we allow override AND automatic selection </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl">[params.blog] </span></span><span class="line"><span class="cl">layout = "default" # options: default, sidebar </span></span><span class="line"><span class="cl">sidebarWidth = "25" # percentage width of the sidebar </span></span><span class="line"><span class="cl">showCategories = true </span></span><span class="line"><span class="cl">showRecentPosts = true </span></span><span class="line"><span class="cl">recentPostCount = 5 </span></span><span class="line"><span class="cl">listStyle = "summary" # options: simple, summary</span></span></code></pre></div></div> <ol> <li>Get the module: <code>hugo mod get -u</code></li> <li>Execute <code>hugo mod npm pack</code> - this will generate a <code>package.json</code> file in the root folder of your site, with the dependencies for the theme.</li> <li>Execute <code>npm install</code> - this will install the dependencies for the theme (including bootstrap)</li> <li>(Optional, to override the defaults) Create a file <code>data/homepage.yml</code> with the contents of the <a href="https://github.com/zetxek/adritian-free-hugo-theme/blob/main/exampleSite/data/homepage.yml"><code>exampleSite/data/homepage.yml</code></a> file, and customize to your needs (<strong>note: this file is not included in your theme if you use hugo modules, download it manually from the repository</strong>)</li> </ol> </details> <h3 id="traditional-installation-as-git-submodule">Traditional Installation (as git submodule)</h3> <p>If you prefer not to use Hugo Modules, you can still install the theme as a git submodule. The guide is very similar to <a href="https://gohugo.io/getting-started/quick-start/#create-a-site">official “Quick Start”</a>, just changing the theme URL in the <code>git submodule add</code> command:</p> </article> <article> <h1>Pagination Test Post 8</h1> <p>Wed, 08 Jan 2025 10:00:00 +0000</p> <p>This is a test post to verify pagination functionality on tag pages.</p> </article> <article> <h1>Pagination Test Post 7</h1> <p>Tue, 07 Jan 2025 10:00:00 +0000</p> <p>This is a test post to verify pagination functionality on tag pages.</p> </article> <article> <h1>Pagination Test Post 6</h1> <p>Mon, 06 Jan 2025 10:00:00 +0000</p> <p>This is a test post to verify pagination functionality on tag pages.</p> </article> <article> <h1>Pagination Test Post 5</h1> <p>Sun, 05 Jan 2025 10:00:00 +0000</p> <p>This is a test post to verify pagination functionality on tag pages.</p> </article> <article> <h1>Pagination Test Post 4</h1> <p>Sat, 04 Jan 2025 10:00:00 +0000</p> <p>This is a test post to verify pagination functionality on tag pages.</p> </article> <article> <h1>Pagination Test Post 3</h1> <p>Fri, 03 Jan 2025 10:00:00 +0000</p> <p>This is a test post to verify pagination functionality on tag pages.</p> </article> <article> <h1>Pagination Test Post 2</h1> <p>Thu, 02 Jan 2025 10:00:00 +0000</p> <p>This is a test post to verify pagination functionality on tag pages.</p> </article> <article> <h1>Pagination Test Post 1</h1> <p>Wed, 01 Jan 2025 10:00:00 +0000</p> <p>This is a test post to verify pagination functionality on tag pages.</p> </article> <article> <h1>Job #3</h1> <p>Sun, 01 Dec 2024 00:00:00 +0100</p> <h2 id="3rd-job-cio">3rd job: CIO</h2> <p>As Chief Information Officer at Internet Affairs Inc., I lead the strategic transformation of our digital infrastructure and cybersecurity initiatives. My team of 150+ IT professionals works tirelessly to protect and optimize our global network spanning 23 countries.</p> <p>During my tenure, I’ve spearheaded the implementation of a revolutionary blockchain-based verification system that reduced fraudulent transactions by 87% while improving processing speeds by 300%. This initiative saved the company $12M annually and earned us the prestigious “Digital Innovation Award 2024”.</p> </article> <article> <h1>Graziella Nutella</h1> <p>Mon, 25 Nov 2024 21:53:18 +0100</p> <p>The content of this section comes from the <code>content/testimonial</code> folder contents. This that you see is in <code>content/testimonial/graziella-nutella.md</code>.</p> <p>You can also use parameters for configuration:</p> <div class="highlight-wrapper"> <button class="copy-code-btn" type="button" aria-label="Copy code to clipboard"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect> <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path> </svg> <span class="copy-text">Copy</span> </button><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">name: "Nutting Hill" # place/city/country for the experience. Fill-in. </span></span><span class="line"><span class="cl">position: "Nutcracker" # from-to, for example "2022-2024". Fill-in. </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl">params: </span></span><span class="line"><span class="cl"> image: </span></span><span class="line"><span class="cl"> src: "images/testimonials/testimonial1.png" # example: "images/clients/asgardia.png" </span></span><span class="line"><span class="cl"> scale: 0.5</span></span></code></pre></div></div> </article> <article> <h1>Dana Oneal</h1> <p>Mon, 25 Nov 2024 21:50:45 +0100</p> <p>I had the pleasure of working with this freelancer on several projects, and their performance has been nothing short of outstanding. They bring a high level of expertise, creativity, and dedication to every task. Their ability to understand project requirements and deliver exceptional results on time is truly impressive. They are a reliable and proactive professional who consistently exceeds expectations. I highly recommend this freelancer to anyone seeking top-notch skills and a collaborative partner.</p> </article> <article> <h1>Ferdinand Shermand</h1> <p>Mon, 25 Nov 2024 21:30:46 +0100</p> <p>Working with this colleague has been an absolute pleasure. Their dedication, professionalism, and positive attitude make them an invaluable asset to our team. They consistently go above and beyond to ensure that projects are completed on time and to the highest standard. Their ability to collaborate effectively and support their colleagues is truly commendable. I am continually impressed by their innovative thinking and problem-solving skills. This colleague is not just a team member but a true inspiration and a driving force behind our team’s success.</p> </article> <article> <h1>Ztos</h1> <p>Sun, 25 Aug 2024 10:23:39 +0200</p> </article> <article> <h1>Zoo</h1> <p>Sun, 25 Aug 2024 10:23:08 +0200</p> </article> <article> <h1>Kanba</h1> <p>Sun, 25 Aug 2024 10:22:34 +0200</p> </article> <article> <h1>Goldline</h1> <p>Sun, 25 Aug 2024 10:21:48 +0200</p> </article> <article> <h1>Earth 2.0</h1> <p>Sun, 25 Aug 2024 10:17:12 +0200</p> </article> <article> <h1>Asgardia</h1> <p>Sun, 25 Aug 2024 09:53:42 +0200</p> </article> <article> <h1>High School of Hard Knocks</h1> <p>Sun, 25 Aug 2024 09:53:42 +0200</p> </article> <article> <h1>Radity Finance - UI Kit</h1> <p>Sun, 25 Aug 2024 09:53:42 +0200</p> <p>We have been receiving a lot of requests for a Finance Kit recently due to the popularity of Fintech.</p> </article> <article> <h1>Robo Advisor</h1> <p>Sun, 25 Aug 2024 09:53:42 +0200</p> <p>Robo Advisor is a Swiss Wealth Manager and wants to create the best digital experience for its UNHW clients across the world. We started with a whiteboard.</p> </article> <article> <h1>Swiss Fintech Website</h1> <p>Sun, 25 Aug 2024 09:53:42 +0200</p> <p>Here you can add additional context, description, links, etc. The content you see here comes from the contents of the <code>content/projects</code> folder.</p> <p>This project is in the file <code>projects/swiss-fintech.md</code>.</p> <p>In the markdown file frontmatter you can also define additional parameters, such as the link:</p> <div class="highlight-wrapper"> <button class="copy-code-btn" type="button" aria-label="Copy code to clipboard"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect> <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path> </svg> <span class="copy-text">Copy</span> </button><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">link: "https://www.adrianmoreno.info" # optional URL to link the logo to </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl">params: </span></span><span class="line"><span class="cl"> button: </span></span><span class="line"><span class="cl"> icon: "icon-arrow-right" </span></span><span class="line"><span class="cl"> btnText: "Case Study" </span></span><span class="line"><span class="cl"> URL: "https://www.adrianmoreno.info" </span></span><span class="line"><span class="cl"> image: </span></span><span class="line"><span class="cl"> src: "images/works/swissfintech.jpg" </span></span><span class="line"><span class="cl"> scale: 0.5 </span></span><span class="line"><span class="cl"> </span></span></code></pre></div></div> </article> <article> <h1>University of Life</h1> <p>Sun, 25 Aug 2024 09:53:42 +0200</p> </article> <article> <h1>Sample content: featured image</h1> <p>Mon, 24 Jun 2024 14:38:33 +0200</p> <p>Sample blog content. Like a lorem ipsum but saying something more interesting.</p> <p></p> <p>Welcome to the world of “Content Ipsum,” the fresh alternative to the classic lorem ipsum. It’s the perfect blend for designers and writers who crave a dash of creativity and meaning in their placeholder text. Imagine a text that not only fills the space but also sparks the imagination, a text that weaves tales of innovation, inspiration, and the endless possibilities that creativity brings.</p> </article> <article> <h1>Sample content: formatting styles</h1> <p>Fri, 21 Jun 2024 14:38:33 +0200</p> <p>Sample blog content. Like a lorem ipsum but saying something more interesting.</p> <p>We will show some content that is supported:</p> <h2 id="basic-syntax">Basic Syntax</h2> <h3 id="headings">Headings</h3> <div class="highlight-wrapper"> <button class="copy-code-btn" type="button" aria-label="Copy code to clipboard"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect> <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path> </svg> <span class="copy-text">Copy</span> </button><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl"># Heading 1 </span></span><span class="line"><span class="cl">## Heading 2 </span></span><span class="line"><span class="cl">### Heading 3 </span></span><span class="line"><span class="cl">#### Heading 4 </span></span><span class="line"><span class="cl">##### Heading 5 </span></span><span class="line"><span class="cl">###### Heading 6</span></span></code></pre></div></div> <h2 id="heading-2">Heading 2</h2> <h3 id="heading-3">Heading 3</h3> <h4 id="heading-4">Heading 4</h4> <h5 id="heading-5">Heading 5</h5> <h6 id="heading-6">Heading 6</h6> <h3 id="emphasis">Emphasis</h3> <div class="highlight-wrapper"> <button class="copy-code-btn" type="button" aria-label="Copy code to clipboard"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect> <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path> </svg> <span class="copy-text">Copy</span> </button><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">*This text will be italic* </span></span><span class="line"><span class="cl">_This will also be italic_ </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl">**This text will be bold** </span></span><span class="line"><span class="cl">__This will also be bold__ </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl">_You **can** combine them_</span></span></code></pre></div></div> <p><em>This text will be italic</em></p> </article> <article> <h1>Breaking News</h1> <p>Thu, 25 Jan 2024 16:45:00 +0000</p> <p>This is breaking news content demonstrating how different sections can contain different types of content while using the same underlying Hugo section functionality.</p> <h2 id="news-section-benefits">News Section Benefits</h2> <ul> <li><strong>Separate URL space</strong>: <code>/news/</code> vs <code>/articles/</code></li> <li><strong>Different content structure</strong>: News vs long-form articles</li> <li><strong>Independent RSS feeds</strong>: <code>/news/index.xml</code></li> <li><strong>Custom styling</strong>: Different templates if needed</li> </ul> <p>This allows for clear content separation while maintaining consistency in the overall site structure.</p> </article> <article> <h1>Advanced Hugo Sections</h1> <p>Sat, 20 Jan 2024 14:30:00 +0000</p> <p>This is the second article, demonstrating how multiple articles appear in the same section.</p> <h2 id="advanced-section-features">Advanced Section Features</h2> <p>Hugo sections provide powerful features for content organization:</p> <h3 id="custom-section-templates">Custom Section Templates</h3> <p>You can create custom templates for each section by placing them in <code>layouts/SECTION/</code>:</p> <ul> <li><code>layouts/articles/list.html</code> - for <code>/articles/</code> page</li> <li><code>layouts/articles/single.html</code> - for individual articles</li> </ul> <h3 id="section-variables">Section Variables</h3> <p>In templates, you can access section-specific data:</p> <div class="highlight-wrapper"> <button class="copy-code-btn" type="button" aria-label="Copy code to clipboard"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect> <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path> </svg> <span class="copy-text">Copy</span> </button><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="w"> </span><span class="p">.</span><span class="nx">Section</span><span class="w"> </span><span class="p">}}</span><span class="w"> </span><span class="c1">// "articles"</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="w"> </span><span class="p">.</span><span class="nx">Type</span><span class="w"> </span><span class="p">}}</span><span class="w"> </span><span class="c1">// content type</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="w"> </span><span class="p">.</span><span class="nx">Pages</span><span class="w"> </span><span class="p">}}</span><span class="w"> </span><span class="c1">// all pages in section</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="w"> </span><span class="p">.</span><span class="nx">RegularPages</span><span class="w"> </span><span class="p">}}</span><span class="w"> </span><span class="c1">// only regular pages</span></span></span></code></pre></div></div> <h3 id="taxonomies-per-section">Taxonomies per Section</h3> <p>Each section can have its own taxonomies (tags, categories) with independent organization.</p> </article> <article> <h1>First Article</h1> <p>Mon, 15 Jan 2024 10:00:00 +0000</p> <p>This is the first article content. Hugo sections allow you to organize content into logical groups, and each section gets its own URL path.</p> <h2 id="what-are-hugo-sections">What are Hugo Sections?</h2> <p>Hugo sections are a way to organize your content into logical groups. When you create a folder under <code>content/</code>, Hugo automatically treats it as a section.</p> <h2 id="benefits-of-using-sections">Benefits of Using Sections</h2> <ul> <li><strong>Organization</strong>: Keep related content together</li> <li><strong>URLs</strong>: Automatic URL structure (<code>/articles/</code>, <code>/news/</code>, etc.)</li> <li><strong>Templates</strong>: Custom layouts for different content types</li> <li><strong>RSS</strong>: Each section gets its own RSS feed</li> </ul> <h2 id="example-structure">Example Structure</h2> <div class="highlight-wrapper"> <button class="copy-code-btn" type="button" aria-label="Copy code to clipboard"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect> <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path> </svg> <span class="copy-text">Copy</span> </button><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">content/ </span></span><span class="line"><span class="cl">├── articles/ </span></span><span class="line"><span class="cl">│ ├── _index.md </span></span><span class="line"><span class="cl">│ ├── first-article.md </span></span><span class="line"><span class="cl">│ └── second-article.md </span></span><span class="line"><span class="cl">└── news/ </span></span><span class="line"><span class="cl"> ├── _index.md </span></span><span class="line"><span class="cl"> └── breaking-news.md</span></span></code></pre></div></div> <p>This creates accessible URLs like:</p> </article> <article> <h1>Trabajo #3</h1> <p>Mon, 01 Jan 2024 00:00:00 +0100</p> <h2 id="arreglando-el-mundo-un-byte-a-la-vez">Arreglando el mundo, un byte a la vez</h2> <p>¡Adquisición hostil - ¿quién es el jefe ahora?!</p> </article> <article> <h1>Job #2</h1> <p>Fri, 01 Dec 2023 00:00:00 +0100</p> <h2 id="2nd-job-chief-intern">2nd job: Chief Intern</h2> <p>As Chief Intern at Internet Affairs Inc., I led several key initiatives that helped streamline our internal processes and boost productivity. Working closely with cross-functional teams, I developed and implemented an automated documentation system that reduced report generation time by 65% and improved accuracy by 40%.</p> <p>During my internship, I spearheaded the company’s first-ever “Innovation Lab” program, where I mentored junior interns and coordinated weekly brainstorming sessions. This initiative resulted in three patent-pending solutions and garnered attention from senior management. The program has since been adopted as a permanent fixture in the company’s internship structure.</p> </article> <article> <h1>Hugo Basics Part 2</h1> <p>Tue, 17 Jan 2023 00:00:00 +0000</p> <p>In part two, we will explore layouts, templates, and how to customize your Hugo site.</p> </article> <article> <h1>Hugo Basics Part 1</h1> <p>Tue, 10 Jan 2023 00:00:00 +0000</p> <p>Welcome to the first installment of Hugo Basics. We’ll cover project setup and your first content file.</p> </article> <article> <h1>Job #1</h1> <p>Thu, 01 Dec 2022 00:00:00 +0100</p> <h2 id="1st-job-junior-intern">1st job: Junior Intern</h2> <p>The beginning of a great career. As a Junior Intern at Internet Affairs Inc., I had the opportunity to work on various projects that helped me develop my technical and professional skills. Working alongside experienced developers, I contributed to the company’s core web applications and learned industry best practices in software development.</p> <p>During my internship, I took the initiative to create an internal documentation wiki that improved knowledge sharing across teams. This project taught me valuable lessons in technical writing and collaboration. I also participated in code reviews and daily stand-ups, gaining firsthand experience in agile development methodologies.</p> </article> <article> <h1>Buscar</h1> <p>Mon, 01 Jan 0001 00:00:00 +0000</p> search </article> <article> <h1>Footer</h1> <p>Mon, 01 Jan 0001 00:00:00 +0000</p> <section id="contact" class="section section--contact pt-0"> <div class="container"> <div class="contact w-100"> <h2>Reach out</h2> <div class="row pt-2"> <div class="col-12 col-lg-7"> <form action="https://formspree.io/f/mail@example.com" method="POST" class="contact__form"> <div class="row"> <div class="col-12 col-sm-6"> <input type="text" name="full_name" class="form-control" placeholder="Your name"> </div> <div class="col-12 col-sm-6"> <input type="email" name="email" class="form-control" placeholder="Your e-mail"> </div> </div> <div class="row pt-4"> <div class="col-12"> <input type="tel" name="phone" class="form-control" placeholder="Your phone"> </div> </div> <div class="row pt-4"> <div class="col-12"> <textarea name="message" class="form-control" rows="3" placeholder="Your text"></textarea> </div> </div> <div class="row pt-4"> <div class="col-12"> <button type="submit" class="btn btn-primary">Send message</button> </div> </div> </form> </div> <div class="col-12 col-lg-5 contact__info"> <h3>My phone</h3> <span><a href='tel:+555666777'>555 666 777</a></span> <h3>My mail</h3> <span><a href='mailto:demo@demosite.com'>demo@demosite.com</a></span> <h3>My location</h3> <span>🇩🇰 Denmark</span> </div> </div> </div> </div> </section> <section id="newsletter" class="section section--cta"> <div class="container d-flex justify-content-center align-items-center"> <div class="row"> <div class="col-12 text-center"> <h2> Stay updated </h2> <div class="rad-subscription-group"> <form id="rad-subscription" action="https://adritian-demo-gax83wpqd-adrianmoreno.vercel.app/" method="POST" > <input id="rad-subscription-email" type="email" class="form-control" aria-describedby="emailHelp" placeholder=' Enter your email ' aria-label=' Enter your email ' > <button type="submit" id="rad-subscription-submit" class="btn btn-light btn-rounded"> Subscribe </button> </form> <div id="rad-subscription-success" class="d-none"> <p class="lead"> Thank you for subscribing! </p> </div> <div id="rad-subscription-fail" class="d-none"> <p> Something went wrong, please try again. </p> </div> <script src='https://adritian-demo-gax83wpqd-adrianmoreno.vercel.app/js/subscription.js'></script> </div> <small id="emailHelp" class="form-text text-muted"> We respect your privacy and won't share your data. </small> </div> </div> </div> </section> <section class="section section--border-bottom rad-animation-group section--padding"> <div class="container d-flex justify-content-center align-items-center"> <div class="row rad-fade-down"> <div class="col-12 text-center"> <h2 class="section__title">Extra footer content</h2> <div class="text-section__content"> <p>Additional content added after the <code>section</code> blocks.</p> </article> <article> <h1>Home</h1> <p>Mon, 01 Jan 0001 00:00:00 +0000</p> <section id="showcase" class="rad-showcase rad-showcase--index rad-animation-group rad-fade-down"> <div> <div class="showcase-section row flex-column-reverse flex-md-row rad-fade-down rad-waiting rad-animate"> <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6"> <h1 class="display-1"> Showcase section </h1> <h2 class="display-5"> <span>Subtitle - coming from <code>home.md</code></span> </h2> <div class="lead"> <strong>Strong</strong>, <em>italic</em> and normal text. This comes from <a href='https://github.com/zetxek/adritian-demo/blob/main/content/home/home.md?plain=1'><code>home.md</code></a>, using the <code>showcase-section</code> <a href=''>shortcode</a>.<br/>Below you can see the social links, provided by the <code>platform-links</code> shortcode. </div> </div> <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6 profile-image"> </picture> </div> <div class="col-12 inner-content"> <div class="container"> <div class="row platform-links shortcode"> <div class="col-12"> <a href="https://facebook.com/yourpage" target="_blank" rel="noopener noreferrer" aria-label="square-facebook" ><i class="icon-square-facebook"></i> </a> <a href="https://twitter.com/yourpage" target="_blank" rel="noopener noreferrer" aria-label="square-twitter" ><i class="icon-square-twitter"></i> </a> <a href="https://www.linkedin.com/in/adrianmoreno/" target="_blank" rel="noopener noreferrer" aria-label="linkedin" ><i class="icon-linkedin"></i> </a> <a href="https://github.com/zetxek" target="_blank" rel="noopener noreferrer" aria-label="square-github" ><i class="icon-square-github"></i> </a> <a href="https://twitter.com/zetxek" target="_blank" rel="noopener noreferrer" aria-label="x-twitter" ><i class="icon-x-twitter"></i> </a> <a href="https://adritian-demo-gax83wpqd-adrianmoreno.vercel.app/" target="_blank" rel="noopener noreferrer" aria-label="dribbble" ><i class="icon-dribbble"></i> </a> <a href="https://adritian-demo-gax83wpqd-adrianmoreno.vercel.app/" target="_blank" rel="noopener noreferrer" aria-label="behance" ><i class="icon-behance"></i> </a> <a href="https://adritian-demo-gax83wpqd-adrianmoreno.vercel.app/" target="_blank" rel="noopener noreferrer" aria-label="youtube" ><i class="icon-youtube"></i> </a> <a href="https://www.instagram.com/zetxek/" target="_blank" rel="noopener noreferrer" aria-label="instagram" ><i class="icon-instagram"></i> </a> <a href="https://www.facebook.com/zetxek/" target="_blank" rel="noopener noreferrer" aria-label="square-facebook" ><i class="icon-square-facebook"></i> </a> <a href="https://adritian-demo-gax83wpqd-adrianmoreno.vercel.app/" target="_blank" rel="noopener noreferrer" aria-label="codepen" ><i class="icon-codepen"></i> </a> <a href="https://www.yelp.com/" target="_blank" rel="noopener noreferrer" aria-label="yelp" ><i class="icon-yelp"></i> </a> <a href="https://www.bluesky.com/" target="_blank" rel="noopener noreferrer" aria-label="bluesky" ><i class="icon-bluesky"></i> </a> <a href="https://www.threads.net/" target="_blank" rel="noopener noreferrer" aria-label="threads" ><i class="icon-threads"></i> </a> <a href="https://www.adrianmoreno.info/" target="_blank" rel="noopener noreferrer" aria-label="face-smile" ><i class="icon-face-smile"></i> </a> <a href="https://www.adrianmoreno.info/" target="_blank" rel="noopener noreferrer" aria-label="user" ><i class="icon-user"></i> </a> <a href="https://www.adrianmoreno.info/" target="_blank" rel="noopener noreferrer" aria-label="quote-left" ><i class="icon-quote-left"></i> </a> <a href="https://www.adrianmoreno.info/" target="_blank" rel="noopener noreferrer" aria-label="cloud-arrow-down" ><i class="icon-cloud-arrow-down"></i> </a> <a href="https://www.adrianmoreno.info/" target="_blank" rel="noopener noreferrer" aria-label="square-xing" ><i class="icon-square-xing"></i> </a> </div> </div> </div> </div> </div> <div class="row platform-links"> <div class="col-12"></div> </div> </div> </section> <section id="about" class="section rad-animation-group pb-0"> <div class="rad-fade-down"> <div class="row d-flex flex-column-reverse flex-md-row"> <div class="about__profile-picture col-12 col-md-6"> </picture> </div> <div class="col-12 col-md-6 my-auto"> <h2>About me</h2> <div class="about-me content"> This content is using the <code>about-section</code> shortcode. <br/>You can write <code>HTML</code>, as long as you <em>wrap it</em> accordingly. </div> <a href="https://adritian-demo-gax83wpqd-adrianmoreno.vercel.app/skills" target="_blank" class="btn btn-primary mt-3"> <i class="icon-user"></i> Check my skills </a> </div> </div> </div> </section> <section id="education" class="section section--border-bottom rad-animation-group" > <div class="container-education"> <div class="row rad-fade-down"> <div class="col-12"> <h2>Formal Education (education-list)</h2> <div class="row pt-2 pt-md-4"> <div class="col-12 col-sm-6 mb-4 mb-sm-0"> <div class="education"> <div class="education__date">2009-2012</div> <div class="education__title">High School of Hard Knocks</div> <div class="education__degree">High School Diploma, Sciences, Math, Computer & Business Studies</div> </div> </div> <div class="col-12 col-sm-6 mb-4 mb-sm-0"> <div class="education"> <div class="education__date">2012-2017</div> <div class="education__title">University of Life</div> <div class="education__degree">Bachelor of Applied Science (BASc), Electrical Engineering</div> </div> </div> </div> </div> </div> </div> </section> <section id="experience-single" class="section-experience section section--border-bottom rad-animation-group flex-grow-1"> <div class="row flex-column-reverse flex-md-row rad-fade-down"> <div class="experience-list col-12 col-md-6"> <h2> My job experience (title) </h2> <div class="experience"> <a href="https://adritian-demo-gax83wpqd-adrianmoreno.vercel.app/experience/job-3/" class="experience__link"> <div class="experience__header"> <div class="experience__meta"> <div class="experience__date">2024-now</div> <div class="experience__title">CIO</div> <div class="experience__company"> Internet Affairs Inc. . <span class="experience__location">Stavanger, Norway</span> </div> </div> <div class="experience__description d-none d-print-block"> <h1>Job #3</h1> 3rd job: CIO As Chief Information Officer at Internet Affairs Inc., I lead the strategic transformation of our digital infrastructure and cybersecurity initiatives. My team of 150+ IT professionals works tirelessly to protect and optimize our global network spanning 23 countries. During my tenure, I’ve spearheaded the implementation of a revolutionary blockchain-based verification system that reduced fraudulent transactions by 87% while improving processing speeds by 300%. This initiative saved the company $12M annually and earned us the prestigious “Digital Innovation Award 2024”. I’m particularly proud of our “Green Computing” program which has successfully migrated 75% of our data centers to renewable energy sources. This environmental initiative not only reduced our carbon footprint by 45% but also resulted in a 30% reduction in operational costs. In my role, I also serve as a member of the executive board, helping shape the company’s long-term technology vision and ensuring our IT strategy aligns perfectly with our business objectives. Currently leading an ambitious AI integration project that promises to revolutionize our customer service capabilities. </div> </div> </a> </div> <div class="experience"> <a href="https://adritian-demo-gax83wpqd-adrianmoreno.vercel.app/experience/job-3.es-copy/" class="experience__link"> <div class="experience__header"> <div class="experience__meta"> <div class="experience__date">2024-ahora</div> <div class="experience__title">Director Ejecutivo</div> <div class="experience__company"> Internet Affairs Inc.. <span class="experience__location">Stavanger, Noruega</span> </div> </div> <div class="experience__description d-none d-print-block"> <h1>Trabajo #3</h1> Arreglando el mundo, un byte a la vez ¡Adquisición hostil - ¿quién es el jefe ahora?! </div> </div> </a> </div> <div class="experience"> <a href="https://adritian-demo-gax83wpqd-adrianmoreno.vercel.app/experience/job-2/" class="experience__link"> <div class="experience__header"> <div class="experience__meta"> <div class="experience__date">2023-2024</div> <div class="experience__title">Chief Intern</div> <div class="experience__company"> Internet Affairs Inc. . <span class="experience__location">Stavanger, Norway</span> </div> </div> <div class="experience__description d-none d-print-block"> <h1>Job #2</h1> 2nd job: Chief Intern As Chief Intern at Internet Affairs Inc., I led several key initiatives that helped streamline our internal processes and boost productivity. Working closely with cross-functional teams, I developed and implemented an automated documentation system that reduced report generation time by 65% and improved accuracy by 40%. During my internship, I spearheaded the company’s first-ever “Innovation Lab” program, where I mentored junior interns and coordinated weekly brainstorming sessions. This initiative resulted in three patent-pending solutions and garnered attention from senior management. The program has since been adopted as a permanent fixture in the company’s internship structure. My most significant achievement was the successful implementation of a machine learning algorithm that optimized our resource allocation system. This project not only improved resource utilization by 35% but also led to my eventual promotion to CIO. I also actively participated in community outreach programs, organizing coding workshops for local high school students and contributing to the company’s STEM education initiatives. </div> </div> </a> </div> <div class="experience"> <a href="https://adritian-demo-gax83wpqd-adrianmoreno.vercel.app/experience/job-1/" class="experience__link"> <div class="experience__header"> <div class="experience__meta"> <div class="experience__date">2022-2024</div> <div class="experience__title">Junior Intern</div> <div class="experience__company"> Internet Affairs Inc. . <span class="experience__location">Stavanger, Norway</span> </div> </div> <div class="experience__description d-none d-print-block"> <h1>Job #1</h1> 1st job: Junior Intern The beginning of a great career. As a Junior Intern at Internet Affairs Inc., I had the opportunity to work on various projects that helped me develop my technical and professional skills. Working alongside experienced developers, I contributed to the company’s core web applications and learned industry best practices in software development. During my internship, I took the initiative to create an internal documentation wiki that improved knowledge sharing across teams. This project taught me valuable lessons in technical writing and collaboration. I also participated in code reviews and daily stand-ups, gaining firsthand experience in agile development methodologies. My most notable achievement was developing an automated testing script that reduced QA time by 25%. This project not only improved team efficiency but also demonstrated my ability to identify problems and implement effective solutions. Additionally, I actively participated in the company’s mentorship program, where I helped onboard new interns and shared my growing knowledge with peers. Through these experiences, I built a strong foundation in software development and professional collaboration, setting the stage for my advancement to more senior roles within the company. </div> </div> </a> </div> </div> <div class="experience-description col-12 col-md-6"> <div class="container-experience"> <div class="row"> <h2>Intro (intro_title)</h2> <div class="lead">Description (intro_description).<br>You can use HTML,with <strong>strong</strong> formatting, or lists <ul><li>one</li><li>two</li></ul></div> </div> <div class="row"> <div class="col-12 col-lg-4"> <a href='https://example.com' class="btn btn-primary btn-block w-100" target="_blank" rel="noopener noreferrer" > <i class="icon-globe"></i> (1) Visit Example <i class="icon-arrow-right"></i> </a> </div> <div class="col-12 col-lg-4"> <a href='https://adritian-demo-gax83wpqd-adrianmoreno.vercel.app/skills' class="btn btn-frameless w-100" target="_blank" rel="noopener noreferrer" > (2) Skills </a> </div> <div class="col-12 col-lg-4"> <a href='https://adritian-demo-gax83wpqd-adrianmoreno.vercel.app/experience' class="btn btn-frameless w-100" rel="noopener noreferrer" > View all </a> </div> </div> </div> </div> </div> </section> <section id="experience-list-shortcode" class="section-experience section section--border-bottom rad-animation-group flex-grow-1 "> <div class="row flex-column-reverse flex-md-row rad-fade-down"> <div class="experience-list col-12 mt-5 mt-sm-0"> <h2 class="section__title mb-4">Experience (as list)</h2> <div class="experience row"> <div class="experience__header col-12 col-md-3 d-flex align-items-start"> <div class="experience__meta"> <div class="experience__date">2024-now</div> <div class="experience__title">CIO</div> <div class="experience__company">Internet Affairs Inc. . <span class="experience__location"> Stavanger, Norway</span></div> </div> </div> <div class="experience__description d-print-block col-12 col-md-9 mt-3 mt-md-0"> <h1>Job #3</h1> <h2 id="3rd-job-cio">3rd job: CIO</h2> <p>As Chief Information Officer at Internet Affairs Inc., I lead the strategic transformation of our digital infrastructure and cybersecurity initiatives. My team of 150+ IT professionals works tirelessly to protect and optimize our global network spanning 23 countries.</p> </article> <article> <h1>Printable CV</h1> <p>Mon, 01 Jan 0001 00:00:00 +0000</p> <p>ℹ This page is a demo of the printer-friendly output of the theme. You can find the source code in the demo repo (<a href="https://raw.githubusercontent.com/zetxek/adritian-demo/refs/heads/main/content/cv.md%29">https://raw.githubusercontent.com/zetxek/adritian-demo/refs/heads/main/content/cv.md)</a>. Try printing it directly from your browser!</p> <h3 id="about-me">About me</h3> <p>I am a passionate software engineer with over 10 years of experience building web applications and distributed systems. My expertise spans full-stack development, cloud architecture, and leading engineering teams to deliver impactful solutions. I thrive on solving complex technical challenges while mentoring others and fostering a collaborative engineering culture.</p> </article> <article> <h1>Search</h1> <p>Mon, 01 Jan 0001 00:00:00 +0000</p> search </article> <article> <h1>Search Hidden Content</h1> <p>Mon, 01 Jan 0001 00:00:00 +0000</p> <p>This content should never appear in search results. Unique keyword: omitfromsearch.</p> </article> </main></body></html>