-
Notifications
You must be signed in to change notification settings - Fork 0
/
portfolio.html
138 lines (137 loc) · 9.94 KB
/
portfolio.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
<!--PORTFOLIO PAGE-->
<!DOCTYPE html>
<html lang="en">
<head>
<title> Gizelle's Portfolio</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8">
<link href="css/style.css" type="text/css" rel="stylesheet" integrity="sha384-qzYMgY8vDhOuMvTyeRkuHCWHDAsZYS8MpwZxlc2heYsyImNtqebhYJprY3vCHPFc"/>
<link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Caveat:wght@700&display=swap" rel="stylesheet">
</head>
<body>
<!--HAMBURGER MENU AND NAVBAR-->
<div class="nav">
<label for="toggle">☰</label>
<input type="checkbox" id="toggle"/>
<nav class="menu">
<a href="index.html">HOME</a>
<a href="blogposts.html">BLOG</a>
<a href="portfolio.html" class="active">PORTFOLIO</a>
<a href="contact.html">CONTACT</a>
</nav>
</div>
<!--HEADER-->
<header class="container" id="header-image">
<h1>Portfolio</h1>
</header>
<!--MAIN SECTIONS-->
<!--MAIN-->
<main>
<!--ROW-->
<div class="row">
<!--LEFT COLUMN - Blog Posts-->
<div class="leftcolumn">
<section class="textbox">
<h2>ABOUT</h2>
<p>I am a current student undertaking a full-stack web-development bootcamp, seeking to gain industry experience following course completion in August 2021.</p>
<p>I currently yield the powers of: HTML, CSS, Git, Ruby, Rails, JavaScript, APIs and React. I plan on expanding my skills to include: MongoDB, Node.js, Mongoose, Express.js and Redux.</p>
<p>I am a creative personality with a passion for the arts. I enjoy consuming movies, series, theatre and books. I am a gamer, playing for fun, with a preference for PC and arcade games. Occasionally, you may find me drawing dark matter or painting with acrylics or watercolor.
I love learning. My browser history is littered with academic papers and research.
</p>
<p>Prior to my pursuit of a STEM career, I worked as a practicing lawyer with several years of experience in criminal and civil law.</p>
<p>This website is built using HTML and CSS. You may read about my other projects below.</p>
</section>
<section class="textbox">
<h2><a id="project-post-3"></a>ARCADE SECRETARY - Teamwork Hackathon</h2>
<h5>JavaScript, React, HTML, CSS</h5>
<p>Arcade Secretary is a score-based speed typing game. Secretaries are armed with their keyboards and lighting reflexes when they enter the fast-paced corporate battlefield where speed and accuracy pave the way to victory!</p>
<p>Secretaries are given a strict deadline during which they will be given words, which they must type and submit as quickly and as accurately as super-humanly possible.</p>
<p>Secretaries will be rewarded for accuracy and receive one point for each character that they typed correctly. Mistakes are a liability! If a secretary makes a mistake, they will not get a point for the incorrectly typed character.</p>
<p>Secretaries race against time! When time runs out, the last word will be discarded. The deadline is reached and the game ends.</p>
<p>Secretaries are then provided with a performance review which will include total score, WPM (words per minute) and average accuracy per character.</p>
<p>Secretaries are immortal and live to battle again, always seeking to improve and chase deadline victories.</p>
<p>For more, <a href="https://github.com/Ellezique/Arcade-Secretary-as-deployed" target="_blank">visit Arcade Secretary here</a> where you may find additional information about the app and deployed url.</p>
<img src="images/Portfolio/arcadesecretary.PNG" class="portfolio-images" alt="Arcade-Secretary">
</section>
<section class="textbox">
<h2><a id="project-post-2"></a>ARTIZE - Two-way Marketplace</h2>
<h5>Development & Database: Ruby, Rails, HTML, CSS, PostgreSQL</h5>
<p>Project Management, Planning and Software: Trello, Draw.io, Balsamiq Wireframes, pgAdmin
<br>
Gems: Bootstrap, Devise, Rolify, Simple Form
<br>
Image Upload: Cloudinary and Rails Active Storage
<br>
Payment: Stripe
<br>
Deployed using Heroku
</p>
<p>Artize is an online Gallery to buy and sell art direct, without traditional "middle-man" gallery fees and commission.
To view the rest of this website, users need to sign up or log in. Once logged in, a user may browse, list and purchase artworks.Users may only delete or edit their own listings. The admin user has unrestricted access to edit, delete or list any artworks. Future expansion may include a search feature allowing users to sort listed artworks by medium and style.
</p>
<p>For more, <a href="https://github.com/Ellezique/Artize-" target="_blank">visit Artize here</a> where you may find additional information about the app and deployed url.</p>
<img src="images/Portfolio/artize.PNG" class="portfolio-images" alt="Artize">
</section>
<section class="textbox">
<h2><a id="project-post-1"></a>RIDDLES - Terminal Application</h2>
<h5>Ruby, Git, Github, Markdown</h5>
<p>Riddles runs from the shell and accepts user input. Players may enter their username or continue as default "Player One" (yes, this is a reference to arcade games and Ernest Cline's novel, "Ready Player One").</p>
<p>Riddles is a ruby terminal application game that challenges the user to solve 5 riddles. Each riddle has a one-word answer. When playing, the user will receive the riddle and have an opportunity to provide their one-word answer. If the user solves the riddle, or if they run out of attempts, they move to the next riddle until they have played all 5 riddles. If the user is unable to solve the riddle, they may attempt a set number of tries (how many will depend on the difficulty mode selected).</p>
<p>Aesthetics give the game some personality and visual appeal. Ascii art was copied from an online generator and pasted as a string in the code. The lolize gem was used to color the Ascii headers for each section of the application. The colorize gem introduced solid color text.</p>
<p>For more, <a href="https://github.com/Ellezique/ruby-riddles-game" target="_blank">visit Riddles here</a></p>
<img src="images/Portfolio/riddles.PNG" class="portfolio-images" alt="Riddles">
</section>
</div>
<!--RIGHT COLUMN - Blog List-->
<div class="rightcolumn">
<div class="textbox">
<h4>Projects List</h4>
<p>In addition to this website, you may read about some of my other projects here:</p>
<ul>
<li><a href="#project-post-3">June 2021, Arcade Secretary</a><br/><br/></li>
<li><a href="#project-post-2">March 2021, Artize</a><br/><br/></li>
<li><a href="#project-post-1">December 2020, Riddles</a></li>
</ul>
</div>
</div>
</div>
</main>
<!--FOOTER-->
<footer id="footer">
<!--Footer left section-->
<div class ="footer-left">
<div class="footer-links">
<a href="index.html">Home</a>
<br>
<a href="blogposts.html">Blog</a>
<br>
<a href="portfolio.html" class="active">Portfolio</a>
<br>
<a href="contact.html">Contact</a>
</div>
<div class="social-media">
<a href="https://www.linkedin.com/in/gizellevz" target="_blank"><img src="images/libug.png" class="socialbugs" alt="LinkedIn"></a>
<a href="https://github.com/Ellezique" target="_blank"><img src="images/gitbug.png" class="socialbugs" alt="GitHub"></a>
</div>
</div>
<!--Footer middle section-->
<div class="footer-center">
<div class="footerportrait">
<a href="portfolio.html"><img src="images/portrait653.jpg" id="footerportrait" alt="Watercolor Portrait"></a>
</div>
<p>© 2021 Gizelle v.Z. All Rights Reserved</p>
</div>
<!--Footer right section-->
<div class="footer-right">
<div class="contact-details">
<p>Brisbane</p>
<p>Australia</p>
<p><a href="mailto:[email protected]" target="_blank">Contact by Email</a></p>
<p><a href="credits.html" target="_blank">Photo Credits</a></p>
</div>
</div>
</footer>
</body>
</html>