Skip to content

Tim Zoltie #75

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
tzoltie wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Tim Zoltie #75

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
3 changes: 3 additions & 0 deletions .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5501
}
73 changes: 72 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,77 @@
<title>Full Stack Portfolio</title>
</head>
<body>

<div class="container">
<div class="page-open">
<header>
<div class="header-container">
<h2>Tim Zoltie</h2>
<ul class="list-container">
<li><a href="#about-me">About Me</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#experience">Experience</a></li>
</ul>
</div>
</header>
<main>
<div class="main-heading">
<h1>Hiring a Full-Stack Developer?</h1>
<p>I have experience with React, NodeJS and Typescript. I would love to work in an exciting enviornment that is striving to be at the cutting edge of software engineering.</p>
</div>
</main>
</div>

<section id="about-me">
<h2>ABOUT ME</h2>
<div class="intro">
<h3>Introduction</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nisi magni explicabo eligendi. Est nulla aut libero non tenetur ullam fuga magnam voluptate in esse a, tempora vitae accusantium distinctio quo.</p>
</div>
<div class="skills">
<h3>Technical Skills</h3>
<ul class="skills-list">
<li>HTML & CSS</li>
<li>Javasctipt</li>
<li>Typescript</li>
<li>React</li>
<li>Redux</li>
<li>NodeJS</li>
</ul>
</div>
</section>
<section id="portfolio">
<h2>PORTFOLIO</h2>
<div class="portfolio-container">
<div class="item-1">
<h3>Scrabble Challenge</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi laudantium officiis aliquid consequatur hic perspiciatis voluptatibus tempora nam corrupti maiores ullam, quis natus iusto doloremque alias provident soluta quam reprehenderit.</p>
<h4><a href="https://github.com/tzoltie/js-scrabble-challenge/blob/main/README.md" target="_blank">READ MORE</a></h4>
<p><a href="https://github.com/tzoltie/js-scrabble-challenge" target="_blank">GitHub Repo</a></p>
</div>
<div class="item-2">
<h3>FizzBuzz</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae laboriosam atque adipisci similique. Sequi eaque, minima illo reiciendis magnam reprehenderit recusandae ducimus numquam quasi eius laborum eos quibusdam officia dolore!</p>
<h4><a href="https://github.com/tzoltie/js-fizzbuzz/blob/main/README.md" target="_blank">READ MORE</a></h4>
<p><a href="https://github.com/tzoltie/js-fizzbuzz" target="_blank">GitHub Repo</a></p>
</div>
<div class="item-3">
<h3>Softplay</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam quod animi earum ipsum mollitia omnis amet voluptatibus architecto temporibus libero nisi, voluptatem perferendis autem aliquid numquam sunt laborum ducimus? Id.</p>
<h4><a href="https://github.com/tzoltie/js-softplay/blob/main/README.md" target="_blank">READ MORE</a></h4>
<p><a href="https://github.com/tzoltie/js-softplay" target="_blank">GitHub Repo</a></p>
</div>
</div>
</section>
<section id="experience">
<h2>EXPERIENCE</h2>
<h4>Job Title</h4>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cupiditate similique quos obcaecati reiciendis? Tempore neque expedita non dolore animi placeat vero quidem! Asperiores at voluptates ratione perferendis. Possimus, ducimus temporibus.</p>
<h4>Job Title</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum architecto earum reiciendis labore accusamus, laudantium nihil. Assumenda pariatur, aut ipsam velit corrupti, quo obcaecati reprehenderit quia esse porro accusantium quaerat!</p>
</section>
</div>
<footer>
<h5>Tim Zoltie</h5>
</footer>
</body>
</html>
163 changes: 163 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,163 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;

display: grid;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}


script, title {
display: none;
}

.page-open {
height: 100vh;
background-color: rgb(26, 208, 181);
}

.header-container {
grid-auto-columns: 1fr;
grid-auto-flow: column;
gap: 1rem;
margin: 20px;
}

.list-container {
list-style: none;
grid-auto-columns: 6rem;
grid-auto-flow: column;
gap: 2rem;
margin-left: 50%;
}

.list-container li {
border: 2px solid white;
background-color: white;
border-radius: 6px;
padding: 5%;
}
.list-container li a {
background-color: white;
color: rgb(26, 208, 181);
text-decoration: none;
}

.main-heading {
grid-auto-rows: 1fr;
grid-auto-flow: row;
place-content: center;
margin: 10rem;
color: white;
gap: 8%;
}
.main-heading h1 {
font-size: 7rem;
margin: 0 15rem;
}

.main-heading p {
margin: 0 15rem;
}

#about-me {
width: 100%;
background-color: white;
padding: 3rem 0;
height: 100%;
border-top: 6px solid black;
border-bottom: 6px solid black;
}
.intro {
margin: 2rem 25rem 2rem 25rem;
gap: 1rem;
background-color: white;
}


#about-me h2 {
place-items: center;
font-size: 200%;
}

#about-me h2, #about-me h4, #about-me p, #about-me li {
background-color: white;
}

.skills {
background-color: white;
margin: 2rem 25rem 2rem 25rem;
gap: 1rem;
}
.skills-list {
display: grid;
grid-template-columns: 1fr 1fr;
}

#portfolio {
place-items: center;
background-color: rgb(255, 227, 232);
height: 123%;
border-bottom: 6px solid black;
}
#portfolio h2 {
background-color: rgb(255, 227, 232);
font-size: 200%;
}
#portfolio h3 {
font-size: 150%;
}
.portfolio-container {
grid-auto-columns: 1fr;
grid-auto-flow: column;
background-color: rgb(255, 227, 232);

}

.portfolio-container .item-1, .portfolio-container .item-2, .portfolio-container .item-3 {
border: 6px solid rgb(185, 73, 73);
border-radius: 5%;
padding: 1rem 1rem;
background-color: white;
margin: 1rem 5rem;
}

.portfolio-container h4 a {
border: 2px solid rgb(185, 73, 73);
border-radius: 5px;
padding: 5px;
background-color: rgb(185, 73, 73);
place-content: center;
color: white;
}

.portfolio-container p, h3, a {
background-color: white;
}

.portfolio-container p {
place-content: center;
color: rgb(185, 73, 73);
margin: 1rem;
}

#experience h2, #experience h4, #experience p {
background-color: white;
margin: 1rem 25rem;
height: 100%;
gap: 1rem;
}

#experience {
background-color: white;
margin-top: 7rem;
padding: 5%;
}

footer h5 {
width: 100%;
background-color: black;
color: white;
padding: 1%;
}