-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
157 lines (157 loc) · 13.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
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
<!DOCTYPE html>
<html lang="en">
<head>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Damian Vila - Designer from Madrid, Spain</title>
<!-- Icons -->
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" sizes="180x180" href="icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
<link rel="manifest" href="icons/site.webmanifest">
<!-- SEO -->
<meta name="author" content="Damian Vila">
<meta name="description" content="Website of Damian Vila - Designer from Madrid, Spain">
<meta name="keywords" content="damian, vila, spain, graphic, web, design, gui, ui, interface, ux, experience, illustration, opinion, ideas, articles, portfolio, works, projects">
<meta itemprop="name" content="Damian Vila">
<meta itemprop="description" content="Website of Damian Vila - Designer from Madrid, Spain">
<meta itemprop="image" content="images/seo-image-design.jpg">
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@vilaindustries">
<meta name="twitter:title" content="Damian Vila - Designer from Madrid, Spain">
<meta name="twitter:description" content="Website of Damian Vila - Designer from Madrid, Spain">
<meta name="twitter:creator" content="@vilaindustries">
<meta name="twitter:image:src" content="images/seo-image-design.jpg">
<!-- OpenGraph -->
<meta property="og:title" content="Damian Vila - Designer from Madrid, Spain">
<meta property="og:type" content="website">
<meta property="og:url" content="https://damianvila.github.io">
<meta property="og:image" content="images/seo-image-design.jpg">
<meta property="og:description" content="Website of Damian Vila - Designer from Madrid, Spain">
<meta property="og:site_name" content="Damian Vila">
<!-- Preloads -->
<link rel="preload" href="css/icons.css" as="style">
<link rel="preload" href="css/styles.css" as="style">
<link rel="preload" href="js/scripts.js" as="script">
<!-- Styles -->
<link rel="stylesheet" href="css/icons.css">
<link rel="stylesheet" href="css/styles.css">
<!-- Theme -->
<meta name="theme-color" content="#fa0557">
</head>
<body class="home no-menu no-lang design"><!-- home | no-menu | no-lang | design/industries/effectors/pinball/micro/atelier/books -->
<section class="hero mini"><!-- mini -->
<header>
<div class="wrap">
<h1 class="logo-title" title="Vila Design">
<a href="/" class="logo-link">
<svg viewBox="0 0 274 274" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" class="logo">
<path d="M135.599 9.904c70.146 0 127.096 56.95 127.096 127.096s-56.95 127.096-127.096 127.096S8.503 207.146 8.503 137 65.453 9.904 135.599 9.904Zm0 25.434C79.491 35.338 33.937 80.891 33.937 137c0 56.109 45.554 101.662 101.662 101.662 56.109 0 101.662-45.553 101.662-101.662 0-56.109-45.553-101.662-101.662-101.662Z" class="logo-ring ring-1"/>
<path d="M135.599 35.338c56.109 0 101.662 45.553 101.662 101.662 0 56.109-45.553 101.662-101.662 101.662-56.108 0-101.662-45.553-101.662-101.662 0-56.109 45.554-101.662 101.662-101.662Zm0 25.434c-42.071 0-76.227 34.157-76.227 76.228s34.156 76.228 76.227 76.228c42.071 0 76.228-34.157 76.228-76.228s-34.157-76.228-76.228-76.228Z" class="logo-ring ring-2"/>
<path d="M135.599 60.772c42.071 0 76.228 34.157 76.228 76.228s-34.157 76.228-76.228 76.228S59.372 179.071 59.372 137s34.156-76.228 76.227-76.228Zm0 25.434c-28.034 0-50.793 22.76-50.793 50.794 0 28.034 22.759 50.794 50.793 50.794s50.794-22.76 50.794-50.794c0-28.034-22.76-50.794-50.794-50.794Z" class="logo-ring ring-3"/>
<circle cx="135.599" cy="137" r="50.794" class="logo-ring ring-4"/>
<path d="m148.495 182.71-9.789-16.999c-.42-.73-.779-1.498-1.072-2.297l-.006-.017c-.703-1.935-.687-2.475-.864-4.504a6.434 6.434 0 0 1-.023-.538v-50.252a7.286 7.286 0 0 1 7.287-7.287h14.967a7.283 7.283 0 0 1 6.312 3.642c.62 1.072 8.545 14.837 9.802 17.024a7.247 7.247 0 0 1 .966 3.628v18.545l1.012.003 20.519-35.533c.09-.157.187-.309.291-.457 1.39-1.985 3.045-3.755 5.12-4.952 5.215-3.008 12.256-2.403 16.886 1.489 1.581 1.329 1.837 1.807 3.005 3.48.103.148.2.3.29.457l9.718 16.88.075.127 31.605 54.899a6.757 6.757 0 0 1-5.856 10.128h-17.869a7.836 7.836 0 0 1-6.792-3.927l-9.708-16.864-.085-.143-4.117-7.151-11.985 20.756a6.788 6.788 0 0 1-.291.457l-.859 1.226a6.279 6.279 0 0 1-.697.83c-1.092 1.091-2.243 2.135-3.575 2.902l-.005.003a14.798 14.798 0 0 1-4.834 1.748h-.002c-.67.117-1.354.139-2.031.196-.179.015-.36.023-.54.022l-34.088-.098a6.508 6.508 0 0 1-.541-.025l-1.484-.134a6.277 6.277 0 0 1-1.061-.19c-1.965-.531-2.501-.611-4.283-1.645l-.012-.008a14.83 14.83 0 0 1-5.386-5.421Zm82.583-15.747h17.869a.55.55 0 0 0 .477-.826l-31.605-54.899c-.756-1.083-.887-1.422-1.91-2.282-2.685-2.257-6.768-2.608-9.791-.863-1.292.745-2.272 1.899-3.137 3.135l-21.844 37.829a1.631 1.631 0 0 1-1.417.815l-18.566-.053a1.082 1.082 0 0 1-1.078-1.081v-40.635c0-.597-.484-1.081-1.081-1.081h-14.967c-.597 0-1.081.484-1.081 1.081v50.252c.115 1.313.06 1.671.515 2.924a8.626 8.626 0 0 0 3.753 4.484c1.153.669 1.516.678 2.788 1.022l1.484.134 34.088.098c.497-.041 1-.041 1.492-.126a8.582 8.582 0 0 0 2.804-1.014c.863-.497 1.579-1.209 2.286-1.915l.859-1.226 16.76-29.023a.703.703 0 0 1 1.218.001l18.671 32.432c.291.505.83.817 1.413.817Z" class="logo-shadow"/>
<path d="M48.078 165.992a5.324 5.324 0 0 1-.076-.127l-31.604-54.899a6.754 6.754 0 0 1 5.856-10.128h17.868a7.835 7.835 0 0 1 6.792 3.927l9.709 16.864c.028.047.057.095.084.143l4.117 7.151 11.985-20.756c.091-.156.188-.309.292-.457l.858-1.226a6.21 6.21 0 0 1 .698-.83c1.091-1.091 2.242-2.135 3.574-2.902l.005-.003a14.798 14.798 0 0 1 4.834-1.748h.002c.67-.117 1.354-.139 2.031-.196.18-.015.36-.023.54-.022l34.088.098c.181.001.361.009.541.025l1.484.134a6.26 6.26 0 0 1 1.061.19c1.965.531 2.501.611 4.283 1.645l.013.008a14.839 14.839 0 0 1 5.378 5.407l9.794 17.009c.421.731.781 1.5 1.074 2.301l.006.017c.703 1.935.687 2.475.864 4.504.016.179.023.358.023.538v50.252a7.286 7.286 0 0 1-7.287 7.287h-14.967a7.284 7.284 0 0 1-6.327-3.669c-.611-1.066-8.532-14.812-9.79-17.001a7.253 7.253 0 0 1-.963-3.624v-18.545l-1.012-.003-20.519 35.533c-.09.157-.187.309-.291.457-1.39 1.985-3.045 3.755-5.12 4.952-5.215 3.008-12.256 2.403-16.886-1.489-1.581-1.329-1.837-1.807-3.005-3.48-.103-.148-.2-.3-.29-.457l-9.717-16.88Zm-7.956-58.948H22.254a.55.55 0 0 0-.478.825l31.605 54.9c.756 1.082.887 1.421 1.911 2.282 2.684 2.257 6.767 2.607 9.79.863 1.293-.745 2.272-1.9 3.137-3.136l21.845-37.828a1.628 1.628 0 0 1 1.416-.815l18.566.053a1.081 1.081 0 0 1 1.078 1.081v40.635c0 .597.484 1.081 1.081 1.081h14.967c.597 0 1.081-.484 1.081-1.081v-50.252c-.114-1.313-.059-1.671-.514-2.924a8.634 8.634 0 0 0-3.754-4.485c-1.153-.669-1.516-.678-2.787-1.021l-1.485-.134-34.088-.099c-.497.042-1 .041-1.491.127a8.564 8.564 0 0 0-2.805 1.014c-.863.497-1.579 1.208-2.286 1.915l-.859 1.226-16.76 29.023a.703.703 0 0 1-1.218-.001l-18.67-32.432a1.633 1.633 0 0 0-1.414-.817Z" class="logo-shadow"/>
<path d="M231.078 166.963a1.632 1.632 0 0 1-1.413-.817l-18.671-32.432a.704.704 0 0 0-1.218-.001l-16.76 29.023-.859 1.226c-.707.706-1.423 1.418-2.286 1.915a8.582 8.582 0 0 1-2.804 1.014c-.492.085-.995.085-1.492.126l-34.088-.098-1.484-.134c-1.272-.344-1.635-.353-2.788-1.022a8.626 8.626 0 0 1-3.753-4.484c-.455-1.253-.4-1.611-.515-2.924v-50.252c0-.597.484-1.081 1.081-1.081h14.967c.597 0 1.081.484 1.081 1.081v40.635c0 .595.482 1.079 1.078 1.081l18.566.053a1.631 1.631 0 0 0 1.417-.815l21.844-37.829c.865-1.236 1.845-2.39 3.137-3.135 3.023-1.745 7.106-1.394 9.791.863 1.023.86 1.154 1.199 1.91 2.282l31.605 54.899a.55.55 0 0 1-.477.826h-17.869ZM40.122 107.044c.584 0 1.122.312 1.414.817l18.67 32.432a.702.702 0 0 0 1.218.001l16.76-29.023.859-1.226c.707-.707 1.423-1.418 2.286-1.915a8.564 8.564 0 0 1 2.805-1.014c.491-.086.994-.085 1.491-.127l34.088.099 1.485.134c1.271.343 1.634.352 2.787 1.021a8.634 8.634 0 0 1 3.754 4.485c.455 1.253.4 1.611.514 2.924v50.252c0 .597-.484 1.081-1.081 1.081h-14.967a1.081 1.081 0 0 1-1.081-1.081v-40.635c0-.596-.482-1.079-1.078-1.081l-18.566-.053a1.628 1.628 0 0 0-1.416.815l-21.845 37.828c-.865 1.236-1.844 2.391-3.137 3.136-3.023 1.744-7.106 1.394-9.79-.863-1.024-.861-1.155-1.2-1.911-2.282l-31.605-54.9a.551.551 0 0 1 .478-.825h17.868Z" s class="logo-shape"/>
</svg>
</a>
</h1>
</div>
</header>
</section>
<section class="intro">
<div class="wrap">
<h2 class="sub-title">Welcome!</h2>
<p class="text">My name is <a href="https://github.com/damianvila" class="link">Damian Vila</a>, and I'm a Graphic Designer from Madrid, Spain. You can find a bit more at my <a href="https://damianvila.com" rel="external" class="link">website</a>. Thanks for the visit!</p>
</div>
</section>
<section class="projects">
<div class="wrap">
<h2 class="sub-title">Repositories</h2>
<p class="text">Here's a list of my current repositories on GitHub.</p>
<!-- Design -->
<ul class="projects-list"><!-- center -->
<li class="projects-item">
<a href="https://github.com/damianvila/font-bescii" class="projects-link" rel="external" title="link">
<span class="projects-img-cont"><img src="work/fonts/bescii.png" class="projects-image" alt="Bescii"></span>
<span class="projects-description">
<span class="projects-title">Bescii</span>
<span class="projects-text">Pixel font — 2021</span>
</span>
</a>
</li>
<li class="projects-item">
<a href="https://github.com/damianvila/font-atascii" class="projects-link" rel="external" title="link">
<span class="projects-img-cont"><img src="work/fonts/atascii.png" class="projects-image" alt="Atascii"></span>
<span class="projects-description">
<span class="projects-title">Atascii</span>
<span class="projects-text">Pixel font — 2021</span>
</span>
</a>
</li>
<li class="projects-item">
<a href="https://github.com/damianvila/font-cpc464" class="projects-link" rel="external" title="link">
<span class="projects-img-cont"><img src="work/fonts/cpc464.png" class="projects-image" alt="CPC 464"></span>
<span class="projects-description">
<span class="projects-title">CPC 464</span>
<span class="projects-text">Pixel font — 2021</span>
</span>
</a>
</li>
<li class="projects-item">
<a href="https://github.com/damianvila/font-lexis" class="projects-link" rel="external" title="link">
<span class="projects-img-cont"><img src="work/fonts/lexis.png" class="projects-image" alt="Lexis"></span>
<span class="projects-description">
<span class="projects-title">Lexis</span>
<span class="projects-text">HP 100LX pixel font — 2021</span>
</span>
</a>
</li>
</ul>
</div>
</section>
<section class="social">
<div class="wrap">
<ul class="social-list">
<li class="social-item social-projects">
<a href="https://www.youtube.com/@vilaindustries" rel="external" class="social-link icon-youtube">Youtube</a>
</li>
<li class="social-item social-projects">
<a href="https://instagram.com/vilaindustries" rel="external" class="social-link icon-instagram">Instagram</a>
</li>
<li class="social-item social-projects">
<a href="https://mastodon.social/@vilaindustries" rel="me" class="social-link icon-mastodon">Mastodon</a>
</li>
<li class="social-item social-personal">
<a href="https://dribbble.com/damianvila" rel="external" class="social-link icon-dribbble">Dribbble</a>
</li>
<li class="social-item social-personal">
<a href="https://github.com/damianvila" rel="external" class="social-link icon-github">GitHub</a>
</li>
<li class="social-item social-personal">
<a href="https://mastodon.social/@dmian" rel="me" class="social-link icon-mastodon">Mastodon</a>
</li>
<li class="social-item social-personal">
<a href="https://www.youtube.com/@damianvila" rel="external" class="social-link icon-youtube">Youtube</a>
</li>
</ul>
</div>
</section>
<footer>
<div class="wrap">
<span class="footer-copy">© 2024<strong> <a href="https://vilaindustries.com" class="link link-projects">Vila Industries</a><a href="https://damianvila.com" class="link link-personal">Damian Vila</a></strong></span>
<div class="lang">
<a href="index.html" class="lang_item active"><abbr title="English">EN</abbr></a>
<a href="index.es.html" class="lang_item"><abbr title="Español">ES</abbr></a>
<a href="index.ja.html" class="lang_item">日本語</a>
</div>
</div>
</footer>
<!-- Scripts -->
<script src="js/scripts.js" defer></script>
</body>
</html>