feat: update with cloudos project

js-performance/JS-PERFORMANCE.md

@@ -0,0 +1,61 @@
+Parsing can be slow.
+As as **1MB/s on mobile**
+
+One way to reduce the parsing time is to have less code
+Another way is todo as much parsing as you need and as little as you can get away with.
+
+### Parsing happens in two phases
+
+-   eager (full parse) This is what you think of when you think about parsing.
+-   lazy (pre-parse) do the bare minimum now. We'll parse it for realsies later.
+
+> In general lazy loading is a good thing.
+
+### The basic rules
+
+-   Scan through the top-level scope. Parse all the code you see that's actually doing something.
+-   Skip things like function declarations and classes for now. We'll parse them when we need them.
+
+### This could bit us. But how?
+
+```js
+// These will be eagerly-parsed
+const a = 1
+const b = 2
+
+// Take not that there's a function here,
+// but, we'll parse the body when we need it
+function add(a, b) {
+    return x + y
+}
+
+add(a, b) // Whoa. Go back and parse add()!
+```
+
+**Corollary:** Doing stuff twice is slower than doing it once.
+
+### Try to avoid nested functions
+
+```js
+function sumOfSquares(x, y) {
+    // this nested function will repeatedly be parsed.
+    function square(n) {
+        return n * n
+    }
+
+    return square(x) + square(y)
+}
+```
+
+If move that out
+
+```js
+function square(n) {
+    return n * n
+}
+function sumOfSquares(x, y) {
+    return square(x) + square(y)
+}
+```
+
+### Okay, cool - so it's parsed. Now what?

src/data/contact.ts

@@ -4,7 +4,7 @@ const contacts: Record<string, { topics: Topic[] }> = {
     Academic: {
         topics: [
             {
-                name: '(PhD Computer Science) Florida State University',
+                name: 'Florida State University',
                 level: 'gl19f@fsu.edu',
                 mail: 'gl19f@fsu.edu',
                 seniority: '',
@@ -15,9 +15,9 @@ const contacts: Record<string, { topics: Topic[] }> = {
     Professional: {
         topics: [
             {
-                name: 'Genealogy.co.kr - Full Stack Developer/Head of Technology',
-                level: 'giwoo.lee@genealogy.co.kr',
-                mail: 'giwoo.lee@genealogy.co.kr',
+                name: 'Frontend Engineer',
+                level: 'giwoo@lifebit.ai',
+                mail: 'giwoo@lifebit.ai',
                 icon: 'email',
             },
             {

src/data/projects.ts

@@ -1,4 +1,5 @@
 export const ProjectsName = {
+    LifebitAI: 'Lifebit AI',
     RealSpiel: 'Real Spiel',
     RockyRobots: 'Rocky Robots',
     Avocado: 'Avocado',
@@ -33,6 +34,34 @@ type ProjectsContent = {
 export type ProjectsType = { [key in ProjectsNameType]: ProjectsContent }
 
 const projects: ProjectsType = {
+    [ProjectsName.LifebitAI]: {
+        basics: {
+            company: { content: 'Lifebit AI', type: 'field' },
+            name: { content: 'CloudOS', type: 'field' },
+            alias: { content: 'CloudOS', type: 'field' },
+            keywords: {
+                content: ['Bioinformatics', 'Batch analysis', 'Cloud'],
+                type: 'array',
+            },
+            role: { content: 'Frontend engineer', type: 'field' },
+            year: { content: '2022 - Today', type: 'field' },
+        },
+        description: {
+            'What was done': {
+                content: 'Development of CloudOS web application',
+                type: 'text',
+            },
+        },
+        aboutCompany: {
+            country: { content: 'UK', type: 'field' },
+            city: { content: 'London', type: 'field' },
+            statement: {
+                content:
+                    'Lifebit is a precision medicine software company that builds enterprise data platforms for use by organisations with sensitive genomic and biomedical datasets, empowering therapeutic leaders to access and analyse siloed biomedical data.',
+                type: 'field',
+            },
+        },
+    },
     [ProjectsName.RealSpiel]: {
         basics: {
             company: { content: 'iSensorAnalytics.', type: 'field' },

src/declarations.d.ts

@@ -2,3 +2,4 @@ declare module '*.jpg'
 declare module '*.jpeg'
 declare module '*.png'
 declare module '*.svg'
+declare module '*.gif'

src/modules/attribution/components/Attribution/attribution.css

@@ -0,0 +1,3 @@
+.attribution-container {
+    padding: 20px 25px;
+}

src/modules/contacts/components/Contact/contact.css

@@ -0,0 +1,3 @@
+.contact-container {
+    padding: 20px 25px;
+}

src/modules/interests/components/Interests.tsx

@@ -15,7 +15,7 @@ const Interests = () => {
     const dataAllIds = Object.keys(interests)
 
     return (
-        <div>
+        <div className="interests-container">
             {dataAllIds.length > 0 &&
                 dataAllIds.map((dataId) => {
                     return (

src/modules/interests/components/interests.css

@@ -0,0 +1,3 @@
+.interests-container {
+    padding: 20px 25px;
+}

src/modules/preferences/components/General/general.css

@@ -1,31 +1,32 @@
 .general-container {
-  display: flex;
-  font-size: 14px;
-  flex-direction: column;
+    display: flex;
+    font-size: 14px;
+    flex-direction: column;
+    padding: 20px 25px;
 }
 
 .general-container > p {
-  color: var(--light-gray);
+    color: var(--light-gray);
 }
 
 .about-text {
-  color: var(--main-color);
-  background-color: var(--black);
-  height: 100%;
-  padding: 5px;
+    color: var(--main-color);
+    background-color: var(--black);
+    height: 100%;
+    padding: 5px;
 }
 
 .about-text .link {
-  color: var(--main-color);
-  text-decoration: underline;
+    color: var(--main-color);
+    text-decoration: underline;
 }
 
 .about-text code {
-  color: #fff;
-  display: block;
+    color: #fff;
+    display: block;
 }
 
 .about-text span {
-  color: var(--palevioletred);
-  margin-right: 5px;
+    color: var(--palevioletred);
+    margin-right: 5px;
 }

src/modules/preferences/components/Mission/mission.css

@@ -1,5 +1,6 @@
 .mission-container {
     font-size: 12px;
+    padding: 20px 25px;
 }
 
 .mission-item {