Skip to content

Commit fa38118

Browse files
codebyminicodebymini
committed
add tooltip
1 parent 8dd855e commit fa38118

File tree

4 files changed

+58
-7
lines changed

4 files changed

+58
-7
lines changed

‎public/images/onetwo-analytics-logo.svg‎

Lines changed: 8 additions & 0 deletions
Loading

‎src/App.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,22 +28,34 @@ function App() {
2828
title="OneTwo Analytics"
2929
subtitle={["Fullstack Developer"]}
3030
date="2022-now"
31+
tooltip={<div className='flex flex-col items-center justify-center text-center'>
32+
{/* <img src="images/onetwo-analytics-logo.svg" alt="logo" className='h-20 w-40'/> */}
33+
<div>Currently employed as a Fullstack developer</div>
34+
<div className='flex flex-row items-center justify-around w-full'>
35+
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/typescript/typescript-original.svg" alt="ts" className='h-[30px] w-[30px]'/>
36+
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/python/python-original.svg" alt="python" className='h-[30px] w-[30px]'/>
37+
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/postgresql/postgresql-plain.svg" alt="postgres" className='h-[30px] w-[30px]'/>
38+
</div>
39+
</div>}
3140
/>
3241
<Card
3342
title="2Rent"
3443
subtitle={["Technical Sales"]}
3544
date="2016-2020"
45+
tooltip={"Worked with sales and technical support for a light equipment rental company."}
3646
/>
3747
<Card
3848
title="LightsByMini"
3949
subtitle={["Lighting Designer", "Lighting technician"]}
4050
date="2006-2016"
51+
tooltip={"Worked with lighting design and as a lighting technician for various shows and events."}
4152
/>
4253
</div>
4354
</SectionCol>
4455
<SectionRow>
4556
<div className='flex flex-row p-8 h-[35vh]'>
4657
<Contact
58+
title="Contact"
4759
linkedin={["https://www.linkedin.com/in/codebymini/"]}
4860
github={["https://github.com/codebymini/"]}
4961
email={["daniel@codebymini.se"]}

‎src/components/Card.js‎

Lines changed: 36 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,36 @@
1-
export function CardWrapper({children}) {
1+
import {useState} from 'react';
2+
3+
4+
function Tooltip({children}) {
25
return (
3-
<div className='flex flex-col p-6 shadow-2xl border-2 bg-[#282c34] shadow-gray-900 rounded-lg m-5 w-60 border-neutral-600'>{children}</div>
6+
<div className='flex flex-col relative top-[100%] left-[0%] ml-[-240px] w-[240px]'>
7+
<div className='flex flex-col p-6 shadow-2xl border-2 bg-[#282c34] shadow-gray-900 rounded-lg m-5 w-60 border-neutral-600'>
8+
{children}
9+
</div>
10+
</div>
11+
);
12+
}
13+
14+
15+
export function CardWrapper({children, onHover}) {
16+
if (onHover) {
17+
return (
18+
<div className='flex flex-col p-6 shadow-2xl border-2 bg-[#282c34] shadow-gray-900 rounded-lg m-5 w-60 border-neutral-600'
19+
onMouseEnter={() => onHover(false)}
20+
onMouseLeave={() => onHover(true)}
21+
>{children}</div>
22+
);
23+
}
24+
return (
25+
<div className='flex flex-col p-6 shadow-2xl border-2 bg-[#282c34] shadow-gray-900 rounded-lg m-5 w-60 border-neutral-600'
26+
>{children}</div>
427
)}
528

6-
export default function Card({title, subtitle, date}) {
29+
export default function Card({title, subtitle, date, tooltip}) {
30+
const [hidden, setHidden] = useState(true);
731
return (
8-
<CardWrapper>
32+
<>
33+
<CardWrapper onHover={setHidden}>
934
<div className='flex flex-col text-lg items-center mb-4'>
1035
{title}
1136
</div>
@@ -17,7 +42,7 @@ export default function Card({title, subtitle, date}) {
1742
{sub}
1843
</div>
1944
);
20-
})}
45+
})}
2146
</div>
2247
)}
2348
{date && (
@@ -26,6 +51,11 @@ export default function Card({title, subtitle, date}) {
2651
</div>
2752
)}
2853
</CardWrapper>
29-
54+
{!hidden && (
55+
<Tooltip>
56+
{tooltip}
57+
</Tooltip>
58+
)}
59+
</>
3060
);
3161
}

‎src/components/Contact.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import { CardWrapper } from "./Card";
22

3-
export default function Contact({email, linkedin, github}) {
3+
export default function Contact({title, email, linkedin, github}) {
44
return (
55
<CardWrapper>
6+
<div className="flex justify-center items-center mb-4 text-2xl">{title}</div>
67
<div className="flex flex-row justify-around mb-5">
78
<a href={github} target="_new">
89
<img src="images/github.png" alt="github" className='h-10 w-10'/>

0 commit comments

Comments
 (0)