-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathabout.html
105 lines (105 loc) · 7.5 KB
/
about.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 lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=880,maximum-scale=1,minimum-scale=.4">
<meta name="author" content="Barry Cap">
<meta name="description" content="The official website of Barry Cap. You can find on this site my different works in domains like image, video, 3D, music… and many cool sorts of things.">
<link rel="icon" href="/assets/favicon.ico">
<link rel="icon" href="/assets/favicon.svg">
<link rel="stylesheet" href="styles.css">
<link rel="manifest" href="manifest.json">
<script src="googleanalytics.js"></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-GY5Q2KLJ19"></script>
<script async src="script.js"></script>
<title>Barry Cap › About</title>
</head>
<body class="about">
<div>
<a href="./">
<svg viewBox="0 0 320 50" width="780" height="122" class="header-svg">
<style>
.header-svg{stroke:#fff;stroke-width:10;transition-duration:.2s;mix-blend-mode:difference}
.header-svg:hover{stroke:#f88;stroke-width:7.5}
.header-svg:active{stroke:#f00;stroke-width:5}
</style>
<title>Barry Cap</title>
<path fill="none" d="M5 5h10a5 5 0 110 20h-10h10a5 5 0 110 20h-10v-40zM45 25v25v-35a5 5 0 1120 0v35v-25zM85 50v-45h10a5 5 0 110 20h-10h10a10 10 0 0110 10v15M125 50v-45h10a5 5 0 110 20h-10h10a10 10 0 0110 10v15M165 0v20a5 5 0 005 5h5v25v-25h5a5 5 0 005-5v-20M240 5h-10a15 15 0 00-15 15v10a15 15 0 0015 15h10M255 25v25v-35a5 5 0 1120 0v35v-25zM295 50v-45h10a5 5 0 110 20h-10"/>
</svg>
</a>
<div class="txt">
<p class="button-container">
<a class="button" href="home">Home</a>
<a class="button" href="works">Works</a>
<a class="button" href="about">About</a>
<a class="button" href="random">Random</a>
</p>
<h3 class="sub-title" style="background:#f004">About</h3>
<p id="me" class="sub-txt img-title">About Barry Cap</p>
<p class="sub-txt">Barry Cap (Barthélemy C. A. Perez, sometimes called by his initials BCAP) is a French graphic designer, musician (mostly electronic) and artist in sorts of ways.<br></p>
<p id="this-site" class="sub-txt img-title">About <a target="_blank" href="https://barrycap.com/">this site</a></p>
<p class="sub-txt">
I coded this site myself. I learned how to code with tutorials on <a target="_blank" href="https://developer.mozilla.org/">MDN Web Docs</a> and <a target="_blank" href="https://www.w3schools.com/">W3Schools</a> and forums on <a target="_blank" href="https://stackoverflow.com/">Stack Overflow</a>.<br>
Current <a href="versions">version</a>: <code id="v">1.6+1195</code>.<br>
</p>
<p id="this-font" class="sub-txt img-title">About this font</p>
<br>
</div>
<a target="_blank" href="images/FMBtrns.png">
<img src="thumbnails/FMBtrns.png" alt="Future Menu Brown preview" title="Future Menu Brown preview" width="419" height="419"/>
</a>
<a target="_blank" href="images/FMBrst.png">
<img src="thumbnails/FMBrst.png" alt="Future Menu Brown rst ligature" title="Future Menu Brown rst ligature in FontForge" width="357" height="419"/>
</a>
<div class="txt">
<p class="sub-txt">I build the typography of this site (Future Menu Brown) with <a target="_blank" href="https://fontforge.org/">FontForge</a>, since april 2020. It covers a large set of characters with this geometric minimalist aspect inspired by the Bauhaus movement, and more precisely, by the works of Paul Renner and designers from <a target="_blank" href="https://lineto.com/">Lineto</a>.</p>
<p class="sub-txt">If you have any questions or any requests to ask, you can contact me with the form below.</p>
</div>
<form action="https://postmail.invotes.com/send"
method="post" id="email_form">
<input type="text" name="subject" placeholder="Name or email" required/>
<br>
<textarea name="text" placeholder="Message" required></textarea>
<input type="hidden" name="access_token" value="lxhekdbbnthg5zjinccvt7tj"/>
<input type="hidden" name="success_url" value="https://barrycap.com/about/email-sent"/>
<input type="hidden" name="error_url" value="https://barrycap.com/about/email-not-sent"/>
<br>
<input class="input-button" id="submit_form" type="submit" value="Send" onclick="invalidInput()"/>
</form>
<div class="txt left-txt">
<p class="em">I’ve always been passionate about <i>art</i>. All sorts of <i>art</i>. Since I first saw that humans could create things, I fell in love with the only thing I could ever fall in love with: <b style="font-variant:small-caps">Art</b>. This magical thing we all call ‘art’ is my only reason for living.</p>
<p class="em">I remember when I was a kid, my teacher told me that <i>I could never pass middle school</i>, and now that I think about it, I realize that maybe I shouldn’t have passed it. After middle school, there was high school—and it was the most horrible thing I encountered in my short life.</p>
<p class="em">In the past two years I have been sorely lacking in time, frustrated in my creations. Too much <b>homework</b>. Too much <b>pain</b>. Too many projects I launched without having enough <b>time</b>. Not enough <b>time</b>. Not enough <b>time</b>… When I repeat this in my head, I notice that it always was a fear. Not having enough time…</p>
<p class="em">Some people often tell me this: Are you really interested in <i>art</i>? Because every time we suggest you go to museums, read magazines, take a look at what today’s <i>art</i> looks like, you’re telling us that you’re not interested. And I tell them that I’m not <i>interested</i> in <b>this</b> kind of <i>art</i>, generally the most famous type—<i>seen and reviewed</i>.</p>
<p class="em">I want to <b>explore</b> <i>art</i>. I want to discover and even create my own sorts of <i>art</i>. I want to show to the world that <i>art</i> isn’t just <i>painting</i> or <i>piano covers</i>. I want to create <i>something</i> <b>different</b>. Something new in this old world.</p>
</div>
<div class="txt">
<p class="sub-txt">
You can also send me an email at <a href="mailto:contact@barrycap.com">contact@barrycap.com</a>.<br>
<br>
The form was made with <a href="https://postmail.invotes.com" target="_blank">PostMail</a>.
</p>
</div>
</div>
<div class="button-help-container" title="Help">
<a class="button-help" href="/help">
<svg viewBox="0 0 40 40" fill="none" stroke="#fff" stroke-width="3">
<path d="M20,2 a1 1 0 010,36 a1 1 0 010,-36z m-8,13 a8 8 0 118,8 v6"/>
<circle cx="20" cy="33" r=".5"/>
</svg>
</a>
</div>
<footer>
<img class="img-footer" src="/assets/smile.svg" alt=":)" width="780" height="186">
<div class="footer-wide">
<p class="footer-table-copyright">© 2022 <a href="/">Barry Cap</a></p>
<nav class="footer-table">
<a class="footer-table-button button" href="/help">Help</a>
<a class="footer-table-button button" href="/contributing">Contribution guidelines</a>
<a class="footer-table-button button" href="/license">License</a>
<a class="footer-table-button button" target="_blank" href="https://github.com/BarryCap/BarryCap.github.io">GitHub</a>
</nav>
</div>
</footer>
</body>
</html>