New Hugo based website (landingpage) - Duorama.io

Hello community, I want to share a new website (landing page at first), but with the idea of growing with more content, which I had the opportunity to code for a friend.

Duorama.io

I want to share more about the tech specs:

My idea was to develop a very fast, mobile-first and scalable page design with minimal code.

  • Built with Hugo, no theme.
  • Hosted on Cloudflare and deploy integrated with Github.
  • HTML and CSS from scratch with no frameworks.
  • A minimum of JavaScript using AlpineJS and a ParticleJS lib for hero animation.
  • About Forms I love to use Formspark

I’m confortable to work with Hugo after 4-5 projects, I didn’t had the opportunity to work in big project yet with a lot of content but, this is the next goal.

I’ve got some performance tests and I’m going to fix a few small things.
Thanks for this space and I appreciatte any feedback.

GT Metrix: Latest Performance Report for: https://duorama.io/ | GTmetrix
YellowLab: Yellow Lab Tools - Page Speed audit

5 Likes

Don’t forget to test accessibility issues (e.g. https://wave.webaim.org/)

2 Likes

Yes, nice catch. Doing now! =)

Hello, friend! I’m a little bit late, can I ask a question, please.
How did you build FAQ element? I mean you need to show question first, and after click it shows answer.
I’m not about HTML/CSS/JS coding, I’m about coding it for Hugo framework. Do you make some custom reusable shortcode, or it it just a hard coded HTML?
And the same question with the block “Why us?”, where also blocks with hidden texts under ± buttons.
And your site design looks amazing! I’m sorry for my broken English, not a native speaker.

Hi @zhandosweb
No worries about english, I’m not native also and understood you perfectly.

This was hard code on layout, but could be loaded from some data file and have some loop and add the same script on this part of code, like a component or maybe using shortcode passing the variables, etc.

Make sense?

The same for +/- section.

Thank you for the late answer! Yes, I get it, so in ideal I can store data in the data folder (for example YAML format), and just load it into my Hugo components.

1 Like