Need help for Svg-typed-Info section

Question

I'm currently trying to create an SVG image for my GitHub readme's top. This image would include a profile for the user, a few links for social networks or similar sites to post(pinned), and some current todo list for the user(todo). This is the current demo that i made:

But I found some issues about the image. This is the problem of the profile demo.

1. The profile box is white-themed, but the user contents(pinned) and to-do list are black-themed, making it visually uncomfortable to view. Even changing the user contents-todo section to white(Those white boxes) seems to be weird.
2. The pinned section boxes and to-do list boxes are too small, making it hard to read. I thought about changing the layout, but I can't think of anything better than the current one.
3. I want the working schedule box to link to the relevant content when clicked, but the profile image itself is an SVG type photo, so users may not recognize that the elements inside the image are clickable buttons.

So I want to ask these questions.

1. What would be a better layout for the Todo and Pinned section? Would two-tab box layout using currently would be the best?
2. How to induce user to recognize that the boxes are clickible buttons?

Answer 1

The answer is still the same as posted as a duplicate: use margins.

This is the Envato Graphicriver Portfolio:

• All elements have little information and wide margins, making them perceptually clickable.
• There is a top button to toggle between grid view to list view with expanded info