+ &: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 = () => {
-
-