Lego Resume Builder

Doesn’t look like a ton of work, but I did many changes under the hood to correctly implement resize clamping and consistent sizing even when dragging the blocks across the inventory and baseplate.

Next step is to also clamp the positioning of the blocks!

I added resizing capability!!!

• I created ResizeableBlock, a container to add resizing handles to a block ^595fbd300d77f2485197c2bd7cf69f21477ed6b6
  • The block keeps track of 4 things isResizing, resizeDirection, startPos (of cursor), and startSize
  • With three functions, it handles the resizing: handleResizeStart, handleResizeMove, and handleResizeEnd
  • handleResizeStart initializes the 4 things the resizing keep track of (i.e. setting the cursor position to the appropriate location) and adds event listeners for mousemove and mouseup
  • handleResizeMove calculates the change the cursor position and determines the new size of the block (if there is significant enough of a change)
  • handleResizeEnd cleans up the variables and listeners

Next is reallowing drag and drop from and to the inventory

I GOT THE GRID DnD TO WORK!!!!

I’m getting closer and closer to having a lego builder!

In this work block, the main goal was to implement labels that were editable and that rendered properly.

• Updated types for labels, sections, and zones (to use an ID instead of just a label)
• Implemented function to render labels (after drag and drop)
• Updated functions to use the function instead of rendering the component statically
• Added label editing capabilities

Tons of work with the drag and drop! I refactored the code so that everything is more modularized.

I also added drag and drop of sections and zones to the inventory.

I also added creation of new sections and zones.

A lot of drag and drop logic!!

Went for the next step and added drag and drop for sections.. Now you can not only drag and drop zones, but also drag and drop sections into zones!!!!!

Implemented drag and drop for multiple items at once! This is definitely a learning curve, but After I learn how to do drag and drop, the possibilities are ENDLESS!!!!

I implemented drag and drop using dnd-kit in react! It was a lot of learning because i had never used this framework before. Nonetheless, I figured it out!

I created React components to recreate the planned interview in Typescript and React.

Not the prettiest, but at least I got the code down!

I spent a lot of time brainstorming about how I can go about the resume builder. I created a preliminary design and added types to the project. (A lot of the planning was done in a markdown file in VSCode)