Skip to content

Will Baxter #79

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
MrStashy wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Will Baxter #79

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1123c42
Completed layout, links, and responsiveness
MrStashy Mar 11, 2024
23e34e4
Debug, touch ups, fixes
MrStashy Mar 11, 2024
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
68 changes: 68 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,74 @@
<title>Full Stack Portfolio</title>
</head>
<body>
<hr/>
<nav>
<div class="name">Ella Magnifica</div>
<div class="navbuttons">
<a href="#about-me">About Me</a>
<a href="#portfolio">Portfolio</a>
<a href="#experience">Experience</a>
</div>
</nav>

<div class="container">
<section class="hero">

<h1>Hiring A<br>Full-Stack<br>Developer?</h1><br>
<p>I have experience with <ins class="black-text">React</ins>, <ins class="black-text">NodeJS</ins>, <ins class="black-text">Typescript</ins>. I would love to work at an <ins class="underlined-italic">innovative</ins> and <ins class="underlined-italic">eco-friendly</ins> start-up in the <ins class="black-text">sustainable energy sector.</ins></p>

</section>
<hr/>
<section class="about-me" id="about-me">
<h2>ABOUT ME</h2>
<br>
<h3>Introduction</h3><br>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Excepturi assumenda similique laboriosam pariatur voluptates ut. Distinctio suscipit sunt asperiores debitis libero? Facere laudantium nostrum beatae accusantium aspernatur ipsum rem a?Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum ut ducimus nobis quae quo rem itaque mollitia doloribus necessitatibus? Quaerat, autem. Sint possimus accusantium, facere accusamus quos commodi! Veritatis, quis!</p><br>
<h3>Technical Skills</h3><br>
<ul>
<li>HTML & CSS</li>
<li>Javascript</li>
<li>Typescript</li>
<li>React</li>
<li>Redux</li>
<li>NodeJS</li>
</ul>
</section>


<hr/>
<section class="portfolio" id="portfolio">
<h2>PORTFOLIO</h2><br>
<div class="project-container">
<div class="project1">
<h3>Project 1</h3><br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam perspiciatis maxime aliquid qui veritatis iste id omnis eos, mollitia tenetur dolorum explicabo, officia, iusto eius! Totam consequuntur asperiores reiciendis quam!</p><br>
<a href="project1.html" class="portfolio-button">READ MORE</a><br>
<a class="git-button" href="https://github.com/">GitHub Repo</a>
</div>
<div class="project2">
<h3>Project 2</h3><br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam perspiciatis maxime aliquid qui veritatis iste id omnis eos, mollitia tenetur dolorum explicabo, officia, iusto eius! Totam consequuntur asperiores reiciendis quam!</p><br>
<a href="project2.html" class="portfolio-button">READ MORE</a><br>
<a class="git-button" href="https://github.com/">GitHub Repo</a>
</div>
<div class="project3"> <h3>Project 3</h3><br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam perspiciatis maxime aliquid qui veritatis iste id omnis eos, mollitia tenetur dolorum explicabo, officia, iusto eius! Totam consequuntur asperiores reiciendis quam!</p><br>
<a href="project3.html" class="portfolio-button">READ MORE</a><br>
<a class="git-button" href="https://github.com/">GitHub Repo</a>
</div>
</div>
</section>
<hr>
<section class="experience" id="experience">
<h2>EXPERIENCE</h2>
<br>
<h3>Job Title</h3><br>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Excepturi assumenda similique laboriosam pariatur voluptates ut. Distinctio suscipit sunt asperiores debitis libero? Facere laudantium nostrum beatae accusantium aspernatur ipsum rem a?Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum ut ducimus nobis quae quo rem itaque mollitia doloribus necessitatibus? Quaerat, autem. Sint possimus accusantium, facere accusamus quos commodi! Veritatis, quis!</p><br>
<h3>Job Title</h3><br>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Excepturi assumenda similique laboriosam pariatur voluptates ut. Distinctio suscipit sunt asperiores debitis libero? Facere laudantium nostrum beatae accusantium aspernatur ipsum rem a?Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum ut ducimus nobis quae quo rem itaque mollitia doloribus necessitatibus? Quaerat, autem. Sint possimus accusantium, facere accusamus quos commodi! Veritatis, quis!</p><br>
</section>
</div>
<footer><p>Ella Magnifica&#169</p></footer>
</body>
</html>
1 change: 1 addition & 0 deletions project1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
This is where you'll find all info on project 1
1 change: 1 addition & 0 deletions project2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
This is where you'll find all info on project 2
1 change: 1 addition & 0 deletions project3.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
This is where you'll find all info on project 3
194 changes: 194 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,194 @@
* {
margin: 0;
box-sizing: border-box;
font-family: sans-serif
}


.container {
grid-auto-flow: rows;
background-color:white;
}

a {
text-decoration: none;
color: inherit;
}

.black-text {
text-decoration: none;
color: black;
}

.underlined-italic {
text-decoration-color: black;
font-style: italic;
}

hr {
background-color: black;
height:7px;
border: none;
}

nav {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
background-color:#4EB6AC
}


nav .name {
font-weight: bold;
display: grid;
width: auto;
align-items:center;
padding-left: 1rem;
color: #E5FFFF
}

nav .navbuttons {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
padding: 10px;
text-align: center;
place-self: end;
gap: 30px;
color: #4EB6AC;
}

.navbuttons a {
padding: 5px;
border-radius: 5px;
width: 100px;
background-color: #E5FFFF;
transition: background-color 0.3s ease
}

.navbuttons a:hover {
background-color: #f6ffe5;
}
.container .hero {
margin-inline: auto;
padding-top: 100px;
padding-bottom: 100px;
background-color:#4EB6AC;

}

.hero h1, .hero p {
width: 420px;
color: #E5FFFF;
margin-inline: auto;
}

h2 {
text-align: center;
}

.about-me {
background-color: white;
padding-top: 30px;
padding-bottom: 30px;
width: 420px;
margin-inline: auto;
}

.about-me ul {
column-count: 2;
}

.portfolio {
padding-top: 30px;
padding-bottom: 30px;
background-color: #FFEBEE;
}

.portfolio .project-container {
display: grid;
grid-template-columns: repeat(3, minmax(200px, 300px));
justify-content: center;
}

.project-container div {
font-size: 12px;
border: 5px solid #AE1557;
border-radius: 4px;
box-shadow: 5px 5px 5px rgba(102, 102, 102, 0.366) ;
padding: 15px;
background-color: white;
margin-left: 15px;
margin-right: 15px;
}

.portfolio-button {
text-align: center;
background-color: #AE1557;
display: flex;
justify-content: center;
align-items: center;
padding:5px;
font-weight: bold;
color: white;
border-radius: 5px;

}

.portfolio .git-button {
color: #AE1557;
display: flex;
justify-content: center;
text-decoration: underline;
}

.experience {
margin-top: 30px;
margin-bottom: 30px;
width: 420px;
margin-inline: auto;
}

footer {
width: 100%;
font-size: 12px;
height: 40px;
background-color: #1D303A;
padding-left: 30px;
justify-content: center;
line-height: 40px;
color: #E5FFFF
}

@media screen and (max-width: 576px) {
nav .navbuttons {
display: grid;
grid-template-columns: unset;
grid-template-rows: 1fr 1fr 1fr;
text-align: center;
gap: 10px;
padding-top: 10px;
padding-bottom: 10px;
}

nav .name {
display: grid;
width: auto;
text-align: center;
align-items: center;
}

.portfolio .project-container {
all: unset;
display: grid;
width: 390px;
grid-template-rows: repeat(3, 190px);
gap: 10px;
margin-inline: auto;
}

.about-me ul {
column-count: 3;
}

}