PageSourceSearch

https://matveyan.com/cryptoportfolio.html

html matveyan.com collected 2026-10-06 13:13:41 UTC 27,851 bytes, 350 lines download raw bytes

1<!doctype html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
7    <title>Crypto Portfolio Tracker — Product Design Case Study | Matveyan</title>
8    <meta name="description" content="A product design case study for a crypto portfolio tracker that brings wallet balances, asset analytics, portfolio performance, and exchange flows into one interface." />
9    <link rel="canonical" href="https://matveyan.com/cryptoportfolio.html" />
10    <link rel="icon" href="/favicon.ico?v=2" sizes="any" />
11    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=2" />
12    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v=2" />
13    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=2" />
14    <link rel="icon" type="image/png" sizes="192x192" href="/favicon-192x192.png?v=2" />
15
16    <meta property="og:title" content="Crypto Portfolio Tracker — Product Design Case Study | Matveyan" />
17    <meta property="og:description" content="A product design case study for a crypto portfolio tracker that brings wallet balances, asset analytics, portfolio performance, and exchange flows into one interface." />
18    <meta property="og:url" content="https://matveyan.com/cryptoportfolio.html" />
19
20    <meta name="twitter:title" content="Crypto Portfolio Tracker — Product Design Case Study | Matveyan" />
21    <meta name="twitter:description" content="A product design case study for a crypto portfolio tracker that brings wallet balances, asset analytics, portfolio performance, and exchange flows into one interface." />
22
23    
23<script>document.documentElement.classList.add('boot-loading');</script>
23
24    <style>
25      html, body { margin: 0; background: #0f0f0f; }
26      .loader { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: transparent; overflow: hidden; }
27      .boot-loading .loader { background: #0f0f0f; }
28      .loaderContent { position: absolute; top: 50%; left: 50%; display: flex; flex-direction: column; align-items: center; gap: 20px; transform: translate(-50%, -50%); }
29      .loaderContent svg { display: block; width: 30px; height: auto; }
30      .loadline { position: relative; width: 200px; height: 1px; overflow: hidden; background: rgb(255 255 255 / 10%); }
31      .loading-bar { position: absolute; inset: 0 auto 0 0; width: 0%; height: 1px; background: #fff; }
32      .loadpercent { font-family: monospace; font-size: 12px; letter-spacing: 1px; color: #fff; }
33      .boot-loading body > :not(.loader) { opacity: 0 !important; visibility: hidden !important; }
34      .boot-loading #wave { opacity: 0 !important; visibility: hidden !important; }
35    </style>
36    <!-- Yandex.Metrika counter -->
37<script type="text/javascript">
38    (function(m,e,t,r,i,k,a){
39        m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
40        m[i].l=1*new Date();
41        for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
42        k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)
43    })(window, document,'script','https://mc.yandex.ru/metrika/tag.js?id=109113160', 'ym');
44
45    ym(109113160, 'init', {ssr:true, clickmap:true, referrer: document.referrer, url: location.href, accurateTrackBounce:true, trackLinks:true});
46</script>
46
47<!-- /Yandex.Metrika counter -->
48    
48<script type="module" crossorigin src="/assets/style-BKWkXVu2.js"></script>
48
49    <link rel="preload" crossorigin href="/assets/style-9zQ37i4M.css" as="style" onload="this.onload=null;this.rel='stylesheet'"><noscript><link rel="stylesheet" crossorigin href="/assets/style-9zQ37i4M.css"></noscript>
50  </head>
51  <body class="inner">
52    <noscript><div><img src="https://mc.yandex.ru/watch/109113160" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
53    <div class="loader" aria-hidden="true">
54      <div class="loading-screen loading-screen--top"></div>
55      <div class="loading-screen loading-screen--bottom"></div>
56      <div class="loaderContent" id="loadingContent">
57        <svg width="49" height="35" viewBox="0 0 49 35" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
58          <path d="M14 7V35L0 28V0L14 7ZM31.5 7V35L17.5 28V0L31.5 7ZM49 7V35L35 28V0L49 7Z" fill="white"/>
59        </svg>
60        <div class="loadline">
61          <div class="loading-bar"></div>
62        </div>
63        <span class="loadpercent">0%</span>
64      </div>
65    </div>
66    <div class="coursor"></div>
67    <div class="frameScreen">
68      <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="topleft">
69        <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
70      </svg>      
71      <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="topright">
72        <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
73      </svg>    
74      <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="bottomleft">
75        <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
76      </svg>    
77      <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="bottomright">
78        <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
79      </svg>        
80      <div class="header">
81        <div class="logoBlock">
82          <a href="/">
83          <svg width="94" height="14" viewBox="0 0 94 14" fill="none" xmlns="http://www.w3.org/2000/svg">
84            <path d="M93.0507 2.59961C93.1067 2.59961 93.1507 2.61561 93.1827 2.64761C93.2147 2.67961 93.2307 2.72361 93.2307 2.77961V10.8196C93.2307 10.8756 93.2147 10.9196 93.1827 10.9516C93.1507 10.9836 93.1067 10.9996 93.0507 10.9996H91.6827C91.5747 10.9996 91.5027 10.9596 91.4667 10.8796L88.7967 5.10161V10.8196C88.7967 10.8756 88.7787 10.9196 88.7427 10.9516C88.7107 10.9836 88.6687 10.9996 88.6167 10.9996H87.5667C87.5107 10.9996 87.4667 10.9836 87.4347 10.9516C87.4027 10.9196 87.3867 10.8756 87.3867 10.8196V2.77961C87.3867 2.72361 87.4027 2.67961 87.4347 2.64761C87.4667 2.61561 87.5107 2.59961 87.5667 2.59961H88.9347C89.0427 2.59961 89.1147 2.63961 89.1507 2.71961L91.8207 8.49761V2.77961C91.8207 2.72361 91.8367 2.67961 91.8687 2.64761C91.9047 2.61561 91.9487 2.59961 92.0007 2.59961H93.0507Z" fill="white"/>
85            <path d="M86.2371 10.7956C86.2731 10.9316 86.2251 10.9996 86.0931 10.9996H84.8691C84.7531 10.9996 84.6851 10.9516 84.6651 10.8556L84.3291 9.48761H81.5211L81.1851 10.8556C81.1651 10.9516 81.0971 10.9996 80.9811 10.9996H79.7631C79.6271 10.9996 79.5791 10.9316 79.6191 10.7956L81.7431 2.74361C81.7751 2.64761 81.8451 2.59961 81.9531 2.59961H83.8971C84.0051 2.59961 84.0751 2.64761 84.1071 2.74361L86.2371 10.7956ZM81.8511 8.14361H83.9991L83.0331 4.21961H82.8171L81.8511 8.14361Z" fill="white"/>
86            <path d="M71.3431 2.59961C71.4151 2.59961 71.4611 2.61961 71.4811 2.65961C71.5051 2.69961 71.4991 2.75161 71.4631 2.81561L68.9431 7.65161V10.8196C68.9431 10.8756 68.9271 10.9196 68.8951 10.9516C68.8631 10.9836 68.8191 10.9996 68.7631 10.9996H67.5511C67.4951 10.9996 67.4511 10.9836 67.4191 10.9516C67.3871 10.9196 67.3711 10.8756 67.3711 10.8196V7.62761L64.8511 2.81561C64.8151 2.75161 64.8071 2.69961 64.8271 2.65961C64.8511 2.61961 64.8991 2.59961 64.9711 2.59961H66.2431C66.3511 2.59961 66.4231 2.63961 66.4591 2.71961L68.1571 6.16961L69.8551 2.71961C69.8911 2.63961 69.9631 2.59961 70.0711 2.59961H71.3431Z" fill="white"/>
87            <path d="M63.4093 9.60761C63.4653 9.60761 63.5093 9.62361 63.5413 9.65561C63.5733 9.68761 63.5893 9.73161 63.5893 9.78761V10.8196C63.5893 10.8756 63.5733 10.9196 63.5413 10.9516C63.5093 10.9836 63.4653 10.9996 63.4093 10.9996H58.2073C58.1553 10.9996 58.1113 10.9836 58.0753 10.9516C58.0433 10.9196 58.0273 10.8756 58.0273 10.8196V2.77961C58.0273 2.72361 58.0433 2.67961 58.0753 2.64761C58.1113 2.61561 58.1553 2.59961 58.2073 2.59961H63.3973C63.4533 2.59961 63.4973 2.61561 63.5293 2.64761C63.5613 2.67961 63.5773 2.72361 63.5773 2.77961V3.81161C63.5773 3.86761 63.5613 3.91161 63.5293 3.94361C63.4973 3.97561 63.4533 3.99161 63.3973 3.99161H59.5933V6.00161H63.0913C63.1433 6.00161 63.1853 6.01961 63.2173 6.05561C63.2533 6.08761 63.2713 6.12961 63.2713 6.18161V7.21961C63.2713 7.27561 63.2533 7.31961 63.2173 7.35161C63.1853 7.38361 63.1433 7.39961 63.0913 7.39961H59.5933V9.60761H63.4093Z" fill="white"/>
88            <path d="M55.1339 2.74361C55.1539 2.64761 55.2219 2.59961 55.3379 2.59961H56.5619C56.6939 2.59961 56.7419 2.66761 56.7059 2.80361L54.5759 10.8556C54.5439 10.9516 54.4739 10.9996 54.3659 10.9996H52.4219C52.3139 10.9996 52.2439 10.9516 52.2119 10.8556L50.0879 2.80361C50.0479 2.66761 50.0959 2.59961 50.2319 2.59961H51.4499C51.5659 2.59961 51.6339 2.64761 51.6539 2.74361L53.2859 9.37361H53.5019L55.1339 2.74361Z" fill="white"/>
89            <path d="M48.9219 2.59961C48.9779 2.59961 49.0219 2.61561 49.0539 2.64761C49.0859 2.67961 49.1019 2.72361 49.1019 2.77961V3.81161C49.1019 3.86761 49.0859 3.91161 49.0539 3.94361C49.0219 3.97561 48.9779 3.99161 48.9219 3.99161H46.7979V10.8196C46.7979 10.8756 46.7819 10.9196 46.7499 10.9516C46.7179 10.9836 46.6739 10.9996 46.6179 10.9996H45.4059C45.3499 10.9996 45.3059 10.9836 45.2739 10.9516C45.2419 10.9196 45.2259 10.8756 45.2259 10.8196V3.99161H43.1019C43.0459 3.99161 43.0019 3.97561 42.9699 3.94361C42.9379 3.91161 42.9219 3.86761 42.9219 3.81161V2.77961C42.9219 2.72361 42.9379 2.67961 42.9699 2.64761C43.0019 2.61561 43.0459 2.59961 43.1019 2.59961H48.9219Z" fill="white"/>
90            <path d="M41.9402 10.7956C41.9762 10.9316 41.9282 10.9996 41.7962 10.9996H40.5722C40.4562 10.9996 40.3882 10.9516 40.3682 10.8556L40.0322 9.48761H37.2242L36.8882 10.8556C36.8682 10.9516 36.8002 10.9996 36.6842 10.9996H35.4662C35.3302 10.9996 35.2822 10.9316 35.3222 10.7956L37.4462 2.74361C37.4782 2.64761 37.5482 2.59961 37.6562 2.59961H39.6002C39.7082 2.59961 39.7782 2.64761 39.8102 2.74361L41.9402 10.7956ZM37.5542 8.14361H39.7022L38.7362 4.21961H38.5202L37.5542 8.14361Z" fill="white"/>
91            <path d="M28.473 10.9996C28.421 10.9996 28.377 10.9836 28.341 10.9516C28.309 10.9196 28.293 10.8756 28.293 10.8196V2.77961C28.293 2.72361 28.309 2.67961 28.341 2.64761C28.377 2.61561 28.421 2.59961 28.473 2.59961H29.721C29.849 2.59961 29.921 2.63961 29.937 2.71961L31.203 9.25961H31.287L32.553 2.71961C32.569 2.63961 32.641 2.59961 32.769 2.59961H34.017C34.069 2.59961 34.111 2.61561 34.143 2.64761C34.179 2.67961 34.197 2.72361 34.197 2.77961V10.8196C34.197 10.8756 34.179 10.9196 34.143 10.9516C34.111 10.9836 34.069 10.9996 34.017 10.9996H33.087C33.031 10.9996 32.987 10.9836 32.955 10.9516C32.923 10.9196 32.907 10.8756 32.907 10.8196V5.78561H32.823L31.803 10.8556C31.787 10.9516 31.717 10.9996 31.593 10.9996H30.897C30.773 10.9996 30.703 10.9516 30.687 10.8556L29.667 5.78561H29.583V10.8196C29.583 10.8756 29.567 10.9196 29.535 10.9516C29.503 10.9836 29.459 10.9996 29.403 10.9996H28.473Z" fill="white"/>
92            <path fill-rule="evenodd" clip-rule="evenodd" d="M5.59961 2.7998V14L0 11.2002V0L5.59961 2.7998ZM12.5996 2.7998V14L7 11.2002V0L12.5996 2.7998ZM19.5996 2.7998V14L14 11.2002V0L19.5996 2.7998Z" fill="white"/>
93            </svg>
94          </a>
95          <svg id="wave" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 38.05" data-cursor-text="Enable sound">
96            <title>Audio Wave</title>
97            <path id="Line_1" data-name="Line 1" d="M0.91,15L0.78,15A1,1,0,0,0,0,16v6a1,1,0,1,0,2,0s0,0,0,0V16a1,1,0,0,0-1-1H0.91Z"/>
98            <path id="Line_2" data-name="Line 2" d="M6.91,9L6.78,9A1,1,0,0,0,6,10V28a1,1,0,1,0,2,0s0,0,0,0V10A1,1,0,0,0,7,9H6.91Z"/>
99            <path id="Line_3" data-name="Line 3" d="M12.91,0L12.78,0A1,1,0,0,0,12,1V37a1,1,0,1,0,2,0s0,0,0,0V1a1,1,0,0,0-1-1H12.91Z"/>
100            <path id="Line_4" data-name="Line 4" d="M18.91,10l-0.12,0A1,1,0,0,0,18,11V27a1,1,0,1,0,2,0s0,0,0,0V11a1,1,0,0,0-1-1H18.91Z"/>
101            <path id="Line_5" data-name="Line 5" d="M24.91,15l-0.12,0A1,1,0,0,0,24,16v6a1,1,0,0,0,2,0s0,0,0,0V16a1,1,0,0,0-1-1H24.91Z"/>
102            <path id="Line_6" data-name="Line 6" d="M30.91,10l-0.12,0A1,1,0,0,0,30,11V27a1,1,0,1,0,2,0s0,0,0,0V11a1,1,0,0,0-1-1H30.91Z"/>
103            <path id="Line_7" data-name="Line 7" d="M36.91,0L36.78,0A1,1,0,0,0,36,1V37a1,1,0,1,0,2,0s0,0,0,0V1a1,1,0,0,0-1-1H36.91Z"/>
104            <path id="Line_8" data-name="Line 8" d="M42.91,9L42.78,9A1,1,0,0,0,42,10V28a1,1,0,1,0,2,0s0,0,0,0V10a1,1,0,0,0-1-1H42.91Z"/>
105            <path id="Line_9" data-name="Line 9" d="M48.91,15l-0.12,0A1,1,0,0,0,48,16v6a1,1,0,1,0,2,0s0,0,0,0V16a1,1,0,0,0-1-1H48.91Z"/>
106          </svg>
107        </div>
108        <ul class="mainMenu">
109          <li><a href="cv.pdf" class="link" target="_blank" rel="noopener noreferrer">cv <svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
110            <path d="M4 0H0L4 4V0Z" fill="white"/>
111            </svg>
112            </a></li>
113          <li><a href="https://www.behance.net/matart" class="link" target="_blank" rel="noopener noreferrer">behance <svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
114            <path d="M4 0H0L4 4V0Z" fill="white"/>
115            </svg>
116            </a></li>
117          <li><a href="https://dribbble.com/MatveyAnanev" class="link" target="_blank" rel="noopener noreferrer">dribbble <svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
118            <path d="M4 0H0L4 4V0Z" fill="white"/>
119            </svg>
120            </a></li>
121          <li><a href="https://www.linkedin.com/in/matveyan/" class="link" target="_blank" rel="noopener noreferrer">linkedin <svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
122            <path d="M4 0H0L4 4V0Z" fill="white"/>
123            </svg>
124            </a></li>
125            <li><a href="mailto:[email protected]" class="link" target="_blank" rel="noopener noreferrer">Mail <svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
126              <path d="M4 0H0L4 4V0Z" fill="white"/>
127              </svg>
128              </a></li>
129        </ul>          
130        <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="bottomleft">
131          <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
132        </svg>    
133        <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="bottomright">
134          <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
135        </svg>        
136      </div>
137      </div>
138
139    <div class="bgCase caseCp"></div>
140    <div class="edge-blur" aria-hidden="true">
141      <div class="edge-blur__top"></div>
142      <div class="edge-blur__bottom"></div>
143    </div>
144    
145    
146      <div class="noise"></div>
147
148
149      <div class="section headcase">
150        <div class="container caseheader">
151          <ul class="breadcrumbs">
152            <li><a href="/">Home</a></li>
153            <li>Crypto Portfolio Tracker</li>
154          </ul>
155          <h1>Crypto Portfolio Tracker</h1>
156          <p>A product concept for tracking crypto assets, monitoring portfolio performance, and managing wallet actions in one interface. I designed the information architecture, visual system, and key flows for portfolio overview, asset analytics, and token exchange.</p>
157        </div>
158      </div>
159
160      <div class="section">
161        <div class="container casecontainer" data-motion-text>
162          <div class="casedescription">
163            <h2>Problem</h2>
164            <p>Crypto investors often manage assets across multiple wallets, exchanges, and analytics tools. This makes it difficult to understand portfolio performance, compare winners and losers, and take action quickly when the market changes.</p>
165          </div>
166        </div>
167      </div>
168
169      <div class="section">
170        <div class="container casecontainer" data-motion-text>
171          <div class="casedescription">
172            <h2>Solution</h2>
173            <p>The concept combines portfolio tracking, wallet actions, asset analytics, and exchange flows in one mobile product. Users can see the health of their portfolio, inspect individual assets, and move from insight to action without switching between separate services.</p>
174          </div>
175        </div>
176      </div>
177
178      <div class="section">
179        <div class="container casecontainer" data-motion-text>
180          <div class="casedescription">
181            <h2>My role</h2>
182            <p>I designed the product structure, core screens, and visual language for the app. My focus was to organize dense financial information into a clear mobile experience that supports both quick portfolio checks and deeper asset analysis.</p>
183          </div>
184        </div>
185      </div>
186
187      <div class="section">
188        <div class="container casecontainer" data-motion-text>
189          <div class="casedescription">
190            <h2>Design approach</h2>
191            <p>The interface separates high-level portfolio signals from detailed asset views. The start screen summarizes performance and available actions, while asset pages provide charts, statistics, and news for more informed decisions. Trading actions stay close to the data that triggers them.</p>
192          </div>
193        </div>
194      </div>
195
196
197      <div class="section">
198        <div class="container casecontainer" data-motion-text>
199          <div class="casedescription">
200            <h2>Start screen</h2>
201            <p>The start screen gives users a fast read on weekly portfolio performance. It combines total balance, key actions, biggest gains and losses, cards, and the asset list so users can understand the current state of their portfolio at a glance.</p>
202          </div>
203          <div class="images">
204            <img src="/assets/1-m0s8TjSP.jpg" alt="Crypto Portfolio Tracker start screen" title="Crypto Portfolio Tracker start screen">
205            <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="topleft">
206        <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
207      </svg>      
208      <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="topright">
209        <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
210      </svg>    
211      <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="bottomleft">
212        <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
213      </svg>    
214      <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="bottomright">
215        <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
216      </svg>        
217          </div>
218        </div>
219      </div>
220      <div class="section">
221        <div class="container casecontainer" data-motion-text>
222          <div class="casedescription">
223            <h2>Swap tokens</h2>
224            <p>The swap flow turns portfolio insight into action. Users can exchange assets through a clear step-by-step form, while popular pairs reduce friction for common trading scenarios and help users avoid repetitive token selection.</p>
225          </div>
226          <div class="images">
227            <img src="/assets/2-V3FEaBBT.jpg" alt="Crypto Portfolio Tracker token swap screen" title="Crypto Portfolio Tracker token swap screen">
228            <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="topleft">
229        <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
230      </svg>      
231      <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="topright">
232        <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
233      </svg>    
234      <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="bottomleft">
235        <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
236      </svg>    
237      <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="bottomright">
238        <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
239      </svg>        
240          </div>
241        </div>
242      </div>
243      <div class="section">
244        <div class="container casecontainer" data-motion-text>
245          <div class="casedescription">
246            <h2>Open asset</h2>
247            <p>The asset screen supports deeper analysis before a user buys, sells, or swaps. It brings together charts, instrument statistics, market context, and relevant news so the user can evaluate an asset without leaving the product.</p>
248          </div>
249          <div class="images">
250            <img src="/assets/3-cGnvebwn.jpg" alt="Crypto Portfolio Tracker asset details screen" title="Crypto Portfolio Tracker asset details screen">
251            <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="topleft">
252        <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
253      </svg>      
254      <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="topright">
255        <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
256      </svg>    
257      <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="bottomleft">
258        <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
259      </svg>    
260      <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="bottomright">
261        <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
262      </svg>        
263          </div>
264        </div>
265      </div>
266      <div class="section">
267        <div class="container casecontainer" data-motion-text>
268          <div class="casedescription">
269            <h2>Statistics</h2>
270            <p>The statistics view helps users compare assets and understand portfolio composition beyond a single balance number. It makes performance, allocation, and market movement easier to scan in a compact mobile format.</p>
271          </div>
272          <div class="images">
273            <img src="/assets/4-BL4LTPEI.jpg" alt="Crypto Portfolio Tracker statistics screen" title="Crypto Portfolio Tracker statistics screen">
274            <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="topleft">
275        <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
276      </svg>      
277      <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="topright">
278        <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
279      </svg>    
280      <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="bottomleft">
281        <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
282      </svg>    
283      <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="bottomright">
284        <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
285      </svg>        
286          </div>
287        </div>
288      </div>
289
290      <div class="section">
291        <div class="container casecontainer" data-motion-text>
292          <div class="casedescription">
293            <h2>Result</h2>
294            <p>The final concept creates a unified control center for crypto portfolio management. Users can track performance, inspect assets, understand market movement, and act on their portfolio from one coherent mobile interface.</p>
295          </div>
296        </div>
297      </div>
298
299      <div class="section lalalast">
300        <div class="container last" data-motion-text>
301          <h2>Available for full-time product design roles</h2>
302          <p>If you’re hiring a senior designer for fintech, trading, or complex digital products, let’s talk.</p>
303          <ul class="mainMenu" >
304            <li><a target="_blank" rel="noopener noreferrer" href="https://www.linkedin.com/in/matveyan/" class="link">Linkedin<svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
305              <path d="M4 0H0L4 4V0Z" fill="white"/>
306              </svg>
307              </a></li>
308            <li><a target="_blank" rel="noopener noreferrer" href="https://www.behance.net/matart" class="link">Behance<svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
309              <path d="M4 0H0L4 4V0Z" fill="white"/>
310              </svg>
311              </a></li>
312            <li><a target="_blank" rel="noopener noreferrer" href="https://dribbble.com/MatveyAnanev" class="link">Dribbble<svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
313              <path d="M4 0H0L4 4V0Z" fill="white"/>
314              </svg>
315              </a></li>
316            <li><a target="_blank" rel="noopener noreferrer" href="mailto:[email protected]" class="link">Mail<svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
317              <path d="M4 0H0L4 4V0Z" fill="white"/>
318              </svg>
319              </a></li>
320            <li><a target="_blank" rel="noopener noreferrer" href="https://t.me/MatveyAnanev" class="link">Telegram<svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
321              <path d="M4 0H0L4 4V0Z" fill="white"/>
322              </svg>
323              </a></li>
324            <li><a target="_blank" rel="noopener noreferrer" href="https://t.me/fintechuien" class="link">Telegram channel<svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
325              <path d="M4 0H0L4 4V0Z" fill="white"/>
326              </svg>
327              </a></li>
328            <li><a target="_blank" rel="noopener noreferrer" href="https://x.com/MAnanev38201" class="link">X<svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
329              <path d="M4 0H0L4 4V0Z" fill="white"/>
330              </svg>
331              </a></li>
332          </ul>   
333              <img src="/assets/avatar-BLowVkpa.png" alt="Portrait of Matvey Ananev, fintech designer" title="Portrait of Matvey Ananev, fintech designer">
334          </div>
335          <div class="container vse" data-motion-text>
336            <svg viewBox="0 0 190 22" fill="none" xmlns="http://www.w3.org/2000/svg">
337              <path d="M189.675 0V21.8182H184.732L176.848 10.3551H176.72V21.8182H170.797V0H175.825L183.581 11.4205H183.751V0H189.675Z" fill="white"/>
338              <path d="M150.587 21.8182H144.195L151.397 0H159.494L166.695 21.8182H160.303L155.531 6.00852H155.36L150.587 21.8182ZM149.394 13.2102H161.411V17.642H149.394V13.2102Z" fill="white"/>
339              <path d="M121.312 0H127.918L132.179 8.86364H132.349L136.611 0H143.216L135.205 14.9574V21.8182H129.324V14.9574L121.312 0Z" fill="white"/>
340              <path d="M101.543 21.8182V0H117.267V4.77273H107.466V8.52273H116.458V13.2955H107.466V17.0455H117.225V21.8182H101.543Z" fill="white"/>
341              <path d="M81.6357 0L86.1101 15.3835H86.2805L90.755 0H97.4453L90.2436 21.8182H82.147L74.9453 0H81.6357Z" fill="white"/>
342              <path d="M52.4766 4.77273V0H71.4396V4.77273H64.8771V21.8182H59.0391V4.77273H52.4766Z" fill="white"/>
343              <path d="M35.6186 21.8182H29.2266L36.4283 0H44.5249L51.7266 21.8182H45.3345L40.5618 6.00852H40.3913L35.6186 21.8182ZM34.4254 13.2102H46.4425V17.642H34.4254V13.2102Z" fill="white"/>
344              <path d="M0 0H7.37216L12.4432 12.358H12.6989L17.7699 0H25.142V21.8182H19.3466V9.20455H19.1761L14.3182 21.6477H10.8239L5.96591 9.11932H5.79545V21.8182H0V0Z" fill="white"/>
345              </svg>          
346          </div>
347      </div>  
348  
349  </body>
350</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.