-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
105 lines (82 loc) · 11.2 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jakub Steiner</title>
<meta name="title" content="Jakub Steiner">
<!--
<meta itemprop="name" content="Jakub Steiner">
<meta itemprop="description" content="Illustrations & UX Design">
-->
<meta name="description" content="Illustrations & UX Design">
<!-- Twitter -->
<meta property="twitter:title" content="Jakub Steiner">
<meta property="twitter:image" content="https://jimmac.eu/assets/img/card.png" />
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:description" content="Jakub Steiner: Illustrator & UX Designer">
<!-- Open Graph -->
<meta property="og:title" content="Jakub Steiner">
<meta property="og:url" content="https://jimmac.eu" rel="me">
<meta property="og:description" content="Jakub Steiner: Illustrator & UX Designer">
<meta property="og:image" content="https://jimmac.eu/assets/img/card.png">
<link rel="stylesheet" type="text/css" href="assets/css/main.css">
<link rel="icon" type="image/gif" href="/assets/img/favicon.gif" />
<link rel="apple-touch-icon" href="/assets/img/apple-touch-icon.png" sizes="180x180">
<link rel="me" href="https://mastodon.social/@jimmac">
</head>
<body>
<a class="splash" href="#socialicons">
<img alt="avatar" src="assets/img/jimmac.svg">
</a>
<h1>Jakub Steiner</h1>
<h2 class="title">Illustration, UX Design</h2>
<section class="intro">
<h2>Bio</h2>
<p>With over 20 years of experience, working for <a href="https://en.wikipedia.org/wiki/Ximian">Ximian</a>, <a href="https://en.wikipedia.org/wiki/Novell">Novell</a>, <a href="https://www.suse.com/">SUSE</a> and <a href="http://redhat.com">Red Hat</a>. I've helped shape the design of <a href="http://forty.gnome.org">GNOME</a>.</p>
<p>I invite you to dive deeper into my prototyping, icon design, and motion design work at <a href="https://developer.gnome.org/hig/">GNOME</a>. I like <a href="https://www.youtube.com/watch?v=sMdIYyGLNbA">racing fpv drones</a>. I occassionally write a <a href="https://blog.jimmac.eu" rel="me">blog post</a>. I enjoy taking <a href="https://photo.jimmac.eu" rel="me">photos</a> and love <a href="https://music.jimmac.eu/" rel="me">making music</a>.</p>
</section>
<div class="thegrid">
<img alt="" src="/assets/img/portfolio/initial-setup-welcome.svg" class="four">
<!-- gtk website -->
<img alt="" src="/assets/img/portfolio/wall-features.svg" class="two">
<img alt="" src="/assets/img/portfolio/wall-404.svg" class="two">
<!--app icons -->
<img alt="" src="/assets/img/portfolio/org.gimp.GIMP.svg" class="whitespaced">
<img alt="" src="/assets/img/portfolio/org.mypaint.Mypaint.svg" class="whitespaced">
<img alt="" src="/assets/img/portfolio/org.gnome.SoundRecorder.svg" class="whitespaced">
<img alt="" src="/assets/img/portfolio/org.gnome.Connections.svg" class="whitespaced">
<!-- motion mockups -->
<video id="video" autoplay="autoplay" loop="loop" muted="muted" class="four" preload="auto" playsinline>
<source src="/assets/img/portfolio/pan-sliding-app-grid.webm" type="video/webm">
<source src="/assets/img/portfolio/pan-sliding-app-grid.mp4" type="video/mp4">
</video>
<!-- hairline style -->
<img alt="" src="/assets/img/portfolio/hairlines2.svg" class="four">
<!-- wallpaper-->
<img alt="" src="/assets/img/portfolio/wall.jpg" class="four">
<!--oldschool icons -->
<img alt="" src="/assets/img/portfolio/gimp.png">
<img alt="" src="/assets/img/portfolio/inkscape.png">
<img alt="" src="/assets/img/portfolio/photos.png">
<img alt="" src="/assets/img/portfolio/mypaint.png">
<!--pixel animations -->
<img alt="" src="/assets/img/portfolio/159-gimp.gif">
<img alt="" src="/assets/img/portfolio/160-mypaint.gif">
<img alt="" src="/assets/img/portfolio/157-icons.gif">
<img alt="" src="/assets/img/portfolio/158-builder.gif">
</div>
<div class="icons" id="socialicons">
<!--<a href="http://twitter.com/jimmac" class="socials" rel="me"><svg id="twitter" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#fff" d="M14.967 2.01c-.58.348-1.199.619-1.895.735-.542-.58-1.315-.967-2.166-.967-1.624 0-2.978 1.354-2.978 3.055 0 .232.039.465.078.697-2.476-.116-4.641-1.354-6.11-3.172-.272.464-.388.967-.388 1.547 0 1.044.542 1.973 1.315 2.553-.503 0-.928-.155-1.353-.387v.039c0 1.47 1.005 2.707 2.397 2.978a2.494 2.494 0 01-.773.116c-.193 0-.387 0-.541-.04.386 1.2 1.47 2.09 2.784 2.128a5.838 5.838 0 01-3.674 1.315c-.232 0-.464 0-.696-.039a8.33 8.33 0 004.563 1.354c5.453 0 8.47-4.641 8.47-8.663v-.387a5.753 5.753 0 001.47-1.586c-.542.233-1.122.426-1.702.465.503-.426.967-1.006 1.199-1.74z"/></svg></a>-->
<a href="https://mastodon.social/@jimmac" class="socials" rel="me"><svg viewBox="0 0 16 16" id="mastodon" xmlns="http://www.w3.org/2000/svg"><path d="M7.478 0C5.56.016 3.716.223 2.64.717c0 0-2.132.954-2.132 4.208 0 .745-.015 1.636.009 2.58.077 3.183.583 6.319 3.525 7.098 1.357.359 2.522.434 3.46.382 1.7-.094 2.656-.607 2.656-.607l-.057-1.234s-1.215.383-2.58.337c-1.353-.047-2.781-.146-3-1.807a3.406 3.406 0 0 1-.03-.466s1.328.325 3.01.402c1.03.047 1.994-.06 2.974-.177 1.88-.225 3.516-1.383 3.722-2.44.324-1.668.297-4.068.297-4.068 0-3.254-2.132-4.208-2.132-4.208C11.288.223 9.443.016 7.525 0Zm-2.17 2.542c.798 0 1.403.308 1.803.922l.389.651.389-.651c.4-.614 1.005-.922 1.803-.922.69 0 1.247.243 1.672.717.412.473.617 1.113.617 1.918v3.94H10.42V5.293c0-.806-.34-1.215-1.018-1.215-.75 0-1.126.485-1.126 1.445v2.093H6.724V5.523c0-.96-.376-1.445-1.126-1.445-.678 0-1.018.409-1.018 1.215v3.824H3.02v-3.94c0-.805.204-1.445.616-1.918.425-.474.981-.717 1.672-.717Z" /></svg></a>
<a href="http://instagram.com/jimmacfx" class="socials"><svg id="instagram" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#fff" d="M13.322 1.004H2.683c-.915 0-1.677.724-1.677 1.64V13.32c0 .915.762 1.64 1.677 1.64h10.64c.914 0 1.677-.725 1.677-1.64V2.643c-.038-.877-.763-1.64-1.678-1.64zm-2.288 2.211c0-.229.19-.42.42-.42h1.296c.229 0 .42.191.42.42v1.297c0 .229-.191.42-.42.42h-1.296a.423.423 0 01-.42-.42zm-3.05 2.136c1.487 0 2.707 1.182 2.707 2.669s-1.22 2.67-2.707 2.67a2.653 2.653 0 01-2.67-2.67 2.653 2.653 0 012.67-2.67zm5.799 7.893c0 .229-.19.42-.42.42H2.76a.423.423 0 01-.42-.42V6.685h1.754c-.229.343-.305.954-.305 1.335 0 2.326 1.907 4.233 4.271 4.233s4.27-1.907 4.27-4.233c0-.381-.037-.992-.342-1.335h1.754z"/></svg></a>
<a href="http://dribbble.com/jimmac" class="socials" rel="me"><svg id="dribbble" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#fff" d="M14.426 5.284a7.149 7.149 0 00-.65-1.186 7.598 7.598 0 00-.842-1.032c-.306-.306-.65-.612-1.032-.842a7.149 7.149 0 00-1.186-.65c-.42-.191-.88-.306-1.3-.421C8.955 1.077 8.496 1 8 1c-.459 0-.956.038-1.415.153-.46.077-.88.23-1.3.42-.422.192-.804.383-1.187.651a7.598 7.598 0 00-1.032.842c-.306.306-.612.65-.842 1.032a7.149 7.149 0 00-.65 1.186c-.191.42-.306.88-.421 1.3C1.077 7.045 1 7.504 1 8c0 .459.038.956.153 1.415.077.46.23.88.42 1.3.192.422.383.804.651 1.187.268.382.536.726.842 1.032.306.306.65.612 1.032.842.383.268.765.459 1.186.65.42.191.88.306 1.3.421.46.115.919.153 1.416.153.459 0 .956-.038 1.415-.153.46-.077.88-.23 1.3-.42.422-.192.804-.383 1.187-.651a7.598 7.598 0 001.032-.842c.306-.306.612-.65.842-1.032.268-.383.459-.765.65-1.186.191-.42.306-.88.421-1.3.076-.46.153-.919.153-1.416 0-.459-.038-.956-.153-1.415-.115-.421-.23-.88-.42-1.3zM7.962 2.033c1.53 0 2.907.574 3.94 1.492 0 .038-.88 1.338-3.137 2.18C7.732 3.83 6.623 2.339 6.508 2.224a6.602 6.602 0 011.454-.191zm-1.416.153c0 .038 0 .038 0 0 0 .038 0 .038 0 0-.038.038 0 .038 0 0zm-1.147.42c.076.115 1.186 1.607 2.218 3.443-2.868.765-5.355.727-5.546.727.42-1.836 1.683-3.366 3.328-4.17zm-1.874 9.41A5.95 5.95 0 011.995 8v-.191c.114 0 3.06.076 6.158-.842.153.344.344.689.497 1.033-.076.038-.153.038-.23.076-3.25 1.033-4.895 3.94-4.895 3.94zm4.437 1.99a6.099 6.099 0 01-3.749-1.301c-.038 0-.038-.038-.076-.077l.076.077a.118.118 0 00.077.038s1.147-2.486 4.705-3.748h.038c.841 2.18 1.186 4.016 1.262 4.551-.688.306-1.492.46-2.333.46zm3.366-1.033c-.077-.345-.383-2.104-1.148-4.284 1.951-.306 3.596.229 3.749.267-.306 1.683-1.262 3.137-2.601 4.017zM9.798 7.77c-.038-.114-.077-.19-.115-.306-.115-.306-.268-.573-.382-.88 2.371-.956 3.327-2.37 3.327-2.37a6.166 6.166 0 011.377 3.748c-.114-.039-2.142-.46-4.207-.192z"/></svg></a>
<a href="http://vimeo.com/jimmacfx" class="socials"><svg id="vimeo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#fff" d="M12.966 2.014C11.021 1.938 9.725 3.044 9 5.256a2.517 2.517 0 011.03-.229c.724 0 1.03.381.953 1.182-.038.496-.343 1.183-.953 2.098C9.458 9.222 9 9.68 8.695 9.68c-.382 0-.725-.687-1.03-2.098-.114-.42-.305-1.449-.572-3.165-.267-1.564-.915-2.289-2.021-2.212-.458.038-1.144.457-2.06 1.258-.686.61-1.335 1.183-2.021 1.793l.648.839c.61-.42.992-.648 1.106-.648.496 0 .916.762 1.335 2.25.381 1.373.763 2.746 1.144 4.08.572 1.488 1.259 2.213 2.06 2.213 1.335 0 2.936-1.22 4.843-3.662 1.831-2.326 2.784-4.157 2.86-5.53.115-1.792-.571-2.708-2.02-2.784z"/></svg></a>
<a href="http://twitch.tv/jimmacfx" class="socials" rel="me"><svg id="twitch" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g fill="#f6f5f4"><path d="M3.183 2.287v8.923H6.25v1.69l.1-.091c.516-.5 1.035-1 1.549-1.502a.325.325 0 01.25-.1c1.073.003 2.144.003 3.216-.003.078 0 .176-.04.232-.094.67-.638 1.33-1.284 1.996-1.925a.306.306 0 00.102-.244c-.003-2.166-.003-4.331-.003-6.498v-.156H3.182zm1.33 12.703v-1.671h-3.49c-.004-.07-.01-.125-.01-.18 0-3.143 0-6.286.002-9.43 0-.09.018-.185.047-.271.256-.76.521-1.516.777-2.275.033-.1.076-.135.188-.135 4.271.004 8.542.003 12.814.003h.143v.174c0 2.71 0 5.42.002 8.13a.34.34 0 01-.116.27 1110.46 1110.46 0 00-3.71 3.597.36.36 0 01-.28.113c-.75-.006-1.503 0-2.255-.007a.445.445 0 00-.349.138c-.496.491-1 .976-1.504 1.458-.048.046-.124.092-.187.093-.672.006-1.344.003-2.015.003-.015 0-.03-.005-.057-.01"/><path d="M7.993 4.858V8.63H6.697V4.86h1.296m3.487 3.775h-1.273V4.858h1.273v3.776"/></g></svg></a>
<a href="https://music.jimmac.eu" class="socials" rel="me"><svg viewBox="0 0 16 16" id="music" xmlns="http://www.w3.org/2000/svg"><path d="M8 1C6.355 1 5 2.355 5 4v4.344A3.465 3.465 0 0 0 3.5 8C1.578 8 0 9.578 0 11.5S1.578 15 3.5 15c1.914 0 3.492-1.57 3.5-3.48V4c0-.563.438-1 1-1h4c.563 0 1 .438 1 1v4.344A3.465 3.465 0 0 0 11.5 8C9.578 8 8 9.578 8 11.5S9.578 15 11.5 15s3.5-1.578 3.5-3.5V4c0-1.645-1.355-3-3-3zm-4.5 9c.84 0 1.5.66 1.5 1.5v.016A1.485 1.485 0 0 1 3.5 13c-.84 0-1.5-.66-1.5-1.5S2.66 10 3.5 10zm8 0c.84 0 1.5.66 1.5 1.5s-.66 1.5-1.5 1.5-1.5-.66-1.5-1.5.66-1.5 1.5-1.5zm0 0"/></svg></a>
<a href="https://photo.jimmac.eu" class="socials" rel="me"><svg viewBox="0 0 16 16"class="socials" xmlns="http://www.w3.org/2000/svg" id="photos"><path d="M8 5C6.355 5 5 6.355 5 8s1.355 3 3 3 3-1.355 3-3-1.355-3-3-3zm0 2c.563 0 1 .438 1 1s-.438 1-1 1-1-.438-1-1 .438-1 1-1zM3 1s-.457-.016-.95.23C1.563 1.477 1 2.168 1 3v3h2V3h3V1zM10 1v2h3v3h2V3c0-.832-.563-1.523-1.05-1.77C13.456.984 13 1 13 1zM1 10v3c0 .832.563 1.523 1.05 1.77.493.246.95.23.95.23h3v-2H3v-3zM13 10v3h-3v2h3s.457.016.95-.23c.488-.247 1.05-.938 1.05-1.77v-3zm0 0" /></svg></a>
</div><!--icons-->
<!-- explicit mastodon link -->
<a rel="me" class="hide" href="https://mastodon.social/@jimmac">Mastodon</a>
</body>
</html>