Skip to content

Commit 04d935a

Browse files
marcode24marcode24
authored
Merge pull request #15 from marcode24/image
✏️ Fix image source path in Hero component
2 parents 18e2b04 + b6bb185 commit 04d935a

16 files changed

+182
-79
lines changed

‎src/components/About.astro‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
---
2+
import UserIcon from '@components/icons/user-icon.astro';
23
import { getI18n } from '@i18n/index';
34
45
const { currentLocale } = Astro;
@@ -7,15 +8,18 @@ const i18n = getI18n({ currentLocale });
78
---
89

910
<section id="about">
10-
<span class="title">{i18n.ABOUT_SECTION.TITLE} 👨</span>
11+
<span class="title">
12+
<UserIcon />
13+
{i18n.ABOUT_SECTION.TITLE}
14+
</span>
1115
<div class="wrap">
1216
<div class="description">
1317
<p set:html={i18n.ABOUT_SECTION.DESCRIPTION_1}></p>
1418
<p set:html={i18n.ABOUT_SECTION.DESCRIPTION_2}></p>
1519
<p set:html={i18n.ABOUT_SECTION.DESCRIPTION_3}></p>
1620
</div>
1721
<div class="image">
18-
<img src="programming.webp" alt={i18n.ABOUT_SECTION.IMAGE.ALT}>
22+
<img src="/programming.webp" alt={i18n.ABOUT_SECTION.IMAGE.ALT}>
1923
</div>
2024
</div>
2125
</section>

‎src/components/App.astro‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,9 @@ const i18n = getI18n({ currentLocale });
2323
<div class="blur bottom"></div>
2424
<div class="blur top"></div>
2525
<Hero />
26-
<About />
27-
<Skills />
2826
<Portfolio />
27+
<Skills />
28+
<About />
2929
<Contact />
3030
</div>
3131
</div>

‎src/components/Contact.astro‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
---
22
import CopyIcon from '@components/icons/copy-icon.astro';
3+
import EnvelopeIcon from '@components/icons/envelope-icon.astro';
34
import GithubIcon from '@components/icons/github-icon.astro';
45
import InstagramIcon from '@components/icons/instagram-icon.astro';
56
import LinkedinIcon from '@components/icons/linkedin-icon.astro';
@@ -20,7 +21,10 @@ const i18n = getI18n({ currentLocale });
2021
---
2122

2223
<section id="contact">
23-
<span class="title">{i18n.CONTACT_SECTION.TITLE} ✉️</span>
24+
<span class="title">
25+
<EnvelopeIcon />
26+
{i18n.CONTACT_SECTION.TITLE}
27+
</span>
2428
<div class="container">
2529
<p class="description">
2630
{i18n.CONTACT_SECTION.DESCRIPTION}
@@ -87,7 +91,7 @@ const i18n = getI18n({ currentLocale });
8791
justify-content: center;
8892
flex-direction: column;
8993
gap: 2rem;
90-
max-width: 50%;
94+
max-width: 60%;
9195
margin: 6rem auto;
9296
}
9397

‎src/components/Hero.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ const i18n = getI18n({ currentLocale });
4040
</div>
4141
</div>
4242

43-
<img src="me.webp" alt={i18n.HERO_SECTION.IMAGE.ALT} class="profile">
43+
<img src="/me.webp" alt={i18n.HERO_SECTION.IMAGE.ALT} class="profile">
4444
</section>
4545

4646
<style>

‎src/components/Navigation.svelte‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -75,10 +75,10 @@
7575
<span class="title"> {home} </span>
7676
</a>
7777
</li>
78-
<li class="about">
79-
<a href="#about" aria-label="About section">
80-
<UserIcon />
81-
<span class="title">{about}</span>
78+
<li class="portfolio">
79+
<a href="#portfolio" aria-label="Portfolio section">
80+
<BriefcaseIcon />
81+
<span class="title">{portfolio}</span>
8282
</a>
8383
</li>
8484
<li class="skills">
@@ -87,10 +87,10 @@
8787
<span class="title">{skills}</span>
8888
</a>
8989
</li>
90-
<li class="portfolio">
91-
<a href="#portfolio" aria-label="Portfolio section">
92-
<BriefcaseIcon />
93-
<span class="title">{portfolio}</span>
90+
<li class="about">
91+
<a href="#about" aria-label="About section">
92+
<UserIcon />
93+
<span class="title">{about}</span>
9494
</a>
9595
</li>
9696
<li class="contact">

‎src/components/Portfolio.astro‎

Lines changed: 30 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
---
2+
import CodeIcon from '@components/icons/code-icon.astro';
23
import ExternalIcon from '@components/icons/external-icon.astro';
34
import GithubIcon from '@components/icons/github-icon.astro';
45
import { getI18n } from '@i18n/index';
@@ -10,15 +11,18 @@ const projects = i18n.PORTFOLIO_SECTION.PROJECTS;
1011
---
1112

1213
<section id="portfolio">
13-
<span class="title">{i18n.PORTFOLIO_SECTION.TITLE} 💼</span>
14+
<span class="title">
15+
<CodeIcon />
16+
{i18n.PORTFOLIO_SECTION.TITLE}
17+
</span>
1418

1519
<div class="projects">
1620
{
1721
projects.map((project) => (
1822
<div class="project">
1923
<a href={project.urlProduction} target="_blank" aria-label="project-preview">
20-
<picture>
21-
<img src={project.image} alt="project-preview" loading="lazy">
24+
<picture class="project-preview">
25+
<img src={`/${project.image}`} alt="project-preview" loading="lazy">
2226
</picture>
2327
</a>
2428
<div class="description">
@@ -27,10 +31,12 @@ const projects = i18n.PORTFOLIO_SECTION.PROJECTS;
2731
<div class="technologies">
2832
{
2933
project.technologies.map((technology) => (
30-
<img
31-
src={`images/${technology.image}`}
32-
alt={`${technology.name} tool used in the project`}
33-
loading="lazy">
34+
<picture class="technology">
35+
<img
36+
src={`/images/${technology.image}`}
37+
alt={`${technology.name} tool used in the project`}
38+
loading="lazy">
39+
</picture>
3440
))
3541
}
3642
</div>
@@ -72,11 +78,6 @@ const projects = i18n.PORTFOLIO_SECTION.PROJECTS;
7278
</section>
7379

7480
<style>
75-
section#portfolio {
76-
position: relative;
77-
width: 100%;
78-
}
79-
8081
.more {
8182
display: flex;
8283
align-items: center;
@@ -99,12 +100,18 @@ const projects = i18n.PORTFOLIO_SECTION.PROJECTS;
99100
gap: 2rem;
100101
}
101102

102-
.project picture {
103+
.description .technologies img {
104+
width: 100%;
105+
height: 100%;
106+
object-fit: cover;
107+
}
108+
109+
.project picture.project-preview {
103110
border-radius: 1rem;
104111
overflow: hidden;
105112
}
106113

107-
.project picture img {
114+
.project picture.project-preview img {
108115
min-height: inherit;
109116
width: 100%;
110117
height: 100%;
@@ -113,10 +120,10 @@ const projects = i18n.PORTFOLIO_SECTION.PROJECTS;
113120
transition: 0.3s ease;
114121
}
115122

116-
.description .technologies img {
117-
width: 100%;
123+
.description .technologies .technology {
118124
height: 2.1rem;
119-
object-fit: cover;
125+
border-radius: 0.5rem;
126+
overflow: hidden;
120127
}
121128

122129
.project picture img:hover {
@@ -187,14 +194,18 @@ const projects = i18n.PORTFOLIO_SECTION.PROJECTS;
187194
gap: 1.8rem;
188195
}
189196

190-
.project picture {
197+
.description .technologies img {
198+
height: 1.5rem;
199+
}
200+
201+
.project picture.project-preview {
191202
width: 100%;
192203
height: 100%;
193204
margin-bottom: 1rem;
194205
border-radius: 0.8rem;
195206
}
196207

197-
.project picture img {
208+
.project picture.project-preview img {
198209
transform: translate(0, 0);
199210
}
200211

@@ -217,10 +228,6 @@ const projects = i18n.PORTFOLIO_SECTION.PROJECTS;
217228
gap: 0.5rem;
218229
}
219230

220-
.description .technologies img {
221-
height: 1.5rem;
222-
}
223-
224231
.description .links {
225232
flex-direction: row;
226233
flex-wrap: wrap;

‎src/components/Skills.astro‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
---
22
import CardSkill from '@components/cards/CardSkill.astro';
3+
import WrenchIcon from '@components/icons/wrench-icon.astro';
34
import {
45
cardsDataBackend,
56
cardsDataFrontend,
@@ -15,7 +16,10 @@ const i18n = getI18n({ currentLocale });
1516
---
1617

1718
<section id="skills">
18-
<span class="title">{i18n.SKILLS_SECTION.TITLE} 🛠️</span>
19+
<span class="title">
20+
<WrenchIcon />
21+
{i18n.SKILLS_SECTION.TITLE}
22+
</span>
1923
<div class="skills">
2024
<div class="skill">
2125
<span class="subtitle">{i18n.SKILLS_SECTION.TITLES.FRONTEND}</span>
@@ -84,8 +88,8 @@ const i18n = getI18n({ currentLocale });
8488

8589
.subtitle {
8690
font-size: 28px;
87-
font-weight: bold;
88-
color: var(--font-color);
91+
font-weight: 600;
92+
color: var(--primary-color);
8993
}
9094

9195
.cards {

‎src/components/icons/code-icon.astro‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
---
2+
interface Props {
3+
height?: number;
4+
width?: number;
5+
}
6+
7+
const { height = 40, width = 40 }: Props = Astro.props;
8+
---
9+
10+
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-code"
11+
width={width} height={height}
12+
viewBox="0 0 24 24" stroke-width="2"
13+
stroke="currentColor" fill="none"
14+
stroke-linecap="round" stroke-linejoin="round">
15+
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
16+
<path d="M7 8l-4 4l4 4" />
17+
<path d="M17 8l4 4l-4 4" />
18+
<path d="M14 4l-4 16" />
19+
</svg>

‎src/components/icons/envelope-icon.astro‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
---
2+
interface Props {
3+
height?: number;
4+
width?: number;
5+
}
6+
7+
const { height = 40, width = 40 }: Props = Astro.props;
8+
---
9+
10+
<svg xmlns="http://www.w3.org/2000/svg"
11+
class="icon icon-tabler icon-tabler-mail-forward"
12+
width={width} height={height}
13+
viewBox="0 0 24 24" stroke-width="2"
14+
stroke="currentColor" fill="none"
15+
stroke-linecap="round" stroke-linejoin="round">
16+
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
17+
<path d="M12 18h-7a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v7.5" />
18+
<path d="M3 6l9 6l9 -6" />
19+
<path d="M15 18h6" />
20+
<path d="M18 15l3 3l-3 3" />
21+
</svg>

‎src/components/icons/user-icon.astro‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
---
2+
interface Props {
3+
height?: number;
4+
width?: number;
5+
}
6+
7+
const { height = 40, width = 40 }: Props = Astro.props;
8+
---
9+
10+
<svg xmlns="http://www.w3.org/2000/svg"
11+
class="icon icon-tabler icon-tabler-user-check"
12+
width={width} height={height}
13+
viewBox="0 0 24 24" stroke-width="2"
14+
stroke="currentColor" fill="none" stroke-linecap="round"
15+
stroke-linejoin="round">
16+
<path stroke="none" d="M0 0h24v24H0z"fill="none"/>
17+
<path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0" />
18+
<path d="M6 21v-2a4 4 0 0 1 4 -4h4" />
19+
<path d="M15 19l2 2l4 -4" />
20+
</svg>

0 commit comments

Comments
 (0)