Skip to content

Commit bd2c35a

Browse files
marcode24marcode24
authored
Merge pull request #12 from marcode24/dev
➕ Add new fonts and update font styles
2 parents aa69a47 + c3d3f17 commit bd2c35a

13 files changed

+130
-33
lines changed

‎public/fonts/space-grotesk/SpaceGrotesk-Bold.ttf

84.5 KB
Binary file not shown.

‎public/fonts/space-grotesk/SpaceGrotesk-Light.ttf

84.6 KB
Binary file not shown.

‎public/fonts/space-grotesk/SpaceGrotesk-Medium.ttf

84.6 KB
Binary file not shown.

‎public/fonts/space-grotesk/SpaceGrotesk-Regular.ttf

84.6 KB
Binary file not shown.

‎public/fonts/space-grotesk/SpaceGrotesk-SemiBold.ttf

84.5 KB
Binary file not shown.

‎public/fonts/yellowtail/Yellowtail-Regular.ttf

59.4 KB
Binary file not shown.

‎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={26} height={26} />
3131
</a>
32-
<button class="btn icon copy">
32+
<button class="btn icon copy" aria-label="Copy email">
3333
<CopyIcon width={26} height={26} />
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: 19 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={26} height={26}/>
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={26} height={26} />
4050
</a>
4151
</div>
@@ -46,7 +56,12 @@ import projects from '@data/projects.json';
4656
</div>
4757

4858
<div class="more">
49-
<a href="https://github.com/marcode24?tab=repositories" target="_blank" class="btn">
59+
<a
60+
href="https://github.com/marcode24?tab=overview"
61+
target="_blank"
62+
class="btn"
63+
aria-label="more-projects"
64+
>
5065
Show more...
5166
</a>
5267
</div>

‎src/layouts/Layout.astro

Lines changed: 88 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,23 +4,52 @@ interface Props {
44
}
55
66
const { title } = Astro.props;
7-
const fontRedressed = 'https://fonts.googleapis.com/css2?family='
8-
+ 'Redressed&family=Yellowtail&display=swap';
9-
const fontSpaceGrotesk = 'https://fonts.googleapis.com/css2?family='
10-
+ 'Redressed&family=Space+Grotesk:wght@300;400;500;600;700&family='
11-
+ 'Yellowtail&display=swap';
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+
};
1227
---
1328

1429
<!doctype html>
1530
<html lang="en">
1631
<head>
1732
<meta charset="UTF-8" />
18-
<meta name="description" content="Astro description" />
33+
<meta name="description" content={description} />
34+
<meta name="keywords" content={keywords} />
1935
<meta name="viewport" content="width=device-width" />
2036
<link rel="icon" type="image/svg+xml" href="/logo.ico" />
21-
<link href={fontRedressed} rel="stylesheet">
22-
<link href={fontSpaceGrotesk} rel="stylesheet">
23-
<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" />
2453
<title>{title}</title>
2554
</head>
2655
<body>
@@ -103,7 +132,7 @@ const fontSpaceGrotesk = 'https://fonts.googleapis.com/css2?family='
103132

104133
html {
105134
scroll-behavior: smooth;
106-
font-family: "Space Grotesk", sans-serif;
135+
font-family: "Space Grotesk", system-ui, sans-serif;
107136
}
108137

109138
button,
@@ -160,6 +189,55 @@ const fontSpaceGrotesk = 'https://fonts.googleapis.com/css2?family='
160189
font-size: 38px;
161190
}
162191
}
192+
193+
@font-face {
194+
font-family: "Space Grotesk";
195+
src: url('/fonts/space-grotesk/SpaceGrotesk-Light.ttf');
196+
font-weight: 300;
197+
font-style: normal;
198+
font-display: swap;
199+
}
200+
201+
@font-face {
202+
font-family: "Space Grotesk";
203+
src: url('/fonts/space-grotesk/SpaceGrotesk-Regular.ttf');
204+
font-weight: normal;
205+
font-style: normal;
206+
font-display: swap;
207+
}
208+
209+
@font-face {
210+
font-family: "Space Grotesk";
211+
src: url('/fonts/space-grotesk/SpaceGrotesk-Medium.ttf');
212+
font-weight: 500;
213+
font-style: normal;
214+
font-display: swap;
215+
}
216+
217+
@font-face {
218+
font-family: "Space Grotesk";
219+
src: url('/fonts/space-grotesk/SpaceGrotesk-SemiBold.ttf');
220+
font-weight: 600;
221+
font-style: normal;
222+
font-display: swap;
223+
}
224+
225+
@font-face {
226+
font-family: "Space Grotesk";
227+
src: url('/fonts/space-grotesk/SpaceGrotesk-Bold.ttf');
228+
font-weight: bold;
229+
font-style: normal;
230+
font-display: swap;
231+
}
232+
233+
@font-face {
234+
font-family: 'Yellowtail';
235+
src: url('/fonts/yellowtail/Yellowtail-Regular.ttf');
236+
font-weight: normal;
237+
font-style: normal;
238+
font-display: swap;
239+
}
240+
163241
</style>
164242

165243
<script>

0 commit comments

Comments
 (0)