Available for work
Subtitle
/About
/01
Stand-up Paddling
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
/02
Handpan Music
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
/03
Ride a bike
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Toolstack
Framer
(01)
(main design & development)
From concept to a fully responsive website, Framer is where my designs come to life with thoughtful interactions and polished details.
Responsive Layouts
Components & CMS
Interactions
Figma
(02)
![](data:image/svg+xml,<svg display="block" id="3782390273" role="presentation" viewBox="0 0 16 24" xmlns="http://www.w3.org/2000/svg"><g d="M 4 24 C 6.208 24 8 22.208 8 20 L 8 16 L 4 16 C 1.792 16 0 17.792 0 20 C 0 22.208 1.792 24 4 24 Z M 0 12 C 0 9.792 1.792 8 4 8 L 8 8 L 8 16 L 4 16 C 1.792 16 0 14.208 0 12 Z M 0 4 C 0 1.792 1.792 0 4 0 L 8 0 L 8 8 L 4 8 C 1.792 8 0 6.208 0 4 Z M 8 0 L 12 0 C 14.208 0 16 1.792 16 4 C 16 6.208 14.208 8 12 8 L 8 8 Z M 16 12 C 16 14.208 14.208 16 12 16 C 9.792 16 8 14.208 8 12 C 8 9.792 9.792 8 12 8 C 14.208 8 16 9.792 16 12 Z" fill="transparent" height="23.99999950813357px" id="A9pErPsBp" width="15.999897872404695px"><path d="M 4 8 C 6.208 8 8 6.208 8 4 L 8 0 L 4 0 C 1.792 0 0 1.792 0 4 C 0 6.208 1.792 8 4 8 Z" fill="rgb(3, 207, 101)" height="8.000099643936792px" id="T2Tqsojl6" transform="translate(0 16)" width="8.000099643936771px"/><path d="M 0 4 C 0 1.792 1.792 0 4 0 L 8 0 L 8 8 L 4 8 C 1.792 8 0 6.208 0 4 Z" fill="rgb(144, 75, 254)" height="8.000099643936796px" id="PICcXs2_C" transform="translate(0 8)" width="8.000099643936771px"/><path d="M 0 4 C 0 1.792 1.792 0 4 0 L 8 0 L 8 8 L 4 8 C 1.792 8 0 6.208 0 4 Z" fill="rgb(255, 0, 39)" height="8.000099643936814px" id="Gmod0P4lP" width="8.000099643936771px"/><path d="M 0 0 L 4 0 C 6.208 0 8 1.792 8 4 C 8 6.208 6.208 8 4 8 L 0 8 Z" fill="rgb(255, 102, 25)" height="8.000099643936814px" id="i7IWR309n" transform="translate(8 0)" width="7.999799643950105px"/><path d="M 8 4 C 8 6.208 6.208 8 4 8 C 1.792 8 0 6.208 0 4 C 0 1.792 1.792 0 4 0 C 6.208 0 8 1.792 8 4 Z" fill="rgb(0, 186, 255)" height="8.000099643936796px" id="igSXISk55" transform="translate(8 8)" width="7.999799643950105px"/></g></svg>)
(INTERFACE DESIGN)
Every project starts here—exploring layouts, refining typography, and building structured interfaces before development begins.
Layout Exploration
Typography
Design Systems
Notion
(03)
(Organization & Planning)
My central workspace for collecting ideas, planning projects, and keeping every step of the process organized.
Project Planning
Documentation
Creative Notes
Principle
(04)
![](data:image/svg+xml,<svg display="block" id="3258469424" role="presentation" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><defs ><linearGradient id="VMZuJUsN0-3258469424-linear-gradient" x1="0.2723693272919019" x2="0.7276306727080981" y1="0" y2="1"><stop offset="0" stop-color="rgb(195, 106, 213)"/><stop offset="1" stop-color="rgb(84, 33, 159)"/></linearGradient></defs><path d="M 0.002 20.061 L 0 8.944 C 0 4.004 3.98 0 8.889 0 C 13.798 0 17.778 4.005 17.778 8.944 C 17.778 13.884 13.881 17.888 8.972 17.888 C 7.412 17.888 6.147 16.616 6.147 15.046 C 6.147 13.476 7.412 12.204 8.972 12.204 C 10.761 12.204 12.129 10.744 12.129 8.944 C 12.129 7.144 10.678 5.684 8.889 5.684 C 7.1 5.684 5.649 7.144 5.649 8.944 L 5.651 21.158 C 5.651 23.912 2.667 24.665 1.036 23.415 C 1.531 23.074 1.827 22.507 1.828 21.9 C 1.828 20.885 1.01 20.062 0.002 20.061 Z M 8.972 16.885 C 9.981 16.885 10.8 16.062 10.8 15.046 C 10.8 14.03 9.981 13.207 8.972 13.207 C 7.962 13.207 7.144 14.03 7.144 15.046 C 7.144 16.061 7.962 16.885 8.972 16.885 Z" fill="url(%23VMZuJUsN0-3258469424-linear-gradient)" height="24px" id="VMZuJUsN0" transform="translate(3.11 0)" width="17.77777777777778px"/></svg>)
(Motion prototyping)
Used to prototype interactions and better understand how motion supports the overall experience.
UI Motion
Micro Interactions
Prototyping
Zoom
(05)
![](data:image/svg+xml,<svg display="block" id="3358326962" role="presentation" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g d="M 0 8.229 C 0 5.349 0 3.909 0.56 2.808 C 1.053 1.84 1.84 1.053 2.808 0.56 C 3.909 0 5.349 0 8.229 0 L 15.771 0 C 18.651 0 20.091 0 21.192 0.56 C 22.16 1.053 22.946 1.84 23.439 2.808 C 24 3.909 24 5.349 24 8.229 L 24 15.771 C 24 18.651 24 20.091 23.44 21.192 C 22.947 22.16 22.16 22.946 21.192 23.439 C 20.091 24 18.651 24 15.771 24 L 8.229 24 C 5.349 24 3.909 24 2.808 23.44 C 1.84 22.947 1.053 22.16 0.56 21.192 C 0 20.091 0 18.651 0 15.771 Z M 5.657 6.857 C 5.057 6.857 4.571 7.406 4.571 8.081 L 4.571 14.021 C 4.571 15.745 5.811 17.143 7.341 17.143 L 13.771 17.081 C 14.371 17.081 14.857 16.533 14.857 15.857 L 14.857 9.857 C 14.857 8.133 13.386 6.857 11.857 6.857 Z M 16.325 9.195 C 15.936 9.578 15.714 10.133 15.714 10.714 L 15.714 13.2 C 15.714 13.782 15.937 14.335 16.325 14.719 L 18.739 16.845 C 19.231 17.33 20 16.937 20 16.2 L 20 7.83 C 20 7.094 19.23 6.699 18.739 7.185 Z" fill="transparent" height="24px" id="Ehj2uqlyB" width="24px"><path d="M 0 8.229 C 0 5.349 0 3.909 0.56 2.808 C 1.053 1.84 1.84 1.053 2.808 0.56 C 3.909 0 5.349 0 8.229 0 L 15.771 0 C 18.651 0 20.091 0 21.192 0.56 C 22.16 1.053 22.946 1.84 23.439 2.808 C 24 3.909 24 5.349 24 8.229 L 24 15.771 C 24 18.651 24 20.091 23.44 21.192 C 22.947 22.16 22.16 22.946 21.192 23.439 C 20.091 24 18.651 24 15.771 24 L 8.229 24 C 5.349 24 3.909 24 2.808 23.44 C 1.84 22.947 1.053 22.16 0.56 21.192 C 0 20.091 0 18.651 0 15.771 Z" fill="rgb(64, 135, 252)" height="24px" id="nFM0Aega2" width="24px"/><path d="M 1.086 0 C 0.486 0 0 0.549 0 1.224 L 0 7.163 C 0 8.888 1.24 10.286 2.769 10.286 L 9.2 10.224 C 9.8 10.224 10.286 9.675 10.286 9 L 10.286 3 C 10.286 1.275 8.815 0 7.286 0 Z M 11.753 2.338 C 11.365 2.721 11.143 3.275 11.143 3.857 L 11.143 6.343 C 11.143 6.925 11.366 7.478 11.753 7.862 L 14.168 9.987 C 14.659 10.473 15.429 10.08 15.429 9.343 L 15.429 0.973 C 15.429 0.237 14.658 -0.158 14.168 0.328 Z" fill="rgb(255, 255, 255)" height="10.285714268684387px" id="wlihUbL7Q" transform="translate(4.571 6.857)" width="15.428570883614675px"/></g></svg>)
(Communication)
A simple space for meetings, feedback sessions, and discussing ideas throughout a project.
Client Calls
Design Reviews
Collaboration
Slack
(06)
![](data:image/svg+xml,<svg display="block" id="3104264599" role="presentation" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g d="M 21.692 11.077 C 22.967 11.077 24 10.044 24 8.769 C 24 7.495 22.967 6.462 21.692 6.462 C 20.418 6.462 19.385 7.495 19.385 8.769 L 19.385 11.077 Z M 15.231 11.077 C 16.506 11.077 17.538 10.043 17.538 8.769 L 17.538 2.308 C 17.538 1.033 16.505 0 15.231 0 C 13.956 0 12.923 1.033 12.923 2.308 L 12.923 8.769 C 12.923 10.043 13.957 11.077 15.231 11.077 Z M 2.308 12.923 C 1.033 12.923 0 13.956 0 15.231 C 0 16.505 1.033 17.538 2.308 17.538 C 3.582 17.538 4.615 16.505 4.615 15.231 L 4.615 12.923 Z M 8.769 12.923 C 7.494 12.923 6.462 13.957 6.462 15.231 L 6.462 21.692 C 6.462 22.967 7.495 24 8.769 24 C 10.044 24 11.077 22.967 11.077 21.692 L 11.077 15.231 C 11.077 13.957 10.043 12.923 8.769 12.923 Z M 12.923 21.692 C 12.923 22.967 13.956 24 15.231 24 C 16.505 24 17.538 22.967 17.538 21.692 C 17.538 20.418 16.505 19.385 15.231 19.385 L 12.923 19.385 Z M 12.923 15.231 C 12.923 16.506 13.957 17.538 15.231 17.538 L 21.692 17.538 C 22.967 17.538 24 16.505 24 15.231 C 24 13.956 22.967 12.923 21.692 12.923 L 15.231 12.923 C 13.956 12.923 12.923 13.957 12.923 15.231 Z M 11.077 2.308 C 11.077 1.033 10.044 0 8.769 0 C 7.495 0 6.462 1.033 6.462 2.308 C 6.462 3.582 7.495 4.615 8.769 4.615 L 11.077 4.615 Z M 11.077 8.769 C 11.077 7.494 10.043 6.462 8.769 6.462 L 2.308 6.462 C 1.033 6.462 0 7.495 0 8.769 C 0 10.044 1.033 11.077 2.308 11.077 L 8.769 11.077 C 10.044 11.077 11.077 10.043 11.077 8.769 Z" fill="transparent" height="24.00000036302602px" id="JSDrMpjUI" width="24.000000363025922px"><path d="M 8.769 11.077 C 10.044 11.077 11.077 10.044 11.077 8.769 C 11.077 7.495 10.044 6.462 8.769 6.462 C 7.495 6.462 6.462 7.495 6.462 8.769 L 6.462 11.077 Z M 2.308 11.077 C 3.583 11.077 4.615 10.043 4.615 8.769 L 4.615 2.308 C 4.615 1.033 3.582 0 2.308 0 C 1.033 0 0 1.033 0 2.308 L 0 8.769 C 0 10.043 1.034 11.077 2.308 11.077 Z" fill="rgb(46, 182, 125)" height="11.076922779713033px" id="ThqHSUDW_" transform="translate(12.923 0)" width="11.07692373338725px"/><path d="M 2.308 0 C 1.033 0 0 1.033 0 2.308 C 0 3.582 1.033 4.615 2.308 4.615 C 3.582 4.615 4.615 3.582 4.615 2.308 L 4.615 0 Z M 8.769 0 C 7.494 0 6.462 1.034 6.462 2.308 L 6.462 8.769 C 6.462 10.044 7.495 11.077 8.769 11.077 C 10.044 11.077 11.077 10.044 11.077 8.769 L 11.077 2.308 C 11.077 1.034 10.043 0 8.769 0 Z" fill="rgb(224, 30, 90)" height="11.076922715744855px" id="foIWPbiPO" transform="translate(0 12.923)" width="11.076922779712934px"/><path d="M 0 8.769 C 0 10.044 1.033 11.077 2.308 11.077 C 3.582 11.077 4.615 10.044 4.615 8.769 C 4.615 7.495 3.582 6.462 2.308 6.462 L 0 6.462 Z M 0 2.308 C 0 3.583 1.034 4.615 2.308 4.615 L 8.769 4.615 C 10.044 4.615 11.077 3.582 11.077 2.308 C 11.077 1.033 10.044 0 8.769 0 L 2.308 0 C 1.033 0 0 1.034 0 2.308 Z" fill="rgb(236, 178, 46)" height="11.07692373338735px" id="I1qIRwtCU" transform="translate(12.923 12.923)" width="11.076922715744812px"/><path d="M 11.077 2.308 C 11.077 1.033 10.044 0 8.769 0 C 7.495 0 6.462 1.033 6.462 2.308 C 6.462 3.582 7.495 4.615 8.769 4.615 L 11.077 4.615 Z M 11.077 8.769 C 11.077 7.494 10.043 6.462 8.769 6.462 L 2.308 6.462 C 1.033 6.462 0 7.495 0 8.769 C 0 10.044 1.033 11.077 2.308 11.077 L 8.769 11.077 C 10.044 11.077 11.077 10.043 11.077 8.769 Z" fill="rgb(54, 197, 240)" height="11.076922779713033px" id="bNeQEvKDX" width="11.076922779712934px"/></g></svg>)
(Team communication)
Fast communication keeps projects moving and makes collaboration with teams feel effortless.
Team Chat
Feedback
File Sharing
YT Music
(07)
![](data:image/svg+xml,<svg display="block" id="3861910896" role="presentation" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g d="M 0 12 C 0 5.373 5.373 0 12 0 C 18.627 0 24 5.373 24 12 C 24 18.627 18.627 24 12 24 C 5.373 24 0 18.627 0 12 Z M 12 6.273 C 15.15 6.273 17.727 8.836 17.727 12 C 17.727 15.164 15.164 17.727 12 17.727 C 8.836 17.727 6.273 15.164 6.273 12 C 6.273 8.836 8.85 6.273 12 6.273 M 12 5.727 C 8.536 5.727 5.727 8.536 5.727 12 C 5.727 15.464 8.536 18.273 12 18.273 C 15.464 18.273 18.273 15.464 18.273 12 C 18.273 8.536 15.464 5.727 12 5.727 Z M 9.818 15.136 L 15.136 11.864 L 9.818 8.864 Z" fill="transparent" height="24px" id="EjQ5kWAQY" width="24px"><path d="M 0 12 C 0 5.373 5.373 0 12 0 C 18.627 0 24 5.373 24 12 C 24 18.627 18.627 24 12 24 C 5.373 24 0 18.627 0 12 Z" fill="rgb(255, 0, 0)" height="24px" id="ltxpG68zL" width="24px"/><path d="M 6.273 0.545 C 9.423 0.545 12 3.109 12 6.273 C 12 9.436 9.436 12 6.273 12 C 3.109 12 0.545 9.436 0.545 6.273 C 0.545 3.109 3.123 0.545 6.273 0.545 M 6.273 0 C 2.809 0 0 2.809 0 6.273 C 0 9.736 2.809 12.545 6.273 12.545 C 9.736 12.545 12.545 9.736 12.545 6.273 C 12.545 2.809 9.736 0 6.273 0 Z" fill="rgb(255, 255, 255)" height="12.545454545454518px" id="ivhApsBRy" transform="translate(5.727 5.727)" width="12.545454545454504px"/><path d="M 0 6.273 L 5.318 3 L 0 0 Z" fill="rgb(255, 255, 255)" height="6.2727272727272805px" id="LquxDiybs" transform="translate(9.818 8.864)" width="5.318181818181756px"/></g></svg>)
(Flow state)
Every project has a soundtrack. Music helps me stay focused and maintain a steady rhythm while designing.voluptua.
Focus
Deep Work
Flow State
"Simplicity is about subtracting the obvious and adding the meaningful."
— John Maeda