-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathportfolio.html
137 lines (122 loc) · 4.93 KB
/
portfolio.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta lang="en">
<title>MaFo5 - Portfolio</title>
<meta name="description" content="These are my offers.">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="stylesheets/dark.css" />
<style>
body {
--color-success-darker: #00421b;
--color-success: #007E33;
--color-success-lighter: #00C851;
--color-error-darker: #cc000080;
--color-error: #CC0000;
--color-error-lighter: #FF4444;
--color-disabled: #555555;
--color-money: #FFD700;
font-family: "Arial Rounded MT Regular", "Helvetica Rounded", Arial, sans-serif;
display: grid;
grid-gap: 1rem;
justify-content: center;
align-content: start;
}
h1 {
font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
}
header {
font-size: 2rem;
text-align: center;
font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
}
section {
display: grid;
align-content: stretch;
grid-gap: 2rem;
grid-template-columns: repeat( auto-fill, minmax(250px, 1fr) );
}
article {
display: grid;
grid-template-rows: min-content min-content auto min-content;
grid-gap: 0.5rem;
grid-template-columns: auto;
padding: 1rem;
border-radius: 0.5rem;
box-shadow: 0rem 0rem 0.5rem 0.1rem rgba(255,255,255,0.5);
overflow: hidden;
word-break: break-word;
}
article p, article h1 {
padding: 0;
margin: 0;
}
article a {
align-self: end;
}
article img {
min-height: 8rem;
width: 100%;
border-radius: 0.2rem;
background-color: rgba(255,255,255,0.2);
}
title {
display: block;
}
small {
font-size: 0.5rem;
}
</style>
</head>
<body>
<header>
Portfolio
</header>
<section>
<article data-url="ux-mentorship.com">
<img src="" alt="">
<h1>PEERS</h1>
<p>A mentoring community dedicated to designers</p>
<a class="small" target="_blank" href="#" rel="noopener noreferrer">visit</a>
</article>
<article data-url="heroforfun.app">
<img src="" alt="">
<h1>Hero For Fun App</h1>
<p>A saitama workout tracking app for iOS in SwiftUI</p>
<a class="small" target="_blank" href="#" rel="noopener noreferrer">visit</a>
</article>
<article data-url="martin.fochler.info/api-monitor">
<img src="" alt="">
<h1>API Monitor</h1>
<p>A page to monitor REST API changes over time</p>
<a class="small" target="_blank" href="#" rel="noopener noreferrer">visit</a>
</article>
<article data-url="github.com/mafo5/simpleAWS#simple-aws-tutorial">
<img src="" alt="">
<h1>Simple AWS</h1>
<p>A step by step tutorial to get a simple application into Amazon Web Services (AWS)</p>
<a class="small" target="_blank" href="#" rel="noopener noreferrer">visit</a>
</article>
</section>
</body>
<script type="text/javascript">
const articleList = Array.from(document.getElementsByTagName('article'));
articleList.forEach((element) => {
const url = element.dataset && element.dataset.url;
if (url) {
console.log('fetch', url)
fetch(`//api.linkpreview.net/?key=93f54feadda59861bbb129acf0b08ed2&q=${url}`)
.then((response) => response.json())
.then((metaData) => {
element.getElementsByTagName('h1')[0].innerHTML = metaData.title;
element.getElementsByTagName('p')[0].innerHTML = metaData.description;
element.getElementsByTagName('a')[0].href = metaData.url;
element.getElementsByTagName('a')[0].innerHTML = metaData.url;
element.getElementsByTagName('img')[0].src = metaData.image;
})
.catch((err) => console.error(`error for url: ${url}`,err));
}
})
</script>
</html>