If you are looking to build a sleek portfolio website using Hugo, the Agency Theme might just be the perfect fit! This one-page theme is designed for companies and freelancers, allowing you to showcase your talents and projects. In this article, we will guide you through the installation and setup process, ensuring you can get your site up and running with ease.

Quick Overview

The Agency Theme is an evolution of the original Bootstrap theme crafted by David Miller. Although the development of this theme has been discontinued, it remains a solid choice for a portfolio website. Here’s what you need to know before diving in:

• Created by Michael Grosser.
• Features include a responsive grid, contact form, and a timeline.
• Archived as of 07.08.2019; no new updates will be made.

Installation Steps

First, you need to get the theme into your Hugo site. Here’s how:

$ cd themes
$ git clone https://github.com/digitalcraftsman/hugo-agency-theme

For detailed information, make sure to check the official setup guide.

Getting Started with Your Theme

Once you have the theme installed, follow these steps to configure it properly:

Configure the config.toml File

Inside the exampleSite folder, you will find a file named config.toml. This file is crucial as it will define the settings for your site. Copy this file into the root folder of your Hugo site and customize it as needed.

Change the Hero Background

The hero section is your site’s attention-grabber. To change its background:

• Replace the header-bg.jpg in static/img with your own image.
• Ensure that you keep the filename the same.

Present Your Skills

In order to show off your skills:

• Edit the params.services.list section in config.toml.
• Use icons from Fontawesome by specifying the CSS class.

Create Your Portfolio

Your portfolio is where you showcase your best work. Here’s an analogy: think of creating a portfolio like setting up a display case in a gallery. You want to show your best items (projects) in a way that is appealing to visitors. To create your portfolio:

• Go to the projects subfolder, which contains files that will appear in your portfolio.
• Each project file should follow the structure as shown in this example.
• Ensure each project has a unique modalID for proper rendering.

Show What Happened

Don’t forget to add a timeline to illustrate your journey. Add new events by modifying the params.about section in config.toml.

Introduce Your Team

To add team members, insert their details in the params.team.members section in the same config file. You can link their social profiles using Fontawesome icons.

List Your Clients

To show off logos of clients you’ve worked with:

• Upload logos to the logos directory.
• Add to the params.clients section in config.toml.

Make the Contact Form Active

Use formspree.io to manage email contacts efficiently:

1. Enter your email address under email in config.toml.
2. Deploy the site to your server.
3. Send a test email to confirm.

Run Your Site Locally

To see your site live, you can use Hugo’s built-in server:

$ hugo server

Then, navigate to localhost:1313 in your browser.

Troubleshooting

In case you face any issues, here are a few troubleshooting tips:

• Ensure all filenames are correct and match those in your config files.
• Check that the project IDs are unique and incremented properly.
• If the site does not load, verify that the Hugo server is running.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

Conclusion

Setting up the Agency Theme requires a bit of attention to detail, but once you follow these steps, you’ll have a polished portfolio site ready for the world. At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.