Conversion complete

- Added the "Why Bit Badger" page
- Fixed odd scrolling behavior
- Added myPrayerJournal description
- Added social icons

src/App.vue

@@ -1,11 +1,19 @@
 <template lang="pug">
   #app
     header
+      .header-logo
         router-link(to='/')
           img(src='/static/bitbadger.png'
               alt='A cartoon badger looking at a computer screen, with his paw on a mouse'
               title='Bit Badger Solutions')
-      router-link(to='/') Bit Badger Solutions
+      .header-title: router-link(to='/') Bit Badger Solutions
+      .header-spacer &nbsp;
+      .header-social
+        a(href='https://twitter.com/DJS_Consulting' title='DJS_Consulting on Twitter')
+          img(src='/static/twitter.png' alt='Twitter' )
+        | &nbsp; &nbsp;
+        a(href='https://www.facebook.com/pages/DJS-Consulting/262368048575' title='DJS Consulting on Facebook')
+          img(src='/static/facebook.png' alt='Facebook')
     #content
       router-view
     footer
@@ -88,9 +96,7 @@ header {
 	height: 100px;
   display: flex;
   flex-direction: row;
-  font-size: 3rem;
+  justify-content: space-between;
-  font-weight: bold;
-  line-height: 100px;
   background-image: -webkit-gradient(linear, left top, left bottom, from(lightgray), to(#FFFAFA));
   background-image: -webkit-linear-gradient(top, lightgray, #FFFAFA);
   background-image: -moz-linear-gradient(top, lightgray, #FFFAFA);
@@ -102,10 +108,6 @@ header a:link, header a:visited {
 header a:hover {
 	border-bottom:none;
 }
-header.name {
-  display: table-cell;
-  vertical-align: middle;
-}
 .content-item {
 	padding-left: 5px;
 	padding-right: 5px;
@@ -143,4 +145,19 @@ ul {
 li {
 	list-style-type: disc;
 }
+.header-title {
+  font-size: 3rem;
+  font-weight: bold;
+  line-height: 100px;
+}
+.header-spacer {
+  flex-grow: 3;
+}
+.header-social {
+  padding: 25px .8rem 0 0;
+}
+.header-social img {
+  width: 50px;
+  height: 50px;
+}
 </style>

src/components/AppData.vue

@@ -326,16 +326,30 @@ const APPS = [
     frontPageOrder: 2,
     indexText: 'Minimalist personal prayer journal',
     paragraphs: [
-      `to be written`
+      `Daniel wanted to maintain a prayer journal, where he could record the prayer requests for which he had prayed,
+      and the answer that eventually came to that request. He didn't want to do that on paper for several reasons - it's
+      easy to lose, a long-running request can run out of space to make notes, etc. He believed that he was not the only
+      person who felt this way regarding prayer, and decided to use this as an opportunity to fill both a spiritual and
+      a learning need. Given <a href="https://auth0.com">Auth0</a>'s policy of offering free authentication services for
+      open-source applications, he decided to develop this as an open-source application.`,
+      `The goal of myPrayerJournal is to get out of the way, so that the user can focus on the requests and their
+      prayer; once requests have been entered, the journal provides a way to easily pray through these requests, helping
+      people not forget about active requests. It also provides a means of going back through answered requests, which
+      can be reviewed whenever the user desires.`
     ],
     activity: [
       {
         heading: 'What We Did',
-        narrative: 'Wrote it'
+        narrative: `We went through several iterations of front-end and back-end technologies before we settled on
+                   <a href="https://vuejs.org">Vue.js</a> for the front-end and <a href="https://nodejs.org">Node.js</a>
+                   for the back-end. This solution is still in active development, which can be tracked on
+                   <a href="https://github.com/danieljsummers/myprayerjournal">GitHub</a>; this is also where issues
+                   regarding it can be raised and resolved.`
       },
       {
         heading: 'What We Still Do',
-        narrative: 'Host it'
+        narrative: `Bit Badger Solutions hosts the instance of this at the URL linked above. We back up the data, and
+                   also continue to develop it. Anyone can use it by logging in with a Google or Microsoft account.`
       }
     ]
   },

src/components/Application.vue

@@ -64,10 +64,7 @@ aside {
 }
 aside img {
   border: dotted 1px darkgray;
-  border-top-right-radius: 5px;
+  border-radius: 10px;
-  border-top-left-radius: 5px;
-  border-bottom-left-radius: 10px;
-  border-bottom-right-radius: 10px;
 }
 blockquote {
   border-left: solid 1px darkgray;

src/components/Home.vue

@@ -23,7 +23,7 @@ div.home
       #[router-link(to='/about/web-services-solutions' title='Web Services and API Solutions') Learn about web services, along with examples of current solutions].
     h2 Legacy Data Sharing
     p.
-      Do you have data that's old — and by “old,” we aren’t talking “iPhone 6 old,”
+      Do you have data that's old — and by “old,” we aren’t talking “iPhone 6” old,
       we’re talking “this data
       #[a(href='https://en.wikipedia.org/wiki/Age_of_candidacy#United_States' title='Age of Candidacy (United States) | Wikipedia') could run for President]”
       old? Just because the information is in an older “legacy” system doesn’t mean it has to stay
@@ -31,23 +31,20 @@ div.home
       #[router-link(to='/about/legacy-data' title='Legacy Data Sharing Solutions') Learn how our solutions can help get this data where you and your customers can access it more easily].
     h2 Why Web-Based?
     p.
-      Developing a web-based solution has many advantages, whether that application can be used just on a local, private
+      Web-based solutions have many advantages:
-      network (an intranet), or on the Internet.
     ul
-      li.
+      li: p.
-        The application is available from any computer connected to the network — your home computer, your mobile
+        They can be used just on a local, private network (an intranet) or on the public Internet.
-        phone or tablet, a shared comptuer in a library - wherever!
+      li: p.
-      li.
+        They are available to any device connected to the network.
-        There is no special software to install — every computer and mobile device has a web browser on it, and we
+      li: p.
-        ensure our solutions work on today's most popular web browsers, including Microsoft® Edge, Mozilla Firefox,
+        They require no special software; every device has a browser - which you're using to read this!)
-        and Google Chrome.
+      li: p.
-      li.
+        They can get your most critical needs met first, then evolved and improved over time.
-        Web-based solutions are easy to implement in a step-by-step fashion, so your most critical needs can be
+    h2 What Is a “Bit Badger”?
-        addressed and deployed first. Enhancements are generally easy to do as well.
-    h2 What's With the Name “Bit Badger”?
     p.
-      Link goes here
+      #[router-link(to='/about/why-bit-badger' title='Why Bit Badger?') Read the Bit Badger’s origin story].
-    h2 What Next
+    h2 Solutions to Your Problems
     p.
       We’d be happy to discuss your information technology needs, and which of our solutions are right for you.
       Just #[a(href='mailto:daniel@djs-consulting.com') e-mail us] and let us know what we can do for you! You can also

src/components/about/WhyBitBadger.vue

@@ -0,0 +1,29 @@
+<template lang="pug">
+article.content.auto
+  page-title(title='Why Bit Badger?')
+  h1 Why &ldquo;Bit Badger&rdquo;?
+  p.
+    A while back, our primary developer Daniel learned through genetic testing that he had one gene that was not right
+    (technically known as a genetic mutation). He is currently fine #[em (thank you for asking)], but his co-workers
+    thought of another group of genetic mutants &ndash; the X-Men. They wanted to develop the mutant identity for him
+    in that style; since Wolverine is already taken, they wanted something similar, but based on a member of the weasel
+    family (for its normal private life and fierce tenacity, not its morals). They went through several different
+    options, but when &ldquo;Bit Badger&rdquo; was mentioned, it was the winner. The Bit Badger's mutant superpower is
+    the ability to shoot 1s and 0s out its nostrils!
+  p.
+    Daniel liked this moniker, and decided to run with it. He had been growing dissatisfied with the name &ldquo;DJS
+    Consulting,&rdquo; as he felt that name was passive. He enjoys taking problems and finding creative solutions for
+    them, making our computers work for us instead of the other way around. While he can't actually breathe out 1s and
+    0s, they do flow from his fingers (in groups of 8, of course).
+  p.
+    Do you have a problem that needs a solution? #[a(href='mailto:daniel@djs-consulting.com') Sic the Bit Badger on it]!
+  p
+    br
+    router-link(to='/' title='Home') &laquo; Home
+</template>
+
+<script>
+export default {
+  name: 'why-bit-badger'
+}
+</script>

src/components/sidebar/AppSidebar.vue

@@ -1,12 +1,6 @@
 <template lang="pug">
 div
   aside.app-sidebar
-    div
-      div.app-sidebar-head Connect with Us
-      p
-        a(href='https://twitter.com/DJS_Consulting' title='DJS_Consulting on Twitter') Twitter
-        | &nbsp;&bull;&nbsp;
-        a(href='https://www.facebook.com/pages/DJS-Consulting/262368048575' title="DJS Consulting on Facebook") Facebook
     sidebar-category(v-for='category in cats' :category='category' :key='category.id')
 </template>
 
@@ -68,7 +62,7 @@ export default {
 	color: maroon;
 	margin-bottom: .8rem;
 	padding: 3px 12px;
-	border-bottom: solid 2px lightgray /* #3A1D00 */;
+	border-bottom: solid 2px lightgray;
   font-size: 1rem;
 }
 .app-sidebar-name, .app-sidebar-description {

src/router/index.js

@@ -8,6 +8,7 @@ import Home from '@/components/Home'
 import InformationPublicizing from '@/components/about/InformationPublicizing'
 import ProcessAutomation from '@/components/about/ProcessAutomation'
 import WebServices from '@/components/about/WebServices'
+import WhyBitBadger from '@/components/about/WhyBitBadger'
 
 Vue.use(Router)
 
@@ -18,8 +19,12 @@ export default new Router({
     { path: '/about/information-publicizing-solutions', name: 'InformationPublicizing', component: InformationPublicizing },
     { path: '/about/process-automation-solutions', name: 'ProcessAutomation', component: ProcessAutomation },
     { path: '/about/web-services-solutions', name: 'WebServices', component: WebServices },
+    { path: '/about/why-bit-badger', name: 'WhyBitBadger', component: WhyBitBadger },
     { path: '/solutions/:app', name: 'Application', component: Application, props: true },
     { path: '/solutions', name: 'ApplicationList', component: ApplicationList },
     { path: '*', name: 'FourOhFour', component: FourOhFour }
-  ]
+  ],
+  scrollBehavior (to, from, savedPosition) {
+    return savedPosition || { x: 0, y: 0 }
+  }
 })