Skip to content

Commit 4e27940

Browse files
diegomartydiegomarty
committed
✨ Added action buttom component
1 parent 2ae77f5 commit 4e27940

File tree

3 files changed

+88
-53
lines changed

3 files changed

+88
-53
lines changed

‎src/components/cv/ActionButton.astro

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
---
2+
export interface Props {
3+
type: "mail" | "download" | "link";
4+
href: string;
5+
}
6+
7+
const { type, href } = Astro.props;
8+
---
9+
10+
{
11+
type === "mail" && (
12+
<a
13+
href={href}
14+
class="inline-flex bg-amber-400 rounded-lg hover:bg-white hover:text-amber-400 text-gray-800 px-3 py-2 items-center mx-1"
15+
target="_blank"
16+
>
17+
<svg
18+
width="24"
19+
height="24"
20+
viewBox="0 0 24 24"
21+
xmlns="http://www.w3.org/2000/svg"
22+
>
23+
<path
24+
fill="#000000"
25+
d="M4 20q-.825 0-1.413-.588T2 18V6q0-.825.588-1.413T4 4h16q.825 0 1.413.588T22 6v12q0 .825-.588 1.413T20 20H4Zm8-7L4 8v10h16V8l-8 5Zm0-2l8-5H4l8 5ZM4 8V6v12V8Z"
26+
/>
27+
</svg>
28+
</a>
29+
)
30+
}
31+
32+
{
33+
type === "download" && (
34+
<a
35+
href={href}
36+
class="inline-flex bg-amber-400 rounded-lg hover:bg-white hover:text-amber-400 text-gray-800 px-3 py-2 items-center mx-1"
37+
target="_blank"
38+
>
39+
<svg
40+
width="24"
41+
height="24"
42+
viewBox="0 0 24 24"
43+
xmlns="http://www.w3.org/2000/svg"
44+
>
45+
<path
46+
fill="#000000"
47+
d="m12 16l-5-5l1.4-1.45l2.6 2.6V4h2v8.15l2.6-2.6L17 11l-5 5Zm-6 4q-.825 0-1.413-.588T4 18v-3h2v3h12v-3h2v3q0 .825-.588 1.413T18 20H6Z"
48+
/>
49+
</svg>
50+
</a>
51+
)
52+
}
53+
54+
{
55+
type === "link" && (
56+
<a
57+
href={href}
58+
class="inline-flex bg-amber-400 rounded-lg hover:bg-white hover:text-amber-400 text-gray-800 p-1 items-center mx-1 float-right"
59+
target="_blank"
60+
>
61+
<svg
62+
width="24"
63+
height="24"
64+
viewBox="0 0 24 24"
65+
xmlns="http://www.w3.org/2000/svg"
66+
>
67+
<path
68+
fill="none"
69+
stroke="#000000"
70+
stroke-linecap="round"
71+
stroke-linejoin="round"
72+
stroke-width="2"
73+
d="M9 4h10v14a2 2 0 0 1-2 2H9m3-5l3-3m0 0l-3-3m3 3H5"
74+
/>
75+
</svg>
76+
</a>
77+
)
78+
}

‎src/components/cv/CvProjects.astro

Lines changed: 3 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
---
2+
import ActionButton from "./ActionButton.astro";
23
export interface Props {
34
title: string;
45
body: string;
@@ -21,25 +22,7 @@ const {
2122
<div class="text-md mb-4">
2223
<div class="text-xl font-bold mb-2">
2324
{title}
24-
<a
25-
href={href}
26-
class="inline-flex bg-amber-400 rounded-lg p-1 hover:bg-white hover:text-amber-400 text-gray-800 float-right"
27-
>
28-
<svg
29-
width="24"
30-
height="24"
31-
viewBox="0 0 24 24"
32-
xmlns="http://www.w3.org/2000/svg"
33-
>
34-
<path
35-
fill="none"
36-
stroke="#000000"
37-
stroke-linecap="round"
38-
stroke-linejoin="round"
39-
stroke-width="2"
40-
d="M9 4h10v14a2 2 0 0 1-2 2H9m3-5l3-3m0 0l-3-3m3 3H5"></path>
41-
</svg>
42-
</a>
25+
<ActionButton href={href} type="link" />
4326
</div>
4427
<div class="mb-4">
4528
<p class="text-xl mb-2">
@@ -55,7 +38,7 @@ const {
5538
}
5639
-
5740
{isOpenSource ? <span class="text-blue-500"> OpenSource</span> : ""}
58-
{isDevelopment ? <span class="text-orange-500"> Development</span> : ""}
41+
{isDevelopment ? <span class="text-orange-500"> En desarrollo</span> : ""}
5942
</p>
6043
</div>
6144
</div>

‎src/pages/cv.astro

Lines changed: 7 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import HystoricalWork from "../components/cv/HystoricalWork.astro";
55
import Education from "../components/cv/Education.astro";
66
77
import "../styles/global.css";
8+
import ActionButton from "../components/cv/ActionButton.astro";
89
---
910

1011
<Layout>
@@ -25,45 +26,18 @@ import "../styles/global.css";
2526
<div class="col-span-2 text-center">
2627
<h1 class="text-4xl font-bold mb-4">DIEGO MARTÍN SÁNCHEZ</h1>
2728
<p class="text-lg mb-4">Desarrollador Full Stack</p>
28-
<a
29-
href="mailto:[email protected]"
30-
class="inline-flex bg-amber-400 rounded-lg py-2 px-3 hover:bg-white hover:text-amber-400 text-gray-800"
31-
>
32-
<svg
33-
width="24"
34-
height="24"
35-
viewBox="0 0 24 24"
36-
xmlns="http://www.w3.org/2000/svg"
37-
>
38-
<path
39-
fill="#000000"
40-
d="M4 20q-.825 0-1.413-.588T2 18V6q0-.825.588-1.413T4 4h16q.825 0 1.413.588T22 6v12q0 .825-.588 1.413T20 20H4Zm8-7L4 8v10h16V8l-8 5Zm0-2l8-5H4l8 5ZM4 8V6v12V8Z"
41-
></path>
42-
</svg>
43-
</a>
44-
<a
29+
<ActionButton href="mailto:[email protected]" type="mail" />
30+
<ActionButton
4531
href="https://drive.google.com/file/d/1lwfWgMuhKMw3itSNp5XhdggaO4xoXbRT/view?usp=drive_link"
46-
class="inline-flex bg-amber-400 rounded-lg py-2 px-3 hover:bg-white hover:text-amber-400 text-gray-800 ml-2"
47-
>
48-
<svg
49-
width="24"
50-
height="24"
51-
viewBox="0 0 24 24"
52-
xmlns="http://www.w3.org/2000/svg"
53-
>
54-
<path
55-
fill="#000000"
56-
d="m12 16l-5-5l1.4-1.45l2.6 2.6V4h2v8.15l2.6-2.6L17 11l-5 5Zm-6 4q-.825 0-1.413-.588T4 18v-3h2v3h12v-3h2v3q0 .825-.588 1.413T18 20H6Z"
57-
></path>
58-
</svg>
59-
</a>
32+
type="download"
33+
/>
6034
</div>
6135

6236
<div class="col-span-3">
6337
<h2 class="text-3xl font-bold mb-4">SOBRE MI</h2>
6438
<p class="text-md mb-2">
6539
Apasionado por las soluciones tecnológicas y el desarrollo de
66-
aplicaciones robustas. Siempre buscando innovar y mantenerse a la
40+
aplicaciones robustas. Siempre buscando innovar y mantenerme a la
6741
última de las tendencias en desarrollo web. Comprometido con la
6842
entrega de soluciones óptimas y eficientes.
6943
</p>
@@ -160,7 +134,7 @@ import "../styles/global.css";
160134
<CvProjects
161135
title="WEB PERSONAL"
162136
body="Web personal realizada con Astro.js, que incluye mi información personal, mi curriculum y un pequeño blog generado desde archivos md."
163-
href="Diegomarty.com"
137+
href="https://Diegomarty.com"
164138
isPublic={true}
165139
isOpenSource={true}
166140
/>

0 commit comments

Comments
 (0)