feat: custom status override, many many style changes (#67)

Author: alexieyizhe

.github/workflows/ci.yml

@@ -14,3 +14,6 @@ jobs:
 
       - name: Lint
         run: npm run lint
+
+      - name: Type-check
+        run: npm run type-check

README.md

@@ -1,5 +1,15 @@
 # hello friend this is my website
 
-`npm start` to do dev stuff
+type `npm run dev` to do dev stuff
+type `npm run build` to do production stuff
 
-`npm run build` to do production stuff
+still to do
+
+- [ ] visual regression testing
+- [ ] theme & dark mode?
+- [ ] 404 page
+- [ ] easter egg
+- [ ] dev mocks for redis
+- [ ] accessibility (contrast/reduce motion), dark mode options
+- [ ] add api routes for custom status and location check-in
+- [ ] add 'my work' page

package-lock.json

@@ -6,8 +6,8 @@
   "scripts": {
     "dev": "cross-env NODE_ENV=development next",
     "lint": "eslint src --fix",
-    "build:ssg": "cross-env NODE_ENV=production next build && next export -o build",
-    "build:ssr": "cross-env NODE_ENV=production next build",
+    "type-check": "tsc --noEmit",
+    "build": "cross-env NODE_ENV=production next build && next export -o build",
     "start": "cross-env NODE_ENV=production next start"
   },
   "devDependencies": {
@@ -25,6 +25,7 @@
     "typescript": "^4.1.3"
   },
   "dependencies": {
+    "color.js": "^1.1.0",
     "goober": "^2.0.19-next.1",
     "ioredis": "^4.19.4",
     "next": "10.0.0",

package.json

@@ -1,31 +1,52 @@
 import { FunctionalComponent } from 'preact';
 import { styled } from 'goober';
 
-import { useCopyContext } from 'services/copy';
-// import { Text } from 'components/core';
+import { useSiteContext } from 'services/site/context';
+import { Link, Text } from 'components/core';
 import DynamicTime from 'components/DynamicTime';
 import DynamicTagline from 'components/DynamicTagline';
 import DynamicCurrentStatus from 'components/DynamicCurrentStatus';
 
 const Container = styled('div')`
-  margin-top: 1em;
+  margin-top: 1.6em;
+
+  & .dynamic {
+    font-weight: 450;
+  }
 `;
 
 const Bio: FunctionalComponent = () => {
-  const { talkingPoint } = useCopyContext();
+  const { talkingPoint } = useSiteContext();
 
   return (
     <Container>
       <p>
-        I’m a <DynamicTagline /> studying computer science at the University of
-        Waterloo.
+        <Text>
+          I’m a{' '}
+          <span className="dynamic">
+            <DynamicTagline />
+          </span>{' '}
+          that's currently studying computer science at the University of
+          Waterloo.
+        </Text>
       </p>
-      <path>
-        It’s currently <DynamicTime /> for me and I'm <DynamicCurrentStatus />
-      </path>
+
+      <p>
+        <Text>
+          It’s currently{' '}
+          <span className="dynamic">
+            <DynamicTime />
+          </span>{' '}
+          for me; I'm <DynamicCurrentStatus />
+        </Text>
+      </p>
+
       <p>
-        Wanna chat about {talkingPoint}? Lets talk. You can reach me at{' '}
-        <a href="mailto:hi@alexxie.com">hi@alexxie.com</a>.
+        <Text>
+          Wanna chat about <span className="dynamic">{talkingPoint}</span>? Lets
+          talk. You can reach me at{' '}
+          <Link href="mailto:hi@alexxie.com">hi@alexxie.com</Link>.
+        </Text>
       </p>
     </Container>
   );