diff --git a/.cache/eleventy-fetch-ff7bff157a8a33917f958b9cab3878 b/.cache/eleventy-fetch-ff7bff157a8a33917f958b9cab3878 index 49fdaad..a09a432 100644 --- a/.cache/eleventy-fetch-ff7bff157a8a33917f958b9cab3878 +++ b/.cache/eleventy-fetch-ff7bff157a8a33917f958b9cab3878 @@ -1 +1 @@ -[{"ff7bff157a8a33917f958b9cab3878":"1"},{"cachedAt":1662120146663,"type":"2"},"json"] \ No newline at end of file +[{"ff7bff157a8a33917f958b9cab3878":"1"},{"cachedAt":1663148524558,"type":"2"},"json"] \ No newline at end of file diff --git a/.eleventy.js b/.eleventy.js index 7ec6fdf..4de49e2 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -13,6 +13,8 @@ module.exports = function (eleventyConfig) { eleventyConfig.addPassthroughCopy('src/assets/images/**/*.jpg'); eleventyConfig.addPassthroughCopy('src/assets/images/**/*.gif'); + //eleventyConfig.addNunjucksFilter('bitcoin', arr => arr.filter(e => e.name == 'Synapse')); + //plugins eleventyConfig.addPlugin(eleventySass); diff --git a/src/_data/canary.json b/src/_data/canary.json new file mode 100644 index 0000000..0010564 --- /dev/null +++ b/src/_data/canary.json @@ -0,0 +1,3 @@ +{ + "text": "WE HAVE NEVER RECEIVED A SECRET GOVERNMENT REQUEST TO HAND OVER USER INFORMATION." +} \ No newline at end of file diff --git a/src/_data/menu.json b/src/_data/menu.json index 3a6c824..69cfe72 100644 --- a/src/_data/menu.json +++ b/src/_data/menu.json @@ -1,10 +1,34 @@ [ + { + "inHeader": true, + "inFlyout": false, + "inFooter": false, + "items": [ + { + "name": "Store", + "slug": "store", + "url": "https://store.start9.com/", + "target": "", + "class": "em" + }, + { + "name": "Dev Community", + "slug": "dev", + "url": "https://start9.com/latest/contribute/index", + "target": "", + "order": 1, + "class": "" + } + ] + }, { "name": "Our Company", "slug": "company", "order": 0, "size": "full", - "onHeader": true, + "inHeader": false, + "inFlyout": true, + "inFooter": true, "items": [ { "name": "About", @@ -53,7 +77,9 @@ "slug": "products", "order": 1, "size": "full", - "onHeader": true, + "inHeader": false, + "inFlyout": true, + "inFooter": true, "items": [ { "name": "Embassy ONE", @@ -86,7 +112,9 @@ "slug": "embassyos", "order": 2, "size": "half", - "onHeader": true, + "inHeader": false, + "inFlyout": true, + "inFooter": true, "items": [ { "name": "Support", @@ -119,7 +147,9 @@ "slug": "developers", "order": 3, "size": "half", - "onHeader": true, + "inHeader": false, + "inFlyout": true, + "inFooter": true, "items": [ { "name": "Contribute", @@ -144,7 +174,9 @@ "slug": "contact", "order": 4, "size": "half", - "onHeader": false, + "inHeader": false, + "inFlyout": false, + "inFooter": true, "items": [ { "name": "Matrix", diff --git a/src/_data/pseudoservices.json b/src/_data/pseudoservices.json index 8314464..4185174 100644 --- a/src/_data/pseudoservices.json +++ b/src/_data/pseudoservices.json @@ -1,122 +1,54 @@ [ { - "name": "elit ad magna", + "name": "Whatsapp", "url": "https://start9.com/marketplace/175" }, { - "name": "sit culpa", + "name": "Twitter", "url": "https://start9.com/marketplace/175" }, { - "name": "sunt veniam irure", + "name": "Lastpass", "url": "https://start9.com/marketplace/199" }, { - "name": "cillum do", + "name": "bank", "url": "https://start9.com/marketplace/148" }, { - "name": "aute", + "name": "Github", "url": "https://start9.com/marketplace/126" }, { - "name": "voluptate", + "name": "Google Drive", "url": "https://start9.com/marketplace/186" }, { - "name": "aliquip", + "name": "iPhotos", "url": "https://start9.com/marketplace/119" }, { - "name": "exercitation", + "name": "Coinbase", "url": "https://start9.com/marketplace/132" }, { - "name": "culpa", + "name": "GoFundMe", "url": "https://start9.com/marketplace/165" }, { - "name": "nisi fugiat", - "url": "https://start9.com/marketplace/158" + "name": "PayPal", + "url": "https://start9.com/marketplace/165" }, { - "name": "non culpa", - "url": "https://start9.com/marketplace/151" + "name": "iMessage", + "url": "https://start9.com/marketplace/165" }, { - "name": "cillum nostrud ad", - "url": "https://start9.com/marketplace/103" + "name": "KeepPass", + "url": "https://start9.com/marketplace/165" }, { - "name": "irure", - "url": "https://start9.com/marketplace/181" - }, - { - "name": "anim", - "url": "https://start9.com/marketplace/138" - }, - { - "name": "consequat adipisicing", - "url": "https://start9.com/marketplace/157" - }, - { - "name": "reprehenderit", - "url": "https://start9.com/marketplace/199" - }, - { - "name": "sint consequat anim", - "url": "https://start9.com/marketplace/134" - }, - { - "name": "fugiat id", - "url": "https://start9.com/marketplace/169" - }, - { - "name": "labore officia", - "url": "https://start9.com/marketplace/145" - }, - { - "name": "laboris", - "url": "https://start9.com/marketplace/103" - }, - { - "name": "sunt", - "url": "https://start9.com/marketplace/189" - }, - { - "name": "ex ut ipsum", - "url": "https://start9.com/marketplace/119" - }, - { - "name": "adipisicing", - "url": "https://start9.com/marketplace/135" - }, - { - "name": "qui", - "url": "https://start9.com/marketplace/172" - }, - { - "name": "anim", - "url": "https://start9.com/marketplace/126" - }, - { - "name": "do adipisicing est", - "url": "https://start9.com/marketplace/199" - }, - { - "name": "et nulla", - "url": "https://start9.com/marketplace/118" - }, - { - "name": "in qui", - "url": "https://start9.com/marketplace/123" - }, - { - "name": "proident duis", - "url": "https://start9.com/marketplace/141" - }, - { - "name": "sint Lorem velit", - "url": "https://start9.com/marketplace/193" + "name": "Kickstarter", + "url": "https://start9.com/marketplace/165" } ] \ No newline at end of file diff --git a/src/_data/services.json b/src/_data/services.json index 7f96afd..3f49d1f 100644 --- a/src/_data/services.json +++ b/src/_data/services.json @@ -1,26 +1,141 @@ [ { - "name": "Matrix", - "slug": "matrix", - "description": "asfsdf", + "name": "Synapse", + "slug": "synapse", + "description": "Synapse is the battle-tested, reference implementation of the Matrix protocol. Matrix is a next-generation, federated, full-featured, encrypted, independent messaging system. There are no trusted third parties involved. (see matrix.org for details).", + "categories": ["communications"], "pseudoservices": [ - "whatsapp" + "whatsapp","imessage" ] }, { - "name": "Mastadon", - "slug": "mastadon", - "description": "asfsdf", + "name": "Mastodon", + "slug": "mastodon", + "description": "Mastodon is a free, open-source social network server based on ActivityPub where users can follow friends and discover new ones. On Mastodon, users can publish anything they want: links, pictures, text, video. All Mastodon servers are interoperable as a federated network (users on one server can seamlessly communicate with users from another one, including non-Mastodon software that implements ActivityPub)!", + "categories": ["communications"], "pseudoservices": [ "twitter" ] }, { - "name": "BitWarden", - "slug": "bitwarden", - "description": "asfsdf", + "name": "Vaultwarden", + "slug": "vaultwarden", + "description": "Vaultwarden is a lightweight and secure password manager for storing and autofilling sensitive information such as usernames and passwords, credit cards, identities, and notes. It is an alternative implementation of the Bitwarden server API written in Rust and compatible with upstream Bitwarden clients. All data is stored in an encrypted vault on your Embassy.", + "categories": ["data"], "pseudoservices": [ - "lastpass" + "lastpass","keepass" ] + }, + { + "name": "Balance of Satoshis", + "slug": "balanceofsatoshis", + "description": "", + "categories": ["plebnet-tools"], + "pseudoservices": [] + }, + { + "name": "Bitcoin Core", + "slug": "bitcoind", + "description": "", + "categories": ["bitcoin"], + "pseudoservices": ["bank"] + }, + { + "name": "Bitcoin Proxy", + "slug": "btc-rpc-proxy", + "description": "", + "categories": ["bitcoin"], + "pseudoservices": [] + }, + { + "name": "BTCPay Server", + "slug": "btcpayserver", + "description": "", + "categories": ["bitcoin"], + "pseudoservices": ["kickstarter","gofundme"] + }, + { + "name": "Core Lightning", + "slug": "c-lightning", + "description": "", + "categories": ["lightning"], + "pseudoservices": ["paypal","coinbase"] + }, + { + "name": "electrs", + "slug": "electrs", + "description": "", + "categories": ["bitcoin"], + "pseudoservices": [] + }, + { + "name": "lightning Jet", + "slug": "lightning-jet", + "description": "", + "categories": ["plebnet-tools"], + "pseudoservices": [] + }, + { + "name": "Lightning Network Daemon", + "slug": "lnd", + "description": "", + "categories": ["lightning"], + "pseudoservices": ["paypal","coinbase"] + }, + { + "name": "Lightning Terminal", + "slug": "lightning-terminal", + "description": "", + "categories": ["lightning", "plebnet-tools"], + "pseudoservices": [] + }, + { + "name": "LNDg", + "slug": "lndg", + "description": "", + "categories": ["plebnet-tools"], + "pseudoservices": [] + }, + { + "name": "Mempool", + "slug": "mempool", + "description": "", + "categories": ["bitcoin"], + "pseudoservices": ["bank"] + }, + { + "name": "Ride the Lightning", + "slug": "ride-the-lightning", + "description": "", + "categories": ["lightning"], + "pseudoservices": ["paypal","coinbase"] + }, + { + "name": "Spark Wallet", + "slug": "spark-wallet", + "description": "", + "categories": ["lightning"], + "pseudoservices": ["paypal"] + }, + { + "name": "Specter", + "slug": "specter", + "description": "", + "categories": ["bitcoin"], + "pseudoservices": [] + }, + { + "name": "Sphinx Chat", + "slug": "sphinx-relay", + "description": "", + "categories": ["lightning"], + "pseudoservices": ["whatsapp","imessage"] + }, + { + "name": "Thunderhub", + "slug": "thunderhub", + "description": "", + "categories": ["bitcoin", "lightning"], + "pseudoservices": ["paypal","coinbase"] } ] \ No newline at end of file diff --git a/src/_includes/components/footer.njk b/src/_includes/components/footer.njk index c86e6fc..216bd56 100644 --- a/src/_includes/components/footer.njk +++ b/src/_includes/components/footer.njk @@ -1,8 +1,12 @@ \ No newline at end of file diff --git a/src/_includes/components/header.njk b/src/_includes/components/header.njk index 21cdace..fda8baf 100644 --- a/src/_includes/components/header.njk +++ b/src/_includes/components/header.njk @@ -1,17 +1,19 @@
+ +
\ No newline at end of file diff --git a/src/_includes/components/landing/_contact.njk b/src/_includes/components/landing/_contact.njk new file mode 100644 index 0000000..ffc6fb1 --- /dev/null +++ b/src/_includes/components/landing/_contact.njk @@ -0,0 +1,23 @@ + + \ No newline at end of file diff --git a/src/_includes/components/landing/be-your-own.njk b/src/_includes/components/landing/be-your-own.njk index ab81aba..0f7540f 100644 --- a/src/_includes/components/landing/be-your-own.njk +++ b/src/_includes/components/landing/be-your-own.njk @@ -16,20 +16,31 @@ {% endfor %} - +
+ {% for pseudoservice in pseudoservices %} +
+ +
+ {% endfor %} +
+ + +
- browse the start9 marketplace - \ No newline at end of file + + browse the start9 marketplace + \ No newline at end of file diff --git a/src/_includes/components/landing/bitcoin.njk b/src/_includes/components/landing/bitcoin.njk index 8a24a27..ffa4eb1 100644 --- a/src/_includes/components/landing/bitcoin.njk +++ b/src/_includes/components/landing/bitcoin.njk @@ -2,13 +2,29 @@ {% include "components/svg/grid_blend_top.svg" %}

Become Bitcoin

-

Don't trust, verify.
Run a full Bitcoin node to verify transactions and enforce the consensus rules you choose.

- why host a bitcoin node? -
-
-

Become Lightning

-

Not your keys, not your coins.
Run a Lightning node to take full control and custody over your Bitcoin on Lightning.

- why host a lightning node? -
- {% include "components/svg/grid_blend_bottom.svg" %} - \ No newline at end of file +

+ Don't trust, verify. +
Run a full Bitcoin node to verify transactions and enforce the consensus rules you choose.

+ why host a bitcoin node? + +
+

Become Lightning

+

+ Not your keys, not your coins. +
Run a Lightning node to take full control and custody over your Bitcoin on Lightning.

+ why host a lightning node? +
+
+ {% for service in services %} + {% for category in service.categories %} + {% if (category == "bitcoin") or (category == "lightning") or (category == "plebnet-tools") %} + + {% endif %} + {% endfor %} + {% endfor %} +
+ {% include "components/svg/grid_blend_bottom.svg" %} + \ No newline at end of file diff --git a/src/_includes/components/landing/community.njk b/src/_includes/components/landing/community.njk index 8996eca..3903197 100644 --- a/src/_includes/components/landing/community.njk +++ b/src/_includes/components/landing/community.njk @@ -1,17 +1,6 @@

Join the Community

- - + + {% include "components/landing/_contact.njk" %} +
\ No newline at end of file diff --git a/src/_includes/components/landing/infographics.njk b/src/_includes/components/landing/infographics.njk index ba99ef4..c224ea8 100644 --- a/src/_includes/components/landing/infographics.njk +++ b/src/_includes/components/landing/infographics.njk @@ -2,13 +2,13 @@

The problem is trust

Whoever controls your data, controls you. App companies can see your pictures, read your documents, listen to your conversations, track your location, sell your private information, permanently delete your data, or cut you off at any time. Even if the companies behind these apps are not malicious, they are prime targets for hackers and are vulnerable to political winds.

- {% include "components/svg/problem-with-internet.svg" %} + {% include "components/svg/big-tech-network-diagram.svg" %}

Take back control

The only way to be free is to cut out the middle men and take control of your data by running a personal server.

In the past, running a server was only possible for highly technical people or those who could afford to hire them; namely software developers, corporations, wealthy individuals, and politicians. Start9 levels the playing field by making it possible for the rest of us.

- {% include "components/svg/embassy-fixes-it.svg" %} + {% include "components/svg/embassyos-network-diagram.svg" %}
\ No newline at end of file diff --git a/src/_includes/components/landing/lines/be-to-powered.svg b/src/_includes/components/landing/lines/be-to-powered.svg new file mode 100644 index 0000000..50f2082 --- /dev/null +++ b/src/_includes/components/landing/lines/be-to-powered.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/_includes/components/landing/lines/bitcoin-to-be.svg b/src/_includes/components/landing/lines/bitcoin-to-be.svg index a7cac46..b49ece3 100644 --- a/src/_includes/components/landing/lines/bitcoin-to-be.svg +++ b/src/_includes/components/landing/lines/bitcoin-to-be.svg @@ -1,3 +1,3 @@ - - + + diff --git a/src/_includes/components/landing/lines/dev-to-contact.svg b/src/_includes/components/landing/lines/dev-to-contact.svg new file mode 100644 index 0000000..b03d221 --- /dev/null +++ b/src/_includes/components/landing/lines/dev-to-contact.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/_includes/components/landing/lines/powered-to-support.svg b/src/_includes/components/landing/lines/powered-to-support.svg new file mode 100644 index 0000000..6b43988 --- /dev/null +++ b/src/_includes/components/landing/lines/powered-to-support.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/_includes/components/landing/lines/products-to-info 1.svg b/src/_includes/components/landing/lines/products-to-info 1.svg new file mode 100644 index 0000000..3ecb72c --- /dev/null +++ b/src/_includes/components/landing/lines/products-to-info 1.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/_includes/components/landing/lines/products-to-info.svg b/src/_includes/components/landing/lines/products-to-info.svg index b09fbb3..236f205 100644 --- a/src/_includes/components/landing/lines/products-to-info.svg +++ b/src/_includes/components/landing/lines/products-to-info.svg @@ -1,4 +1,11 @@ - - + + + diff --git a/src/_includes/components/landing/lines/support-to-dev.svg b/src/_includes/components/landing/lines/support-to-dev.svg new file mode 100644 index 0000000..eaf5c5a --- /dev/null +++ b/src/_includes/components/landing/lines/support-to-dev.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/_includes/components/landing/powered-by.njk b/src/_includes/components/landing/powered-by.njk index d5b50e9..d99bb46 100644 --- a/src/_includes/components/landing/powered-by.njk +++ b/src/_includes/components/landing/powered-by.njk @@ -9,6 +9,6 @@ EmbassyOS (EOS) is a browser-based, graphical operating system for a personal server, designed to turn anyone into a system’s administrator capable of managing their own server.

- + {% include "components/svg/stack.svg" %} check out the source code \ No newline at end of file diff --git a/src/_includes/components/landing/support.njk b/src/_includes/components/landing/support.njk index 79d9fc2..8c2437b 100644 --- a/src/_includes/components/landing/support.njk +++ b/src/_includes/components/landing/support.njk @@ -1,4 +1,4 @@ -
+

get help

diff --git a/src/_includes/components/menu.njk b/src/_includes/components/menu.njk index 32ab200..06ab381 100644 --- a/src/_includes/components/menu.njk +++ b/src/_includes/components/menu.njk @@ -2,7 +2,7 @@
    - {% for group in menu|selectattr("onHeader")|sort(false, false, 'order') %} + {% for group in menu|selectattr("inFlyout")|sort(false, false, 'order') %}

  • {{group.name}}

      diff --git a/src/_includes/components/svg/big-tech-network-diagram.svg b/src/_includes/components/svg/big-tech-network-diagram.svg new file mode 100644 index 0000000..b467231 --- /dev/null +++ b/src/_includes/components/svg/big-tech-network-diagram.svg @@ -0,0 +1,88 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/_includes/components/svg/embassyos-network-diagram.svg b/src/_includes/components/svg/embassyos-network-diagram.svg new file mode 100644 index 0000000..3aec546 --- /dev/null +++ b/src/_includes/components/svg/embassyos-network-diagram.svg @@ -0,0 +1,93 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/_includes/components/svg/stack.svg b/src/_includes/components/svg/stack.svg new file mode 100644 index 0000000..38af720 --- /dev/null +++ b/src/_includes/components/svg/stack.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/src/_includes/components/svg/start9_basis.svg b/src/_includes/components/svg/start9_basis.svg new file mode 100644 index 0000000..edde344 --- /dev/null +++ b/src/_includes/components/svg/start9_basis.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/_includes/layouts/peripheral.njk b/src/_includes/layouts/peripheral.njk new file mode 100644 index 0000000..ba02af3 --- /dev/null +++ b/src/_includes/layouts/peripheral.njk @@ -0,0 +1,15 @@ +--- +layout: layouts/base.njk +--- + + + +{{ content | safe }} + + + + + + + + \ No newline at end of file diff --git a/src/about.njk b/src/about.njk index 0adbfbe..9373bb4 100644 --- a/src/about.njk +++ b/src/about.njk @@ -1,161 +1,184 @@ --- title: About | Start9 -layout: layouts/base.njk +layout: layouts/peripheral.njk --- {# #} - -
      -
      - -
      - -
      -
      -

      Privacy and
      - free speech are fundamental human rights and essential ingredients for a free society.

      -

      Human history demonstrates that, when entrusted to others, these rights are invariably denied, resulting in great - suffering. As such, it is necessary for individuals to protect their own privacy and right to speak freely. -

      -

      Fortunately, modern technologies, in the form of personal computers, encryption, and open, decentralized network - protocols such as the Internet and Bitcoin, make this a real possibility. -

      -

      What is needed is a revolution in personal computing away from the current, hosted, custodial model that breeds - dependency and corruption, towards a decentralized model, where individuals have absolute control over their data and - communications.

      -
      -
      -

      mission

      -

      To eliminate the need for trusted third parties in the human/computer relationship.

      -
      -
      -

      values

      - -

      - This list of values is not comprehensive. It does not encapsulate all the values of all the members of Start9. - Instead, we attempt to enumerate those values which represent the fulfillment of our mission and which are practically - within our ability to achieve. -

      -

      decentralization

      -

      Centralized systems act as single points of failure and are susceptible to corruption. Decentralized systems afford - greater robustness and soundness guarantees.

      -

      openness

      -

      Everyone should have permissionless access to computing resources and tools, unrestricted by geography, ethnicity, or - belief.

      -

      community

      -

      The human experience is richest when shared amongst individuals who possessing common beliefs, values, and - activities, and that computers should facilitate the formation of communities.

      -

      privacy

      -

      There are four reasons that privacy is necessary for a free society and proper human existence: privacy (1) promotes - creativity and experimentation by minimizing the risk of embarrassment; (2) protects valuable information from theft and - extortion; (3) enables the diffusion of contrarian ideals and ideas; (4) serves as an insurance policy against the - future, in the event that what is acceptable today becomes unacceptable tomorrow.

      -

      independence

      -

      Being dependent means being unable to survive on your own. Like a child, it means needing others and relying on them - to provide for you, thus granting them power over you. A free and dignified human existence demands self-reliance: the - ability to think and act with efficacy to obtain one’s needs.

      -
      -
      -

      virtues

      -

      - Below are the virtues or qualities of character needed to achieve our values and accomplish our mission. -

      - -

      Audacity

      -

      A willingness to take bold risks.

      -

      Tenacity

      -

      Fierce determination and relentless effort.

      -

      Excellence

      -

      Setting high standards and never settling for less.

      -

      courtesy

      -

      Treating others politely, with kindness and due respect.

      -

      generocity

      -

      providing beyond what is necessary or expected.

      -

      fortitude

      -

      Having courage in the face of pain or adversity.

      -

      integrity

      -

      The virtue that underlies all others. The quality of being whole and genuine, intact and unbroken, internally - consistent, and adhering to principle in all cases.

      -
      -
      -

      origin story

      - -

      - Pokemon is a game for Gameboy. - Twitch is a live video streaming app. “Twitch Plays Pokemon” was a popular phenomenon where Twitch users would - collaborate to play a SHARED game of Pokemon on Gameboy. Here’s how it worked:

      -

      Participants would use the Twitch message board to enter commands that then got executed in the gameplay. For - example, if someone entered the command “right”, that would cause the player to move 1 space to the right. Commands - would execute immediately after they were received, and anyone could enter a valid command at any time. You can think of - Twitch Plays Pokemon as the more practical equivalent of placing a Gameboy in the middle of a crowded room and telling - everyone to push buttons at the same time. As you might expect, the gameplay of Twitch Plays Pokemon was quite - “twitchy”, but in a very “infinite monkey theory” way, progress could eventually be made.

      -

      - In an effort to streamline play, a new game mode was devised in which players would “vote” for the next - command and, every 4 seconds, whatever command received the most votes over the previous 4 seconds would execute in the - game. Also introduced in this mode was the ability to attach multipliers to a command, such that the command would - execute that number of times. For example, “right2” would cause the player to move 2 spaces to the right. “right3” would - cause the player to move 3 spaces to the right, and so on. The highest number any participant could place after a - command was 9, meaning whatever command they entered would execute 9 times. As you might expect, gameplay in this mode - was less chaotic, more efficient, but it also meant each participant had less direct and immediate influence over the - game. If a group of even 5-10 got together and colluded on their votes, they could practically take over the game and - make contrarian ideas irrelevant. The new game mode was called “Democracy”, and the original game mode became known as - “Anarchy”. Which game mode was engaged was itself governed by a democratic process: if more participants wanted to play - in Democracy mode, then Democracy mode engaged; if more wanted to play in Anarchy mode, then Anarchy mode engaged.

      -

      To summarize: - in Anarchy mode, everyone had equal influence over the game, but progress was slow and clunky. In - Democracy mode, progress was fast and efficient, but colluding groups could marginalize individual participants and ruin - the game for them.

      -

      So… individual participants - discovered a means of effective protest - whenever Democracy mode became suffocating, but they could not garner enough votes to switch back to Anarchy mode. - Someone would type the command “start9” into the comments. This command meant “open the start menu 9 times in a row”, - which, as you might imagine, would be enormously disruptive if executed. The entire screen would be blocked by the start - menu, over and over. Typing “start9” was a participant’s way of signaling to other participants that they felt - marginalized by Democracy mode, and they were ready to fight back. If others felt the same, they could also begin typing - “start9” - then, sure enough, “start9” would finally receive more votes than the colluding group’s command, and the menu - opening would begin. Every 4 seconds, the menu would open 9 times…again, and again, and again…until finally, the - colluding group would be forced to either cooperate in reverting the game mode back to Anarchy mode or quit altogether.

      -

      Playing in Anarchy mode was impractical, but people did not want to play a game where they had no voice, where a - group of insiders had taken total control. And so - “start9” became the battle cry of the individual, the out-group, a means of signaling to other - individuals that it was time to fight back against the usurpers - to use their own rules against them, until there was - no alternative but to return control to the individual participants.

      -
      -
      -

      our team

      - - {% block content %} -
      - -
      - {% endblock %} -
      \ No newline at end of file +
      +
      + + +
      + +
      +
      +

      Privacy and
      free speech are fundamental human rights and essential ingredients for a free society.

      +

      Human history demonstrates that, when entrusted to others, these rights are invariably denied, resulting in great + suffering. As such, it is necessary for individuals to protect their own privacy and right to speak freely. +

      +

      Fortunately, modern technologies, in the form of personal computers, encryption, and open, decentralized network + protocols such as the Internet and Bitcoin, make this a real possibility. +

      +

      What is needed is a revolution in personal computing away from the current, hosted, custodial model that breeds + dependency and corruption, towards a decentralized model, where individuals have absolute control over their data and + communications.

      +
      +
      +

      mission

      +
      +
      + + +
      +

      To eliminate the need for trusted third parties in the human/computer relationship.

      +
      + + +
      +
      + {# #} +
      +
      +

      values

      +
      + + +
      +

      + This list of values is not comprehensive. It does not encapsulate all the values of all the members of Start9. + Instead, we attempt to enumerate those values which represent the fulfillment of our mission and which are practically + within our ability to achieve. +

      +

      decentralization

      +

      Centralized systems act as single points of failure and are susceptible to corruption. Decentralized systems afford + greater robustness and soundness guarantees.

      +

      openness

      +

      Everyone should have permissionless access to computing resources and tools, unrestricted by geography, ethnicity, or + belief.

      +

      community

      +

      The human experience is richest when shared amongst individuals who possessing common beliefs, values, and + activities, and that computers should facilitate the formation of communities.

      +

      privacy

      +

      There are four reasons that privacy is necessary for a free society and proper human existence: privacy (1) promotes + creativity and experimentation by minimizing the risk of embarrassment; (2) protects valuable information from theft and + extortion; (3) enables the diffusion of contrarian ideals and ideas; (4) serves as an insurance policy against the + future, in the event that what is acceptable today becomes unacceptable tomorrow.

      +

      independence

      +

      Being dependent means being unable to survive on your own. Like a child, it means needing others and relying on them + to provide for you, thus granting them power over you. A free and dignified human existence demands self-reliance: the + ability to think and act with efficacy to obtain one’s needs.

      +
      +
      +

      virtues

      +
      + + +
      +

      + Below are the virtues or qualities of character needed to achieve our values and accomplish our mission. +

      +

      Audacity

      +

      A willingness to take bold risks.

      +

      Tenacity

      +

      Fierce determination and relentless effort.

      +

      Excellence

      +

      Setting high standards and never settling for less.

      +

      courtesy

      +

      Treating others politely, with kindness and due respect.

      +

      generocity

      +

      providing beyond what is necessary or expected.

      +

      fortitude

      +

      Having courage in the face of pain or adversity.

      +

      integrity

      +

      The virtue that underlies all others. The quality of being whole and genuine, intact and unbroken, internally + consistent, and adhering to principle in all cases.

      +
      +
      +

      origin story

      +
      + + +
      +

      + Pokemon is a game for Gameboy. + Twitch is a live video streaming app. “Twitch Plays Pokemon” was a popular phenomenon where Twitch users would + collaborate to play a SHARED game of Pokemon on Gameboy. Here’s how it worked:

      +

      Participants would use the Twitch message board to enter commands that then got executed in the gameplay. For + example, if someone entered the command “right”, that would cause the player to move 1 space to the right. Commands + would execute immediately after they were received, and anyone could enter a valid command at any time. You can think of + Twitch Plays Pokemon as the more practical equivalent of placing a Gameboy in the middle of a crowded room and telling + everyone to push buttons at the same time. As you might expect, the gameplay of Twitch Plays Pokemon was quite + “twitchy”, but in a very “infinite monkey theory” way, progress could eventually be made.

      +

      + In an effort to streamline play, a new game mode was devised in which players would “vote” for the next + command and, every 4 seconds, whatever command received the most votes over the previous 4 seconds would execute in the + game. Also introduced in this mode was the ability to attach multipliers to a command, such that the command would + execute that number of times. For example, “right2” would cause the player to move 2 spaces to the right. “right3” would + cause the player to move 3 spaces to the right, and so on. The highest number any participant could place after a + command was 9, meaning whatever command they entered would execute 9 times. As you might expect, gameplay in this mode + was less chaotic, more efficient, but it also meant each participant had less direct and immediate influence over the + game. If a group of even 5-10 got together and colluded on their votes, they could practically take over the game and + make contrarian ideas irrelevant. The new game mode was called “Democracy”, and the original game mode became known as + “Anarchy”. Which game mode was engaged was itself governed by a democratic process: if more participants wanted to play + in Democracy mode, then Democracy mode engaged; if more wanted to play in Anarchy mode, then Anarchy mode engaged.

      +

      To summarize: + in Anarchy mode, everyone had equal influence over the game, but progress was slow and clunky. In + Democracy mode, progress was fast and efficient, but colluding groups could marginalize individual participants and ruin + the game for them.

      +

      So… individual participants + discovered a means of effective protest + whenever Democracy mode became suffocating, but they could not garner enough votes to switch back to Anarchy mode. + Someone would type the command “start9” into the comments. This command meant “open the start menu 9 times in a row”, + which, as you might imagine, would be enormously disruptive if executed. The entire screen would be blocked by the start + menu, over and over. Typing “start9” was a participant’s way of signaling to other participants that they felt + marginalized by Democracy mode, and they were ready to fight back. If others felt the same, they could also begin typing + “start9” - then, sure enough, “start9” would finally receive more votes than the colluding group’s command, and the menu + opening would begin. Every 4 seconds, the menu would open 9 times…again, and again, and again…until finally, the + colluding group would be forced to either cooperate in reverting the game mode back to Anarchy mode or quit altogether.

      +

      Playing in Anarchy mode was impractical, but people did not want to play a game where they had no voice, where a + group of insiders had taken total control. And so + “start9” became the battle cry of the individual, the out-group, a means of signaling to other + individuals that it was time to fight back against the usurpers - to use their own rules against them, until there was + no alternative but to return control to the individual participants.

      +
      +
      +

      our team

      +
      + + +
      + {% block content %} +
      + +
      + {% endblock %} +
      \ No newline at end of file diff --git a/src/assets/images/about-hero.png b/src/assets/images/about-hero.png new file mode 100644 index 0000000..ccd951a Binary files /dev/null and b/src/assets/images/about-hero.png differ diff --git a/src/assets/images/bigtech2.png b/src/assets/images/bigtech2.png new file mode 100644 index 0000000..5201e5e Binary files /dev/null and b/src/assets/images/bigtech2.png differ diff --git a/src/assets/images/bigtech3.png b/src/assets/images/bigtech3.png new file mode 100644 index 0000000..a2225d2 Binary files /dev/null and b/src/assets/images/bigtech3.png differ diff --git a/src/assets/images/code1.png b/src/assets/images/code1.png index 20e4144..77b1a68 100644 Binary files a/src/assets/images/code1.png and b/src/assets/images/code1.png differ diff --git a/src/assets/images/code1.png~ b/src/assets/images/code1.png~ new file mode 100644 index 0000000..20e4144 Binary files /dev/null and b/src/assets/images/code1.png~ differ diff --git a/src/assets/images/mission1.png b/src/assets/images/mission1.png new file mode 100644 index 0000000..4ec2a73 Binary files /dev/null and b/src/assets/images/mission1.png differ diff --git a/src/assets/images/mission1.png~ b/src/assets/images/mission1.png~ new file mode 100644 index 0000000..dbbcaff Binary files /dev/null and b/src/assets/images/mission1.png~ differ diff --git a/src/assets/images/mission2.png b/src/assets/images/mission2.png new file mode 100644 index 0000000..453deee Binary files /dev/null and b/src/assets/images/mission2.png differ diff --git a/src/assets/images/mission2.png~ b/src/assets/images/mission2.png~ new file mode 100644 index 0000000..28db488 Binary files /dev/null and b/src/assets/images/mission2.png~ differ diff --git a/src/assets/images/mission3.png b/src/assets/images/mission3.png new file mode 100644 index 0000000..0ce6536 Binary files /dev/null and b/src/assets/images/mission3.png differ diff --git a/src/assets/images/origin.png b/src/assets/images/origin.png new file mode 100644 index 0000000..fa13fba Binary files /dev/null and b/src/assets/images/origin.png differ diff --git a/src/assets/images/origin.png~ b/src/assets/images/origin.png~ new file mode 100644 index 0000000..18f947b Binary files /dev/null and b/src/assets/images/origin.png~ differ diff --git a/src/assets/images/privacy1.png b/src/assets/images/privacy1.png new file mode 100644 index 0000000..21118a3 Binary files /dev/null and b/src/assets/images/privacy1.png differ diff --git a/src/assets/images/privacy1.png~ b/src/assets/images/privacy1.png~ new file mode 100644 index 0000000..2614a82 Binary files /dev/null and b/src/assets/images/privacy1.png~ differ diff --git a/src/assets/images/service-icons/balanceofsatoshis.png b/src/assets/images/service-icons/balanceofsatoshis.png new file mode 100644 index 0000000..fe558a8 Binary files /dev/null and b/src/assets/images/service-icons/balanceofsatoshis.png differ diff --git a/src/assets/images/service-icons/bitcoind.png b/src/assets/images/service-icons/bitcoind.png new file mode 100644 index 0000000..c6dc195 Binary files /dev/null and b/src/assets/images/service-icons/bitcoind.png differ diff --git a/src/assets/images/service-icons/btc-rpc-proxy.png b/src/assets/images/service-icons/btc-rpc-proxy.png new file mode 100644 index 0000000..88a7699 Binary files /dev/null and b/src/assets/images/service-icons/btc-rpc-proxy.png differ diff --git a/src/assets/images/service-icons/btcpayserver.png b/src/assets/images/service-icons/btcpayserver.png new file mode 100644 index 0000000..c9ca50f Binary files /dev/null and b/src/assets/images/service-icons/btcpayserver.png differ diff --git a/src/assets/images/service-icons/c-lightning.png b/src/assets/images/service-icons/c-lightning.png new file mode 100644 index 0000000..293fc97 Binary files /dev/null and b/src/assets/images/service-icons/c-lightning.png differ diff --git a/src/assets/images/service-icons/electrs.png b/src/assets/images/service-icons/electrs.png new file mode 100644 index 0000000..7020d52 Binary files /dev/null and b/src/assets/images/service-icons/electrs.png differ diff --git a/src/assets/images/service-icons/lightning-jet.png b/src/assets/images/service-icons/lightning-jet.png new file mode 100644 index 0000000..2c158b6 Binary files /dev/null and b/src/assets/images/service-icons/lightning-jet.png differ diff --git a/src/assets/images/service-icons/lightning-terminal.png b/src/assets/images/service-icons/lightning-terminal.png new file mode 100644 index 0000000..e5863a4 Binary files /dev/null and b/src/assets/images/service-icons/lightning-terminal.png differ diff --git a/src/assets/images/service-icons/lnd.png b/src/assets/images/service-icons/lnd.png new file mode 100644 index 0000000..ccd8087 Binary files /dev/null and b/src/assets/images/service-icons/lnd.png differ diff --git a/src/assets/images/service-icons/lndg.png b/src/assets/images/service-icons/lndg.png new file mode 100644 index 0000000..e1e242a Binary files /dev/null and b/src/assets/images/service-icons/lndg.png differ diff --git a/src/assets/images/service-icons/mastodon.png b/src/assets/images/service-icons/mastodon.png new file mode 100644 index 0000000..2650a07 Binary files /dev/null and b/src/assets/images/service-icons/mastodon.png differ diff --git a/src/assets/images/service-icons/mempool.png b/src/assets/images/service-icons/mempool.png new file mode 100644 index 0000000..de0596d Binary files /dev/null and b/src/assets/images/service-icons/mempool.png differ diff --git a/src/assets/images/service-icons/ride-the-lightning.png b/src/assets/images/service-icons/ride-the-lightning.png new file mode 100644 index 0000000..7c4ee0f Binary files /dev/null and b/src/assets/images/service-icons/ride-the-lightning.png differ diff --git a/src/assets/images/service-icons/spark-wallet.png b/src/assets/images/service-icons/spark-wallet.png new file mode 100644 index 0000000..489cfa2 Binary files /dev/null and b/src/assets/images/service-icons/spark-wallet.png differ diff --git a/src/assets/images/service-icons/specter.png b/src/assets/images/service-icons/specter.png new file mode 100644 index 0000000..72f425c Binary files /dev/null and b/src/assets/images/service-icons/specter.png differ diff --git a/src/assets/images/service-icons/sphinx-relay.png b/src/assets/images/service-icons/sphinx-relay.png new file mode 100644 index 0000000..dd82d68 Binary files /dev/null and b/src/assets/images/service-icons/sphinx-relay.png differ diff --git a/src/assets/images/service-icons/synapse.png b/src/assets/images/service-icons/synapse.png new file mode 100644 index 0000000..a6850cb Binary files /dev/null and b/src/assets/images/service-icons/synapse.png differ diff --git a/src/assets/images/service-icons/thunderhub.png b/src/assets/images/service-icons/thunderhub.png new file mode 100644 index 0000000..af7286f Binary files /dev/null and b/src/assets/images/service-icons/thunderhub.png differ diff --git a/src/assets/images/service-icons/vaultwarden.png b/src/assets/images/service-icons/vaultwarden.png new file mode 100644 index 0000000..9aa7141 Binary files /dev/null and b/src/assets/images/service-icons/vaultwarden.png differ diff --git a/src/assets/images/team.png b/src/assets/images/team.png new file mode 100644 index 0000000..48e9a88 Binary files /dev/null and b/src/assets/images/team.png differ diff --git a/src/assets/images/team.png~ b/src/assets/images/team.png~ new file mode 100644 index 0000000..6276248 Binary files /dev/null and b/src/assets/images/team.png~ differ diff --git a/src/assets/images/values.png b/src/assets/images/values.png new file mode 100644 index 0000000..21118a3 Binary files /dev/null and b/src/assets/images/values.png differ diff --git a/src/assets/images/virtues.png b/src/assets/images/virtues.png new file mode 100644 index 0000000..d02ddee Binary files /dev/null and b/src/assets/images/virtues.png differ diff --git a/src/assets/images/virtues.png~ b/src/assets/images/virtues.png~ new file mode 100644 index 0000000..77a2569 Binary files /dev/null and b/src/assets/images/virtues.png~ differ diff --git a/src/assets/js/main.js b/src/assets/js/main.js index c54a971..2d0a322 100644 --- a/src/assets/js/main.js +++ b/src/assets/js/main.js @@ -3,39 +3,59 @@ gsap.registerPlugin(CustomEase); var bodyRect = document.body.getBoundingClientRect(); -var sections = [ - "pitch", - "products", - "infographics", - "bitcoin", - "be-your-own", - "powered-by", - "support", - "dev", - "community" -] +const sections = [ + "pitch", + "products", + "infographics", + "bitcoin", + "be-your-own", + "powered-by", + "support", + "dev", + "community", +]; + +const bitcoinServices = [ + "balanceofsatoshis", + "bitcoind", + "btc-rpc-proxy", + "btcpayserver", + "c-lightning", + "electrs", + "lightning-jet", + "lnd", + "lightning-terminal", + "lndg", + "mempool", + "ride-the-lightning", + "spark-wallet", + "specter", + "sphinx-relay", + "thunderhub", +]; ////////////////////////////////////////// // AUTO APPLY URL ANCHORS -setTimeout(function() { - - // timeout to allow initial load to redirect to anchor - // TODO: maybe apply the scroll-behavior: smooth to HTML after a timeout - - sections.forEach(slug => { - ScrollTrigger.create({ - trigger: "#" + slug, - start: "top center", - end: "bottom center", - markers: {startColor: "white", endColor: "white"}, - onEnter: () => { window.location.href = "#" + slug; }, - onEnterBack: () => { window.location.href = "#" + slug; } - }); - }); - - }, 2000); +// setTimeout(function () { +// // timeout to allow initial load to redirect to anchor +// // TODO: maybe apply the scroll-behavior: smooth to HTML after a timeout +// sections.forEach((slug) => { +// ScrollTrigger.create({ +// trigger: "#" + slug, +// start: "top center", +// end: "bottom center", +// //markers: { startColor: "white", endColor: "white" }, +// onEnter: () => { +// window.location.href = "#" + slug; +// }, +// onEnterBack: () => { +// window.location.href = "#" + slug; +// }, +// }); +// }); +// }, 2000); ////////////////////////////////////////// // MENU @@ -45,22 +65,24 @@ let menuOpen = document.getElementById("menu-open"), openedMenuArray = gsap.utils.toArray(".opened-menu"), closedMenuArray = gsap.utils.toArray(".closed-menu"); -menuOpen.addEventListener("click", () => openMenu()); -menuClose.addEventListener("click", () => closeMenu()); +menuOpen.addEventListener("click", (e) => openMenu(e)); +menuClose.addEventListener("click", (e) => closeMenu(e)); -function openMenu() { +function openMenu(e) { + e.preventDefault(); gsap.to("#menu", { y: "0vh" }); - gsap.to("main", { y: "0vh" }); + gsap.to("main", { y: "100vh" }); gsap.to(openedMenuArray, { x: "0", opacity: 1, width: "auto" }); gsap.to(closedMenuArray, { x: "3rem", opacity: 0, width: 0 }); - gsap.to("html", { overflow: "hidden"}); + gsap.to("html", { overflow: "hidden" }); } -function closeMenu() { +function closeMenu(e) { + e.preventDefault(); gsap.to("#menu", { y: "-100vh" }); - gsap.to("main", { y: "-100vh" }); + gsap.to("main", { y: "0vh" }); gsap.to(closedMenuArray, { x: "0", opacity: 1, width: "auto" }); gsap.to(openedMenuArray, { x: "3rem", opacity: 0, width: 0 }); - gsap.to("html", { overflow: "overlay"}); + gsap.to("html", { overflow: "overlay" }); } ////////////////////////////////////////// @@ -86,20 +108,17 @@ gsap.from("#logo", { duration: 0.5, y: "-5rem", opacity: 0, delay: 0.75 }); // backdrop-filter: blur(10px); //background-color: rgba(0,0,0,0.1); -gsap.to( - "header", - { - duration: 0.5, - backgroundColor: "rgba(0,0,0,0.1)", - backdropFilter: "blur(10px)", - scrollTrigger: { - trigger: "#hero-image", - scrub: true, - start: "center top", // "triggerElement page" - end: "bottom top", // "triggerElement page" - }, - } -); +gsap.to("header", { + duration: 0.5, + backgroundColor: "rgba(0,0,0,0.1)", + backdropFilter: "blur(10px)", + scrollTrigger: { + trigger: "#hero-image", + scrub: true, + start: "center top", // "triggerElement page" + end: "bottom top", // "triggerElement page" + }, +}); ////////////////////////////////////////// // PITCH @@ -124,8 +143,8 @@ gsap.from("#hero-to-pitch path:first-child", { scrollTrigger: { trigger: "#hero-to-pitch", scrub: true, - start: "top center", - end: "bottom center", + start: "top center", // "triggerElement page" + end: "bottom center", // "triggerElement page" }, }); @@ -135,8 +154,8 @@ gsap.from("#products-to-info path:first-child", { scrollTrigger: { trigger: "#products-to-info path:first-child", scrub: true, - start: "top center", - end: "bottom center", + start: "top center", // "triggerElement page" + end: "bottom center", // "triggerElement page" }, }); @@ -146,11 +165,81 @@ gsap.from("#products-to-info path:nth-child(2)", { scrollTrigger: { trigger: "#products-to-info path:nth-child(2)", scrub: true, - start: "top center", - end: "bottom center", + start: "top center", // "triggerElement page" + end: "bottom center", // "triggerElement page" }, }); +gsap.from("#products-to-info path:nth-child(3)", { + drawSVG: 0, + ease: "none", + scrollTrigger: { + trigger: "#products-to-info path:nth-child(3)", + scrub: true, + start: "top center", // "triggerElement page" + end: "bottom center", // "triggerElement page" + }, +}); + +// BITCOIN + +function getRandomInt(min, max) { + min = Math.ceil(min); + max = Math.floor(max); + return Math.floor(Math.random() * (max - min + 1)) + min; +} + +function getRandomNumber(min, max) { + return Math.random() * (max - min) + min; +} + +bitcoinServices.forEach((service) => { + const serviceElement = document.querySelector(".service-icon--" + service); + const bitcoinSectionElement = document.querySelector("#bitcoin"); + const upOrDown = getRandomInt(0, 1); + const bitcoinHeight = bitcoinSectionElement.clientHeight; + + serviceElement + ? (serviceElement.style.left = getRandomInt(5, 90) + "vw") + : ""; + + if (upOrDown) { + gsap.set(".service-icon--" + service, { + y: getRandomInt(0, bitcoinHeight / 2) + "px", + }); + gsap.to(".service-icon--" + service, { + y: getRandomInt(bitcoinHeight / 2, bitcoinHeight) + "px", + //x: getRandomInt(0, 100) + "vw", + ease: "in", + delay: getRandomNumber(0, 1), + scrollTrigger: { + trigger: "#bitcoin", + scrub: true, + start: "top 25%", // "triggerElement page" + end: "90% center", // "triggerElement page" + //markers: { startColor: "lime", endColor: "lime" }, + }, + }); + } else { + gsap.set(".service-icon--" + service, { + y: getRandomInt(bitcoinHeight / 2, bitcoinHeight) + "px", + }); + gsap.to(".service-icon--" + service, { + y: getRandomInt(0, bitcoinHeight / 2) + "px", + //x: getRandomInt(0, 100) + "vw", + ease: "in", + delay: getRandomNumber(0, 1), + scrollTrigger: { + trigger: "#bitcoin", + scrub: true, + start: "top bottom", // "triggerElement page" + end: "90% center", // "triggerElement page" + //markers: { startColor: "orange", endColor: "orange" }, + }, + }); + } +}); + gsap.from("#bitcoin-to-be path", { drawSVG: 0, ease: "none", @@ -162,8 +251,10 @@ gsap.from("#bitcoin-to-be path", { }, }); -let imgs = gsap.utils.toArray(".pseudoservice"), - next = 1.5, // time to change +// BE YOUR OWN + +let pseudoserviceArray = gsap.utils.toArray(".pseudoservice"), + next = 3, // time to change itemHeight = document .querySelector(".pseudoservice") .getBoundingClientRect().height, @@ -183,20 +274,187 @@ let imgs = gsap.utils.toArray(".pseudoservice"), function crossfade() { var action = gsap .timeline() - .to(imgs, { y: "-=" + itemHeight, duration: 1, ease: kerplunk2 }) - .to(imgs[0], { y: "+=" + listHeight, duration: 0 }); // the first to the end + .to(pseudoserviceArray, { + y: "-=" + itemHeight, + duration: 1, + ease: kerplunk2, + }) + .to(pseudoserviceArray[0], { y: "+=" + listHeight, duration: 0 }); // the first to the end - imgs.push(imgs.shift()); // the first (shift) to the end (push) from the array - //console.log(imgs); + pseudoserviceArray.push(pseudoserviceArray.shift()); // the first (shift) to the end (push) from the array + //console.log(pseudoserviceArray); //console.log(itemHeight); // start endless run gsap.delayedCall(next, crossfade); + + var thisPseudoservice = pseudoserviceArray[2].innerHTML, + thisElement = document.querySelector( + ".slides-container--" + thisPseudoservice.toLowerCase() + ); + + var slidesContainerArray = document.querySelectorAll(".slides-container"); + slidesContainerArray.forEach((thisContainer) => { + thisContainer.style.display = "none"; + }); + + if (thisElement) { + thisElement.style.display = "flex"; + } } // start the crossfade after next = 3 sec gsap.delayedCall(next, crossfade); +// CAROUSEL + +var slideDelay = 1.5; +var slideDuration = 0.3; +var wrap = true; + +var slides = document.querySelectorAll(".slide"); +var prevButton = document.querySelector("#prevButton"); +var nextButton = document.querySelector("#nextButton"); +var progressWrap = gsap.utils.wrap(0, 1); + +var numSlides = slides.length; + +gsap.set(slides, { + xPercent: (i) => i * 100, +}); + +var wrapX = gsap.utils.wrap(-100, (numSlides - 1) * 100); + +var animation = gsap.to(slides, { + xPercent: "+=" + numSlides * 100, + duration: 1, + ease: "none", + paused: true, + repeat: -1, + modifiers: { + xPercent: wrapX, + }, +}); + +var proxy = document.createElement("div"); +var slideAnimation = gsap.to({}, {}); +var slideWidth = 0; +var wrapWidth = 0; + +resize(); + +window.addEventListener("resize", resize); + +prevButton.addEventListener("click", function () { + animateSlides(1); +}); + +nextButton.addEventListener("click", function () { + animateSlides(-1); +}); + +function updateDraggable() { + slideAnimation.kill(); + this.update(); +} + +function animateSlides(direction) { + slideAnimation.kill(); + var x = snapX(gsap.getProperty(proxy, "x") + direction * slideWidth); + + slideAnimation = gsap.to(proxy, { + x: x, + duration: slideDuration, + onUpdate: updateProgress, + }); +} + +function updateProgress() { + animation.progress(progressWrap(gsap.getProperty(proxy, "x") / wrapWidth)); +} + +function snapX(value) { + let snapped = gsap.utils.snap(slideWidth, value); + return wrap + ? snapped + : gsap.utils.clamp(-slideWidth * (numSlides - 1), 0, snapped); +} + +function resize() { + var norm = gsap.getProperty(proxy, "x") / wrapWidth || 0; + + slideWidth = slides[0].offsetWidth; + wrapWidth = slideWidth * numSlides; + + wrap; // || draggable.applyBounds({minX: -slideWidth * (numSlides - 1), maxX: 0}); + + gsap.set(proxy, { + x: norm * wrapWidth, + }); + + animateSlides(0); + slideAnimation.progress(1); +} + + + +gsap.from("#bitcoin-to-be path", { + drawSVG: 0, + ease: "none", + scrollTrigger: { + trigger: "#bitcoin-to-be path", + scrub: true, + start: "top center", + end: "bottom center", + }, +}); + +gsap.from("#be-to-powered path", { + drawSVG: 0, + ease: "none", + scrollTrigger: { + trigger: "#be-to-powered path", + scrub: true, + start: "top center", + end: "bottom center", + }, +}); + +gsap.from("#powered-to-support path", { + drawSVG: 0, + ease: "none", + scrollTrigger: { + trigger: "#powered-to-support path", + scrub: true, + start: "top center", + end: "bottom center", + }, +}); + +gsap.from("#support-to-dev path", { + drawSVG: 0, + ease: "none", + scrollTrigger: { + trigger: "#support-to-dev path", + scrub: true, + start: "top center", + end: "bottom center", + }, +}); + +gsap.from("#dev-to-contact path", { + drawSVG: 0, + ease: "none", + scrollTrigger: { + trigger: "#dev-to-contact path", + scrub: true, + start: "top center", + end: "bottom center", + }, +}); + + + //Librarys /* diff --git a/src/assets/js/peripheral.js b/src/assets/js/peripheral.js new file mode 100644 index 0000000..153dde0 --- /dev/null +++ b/src/assets/js/peripheral.js @@ -0,0 +1,14 @@ +gsap.to( + "header", + { + duration: 0.5, + backgroundColor: "rgba(0,0,0,0.1)", + backdropFilter: "blur(10px)", + scrollTrigger: { + trigger: "#hero-image", + scrub: true, + start: "center top", // "triggerElement page" + end: "bottom top", // "triggerElement page" + }, + } + ); \ No newline at end of file diff --git a/src/assets/styles/be-your-own.scss b/src/assets/styles/be-your-own.scss index 82f5e11..785ab4c 100644 --- a/src/assets/styles/be-your-own.scss +++ b/src/assets/styles/be-your-own.scss @@ -3,7 +3,7 @@ flex-direction: column; align-items: center; gap: 6rem; - margin: 0 0 6rem 0; + //margin: 0 0 6rem 0; padding: 0 6rem 6rem 6rem; box-sizing: border-box; width: 100%; @@ -66,7 +66,7 @@ } } - ul.services{ + .services{ position: absolute; top: calc(3 * var(--line)); background-color: #353535; @@ -74,9 +74,73 @@ width: calc(11.5ch - 4rem); font-size: var(--size); left: -1rem; + + img{ + border-radius: 100%; + width: 5rem; + } + + .service{ + display: flex; + align-items: center; + + .service__link{ + color: var(--c-1); + font-size: 1rem; + font-weight: 400; + display: flex; + align-items: center; + gap: 1rem; + } + } } } a.btn{ align-self: center; } } + +.slides-controls { + padding: 10px; + display: flex; + align-items: center; + justify-content: center; + height: 70px; + min-height: 70px; + gap: 2rem; + + button{ + background: none; + padding: 0; + border: 0; + cursor: pointer; + } +} + +.slides-container { + position: relative; + overflow: hidden; + display: none; + flex: 1; +} + +.slide { + position: absolute; + font-size: 90px; + font-weight: 700; + color: rgba(255,255,255,0.9); + display: flex; + align-items: center; + justify-content: center; + height: 100%; + + width: calc(100% / 3); + width: 100%; +} + +.slides-inner { + position: relative; + height: 7rem; + width: 100%; + overflow: hidden; +} \ No newline at end of file diff --git a/src/assets/styles/bitcoin.scss b/src/assets/styles/bitcoin.scss index 747ed48..158b9e7 100644 --- a/src/assets/styles/bitcoin.scss +++ b/src/assets/styles/bitcoin.scss @@ -11,20 +11,20 @@ section#bitcoin { z-index: -1; margin-bottom: -10rem; - &::before{ - content: ''; + &::before { + content: ""; width: 100%; height: 100vh; - background-image: linear-gradient(#33333300,var(--c-bkg)); + background-image: linear-gradient(#33333300, var(--c-bkg)); position: absolute; top: -100vh; } - &::after{ - content: ''; + &::after { + content: ""; width: 100%; height: 100vh; - background-image: linear-gradient(var(--c-bkg),#33333300); + background-image: linear-gradient(var(--c-bkg), #33333300); position: absolute; bottom: -100vh; } @@ -50,13 +50,13 @@ section#bitcoin { p { max-width: min(35ch, 50vw); - em{ + em { color: var(--c-1); font-weight: 700; } } - .subsection{ + .subsection { padding: 0 6rem; } @@ -69,15 +69,94 @@ section#bitcoin { display: flex; flex-direction: column; align-items: flex-end; - h1, p{ + h1, + p { text-align: right; } } - a.btn{ + a.btn { background-color: var(--c-1); - color:var(--c-6); + color: var(--c-6); border-color: var(--c-6); font-size: 1.2rem; } + + #flying-icons{ + position: absolute; + top: 0; + left:0; + right: 0; + bottom: 0; + overflow: hidden; + } + + .service-icon { + border-radius: 100%; + position: absolute; + top:0; + left:0; + z-index: -2; + backdrop-filter: blur(48px); + mix-blend-mode: soft-light; + box-shadow: 0 37px 50px rgb(0 0 0 / 20%); + + &.service-icon--spectre { + background-color: var(--c-1); + } + + &.service-icon--electrs { + background-color: var(--c-1); + padding: 1rem; + } + + &.service-icon--balanceofsatoshis { + width: 5rem; + } + &.service-icon--bitcoind { + width: auto; + } + &.service-icon--btc-rpc-proxy { + width: 9rem; + } + &.service-icon--btcpay-server { + width: 6rem; + } + &.service-icon--c-lightning { + width: auto; + } + &.service-icon--electrs { + width: 7rem; + } + &.service-icon--lightning-jet { + width: 6rem; + } + &.service-icon--lnd { + width: 10rem; + } + &.service-icon--lightning-terminal { + width: 7rem; + } + &.service-icon--lndg { + width: 9rem; + } + &.service-icon--mempool { + width: 8rem; + } + &.service-icon--ride-the-lightning { + width: 8rem; + } + &.service-icon--spark-wallet { + width: 7rem; + } + &.service-icon--specter { + width: 5rem; + } + &.service-icon--sphinx-relay { + width: 6rem; + } + &.service-icon--thunderhub { + width: 5rem; + } + } } diff --git a/src/assets/styles/dev.scss b/src/assets/styles/dev.scss index b0ddf07..a80d2f5 100644 --- a/src/assets/styles/dev.scss +++ b/src/assets/styles/dev.scss @@ -2,7 +2,7 @@ display: flex; flex-direction: column; align-items: center; - min-height: calc(100vh - 2 * var(--section-padding)); + //min-height: calc(100vh - 2 * var(--section-padding)); padding: var(--section-padding) 6rem; h2{ margin: 0; diff --git a/src/assets/styles/footer.scss b/src/assets/styles/footer.scss index 1bcf883..d3266d2 100644 --- a/src/assets/styles/footer.scss +++ b/src/assets/styles/footer.scss @@ -1,7 +1,9 @@ footer{ //position: absolute; padding: 0; - .footer-content{ + font-weight: 400; + color: gray; + .footer__content{ display: flex; .header{ align-self: flex-start; @@ -91,6 +93,11 @@ footer{ } } +.footer__canary{ + text-align: center; + padding: 2rem; +} + @media only screen and (max-width: 1200px) { footer .groups li > a { font-size: 2.2vw; diff --git a/src/assets/styles/infographics.scss b/src/assets/styles/infographics.scss index c3aca87..9de63dd 100644 --- a/src/assets/styles/infographics.scss +++ b/src/assets/styles/infographics.scss @@ -10,13 +10,16 @@ section#infographics{ gap: 3rem; padding: 6rem; svg{ - width: 100%; + width: 110%; } &:first-child{ background-color: black; } &:last-child{ background-color: white; + svg{ + width: 80%; + } } } } \ No newline at end of file diff --git a/src/assets/styles/landing.scss b/src/assets/styles/landing.scss index 9c25171..ad33b61 100644 --- a/src/assets/styles/landing.scss +++ b/src/assets/styles/landing.scss @@ -78,24 +78,6 @@ section { max-height: 75vh; } -.img-shadow { - filter: blur(2rem) brightness(0); - z-index: -1; - position: absolute; - top: 5rem; - opacity: .5; -} - -#hero-image { - position: relative; - display: flex; - img { - width: 50rem; - max-width: 90vw; - margin-top: 4rem; - } -} - nav { color: var(--c-text-primary); } @@ -183,6 +165,7 @@ p { em { font-style: normal; color: var(--c-text-accent); + font-weight: 400; } } diff --git a/src/assets/styles/main.scss b/src/assets/styles/main.scss index d09c964..ba4283c 100644 --- a/src/assets/styles/main.scss +++ b/src/assets/styles/main.scss @@ -79,7 +79,7 @@ body{ } main{ - transform: translateY(-100vh); + //transform: translateY(-100vh); } a { @@ -106,7 +106,7 @@ ul { header{ position: fixed; width: 100vw; - z-index: 1; + z-index: 2; } nav{ --padding: 1rem; @@ -130,9 +130,16 @@ nav{ color: var(--c-text-bright); font-size: 1.5rem; padding: 0em 0.5em 0em 0.5em; + &.em{ background-color: var(--c-text-accent); - + &:hover{ + color: var(--c-text-accent); + background-color: var(--c-text-bright); + } + } + &:hover{ + color: var(--c-text-accent); } } } @@ -163,4 +170,22 @@ nav{ .closed-menu { //overflow: hidden; white-space: nowrap; -} \ No newline at end of file +} + +#hero-image { + position: relative; + display: flex; + img { + width: 50rem; + max-width: 90vw; + margin-top: 4rem; + } + } + +.img-shadow { + filter: blur(2rem) brightness(0); + z-index: -1; + position: absolute; + top: 5rem; + opacity: .5; + } \ No newline at end of file diff --git a/src/assets/styles/menu.scss b/src/assets/styles/menu.scss index a886adc..a4fce96 100644 --- a/src/assets/styles/menu.scss +++ b/src/assets/styles/menu.scss @@ -1,5 +1,6 @@ #menu{ - //position: absolute; + position: fixed; + z-index: 1; padding: 0; width: 100vw; height:100vh; diff --git a/src/assets/styles/news.scss b/src/assets/styles/news.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/assets/styles/peripheral.scss b/src/assets/styles/peripheral.scss index 661e78a..289b189 100644 --- a/src/assets/styles/peripheral.scss +++ b/src/assets/styles/peripheral.scss @@ -1,97 +1,172 @@ -main{ - margin-top: 10rem; +main { + margin-top: 7rem; + display: flex; + flex-direction: column; + align-items: center; + overflow-x: clip; +} + +section { + --width: 42ch; + --side-padding: 3rem; + font-family: "Montserrat"; + font-weight: 300; + font-size: 1rem; + width: var(--width); + padding: 7rem var(--side-padding); + position: relative; + overflow: visible; + &:nth-of-type(2n + 3) { + &::before { + content: ""; + position: absolute; + top: 0; + bottom: 0; + left: calc(-1 * ((100vw - var(--width)) / 2) + var(--side-padding)); + width: 100vw; + background-color: #212121; + z-index: -1; + } + } + .section__image { display: flex; flex-direction: column; align-items: center; + margin: 2rem 0; + position: relative; + img { + width: 50%; + } + .img-shadow { + top: 3rem; + filter: blur(1rem) brightness(0); + } + } + + display: flex; + flex-direction: column; + //align-items: center; + //outline: 1px solid orange; } -section{ - --width: 42ch; - --side-padding: 3rem; - font-family: "Montserrat"; - font-weight: 300; - font-size: 1rem; - width: var(--width); - padding: 10rem var(--side-padding); - position: relative; - overflow:visible; - &:nth-of-type(even){ - &::before{ - content: ''; - position: absolute; - top: 0; - bottom: 0; - left: calc(-1 * ((100vw - var(--width)) / 2) + var(--side-padding)); - width: 100vw; - background-color: #212121; - z-index: -1; - } +section#hero { + display: flex; + align-items: center; + padding-top: 0; + padding-bottom: 0; + gap: 5rem; + width: calc(100vw - (2 * var(--side-padding))); + justify-content: center; + flex-direction: row; + + &::before { + content: none; + } + + h1 { + width: 100%; + } +} + +@media only screen and (max-width: 1245px) { + section#hero { + flex-direction: column; } + } + +section#virtues { + .section__image img { + width: 75%; + } +} + +.section__double-image { + position: relative; + .section__image{ + position: absolute; + top:-140%; + width:100%; + } + .section__image--left{ + left:-105%; + align-items: flex-end; + } + .section__image--right{ + right:-105%; + + align-items: flex-start; + } +} + +#hero-image img { + margin-top: 0; + width: 28rem; } h1 { - font-family: var(--f-hero); - font-size: 4.4rem; - width: 110%; - line-height: 1; + font-family: var(--f-hero); + font-size: 4.2rem; + width: 110%; + line-height: 1; } h2 { - font-family: var(--f-hero); - font-size: 3.7rem; - text-align: center; + font-family: var(--f-hero); + font-size: 3.7rem; + text-align: center; } section#blurb h2 { - font-size: 2.5rem; - color: var(--c-text-accent); - width: 110%; - line-height: 1; - text-align: left; - margin-bottom: 2rem; + font-size: 2.5rem; + color: var(--c-text-accent); + width: 110%; + line-height: 1; + text-align: left; + margin-bottom: 2rem; } h3 { - font-family: var(--f-hero); - font-size: 1.8rem; - width: 112%; + font-family: var(--f-hero); + font-size: 1.8rem; + width: 112%; } h4 { - font-weight: 800; + font-weight: 800; } -h3, h4 { - color: var(--c-text-accent); +h3, +h4 { + color: var(--c-text-accent); } -ul#sub-menu{ - display: flex; - justify-content: space-between; - width: 107%; - li a{ - font-family: var(--f-hero); - font-size: 1.2rem; - color: var(--c-text-primary); - text-transform: uppercase; - font-weight: 900; - white-space: nowrap; - transition: var(--t-simple); - &:hover{ - color: var(--c-text-accent); - } +ul#sub-menu { + display: flex; + justify-content: space-between; + width: 33rem; + li a { + font-family: var(--f-hero); + font-size: 1.2rem; + color: var(--c-text-primary); + text-transform: uppercase; + font-weight: 900; + white-space: nowrap; + transition: var(--t-simple); + &:hover { + color: var(--c-text-accent); } + } } -p{ - font-family: "Montserrat"; - font-weight: 300; - line-height: 1.9rem; - font-size: 1rem; - margin-top: 0.5rem; - margin-bottom: 2.5rem; +p { + font-family: "Montserrat"; + font-weight: 300; + line-height: 1.9rem; + font-size: 1rem; + margin-top: 0.5rem; + margin-bottom: 2.5rem; - strong{ - font-weight: 700; - } -} \ No newline at end of file + strong { + font-weight: 700; + } +} diff --git a/src/assets/styles/powered-by.scss b/src/assets/styles/powered-by.scss index cbec39c..df6e21c 100644 --- a/src/assets/styles/powered-by.scss +++ b/src/assets/styles/powered-by.scss @@ -50,7 +50,8 @@ section#powered-by { } } } - img { - width: 20rem; + svg { + width: 45rem; + margin-top: 6rem; } } \ No newline at end of file diff --git a/src/assets/styles/support.scss b/src/assets/styles/support.scss index 7290d3b..2696733 100644 --- a/src/assets/styles/support.scss +++ b/src/assets/styles/support.scss @@ -4,7 +4,7 @@ section#support { align-items: center; padding: 6rem; background: var(--c-1); - margin-bottom: 6rem; + //margin-bottom: 6rem; .cols { display: flex; align-items: center; @@ -16,10 +16,18 @@ section#support { } img { max-height: 40vh; + max-width: 100%; + transform: rotateZ(5deg); } @media only screen and (max-width: 1200px) { .cols{ flex-direction: column; + .col:nth-child(1){ + order: 2; + } + .col:nth-child(2){ + order: 1; + } } } } diff --git a/src/contact.njk b/src/contact.njk index 7dbdbfb..2e3e8f1 100644 --- a/src/contact.njk +++ b/src/contact.njk @@ -1,6 +1,18 @@ --- -title: About | Start9 -layout: layouts/base.njk +title: Contact | Start9 +layout: layouts/peripheral.njk --- -{% include "components/landing/community.njk" %} \ No newline at end of file +
      +
      + + +
      + +
      + +{% include "components/landing/_contact.njk" %} \ No newline at end of file diff --git a/src/index.njk b/src/index.njk index 90ba7e5..91b766f 100644 --- a/src/index.njk +++ b/src/index.njk @@ -58,12 +58,28 @@ layout: layouts/base.njk {% include "components/landing/be-your-own.njk" %} +
      + {% include "components/landing/lines/be-to-powered.svg" %} +
      + {% include "components/landing/powered-by.njk" %} +
      + {% include "components/landing/lines/powered-to-support.svg" %} +
      + {% include "components/landing/support.njk" %} +
      + {% include "components/landing/lines/support-to-dev.svg" %} +
      + {% include "components/landing/dev.njk" %} +
      + {% include "components/landing/lines/dev-to-contact.svg" %} +
      + {% include "components/landing/community.njk" %}