Skip to content

Pull Request for Resume Lab #27

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
StephanieCzetli wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Pull Request for Resume Lab #27

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
91c8bad
First resume commit
StephanieCzetli Nov 23, 2020
fc11a24
revised content (Commit #2)
StephanieCzetli Jan 14, 2021
d168eff
revised styles & form, added validation js
StephanieCzetli Jan 15, 2021
54dc985
placed validatio.js in js folder
StephanieCzetli Jan 15, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ A list of expected technology to be used in this assignment
Create a web page that displays your resume. The web page should consist of the following sections:

* Name
* Objective (3 sentence minimun)
* Objective (3 sentence minimum)
* Work Experience (no less than 2 previous/present jobs)
* Education
* Skills (3 skills minimum)
Expand All @@ -37,7 +37,7 @@ Create a web page that displays your resume. The web page should consist of the

### Part 2

Now is time create a 2nd page. This page will contain a contact form. The form should have the following fields:
Create a 2nd page that contains a contact form. The form should have the following fields:

* First Name (text field, limit of 30 characters)
* Last Name (text field, limit of 30 characters)
Expand All @@ -50,7 +50,7 @@ Now is time create a 2nd page. This page will contain a contact form. The form s
* Use of labels with all form fields
* Use of validation

### Submission
### Submission YOur Project
Create a pull request from your project GitHub page

**Happy Hacking!**
Expand Down
111 changes: 111 additions & 0 deletions contact.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Form</title>
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap" rel="stylesheet">
<style>
a:link { text-decoration: none }
a:hover { text-decoration: underline }
</style>
</head>

<body onload='document.formBasic.name.focus()'>

<div class="wrapper-body">
<header>
<h1>Contact Form</h1>
</header>

<main>
<form name="formBasic" action="contact.html" method="post">
<h4>Introduce yourself below and let's connect!</h4>
<fieldset class="contact-info-block">
<legend class="form-header"><span>Your Basic Contact Info</span></legend>
<!-- First Name (text field, limit of 30 characters) -->
<label for="firstName">First Name:</label>
<input id="firstName" type="text" name="name" maxlength="30">

<!-- Last Name (text field, limit of 30 characters) -->
<label for="lastName">Last Name:</label>
<input id="lastName" type="text" name="name" maxlength="30">
<br>
<!-- Contact phone number (text field) -->
<label for="primaryPhone">Primary Phone No.:</label>
<input id="primaryPhone" type="text" name="phone">

<!-- Phone number type: Landline, Mobile (radio button) -->
<label for="landline">Landline:</label>
<input id="landline-radio" type="radio" name="primaryType">

<label>Mobile:</label>
<input id="altPhone-radio" type="radio" name="primaryType">
<br>

<label>Alt. Phone No.:</label>
<input type="text" id="altPhone" name="altType">

<!-- Phone number type: Landline, Mobile (radio button) -->
<label>Landline:</label>
<input type="radio" id="phoneType-mobile" name="altType">
<label>Mobile:</label>
<input type="radio" id="phoneType-landline" name="altType">
<br>

<!-- Contact email (text field, limit of 50 characters) -->
<label for="email">Email:</label>
<input id="email" type="email" name="user_email" maxlength="50">
</fieldset>
<br>

<fieldset class="additional-info-block">
<legend class="form-header"><span>Additional Info</span></legend>
<!-- * How did you hear about us: Search Engine, Social Media, Recruiter (drop down) -->
<label for="source">How did you hear about me?</label>
<select id="source" name:"source">
<option value="Select an Option">Select an Option Below</option>
<option value="Search Engine">Search Engine</option>
<option value="LinkedIn">LinkedIn</option>
<option value="Social Media">Social Media</option>
<option value="Recruiter">Recruiter</option>
<option value="other">other</option>
</select>
<br>
<br>

<!-- * Interest for contacting: A list of your skills (check box) -->
<label>Which of my skills interested you?</label><br>
<input type="checkbox" id="html" value="interest_html" name="user_interest"> <label class="light" for="html">HTML</label><br>
<input type="checkbox" id="css" value="interest_css" name="user_interest"> <label class="light" for="css">CSS</label><br>
<input type="checkbox" id="JavaScript" value="interest_javascript" name="user_interest"> <label class="light" for="javascript">JavaScript</label><br>
<!-- * Message (text area, limited to 250 characters) -->
<br>
<label for="message">Message:</label>
<br>
<textarea id="message" name="user_bio" maxlength="250"></textarea>
<br>
<br>
<!-- Form Submit button -->
<!-- <button type="submit">Send</button> -->
<input type="submit" name="submit" value="Submit" onclick="checkLetters(document.formBasic.name)"></input>

</form>
<br>
<br>
</main>

<footer>
<nav>
<ul style="list-style-type: none;">
<li><a href="resume.html">Return to Resume</a></li>
<li><a class="active" href="contact.html">Contact Form</a></li>
</ul>
</nav>
</footer>
</div>

<script src="js/validation.js"></script>
</body>
</html>
47 changes: 47 additions & 0 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
/* style for both resume & contact form */

body {
font-family: 'Poppins', sans-serif;
}


/* resume styles */
/* styles all h3 headers to uppercase letters */
h3 {
text-transform: uppercase;
}

h2:hover {
color: darkturquoise;
font-size: 1.5rem;
}

/* styles the registered mark after the word 'Realtor' */
#registered {
vertical-align:super;
}

li a {
float: left;
padding-right: 15px;
}

/* contact form styles */

.contact-info-block {
padding-bottom: 1.2rem;
}

/* style form headers */
.form-header {
font-weight: bold;
}

/* gives focus to text input area of input fields */
input:focus, textarea:focus{
background-color: lightyellow;
}




Binary file added images/profile-img.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 16 additions & 0 deletions js/validation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@

// create validation for the contact form

// validation for first & last name
function checkLetters(inputltrs) {
let letters = /^[A-Za-z]+$/; //stores valid letters (capitals & lowercase) in variable

if (inputltrs.value.match(letters)) { // if the user input matches any of the values in variable letters
alert('Thank you for entering your name.'); // if user input contains only letters, pop-up alert window for user w/ message
return true;
} else {
alert('Oops! Please enter letters only here.') //if user input contains other than letters pop-up alert window for user w/ message
return false;
}
}

167 changes: 167 additions & 0 deletions resume.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,167 @@
<!DOCTYPE html>
<html lang="en">
<!--This resume project was one of my first projects. I have learned much more since then! -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stephanie Czetli's Resume</title>
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap" rel="stylesheet">
<!-- Link to FA for social media icons-->
<script src="https://kit.fontawesome.com/0daaf82d24.js" crossorigin="anonymous"></script>
<!-- Here I demonstrated my ability to include css styles within HTML -->
<style>
a:link { text-decoration: none }
a:hover { text-decoration: underline}
th { padding: 0 20px 3px 0; }
tr { text-align: left; }
</style>
</head>

<body id="top">
<div class="wrapper-body">
<header>
<section>
<img src="/images/profile-img.jpg" alt="profile photo of Stephanie"></img>
<h1><strong>STEPHANIE CZETLI, Front End Web Developer</strong></h1>
</section>
</header>
<hr>
<main>
<section class="objective">
<h3>objective</h3>
<p>Highly motivated trilingual front end web developer with strong project management skills,
a solid foundation in writing and structuring clear semantic markup and a keen interest in
responsive design, accessibility and UX/UI design. A detail oriented, strategic team member
who is passionate about technology and eager to share, apply and broaden new and existing
skills as part of an Agile development team.</p>
</section>
<hr>
<section class="skills">
<h3>skills</h3>
<table>
<tbody>
<!-- Table Header Row 1 -->
<tr>
<th>Languages</th>
<th>Frameworks</th>
<th>Technologies</th>
</tr>
<!-- Row 2 Table Data -->
<tr>
<td>HTML</td>
<td>Bootstrap</td>
<td>Version Control (Git)</td>
</tr>
<!-- Row 3 Table Data -->
<tr>
<td>CSS</td>
<td>jQuery</td>
<td>Visual Studio Code</td>
</tr>
<!-- Row 4 Table Data -->
<tr>
<td>JavaScript</td>
<td>Accuracy</td>
</tr>
</tbody>
</table>
</section>

<section class="work-experience">
<hr>
<h3>experience</h3>
<h4><a href="https://codedifferently.com/" target="_blank">Code Differently</a>, Wilmington, DE - <i>Student Web Design & Development</i></h4>
<p>Nov 2020 - PRESENT</p>
<ul style="list-style-type:square;">
<li>Selected from over 200 applicants for admission in a class of 32 students</li>
<li>Worked 80+ hours per week to strengthen technical skills and gain experience in HTML,
CSS, JavaScript, jQuery, Bootstrap</li>
<li>Wireframed mockups and wrote and debugged code using semantic HTML5, CSS3,
JavaScript, jQuery, Bootstrap and Chrome DevTools. Pushed completed projects to GitHub
repository using Git, Git Bash and the Command Line Interface</li>
<li>Completed over 400 hours of online tutorials, software development projects and training
in an immersive program</li>
</ul>
<h4><a href="https://www.pattersonschwartz.com/" target="_blank">Patterson-Schwartz Real Estate</a> Team, Wilmington, DE - <i>Administrative Coordinator</i></h4>
<p>Jul 2017 - Feb 2020</p>
<ul style="list-style-type:square;">
<li>Promoted and supported the use of cloud based products to improve communication and trained agents on mobile (iOS and Android) and desktop devices</li>
<li>Reduced risk and increased productivity by developing and writing a standard operating procedures (SOP) manual</li>
<li>Developed comprehensive spreadsheets to identify trends and monitor and track both agent and team metrics</li>
</ul>
<h4><a href="https://www.octorara.k12.pa.us/domain/44" target="_blank">Octorara Jr.-Sr. High School</a>, Atglen, PA - <i>Senior Administrative Assistant</i></h4>
<p>Apr 2014 - Jul 2015</p>
<ul style="list-style-type:square;">
<li>Transformed communication building-wide by publishing a shared electronic calendar that became the centralized source for reliable information and materials for meetings and events</li>
<li>Dramatically reduced distribution time by converting daily announcements to an electronic format containing timely and accurate content which increased demand for the publication</li>
</ul>
</section>
<hr>
<section class="certs">
<h3>certificates</h3>
<ul style="list-style-type:square;">
<li>Web Design & Development | Code Differently (Exp. Mar 2021)</li><br>

<li>Introduction to HTML5 (Feb 2020)</li>
<li>Introduction to CSS3 (Aug 2020)</li>
<li>Interactivity with JavaScript (Sept 2020)</li>
<li>Advanced Styling and Responsive Design (Oct 2020)</li>
<li style="list-style-type:none;">University of Michigan, Coursera</li>
<br>
<li>JavaScript | Codecademy.com (2016)</li>
<br>
<li>Try Python Level 2 | CodeSchool.com (2016-2017)</li>
<br>
<li>Licensed Pennsylvania Real Estate Salesperson (PA Lic# RS280597) (2004-2010)</li>
<li>Accredited Buyer Representative (ABR) designation | Pennsylvania Realtors<small
class="registered">&#174</small> Institute (2007)</li>
<li>e-Pro<small class="registered">&#174</small> Technology (e-Pro<small class="registered">&#174</small>)
designation | National Association of Realtors<small class="registered">&#174</small> (2007)</li>
</ul>
</section>

<section class="ed">
<h3>education</h3>
<p><a href="https://marybaldwin.edu/" target="_blank">MARY BALDWIN UNIVERSITY</a><br>
B.A., International Relations<br>
Minor: Asian Studies<br>
Emphasis: Japanese</p>

<p><a href="https://www.coursera.org/specializations/web-design#courses" target="_blank">UNIVERSITY OF MICHIGAN, COURSERA</a><br>
Feb 2020 - PRESENT<br>
Specialization: Web Design for Everybody: Basics of Web Development and Coding<br>
</p>
</section>
</main>

<footer>
<section>
<h2 class="social">Let's Connect!</h2>
<nav>
<p>I'd love to hear from you.</p>
<ul style="list-style-type: none;">
<li><a href="mailto:StephanieCzetli@gmail.com">Email Me</a></li>
<li><a href="contact.html">Contact Form</a></li>
<li><a class="active" href="resume.html">Resume</a></li>
</ul>
</nav>
</section>
<br>
<section>
<div>
<ul class="icons" style="list-style-type: none;">
<li><a href="https://www.linkedin.com/in/stephanieczetli/" target="_blank"><i
class="fab fa-linkedin"></i></a></li>
<li><a href="https://github.com/StephanieCzetli" target="_blank"><i class="fab fa-github"></i></a></li>
<li><a href="https://codepen.io/stephanie_czetli" target="_blank"><i class="fab fa-codepen"></i></a></li>
</ul>
</div>
<br>
<p><a href="#top"><i>Return to the Top</i></a></p>
</section>
</footer>
</div>
<script src="js/validation.js"></script>
</body>
</html>