The Secret Network Website: Phase 1 Completed

[the-dusky]

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 !

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.

[mohammedpatla]

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 are a little blur, maybe little high-quality images might be better.

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.

[the-dusky]

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

[Carter-Woetzel]

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

[can]

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

[the-dusky]

Thanks Can. I created issues for each of these suggestions.

[reuven]

I really like the new blog page!
For me it’s a lot easier to understand than the previous blog page.

In the developers page, I mostly agree with Can. I think we should have secret-network related resources highlighted there, and then have pointers to rust resources lower down. as for the exact link, The one that’s there right now is great (https://www.rust-lang.org/learn). There’s another, unofficial resource (https://tourofrust.com/) that I’d call a real “quickstart” though. I wish we had a way to point at both, because different learners will prefer different things. the /learn page on the rust website is for more involved learners.

As for what the SN resource we link to should be… We can start with taariq’s guide, but if it’s the first resource people will see, then it’s better if we have a very, very simple example to show people, so they can focus on the basics they’ll need to know for their own projects.

[Eve]

Hello,

first of all I have to say that you did a great job. I think the website is really very good. It is fun to look at.

The things that I notice now are rather crying on a high level. Thanks for your great work!

1. navigation bar
   It “may” be that it is too much for users at once.

I one read that after 7 points the user dosesnt remember the first point. I think it’s good that you have given the things distance.

But maybe you could consider to make the social things a level higher. + I like that you can change the colors. But maybe it is better to concentrate on 2 things. At the moment there are black, white and colored.

2. 
   

I do not know if this was intended.

Secret Network is centered, the texts are generally left-aligned, in the contact partially right-aligned.

3. Youtube
   I really like that. Also that it changes to colorful. But I find “see video” too small. Maybe it is just like that on my screen. But it is not noticeable . And that is a pity. I love the video

4. 
   
   In the background these strokes. Hmmm I think that unfortunately they don’t say anything about privacy. Maybe there is another idea? Maybe the YouTube video as a preview image? Maybe there is… I have no idea. =) Dont get me wrong. I love this strokes but…i guess you know what i mean.

Generally “listen to podcast” -----and then comes a Youtube video.

I have nothing against it. But I know many people who will not watch a video. You could add the Spotify links or write a link to it.

Something is still missing here… maybe the social logos can be integrated from above.

I might would add a little description here. Which is for example: Enigma. What is Enigma?

Thats it =) I really really really like the website!!!