Skip to content

Commit b35eb60

Browse files
marcode24marcode24
committed
♻️ Refactor component order and add icons
1 parent ff66405 commit b35eb60

File tree

13 files changed

+123
-28
lines changed

13 files changed

+123
-28
lines changed

‎src/components/About.astro

Lines changed: 5 additions & 1 deletion
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,7 +8,10 @@ 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>

‎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/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: 5 additions & 6 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,7 +11,10 @@ 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
{
@@ -72,11 +76,6 @@ const projects = i18n.PORTFOLIO_SECTION.PROJECTS;
7276
</section>
7377

7478
<style>
75-
section#portfolio {
76-
position: relative;
77-
width: 100%;
78-
}
79-
8079
.more {
8180
display: flex;
8281
align-items: center;

‎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>

‎src/components/icons/wrench-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"
11+
class="icon icon-tabler icon-tabler-tool"
12+
width={width} height={height}
13+
viewBox="0 0 24 24" stroke-width="2"
14+
stroke="currentColor"
15+
fill="none" stroke-linecap="round"
16+
stroke-linejoin="round">
17+
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
18+
<path d="M7 10h3v-3l-3.5 -3.5a6 6 0 0 1 8 8l6 6a2 2 0 0 1 -3 3l-6 -6a6 6 0 0 1 -8 -8l3.5 3.5" />
19+
</svg>

0 commit comments

Comments
 (0)