rest of react file
This commit is contained in:
Tyler Koenig
35
src/components/Footer.js
Normal file
35
src/components/Footer.js
Normal file
@@ -0,0 +1,35 @@
|
||||
import React from 'react';
|
||||
|
||||
const Footer = () => (
|
||||
<footer>
|
||||
<span class='copyright'>© 2021 Tyler Koenig</span>
|
||||
<div class='foot__links'>
|
||||
<a
|
||||
href='https://github.com/lerko96'
|
||||
rel='noreferrer'
|
||||
target='_blank'
|
||||
title='github'
|
||||
>
|
||||
<i class='fa fa-github fa-2x' aria-hidden='true'></i>
|
||||
</a>
|
||||
<a
|
||||
href='https://www.linkedin.com/in/tyler-koenig-72607a18b/'
|
||||
rel='noreferrer'
|
||||
target='_blank'
|
||||
title='LinkedIn'
|
||||
>
|
||||
<i class='fa fa-linkedin-square fa-2x' aria-hidden='true'></i>
|
||||
</a>
|
||||
<a
|
||||
href='mailto:tylerkng96@icloud.com'
|
||||
rel='noreferrer'
|
||||
target='_blank'
|
||||
title='email'
|
||||
>
|
||||
<i class='fa fa-envelope-o fa-2x' aria-hidden='true'></i>
|
||||
</a>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
|
||||
export default Footer;
|
||||
42
src/components/Nav.js
Normal file
42
src/components/Nav.js
Normal file
@@ -0,0 +1,42 @@
|
||||
import React from 'react';
|
||||
|
||||
const Nav = () => (
|
||||
<header>
|
||||
<nav>
|
||||
<div id='logo'>
|
||||
<a href='index.html'>tk</a>
|
||||
</div>
|
||||
<div id='nav__list'>
|
||||
<ul>
|
||||
{/* <li id='nav__contact'>
|
||||
<a href='#contact' target='_self'>
|
||||
CONTACT
|
||||
</a>
|
||||
</li> */}
|
||||
<li>
|
||||
<a href='#profile' target='_self'>
|
||||
PROFILE
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='#projects' target='_self'>
|
||||
PROJECTS
|
||||
</a>
|
||||
</li>
|
||||
{/* <li>
|
||||
<button onClick={() => setDarkMode(!darkMode)}>
|
||||
Toggle Dark Mode
|
||||
</button>
|
||||
</li> */}
|
||||
{/* <li>
|
||||
<a href='#skills' target='_self'>
|
||||
SKILLS
|
||||
</a>
|
||||
</li> */}
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
);
|
||||
|
||||
export default Nav;
|
||||
96
src/components/Profile.js
Normal file
96
src/components/Profile.js
Normal file
@@ -0,0 +1,96 @@
|
||||
import React from 'react';
|
||||
|
||||
import headshot from '../images/headshot-tyler_koenig.png';
|
||||
|
||||
// function Greet() {
|
||||
// return <p>Hello TK</p>
|
||||
// }
|
||||
|
||||
const Profile = () => (
|
||||
<section id='profile'>
|
||||
<article class='profile__card'>
|
||||
<div class='card__img'>
|
||||
<img id='headshot' src={headshot} alt='tyler' />
|
||||
</div>
|
||||
<div class='card__bio'>
|
||||
<div class='bio__name'>
|
||||
<a href='index.html'>TYLER KOENIG</a>
|
||||
</div>
|
||||
<div class='bio__desc'>
|
||||
<p>SOFTWARE DEVELOPER</p>
|
||||
</div>
|
||||
<div class='bio__contacts' id='contact'>
|
||||
<a
|
||||
href='https://www.linkedin.com/in/tyler-koenig-72607a18b/'
|
||||
rel='noreferrer'
|
||||
target='_blank'
|
||||
title='LinkedIn'
|
||||
>
|
||||
<i
|
||||
class='fa fa-linkedin-square fa-2x'
|
||||
aria-hidden='true'
|
||||
></i>
|
||||
</a>
|
||||
<a
|
||||
href='https://github.com/lerko96'
|
||||
rel='noreferrer'
|
||||
target='_blank'
|
||||
title='github'
|
||||
>
|
||||
<i class='fa fa-github fa-2x' aria-hidden='true'></i>
|
||||
</a>
|
||||
<a
|
||||
href='mailto:tylerkng96@icloud.com'
|
||||
rel='noreferrer'
|
||||
target='_blank'
|
||||
title='email'
|
||||
>
|
||||
<i
|
||||
class='fa fa-envelope-o fa-2x'
|
||||
aria-hidden='true'
|
||||
></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<article class='profile__about'>
|
||||
<h2>about</h2>
|
||||
<p>
|
||||
Full-Stack Java Developer, with a focus on Front-End
|
||||
Development. I graduated with an Associate of Arts from Lorain
|
||||
County Community College in Spring of 2018. I began building
|
||||
HTML, CSS and JavaScript projects by the Summer of 2020 from
|
||||
courses provided on Udemy. I received my Certificate in Software
|
||||
Development from We Can Code IT in Fall of 2021. Thanks to the
|
||||
courses I've taken, I have developed strong skills needed for
|
||||
working in remote team environments, and ones that utilize Scrum
|
||||
and Agile practices. My passion comes from seeing ideas be
|
||||
brought to life. Let's get to work.
|
||||
</p>
|
||||
</article>
|
||||
<article class='profile__skills' id='skills'>
|
||||
<h2>skills</h2>
|
||||
<ul>
|
||||
<li>Java</li>
|
||||
<li>Spring</li>
|
||||
<li>MVC</li>
|
||||
<li>JavaScript</li>
|
||||
<li>JSON</li>
|
||||
<li>Restful APIs</li>
|
||||
<li>Test Driven Development</li>
|
||||
<li>Relational Databases</li>
|
||||
<li>Git</li>
|
||||
<li>Agile/ Scrum</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>SCSS</li>
|
||||
<li>React</li>
|
||||
<li>Responsive Design</li>
|
||||
<li>Thymeleaf</li>
|
||||
{/* <li>Object Oriented Programming</li> */}
|
||||
</ul>
|
||||
</article>
|
||||
</section>
|
||||
);
|
||||
|
||||
export default Profile;
|
||||
287
src/components/Projects.js
Normal file
287
src/components/Projects.js
Normal file
@@ -0,0 +1,287 @@
|
||||
import React from 'react';
|
||||
|
||||
import wereHooked from '../images/were-hooked.png';
|
||||
import donutClicker from '../images/donut-clicker.png';
|
||||
import mysteryEducator from '../images/mystery-educator.png';
|
||||
import trekkingSite from '../images/trek.png';
|
||||
// import reviewSite from '../images/review-site.png';
|
||||
|
||||
const Projects = () => (
|
||||
<section id='projects'>
|
||||
<h2>projects</h2>
|
||||
|
||||
<article class='project'>
|
||||
<a
|
||||
class='project__img_link'
|
||||
href='https://github.com/lerko96/were-hooked-repo'
|
||||
rel='noreferrer'
|
||||
target='_blank'
|
||||
>
|
||||
<img
|
||||
src={wereHooked}
|
||||
class='project__img'
|
||||
alt='were-hooked-img'
|
||||
/>
|
||||
</a>
|
||||
<div class='project__text'>
|
||||
<h3 class='project__title'>
|
||||
<a
|
||||
href='https://github.com/lerko96/were-hooked-repo'
|
||||
rel='noreferrer'
|
||||
target='_blank'
|
||||
>
|
||||
We're Hooked
|
||||
</a>
|
||||
</h3>
|
||||
<div class='project__subtitle_small'>
|
||||
<time datetime='2021-08-20 12:00:00'>
|
||||
<i class='fa fa-calendar mr-2'></i>Fri, August 20th 2021
|
||||
</time>
|
||||
</div>
|
||||
<div class='project__bar'></div>
|
||||
<div class='project__info'>
|
||||
<p>
|
||||
Designed, built and tested an MVC application that
|
||||
allows users to discover fishing locations in Ohio, as
|
||||
well as teach beginners how to get started fishing and
|
||||
the current regulations that are needed to follow. This
|
||||
project was built between a team of five in a completely
|
||||
remote environment with the help of Github, Zoom and
|
||||
Slack.
|
||||
</p>
|
||||
</div>
|
||||
<ul class='project__tagbox'>
|
||||
<li class='tag__item'>Java</li>
|
||||
<li class='tag__item'>Spring</li>
|
||||
<li class='tag__item'>JavaScript</li>
|
||||
<li class='tag__item'>Restful API</li>
|
||||
<li class='tag__item'>Thymeleaf</li>
|
||||
<li class='tag__item'>HTML</li>
|
||||
<li class='tag__item'>CSS</li>
|
||||
<li class='tag__item'>Responsive Design</li>
|
||||
{/* <li class='tag__item'>TDD</li> */}
|
||||
{/* <li class='tag__item'>VS Code</li> */}
|
||||
<li class='tag__item'>Git</li>
|
||||
<li class='tag__item'>Agile</li>
|
||||
<li class='tag__item'>Scrum</li>
|
||||
<li class='tag__item'>Zoom</li>
|
||||
<li class='tag__item'>Slack</li>
|
||||
</ul>
|
||||
</div>
|
||||
</article>
|
||||
<article class='project'>
|
||||
<a
|
||||
class='project__img_link'
|
||||
href='https://github.com/lerko96/mystery-educator'
|
||||
rel='noreferrer'
|
||||
target='_blank'
|
||||
>
|
||||
<img class='project__img' src={mysteryEducator} alt='' />
|
||||
</a>
|
||||
<div class='project__text'>
|
||||
<h3 class='project__title'>
|
||||
<a
|
||||
href='https://github.com/lerko96/mystery-educator'
|
||||
rel='noreferrer'
|
||||
target='_blank'
|
||||
>
|
||||
Mystery Educator
|
||||
</a>
|
||||
</h3>
|
||||
<div class='project__subtitle_small'>
|
||||
<time datetime='2021-07-23 12:00:00'>
|
||||
<i class='fas fa-calendar-alt mr-2'></i>Fri, July 23rd
|
||||
2021
|
||||
</time>
|
||||
</div>
|
||||
<div class='project__bar'></div>
|
||||
<div class='project__info'>
|
||||
<p>
|
||||
Designed, built and tested a single page application
|
||||
that renders unique data from the MET Museum and NASA
|
||||
APIs each time you visit. We also built a local backend
|
||||
database to store historical information. This project
|
||||
was built between a team of four in a completely remote
|
||||
environemnt with the help of Github, Zoom, and Slack.
|
||||
</p>
|
||||
</div>
|
||||
<ul class='project__tagbox'>
|
||||
<li class='tag__item'>JavaScript</li>
|
||||
|
||||
<li class='tag__item'>Node.js</li>
|
||||
<li class='tag__item'>Spring</li>
|
||||
<li class='tag__item'>RESTful APIs</li>
|
||||
<li class='tag__item'>Java</li>
|
||||
<li class='tag__item'>HTML</li>
|
||||
<li class='tag__item'>CSS</li>
|
||||
<li class='tag__item'>Responsive Design</li>
|
||||
{/* <li class='tag__item'>TDD</li> */}
|
||||
{/* <li class='tag__item'>VS Code</li> */}
|
||||
<li class='tag__item'>Git</li>
|
||||
<li class='tag__item'>Agile</li>
|
||||
<li class='tag__item'>Scrum</li>
|
||||
<li class='tag__item'>Zoom</li>
|
||||
<li class='tag__item'>Slack</li>
|
||||
</ul>
|
||||
</div>
|
||||
</article>
|
||||
<article class='project'>
|
||||
<a
|
||||
class='project__img_link'
|
||||
href='https://github.com/lerko96/donut-clicker-lerko96'
|
||||
rel='noreferrer'
|
||||
target='_blank'
|
||||
>
|
||||
<img
|
||||
class='project__img'
|
||||
src={donutClicker}
|
||||
alt='donut-clicker-img'
|
||||
/>
|
||||
</a>
|
||||
<div class='project__text'>
|
||||
<h3 class='project__title'>
|
||||
<a
|
||||
href='https://github.com/lerko96/donut-clicker-lerko96'
|
||||
rel='noreferrer'
|
||||
target='_blank'
|
||||
>
|
||||
Donut Clicker
|
||||
</a>
|
||||
</h3>
|
||||
<div class='project__subtitle_small'>
|
||||
<time datetime='2021-07-09 12:00:00'>
|
||||
<i class='fas fa-calendar-alt mr-2'></i>Fri, July 9th
|
||||
2021
|
||||
</time>
|
||||
</div>
|
||||
<div class='project__bar'></div>
|
||||
<div class='project__info'>
|
||||
<p>
|
||||
Designed, built and tested a single page application
|
||||
that lets users make virtual donuts via clicking. Once
|
||||
enough donuts are made you have the ability to purchase
|
||||
upgrades such as auto-clickers and clicking-multipliers.
|
||||
</p>
|
||||
</div>
|
||||
<ul class='project__tagbox'>
|
||||
<li class='tag__item'>JavaScript</li>
|
||||
<li class='tag__item'>Node.js</li>
|
||||
<li class='tag__item'>HTML</li>
|
||||
<li class='tag__item'>CSS</li>
|
||||
<li class='tag__item'>Responsive Design</li>
|
||||
<li class='tag__item'>TDD</li>
|
||||
{/* <li class='tag__item'>VS Code</li> */}
|
||||
<li class='tag__item'>Git</li>
|
||||
</ul>
|
||||
</div>
|
||||
</article>
|
||||
<article class='project'>
|
||||
<a
|
||||
class='project__img_link'
|
||||
href='https://github.com/lerko96/trek'
|
||||
rel='noreferrer'
|
||||
target='_blank'
|
||||
>
|
||||
<img
|
||||
class='project__img'
|
||||
src={trekkingSite}
|
||||
alt='trekking-img'
|
||||
/>
|
||||
</a>
|
||||
<div class='project__text'>
|
||||
<h3 class='project__title'>
|
||||
<a
|
||||
href='https://github.com/lerko96/trek'
|
||||
rel='noreferrer'
|
||||
target='_blank'
|
||||
>
|
||||
Trekking Site
|
||||
</a>
|
||||
</h3>
|
||||
<div class='project__subtitle_small'>
|
||||
<time datetime='2021-06-18 12:00:00'>
|
||||
<i class='fas fa-calendar-alt mr-2'></i>Fri, June 18th
|
||||
2021
|
||||
</time>
|
||||
</div>
|
||||
<div class='project__bar'></div>
|
||||
<div class='project__info'>
|
||||
<p>
|
||||
Designed, built and tested an MVC application that lets
|
||||
users discover treks located by continent, region and
|
||||
type. This project was built between a team of four in a
|
||||
completely remote environemnt with the help of Github,
|
||||
Zoom and Slack.
|
||||
</p>
|
||||
</div>
|
||||
<ul class='project__tagbox'>
|
||||
<li class='tag__item'>Java</li>
|
||||
<li class='tag__item'>Spring</li>
|
||||
{/* <li class='tag__item'>OOP</li> */}
|
||||
<li class='tag__item'>HTML</li>
|
||||
<li class='tag__item'>CSS</li>
|
||||
<li class='tag__item'>Responsive Design</li>
|
||||
<li class='tag__item'>TDD</li>
|
||||
{/* <li class='tag__item'>IntelliJ</li> */}
|
||||
<li class='tag__item'>Git</li>
|
||||
<li class='tag__item'>Agile</li>
|
||||
<li class='tag__item'>Scrum</li>
|
||||
<li class='tag__item'>Zoom</li>
|
||||
<li class='tag__item'>Slack</li>
|
||||
</ul>
|
||||
</div>
|
||||
</article>
|
||||
{/* <article class='project'>
|
||||
<a
|
||||
class='project__img_link'
|
||||
href='https://github.com/lerko96/reviews-mvc'
|
||||
rel='noreferrer'
|
||||
target='_blank'
|
||||
>
|
||||
<img
|
||||
class='project__img'
|
||||
src={reviewSite}
|
||||
alt='review-site-img'
|
||||
/>
|
||||
</a>
|
||||
<div class='project__text'>
|
||||
<h3 class='project__title'>
|
||||
<a
|
||||
href='https://github.com/lerko96/reviews-mvc'
|
||||
rel='noreferrer'
|
||||
target='_blank'
|
||||
>
|
||||
Movie Reviews
|
||||
</a>
|
||||
</h3>
|
||||
<div class='project__subtitle_small'>
|
||||
<time datetime='2021-06-04 12:00:00'>
|
||||
<i class='fas fa-calendar-alt mr-2'></i>Fri, June 4th
|
||||
2021
|
||||
</time>
|
||||
</div>
|
||||
<div class='project__bar'></div>
|
||||
<div class='project__info'>
|
||||
<p>
|
||||
Designed, built and tested a Java application for movie
|
||||
reviews.
|
||||
</p>
|
||||
</div>
|
||||
<ul class='project__tagbox'>
|
||||
<li class='tag__item'>Java</li>
|
||||
<li class='tag__item'>SpringJPA</li>
|
||||
<li class='tag__item'>OOP</li>
|
||||
<li class='tag__item'>Thymeleaf</li>
|
||||
<li class='tag__item'>HTML</li>
|
||||
<li class='tag__item'>CSS</li>
|
||||
<li class='tag__item'>Responsive Design</li>
|
||||
<li class='tag__item'>TDD</li>
|
||||
<li class='tag__item'>IntelliJ</li>
|
||||
<li class='tag__item'>Github</li>
|
||||
</ul>
|
||||
</div>
|
||||
</article> */}
|
||||
</section>
|
||||
);
|
||||
|
||||
export default Projects;
|
||||
Reference in New Issue
Block a user