-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
239 lines (179 loc) · 13.1 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
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
<!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">
<link rel="stylesheet" href="style.css">
<title>Portfoilo Website</title>
<!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">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="darkMode.css">
<title>Portfoilo Website</title>
</head>
<body>
<!--Nav Bar-->
<div class = "header">
<div class = "navBarContainer">
<button class="navBtn" id="homeBtn"><span>Home</span></button>
<button class="navBtn" id="projectsBtn"><span>Projects</span></button>
<button class="navBtn" id="resumeBtn"><span>Resume</span></button>
<button class="navBtn" id="conactMeBtn"><span>Contact</span></button>
</div>
<!--Light And Dark Theme Button-->
<button id = "colorChangeBtn"><img class= "colorChnge" src="images/sun.png" alt="colorChange"></button>
<button id = "colorChangeDark"><img class= "colorChnge" src="images/moon.png" alt="colorChange"></button>
</div>
<!-- Contact Modal -->
<div class = "contactModalContainer" id = "contactModalContainer">
<div class = "contactModal" id = "contactModal">
<h3>GET IN TOUCH</h3>
<form action="https://formsubmit.co/[email protected]" method="POST">
<input type="text" name="name" class="form-control" placeholder="Full Name" required>
<input type ="text" name="subject" class="form-control"placeholder="Subject" required>
<input type="email" name="email" class="form-control" placeholder="Email Address" required>
<input type ="text" name ="phone" class="form-control" placeholder="Your Phone Number" required>
<textarea placeholder="Your Message" class="form-control" name="message" rows="16" required></textarea>
<button id = "sumbitMessage">Send</button>
</form>
<button id = "closeContactModal">X</button>
</div>
</div>
<!-- Resume Modal -->
<div class = "resumeModalContainer" id = "resumeModalContainer">
<div class = "resumeModal" id = "resumeModal">
<h1 class = "resumeTitle">Resume</h1>
<p class = "resumeText">A PDF copy of my work history, education and accomplishments.</p>
<button id = "resumeButton"><a id = "resumeLink" href="Resume.pdf" download="robinLittleResume">Click to download</a></button>
<!-- <button id = "resume" download src = "Resume.pdf" alt = "Resume Download">CLICK TO DOWNLOAD</button> -->
<button id = "closeResumeModal">X</button>
</div>
</div>
<!--Page Container-->
<div class="contentContainer" id="contentContainer">
<!--Page Content-->
<!--ABOUT-->
<div class = "aboutContainer">
<!--Pic of Me-->
<figure><img id = "meImage" src = "images/Portrait.png" alt = "Portrait"></figure>
<!--TEXT-->
<div class = "aboutText">
<!--Title-->
<h1 id = "title"> Robin Little- Aspiring Developer</h1>
<!--About Paragraph-->
<p id = "meAbout">I’m looking to turn my passions for programming into a career in front-end development.
I find problem solving, self-learning and project-based work very motivating.
<p id = "meAbout2">Coming from a creative background, I’m always looking for new mediums to keep my brain busy, tech is an ever-evolving medium that fits the bill.</p>
<p id = "meAbout3">Feel free to contact me so that we can connect. Check out my github to see the projects I'm working on
or download my cv to find out more about my career history and achievements.</p>
</div>
</div>
<!--EXPERIENCE-->
<div class = "experienceContainer">
<!--Title-->
<h2 id = "experienceTitle"> I have experience working with:</h1>
<!--Experience List-->
<p id = "experienceList">CSS ★ HTML ★ JAVASCRIPT ★ REACT ★ PYTHON ★ MONGO-DB ★ MONGOOSE ★ SQL ★ FIGMA ★ PHOTOSHOP ★ PREMIER-PRO</p>
</div>
<!--Page Container Closing div-->
</div>
<!-- PROJECTS -->
<div class= "projectsContainer" id= "projectsContainer">
<p id = projectsHeader>Here is a small selection of projects that I have been working on. Checkout out my GitHub to see more.</p>
<button type="button" class="collapsible" id="collapsible1">Front End</button>
<div class="content">
<div class = "Project" id="project1">
<h1 class="projectsTitle" id="projectsTitle1">Cyber Pet Project</h1>
<p class="projectsText" id="projectsText1">This was a project developed with a fellow coder on my cohort. We practiced pair programming with live share and developed an app inspired by Tamagotchi, that helped us to develop our understanding of: Asynchronous Javascript, Higher Order Functions, Scope, Constructor Methods, OOP, Inheritance, Classes/Sub-Classes & Code Reusability. </p>
<p class ="projectsLanguages" id="projectsLanguages1"> HTML CSS JAVASCRIPT</p>
<div class ="projectsLinks">
<a href = "https://robinjessicalittle.github.io/Pet-Game/"><img id= "webProject" src = "images/programming.png"></a>
<a href = "https://github.com/RobinJessicaLittle/Pet-Game"><img id= "gitProject" src = "images/github.png"></a>
</div>
</div>
<div class = "Project" id="project2">
<h1 class="projectsTitle" id="projectsTitle2">React To Do App</h1>
<p class="projectsText" id="projectsText2">Here I developed a react.js list application. This project helped me to further understand a library that allows developers to create interactive complex user interfaces. I developed a good understanding of JSX fundamental such as: Class Components (Stateful Components), Hooks, Use State/Effect, Passing Props, Array Methods & Rendering Dynamic Content.</p>
<p class ="projectsLanguages" id="projectsLanguages2"> REACT CSS JSX</p>
<div class ="projectsLinks">
<a href = "https://6266a06bae12610059f909a0--react-list-app-week6.netlify.app/"><img id= "webProject" src = "images/programming.png"></a>
<a href = "https://github.com/RobinJessicaLittle/React-List-App"><img id= "gitProject" src = "images/github.png"></a>
</div>
</div>
<div class = "Project" id="project3">
<h1 class="projectsTitle" id="projectsTitle3">Plant Enclyclopedia</h1>
<p class="projectsText" id="projectsText3">Using purely HTML and CSS I developed a website, that allows you to search through houseplants and how to car for them. This was a self-indulgent project, that not only allowed me to share all the information I have retained as a house plant hobbyist but helped me to understand the capabilities of CSS and HTML. This project really helped me to become more proficient with flexbox in particular. </p>
<p class ="projectsLanguages" id="projectsLanguages3"> HTML CSS</p>
<div class ="projectsLinks">
<a href = "https://robinjessicalittle.github.io/House-Plant-Encyclopedia/"><img id= "webProject" src = "images/programming.png"></a>
<a href = "https://github.com/RobinJessicaLittle/House-Plant-Encyclopedia"><img id= "gitProject" src = "images/github.png"></a>
</div>
</div>
</div>
<button type="button" class="collapsible" id="collapsible2">Back End</button>
<div class="content">
<div class = "Project" id="project4">
<h1 class="projectsTitle" id="projectsTitle4">Film Database-MongoDB</h1>
<p class="projectsText" id="projectsText4">Here is an example of where I have created a CLI that allows users to store movies in a MongoDB database. This project covers all Crud Operations, with movie entries including optional information as well as allowing for filtered search results. </p>
<p class ="projectsLanguages" id="projectsLanguages4"> JAVASCRIPT MONGO-DB </p>
<div class ="projectsLinks">
<a href = "https://github.com/RobinJessicaLittle/MongoDB-database"><img id= "gitProject" src = "images/github.png"></a>
</div>
</div>
<div class = "Project" id="project5">
<h1 class="projectsTitle" id="projectsTitle5">Film Database-MongoDB/Mongoose</h1>
<p class="projectsText" id="projectsText5">I updated the back end of the previous database, utilising mongoose.</p>
<p class ="projectsLanguages" id="projectsLanguages5"> JAVASCRIPT MONGO-DB MONGOOSE</p>
<div class ="projectsLinks">
<a href = "https://github.com/RobinJessicaLittle/MongoDB-database"><img id= "gitProject" src = "images/github.png"></a>
</div>
</div>
<div class = "Project" id="project6">
<h1 class="projectsTitle" id="projectsTitle6">Plant Database-MongoDB/Sequelize</h1>
<p class="projectsText" id="projectsText6">Using what I had learnt from previous projects I created another backend database (with CRUD functions) again with Mongo-DB and now Sequelize. </p>
<p class ="projectsLanguages" id="projectsLanguages6"> JAVASCRIPT MONGO-DB SEQUELIZE</p>
<div class ="projectsLinks">
<a href = "https://github.com/RobinJessicaLittle/MongoDB-database"><img id= "gitProject" src = "images/github.png"></a>
</div>
</div>
</div>
<button type="button" class="collapsible" id="collapsible3">Full Stack</button>
<div class="content">
<div class = "Project" id="project7">
<h1 class="projectsTitle" id="projectsTitle7">Final Project Code Nation</h1>
<p class="projectsText" id="projectsText7">Here is a MERN stack project developed as part of a group project at the close of the Code Nation Masters Course. <br>
The site has: a sign-up/login functionality (with password security checking), react framer motion library was used to create image carousels, user image upload functionality using Cloudinary in the backend. <br>
The app is intended for users to create image reviews of their favourite takeaways. <br>
The key applications used during planning and management: Discord for communication, Trello for planning and task allocation, Figma for design and wire framing, google docs for creating presentation and project proposal & GitHub version control and repo. <br>
My main role in the project was working with React.js in the front end and refining UI functions and refining the layout and design with CSS.
</p>
<p class ="projectsLanguages" id="projectsLanguages7"> MONGODB EXPRESS REACT NODE CLOUDINARY CSS</p>
<div class ="projectsLinks">
<a href = ""><img id= "webProject" src = "images/programming.png"></a>
<a href = "https://github.com/RobinJessicaLittle/project-frontend"><img id= "gitProject" src = "images/github.png"></a>
</div>
</div>
<!-- all content div close -->
</div>
<footer id = "newfooterContainer">
<a href = "https://github.com/RobinJessicaLittle"><img class= "socialsNew" src="images/github.png" alt="gitLink"></a>
<a href ="https://www.linkedin.com/in/robin-little-655a1b231/"><img class= "socialsNew" src="images/linkedin.png" alt="linkedLink"></a>
<a href = "https://www.instagram.com/in.stitches.craft/"><img class= "socialsNew" src="images/instagram.png" alt="instaLink"></a>
</footer>
</div>
<!--Footer-->
<footer id = "footerContainer">
<a href = "https://github.com/RobinJessicaLittle"><img class= "socials" src="images/github.png" alt="gitLink"></a>
<a href ="https://www.linkedin.com/in/robin-little-655a1b231/"><img class= "socials" src="images/linkedin.png" alt="linkedLink"></a>
<a href = "https://www.instagram.com/in.stitches.craft/"><img class= "socials" src="images/instagram.png" alt="instaLink"></a>
</footer>
<script src = app.js></script>
<script src="https://smtpjs.com/v3/smtp.js">
</script>
</body>
</html>