1 files changed, 97 insertions, 0 deletions
diff --git a/website/goals/index.jsx b/website/goals/index.jsx
new file mode 100644
index 000000000000..709b3bada589
--- /dev/null
+++ b/website/goals/index.jsx
@@ -0,0 +1,97 @@
+function ProgressBar(props) {
+  const { done, total, units, color } = props
+  const width = Math.floor(done / total * 100)
+  const rest = 100 - width
+
+  let [fg, bg] = [`bg-${color}`, `bg-${color}-lightest`]
+
+  if (color === 'white') {
+    [fg, bg] = ['bg-grey', 'bg-grey-lightest']
+  }
+
+  return (
+    <div className={`relative ${bg} h-5`}>
+      <div className={`${fg} h-5 absolute top-0 left-0`} style={{width: `${width}%`}}></div>
+      <p className="absolute text-xs pl-1 pt-1">{done} of {total} {units}</p>
+    </div>
+  )
+}
+
+function Goal(props) {
+  const { subject, goal, done, total, units, color } = props
+  const width = "6em"
+
+  const Tr = (props) => (
+    <tr className="flex py-2">
+      <td className="text-grey-dark" style={{width: width}}>{props.label}</td>
+      <td className="flex-1">
+        {props.valueComponent ? props.valueComponent : props.value}
+      </td>
+    </tr>
+  )
+
+  return (
+    <table className="w-full mb-10">
+      <tbody>
+        <Tr label="Subject" value={subject} />
+        <Tr label="Goal" value={goal} />
+        <Tr label="Progress" value={goal} valueComponent={
+          <ProgressBar done={done} total={total} units={units} color={color} />
+        }/>
+      </tbody>
+    </table>
+  )
+}
+
+function Copy(props) {
+  return (
+    <p className="pb-4 leading-loose">
+      {props.children}
+    </p>
+  )
+}
+
+function App() {
+  return (
+    <div className="container mx-auto font-mono">
+      <section>
+        <h1 className="text-center pt-12 pb-6">Goals</h1>
+        <Copy>
+          For me, a goal is something that is difficult for me to complete but
+          easy for me to measure.  I tend to add new goals as time progresses,
+          mistakenly assuming that I can support additional goals for free. To
+          counterbalance my tendancy to casually accumulate goals, I aim to only
+          have three goals; I will not add a new goal until I complete an
+          existing goal. I created and published this page to clarify that idea.
+        </Copy>
+        <Copy>
+          Here are my current goals and the progress I have made towards
+          achieving them.
+        </Copy>
+      </section>
+      <section className="pt-4">
+        <Goal subject="Meditation"
+              goal="Meditate for 10,000 hours"
+              done={100}
+              total={10000}
+              units="hrs"
+              color="purple" />
+        <Goal subject="Debt"
+              goal="Pay my student debt balance"
+              done={30000}
+              total={70000}
+              units="USD"
+              color="green" />
+        <Goal subject="Brazilian Jiu Jitsu"
+              goal="Train until an instructor gives me a black belt"
+              done={1}
+              total={5}
+              units="belts"
+              color="white" />
+      </section>
+    </div>
+  )
+}
+
+ReactDOM.render(<App />, document.getElementById('root'))
+