feat(app): update portofolio

contents/experiences/fullstack-intern.mdx

@@ -0,0 +1,10 @@
+---
+title: Computation Lab, Engineering Physics, ITB
+startDate: 2020-06-01
+endDate: 2020-12-01
+location: Bandung, Indonesia
+role: Fullstack Developer (Laravel)
+skills: Laravel, MySQL, PHP, Bootstrap, GitHub
+---
+
+Develop a thesis (Tugas Akhir) Web Application for students and lecturer

contents/experiences/fullstack-part-time.mdx

@@ -0,0 +1,17 @@
+---
+title: Ikatan Alumni Teknik Fisika, ITB
+startDate: 2021-01-01
+endDate: 2021-04-01
+location: Bandung, Indonesia
+role: Fullstack Developer (Next.js)
+skills: React.js,
+  Next.js,
+  Node.js,
+  Materials UI,
+  Typescript,
+  Git,
+  MongoDB,
+  Nodemailer,
+---
+
+Fill Here

contents/experiences/ifg-life.mdx

@@ -0,0 +1,43 @@
+---
+title: IFG Life
+startDate: 2023-01-07
+endDate: 2024-06-31
+location: Jakarta, Indonesia
+role: Mobile Developer (React Native)
+skills: React Native, Jest
+---
+
+### Lifeforce Mobile App
+
+- • Backward Compatibility
+- • Handle Production Issues Develop a sales
+  app for Android and iOS, focusing on features such as OCR with native camera, coachmark,
+  and detailed form submission validation system.
+- • Contribute to researching software
+  testing best practices for React.js and React Native, covering unit, integration,
+  and end-to-end tests. Document and present results to all frontend teams to adopt
+  testing.
+- • Provide research to address security issues and unblock application releases.
+
+> **Tech knowledge**: React Native, Jest, Redux, Redux Saga, Camera, Image Compressor and Cropper, React Hook-form, Yup.
+
+1. improve performance by 3x times S: A UI component used by many features are very
+   slow
+
+T: I created a new component with better implementation with
+fast algorithm by better technique,
+using appropriate data structure,
+generics,
+unit test,
+modular structure
+
+R: As a result, the UI component has better performance (about 3 times faster),
+easier to read,
+easier to maintable,
+very extendsible and flexible,
+more robust.
+When the new requirements come from business,
+The team build the features faster because the extendsibility of the component.
+The user is happier due to faster performance.
+
+2.

contents/experiences/ifg.mdx

@@ -1,20 +1,29 @@
-1. improve performance by 3x times 
-S: A UI component used by many features are very slow 
+---
+title: Mobile Developer (React-Native)
+dateStart: 2023-01
+dateEnd: 2023-12
+icon: abc
+company: IFG Life
+work: contract
+---
+
+1. improve performance by 3x times
+   S: A UI component used by many features are very slow
 
 T: I created a new component with better implementation with
 fast algorithm by better technique,
-using appropriate data structure, 
-generics, 
-unit test, 
+using appropriate data structure,
+generics,
+unit test,
 modular structure
 
-R: As a result, the UI component has better performance (about 3 times faster), 
-easier to read, 
-easier to maintable, 
+R: As a result, the UI component has better performance (about 3 times faster),
+easier to read,
+easier to maintable,
 very extendsible and flexible,
 more robust.
-When the new requirements come from business, 
+When the new requirements come from business,
 The team build the features faster because the extendsibility of the component.
 The user is happier due to faster performance.
 
-2. 
+2.

contents/experiences/iso.mdx

@@ -1,47 +1,55 @@
+---
+title: ISO (ITB Student Orchestra)
+startDate: 2019-07-01
+endDate: 2020-12-07
+location: Bandung, Indonesia
+role: Head of External
+skills: Leadership, Planning
+---
+
 head of external affairs
 I appointed to become Head of External Affairs at ISO (ITB Student Orchestra) for a year.
 That was a intensive leadership experience where I need to lead 3 divisions and 13 people.
 
-1.Extracampus 
-Key Messages: 
+1.Extracampus
+Key Messages:
 This division relation between the organization with the outside.
 After 3 years, this division successfully made an study exchange with UNPAD orchestra organization.
 Pionering the connections between orchestra organization on the other campus. Where we are successfully
 hold a collaboration concert with OSUI UI on the next year.
 
-
 Supporting Arguments:
 Summary:
 
 2.Intracampus
-Key Messages: 
-This division manage the relation between other organization inside the campus. 
+Key Messages:
+This division manage the relation between other organization inside the campus.
 It also make sure the organization is growed and inspired from other organization.
-Over a year, the team successfully collect other organization data, such as anniversary date, etc. 
+Over a year, the team successfully collect other organization data, such as anniversary date, etc.
 We also the first that save the data into internal database to reused for next year.
 
-Supporting Arguments: 
-There were a lot of events on the year, while the division only has 4 members excluded me. 
-We maintain to attend 80% events over a year. Previously, the organization only connect with 
+Supporting Arguments:
+There were a lot of events on the year, while the division only has 4 members excluded me.
+We maintain to attend 80% events over a year. Previously, the organization only connect with
 some other organization. This year, ISO successfull to connect to all organization inside campus by sent
 digital anniversary card on Instagram and Email. We also improve the connections between nearer other organization
-and shared tips between each other. 
+and shared tips between each other.
 By sharing, ISO got some tips and can quickly to get a new workspace on other branch in Jatinangor.
 For the first time, this division also conduct a survey and found out the things are most attracted the new joiners.
 This division also successfully attracted x people to join the organization by Open House Unit Events.
 
 Summary:
 
 3.Manager
-Key Messages: 
-This division had service to play orchestra in a event requested by client. 
+Key Messages:
+This division had service to play orchestra in a event requested by client.
 Over a year, the team manage to play on 7 events with average client satisfaction 8.66/10.
 This division also successfully attracted The top oil and service company: Schlumberger to perform our Orchestra performance on their anniversary.
-For the first time, the organization had created a CV to help engagement and attraction 
+For the first time, the organization had created a CV to help engagement and attraction
 to any other Company/organization to use our service.
 For the first time, the division created a tools to count the our service price quickly and predicable.
-The division also successfully manage the preparation, resourcing player for the biggest orchestra play 
+The division also successfully manage the preparation, resourcing player for the biggest orchestra play
 in the campus to attract new students to join the organization.
 
 Supporting Arguments: Challenges -> See LPJ
-Summary:
+Summary:

contents/experiences/ruangguru.mdx

@@ -1,11 +1,42 @@
-1. Time Management Solo Engineer Domains
-Key Messages: I was the only one web app engineer in the team. 
+---
+title: Ruangguru
+startDate: 2021-12-07
+endDate: 2022-11-17
+location: Malang, Indonesia
+role: Software Engineer (Frontend)
+skills: React.js, Next.js, Typescript, ReasonML
+---
 
+## Handle multiple projects in parallel and deliver all features on time, including:
+
+### 1. Live video call/teleconference web platform (like Zoom/Gmeet)
+
+- • Ensure code quality and functionality through code reviews.
+- • Develop a real-time breakout room management tool for teachers, facilitating session organization, participant tracking, and room reassignment.
+- • Provide support by researching and delivering solutions to production issues.
+
+### 2. Live Teaching video streaming web platform (like YouTube)
+
+- • As a new joiner, quickly learned the ReasonML programming language to maintain and develop this legacy project.
+- • Responsible for aligning the project with the requirements of the annual biggest marketing events.
+- • Maintain the legacy web deployment across various products and regions, and enhance the platform to ensure a smooth integration of new products.
+- • Work closely with other engineers, engineering managers, and product managers to develop, maintain, and migrate this project from legacy ReasonML to Typescript.
+
+### 3. New Universal Content Management System (like Mac’s Finder)
+
+- • As a solo frontend engineer in a team, rapidly created a high-performance CMS from scratch for a new product, managing over ten content types (video, subtitle, mission, etc.) with minimal supervision.
+- • Consistently maintained performance at 80-90 based on Google Lighthouse metrics.
+
+> **Tech knowledge**: Next.js, Advanced React.js (memo, callback, ref), Typescript, Zustand, Websocket, Single Page Application (SPA), React-table, React-query, React-window, Storybook, Video player, Github, ReasonML.
+
+1. Time Management Solo Engineer Domains Key Messages: I was the only one web app
+   engineer in the team.
 
 Supporting Arguments:
-1. My works were reviewed by other team, ofter their approved delayed 1-2 days. 
-Some requirements were needed to built sequencely.
-I planned the strategies to make sure the project was completed on timeline.
+
+1. My works were reviewed by other team, ofter their approved delayed 1-2 days.
+   Some requirements were needed to built sequencely.
+   I planned the strategies to make sure the project was completed on timeline.
 
 2. The deadline was stricted for 4 months.
 3. The project was built from scratch.
@@ -14,15 +45,15 @@ Summaries:
 
 2. Biggest Marketing Annual Event
 
-
 3. Breakoutroom
-Key Messages: Although the featues are difficuti to implement on time. 
-I can complete the features on time with minimal amount of bugs on production.
+   Key Messages: Although the featues are difficuti to implement on time.
+   I can complete the features on time with minimal amount of bugs on production.
 
 Supporting Arguments:
+
 1. The project was hard to test, at least I needed 3 accounts and open 3 tabs/windows browser on laptop.
 2. The flow of the project is long
 3. There were many conflict potentials due to many users that has action that impacting other users.
-4. Good Performances were hard to achieve due to requirements that need real time changes to the UI 
+4. Good Performances were hard to achieve due to requirements that need real time changes to the UI
 
 Summaries:

contents/experiences/web-development-intern.mdx

@@ -1,8 +1,17 @@
 ---
-role: Web Development Intern
-time: Jume 2020-Dec 2021
-location: Bandung, Indonesia
+title: Fullstack Developer (Laravel)
+dateStart: 2020-6
+dateEnd: 2021-12
+icon: abc
+company: ITB
+work: Internship
+---
+
+---
 techs: Laravel, PHP, MySQL, github, bootstrap
+
 ---
 
+
+
 Develop a thesis (Tugas Akhir) Web Application for students and lecturer

contents/projects/ai-halma.mdx

@@ -9,6 +9,7 @@ Features:
 
 - • AI bot to play halma
 - • Play halma with AI bot/human
+- • Review/Replay game after finished
 
 Link to project: <A href="https://toro-web.vercel.app/projects/ai-halma-game/">AI Halma Game</A>
 
@@ -21,4 +22,7 @@ Link to repository: <A href="https://github.com/cholazzzb/toro-web-vercel/tree/m
   height={400}
   ratio={{ base: 0.5, md: 0.5 }}
   caption="Web app"
-/>
+/>
+
+Notes:
+- • There are some noticable minor bugs that are on fixing

contents/projects/rubic-cool.mdx

@@ -8,7 +8,10 @@ tags: ['Web']
 Features:
 
 - • 3D Rubic Cube Simulator
-
+- • Rotate cube with animation
+- • Shuffle
+- • Solve first layer
+- • Solve second layer (ongoing)
 
 <Image
   src="/images/projects/rubic-cool.png"
@@ -22,3 +25,6 @@ Features:
 Link to project: <A href="https://rubic-cool.vercel.app/">Rubic Cool</A>
 
 Link to repository (TS + Three.js): <A href="https://github.com/cholazzzb/rubic-cool">Github</A>
+
+Notes:
+- • There are some noticable minor bugs that are on fixing

src/app/projects/ai-halma-game/review/Review.tsx

@@ -93,7 +93,7 @@ export function Review(props: Props) {
                       </Text>
                     </Flex>
                   </Flex>
-                  <Flex grow={1} onClick={onClickMove2}>
+                  <Flex grow={1} onClick={move2 && onClickMove2}>
                     <Flex
                       padding="4px"
                       backgroundColor={