From 9f7be4c29f60fe50f07e4be0b39154bcf6fbc9d8 Mon Sep 17 00:00:00 2001 From: Muthu Kumar Date: Wed, 4 Sep 2024 12:25:21 +0530 Subject: [PATCH] feat: Emoji component and homepage changes --- public/assets/emoji/2x.png | Bin 0 -> 211 bytes public/assets/emoji/nerd.png | Bin 0 -> 1984 bytes public/assets/emoji/technologist.png | Bin 0 -> 1178 bytes public/assets/serenity/U+1F1EE_U+1F1F3.png | Bin 0 -> 100 bytes public/assets/serenity/U+1F389.png | Bin 0 -> 141 bytes src/components/Emoji.tsx | 37 ++++++ src/components/FlickerList.tsx | 44 +++---- src/index.css | 3 +- src/pages/main/Home.tsx | 177 +++++++++++++++++------------ 9 files changed, 168 insertions(+), 93 deletions(-) create mode 100644 public/assets/emoji/2x.png create mode 100644 public/assets/emoji/nerd.png create mode 100644 public/assets/emoji/technologist.png create mode 100644 public/assets/serenity/U+1F1EE_U+1F1F3.png create mode 100644 public/assets/serenity/U+1F389.png create mode 100644 src/components/Emoji.tsx diff --git a/public/assets/emoji/2x.png b/public/assets/emoji/2x.png new file mode 100644 index 0000000000000000000000000000000000000000..d28cad729ebd14e220e8dc4aa348658acd6174d0 GIT binary patch literal 211 zcmeAS@N?(olHy`uVBq!ia0vp^3LwnH3?%tPCZz)@#^NA%C&rs6b?Si}&H|6fVg?3o zVGw3ym^DWNBpBcm;tHhSFV%amr}xrCnhD5ZE(!7rX88Z#CE%JOkQ?IZ;uumfCpo2o z$!(HEk0Q_i>pC8*nhnBKraDSQ@mzPvlK5MGw!6W=?5wwg@J`lXVa6-0X)Fw96BBrU x>}ShiWoy1z&wM2)NkWl_XTNzu>V&7k41O2Y6t$9PP6C?G;OXk;vd$@?2>^qPI*R}R literal 0 HcmV?d00001 diff --git a/public/assets/emoji/nerd.png b/public/assets/emoji/nerd.png new file mode 100644 index 0000000000000000000000000000000000000000..6c72aa4a020e9aacc6076fe309208994fe2db5a6 GIT binary patch literal 1984 zcmV;x2S50UP)U@DUf`6GfoE zWyW+-mdZp$zF&|fmmtd!B#HMisx3i0%|z*Ws<))w*=YPv2wd6!c}Z5pw={>6FRKKo zNCZkXfrAr}qXT6L1P(-rz_0|EOkC>zY<>NIO`xa#jvA*+TBd0V0o&k86r8?c1Itph zw#(4}7zw+!i9`&>OosHdyt=@DM4+ekb3N`1Gh0y!lth%31aLCAJmi6-HYq`ZiR2A~ zLD#Lj+!LSu>xUw6`Bzi_m6l=NthyLPn*aw_QjHINCljy<@^RM?5dDGE@x&hHilaSQ}xR^{J=I&txNK`fE5jnObBJEPZi0DvmtPSoNDn+ax^ z&_m%rYPamTcSHi7pUr5N9mdzY0w#WXzUjFU; z|K4ZoP_u1E+{mt`{pjxO!j7kY3A3Lj!J?|7%j5)R=TA*>{h$BwM*RCBB47>3U>1k% zZGN*kJH7;+Kb*;YEQk%Sq@m=|MSLR-l_8@d?fBMH?bx)o0{#nc;L!pvPImZsU-QY^ z@Z#$&Xlp%+id8@0Z6yolp=`st1cAGY(YQU6qKBeJuv8^~zy9$d&{aN*`Gp|bFGbLD zE*DL&AHwy@L$ivpbx8!FU;t+?_<39Hu^h~}=Waal)cO&1_SaJM?0EqPf00g^lhF}v z-6TzE^dzES?Ho3!gwU%8@l0D51T6zE9Q{p-5z{oWaLxl5Gs?o2r3QL>2XVm@%`s=Y z2XN^0B$O_G5KF%ESc+cj;g?YT^D6B8v4*THk-!-xDt3cBwaJ$t@cp?SI3qbhVGvjK zK~$f}hTm{QbEue@Hxcigd7I921GkScvFQ<$4mycEKqS0_T>srGA#`4j;K1Ku)^ z#rPZ(#djIVNYg0k(eAg%813d@FnaIk>yL057&LLwE91;%7o`sgg`Z)VmM=qg*?EEn zN&=}_kP2H;33RR~`jV#MRn=`ma*|QifT2)MP)&5SPll=q6vLF3>HNQO7KJDiViH>( zO1VLA2%Zz2ux!H=;iJb5;MOUA%BW%#oH%gzlgKlFpGv?k-K&b2Mk$y)L1IF2k}0Zd zzWEr>E%vElD=g|>KH^3@Q+*PDuRK8~9XN^UkDtOFUpvo%?VS&a@!6XKJFL!rsbm;| zf3Ey;ze8ndDkl&X$!X$1*+N)hIZ6UNy>mrdSdzXC%3|Oa^)A?Vm|U;N!TIdzN0+1w zM^S74FajMb@1G#a`gwwG<*9};`d~tZS%b`0xV7d47-mv??`Be{IQI%kpsz#t`j4y*qa(rVc9lcuI3u4OLZE%6Nm@yKC zHGhCMiXud?!L8WLO?!Dh?J91&a$N%46Kj?*Rq2PKg(%_BEyiJTkG!>h9wHtXyvKApS27E8) z!{0hN`N9(gvPn?HOxo29!C}VQ7>^EJr;BMsI+eNf*pzFru6rx)TJxmK6vTimdm*Vl zI#dEALC9(tlA=>+8L+%*kTN2Cyp$D+u64{CcE&SInSd1{q3+H4_U{&tg!6$9lg`z< zYegyexFq`^DiqUlfDV`t)nO8Y-U+b>kYvR}#Io$`nhML%Xb#4h?6O~9zMlOL{WR-d z-MpM;xJ?p+PC*I~Fp;1W6JnHrAXvO+%)W+OM~LXc?25|153>8odYt}0%D(|=2op0& SBA+7w0000XJG zC#lKUmIYlC2}lXtn$64K10dlXHRDtb)vq`XQppsux2y+aO!s&9Jt$9|IUN}y zGC)^H2jfy+uQ(k2+wOAq-+#C4>1g3i>BiJ#sebp<7QuPUY;2~8wnyZ zz@;l!WOvtQ?A+2R3ww82xtkkl_X%71KHIbg{X2ThJ^3Bj`Q%IZePSZ&vhhNYux+&G zvVw}K`ZL9Oq-_f_G-h^g4(+XN7#$m3S%BVqw@WSr^4*>0qp!Y+`!=-)5JBX5J;-8zj7Gq z+cseCw@Y~B;A4^3j0JFHe=iIo*pPn+U7I`c-FwF%DjWtK!$Z#$FmU8$bho5&prrw3 z`#mVEB*5^uBP?;KU#jCa_Q?nM=Iz%YxI@R!fSIsxa_}g%HaGz_rf!;UZ0$@(SvQsk zD$G$15N_5zXq#=#-#bjI(6?t5|S}QprKlE+g5Hz|TY1w0+yt894K0I3;Ig06zZk^!sbqT8}TZ zPq`s5uKEY;K$~txrmADke)d%*tWhpoyt%ohp=0aq<;VaAZ+I%ja6>3(2-=1+4e@wxz2!BAJa3(9~XWK&({LsWsJT(C$~0Dqbc3Ar^aUKP@<2qwYf zfyAPHL<3NZa4x*BqPm-~xU%cJ(TDKG84%ui9WN~J0h&Y)oj@Fc2V_kM{33+6U6%)5 z22hvP4MSZ3P7j$HVd=+JEOM)$_XMV{Daoq7SMscW9xMwWG=QTQ5=v0`SsluSP*G!< zFoM25rHtt}C2?aO5IP5>4udBuq=xYOwE%)1R3eCi7T1lT*NP87b2z=@>0Hp_!pjRc zuWL?)7Z9%9AKpFPCmLW`{iOkZJ@Ibx>+3@2fG;irfRIOmOTmw`E2{VI0hp#qLt=Pf zX85DY>6v22PeS2|tDP%Xy7}OL_j95;pLucD)i7L8lj@IOx}z-n0k)~{{E`6t!imA+ z)NIC5Hz|p5Eld#H6%JZa%?%&IllO#~cD+6orbRaT-J}zhY@#8?Ie1Z81VGm3ghK)q zH{+$ZbK!w#AcEk62R7FmvbuZPwV|qdQ85h&Y7G?xdS_5?PAIvL1bO*XmfgAgj~W1D s>%Lh3YT}e97W9?)A`h%aS#^Ma094b7FZXhRSO5S307*qoM6N<$f~B}2NdN!< literal 0 HcmV?d00001 diff --git a/public/assets/serenity/U+1F1EE_U+1F1F3.png b/public/assets/serenity/U+1F1EE_U+1F1F3.png new file mode 100644 index 0000000000000000000000000000000000000000..6dad53970a6406c842975ee3cc7dc4ff6086097b GIT binary patch literal 100 zcmeAS@N?(olHy`uVBq!ia0vp^oIuRQ!3HGLSWET+DQ!;|#}J9j$q5Qf2LI+~{+T~P yNo|o&)%SO@FV#3XeU;9uxIN_Kdu1`Fih*H1KhJ*I;>T`4Z492SelF{r5}E*{iyQ6$ literal 0 HcmV?d00001 diff --git a/public/assets/serenity/U+1F389.png b/public/assets/serenity/U+1F389.png new file mode 100644 index 0000000000000000000000000000000000000000..462ee5329678e6fc86e1b0a49af34113fc204ba5 GIT binary patch literal 141 zcmeAS@N?(olHy`uVBq!ia0vp^>_E)L!3HEN&baUbsSr;W#}J9j$q5e3-z$p#84EDk zsJ~mNmGx|=dqnsrTe%R||L>3eIj+TM{ONyK+kXkZX3quM4H7>$ytD6W;tXK@FMsXt q|NT=R{{PP@z!?%7z?rj-jUl7kZmZyvIS+v5GkCiCxvX ( + +); diff --git a/src/components/FlickerList.tsx b/src/components/FlickerList.tsx index e67c58f..27c6040 100644 --- a/src/components/FlickerList.tsx +++ b/src/components/FlickerList.tsx @@ -148,30 +148,34 @@ export const Tooltip = forwardRef< const FlickerList: React.FC<{ list: { text: string; description: React.ReactNode }[]; style?: React.CSSProperties; -}> = ({ list, style }) => { + className?: string; +}> = ({ list, style, className }) => { return (
    + &:has(:focus) li button:not(:focus), + &:has(:hover) li button:not(:hover) { + opacity: 0.5; + } + + /* any button that has a subsequent button focused, hide its tooltip */ + &&&& li:has(~ li button:focus) .tooltip, + /* any button that has a previous button focused, hide its tooltip */ + &&&& li:has(button:focus) ~ li .tooltip { + opacity: 0; + } + `, + )}> {[ ...intersperse( list.map((item, index) => ( diff --git a/src/index.css b/src/index.css index 3f16377..f0069aa 100644 --- a/src/index.css +++ b/src/index.css @@ -83,7 +83,8 @@ h4 { font-size: min(5vw, 1.2rem); } -a { +a, +b { color: var(--text-colour); text-decoration: none; font-weight: 800; diff --git a/src/pages/main/Home.tsx b/src/pages/main/Home.tsx index 0351bdd..5b3be0c 100644 --- a/src/pages/main/Home.tsx +++ b/src/pages/main/Home.tsx @@ -1,16 +1,10 @@ import React from "react"; import Container from "../../components/Container"; -import FlickerList from "../../components/FlickerList"; +import FlickerList, { Tooltip } from "../../components/FlickerList"; import { ReactComponent as Arrow } from "../../assets/arrow-thin.svg"; -import { css, cx } from "@emotion/css"; +import { css } from "@emotion/css"; import { setupCursorTracking } from "../../util"; - -const section = css` - display: flex; - flex-direction: column; - gap: 1rem; - justify-content: center; -`; +import { Emoji } from "../../components/Emoji"; const Home: React.FC = () => { return ( @@ -18,32 +12,50 @@ const Home: React.FC = () => { className={css` --distance: 2rem; `}> -
    -

    MKRhere

    +
    +

    + MKRhere +

    + Graphic design is my passion I have + plenty of experience with Figma and Adobe Suite tools + (especially Photoshop and InDesign) + + ), }, { text: "Developer", - description: - "🧑🏻‍💻 I started developing websites in 2015, and in 2017 I joined The Devs Network, catapulting my growth as a full-time developer", + description: ( + <> + I started developing websites + in 2015, and in 2017 I joined The Devs Network, catapulting my + growth as a full-time developer + + ), }, { text: "Architect", - description: - "I have a formal degree in architecture! I'm an architect in both construction and software 😉", + description: ( + <> + I have a formal degree in architecture! I'm an architect in + both construction and software + + ), }, ]} /> @@ -51,74 +63,95 @@ const Home: React.FC = () => {
    MKR in pixels
    -
    -

    - Welcome to the web home of Anu Rahul Nandhan. -

    -

    - I'm also commonly known as Muthu Kumar. -

    -
    -
    -

    I'm looking for work! 🎉

    - -
    + & a:hover { + color: inherit; + } + `} + ref={setupCursorTracking}> +