-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathgraphics.html
135 lines (126 loc) · 7.48 KB
/
graphics.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="apple-touch-icon" sizes="180x180" href="images/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon/favicon-16x16.png">
<link rel="manifest" href="images/favicon/site.webmanifest">
<title>Graphics | Ryan's Portfolio</title>
</head>
<body id="graphics-body">
<nav>
<ul class="navigation">
<li><a class="menu" href="#" ><img id="hamburger-icon" src="images/icons/hamburger-icon.png" alt="hamburger menu icon"></a></li>
<li><a class="nav-link" href="index.html">HOME</a></li>
<li><a class="nav-link" href="projects.html">PROJECTS</a></li>
<li><a class="nav-link active-page" href="#">GRAPHICS</a></li>
<li><a class="nav-link" href="about-me.html">ABOUT ME</a></li>
</ul>
<!-- <a href="downloads/ryan-bey-resume-2022-v2.pdf" download><button id="nav-button">DOWNLOAD RESUME</button></a> -->
</nav>
<header class="subpage-header"></header>
<main class="subpage-main">
<section id="logos">
<div class="section-content">
<h3 class="section-heading">LOGOS</h3>
<div class="divider"></div>
<p>Some of my favorite logos I've made over the years. These were made for YouTube and Twitch channels.</p>
<div class="logos-container">
<img src="images/logos/logo-r3mix.jpg" loading="lazy" alt="r3mix logo">
<img src="images/logos/logo-cidrec.jpg" loading="lazy" alt="cidrec logo">
<img src="images/logos/logo-aakara.jpg" loading="lazy" alt="aakara logo">
<img src="images/logos/logo-r3.jpg" loading="lazy" alt="r3 logo">
<img src="images/logos/logo-fruit-punch.jpg" loading="lazy" alt="fruit punch logo">
</div>
</div>
</section>
<section id="banners" class="gray-bg">
<div class="section-content">
<h3 class="section-heading">BANNERS</h3>
<div class="divider"></div>
<p>Some YouTube banners.</p>
<div class="banners-container">
<img src="images/banners/banner-r3mix.jpg" loading="lazy" alt="r3mix banner">
<img src="images/banners/banner-fd.jpg" loading="lazy" alt="fd banner">
<img src="images/banners/banner-r3.jpg" loading="lazy" alt="r3 banner">
</div>
</div>
</section>
<section id="iracing" class="black-bg">
<div class="section-content">
<h3 class="section-heading">IRACING</h3>
<div class="divider"></div>
<p>I occasionally paint cars for the online racing simulator, iRacing. This consists of applying my designs to 2D templates with specular map layers for surface material roughness and reflectivity.</p>
<div class="iracing-container">
<div class="iracing-grid-1">
<img class="iracing-1" src="images/iracing/iracing-new.jpg" loading="lazy" alt="iracing new paint psd">
<img class="iracing-2" src="images/iracing/iracing-new-spec.jpg" loading="lazy" alt="iracing new paint spec map">
<img class="iracing-3" src="images/iracing/iracing-new-large.jpg" loading="lazy" alt="iracing new paint large image">
</div>
<div class="iracing-grid-2">
<img class="iracing-1" src="images/iracing/iracing-old.jpg" loading="lazy" alt="iracing old paint psd">
<img class="iracing-2" src="images/iracing/iracing-old-spec.jpg" loading="lazy" alt="iracing old paint spec map">
<img class="iracing-3" src="images/iracing/iracing-old-large.jpg" loading="lazy" alt="iracing old paint large image">
</div>
</div>
</div>
</section>
<section id="other" class="gray-bg">
<div class="section-content">
<h3 class="section-heading">OTHER</h3>
<div class="divider"></div>
<p>Below is a complete rebrand I worked on for a fan made music streaming iOS app. Also some random polyscapes.</p>
<div class="other-container">
<img id="other-1" src="images/other/other-badkitty.jpg" loading="lazy" alt="badkitty rebrand image">
<img id="other-2" src="images/other/other-forest.jpg" loading="lazy" alt="dark forest polyscape">
<img id="other-3" src="images/other/other-sunset.jpg" loading="lazy" alt="sunset ocean polyscape">
</div>
</div>
</section>
</main>
<footer>
<section id="my-info" class="turq-bg">
<div id="my-info-content" class="section-content">
<h3 class="section-heading">LINKS</h3>
<div class="divider"></div>
<div class="social-item">
<img class="social-icon" src="images/icons/facebook-icon.png" alt="facebook icon">
<a href="https://www.facebook.com/beycommaryan" target="_blank">Facebook</a>
</div>
<div class="social-item">
<img class="social-icon" src="images/icons/linkedin-icon.png" alt="linkedin icon">
<a href="https://www.linkedin.com/in/ryanbey/" target="_blank">LinkedIn</a>
</div>
<div class="social-item">
<img class="social-icon" src="images/icons/portfolium-icon.png" alt="linkedin icon">
<a href="https://portfolium.com/ryanbey" target="_blank">Portfolium</a>
</div>
<div class="social-item">
<img class="social-icon" src="images/icons/github-icon.png" alt="github icon">
<a href="https://github.com/ryanbey" target="_blank">GitHub</a>
</div>
<p id="copyright">© 2022 Ryan Bey</p>
<a id="icons" href="https://icons8.com/icons" target="_blank">Icons by Icons8.com</a>
</div>
</section>
<section id="contact-me" class="black-bg">
<div id="contact-me-content" class="section-content">
<h3 class="section-heading">CONTACT ME</h3>
<div class="divider"></div>
<form class="contact-form-grid" method="post" action="https://forms.un-static.com/forms/887712dbb9f4996032a18818df45a9331f4ab1fe">
<input type="text" id="name" name="name" class="contact-form-box" placeholder="Name" required>
<input type="email" id="email" name="email" class="contact-form-box" placeholder="Email" required>
<textarea id="message" name="Message" class="contact-form-box" rows="5" maxlength="3000" placeholder="Message" required></textarea>
<button type="submit" id="submit-button">SUBMIT</button>
</form>
</div>
</section>
</footer>
<script src="js/toggle-menu.js"></script>
</body>
</html>