From 0ec6a1559e0f1f15654e6bc363bcc41faa976084 Mon Sep 17 00:00:00 2001 From: Pavel Date: Mon, 2 Mar 2026 12:33:33 +0500 Subject: [PATCH 1/2] Make skills page as a main page. Fix info --- app/globals.css | 19 +++--- app/home/page.tsx | 11 ++++ app/page.tsx | 19 +++--- app/skills/page.tsx | 10 --- components/Portfolio/index.tsx | 40 +++++++----- components/Skills/Grid/SkillViewer.ts | 7 --- components/Skills/Grid/index.ts | 2 +- components/Skills/Grid/model.ts | 84 ++++++++++++++------------ components/Skills/Grid/utils.ts | 28 ++------- components/Skills/Skills.module.css | 10 +-- components/Skills/index.tsx | 14 ++--- public/images/libs/vue.png | Bin 2657 -> 2761 bytes public/images/me.png | Bin 0 -> 1288 bytes 13 files changed, 115 insertions(+), 129 deletions(-) create mode 100644 app/home/page.tsx delete mode 100644 app/skills/page.tsx create mode 100644 public/images/me.png diff --git a/app/globals.css b/app/globals.css index fb4cdc6..e3e2538 100644 --- a/app/globals.css +++ b/app/globals.css @@ -132,8 +132,12 @@ p { padding: 0; width: 500px; height: 500px; + max-width: 100%;; position: absolute; - display: none; + visibility: hidden; + display: flex; + flex-direction: column; + justify-content: space-between; z-index: 3; } @@ -169,40 +173,35 @@ p { } .detailHeader { - position: absolute; cursor: default; pointer-events: none; user-select: none; - top: 30px; + margin-top: 30px; width: 100%; max-width: 500px; text-align: center; color: #FFFFFF; font-size: 50px; - text-shadow: rgba(0,0,0, 0.4) 0em 0em 0.3em; + text-shadow: rgba(0,0,0, 0.4) 0em 0em 0.1em; font-family: 'Conv_Curse Casual',Sans-Serif; } .detailDescription { - position: absolute; pointer-events: none; cursor: default; user-select: none; - top: 90px; - left: 0; padding: 0 20px; text-align: left; white-space: break-spaces; color: #FFFFFF; font-size: 18px; - text-shadow: rgba(0,0,0, 0.4) 0em 0em 0.3em; + text-shadow: rgba(0,0,0, 0.4) 0em 0em 0.1em; font-family: Calibri, Arial, Helvetica, sans-serif; } .detailName{ - position: absolute; cursor: default; - top: 455px; + margin-bottom: 30px; width: 100%; text-align: center; color: #000000; diff --git a/app/home/page.tsx b/app/home/page.tsx new file mode 100644 index 0000000..ebd645e --- /dev/null +++ b/app/home/page.tsx @@ -0,0 +1,11 @@ +import Footer from '@/components/Footer'; +import Home from '@/components/Home'; + +export default function Homepage(): JSX.Element { + return ( +
+ +
+
+ ); +} diff --git a/app/page.tsx b/app/page.tsx index ebd645e..8c7b9e3 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,11 +1,10 @@ -import Footer from '@/components/Footer'; -import Home from '@/components/Home'; +import Skills from '@/components/Skills'; +import { Metadata } from 'next'; -export default function Homepage(): JSX.Element { - return ( -
- -
-
- ); -} +export const metadata: Metadata = { + title: 'Skills', +}; + +export default (): JSX.Element => { + return ; +}; diff --git a/app/skills/page.tsx b/app/skills/page.tsx deleted file mode 100644 index 8c7b9e3..0000000 --- a/app/skills/page.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import Skills from '@/components/Skills'; -import { Metadata } from 'next'; - -export const metadata: Metadata = { - title: 'Skills', -}; - -export default (): JSX.Element => { - return ; -}; diff --git a/components/Portfolio/index.tsx b/components/Portfolio/index.tsx index 717a495..c837e44 100644 --- a/components/Portfolio/index.tsx +++ b/components/Portfolio/index.tsx @@ -25,9 +25,9 @@ export default (): JSX.Element => {

Full-Stack web developer
- Age 35 y.o. + Age 36 y.o.
- City Moscow + City Aktau
English B+

@@ -37,51 +37,63 @@ export default (): JSX.Element => {

Work examples:

Github - Group chat app + NFT Marketplace -  (React, Socket.io, CRA, MUI, tests) +  (React, Sass)

Github - Rest-Api service + GraphQL boilerplate -  (Express, PostgreSQL, Sequelize, tests) +  (TypeGraphQL, TypeORM, Apollo, NextJS)

Github - Storybook boilerplate + Group chat app -  (Storybook, React, Sass) +  (React, Socket.io, MUI, e2e tests)

Github - NFT Marketplace + Rest-Api service -  (React, Sass) +  (Express, PostgreSQL, Sequelize, unit tests) +

+

+ + Github + Storybook boilerplate + +  (Storybook, React, Sass)

{ - if (opacity <= 0.1) { - clearInterval(timer); - el.style.display = 'none'; - } - - el.style.opacity = `${opacity}`; - opacity -= opacity * 0.1; - }, 10); + setTimeout(() => (el.style.opacity = '0'), 200); + setTimeout(() => (el.style.visibility = 'hidden'), 1000); } export function fadeIn(el: HTMLElement): void { - let opacity = 0.01; - - el.style.display = 'block'; - - const timer = setInterval(() => { - if (opacity >= 1) { - clearInterval(timer); - } - - el.style.opacity = `${opacity}`; - opacity += opacity * 0.1; - }, 10); + el.style.opacity = '0'; + el.style.visibility = 'visible'; + setTimeout(() => (el.style.opacity = '1'), 200); } diff --git a/components/Skills/Skills.module.css b/components/Skills/Skills.module.css index 9064a7d..8339b96 100644 --- a/components/Skills/Skills.module.css +++ b/components/Skills/Skills.module.css @@ -1,5 +1,5 @@ .bg { - background: #505050; + background: #fff; } .title { @@ -10,7 +10,7 @@ height: 100vh; font-size: 1.1rem; font-weight: 400; - color: #f5f5f5; + color: #333333; } .footer{ @@ -35,9 +35,3 @@ .footer .footerSound { margin: 5px 12px; } - -.home a { - padding: 10px; - margin-right: 10px; - color: #fff; -} diff --git a/components/Skills/index.tsx b/components/Skills/index.tsx index be19b33..3040643 100644 --- a/components/Skills/index.tsx +++ b/components/Skills/index.tsx @@ -1,7 +1,6 @@ 'use client'; import { useRef } from 'react'; -import Link from 'next/link'; import Script from 'next/script'; import SoundButton from '@/components/SoundButton'; import Theme from '@/components/SoundButton/types'; @@ -19,15 +18,16 @@ export default ({ version }: Props): JSX.Element => { return ( <>

-
My Skills (beta)
+
Hi, I'm Pavel
- - Home - - My Skills (beta) -  {version} +

+ ABOUT ME +
+ {new Date(Number(process.env.date) * 1000).getFullYear() || ''}{' '} +  {version} +

diff --git a/public/images/libs/vue.png b/public/images/libs/vue.png index 2fe5022bb480ddbc76d3b388187f48da4bb772a5..409a0d94c8a38f30625596a293513f201ee63274 100644 GIT binary patch delta 2392 zcmai0`#aN%1O6)8;mfA%{@86l0FXu{Fb-D7lrT*hZlpm)tYV zn4A0I(+kAT1LBcJ`yRMF6;I1^`Q80C4^h0H~nJofmBZ z02Jrr>F2s%XflWa5q^L62W(%1FbHp7z~M7Da^D<6LoX!)fQ;h*2?9#Us{7$V49v^* z;L?HPQdXulvMVM4AoU35;^_C=#23nTfEw(`>)mQ0KYjpL+C|^`ZYHPQcbF*kM*CNt z;y=>vM%m8&bk)0MKtSkm10NJ$o-Aj*^C_F5PzepAzQ~Y}DXCtw!+rk=ZrL|Q2VNOX zch@u`3k$bjm^q0h=|91dG%b)0t(r*}yNcEMI@^yLW8&qQuqEmc6`{nse7)q#7pEI! z`EZdzzta)s1tZ)ryCv1~+A7PHNoY+nIs4uQ(Lrmn$eON55r*zsSTH($*|3(L2dX?{ z6b7!HRz9J%j9}GT0Y3DOwH=O+px3VmQq9B(Ny~@XIV}CpANUwGgVP% zW|g|8yTz@w?%O5C7BqBks^441Jtl*x#8Z~odQu_wbpo7I znY5?)bsfAgU$!J+*?wPPug|3y;xht+gZDN!vqEoR!b&f=B{ytc#GbhAmjCxa0|m+} zd*C)U_(88HF}26+I9S<}!s%)|kFv~ONMMD=)WnQNuD8CBe@e}NXp4C{QG6!6 zP!8>;4^MVX)w`W~?|$+ta9WU(B_pW3rFl(D>|>eQYQkFd$T;C6P#Mo^fb5i5GM@d| za7Ny>!dBnCpDbiMxEFbhtc+S{%u?GRU-dM&_a68b4ZX{gciB<(j3Vl5B5>_P9K1Bg zPEN87^l$rd!_OKJO81N!_itzg!@n@!_a8BYiKbIah2Qk(ea@E$p`Dx91gON_yy|a8 zb;u7?@17zPAA)BTwU*LCeWixt@^_f^|cI3cMUn1;pe zixbDNqG@*p=5X+fXlRwlv=5Vh{6p5fiYzLX6mzV- zs?LOPCp>)4PcydP$IU)%(zt14q%vz(TCjetHh}-ia9s~(ZW~6-ZFY{gQCwr*&S~tC zyV#i)DPP}-EfEEz%YOewr_ayi1bU-0h5KOqZB(PjJN?@-E47{OJe(PWW+$IZRc&5Z zmqrVsnY-M2QaCRJb|>67-8F~lw&fPeVi0odWkYsUOGJWM7(EiqE^Q2`F}Mv!q*LqP z0yNZfr;1W}qo4Q8O@`}}78Y$ym65e4g(#3*yiKywZ0q4^gn#DQ>^}dOQ}x|RcZ_+c z9O!WG5p~;w(B5OYhOx4BQnihlwIaRiU)*Fji97m6I(P+|NMCc{T*IeSpEYP8AxkQ# zV;D84Y&^JHPFzy-KOou8dR+fj!YYs?S}@XsHF0eQnW5wTC$2(p!fN8jDS@mV_=`j$eGUED9VxL zR%>}3Pk!EY+AiD`v6^WAj7}lYb#Dc~xzBcPCl%P92)7KIyw_n=cS!Ja)d8}g=2Pm3 zL5_Q|^`^VJc06l zeH0Q{9xZ)ZOrAKj5_#`EMA+`ogu2eZ8ZEK4ZT4uIUoK|kbGTirHLHeTYZSDC8RVmf z8FQu0?U*}HU)4-&HyYO@fp?IG@(fSq&~J?yoRyL;I+FKfFYgR?3?ghI%T_MTO2>77 zkvt9;+af;8)JW5)6x>+;>Cm0jk?{*{1$p^Q$slhV9J>+K|8jqq)m_Ov20)8Z2sk|M z((zk1oif}F8(T7KBn;J0x^@O;JsziDPBCsdC|}qAJD!C{;zAKA!w0%iCu4N@3L2F^ zwg#77+pAWFWNbh-(1oP9JZ9$&(4&K%T=!0w4|AQpZXSJNwE`WSL2-L;eno9bGsUlC5j2i9kUKAFWzY&ivKO2e+<+wz|N- zYotHVlolLbpFni{CI!)Ofi%-Fh3FY%N-&qiD8VPaYhybvQHn~H!b2YlEqQzSD5Jgf z6qO47Ov=EP9S>R72=1m>*=ZqJjrAa2F*Xk9)Pl>IguU*MHA#)4j-TEeE z7cjr>*sn$F!Jc;Y#xhabTC+xI#lAfe6gzk!lLPH{Gp-~=xU&c1t>NdVliIxOqqi*e z9-7~HQ^=<4A-12PPr}GUp4NUly6(KuY_uT(J$cDmWhVOQsq>Q7S#bs)64r((TFI@L zIq;F8Y_t_!Q_>gzlK-(S!&fn{xI4kaut%2+Ur-|3TOMHBBp3Mqd1{0&hY)h1&>uq( z_W|55hQgamf)me}q>+!R$M~qMUUh00ogG9f)6ml9Yxii#*G>DT?RH;<-cz0tm0-F3 z*)V(2#InzK{9MZtvQP}li=wdQCm?Uf${2)O;#Kfq(~oOcj-IoibTYDG27^1Yka!T@%_e00@IgL_t(|+U(o+QxicH2k>VvV;LRm*mv)Y zdo2kjBry^(loW_5pb`ZI1$*y*zB4+OD7^0_a=CS8Kff}N+4&y(Uf%AJVHk#Ce;9^g z7=~dOhG7_nVHk#C7=~dOhG7_nVHk#C7=~dOhVlQ~Gj$P|`Fx3W{~3k!mj63nZeK*Q zw3)Jj1r$0toAdS%h4PX8GdX){)B?t7bB$X9SgJ|R{BsK9eNJ+`v5Ww&Owi_Mk4lash@u zNl~~N2%xy^NREA;SkLGA&=*J1%CAv0VC7F!oG~ zk3GlsboXy{(z#A_XV&}b=crO(Z*gqWq;MJ2xNRWMP++np#oQNmE^pp4ZTx* zVJo806E`V3r7P&u3ms1~?6-S1ENpD(s=g|as}!L_vp(ACmTH3)xc4?+*v1|Sz|T^Y zCIS?Dag2{$o*rb6^Xg4Ye*o7gT2r`{uS!mC{Q~#OmK?Wz8HT=#qO~tU@C&isdU zLzf)qdO-lz6h-ZU0IX@gz*GB3SKQT<0FrwsYWra9R)z1%p8j3n&M2_Q6$LOd zNzuCn|Jw^M+1QnPmj3XO553kv&AUHK!!QeDZ`An$cZqsE;|rU&fA%PWLf=Zmu*DZZ zX3b&Op8G&OKIQm5u4%=;$9*>w{NqmN-tR4J^K9sLD}_Gq>UJ8AgCKU?%G(d=m;LuW z$xtt+hc=+VN+SXQJDvOPP}l*5EZ>8V`#22`o>ko|v#~qB#r{-soK8jn=`0P;mMgfG zSCaGY=T7&6e?Dq=e`9andtI~Otg7mTYUQ8h_yI*LW1-Mb&@gRFTOf8gl|N43xC%7y zXyu7K4Oa<%du?9lYx|q;$1VJT!g-t$Kzct7*S;i5BUP#Mu|FiDb71oRvS8^`*nTJp zr1->PYy12$q8GMgc;!Xd%_L~}ZV13yDoalHBiQ4l(}so3f8R;NH{qkDr^Xz`98x(Gh&? zY%9rN3Y#T>e>}x055K)GtPB);{qZOaeK*BvUs~W+et_7WP7#J)qIgaE_}JN%{ZjP? z41Jv9He*}Mk`-|r;C1x^m8i#hZfg8Jb4F_q@nHO z0!XaZC8rx=kIRydviK@t$77p!cx@)QL3+YBNVx*%+HHIvbQkF<#A~lDhnY$>1rSV; zu4eGiV$Rtp^m>TGwwrXdClR8R-|#*teqmM5e?9KIo4x?1JKYUlSY3hx3f-FbUhrkG z)MD9N|IRxeQ0Ow1THltD5HEwd>%HjEOz3qV^ecOJ+uB4B!~uM*p*}=yq3R1?4qKKZ z*}di@5RS9KYl*(76o_uinEj0Y`^Z@|?=OY#)-wr+>wMsxc~AYCN>$rc z=$Gztv;4~szi;{U&|!%QQuQT|9P^;bhM-^-|I&RJmNM@rl5X?v*vjj#{}i}EWN~7s zCumrU@dWALpB^2cg)Ny2D(1>QD<9<-f9QkNOwfVnsxI6e*aKII&snKPYv&-RQpo<%e^UBfgkog`F3d!PW1_)9M!R`0>y_GB%6U+CyD8Yx z^qcqF3LJq;4DH%T;D+DVW|m=^T9)*13R~fc1}lDCV!*ktok>3CYV247N`_U~3TFx+ z%3K$c@fTGGO*2>H93LCz5_Uqcr61<4JF`%fj9q3Bg#xdMZuZWPHf0=F!D4ZUH z$=KfqtL^9~P)&w0dB4k13YGRm`1Hg7fyqPJF*L5tAX>XYs_AB>T)b0VYTmJ_ynZXX zp`SsS32`b_ZLYf1yx%pIPr`2A%f=&$4_4b>J1d%*_qzJVw;Ra!=StIhl;5V<*He+p zx08gD2X(h^U}4my!d7^kUcy4R3R~gI0C;r+xlQ;nN;;Pq+BG&^YTnDT?iIE|sC!k$ z7-Nhv#u#IaF~%5Uj4{R-V~jDz7-Nhv_G_bH6pVsVFbYNiO#lG7wgi2t8JQ&68C|4i`0L5mQO>$O{roW7RfOx2?=J zG)3J!(+cJ1Dj}gAt7xRPkOtzhYl|!?L?JH{W|R@4bJ%R}zX1vbNl7 z2?BwvQNe+DQ(oJOZRRGZFn%Bq_lDJa+;)>Tqv3=6L7d_JYLl?Y2qw@# zAXkU2Fw1WAp__`fq3CdAPzHK)bJN$?cX@d^Ha1qNR2CK%ip6380BUP%b?e%wty$;s z*f5aqjErL1LqP@lg=ddxD#c;a(65S&Q0=&LDvuFwC$39BCOvr~7xvU+d27Pd})5r(UglCIrgKyzZqDjEb z6KLLFkIxNhG4GKJX{&>aM`^N5c-noH?!XZ7&N!mR{O0y~oO`6Vv7V_yVxOK2bxow) zV5g1P=+XXV8bH#+>Pv3$)3pHQ1jEdXBWbn3{B_A2XuZ3BHd@Qnb00qTcK=l&`Zz0_ zdhGDekFDM8oXul9xMBZIX01}@5g48D` z>aOfQ-N(1)doV~Bju5Roa3iDng6fVo#W;@%*;~<6dVtTsBW9Z3XB9IaaEKQRI@*5F zglBbZAS_=Bec%rdhAlfh;e61$RrcGfMyX_?qQ=MKr7+!!-&D5@5)9_fb=wdqxrV9e z0d6gFFWu5gy~M0C^9~RzV8w)%2`?80qGtA`z`@1#mA(5nG9~kNIhna{q&K2swoVe! zU(8o4z2KpVzy`u%gH0@4sZ0~m5gn6VMV$!s3GRknsX$o$)4%lEp_9$$KTtK; z+i+D^(xcy@JOl>P+s5JG1ss`e0Ij;jQ^%Y{J)^!QBYm>(zgE3-H{_=nz2K9iqpys~ z^67<1>j9EvyrC@}W}6w-rKi&4oHkN>7s2RltM;?(`dsQ;>BCj-0QR{<-R|nq3>u1( zm(=7nnSf6Htw00e=Qq+_s>gPj@ud@|m&XK@`V3`iUdo~?x#E4IqccxJ56n_x{9pl8 z)m_%=^f|_NPN^J08gKMlPxTTh6Q}J?%na6=$Mm0r(3aNkq(lNesLL1I#>0Zg(%6<4 zhL5)Z5GiNp-~@~;n85?mQGF>q2b26{c;W7pO8w<7HCYSUeH&_UxG5$@Xzm$HW8832 z?Agm6w4&;$GYWLfj#iq=iO}Ahx}xEc0^}Q`@_TP6tdFN*r>qQy7vmF6u?0ePN1aPF z;C*7zdSr!@AZP5$jPYuU|K(@Co{EzwhfeXm^@lK(sa*M5KR@YvFpPrQ5X^k|dD7T}Gz&WT%t^v%>kK%)MYPpJA+doR|JY0a0o1*S6aWAK literal 0 HcmV?d00001 From 335a92e69120250e2e2997c493b60e9a546a57e0 Mon Sep 17 00:00:00 2001 From: Pavel Date: Mon, 2 Mar 2026 12:38:26 +0500 Subject: [PATCH 2/2] Make skills page as a main page. Fix info --- app/page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/page.tsx b/app/page.tsx index 8c7b9e3..51bc780 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -2,7 +2,7 @@ import Skills from '@/components/Skills'; import { Metadata } from 'next'; export const metadata: Metadata = { - title: 'Skills', + title: 'About me', }; export default (): JSX.Element => {