darshanbaral / aafu

Portfolio theme with blog

aafu Theme

The aafu Theme is a responsive portfolio with blog. Click here for live demo.

Installation

git clone https://github.com/darshanbaral/aafu.git
cd aafu
npm install
hugo server

Getting started

After cloning the aafu repo, modify the config.yaml as you wish.

The config file

You'll find a file called config.yaml. Customize it per your need.

Note that the sections to be displayed in the accordion, the order of the sections, and the section that should be expanded at the beginning can be specifed in the config.yaml.

Add your photo

Go to static/images and replace the profile.jpg with your own file.

Theme Colors

The aafu theme provides light and dark theme.

Reporting Issues

If you have discovered a bug or have a feature request, create an issue.

aafu's Issues

Could you add sub menu for Blog?

It would be great if you could add sub menu in Blog main menu. It will intended to separate blog category.

Blog pages not showing

Following along with the Hugo quickstart. When I serve the site, and select the blog tab at the top, I'm getting 404 not found. Do you use some different file structure?
Update, I changed the name of the directory 'content/posts' to 'content/blog', and am now seeing my blog post, but when I click on the link, I'm getting a 404.
Last Update, I think I've solved my own issue. The default for Hugo is to keep posts in the content/posts directory. This theme is using the content/blog directory. Things seem to be working normally now; documentation for that would be helpful.

Language error when running hugo server

Hello,

I've just installed aafu theme. I copied the config.toml to the root of my Hugo site.

When I run hugo server, I have the following error :

ERROR: 2019/05/19 08:49:48 general.go:222: Error while rendering homepage: template: theme/index.html:2:20: executing "theme/index.html" at <.Site.Language>: Language is not a field of struct type *hugolib.SiteInfo

Could you help me to resolve it?
Thanks. Best regards.

Add Dark and Normal Mode both

Personally, I like the total write-up and themes. It would be better if we could get the Normal theme besides the Dark theme as well.
You can check a hugo theme sada.

Aafu theme does not support Hugo version 0.54.0, won't build on Netlify

I was going to use your theme, but unfortunately it won't build on netlify, with error message.
ERROR 2020/06/29 12:56:26 AAFU theme does not support Hugo version 0.54.0. Minimum version required is 0.55

Add enhanced favicon support

A number of Hugo themes support some enhanced favicon support provided by a service like RealFaviconGenerator (e.g., Hello Friend NG). Would it be possible to include something like https://github.com/rhazdon/hugo-theme-hello-friend-ng/blob/master/layouts/partials/favicons.html in this theme?

Thanks for sharing this

Hello I hope this is not too much to ask but I like to know how to add links in the dot toml config file so they will appear when click in the one page portfolio. I'm trying to build mine for later hosting. I also cannot find how to remove the aafu instance beneath the profile pic circle.

I'm curious where to find the master control to tweak the variables in the dot toml file? Just a newbie here trying to learn web development and github. I'm learning Golang on the side if this can help me in the future. TIA.

Don't show header if single page

I don't use the blog feature. I prefer just a simple landing page, so I have singlePage = true in my config. However, I still see the header at the top with the link to the blog. Probably the most straightforward way to fix this is by adding a simple {{ if not .Site.Params.theme.singlepage }} check to this block. In fact, this is what I did for my website, and it worked just fine.

Increase page load performance

I just ran my website (based on the latest aafu theme) through Google's PageSpeed Insights page (here are my results) and noticed that it looks like a few things could be improved. Specifically, there are some Render-Blocking Resources that are identified that might be able to be modified using the defer or async attributes, among other things.

Have you by chance looked at improving page load performance by implementing any of these suggestions?

Feature request: Add a Accordion section for Certificates

It would be nice if you could show off your certifications i.e. AWS, Azure etc. on the homepage in the accordion.

Unable to linebreak

I have attempted to do a line break with every way I can think of and find online but none have worked
I have tried 2x spaces , <p> </p>,<br>, \n and none of them worked. I attempted to make another list and that also didn't work. Am I missing something?

Blockquote not working?

Hi,

I'm using your theme and have a blog. When I use markdown's syntax for the blockquote (>), it is not shown in the blog. Any idea if this is theme related?

"type": "module" in the package.json or use the .mjs extension

Issue with PostCSS, Even after settings "type":"module" in the package.json,

Hugo version: v0.111.3+extended
Node JS version : v20.8.1

Start building sites … 
hugo v0.111.3+extended linux/amd64 BuildDate=2023-07-26T00:00:00+00:00 VendorInfo=Fedora:0.111.3-4.fc39
Error: Error building site: POSTCSS: failed to transform "main.css" (text/css): (node:40694) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
/home/abishek/ownCloud/shilpi/node_modules/.bin/postcss:3
import fs from 'fs-extra'
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1153:20)
    at Module._compile (node:internal/modules/cjs/loader:1205:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1295:10)
    at Module.load (node:internal/modules/cjs/loader:1091:32)
    at Module._load (node:internal/modules/cjs/loader:938:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:83:12)
    at node:internal/main/run_main_module:23:47

Node.js v20.8.1
Built in 305 ms

Update Font Awesome version

Would it be possible to update the Font Awesome version found here with this?:

  <link
    rel="stylesheet"
    href="https://use.fontawesome.com/releases/v5.15.2/css/all.css"
    integrity="sha384-vSIIfh2YWi9wW0r9iZe7RJPrKwp6bG+s9QZMoITbCckVJqGCCRhc+ccxNcdpHuYu"
    crossorigin="anonymous"
  >

As seen here, 5.15.2 is the latest release. The reason I ask is because I'd like to include the ORCID icon, which was added in version 5.11.0 and isn't available in the version in aafu at the moment.

I'm hopeful this'll be a pretty painless modification. I'm also happy to submit a PR if you'd like.

Thank you!

Fix a few W3C HTML5 validation issues

First off, I really love this theme. I'm working on migrating my site to it. However, I discovered a few simple HTML5 validation issues that should be fixed.

https://gfairchild.nfshost.com/ is the current temporary testing site for my new homepage. https://validator.w3.org/nu/?doc=https%3A%2F%2Fgfairchild.nfshost.com%2F shows the HTML5 validation results. There are a few things that stick out:

1. The Google font is incorrectly specified. This isn't your fault; this is Google's fault. As you can see here, all that you need to do is change https://fonts.googleapis.com/css?family=Alegreya|Lato to https://fonts.googleapis.com/css?family=Alegreya%7CLato.
2. The <dl> tag requires both at <dt> and <dd> tag to be valid. layouts/partials/hobby.html uses this tag incorrectly. There are a couple simple fixes you could do:
   1. You could replace the <dl> tag with a <ul> tag. You could use style="list-style-type: none;" to get rid of the bullet point and set the margin appropriately (e.g., this) to create a visually similar look that adheres to the HTML5 spec.
   2. You could add a new optional description parameter to each hobby element to enable a user to optionally specify additional details about their hobby.
3. I haven't spent time to dig around, but it looks like <h2> and <h3> headings are used incorrectly in a few spots.

I love this theme, so keep up the good work!

theme is broken

I run hugo at pops linux (same as ubuntu 19)

hugo version
Hugo Static Site Generator v0.52/extended linux/amd64 BuildDate: 2018-12-21T15:59:29Z

here the problem. I installed aafu theme and ran just example

cd themes
git clone https://github.com/darshanbaral/aafu.git
Cloning into 'aafu'...
remote: Enumerating objects: 291, done.
remote: Counting objects: 100% (291/291), done.
remote: Compressing objects: 100% (190/190), done.
remote: Total 468 (delta 153), reused 209 (delta 86), pack-reused 177
Receiving objects: 100% (468/468), 1.37 MiB | 7.63 MiB/s, done.
Resolving deltas: 100% (244/244), done.
cd ../
cp themes/aafu/exampleSite/config.toml .
cp -a themes/aafu/static/images static/

but it returns an error

hugo server -D
Error: "... /themes/aafu/layouts/partials/meta.html:8:1": parse failed: template: partials/meta.html:8: function "hugo" not defined

How to create images

I use markdown syntax to create image, but can't working.

Theme run empty

Theme run empty
When hugo server --buildDrafts
Get empty page

Setup directions do not yield expected results

On an M1 mac and following the directions on the theme page here gives the following error:

Start building sites …
hugo v0.121.2-6d5b44305eaa9d0a157946492a6f319da38de154+extended darwin/arm64 BuildDate=2024-01-05T12:21:15Z VendorInfo=brew

Built in 4119 ms
Error: error building site: POSTCSS: failed to transform "main.css" (text/css). Check your PostCSS installation; install with "npm install postcss-cli". See https://gohugo.io/hugo-pipes/postcss/: binary with name "npx" not found

Bug processing metas

I'm using the latest Hugo (0.69.0) and latest version of this template (which I love!). You can see it here.

I just noticed that the metas block isn't being processed properly. Here's what I have in my config.toml:

[params.favicons]
    use = true
    metas = '''
    <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
    <link rel="manifest" href="site.webmanifest">
    <link rel="mask-icon" href="safari-pinned-tab.svg" color="#252627">
    <link rel="shortcut icon" href="favicon.ico">
    '''

But when I look at the HTML, one line is botched pretty badly, and it's not longer compliant:

<link rel="mask-icon" href="/safari-pinned-tab.svg color#252627">

As you can see, the color attribute isn't maintained, and it's combined into the href.

Looking at https://github.com/darshanbaral/aafu/blob/master/layouts/partials/meta.html#L11-L18, my guess is that the regex you've got going here just needs to be cleaned up a tad to make sure this doesn't happen.

Changing blog post date causes it to disappear

Localhost:1313 not work , i use ubuntu!

UBUNTU:
i user your nice Theme https://themes.gohugo.io/aafu/ .
i mak it like this :

mkdir website
hugo new site website
i clone the the aafu theme on the themes
cp -R themes/aafu/exampleSite/* .
AND I START MY hugo server
oh not work .

WHAT should I DO HERE TO SOLVE IT ?

INFO : i make the same on My mac .
is Work very good .

THANK YOU !

Request create sub heading on Publication and format journal following APA 6th

Dear Sir,

Like the title, I would like to make a request to the author to create a sub-list on publication.
For example:
Publications
Journal articles
Proceeding

User click publications then will list journal articles and proceeding, if they click journal articles then see articles. In contrast, choose proceeding then just see only the list on this sub

Regards

Changes made to theme html file are reverted after saving config.toml file

Hi there,

I'm using your aafu theme and its great. However, I think something is wrong. When I make edits to one of the theme html files, for example aafu_light.html, and then save the changes I can see them updated on the site. However, if I then go into the config.toml file and make changes there and save, the changes I previously made to the theme html file are reverted and the site appears to take on the default appearance. It is only after I go back into the theme html file and save once again that I can see my changes again. Please let me know if this doesn't make sense or I can explain anything further.

Thanks,
Ryan

image can not resize?

I found that I cannot resize the image.

{{< figure src="/images/freezeZoo/1.jpg" width="120" height="500">}}

width and height not working.