generated from 11ty/eleventy-base-blog
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
170 lines (155 loc) · 6.3 KB
/
index.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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>I am Justin</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #f0f2f5;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen, Ubuntu, Cantarell, sans-serif;
}
@media (min-width: 768px) {
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
}
.card {
background: white;
border-radius: 15px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
padding: 2rem;
max-width: 400px;
width: calc(100% - 4rem);
text-align: center;
margin: 0 auto;
}
.profile-image {
width: 150px;
height: 150px;
border-radius: 50%;
margin-bottom: 1.5rem;
object-fit: cover;
}
.name {
font-size: 1.5rem;
font-weight: bold;
margin-bottom: 0.5rem;
color: #1a1a1a;
}
.bio {
color: #666;
margin-bottom: 1.5rem;
line-height: 1.6;
}
.social-links {
display: flex;
justify-content: center;
gap: 1.5rem;
}
.social-links a {
color: #000000;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
transition: color 0.3s ease;
}
.social-links a:hover {
color: #666666;
}
.social-links a:hover svg rect {
fill: #666666;
}
.social-links svg {
width: 24px;
height: 24px;
}
/* Mobile styles */
@media (max-width: 768px) {
body {
background-color: white;
}
.card {
box-shadow: none;
border-radius: 0;
max-width: none;
padding: 1rem;
width: calc(100% - 2rem);
}
}
</style>
</head>
<body>
<div class="card">
<!-- Using the local image -->
<img src="profile.jpg" alt="Profile Picture" class="profile-image" />
<!-- Replace with your name -->
<h1 class="name">Justin</h1>
<!-- Add your bio here -->
<p class="bio">
A passionate developer who loves tech and developer experience. Always
learning and sharing knowledge with the community.
</p>
<div class="social-links">
<a
href="https://medium.com/@iamjustin"
target="_blank"
rel="noopener noreferrer"
aria-label="Visit my Medium profile"
>
<svg width="24" height="24" viewBox="0 0 1024 1024" fill="none">
<rect width="1024" height="1024" rx="179.649" fill="black" />
<path
fill="white"
d="M1024 704.736V797.736C1018.16 798.3 1012.16 798.588 1006 798.588C896.061 798.588 834.166 707.016 831.497 592.432C831.418 588.002 831.448 583.6 831.546 579.228C831.606 576.501 831.714 573.783 831.852 571.075C831.921 569.628 831.989 568.269 832.098 566.753C832.206 565.236 832.315 563.72 832.443 562.204C836.401 511.613 852.687 466.594 879.568 433.284C896.267 412.606 916.334 396.852 939.09 386.316C959.078 376.253 987.17 370.699 1010.07 370.699H1011.06C1015.4 370.699 1019.71 370.844 1024 371.13V396.717C1019.45 395.47 1014.58 394.801 1009.4 394.715C963.086 395.67 935.486 451.145 932.049 528.007H1024V549.669H929.972L929.942 549.689C925.703 624.579 966.692 687.87 1024 704.736Z"
/>
<path
fill="white"
d="M836.115 244.625L836.923 244.448V238.195H672.014L518.891 598.084L365.768 238.195H188.059V244.448L188.857 244.625C218.957 251.419 234.239 261.551 234.239 298.091V725.872C234.239 762.412 218.898 772.544 188.798 779.338L188 779.516V785.788H308.57V779.535L307.773 779.358C277.672 772.564 262.39 762.432 262.39 725.892V322.905L459.093 785.788H470.249L672.683 309.996V736.457C670.104 765.317 654.96 774.228 627.705 780.382L626.897 780.569V786.773H836.923V780.569L836.115 780.382C808.831 774.228 793.322 765.317 790.743 736.457L790.605 298.091H790.743C790.743 261.551 806.024 251.419 836.115 244.625Z"
/>
</svg>
</a>
<a
href="https://github.com/jstnjs"
target="_blank"
rel="noopener noreferrer"
aria-label="Visit my GitHub profile"
>
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"
/>
</svg>
</a>
<a
href="https://bsky.app/profile/iamjustin.dev"
target="_blank"
rel="noopener noreferrer"
aria-label="Visit my BlueSky profile"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="24"
height="24"
>
<path
fill="currentColor"
d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565C.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479c.815 2.736 3.713 3.66 6.383 3.364q.204-.03.415-.056q-.207.033-.415.056c-3.912.58-7.387 2.005-2.83 7.078c5.013 5.19 6.87-1.113 7.823-4.308c.953 3.195 2.05 9.271 7.733 4.308c4.267-4.308 1.172-6.498-2.74-7.078a9 9 0 0 1-.415-.056q.21.026.415.056c2.67.297 5.568-.628 6.383-3.364c.246-.828.624-5.79.624-6.478c0-.69-.139-1.861-.902-2.206c-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8"
/>
</svg>
</a>
</div>
</div>
</body>
</html>