Merge pull request #12 from marcode24/dev

➕ Add new fonts and update font styles
marcode24 · Jan 24, 2024 · bd2c35a · bd2c35a
2 parents aa69a47 + c3d3f17
commit bd2c35a
Show file tree

Hide file tree

Showing 13 changed files with 130 additions and 33 deletions.
diff --git a/public/fonts/space-grotesk/SpaceGrotesk-Bold.ttf b/public/fonts/space-grotesk/SpaceGrotesk-Bold.ttf
diff --git a/public/fonts/space-grotesk/SpaceGrotesk-Light.ttf b/public/fonts/space-grotesk/SpaceGrotesk-Light.ttf
diff --git a/public/fonts/space-grotesk/SpaceGrotesk-Medium.ttf b/public/fonts/space-grotesk/SpaceGrotesk-Medium.ttf
diff --git a/public/fonts/space-grotesk/SpaceGrotesk-Regular.ttf b/public/fonts/space-grotesk/SpaceGrotesk-Regular.ttf
diff --git a/public/fonts/space-grotesk/SpaceGrotesk-SemiBold.ttf b/public/fonts/space-grotesk/SpaceGrotesk-SemiBold.ttf
diff --git a/public/fonts/yellowtail/Yellowtail-Regular.ttf b/public/fonts/yellowtail/Yellowtail-Regular.ttf
diff --git a/src/components/Card.astro b/src/components/Card.astro
@@ -9,7 +9,7 @@ const { href, title, body } = Astro.props;
 ---
 
 <li class="link-card">
-	<a href={href}>
+	<a href={href} aria-label={title}>
 		<h2>
 			{title}
 			<span>&rarr;</span>

diff --git a/src/components/Contact.astro b/src/components/Contact.astro
@@ -26,34 +26,36 @@ import {
         <span>{EMAIL_URL}</span>
       </div>
       <div class="buttons">
-        <a href={`mailto:${EMAIL_URL}`} class="btn icon">
+        <a href={`mailto:${EMAIL_URL}`} class="btn icon" aria-label="Send email">
           <SendIcon width={26} height={26} />
         </a>
-        <button class="btn icon copy">
+        <button class="btn icon copy" aria-label="Copy email">
           <CopyIcon width={26} height={26} />
         </button>
       </div>
     </div>
   </div>
   <div class="footer">
     <div class="links">
-      <a target="_blank" href={GITHUB_URL} class="icon">
+      <a target="_blank" href={GITHUB_URL} class="icon" aria-label="Github">
         <GithubIcon />
       </a>
-      <a target="_blank" href={INSTAGRAM_URL} class="icon">
+      <a target="_blank" href={INSTAGRAM_URL} class="icon" aria-label="Instagram">
         <InstagramIcon />
       </a>
-      <a target="_blank" href={TWITTER_URL} class="icon">
+      <a target="_blank" href={TWITTER_URL} class="icon" aria-label="Twitter">
         <TwitterIcon />
       </a>
-      <a target="_blank" href={LINKEDIN_URL} class="icon">
+      <a target="_blank" href={LINKEDIN_URL} class="icon" aria-label="Linkedin">
         <LinkedinIcon />
       </a>
     </div>
     <div class="detail">
       <span class="text">
         Design and Built with ❤️ by
-        <a target="_blank" href={GITHUB_URL}>Marco Cruz</a>
+        <a target="_blank" href={GITHUB_URL} aria-label="Github profile">
+          Marco Cruz
+        </a>
       </span>
     </div>
   </div>

diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -9,10 +9,10 @@ import { GITHUB_URL, LINKEDIN_URL } from '@constants/urls.ts';
     M<span>.</span>
   </p>
   <div class="social-icons">
-    <a target="_blank" href={GITHUB_URL} class="icon">
+    <a target="_blank" href={GITHUB_URL} class="icon" aria-label="Github">
       <GithubIcon height={45} width={45} />
     </a>
-    <a target="_blank" href={LINKEDIN_URL} class="icon">
+    <a target="_blank" href={LINKEDIN_URL} class="icon" aria-label="Linkedin">
       <LinkedinIcon height={45} width={45} />
     </a>
   </div>

diff --git a/src/components/Hero.astro b/src/components/Hero.astro
@@ -13,13 +13,15 @@ import { GITHUB_URL, LINKEDIN_URL } from '@constants/urls.ts';
       <a
         class="btn"
         href="pdf/cv.pdf"
-        download="cv - marco cruz.pdf">Download CV
+        download="cv - marco cruz.pdf"
+        aria-label="Download CV">
+        Download CV
       </a>
       <div class="social">
-        <a target="_blank" href={GITHUB_URL} class="icon">
+        <a target="_blank" href={GITHUB_URL} class="icon" aria-label="Github">
           <GithubIcon height={40} width={40} />
         </a>
-        <a target="_blank" href={LINKEDIN_URL} class="icon">
+        <a target="_blank" href={LINKEDIN_URL} class="icon" aria-label="Linkedin">
           <LinkedinIcon height={40} width={40} />
         </a>
       </div>

diff --git a/src/components/Navigation.svelte b/src/components/Navigation.svelte
@@ -52,31 +52,31 @@
 <nav>
   <ul class="nav">
     <li class="home active">
-      <a href="#home">
+      <a href="#home" aria-label="Home section">
         <HomeIcon />
         <span class="title">Home</span>
       </a>
     </li>
     <li class="about">
-      <a href="#about">
+      <a href="#about" aria-label="About section">
         <UserIcon />
         <span class="title">About me</span>
       </a>
     </li>
     <li class="skills">
-      <a href="#skills">
+      <a href="#skills" aria-label="Skills section">
         <WrenchIcon />
         <span class="title">My skills</span>
       </a>
     </li>
     <li class="portfolio">
-      <a href="#portfolio">
+      <a href="#portfolio" aria-label="Portfolio section">
         <BriefcaseIcon />
         <span class="title">My portfolio</span>
       </a>
     </li>
     <li class="contact">
-      <a href="#contact">
+      <a href="#contact" aria-label="Contact section">
         <EnvelopeIcon />
         <span class="title">Contact me</span>
       </a>
@@ -86,7 +86,7 @@
       <div class="line-divisor"></div>
     </li>
     <li>
-      <a on:click={setTheme}>
+      <a on:click={setTheme} aria-label="Change theme">
         {#if isDarkTheme}
         <SunIcon />
         <span class="title">Light theme</span>

diff --git a/src/components/Portfolio.astro b/src/components/Portfolio.astro
@@ -11,7 +11,7 @@ import projects from '@data/projects.json';
     {
       projects.map((project) => (
         <div class="project">
-          <a href={project.urlProduction} target="_blank">
+          <a href={project.urlProduction} target="_blank" aria-label="project-preview">
             <picture>
               <img src={project.image} alt="project-preview" loading="lazy">
             </picture>
@@ -32,10 +32,20 @@ import projects from '@data/projects.json';
               }
             </div>
             <div class="links">
-              <a class="btn icon" target="_blank" href={project.urlGithub}>
+              <a
+                class="btn icon"
+                target="_blank"
+                href={project.urlGithub}
+                aria-label="github-repository"
+                >
                 Código <GithubIcon width={26} height={26}/>
               </a>
-              <a class="btn icon" target="_blank" href={project.urlProduction}>
+              <a
+                  class="btn icon"
+                  target="_blank"
+                  href={project.urlProduction}
+                  aria-label="project-demo"
+                >
                 Demo <ExternalIcon width={26} height={26} />
               </a>
             </div>
@@ -46,7 +56,12 @@ import projects from '@data/projects.json';
   </div>
 
   <div class="more">
-    <a href="https://github.com/marcode24?tab=repositories" target="_blank" class="btn">
+    <a
+      href="https://github.com/marcode24?tab=overview"
+      target="_blank"
+      class="btn"
+      aria-label="more-projects"
+      >
       Show more...
     </a>
   </div>

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -4,23 +4,52 @@ interface Props {
 }
 
 const { title } = Astro.props;
-const fontRedressed = 'https://fonts.googleapis.com/css2?family='
-	+ 'Redressed&family=Yellowtail&display=swap';
-const fontSpaceGrotesk = 'https://fonts.googleapis.com/css2?family='
-	+ 'Redressed&family=Space+Grotesk:wght@300;400;500;600;700&family='
-	+ 'Yellowtail&display=swap';
+
+const description = 'Explore my portfolio to see my projects and skills. '
+	+ 'I\'m a full-stack developer and I love to create websites and apps.';
+const keywords = 'portfolio, developer, web, app, full-stack, javascript, '
+	+ 'typescript, nodejs, express, mongodb, postgresql, mysql, rest, api, '
+	+ 'website, app, responsive, design, ui, ux, interface, user, experience, '
+	+ 'user interface, user experience, frontend, backend, fullstack, full-stack, '
+	+ 'full stack, developer, programmer, software, engineer, software engineer';
+const author = 'Marco Cruz';
+const language = 'en';
+const robots = 'index, follow';
+
+const og = {
+  title: 'Marco Cruz - Portfolio',
+  description: 'Explore my portfolio to see my projects and skills. '
+		+ 'I\'m a full-stack developer and I love to create websites and apps.',
+  url: 'https://marco-cruz.netlify.app/',
+  image: 'https://res.cloudinary.com/dfeujtobk/image/upload/v1705960644'
+		+ '/Portfolio/840shots_so_d3ber6.png',
+};
 ---
 
 <!doctype html>
 <html lang="en">
 	<head>
 		<meta charset="UTF-8" />
-		<meta name="description" content="Astro description" />
+		<meta name="description" content={description} />
+		<meta name="keywords" content={keywords} />
 		<meta name="viewport" content="width=device-width" />
 		<link rel="icon" type="image/svg+xml" href="/logo.ico" />
-		<link href={fontRedressed} rel="stylesheet">
-		<link href={fontSpaceGrotesk} rel="stylesheet">
-		<meta name="generator" content={Astro.generator} />
+		<meta name="theme-color" content="#3b82f6" />
+		<meta name="apple-mobile-web-app-status-bar-style" content="#3b82f6" />
+		<meta name="apple-mobile-web-app-capable" content="yes" />
+		<meta name="author" content={author} />
+		<meta name="language" content={language} />
+		<meta name="robots" content={robots} />
+		<meta property="og:title" content={og.title} />
+		<meta property="og:description" content={og.description} />
+		<meta property="og:url" content={og.url} />
+		<meta property="og:image" content={og.image} />
+		<meta property="og:type" content="website" />
+		<meta name="twitter:title" content={og.title} />
+		<meta name="twitter:description" content={og.description} />
+		<meta name="twitter:url" content={og.url} />
+		<meta name="twitter:image" content={og.image} />
+		<meta name="twitter:card" content="summary_large_image" />
 		<title>{title}</title>
 	</head>
 	<body>
@@ -103,7 +132,7 @@ const fontSpaceGrotesk = 'https://fonts.googleapis.com/css2?family='
 
 	html {
 		scroll-behavior: smooth;
-		font-family: "Space Grotesk", sans-serif;
+		font-family: "Space Grotesk", system-ui, sans-serif;
 	}
 
 	button,
@@ -160,6 +189,55 @@ const fontSpaceGrotesk = 'https://fonts.googleapis.com/css2?family='
 			font-size: 38px;
 		}
 	}
+
+	@font-face {
+		font-family: "Space Grotesk";
+		src: url('/fonts/space-grotesk/SpaceGrotesk-Light.ttf');
+		font-weight: 300;
+		font-style: normal;
+		font-display: swap;
+	}
+
+	@font-face {
+		font-family: "Space Grotesk";
+		src: url('/fonts/space-grotesk/SpaceGrotesk-Regular.ttf');
+		font-weight: normal;
+		font-style: normal;
+		font-display: swap;
+	}
+
+	@font-face {
+		font-family: "Space Grotesk";
+		src: url('/fonts/space-grotesk/SpaceGrotesk-Medium.ttf');
+		font-weight: 500;
+		font-style: normal;
+		font-display: swap;
+	}
+
+	@font-face {
+		font-family: "Space Grotesk";
+		src: url('/fonts/space-grotesk/SpaceGrotesk-SemiBold.ttf');
+		font-weight: 600;
+		font-style: normal;
+		font-display: swap;
+	}
+
+	@font-face {
+		font-family: "Space Grotesk";
+		src: url('/fonts/space-grotesk/SpaceGrotesk-Bold.ttf');
+		font-weight: bold;
+		font-style: normal;
+		font-display: swap;
+	}
+
+	@font-face {
+		font-family: 'Yellowtail';
+		src: url('/fonts/yellowtail/Yellowtail-Regular.ttf');
+		font-weight: normal;
+		font-style: normal;
+		font-display: swap;
+	}
+
 </style>
 
 <script>