# New Hugo based website (landingpage) - Duorama.io

**URL:** <https://discourse.gohugo.io/t/new-hugo-based-website-landingpage-duorama-io/48590>\
**Category:** Showcases\
**Created:** [March 1, 2024, 3:25am UTC](https://discourse.gohugo.io/t/new-hugo-based-website-landingpage-duorama-io/48590 "2024-03-01T03:25:20Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![toledox82](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/toledox82/32/18180_2.png) [@toledox82](https://discourse.gohugo.io/u/toledox82)\
**Post date:** [March 1, 2024, 3:25am UTC](https://discourse.gohugo.io/t/new-hugo-based-website-landingpage-duorama-io/48590/1 "2024-03-01T03:25:20Z")

</div>

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](https://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](https://gohugo.io), no theme.
- Hosted on [Cloudflare](https://cloudflare.com) and deploy integrated with [Github](https://github.com).
- HTML and CSS from scratch with no frameworks.
- A minimum of JavaScript using [AlpineJS](https://alpinejs.dev/) and a [ParticleJS](https://vincentgarreau.com/particles.js/) lib for hero animation.
- About Forms I love to use [Formspark](https://formspark.io)

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.

 ![Screenshot_1](https://canada1.discourse-cdn.com/flex036/uploads/gohugo/original/3X/f/6/f6e3560d1829c4e34e3b38b86ed7db47f26f4cd0.png)

GT Metrix: [Latest Performance Report for: https://duorama.io/ | GTmetrix](https://gtmetrix.com/reports/duorama.io/Dq3HtknP/)  
YellowLab: [Yellow Lab Tools - Page Speed audit](https://yellowlab.tools/result/gttw7vacp5)

---

<div class="post-metadata">

**Author:** ![Arif](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/arif/32/20931_2.png) [@Arif](https://discourse.gohugo.io/u/Arif)\
**Post date:** [March 1, 2024, 9:25am UTC](https://discourse.gohugo.io/t/new-hugo-based-website-landingpage-duorama-io/48590/2 "2024-03-01T09:25:32Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![toledox82](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/toledox82/32/18180_2.png) [@toledox82](https://discourse.gohugo.io/u/toledox82)\
**Post date:** [March 1, 2024, 2:07pm UTC](https://discourse.gohugo.io/t/new-hugo-based-website-landingpage-duorama-io/48590/3 "2024-03-01T14:07:28Z")

</div>

Yes, nice catch. Doing now! =)

---

<div class="post-metadata">

**Author:** ![zhandosweb](https://avatars.discourse-cdn.com/v4/letter/z/b19c9b/32.png) [@zhandosweb](https://discourse.gohugo.io/u/zhandosweb)\
**Post date:** [May 21, 2024, 10:36pm UTC](https://discourse.gohugo.io/t/new-hugo-based-website-landingpage-duorama-io/48590/4 "2024-05-21T22:36:09Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![toledox82](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/toledox82/32/18180_2.png) [@toledox82](https://discourse.gohugo.io/u/toledox82)\
**Post date:** [May 22, 2024, 5:12am UTC](https://discourse.gohugo.io/t/new-hugo-based-website-landingpage-duorama-io/48590/5 "2024-05-22T05:12:14Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![zhandosweb](https://avatars.discourse-cdn.com/v4/letter/z/b19c9b/32.png) [@zhandosweb](https://discourse.gohugo.io/u/zhandosweb)\
**Post date:** [July 14, 2024, 8:32pm UTC](https://discourse.gohugo.io/t/new-hugo-based-website-landingpage-duorama-io/48590/6 "2024-07-14T20:32:10Z")

</div>

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.