Skip to content

Commit 55fe1cf

Browse files
marcode24marcode24
committed
♿ Update accessibility attributes
1 parent 05f5330 commit 55fe1cf

File tree

7 files changed

+82
-25
lines changed

7 files changed

+82
-25
lines changed

‎src/components/Card.astro

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const { href, title, body } = Astro.props;
99
---
1010

1111
<li class="link-card">
12-
<a href={href}>
12+
<a href={href} aria-label={title}>
1313
<h2>
1414
{title}
1515
<span>&rarr;</span>

‎src/components/Contact.astro

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -26,34 +26,36 @@ import {
2626
<span>{EMAIL_URL}</span>
2727
</div>
2828
<div class="buttons">
29-
<a href={`mailto:${EMAIL_URL}`} class="btn icon">
29+
<a href={`mailto:${EMAIL_URL}`} class="btn icon" aria-label="Send email">
3030
<SendIcon width={28} height={28} />
3131
</a>
32-
<button class="btn icon copy">
32+
<button class="btn icon copy" aria-label="Copy email">
3333
<CopyIcon width={28} height={28} />
3434
</button>
3535
</div>
3636
</div>
3737
</div>
3838
<div class="footer">
3939
<div class="links">
40-
<a target="_blank" href={GITHUB_URL} class="icon">
40+
<a target="_blank" href={GITHUB_URL} class="icon" aria-label="Github">
4141
<GithubIcon />
4242
</a>
43-
<a target="_blank" href={INSTAGRAM_URL} class="icon">
43+
<a target="_blank" href={INSTAGRAM_URL} class="icon" aria-label="Instagram">
4444
<InstagramIcon />
4545
</a>
46-
<a target="_blank" href={TWITTER_URL} class="icon">
46+
<a target="_blank" href={TWITTER_URL} class="icon" aria-label="Twitter">
4747
<TwitterIcon />
4848
</a>
49-
<a target="_blank" href={LINKEDIN_URL} class="icon">
49+
<a target="_blank" href={LINKEDIN_URL} class="icon" aria-label="Linkedin">
5050
<LinkedinIcon />
5151
</a>
5252
</div>
5353
<div class="detail">
5454
<span class="text">
5555
Design and Built with ❤️ by
56-
<a target="_blank" href={GITHUB_URL}>Marco Cruz</a>
56+
<a target="_blank" href={GITHUB_URL} aria-label="Github profile">
57+
Marco Cruz
58+
</a>
5759
</span>
5860
</div>
5961
</div>

‎src/components/Header.astro

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,10 @@ import { GITHUB_URL, LINKEDIN_URL } from '@constants/urls.ts';
99
M<span>.</span>
1010
</p>
1111
<div class="social-icons">
12-
<a target="_blank" href={GITHUB_URL} class="icon">
12+
<a target="_blank" href={GITHUB_URL} class="icon" aria-label="Github">
1313
<GithubIcon height={45} width={45} />
1414
</a>
15-
<a target="_blank" href={LINKEDIN_URL} class="icon">
15+
<a target="_blank" href={LINKEDIN_URL} class="icon" aria-label="Linkedin">
1616
<LinkedinIcon height={45} width={45} />
1717
</a>
1818
</div>

‎src/components/Hero.astro

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,15 @@ import { GITHUB_URL, LINKEDIN_URL } from '@constants/urls.ts';
1313
<a
1414
class="btn"
1515
href="pdf/cv.pdf"
16-
download="cv - marco cruz.pdf">Download CV
16+
download="cv - marco cruz.pdf"
17+
aria-label="Download CV">
18+
Download CV
1719
</a>
1820
<div class="social">
19-
<a target="_blank" href={GITHUB_URL} class="icon">
21+
<a target="_blank" href={GITHUB_URL} class="icon" aria-label="Github">
2022
<GithubIcon height={40} width={40} />
2123
</a>
22-
<a target="_blank" href={LINKEDIN_URL} class="icon">
24+
<a target="_blank" href={LINKEDIN_URL} class="icon" aria-label="Linkedin">
2325
<LinkedinIcon height={40} width={40} />
2426
</a>
2527
</div>

‎src/components/Navigation.svelte

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -52,31 +52,31 @@
5252
<nav>
5353
<ul class="nav">
5454
<li class="home active">
55-
<a href="#home">
55+
<a href="#home" aria-label="Home section">
5656
<HomeIcon />
5757
<span class="title">Home</span>
5858
</a>
5959
</li>
6060
<li class="about">
61-
<a href="#about">
61+
<a href="#about" aria-label="About section">
6262
<UserIcon />
6363
<span class="title">About me</span>
6464
</a>
6565
</li>
6666
<li class="skills">
67-
<a href="#skills">
67+
<a href="#skills" aria-label="Skills section">
6868
<WrenchIcon />
6969
<span class="title">My skills</span>
7070
</a>
7171
</li>
7272
<li class="portfolio">
73-
<a href="#portfolio">
73+
<a href="#portfolio" aria-label="Portfolio section">
7474
<BriefcaseIcon />
7575
<span class="title">My portfolio</span>
7676
</a>
7777
</li>
7878
<li class="contact">
79-
<a href="#contact">
79+
<a href="#contact" aria-label="Contact section">
8080
<EnvelopeIcon />
8181
<span class="title">Contact me</span>
8282
</a>
@@ -86,7 +86,7 @@
8686
<div class="line-divisor"></div>
8787
</li>
8888
<li>
89-
<a on:click={setTheme}>
89+
<a on:click={setTheme} aria-label="Change theme">
9090
{#if isDarkTheme}
9191
<SunIcon />
9292
<span class="title">Light theme</span>

‎src/components/Portfolio.astro

Lines changed: 21 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import projects from '@data/projects.json';
1111
{
1212
projects.map((project) => (
1313
<div class="project">
14-
<a href={project.urlProduction} target="_blank">
14+
<a href={project.urlProduction} target="_blank" aria-label="project-preview">
1515
<picture>
1616
<img src={project.image} alt="project-preview" loading="lazy">
1717
</picture>
@@ -32,10 +32,20 @@ import projects from '@data/projects.json';
3232
}
3333
</div>
3434
<div class="links">
35-
<a class="btn icon" target="_blank" href={project.urlGithub}>
35+
<a
36+
class="btn icon"
37+
target="_blank"
38+
href={project.urlGithub}
39+
aria-label="github-repository"
40+
>
3641
Código <GithubIcon width={28} height={28}/>
3742
</a>
38-
<a class="btn icon" target="_blank" href={project.urlProduction}>
43+
<a
44+
class="btn icon"
45+
target="_blank"
46+
href={project.urlProduction}
47+
aria-label="project-demo"
48+
>
3949
Demo <ExternalIcon width={28} height={28} />
4050
</a>
4151
</div>
@@ -46,7 +56,14 @@ import projects from '@data/projects.json';
4656
</div>
4757

4858
<div class="more">
49-
<a href="https://github.com/marcode24?tab=overview" target="_blank" class="btn">Show more...</a>
59+
<a
60+
href="https://github.com/marcode24?tab=overview"
61+
target="_blank"
62+
class="btn"
63+
aria-label="more-projects"
64+
>
65+
Show more...
66+
</a>
5067
</div>
5168
</section>
5269

‎src/layouts/Layout.astro

Lines changed: 38 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,52 @@ interface Props {
44
}
55
66
const { title } = Astro.props;
7+
8+
const description = 'Explore my portfolio to see my projects and skills. '
9+
+ 'I\'m a full-stack developer and I love to create websites and apps.';
10+
const keywords = 'portfolio, developer, web, app, full-stack, javascript, '
11+
+ 'typescript, nodejs, express, mongodb, postgresql, mysql, rest, api, '
12+
+ 'website, app, responsive, design, ui, ux, interface, user, experience, '
13+
+ 'user interface, user experience, frontend, backend, fullstack, full-stack, '
14+
+ 'full stack, developer, programmer, software, engineer, software engineer';
15+
const author = 'Marco Cruz';
16+
const language = 'en';
17+
const robots = 'index, follow';
18+
19+
const og = {
20+
title: 'Marco Cruz - Portfolio',
21+
description: 'Explore my portfolio to see my projects and skills. '
22+
+ 'I\'m a full-stack developer and I love to create websites and apps.',
23+
url: 'https://marco-cruz.netlify.app/',
24+
image: 'https://res.cloudinary.com/dfeujtobk/image/upload/v1705960644'
25+
+ '/Portfolio/840shots_so_d3ber6.png',
26+
};
727
---
828

929
<!doctype html>
1030
<html lang="en">
1131
<head>
1232
<meta charset="UTF-8" />
13-
<meta name="description" content="Astro description" />
33+
<meta name="description" content={description} />
34+
<meta name="keywords" content={keywords} />
1435
<meta name="viewport" content="width=device-width" />
1536
<link rel="icon" type="image/svg+xml" href="/logo.ico" />
16-
<meta name="generator" content={Astro.generator} />
37+
<meta name="theme-color" content="#3b82f6" />
38+
<meta name="apple-mobile-web-app-status-bar-style" content="#3b82f6" />
39+
<meta name="apple-mobile-web-app-capable" content="yes" />
40+
<meta name="author" content={author} />
41+
<meta name="language" content={language} />
42+
<meta name="robots" content={robots} />
43+
<meta property="og:title" content={og.title} />
44+
<meta property="og:description" content={og.description} />
45+
<meta property="og:url" content={og.url} />
46+
<meta property="og:image" content={og.image} />
47+
<meta property="og:type" content="website" />
48+
<meta name="twitter:title" content={og.title} />
49+
<meta name="twitter:description" content={og.description} />
50+
<meta name="twitter:url" content={og.url} />
51+
<meta name="twitter:image" content={og.image} />
52+
<meta name="twitter:card" content="summary_large_image" />
1753
<title>{title}</title>
1854
</head>
1955
<body>

0 commit comments

Comments
 (0)