-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
124 lines (109 loc) · 7.86 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
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="./Assets/css/reset.css">
<link rel="stylesheet" type="text/css" href="./Assets/css/styles.css">
</head>
<body>
<!--Header which includes my name and navigation bar -->
<header>
<h1>Jose Rivera</h1>
<div>
<ul class="nav-space">
<li><a href="#aboutme">About Me</a></li>
<li><a href="#work">Work</a></li>
<li><a href="#contactme">Contact Me</a></li>
<li><a href="https://docs.google.com/document/d/1nOdb5H8Bt-aHcoGbhUaEwMgl0xV1w-fNPw0IsXPtIHI/edit?usp=sharing"
target="_blank">Resume</a></li>
</ul>
</div>
</header>
<!-- Picture under header as well as the text over said picture -->
<figure class="under-head-pattern">
<img src="./Assets/images/hero.jpg">
<div>
<h2>Welcome to my page!</h2>
</div>
</figure>
<!-- About me section -->
<section id="aboutme" class="aboutme">
<h1>About<br>Me</h1>
<p>
<br>
<br>
Full Stack Web Developer with a background in Residential Maintenance and life-long dedication to learning.
Effective at combining creativity and problem solving to develop user-friendly applications. Completed a 12
week immersive coding bootcamp at The
University of Texas at Austin, and actively looking for a Junior Developer position.
</p>
</section>
<!-- Work section with a div per project, and a div to contain all the projects -->
<section id="work" class="work">
<h1>Work</h1>
<div class="workbox">
<div class="work1">
<figure><a href="https://github.com/sournachos/ElectraPoint" target="_blank"><img
src="./Assets/images/proj1demo.PNG"
alt="Image shows the landing page to an electric vehicle charging station locator. At the top of the page there is a header section of approximately on inch in height, of a mid-dark gray color. All of the contents of this header are centered, starting from the left is the logo, consisting of a geometric red cross with a black lightning bolt that fits perfectfly within the red cross, this lightning bolt has a circle around it that overlays each leg of the red cross in order to surround the lightning bolt. To the right of the logo is the word 'electrapoint' all together and colored red. To the right of electtrapoint are two sentences side by side separated by a finger's width. The first one displays the text 'find nearest charging station', and the second one says 'don't have an ecar?', and both of these are in white text. The next and last section of the page is a rectangular layout, and its width is twice its height. The right half of this section is displaying a photo of the front of a white electric vehicle as it is driving on a road surrounded by green bushes, slight hills in the background with moderate vegetation, and a clear sky with the entire photo having a warm hue due to the sun setting, which cannot be seen in the photo. On the left side of this rectangular section, there are two pieces of text one on top of the other, the top one in a large font states 'out of juice?' , with the word juice in red, and the bottom one in a smaller font states'If your electric road-trip buddy needs to fuel up and recover from those off-the-beaten-path camp spots, the various grocery trips this week , or you simply want to mingle with eco-friendly pals, head on over to our Charging Station Locator.' all in white text with a grey background. Below these two pieces of text are two buttons side by side. The button on the left has a red background on it with the white text saying 'take me there!'. The button to the right has a light gray background with black text displaying'purchase a four wheel buddy!', the four in this button is displayed as a number with a dash between it and the word wheel. Lastly, the right and left parts of this rectangular section are divided by a grey colored diagonal column whose top part is leaning towards the right section where the electric wehicle photo is, and this diagonal column is roughly an inch wide."></a>
<h3>ElectraPoint<br>
<span>HTML,CSS,JS</span>
<span class="live"><a href="https://sournachos.github.io/ElectraPoint/" target="_blank">Live Site</a></span>
</h3>
</figure>
</div>
<div class="work2">
<figure><a href="https://github.com/sournachos/XP-Arcade-PROJECT2" target="_blank"><img
src="./Assets/images/project2demo.PNG"
alt="Image shows the background image of Windows XP"></a>
<h3>XP Arcade<br>
<span>JS, Handlebars, CSS</span>
<span class="live"><a href="https://xp-arcade.herokuapp.com/" target="_blank">Live Site</a></span>
</h3>
</figure>
</div>
<div class="work3">
<figure><a href="https://github.com/sournachos/Most-Viral-Politician" target="_blank"><img
src="./Assets/images/project3.PNG"
alt="A red ad blue texas map is shown"/></a>
<h3>Most-Viral-Politician<br>
<span>MERN Stack, Python</span>
<span class="live"><a href="https://most-viral-politician.herokuapp.com/" target="_blank">Live Site</a></span>
</h3>
</figure>
</div>
<div class="work4">
<figure><a href="https://github.com/sournachos/MySQL-Employee-Tracker-HW12" target="_blank"><img
src="./Assets/images/employee.gif"
alt="A GIF of a command prompt running the employee tracker program"/></a>
<h3>Employee Directory<br>
<span>MySQL, Node</span>
<span class="live"><a href="https://github.com/sournachos/MySQL-Employee-Tracker-HW12" target="_blank">Live Site</a></span>
</h3>
</figure>
</div>
<!-- <div class="work5">
<figure><a href="https://github.com/sournachos" target="_blank"><img src="./Assets/images/work1.jpg" alt="Image shows a tablet on a white background with pens, and black markers on the right, a pencil sharpener, and two mechanical pencils on top of a notebook-size sheet of graph paper to the left of the tablet. There are also three one inch by one inch squares of paper with color samples that fill the square paper, an aditional two pieces of this papers are on the right of the tablet"></a>
<h3>Placeholder4<br>
<span>HTML and CSS</span>
</h3>
</figure>
</div> -->
</div>
</section>
<!-- Contact Me section with a navigation bar to contact creator in various ways -->
<section id="contactme" class="contactme">
<h1>Contact<br>Me</h1>
<nav class="nav-space2">
<a href="">832-419-0027</a>
<a href="mailto:joserivera18100@gmail.com" target="blank">joserivera18100@gmail.com</a>
<a href="https://github.com/sournachos" target="_blank">Github</a>
<a href="https://www.linkedin.com/in/jose-rivera-343bb9208/" target="_blank">LinkedIn</a>
<a href="https://open.spotify.com/user/riverafitness18?si=niw1cl0YTQG0Yi0WPNSjRQ"
target="_blank">Spotify</a>
</nav>
</section>
<!-- Footer -->
<footer>2021 Jose Rivera (sournachos on Github.com)</footer>
</body>
</html>