Skip to content

Commit 51f5e39

Browse files
NicholasPerettiNicholasPeretti
committed
Improve accessibility
1 parent 9269bb9 commit 51f5e39

File tree

2 files changed

+103
-101
lines changed

2 files changed

+103
-101
lines changed

‎components/Section.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export default function Section({
2323
}
2424
)}
2525
>
26-
<div className="flex items-center justify-center w-[220px] md:w-[450px] md:h-[50vh] mt-[40px] min-h-[]">
26+
<div className="flex items-center justify-center w-[220px] md:w-[450px] md:h-[50vh] mt-[40px] min-h-[]" aria-hidden>
2727
{illustration}
2828
</div>
2929
<div
@@ -35,10 +35,10 @@ export default function Section({
3535
}
3636
)}
3737
>
38-
<h1 className="text-[24px] font-bold mb-[10px] md:text-[50px] xl:text-[64px] w-full">
38+
<h2 className="text-[24px] font-bold mb-[10px] md:text-[50px] xl:text-[64px] w-full">
3939
{title}
40-
<span className="animate-blink font-extralight">_</span>
41-
</h1>
40+
<span aria-hidden className="animate-blink font-extralight">_</span>
41+
</h2>
4242
<div className="pl-[10px] md:pl-[60px] lg:pl-[40px] xl:text-[36px] text-[14px] md:text-[24px] w-full font-extralight pb-[50px]">
4343
{children}
4444
</div>

‎pages/index.tsx‎

Lines changed: 99 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export default function Home() {
1313
<div className="h-full w-full">
1414
<Head>
1515
<title>Nicholas Peretti</title>
16-
<meta name="description" content="Personal website" />
16+
<meta name="description" content="Nicholas Peretti, frontend engineer" />
1717
<link rel="icon" href="/favicon.ico" />
1818
<link rel="apple-touch-icon" sizes="180x180" href="/favicon.ico" />
1919
<meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -25,114 +25,116 @@ export default function Home() {
2525
Nicholas Peretti
2626
</h1>
2727
<p className="text-[18px] md:text-[30px] xl:text-[50px] font-extralight">
28-
Frontend engineer<span className="animate-blink">_</span>
28+
Frontend engineer<span className="animate-blink" aria-hidden>_</span>
2929
</p>
3030
</div>
31-
<SvgArrowDown className="mb-[150px] w-[50px] animate-bounce" />
31+
<SvgArrowDown className="mb-[150px] w-[50px] animate-bounce" aria-hidden />
3232
</header>
33-
<Section
34-
title="UX oriented"
35-
illustration={<SvgUxOriented className="w-full h-full" />}
36-
>
37-
{
38-
"I really appreciate a good user experience. Therefore I like to work closely with designers from the ideation process to the mockup's finishing touches."
39-
}
40-
</Section>
41-
<Section
42-
reverse={true}
43-
title="Feedback seeker"
44-
illustration={<SvgFeedback className="w-full h-full" />}
45-
>
46-
I feel at home in a company with a strong feedback culture.
47-
<br />
48-
<br />I regularly seek honest feedback from my peers and I am always
49-
available to do my best to reciprocate with constructive comments.
50-
</Section>
51-
<Section
52-
title="Flexible and curious"
53-
illustration={<SvgFlexible className="w-full h-full" />}
54-
>
55-
Even though I am a frontend engineer, I really enjoy exploring all the
56-
areas of a product.
57-
<br />
58-
<br />I appreciate a stimulating environment where I can be exposed to
59-
new technologies and ways of working.
60-
</Section>
61-
<Section
62-
reverse={true}
63-
title="Work experiences"
64-
illustration={<SvgReferences className="w-full h-full" />}
65-
>
66-
{`I've been working as a software engineer since 2015. I started out as
67-
a full-stack developer and I've been focusing on frontend since 2019.`}
68-
<br />
69-
<br />
70-
{`You
71-
can take a look at my work experience `}
72-
<a
73-
href="https://www.linkedin.com/in/nicholas-peretti-210aa6130/"
74-
target="_blank"
75-
rel="noreferrer"
76-
className="text-[#F9A826] hover:underline inline-block"
33+
<main>
34+
<Section
35+
title="UX oriented"
36+
illustration={<SvgUxOriented className="w-full h-full" />}
37+
>
38+
{
39+
"I really appreciate a good user experience. Therefore I like to work closely with designers from the ideation process to the mockup's finishing touches."
40+
}
41+
</Section>
42+
<Section
43+
reverse={true}
44+
title="Feedback seeker"
45+
illustration={<SvgFeedback className="w-full h-full" />}
46+
>
47+
I feel at home in a company with a strong feedback culture.
48+
<br aria-hidden />
49+
<br aria-hidden />I regularly seek honest feedback from my peers and
50+
I am always available to do my best to reciprocate with constructive
51+
comments.
52+
</Section>
53+
<Section
54+
title="Flexible and curious"
55+
illustration={<SvgFlexible className="w-full h-full" />}
56+
>
57+
Even though I am a frontend engineer, I really enjoy exploring all
58+
the areas of a product.
59+
<br aria-hidden />
60+
<br aria-hidden />I appreciate a stimulating environment where I can
61+
be exposed to new technologies and ways of working.
62+
</Section>
63+
<Section
64+
reverse={true}
65+
title="Work experiences"
66+
illustration={<SvgReferences className="w-full h-full" />}
7767
>
78-
here{" "}
79-
<span>
80-
<SvgExternalLink className="h-[1em] inline" />
81-
</span>
82-
</a>
83-
</Section>
84-
{/* <Section
68+
{`I've been working as a software engineer since 2015. I started out as
69+
a full-stack developer and I've been focusing on frontend since 2019.`}
70+
<br aria-hidden />
71+
<br aria-hidden />
72+
You can{" "}
73+
<a
74+
href="https://www.linkedin.com/in/nicholas-peretti-210aa6130/"
75+
target="_blank"
76+
rel="noreferrer"
77+
className="text-[#F9A826] hover:underline"
78+
>
79+
take a look at my work experience on Linkedin
80+
<span aria-hidden>
81+
<SvgExternalLink className="h-[1em] inline" />
82+
</span>
83+
</a>
84+
</Section>
85+
{/* <Section
8586
title="Portfolio"
8687
illustration={<SvgPortfolio className="w-full" />}
8788
>
8889
Here are some of my projects
8990
</Section> */}
90-
<Section
91-
// reverse={true}
92-
title="Contact me"
93-
illustration={<SvgContact className="w-full h-full" />}
94-
>
95-
<form
96-
action="https://api.web3forms.com/submit"
97-
method="POST"
98-
className="w-full text-[14px] xl:text-[24px] flex flex-col xl:w-[500px]"
91+
<Section
92+
// reverse={true}
93+
title="Contact me"
94+
illustration={<SvgContact className="w-full h-full" />}
9995
>
100-
<input
101-
type="hidden"
102-
name="access_key"
103-
value="88e0a43e-8858-47dc-961f-a6db6c705901"
104-
/>
105-
106-
<label htmlFor="email">
107-
Your email:
108-
<br />
96+
<form
97+
action="https://api.web3forms.com/submit"
98+
method="POST"
99+
className="w-full text-[14px] xl:text-[24px] flex flex-col xl:w-[500px]"
100+
>
109101
<input
110-
required
111-
type="email"
112-
id="email"
113-
name="email"
114-
className="w-full mb-[18px]"
102+
type="hidden"
103+
name="access_key"
104+
value="88e0a43e-8858-47dc-961f-a6db6c705901"
115105
/>
116-
</label>
117-
<label htmlFor="message">
118-
Your message:
119-
<br />
120-
<textarea
121-
required
122-
id="message"
123-
name="message"
124-
className="w-full"
125-
rows={5}
126-
></textarea>
127-
</label>
128-
<button
129-
type="submit"
130-
className="bg-[#F9A826] h-[60px] text-black font-normal mt-[18px]"
131-
>
132-
SEND MESSAGE
133-
</button>
134-
</form>
135-
</Section>
106+
107+
<label htmlFor="email">
108+
Your email:
109+
<br aria-hidden />
110+
<input
111+
required
112+
type="email"
113+
id="email"
114+
name="email"
115+
className="w-full mb-[18px]"
116+
/>
117+
</label>
118+
<label htmlFor="message">
119+
Your message:
120+
<br aria-hidden />
121+
<textarea
122+
required
123+
id="message"
124+
name="message"
125+
className="w-full"
126+
rows={5}
127+
></textarea>
128+
</label>
129+
<button
130+
type="submit"
131+
className="bg-[#F9A826] h-[60px] text-black font-normal mt-[18px]"
132+
>
133+
SEND MESSAGE
134+
</button>
135+
</form>
136+
</Section>
137+
</main>
136138
</div>
137139
</div>
138140
);

0 commit comments

Comments
 (0)