Skip to content

Commit c53cbb2

Browse files
guyettingerguyettinger
committed
migrating to mantine
1 parent 3e5434e commit c53cbb2

File tree

35 files changed

+438
-1005
lines changed

35 files changed

+438
-1005
lines changed

‎src/blocks/About/About.tsx

Lines changed: 17 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -1,97 +1,32 @@
1-
"use client"
2-
import Image from "next/image";
3-
import styled from "styled-components";
4-
5-
const AboutContainer = styled.div`
6-
padding: 0;
7-
`
8-
9-
const AboutHeader = styled.h2`
10-
font-size: 2rem;
11-
font-weight: 600;
12-
margin-bottom: 1rem;
13-
`
14-
15-
const AboutFlexContainer = styled.div`
16-
display: flex;
17-
justify-content: space-between;
18-
align-items: center;
19-
gap: 0 2rem;
20-
21-
@media screen and (max-width: 768px) {
22-
flex-direction: column;
23-
}
24-
`
25-
26-
const AboutTextContainer = styled.div`
27-
width: 50%;
28-
align-self: self-start;
29-
30-
@media screen and (max-width: 768px) {
31-
width: 100%;
32-
}
33-
`
34-
35-
const AboutParagraph = styled.p`
36-
font-size: 1.1rem;
37-
font-weight: 400;
38-
margin-bottom: 1rem;
39-
`
40-
41-
const AboutImageContainer = styled.div`
42-
width: 50%;
43-
44-
@media screen and (max-width: 768px) {
45-
width: 100%;
46-
}
47-
`
48-
49-
const AboutImage = styled(Image)`
50-
overflow: hidden;
51-
width: 100%;
52-
height: 400px;
53-
object-fit: cover;
54-
border: 2px solid rgba(0, 0, 0, 0.4);
55-
filter: grayscale(100%);
56-
transition: all 0.5s ease-in-out;
57-
cursor: cell;
58-
opacity: 50%;
59-
margin-top: -50px;
60-
61-
&:hover {
62-
opacity: 100%;
63-
filter: grayscale(0%);
64-
transform: scale(1.02);
65-
}
66-
`
1+
import { Group, Stack, Title, Image, Text } from "@mantine/core";
672

683
export const About = () => {
694
return (
70-
<AboutContainer>
71-
<AboutHeader>About Me</AboutHeader>
72-
<AboutFlexContainer>
73-
<AboutTextContainer>
74-
<AboutParagraph>
5+
<Stack>
6+
<Title>About Me</Title>
7+
<Group wrap={'nowrap'} align={'flex-start'}>
8+
<Stack>
9+
<Text size={'lg'}>
7510
I specialize in designing and implementing exceptional user experiences (and drinking massive
7611
amounts of coffee).
77-
</AboutParagraph>
78-
<AboutParagraph>
12+
</Text>
13+
<Text size={'lg'}>
7914
As an engineer, I have always been passionate about creating elegant and effective solutions to
8015
complex problems. I have a strong foundation in software development, with a focus on emerging
8116
technologies. I enjoy working on both the front-end and back-end of applications, and I am
8217
always looking for ways to improve everyone experience (user and engineer alike).
83-
</AboutParagraph>
84-
<AboutParagraph>
18+
</Text>
19+
<Text size={'lg'}>
8520
Throughout my career, I have worked on a wide range of projects, from simple tools to complex
8621
enterprise-level applications. I am experienced in working with a variety of development tools
8722
and frameworks. I am always eager to learn and explore new technologies, and I am constantly
8823
seeking out opportunities to improve my skills and knowledge.
89-
</AboutParagraph>
90-
</AboutTextContainer>
91-
<AboutImageContainer>
92-
<AboutImage src='/images/coffeepowered.jpeg' width={300} height={800} alt={"Avatar"} priority={true} />
93-
</AboutImageContainer>
94-
</AboutFlexContainer>
95-
</AboutContainer>
24+
</Text>
25+
</Stack>
26+
<Stack miw={'30vw'} maw={'30vw'}>
27+
<Image src='/images/coffeepowered.jpeg'/>
28+
</Stack>
29+
</Group>
30+
</Stack>
9631
)
9732
}

‎src/blocks/Contact/Contact.tsx

Lines changed: 19 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,26 @@
1-
import styled from "styled-components";
2-
3-
const ContactContainer = styled.div`
4-
padding: 2rem 0 4rem;
5-
display: flex;
6-
justify-content: center;
7-
align-items: center;
8-
flex-direction: column;
9-
width: 80%;
10-
margin: 0 auto;
11-
12-
@media screen and (max-width: 768px) {
13-
width: 100%;
14-
}
15-
`
16-
17-
const ContactHeader = styled.h2`
18-
font-size: 2rem;
19-
font-weight: 600;
20-
margin-bottom: 1rem;
21-
`
22-
23-
const ContactParagraph = styled.p`
24-
font-size: 1rem;
25-
font-weight: 400;
26-
margin-bottom: 1rem;
27-
text-align: center;
28-
`
29-
30-
const ContactLink = styled.a`
31-
background-color: #0186de;
32-
color: #efefef;
33-
padding: 0.5rem 1rem;
34-
border-radius: 5px;
35-
font-size: 1rem;
36-
font-weight: 600;
37-
transition: all 0.5s ease-in-out;
38-
cursor: pointer;
39-
display: inline-block;
40-
`
1+
import Link from "next/link";
2+
import { Stack, Text, Title } from "@mantine/core";
413

424
export const Contact = () => {
435
return (
44-
<ContactContainer className="contact-container">
45-
<ContactHeader>Get In Touch</ContactHeader>
46-
<ContactParagraph>If you want to work together or have any questions, my inbox is always open. I'll try my
6+
<Stack align="center" m={"lg"}>
7+
<Title>Get In Touch</Title>
8+
<Text>If you want to work together or have any questions, my inbox is always open. I'll try my
479
best to get back to you!
4810
Cheers!
49-
</ContactParagraph>
50-
<ContactLink href="mailto:guy.ettinger@gmail.com">Say Hello</ContactLink>
51-
</ContactContainer>
11+
</Text>
12+
<Link
13+
href="mailto:guy.ettinger@gmail.com"
14+
style={{
15+
backgroundColor: "#0186de",
16+
color: "#efefef",
17+
padding: "0.5rem 1rem",
18+
borderRadius: "5px",
19+
fontSize: "1rem",
20+
fontWeight: 600,
21+
transition: "all 0.5s ease-in-out",
22+
cursor: "pointer"
23+
}}>Say Hello</Link>
24+
</Stack>
5225
)
5326
}

‎src/blocks/Footer/Footer.tsx

Lines changed: 6 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,11 @@
1-
"use client"
2-
3-
import styled from "styled-components";
4-
5-
const FooterContainer = styled.div`
6-
display: flex;
7-
justify-content: space-around;
8-
align-items: center;
9-
padding: 1rem 0;
10-
background: rgba(0, 0, 0, 0.7);
11-
`;
12-
13-
const FooterParagraph = styled.p`
14-
font-size: 0.8rem;
15-
color: #9B9C9D;
16-
`
1+
import { Stack, Text } from "@mantine/core";
172

183
export const Footer = () => {
194
return (
20-
<>
21-
<FooterContainer>
22-
<FooterParagraph>
23-
© {new Date().getFullYear()} Guy Ettinger
24-
</FooterParagraph>
25-
</FooterContainer>
26-
</>
5+
<Stack flex={1} align="center" justify="center" bg={'rgba(0, 0, 0, 0.7)'} h={52}>
6+
<Text>
7+
© {new Date().getFullYear()} Guy Ettinger
8+
</Text>
9+
</Stack>
2710
)
2811
}

‎src/blocks/Header/Header.tsx

Lines changed: 30 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,13 @@
11
"use client"
22
import Link from "next/link";
33
import Image from "next/image";
4-
import styled from "styled-components";
54
import { Menu, Button, Text, Group, Box } from '@mantine/core';
65
import { projectData } from "@/data/projectData";
76
import { resumeData } from "@/data/resumeData";
87
import { learningData } from "@/data/learningData";
98
import { HeaderProps } from "@/blocks/Header/Header.types";
109

11-
const NavSpacer = styled.div`
12-
flex: auto;
13-
`
14-
15-
const NavLinkIcon = styled.a`
16-
flex: auto;
17-
max-width: 24px;
18-
margin-right: 14px;
19-
color: #dadada;
20-
font-size: 1.5rem;
21-
transition: all 0.5s ease-in-out;
22-
23-
:hover {
24-
color: #FFFFFF;
25-
}
26-
`
27-
28-
const NavMenuIcon = styled.i`
29-
margin-right: 10px;
30-
`
31-
32-
export const Header = ({...groupProps}:HeaderProps) => {
10+
export const Header = ({...groupProps}: HeaderProps) => {
3311
return (
3412
<Group justify="space-between" {...groupProps}>
3513
<Group gap={0}>
@@ -42,18 +20,16 @@ export const Header = ({...groupProps}:HeaderProps) => {
4220
alt="Guy's Avatar"
4321
priority={true}/>
4422
</Box>
45-
4623
<Link href="/">
4724
<Text fw={500} size={"lg"}>
4825
Guy Ettinger
4926
</Text>
5027
</Link>
5128
</Group>
52-
5329
<Menu>
5430
<Menu.Target>
55-
<Button variant="filled">
56-
<Text><NavMenuIcon className="fa-solid fa-scroll"/>Resume</Text>
31+
<Button variant="filled" leftSection={<Text className="fa-solid fa-scroll"/>}>
32+
<Text>Resume</Text>
5733
</Button>
5834
</Menu.Target>
5935
<Menu.Dropdown>
@@ -69,11 +45,10 @@ export const Header = ({...groupProps}:HeaderProps) => {
6945
</Menu.Item>
7046
</Menu.Dropdown>
7147
</Menu>
72-
7348
<Menu>
7449
<Menu.Target>
75-
<Button variant="filled">
76-
<Text><NavMenuIcon className="fa-solid fa-photo-film"/>Portfolio</Text>
50+
<Button variant="filled" leftSection={<Text className="fa-solid fa-photo-film"/>}>
51+
<Text>Portfolio</Text>
7752
</Button>
7853
</Menu.Target>
7954
<Menu.Dropdown>
@@ -87,11 +62,10 @@ export const Header = ({...groupProps}:HeaderProps) => {
8762
}
8863
</Menu.Dropdown>
8964
</Menu>
90-
9165
<Menu closeOnItemClick={false} position="bottom-start">
9266
<Menu.Target>
93-
<Button variant="filled">
94-
<Text><NavMenuIcon className="fa-brands fa-github"/>Github Projects</Text>
67+
<Button variant="filled" leftSection={<Text className="fa-brands fa-github"/>}>
68+
<Text>Github Projects</Text>
9569
</Button>
9670
</Menu.Target>
9771
<Menu.Dropdown>
@@ -100,35 +74,42 @@ export const Header = ({...groupProps}:HeaderProps) => {
10074
<Menu key={project.id} closeOnItemClick={false} position="right-start">
10175
<Menu.Target>
10276
<Menu.Item>
103-
<Text><NavMenuIcon className="fa-regular fa-folder-open"/>{project.title}</Text>
77+
<Group>
78+
<Text className="fa-regular fa-folder-open"/><Text>{project.title}</Text>
79+
</Group>
10480
</Menu.Item>
10581
</Menu.Target>
10682
<Menu.Dropdown>
10783
{project.gitHubLink &&
10884
<Menu.Item key={`${project.id}-github`} name={`${project.title} Github`}>
109-
<Link href={project.gitHubLink} target={"_blank"}><NavMenuIcon
110-
className="fa-brands fa-github"/>{project.title} Github</Link>
85+
<Link href={project.gitHubLink} target={"_blank"}>
86+
<Group>
87+
<Text className="fa-brands fa-github"/>
88+
<Text>{project.title} Github</Text>
89+
</Group>
90+
</Link>
11191
</Menu.Item>
11292
}
11393
{project.demoLink &&
11494
<Menu.Item key={`${project.id}-demo`} name={`${project.title} Demo`}>
115-
<Link href={project.demoLink} target={"_blank"}><NavMenuIcon
116-
className="fa-solid fa-link"/>{project.title} Demo</Link>
95+
<Link href={project.demoLink} target={"_blank"}>
96+
<Group>
97+
<Text className="fa-solid fa-link"/>
98+
<Text>{project.title} Demo</Text>
99+
</Group></Link>
117100
</Menu.Item>
118101
}
119-
120102
</Menu.Dropdown>
121103
</Menu>
122104
)
123105
})
124106
}
125107
</Menu.Dropdown>
126108
</Menu>
127-
128109
<Menu>
129110
<Menu.Target>
130-
<Button variant="filled">
131-
<Text><NavMenuIcon className="fa-solid fa-graduation-cap"/>Learning</Text>
111+
<Button variant="filled" leftSection={<Text className="fa-solid fa-graduation-cap"/>}>
112+
<Text>Learning</Text>
132113
</Button>
133114
</Menu.Target>
134115
<Menu.Dropdown>
@@ -142,26 +123,23 @@ export const Header = ({...groupProps}:HeaderProps) => {
142123
}
143124
</Menu.Dropdown>
144125
</Menu>
145-
146-
<NavSpacer></NavSpacer>
147-
148-
<NavLinkIcon
126+
<Group flex={1}></Group>
127+
<Link
149128
href="https://github.com/guyettinger"
150129
aria-label="GitHub"
151130
target="_blank"
152131
rel="noopener noreferrer"
153132
>
154-
<i className="fa-brands fa-github"></i>
155-
</NavLinkIcon>
156-
157-
<NavLinkIcon
133+
<Text className="fa-brands fa-github" size={'1.5rem'} mr={14}/>
134+
</Link>
135+
<Link
158136
href="https://www.linkedin.com/in/guyettinger/"
159137
aria-label="LinkedIn"
160138
target="_blank"
161139
rel="noopener noreferrer"
162140
>
163-
<i className="fa-brands fa-linkedin"></i>
164-
</NavLinkIcon>
141+
<Text className="fa-brands fa-linkedin" size={'1.5rem'} mr={14}/>
142+
</Link>
165143
</Group>
166144
)
167145
}

0 commit comments

Comments
 (0)