-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
180 lines (152 loc) · 8.24 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
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<link rel="stylesheet" href="https://use.typekit.net/sss4zjx.css">
<link rel="stylesheet" href="assets/css/styles.css">
<meta name="theme-color" content="#FFFFFF">
<!-- =====BOX ICONS===== -->
<link href='https://cdn.jsdelivr.net/npm/boxicons@2.0.5/css/boxicons.min.css' rel='stylesheet'>
<title>Xavier Jones</title>
</head>
<body>
<!--===== HEADER =====-->
<header class="l-header">
<nav class="nav bd-grid">
<div>
<a href="#" class="nav__logo">Xavier Jones</a>
</div>
<div class="nav__menu" id="nav-menu">
<ul class="nav__list">
<li class="nav__item"><a href="#home" class="nav__link active">Home</a></li>
<li class="nav__item"><a href="#about" class="nav__link">About</a></li>
<li class="nav__item"><a href="#skills" class="nav__link">Skills</a></li>
<li class="nav__item"><a href="#work" class="nav__link">Work</a></li>
<li class="nav__item"><a href="#contact" class="nav__link">Contact</a></li>
</ul>
</div>
<div class="nav__toggle" id="nav-toggle">
<i class='bx bx-menu'></i>
</div>
</nav>
</header>
<main class="l-main">
<!--===== HOME =====-->
<section class="home bd-grid" id="home">
<div class="home__data">
<h1 class="home__title">Hi,<br>I'm <span class="home__title-color">Xavier</span><br>App Developer</h1>
<a href="#contact" class="button">Send me an email</a>
</div>
<div class="home__social">
<a href="https://www.linkedin.com/in/xavierjonesuxui/" class="home__social-icon"><i class='bx bxl-linkedin'></i></a>
<a href="https://twitter.com/xavierjonesco?s=20" class="home__social-icon"><i class='bx bxl-twitter' ></i></a>
<a href="https://github.com/xavjones8" class="home__social-icon"><i class='bx bxl-github' ></i></a>
</div>
<div class="home__img">
<img src="assets/img/blob.png" alt="">
</div>
</section>
<!--===== ABOUT =====-->
<section class="about section " id="about">
<h2 class="section-title">About</h2>
<div class="about__container bd-grid">
<div class="about__img">
<img src="assets/img/NY.png" alt="">
</div>
<div>
<h2 class="about__subtitle">I'm Xavier</h2>
<p class="about__text">
I'm a high school senior. I've been interested in computer science for over 6 years now. I've spent those years exploring the various specializations involved in computer science.
I've found that I really enjoy developing applications and websites. Taking ideas and concepts from my head and being able to realize them is incredibly satisfying.
I hope to obtain a bachelor's degree in computer science and continue my growth as a developer in whatever way I see fit afterwards.
</p>
</div>
</div>
</section>
<!--===== SKILLS =====-->
<section class="skills section" id="skills">
<h2 class="section-title">Skills</h2>
<div class="skills__container bd-grid">
<div>
<h2 class="skills__subtitle">What Do I Know?</h2>
<p class="skills__text">YouTubers like Dev Ed and Bring Your Own Laptop have been so helpful in my efforts to learn how to
develop apps and websites. I'm currently learning Flutter through Skillshare.
</p>
<div class="skills__data">
<div class="skills__names">
<i class='bx bxl-html5 skills__icon'></i><i class='bx bxl-css3 skills__icon'></i><i class='bx bxl-javascript skills__icon' ></i>
<span class="skills__name">Web Development</span>
</div>
</div>
<div class="skills__data">
<div class="skills__names">
<i class='bx bxl-android skills__icon'></i><i class='bx bx-coffee skills__icon'></i>
<span class="skills__name">Android Development</span>
</div>
</div>
<div class="skills__data">
<div class="skills__names">
<i class='bx bxl-adobe skills__icon' ></i>
<span class="skills__name">Adobe Suite</span>
</div>
</div>
<div class="skills__data">
<div class="skills__names">
<i class='bx bxl-microsoft skills__icon'></i>
<span class="skills__name">Office 365</span>
</div>
</div>
</div>
</div>
</section>
<!--===== WORK =====-->
<section class="work_section" id="work">
<h2 class="section-title">Work</h2>
<div class="work__container bd-grid">
<div class="work__img">
<a href="keep-notes-android.html#v1.5">
<img src="assets/img/Blob10.23.png" alt="">
</a>
<h1>Keep Notes for Android</h1>
</div>
<div class="work__img">
<a href="keep-notes-desktop.html">
<img src="assets/img/test.png" alt="">
</a>
<h1>Keep Notes for Windows</h1>
</div>
<div class="work__img">
<a href="portfolio-site.html"><img src="assets/img/betterblob2.png" alt=""></a>
<h1>Portfolio Site</h1>
</div>
</div>
</section>
<!--===== CONTACT =====-->
<section class="contact-section" id="contact">
<h2 class="section-title">Contact</h2>
<!--
<div class="contact__container bd-grid">
<form action="" class="contact__form">
<input type="text" placeholder="Name" class="contact__input">
<input type="mail" placeholder="Email" class="contact__input">
<textarea name="" id="" cols="0" rows="10" class="contact__input"></textarea>
<input type="button" value="Send" class="contact__button button">
</form>
</div>-->
<!-- form.123formbuilder.com script begins here -->
<script type="text/javascript" defer src="https://form.123formbuilder.com/embed/5741582.js" data-role="form" data-default-width="650px"></script>
<!-- form.123formbuilder.com script ends here -->
</section>
</main>
<!--===== FOOTER =====-
<footer class="footer">
<p class="footer__title">Xavier Jones</p>
</footer>
-->
<!--===== SCROLL REVEAL =====-->
<script src="https://unpkg.com/scrollreveal"></script>
<!--===== MAIN JS =====-->
<script src="assets/js/main.js"></script>
</body>
</html>