-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
144 lines (140 loc) · 7.14 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>James Perrone - Portfolio</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://use.typekit.net/lfd4dqh.js"></script>
<script>
try {
Typekit.load({
async: true
});
} catch (e) {}
</script>
<link rel="stylesheet" href="css/main.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="site_wrapper">
<div class="top_bar"></div>
<header id="main_header">
<div class="content_wrapper center">
<div class="logo">
<h1><a href="#"><img src="images/logo.png" alt=""></a></h1>
</div>
<nav id="main_navigation">
<div class="menu">
<i class="fa fa-bars"></i>
</div>
<div class="overlay">
<a class="close"><i class="fa fa-times"></i></a>
<div class="overlay_content">
<a href="#" class="menu_item">Home</a>
<hr>
<a href="#portfolio_section" class="menu_item">Portfolio</a>
<hr>
<a href="#about_section" class="menu_item">About Me</a>
<hr>
<a href="#footer_section" class="menu_item">Contact</a>
</div>
</div>
<ul class="social_media">
<a href="https://www.facebook.com/jamespeter.perronejefferies" class="social_icon"><i class="fa fa-facebook"></i></a>
<a href="https://twitter.com/james__perrone" class="social_icon"><i class="fa fa-twitter"></i></a>
</ul>
</nav>
<h1 class="titel">James Peter Perrone Jefferies is a Dutch </br> <a href="#" class="typewrite" data-period="2000" data-type='["designer", "developer", "photographer"]'><span class="typewrite_wrapper"></span></a> student raised in Sao Paulo & currently living in <span>Almere</span> Amsterdam</h1>
<hr>
<p class="lead">"Creativity is allowing yourself to make mistakes. Design is knowing which ones to keep." <small>-Scott Adams</small></p>
</div>
</header>
<main>
<div class="content_wrapper center">
<section id="about_section">
<h2 class="heading">About Me</h2>
<hr>
<article>
<p class="lead">I am currently a student of the <a href="http://www.hva.nl/">Amsterdam University of Applied Sciences</a>.</p>
<img src="images/profile.jpg" class="profile_picture" alt="Profile Picture">
<p>I'm a heavily focused all-rounder with skills in digital design, UX/UI design, web design, front-end development, graphic design and animation.</p>
<p>My passion for design and development continues to grow and my skills are constantly evolving in many areas of the design industry. Whether it be for a simple chat, or about a potential project, please feel free to <a href="#footer_section">contact me.</a></p>
</article>
<a href="#" class="button">download my cv</a>
</section>
<section id="portfolio_section">
<h2 class="heading">Portfolio</h2>
<hr>
<article>
<p class="lead">Click on the pictures for more information.</p>
<div class="flip">
<div class="card">
<div class="face front work_1">
</div>
<div class="face back">
<p>Project 3: <a href="portfolio/work_1.html">Read More</a></p>
</div>
</div>
</div>
<div class="flip">
<div class="card">
<div class="face front work_2">
</div>
<div class="face back">
<p>James Reddit: <a href="portfolio/work_2.html">Read More</a></p>
</div>
</div>
</div>
<div class="flip">
<div class="card">
<div class="face front work_3">
</div>
<div class="face back">
<p>Project 2: <a href="portfolio/work_3.html">Read More</a></p>
</div>
</div>
</div>
<div class="flip">
<div class="card">
<div class="face front work_4">
</div>
<div class="face back">
<p>Game of War: <a href="portfolio/work_4.html">Read More</a></p>
</div>
</div>
</div>
<div class="flip">
<div class="card">
<div class="face front work_5">
</div>
<div class="face back">
<p>Restaurant Website: <a href="portfolio/work_5.html">Read More</a></p>
</div>
</div>
</div>
<div class="flip">
<div class="card">
<div class="face front work_6">
</div>
<div class="face back">
<p>Music Player: <a href="portfolio/work_6.html">Read More</a></p>
</div>
</div>
</div>
</article>
</section>
</div>
</main>
</div>
<div style="clear: both;"></div>
<footer id="footer_section">
<a href="mailto:[email protected]" class="button">@ say hello</a>
</footer>
<div class="bottom_bar"></div>
<a href="#" class="scroll_top"><i class="fa fa-angle-up"></i></a>
<script src="https://code.jquery.com/jquery-3.0.0.min.js" integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0=" crossorigin="anonymous"></script>
<script src="js/app.js" charset="utf-8"></script>
<script src="js/menu.js" charset="utf-8"></script>
</body>
</html>