The Secret Network Website: Phase 1 Completed

Today we at Stake or Die! are thrilled to announce that Phase 1 of The Secret Network Website project is complete. The site is live at SCRT.NETWORK. Go take a look :eyes:!

Take your time and look around, then tell us what you like, what you don’t like, what you want to see more of, what cool ideas you would focus on, anything that really bothers you, etc. etc. Without going too deep into a long description of what is public to view, I want to highlight a few things:

Technology

The site is built with Vue.js and uses the Gridsome framework. Gridsome is a really cool, modern framework that exists within the JAMStack world. The decision was based on the relative comfort we understand the community has with Vue.js, but also the need to increase the scope and capability of the site beyond what VuePress is best used for.

Design

Our goal was for the site to first and foremost seem clean and simple so that the message and the content would stand out. But, we also wanted some splashes of artistic design sprinkled in. For those bits, we took inspiration from the design aspects already in place in the blog posts, but also borrowed elements from Walking Frames’ excellent “Secret in 60 sec” video, and we wanted the site to feel like a natural home for its painterly, comic book feel. We look forward to more great videos and other content!

Components

The main component that the site uses for information organization is the card. It is a common simple component that allows for clean consistent responsiveness. We hope to add new components as site grows, but for now we want to keep it simple and let the community play a role in the direction.

CSS

The styling is done with the help of a css framework that was developed by our partner LKMX called Flare. Flare is a very lightweight framework that is super intuitive. More will be written about his in the site documentation and contribution tutorials.

Customizability

We wanted the site to have a malleable aspect to it that allows the viewer to exert some level of control, in keeping with the control of private data The Secret Network provides. To do this we incorporated two toggle switches, one for color and one for dark/light. Together, these toggles give the user four different experiences that they can choose for themselves.


That’s it, we have crossed one bridge today, but we are only at the very beginning of the journey. Phase 1 was about quickly getting something built and launched, so that we had a starting point to begin our work as a community. We couldn’t be more thrilled that 11 days after the proposal passed we are able to provide just that.

What went live today is a “Production ready MVP.” On Nov 20th the actual site will launch – the success of that launch will be up to all of us.

4 Likes

Looking good,

Feedback:
This documentation does not look good on the website, https://scrt.network/developers/secret-contract-devs/developing-secret-contracts Too much information and docs, best to route it to https://build.scrt.network for any form of documentation. You can revamp the documentation website separately that’s fine, just to keep these 2 resources separate it would be the best.

Also the icons image are a little blur, maybe little high-quality images might be better.

image the forum section is a link can it be displayed as a link and not a tab.

Missing size consistency between the home page and other tabbed pages, i am not sure if its forum or image blob sizes, but i guess that should be an easy fix.

Liking the new funky look otherwise, I just hope we don’t make it anymore funky as it should maintain a little professional appeal to it.

I love the blog page BTW.

2 Likes

Thanks Mohammed!
I will add these issues to Github. Looking forward to discussing what the education committee wants to see out of the website.

@the_dusky Noted, we can add that to the agenda for tomorrows meeting.

Thanks @the-dusky for the great work. I’ll share some feedback regarding the website, in the future if you prefer to I open issues, I can do that too.

About page

  • font between headers and text is very similar in values and FAQ
  • I think we can add a link to “Get SCRT, Stake SCRT, wallets, dApps” - this is how people will interact with Secret Network

header / navigation bar

  • i’d add a github link to secret network repo
  • I think blog and forum are links similar to icons vs. about / community / developers. I’d move them to the very right end. Forum is more suitable for an icon as it’s hosted somewhere else.

developers

  • we should move the rust link down in the page. You don’t really need to be a rust expert to write secret contracts.
  • Instead we can replace that with sample contracts and link people to: SNIP-20, secretSCRT, secretAuction, secretVoting and other sample contracts. Maybe a better idea is to link this to Taariq’s step by step secret voting guide. We can name this, “build your first secret contract” - this suggestion is very much up for discussion, I’m leaning towards the second option. @assafmo @reuven @toml @Cashmaney would be great to get your input

ecosystem

  • As we start having a stand alone UI for things like the bridge and secretSCRT, we can move those to the top. For now I think what we have is good
  • The box structure is weird, sometimes you have 3 boxes in one row and sometimes we have 2 x 2. I’d make those consistent in layout and size (height x width)

Cheers