-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
129 lines (121 loc) · 6.17 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
<!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">
<title>China Gaines | Front-end Developer</title>
<link rel="shortcut icon" type="image/jpg" href="projicons/angle-left.svg" />
<!-- fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bad+Script&display=swap" rel="stylesheet">
<!-- styles -->
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div class="webpage">
<!-- dark gray, white, and gold with parallax scrolling using js-->
<!-- landing page -->
<header class="header">
<!-- logo -->
<h1 class="vertalign">chinagaines.<span id="cursor">|</span></h1>
<!-- nav bar -->
<nav>
<ul>
<li><a href="www.chinagaines.com">home</a></li>
<li><a href="www.chinagaines.com/portfolio">portfolio</a></li>
<li><a href="www.chinagaines.com/contact">contact</a></li>
</ul>
</nav>
</header>
<!-- introduction text on right hand side -->
<main class="maintext">
<!-- <div class="intro-section"> -->
<h3 class="colorswitch1">01. introduction.</h3>
<!-- <img class="headshot s-headshot" src="images/Person.jpg"> -->
<!-- </div> -->
<!-- image on left hand side -->
<div class="headshot-container">
<img class="headshot l-headshot" src="images/Portrait.jpg">
<div class="navigation">
<!-- dem socials: insta, linkedin, and github -->
<a href="https://www.instagram.com/chiiiina01/"><img class="socials" src="images/instagram.png"></a>
<a href="https://www.linkedin.com/in/chinagaines/"><img class="socials"
src="images/linkedin.png"></a>
<a href="https://github.com/mschinagaines"><img class="socials" src="images/github.png"></a>
</div>
</div>
<div class="intro-body">
<h3 class="title">Front-End Developer and <br> <a class=" colorswitch3"
href="https://www.shecodes.io/graduates/41000-china-gaines">SheCodes Graduate</a>,<br> Based
in
North Carolina</h3>
<div class="cards intro">
<span>
<img class="icon" src="projicons/graduation-cap.svg">
<h4>Graduated in 2021</h4>
</span>
<span>
<img class="icon" src="projicons/calendar-clock.svg">
<h4>2+ Years of Experience</h4>
</span>
<span>
<img class="icon" src="projicons/users.svg">
<h4>5+ Clients Served</h4>
</span>
</div>
</div>
<p class="see-more"><strong>Learn more about me below <span class="object">⬇️</span> </strong></p>
</main>
<!-- about me & portfolio -->
<section>
<div class="graysection">
<h3 class="colorswitch2">02. about me.</h3>
<p>Hey there! My name is China and I love creating things that live on the internet. My love for web development began back in 2020 during the Coronavirus lockdown — it was during this time that I decided to try and learn HTML & CSS.</p>
<p>Fast-forward to today, and I had the privilege of graduating from the SheCodes Web Development bootcamp and producing websites for various companies around the Charlotte area. My main focus these days are building my skills and producing clean & responsive web-based applications for clients.</p>
<p>Here are a few technologies that I have worked with recently:</p>
<ul class="skills">
<li>Bootstrap</li>
<li>JavaScript (ES6+)</li>
<li>Node.js</li>
<li>React</li>
<li>Python</li>
</ul>
</div>
<div class="section">
<h3 class="colorswitch1">03. portfolio.</h3>
<div class="holding-card graysection">
<img src="projicons/calculator.svg">
<p>Simple Calculator App created using HTML, CSS, and plain Vanilla Javascript. Check out this app live at the link below.</p>
<button><a href="https://codesandbox.io/s/calculator-g3841w?file=/src/styles.css">Live Preview</a></button>
<button><a href="https://github.com/mschinagaines/Calculator">Github</a></button>
</div>
<div class="holding-card graysection">
<img src="projicons/calculator.svg">
<p>Responsive Weather App created using HTML, CSS, JS, and React. Check out this app live at the link below.</p>
<button><a href="https://github.com/mschinagaines/Weather-App">Live Preview</a></button>
<button><a href="https://github.com/mschinagaines/Weather-App">Github</a></button>
</div>
</div>
<footer>
<p>Coded with ❤️ by China Gaines. Static hosting provided by Render.</p>
</footer>
</section>
</div>
<!-- Blinking Cursor JS -->
<script>
var cursor = true;
var speed = 525;
setInterval(() => {
if (cursor) {
document.getElementById('cursor').style.opacity = 0;
cursor = false;
} else {
document.getElementById('cursor').style.opacity = 1;
cursor = true;
}
}, speed);
</script>
</body>
</html>