Skip to content

Commit 6f1c767

Browse files
ivanceaivancea
committed
Center and add icons on every link
1 parent a23ca02 commit 6f1c767

File tree

8 files changed

+120
-72
lines changed

8 files changed

+120
-72
lines changed

‎CV/snapshot.html‎

Lines changed: 11 additions & 11 deletions
Large diffs are not rendered by default.

‎lib/generators/leftColumn/contactItemGenerator.ts‎

Lines changed: 6 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,17 @@
1-
import { assets } from "../../assets";
1+
import { makeLink } from "../../links";
22
import { generatorFrom } from "../../utils";
33

44
export const generateContactItem = generatorFrom(async function* (contactItem: {
55
type: string;
66
URL: string;
77
}) {
8-
yield `
9-
<div class="left-column__contact-item">
10-
<a class="left-column__contact-item-link" href="${contactItem.URL}" target="_blank">
11-
`;
12-
13-
if (contactItem.type === "github") {
14-
yield `<img src="${await assets.githubIcon}" alt="GitHub">`;
15-
} else if (contactItem.type === "twitter") {
16-
yield `<img src="${await assets.twitterIcon}" alt="Twitter">`;
17-
} else if (contactItem.type === "linkedin") {
18-
yield `<img src="${await assets.linkedinIcon}" alt="LinkedIn">`;
19-
}
8+
const link = await makeLink(contactItem.URL);
209

2110
yield `
22-
<span>${decodeURI(contactItem.URL.replace(/https?:\/\//, ""))}</span>
11+
<div class="left-column__contact-item">
12+
<a class="left-column__contact-item-link" href="${link.url}" target="_blank">
13+
<img src="${link.icon}" alt="${link.alt}">
14+
<span>${link.text}</span>
2315
</a>
2416
</div>
2517
`;

‎lib/generators/rightColumn/highlightsGenerator.ts‎

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { Highlight } from "../../mac";
44
import { generatorFrom, sortByDates } from "../../utils";
55
import { generateSkills } from "../common/skillsGenerator";
66
import { generateTypeLabels } from "../common/typeLabelGenerator";
7+
import { makeLink } from "../../links";
78

89
export const generateHighlights = generatorFrom(async function* (highlights: Highlight[]) {
910
if (highlights.length) {
@@ -23,10 +24,7 @@ export const generateHighlights = generatorFrom(async function* (highlights: Hig
2324
imageAlt = details.image.alt;
2425
}
2526

26-
let urlText = "";
27-
if (details.URL) {
28-
urlText = `${decodeURI(details.URL.replace(/https?:\/\//, ""))}`;
29-
}
27+
const link = await makeLink(details.URL);
3028

3129
yield `
3230
<div class="right-column__highlight">
@@ -38,17 +36,15 @@ export const generateHighlights = generatorFrom(async function* (highlights: Hig
3836
</div>
3937
</div>
4038
${
41-
urlText || details.description
39+
link || details.description
4240
? `
4341
<div class="right-column__highlight-details">
4442
${
45-
urlText
43+
link
4644
? `
47-
<a class="right-column__highlight-details-url" href="${
48-
details.URL
49-
}" target="_blank">
50-
<img class="right-column__highlight-details-url-icon" src="${await assets.linkIcon}" alt="Link" />
51-
${urlText}
45+
<a class="right-column__highlight-details-url" href="${link.url}" target="_blank">
46+
<img class="right-column__highlight-details-url-icon" src="${link.icon}" alt="${link.alt}" />
47+
${link.text}
5248
</a>
5349
`
5450
: ""
@@ -69,7 +65,7 @@ export const generateHighlights = generatorFrom(async function* (highlights: Hig
6965
${
7066
highlight.publishingDate
7167
? `<div class="right-column__highlight-date">${new Date(
72-
highlight.publishingDate
68+
highlight.publishingDate,
7369
).toLocaleDateString("en-US", { month: "2-digit", year: "numeric" })}</div>`
7470
: ""
7571
}

‎lib/generators/rightColumn/jobsGenerator.ts‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { assets } from "../../assets";
2+
import { makeLink } from "../../links";
23
import { Job } from "../../mac";
34
import { generatorFrom, sortByDates } from "../../utils";
45
import { generateRoles } from "../common/rolesGenerator";
@@ -36,10 +37,12 @@ export const generateJobs = generatorFrom(async function* (jobs: Job[]) {
3637
`;
3738

3839
if (organization.URL) {
40+
const link = await makeLink(organization.URL);
41+
3942
yield `
40-
<a class="right-column__job-organization-url" href="${organization.URL}" target="_blank">
41-
<img class="right-column__job-organization-url-icon" src="${await assets.linkIcon}" alt="Link">
42-
${decodeURI(organization.URL.replace(/https?:\/\//, ""))}
43+
<a class="right-column__job-organization-url" href="${link.url}" target="_blank">
44+
<img class="right-column__job-organization-url-icon" src="${link.icon}" alt="${link.alt}">
45+
${link.text}
4346
</a>
4447
`;
4548
}

‎lib/generators/rightColumn/projectsGenerator.ts‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { Project } from "../../mac";
44
import { generatorFrom, sortByDates } from "../../utils";
55
import { generateRoles } from "../common/rolesGenerator";
66
import { generateTypeLabels } from "../common/typeLabelGenerator";
7+
import { makeLink } from "../../links";
78

89
export const generateProjects = generatorFrom(async function* (projects: Project[]) {
910
if (projects.length) {
@@ -23,10 +24,7 @@ export const generateProjects = generatorFrom(async function* (projects: Project
2324
imageAlt = details.image.alt as string;
2425
}
2526

26-
let urlText = "";
27-
if (details?.URL) {
28-
urlText = `${decodeURI(details.URL.replace(/https?:\/\//, ""))}`;
29-
}
27+
const link = await makeLink(details?.URL);
3028

3129
yield `
3230
<div class="right-column__project">
@@ -38,15 +36,15 @@ export const generateProjects = generatorFrom(async function* (projects: Project
3836
</div>
3937
</div>
4038
${
41-
urlText || details?.description
39+
link || details?.description
4240
? `
4341
<div class="right-column__project-details">
4442
${
45-
urlText
43+
link
4644
? `
47-
<a class="right-column__project-details-url" href="${details?.URL}" target="_blank">
48-
<img class="right-column__project-details-url-icon" src="${await assets.linkIcon}" alt="Link" />
49-
${urlText}
45+
<a class="right-column__project-details-url" href="${link.url}" target="_blank">
46+
<img class="right-column__project-details-url-icon" src="${link.icon}" alt="${link.alt}" />
47+
${link.text}
5048
</a>
5149
`
5250
: ""

‎lib/generators/rightColumn/studiesGenerator.ts‎

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { Study } from "../../mac";
44
import { generatorFrom, sortByDates } from "../../utils";
55
import { generateSkills } from "../common/skillsGenerator";
66
import { generateTypeLabels } from "../common/typeLabelGenerator";
7+
import { makeLink } from "../../links";
78

89
export const generateStudies = generatorFrom(async function* (studies: Study[]) {
910
if (studies.length) {
@@ -34,10 +35,12 @@ export const generateStudies = generatorFrom(async function* (studies: Study[])
3435
`;
3536

3637
if (institution?.URL) {
38+
const link = await makeLink(institution.URL);
39+
3740
yield `
38-
<a class="right-column__study-institution-url" href="${institution.URL}" target="_blank">
39-
<img class="right-column__study-institution-url-icon" src="${await assets.linkIcon}" alt="Link">
40-
${decodeURI(institution.URL.replace(/https?:\/\//, ""))}
41+
<a class="right-column__study-institution-url" href="${link.url}" target="_blank">
42+
<img class="right-column__study-institution-url-icon" src="${link.icon}" alt="${link.alt}">
43+
${link.text}
4144
</a>
4245
`;
4346
}
@@ -51,16 +54,16 @@ export const generateStudies = generatorFrom(async function* (studies: Study[])
5154
month: "2-digit",
5255
year: "numeric",
5356
})} ${
54-
study.finishDate
55-
? " - " +
56-
new Date(study.finishDate).toLocaleDateString("en-US", {
57-
month: "2-digit",
58-
year: "numeric",
59-
})
60-
: study.studyType !== "certification"
61-
? " - Present"
62-
: ""
63-
}
57+
study.finishDate
58+
? " - " +
59+
new Date(study.finishDate).toLocaleDateString("en-US", {
60+
month: "2-digit",
61+
year: "numeric",
62+
})
63+
: study.studyType !== "certification"
64+
? " - Present"
65+
: ""
66+
}
6467
</div>
6568
<div class="common__role-title">
6669
${study.name}

‎lib/links.ts‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import { assets } from "./assets";
2+
3+
type LinkData = {
4+
url: string;
5+
text: string;
6+
icon: string;
7+
alt: string;
8+
};
9+
10+
export async function makeLink(url: string): Promise<LinkData>;
11+
export async function makeLink(url?: string): Promise<LinkData | undefined>;
12+
export async function makeLink(url?: string): Promise<LinkData | undefined> {
13+
if (!url) {
14+
return undefined;
15+
}
16+
17+
return {
18+
url: url,
19+
text: `${decodeURI(url.replace(/https?:\/\//, ""))}`,
20+
...(await iconForUrl(url)),
21+
};
22+
}
23+
24+
async function iconForUrl(url: string) {
25+
if (url.includes("github.com")) {
26+
return {
27+
icon: await assets.githubIcon,
28+
alt: "GitHub",
29+
};
30+
}
31+
32+
if (url.includes("twitter.com")) {
33+
return {
34+
icon: await assets.twitterIcon,
35+
alt: "Twitter",
36+
};
37+
}
38+
39+
if (url.includes("linkedin.com")) {
40+
return {
41+
icon: await assets.linkedinIcon,
42+
alt: "LinkedIn",
43+
};
44+
}
45+
46+
return {
47+
icon: await assets.linkIcon,
48+
alt: "Link",
49+
};
50+
}

‎sass/right-column.scss‎

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -70,14 +70,15 @@
7070
}
7171

7272
.right-column__job-organization-url {
73-
display: block;
73+
@include linear-layout(row, 1em, $center: true);
74+
7475
font-size: 0.8em;
7576
text-decoration: none;
7677
color: #55a;
7778

7879
.right-column__job-organization-url-icon {
79-
width: 1em;
80-
height: 1em;
80+
width: 1.2em;
81+
height: 1.2em;
8182
object-fit: contain;
8283
}
8384
}
@@ -132,14 +133,15 @@
132133
}
133134

134135
.right-column__study-institution-url {
135-
display: block;
136+
@include linear-layout(row, 1em, $center: true);
137+
136138
font-size: 0.8em;
137139
text-decoration: none;
138140
color: #55a;
139141

140142
.right-column__study-institution-url-icon {
141-
width: 1em;
142-
height: 1em;
143+
width: 1.2em;
144+
height: 1.2em;
143145
object-fit: contain;
144146
}
145147
}
@@ -195,13 +197,15 @@
195197
margin-bottom: 1em;
196198

197199
.right-column__project-details-url {
200+
@include linear-layout(row, 1em, $center: true);
201+
198202
font-size: 0.8em;
199203
text-decoration: none;
200204
color: #55a;
201205

202206
.right-column__project-details-url-icon {
203-
width: 1em;
204-
height: 1em;
207+
width: 1.2em;
208+
height: 1.2em;
205209
object-fit: contain;
206210
}
207211
}
@@ -262,13 +266,15 @@
262266
margin-bottom: 1em;
263267

264268
.right-column__highlight-details-url {
269+
@include linear-layout(row, 1em, $center: true);
270+
265271
font-size: 0.8em;
266272
text-decoration: none;
267273
color: #55a;
268274

269275
.right-column__highlight-details-url-icon {
270-
width: 1em;
271-
height: 1em;
276+
width: 1.2em;
277+
height: 1.2em;
272278
object-fit: contain;
273279
}
274280
}

0 commit comments

Comments
 (0)