Skip to content

Commit 429cff1

Browse files
carlosjorgercarlosjorger
committed
🎈 perf: remove unnecessary elements
1 parent 23040c4 commit 429cff1

File tree

7 files changed

+89
-99
lines changed

7 files changed

+89
-99
lines changed

‎src/components/AboutMe.astro‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@ import Subtitle from '@shared/Subtitle.astro';
33
import CustomParagraph from '@shared/CustomParagraph.astro';
44
import SectionContainer from './shared/SectionContainer.astro';
55
// TODO: add a more original description
6+
// TODO: reduce Final HTML (DOM) size
7+
// - Remove unnecessary elements
8+
// - Optimize svgs with svgo
69
export interface Props {
710
ABOUT_ME_TITLE: string;
811
ABOUT_ME_DESCRIPTION: string;

‎src/components/App.astro‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,10 @@ const i18n = getI18N({ currentLocale });
1818
---
1919

2020
<Layout {...i18n}>
21-
<HeadMeta SEO_TITLE={i18n.SEO_TITLE} SEO_DESCRIPTION={i18n.SEO_DESCRIPTION} slot="structured-data" />
21+
<HeadMeta
22+
SEO_TITLE={i18n.SEO_TITLE}
23+
SEO_DESCRIPTION={i18n.SEO_DESCRIPTION}
24+
/>
2225
<Header {...i18n} {...Astro.props} />
2326
<main>
2427
<Presentation {...i18n} />

‎src/components/Articles.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ const allPosts = await Astro.glob('../pages/posts/*.md');
2727
<img
2828
transition:name={post.frontmatter.title}
2929
src={post.frontmatter.image.src}
30-
class="w-48 rounded-xl max-sm:w-full aspect-video"
30+
class="aspect-video w-48 rounded-xl max-sm:w-full"
3131
alt={post.frontmatter.image.alt}
3232
/>
3333
<section>

‎src/components/Footer/Footer.astro‎

Lines changed: 41 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -63,52 +63,48 @@ const icons = [
6363
<div
6464
class="grid h-screen bg-[radial-gradient(ellipse_130%_100%_at__50%_-20%,rgba(255,255,255,0)_50%,var(--default-background-color-darker))] max-sm:h-[70dvh]"
6565
>
66-
<div id="contact" class="flex flex-col justify-center">
67-
<section
68-
class="z-0 mx-auto mt-10 w-1/2 p-2 max-sm:mt-0 max-sm:w-[90%]"
66+
<section
67+
id="contact"
68+
class="z-0 mx-auto mt-10 flex w-1/2 flex-col justify-center p-2 max-sm:mt-0 max-sm:w-[90%]"
69+
>
70+
<Subtitle class="reveal" center>{CONTACT_TITLE}</Subtitle>
71+
<CustomParagraph
72+
class="reveal mx-0 my-4 text-center text-2xl max-sm:text-xl"
6973
>
70-
<Subtitle class="reveal" center>{CONTACT_TITLE}</Subtitle>
71-
<div class="reveal mx-0 my-4 text-center">
72-
<CustomParagraph class="text-2xl max-sm:text-xl">
73-
{CONTACT_DESCRIPTION}
74-
</CustomParagraph>
75-
</div>
76-
<address
77-
class="reveal mx-auto my-0 flex w-1/2 flex-row justify-evenly max-sm:w-3/4"
78-
>
79-
{
80-
icons.map((icon) => (
81-
<IconContact href={icon.href} title={icon.title}>
82-
<icon.iconComponent />
83-
</IconContact>
84-
))
85-
}
86-
</address>
87-
</section>
88-
</div>
89-
<div
90-
class="flex flex-col justify-center font-lato text-[var(--default-font-color)]"
74+
{CONTACT_DESCRIPTION}
75+
</CustomParagraph>
76+
<address
77+
class="reveal mx-auto my-0 flex w-1/2 flex-row justify-evenly max-sm:w-3/4"
78+
>
79+
{
80+
icons.map((icon) => (
81+
<IconContact href={icon.href} title={icon.title}>
82+
<icon.iconComponent />
83+
</IconContact>
84+
))
85+
}
86+
</address>
87+
</section>
88+
<p
89+
class="last-reveal mx-auto my-0 mb-12 text-center text-3xl text-[var(--default-font-color)]"
9190
>
92-
<p class="last-reveal mx-auto my-0 mb-12 text-center text-3xl">
93-
<strong class="inline italic">© 2022 Carlos Jorge</strong>
94-
<br />
95-
<span>
96-
<CustomLink
97-
href="https://github.com/carlosjorger/carlosjorger.github.io"
98-
aria-label={CONTACT_FOOTER_PUBLISHED_ARIA_LABEL}
99-
>
100-
{CONTACT_FOOTER_PUBLISHED}
101-
</CustomLink>
102-
{CONTACT_FOOTER_AFTER_PUBLISHED}
103-
<CustomLink
104-
href="https://pages.github.com/"
105-
aria-label={CONTACT_FOOTER_GITHUB_PAGE_ARIA_LABEL}
106-
>
107-
{CONTACT_FOOTER_GITHUB_PAGE}
108-
</CustomLink>
109-
<span></span>
110-
</span>
111-
</p>
112-
</div>
91+
<strong class="inline italic">© 2022 Carlos Jorge</strong>
92+
<br />
93+
<span>
94+
<CustomLink
95+
href="https://github.com/carlosjorger/carlosjorger.github.io"
96+
aria-label={CONTACT_FOOTER_PUBLISHED_ARIA_LABEL}
97+
>
98+
{CONTACT_FOOTER_PUBLISHED}
99+
</CustomLink>
100+
{CONTACT_FOOTER_AFTER_PUBLISHED}
101+
<CustomLink
102+
href="https://pages.github.com/"
103+
aria-label={CONTACT_FOOTER_GITHUB_PAGE_ARIA_LABEL}
104+
>
105+
{CONTACT_FOOTER_GITHUB_PAGE}
106+
</CustomLink>
107+
</span>
108+
</p>
113109
</div>
114110
</footer>

‎src/components/Header/HeadMeta.astro‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,21 @@
11
---
22
export interface Props {
33
SEO_TITLE: string;
4-
SEO_DESCRIPTION: string;
4+
SEO_DESCRIPTION: string;
55
}
66
7-
const { SEO_TITLE, SEO_DESCRIPTION } = Astro.props;
7+
const { SEO_TITLE, SEO_DESCRIPTION } = Astro.props;
88
99
let schema = JSON.stringify({
10-
"@context": "https://schema.org/",
11-
"@type": "WebSite",
12-
"headline": SEO_TITLE,
13-
"description": SEO_DESCRIPTION,
14-
"author": {
15-
"@type": "Person",
16-
"name": "Carlos Rodríguez"
17-
}
10+
'@context': 'https://schema.org/',
11+
'@type': 'WebSite',
12+
headline: SEO_TITLE,
13+
description: SEO_DESCRIPTION,
14+
author: {
15+
'@type': 'Person',
16+
name: 'Carlos Rodríguez',
17+
},
1818
});
1919
---
20-
<script type="application/ld+json" set:html={schema}></script>
20+
21+
<script type="application/ld+json" set:html={schema} />

‎src/components/Header/LocaleSelector.astro‎

Lines changed: 11 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -52,21 +52,16 @@ const CURRENT_LANGUAGE = LANGUAGES_INFO[currentLocale].name;
5252
<IconSelectDropdown class="ms-0.5 h-2.5 w-2.5 max-sm:h-4 max-sm:w-4" />
5353
</button>
5454

55-
<div
55+
<ul
5656
id={dropdown_id}
57-
class="z-10 hidden w-24 divide-y rounded-lg shadow max-sm:w-32"
58-
tabindex="-1"
57+
class="z-10 hidden w-24 divide-y rounded-md bg-[hsl(271.2,35.21%,15%,80%)] text-xs shadow drop-shadow-[0rem_0rem_0.3rem_black] max-sm:w-32 max-sm:text-xl"
58+
aria-labelledby={id}
5959
>
60-
<ul
61-
class="rounded-md bg-[hsl(271.2,35.21%,15%,80%)] text-xs drop-shadow-[0rem_0rem_0.3rem_black] max-sm:text-xl"
62-
aria-labelledby={id}
63-
>
64-
{
65-
LANGUAGES.map((lang) => (
66-
<LocaleSelectorLink {...lang}>
67-
<lang.flag class="h-4" />
68-
</LocaleSelectorLink>
69-
))
70-
}
71-
</ul>
72-
</div>
60+
{
61+
LANGUAGES.map((lang) => (
62+
<LocaleSelectorLink {...lang}>
63+
<lang.flag class="h-4" />
64+
</LocaleSelectorLink>
65+
))
66+
}
67+
</ul>

‎src/components/Presentation.astro‎

Lines changed: 17 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -25,32 +25,24 @@ const {
2525
id="home"
2626
class="flex h-screen flex-col justify-evenly pt-0 max-sm:h-[100dvh]"
2727
>
28-
<div class="p-2 font-lato text-[var(--default-font-color)] max-w-2xl">
29-
<div class="reveal">
30-
<h1
31-
class="mx-0 my-3 animate-presentation-title text-6xl font-bold text-[var(--default-secundary-font-color)] max-sm:text-4xl"
32-
>
33-
{INTRO_TITLE}<br class="hidden max-sm:inline" />
34-
{INTRO_TITLE_AFTER_BR1}
35-
<br />
36-
{INTRO_TITLE_AFTER_BR2}
37-
</h1>
38-
</div>
39-
<div class="reveal">
40-
<h2
41-
class="mx-0 my-3 animate-presentation-main-skill text-5xl font-bold max-sm:mt-4 max-sm:text-4xl"
42-
>
43-
{INTRO_SUBTITLE}
44-
</h2>
45-
</div>
46-
<div
47-
class="mx-0 my-3 animate-presentation-description break-words max-sm:mt-7"
28+
<div class="max-w-2xl p-2 font-lato text-[var(--default-font-color)]">
29+
<h1
30+
class="mx-0 my-3 animate-presentation-title text-6xl font-bold text-[var(--default-secundary-font-color)] max-sm:text-4xl"
4831
>
49-
<CustomParagraph
50-
set:html={INTRO_DESCRIPTION}
51-
class="text-2xl max-sm:text-xl"
52-
/>
53-
</div>
32+
{INTRO_TITLE}<br class="hidden max-sm:inline" />
33+
{INTRO_TITLE_AFTER_BR1}
34+
<br />
35+
{INTRO_TITLE_AFTER_BR2}
36+
</h1>
37+
<h2
38+
class="mx-0 my-3 animate-presentation-main-skill text-5xl font-bold max-sm:mt-4 max-sm:text-4xl"
39+
>
40+
{INTRO_SUBTITLE}
41+
</h2>
42+
<CustomParagraph
43+
set:html={INTRO_DESCRIPTION}
44+
class="mx-0 my-3 animate-presentation-description break-words text-2xl max-sm:mt-7 max-sm:text-xl"
45+
/>
5446
</div>
5547
</SectionContainer>
5648
</div>

0 commit comments

Comments
 (0)