gistfile1.txt

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-back-button default-href="/episode-1"></ion-back-button>
        </ion-buttons>
        <ion-title>Missing Papers Moment</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
          <!-- div id="video-viewport">
            <video width="375" height="812" autoplay muted loop>
              <source src="/img/m-1-video-1.mp4" type="video/mp4" />
              <source src="/img/m-1-video-1.webm" type="video/webm" />
            </video>
          </div -->
        <img src="img/m1-1.jpg" class="moment-image" />
        <img src="img/m1-2.jpg" class="moment-image" />
        <img src="img/m1-3.jpg" class="moment-image" />
        <div style="background-color:#191211;margin-top:-40px;">
        
        <h1 class="moments-heading">breakdown</h1>
        <p class="moments-body-copy">
          THe moment you just read is <i><b>very important.</b></i> gou (pronounced “GO”) would be nothing without a project of his own. 
<br><br>
<b class="moments-highlight">Nodes</b> can represent different things. To Gou, NODE meant: prototype, which also meant, project.
<br><br>
NODE = PROTOTYPE = PROJECT
<br><br>
<b class="moments-highlight">prototype</b> all technology projects start off with a prototype. A prototype is like a model, or a first version. Often a prototype is created to pinpoint flaws in design and to learn. By finding mistakes in your first version, your second version will be better. A prototype is also a great way to kickstart your first project. It's the only way.  
<br><br>
<b class="moments-highlight">moments</b> represent “hacker way” adages. As you read this, thousands of really smart young people all over the world are also reading this. The ones who follow along will become heros. The ones who quit are on their own (and that’s ok). 
<br><br>
<b class="moments-highlight">Adages</b> are nothing more than short proverbs expressing general truth. basically, litttle stories anyone can understnd that pass down the culture of the hacker way.
<br><br>
as the first contributor to the gneek society, The very first symbol gou created for the gneeks to pass along to <u>you</u> was <b class="moments-highlight">node.</b>  </p>

  <h1 class="moments-heading white">node</h1>
      <p class="moments-body-copy last-section">

For as long as humans have been living we have been creating things using technology. the very first hammer was a tool, and at it’s time, it was considered “TECH” by those who never saw a hammer before. the wheel was once considered advanced technology also, and so were calendars. crazy huh?
<br><br>
The word node can mean many things -  node.js, node in a tree, a point in a path. all of life starts with at least one point. 
<br><br>
Other forms of math, physics and science are also part of tech. They always have been. The ancient mayans and egyptians made durable materials, harnessed number systems and had advanced knowledge of the solar system. they built massive structures using their advanced technology. 
<br><br>
today is a starting point for <b><u>you.</u></b>

</p>

      <div class="symbol-section">
        
        <h1 class="symbol-heading">COLLECT <span class="white">YOUR</span>
        FIRST SYMBOL</h1>
        <img src="/img/symbol-node.png" />
        <br>
        <ion-button  href="/episode-1-moment-1" color="light" expand="block">Collect Your First Symbol</ion-button>
    
      </div>

       <h1 class="moments-heading white">git</h1>
      <p class="moments-body-copy">

        if tech recruiters don’t see the word git somewhere on your resume, they won’t even take you seriuosly. 
<br><br>
<b class="moments-highlight">git</b> is a vault that technology people often use to keep their documents safely backed up in the cloud - just in case there’s every a problem or you write some bad code. 
<br><br>
once your project files are safely on git, you can then share them with other technology people so they can contribute. 
<br><br>
git and other repository systems like subversion and bitbucket gave rise to an explosion of open source technology, which in turn made technology inventors lives much easier. with a powerful open source library, someone like you could suddenly build the next “big thing” without the need for thousands of dollars or thousands of hours.
<br><br>
at some point, in order to truly follow the hacker way, you’ll need to create a github account and learn the <span class="warning">5 golden commands</span> of git. 
<br><br>
If you wan to continue unlocking your technology future, <a href="https://github.com/join" target="_blank">click this link</a> and create a github account. you will need it to sign in and continue.
<br><br>
after you log in with github you’ll <b class="moments-highlight">collect your 2nd symbol...</b> 
<br><br>

    <ion-button @click="setOpen(true, $event)">Show Popover</ion-button>
  <ion-popover
    :is-open="isOpenRef"
    css-class="my-custom-class"
    :event="event"
    :translucent="true"
    @onDidDismiss="setOpen(false)"
  >
    <Popover></Popover>
  </ion-popover>

        <ion-button  href="/episode-1-moment-1" color="light" expand="block">Sign in with Github</ion-button>

        </p>

        <br><br><br>
      </div>

    </ion-content>
  </ion-page>
</template>

<script>
import {
  IonBackButton,
  IonButtons,
  IonContent,
  IonHeader,
  IonPage,
  IonTitle,
  IonToolbar,
  IonButton,
  IonPopover
} from '@ionic/vue';
import { defineComponent, ref } from 'vue';
import Popover from './popover.vue'

export default defineComponent({
  name: 'Episode1Moment1',
  components: {
    IonBackButton,
    IonButtons,
    IonContent,
    IonHeader,
    IonPage,
    IonTitle,
    IonToolbar,
    IonButton,
    IonPopover,
    Popover
  },
  setup() {
    const isOpenRef = ref(false);
    const event = ref();
    const setOpen = (state: boolean, event?: Event) => {
      event.value = event; 
      isOpenRef.value = state;
    }
    return { isOpenRef, setOpen, event }
  }
});
</script>
<style scoped>
.moment-image {
  margin-top:-5px;
}
</style>