Fundamentals of Web Development

Summary:

This project was meant to culminate all of the HTML, CSS, and PHP coding experience we had gained by the end of the semester. The Website itself was meant to be a portfolio of sorts built from scratch using those same coding languages. The intended audience was meant to be potential employers. The text below is the HTML from the Resume page of the website I built.

HTML

<!DOCTYPE html>
<!-- saved from url=(0049)http://trevonmathews.com/IMS222/HireMe/resume.php -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="icon" type="image/png" href="http://trevonmathews.com/IMS222/HireMe/img/FavIcon.png">
<meta name="viewport" content="initial-scale = 1,width=device-width">
<meta http-equiv="cache-control" content="max-age=0">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT">
<meta http-equiv="pragma" content="no-cache">
<title>Trey's Hire Me Site</title>
<link href="./Trey's Hire Me Site_files/HireMe.css" media="screen" rel="stylesheet" type="text/css">
</head>

<body data-new-gr-c-s-check-loaded="14.984.0" data-gr-ext-installed=""><header>
	<div class="wrapper">
		<div class="sidebar">
			
			<h1>Hire Me</h1>
			<div>
				<ul>
					
<li><a href="http://trevonmathews.com/IMS222/HireMe/index.php" class="main_menu_item">Home</a></li>
<li><a href="http://trevonmathews.com/IMS222/HireMe/resume.php" class="active_menu_item">Résumé</a></li>
<li><a href="http://trevonmathews.com/IMS222/HireMe/writing_samples.php" class="main_menu_item">Writing Samples</a></li>				
                </ul>
			</div>
		</div>
	</div>	
</header>


<div class="main_content" style="margin-left: 200px;">
<div id="resume">
	<div class="header">
		<h1>Trey Mathews</h1>
	</div>
	<br>
	<p style="text-align: center;">(937)546-4234 • trevon26988@gmial.com</p>
	<br>
	<div class="boxed1">
		<p>
			<b>Permanent Residence:</b>
			<br>
			2733 Towne Blvd. Apt. 25
			<br>
			Middletown, OH 45044
		</p>
	</div>
	<div class="boxed2">
		<p>
			<b>Student Residence:</b>
			<br>
			1554 Ironwood Dr.
			<br>
			Oxford, OH 45056
		</p>
	</div>
	<br>
    <div class="subheader">
		<h2>Summary</h2>
	</div>
    <hr>
    <br>
    <div style="width: 100%;">
        <p>
            Driven and focused Miami University junior with 2 years of experience in content creation and editing, including 1 year as a writing intern for The Voice of Black Cincinnati. More than capable researcher with a background in linguistics and anthropology. Experienced in interactive web-design, SEO, audience/user focused writing, (digital) rhetoric, analytical thinking, and technical writing. 
        </p>
    </div>
	<div class="subheader">
		<h2>Education</h2>
	</div>	
	<hr>
	<br>
	<div class="boxed1">
		<p>
			<b>Miami University</b>
			<br>
			Bachelor of Arts in Professional Writing
			<br>
			Concentration: Digital and Technical Communication
		</p>
	</div>
	<div class="boxed2">
		<p>
			<br>
			2016-Present
			<br>
			<br>
		</p>
	</div>
	<br>
	<div class="subheader">
		<h2>Work Experience</h2>
	</div>
	<hr>
	<div class="boxed3">
		<p>
			<b>The Voice of Black Cincinnati</b> // Writing Intern
			<br>
			July 2020–Present
		</p>
		<ul>
			<li>Created and edited well researched, reader friendly content for a targeted audience.
			</li><li>Managed SEO and readability, resulting in a 20% increase in page views from early to mid-August.
			</li><li>Worked collaboratively with a team of writers and editors to ensure accuracy, relevance, and potential for engagement.
            </li><li>Developed ideas for potential content with fellow writers and the head of marketing.</li>
		</ul>
	</div>
	<div class="boxed3">
		<p>
			<b>Hello Fresh</b> // Marketing Intern
			<br>
			June-August 2018
		</p>
		<ul>
			<li>Engaged with potential customers through face-to-face interactions at local events, festivals, malls, gyms, and other venues.
			</li><li>Promoted and sold HelloFresh to new demographics while meeting weekly sales goals.
			</li><li>Assisted in finding new locations to expand the marketing campaign.
			</li><li>Collaboratively developed and implemented creative marketing strategies.
		</li></ul>
	</div>
	<div class="boxed3">
		<p>
			<b>Miami University</b> // Tech Support Associate
			<br>
			August 2017-February 2018
		</p>
		<ul>
			<li>Aided Miami Faculty and staff with computer-related problems or questions.  
			</li><li>Set up and transported new computers and printers, handled the recycling of tech machines, & troubleshot computer errors. 
			</li><li>Assisted the senior tech support analyst with any other tasks he assigned.
		</li></ul>
	</div>
<div class="boxed3">
		<p>
			<b>Lowe's</b> // Flooring Specialist
			<br>
			May-August 2017
		</p>
		<ul>
			<li>Provided product information to both customers and peers, recommending products, plans, or installation services. 
			</li><li>Informed customers on pricing, conducted sales activities, coordinated successful completion of projects and orders.
			</li><li>Executed order management duties such as entering new orders for customers. 
		</li></ul>
	</div>
	<div class="subheader">
		<h2>Activities</h2>
	</div>
	<hr>
	<div class="boxed3">
		<p>
			<b>Engineers Without Borders</b> (current)
		</p>
		<ul>
			<li>Collaboratively apply engineering methods to solve real world issues such as lack of clean water and fresh produce.
		</li></ul>
	</div>
	<div class="boxed3">
		<p>
			<b>Key Club: President</b> (2014-16)
		</p>
		<ul>
			<li>Presided over all club activates, delegated tasks, and worked with community leaders to organize volunteer activities.
		</li></ul>
	</div>
	<div class="boxed3">
		<p>
			<b>Speech and Debate: Events Coordinator & Debate Captain</b> (2014-16)
		</p>
		<ul>
			<li>Organized all team events, coached new debaters and acted as liaison between coach and team.  
		</li></ul>
	</div>
	<div class="subheader">
		<h2>Relevant Skills</h2>
	</div>
	<hr>
	<div class="boxed4">
		<ul>
			<li>Analytical Thinking
			</li><li>Problem Solving
			</li><li>Interpersonal Communication
			</li><li>Advanced Microsoft Office Suite
		</li></ul>
	</div>
	<div class="boxed4">
		<ul>
			<li>Research Skills
			</li><li>Advanced Mac & Windows OS
			</li><li>Advanced iOS and Android OS
			</li><li>Beginner Python
		</li></ul>
	</div>
	<div class="boxed4">
		<ul>
			<li>Beginner HTML, CSS & PHP
			</li><li>Beginner Adobe Photoshop 
			</li><li>Google Suite 
		</li></ul>
	</div>
</div>
<footer>
<div class="footer">All content is original work. For any questions, please email me at the address listed on the home page.</div>
</footer>
</div>

</body></html>

CSS

/*RESET*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;} body {line-height: 1;}ol, ul{list-style:display;} blockquote, q{quotes:none;} blockquote:before, blockquote:after, q:before, q:after{content:'';content:none;} :focus{outline:0;} ins{text-decoration:none;} del{text-decoration:line-through;} table{border-collapse:collapse; border-spacing:0;}
/*MAIN*/
@import url('https://fonts.googleapis.com/css?family=Playfair+Display&display=swap')
@font-face {
	font-family:Playfair Display;
    src:url(fonts/PlayfairDisplay-VariableFont_wght.ttf)
    font-weight:normal;
    font-style:normal;
}

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	
	text-decoration: none;
	font-family: Playfair Display, serif;
}

body{
	font-size: 1.05em;
	line-height: 1.25em;
	font-family: Playfair Display, serif;
	background: #2F4858;
	color: #FFF;
	padding-bottom: 2em;
}

.main_menu_item{
	color: #00465c;
	padding: 3px;
	padding-left: 10px;
	padding-right: 10px;
}

.wrapper{
	display: flex;
	position: relative;
}

.wrapper .sidebar{
	position: fixed;
	width: 200px;
	height: 100%;
	background: #2F4858;
	padding: 30px 0;
}

.wrapper .sidebar h1{
	color: #FFF;
	text-transform: uppercase;
	text-align: center;
	margin-bottom: 30px;
	font-size: 2.00em;
}

.wrapper .sidebar ul li{
	padding: 15px;
	border-bottom: 1px solid #9FB6BC;
	border-top: 1px solid #9FB6BC;
}

.wrapper .sidebar ul li a{ 
	color: #FFF;
	display: block;
}

.wrapper .sidebar ul li:hover{
	background: #FFDB5A;
}

.wrapper .sidebar ul li:hover a{
	color: #546D79;
}


.wrapper .main_content{
	margin-left: 200px;
	width: 100%;
}

.wrapper .main_content .info{
	margin: 20px;
	line-height: 25px;
}

.main_content .info div{
	margin-bottom: 20px;
	color: #FFC145
}

.main_content .footer{
	text-align: center;
	padding: 1em;
}

#resume{
	font-size: 1.05em;
	line-height: 1.25em;
	font-family: Playfair Display, serif;
	background: #2F4858;
	color: #FFF;
	padding: 2em;
}

.header{
	text-align: center;
	font-size: 3.05em;
}

.boxed1{
	display: inline-block;
	float: left;
	width: 50%;
	margin: auto;
}

.boxed2{
	display: inline-block;
	float: right;
	width: 50%;
	text-align: right;
	margin: auto;
}

.boxed3{
	display: inline-block;
	float: left;
	width: 100%;
	margin: auto;
	padding: 1em;
}

.boxed4{
	display: inline-block;
	width: 33%;
	margin: auto;
	padding: 1em;
	height:123.25px;
}

.subheader{
	text-align: center;
	padding: 1.05em;
}

.analysis_one{
	font-size: 1.05em;
	line-height: 1.25em;
	font-family: Playfair Display, serif;
	background: #2F4858;
	color: #FFF;
	padding: 2em;
}

.analysis_one p{
	text-indent: 5em;
	line-height: 2em;
}

.analysis_one .header{
	text-align: center;
	font-size: 3.05em;
}

.journalism_one{
	font-size: 1.05em;
	line-height: 1.25em;
	font-family: Playfair Display, serif;
	background: #2F4858;
	color: #FFF;
	padding: 2em;
	line-height: 2em;
}

.journalism_one .header{
	text-align: center;
	font-size: 3.05em;
}

.composition_one{
	font-size: .5em;
	line-height: 1.25em;
	font-family: Playfair Display, serif;
	background: #2F4858;
	color: #FFF;
	padding: 3em;
	line-height: 4em;
}

img{
	display: inline-block;
	width: 50%;
	margin:auto;
	padding: 1em;
	border-radius: 40px;

}

Reflection:

This project helped me to create a bridge between my left and right brain thinking. Not only did I have to consider and apply principles of design, but I also had to actualize those principles within the context of a coding language based on formal logic. I learned to expand my understanding beyond the aesthetic considerations and how to apply and appropriately scope what can be done with the knowledge and resources I have. I believe this experience has taught me to oscillate between analytical thinking and creative design thinking in a way that uniquely prepares me to function professionally in the world of user experience.

Previous

Internship