Skip to content
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

Personal Portfolio - Jennifer N. #119

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

Personal Portfolio - Jennifer N. #119

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
dd91b71
'txt'
datateur Dec 1, 2022
1d1e0b0
'added styles to nav menu'
datateur Dec 3, 2022
98bf0c5
'refactoring'
datateur Dec 3, 2022
1fcad93
Placed footers into body element
datateur Dec 4, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
53 changes: 44 additions & 9 deletions pages/about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,47 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>

</body>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Jennifer</title>
<link href="/styles/style.css" rel="stylesheet">
</head>

<body>
<header>
<h1 class="page-title"> About Jennifer </h1>
<nav class="nav-menu">
<div>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can do without the divs here. Since the divs just wrap the as directly, making the as the direct children of the nav would have the same effect (since the nav has grid styling).

Alternatively, since we should aim for making our markup look good even if the styles are absent, we might logically group the as under a list. It's not necessary when the styles are applied, but can be handy from a logical standpoint.

<a href="/pages/index.html"> Home </a>
</div>
<div>
<a href="/pages/portfolio.html"> Portfolio </a>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Be careful using absolute paths for links/resources. They can simplify refering to files within your site, but they make the assumption that this page will be hosted at the root location of website, which isn't always true for all deployment hosts.

</div>
</nav>
</header>

<!-- about content -->
<main class="about-content">
<div class="reviews">
<h2>Glowing Reviews</h2>
<div>
<p class = "stars"> ⭐⭐⭐⭐⭐ </p>
<blockquote>"Amazing to work with! 5 stars."</blockquote>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Love these quotes! 😁

<p class = "stars"> ⭐⭐⭐⭐⭐ </p>
<blockquote>"She will go above and beyond to build you what you need."</blockquote>
<p class = "stars"> ⭐⭐⭐⭐⭐ </p>
<blockquote>"Never hiring anyone else again. Thanks Jennifer!"</blockquote>
</div>
</div>
<div class="bio">
<h2>Biography</h2>
<p> Jennifer likes to lorem ipsum in her free time.</p>
<img class="chow" src="images/chowchow-de43c9.png" alt="A chowchow-de43c9">
</div>
</main>
<footer>
<h2>&copy; 2022</h2>
</footer>
</body>
</html>
Binary file added pages/images/chowchow-de43c9.png
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.
52 changes: 43 additions & 9 deletions pages/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,46 @@
<!DOCTYPE html>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Prefer not to nest the images folder within the pages folder.

<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>

</body>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jennifer's Portfolio Page</title>
<link href="/styles/style.css" rel="stylesheet">
</head>

<body>
<!-- Nav Bar -->
<header>
<nav class="nav-menu">
<div>
<a href="/pages/portfolio.html"> Portfolio </a>
</div>
<div>
<a href="/pages/about.html"> About</a>
</div>
</nav>
</header>

<!-- hero page -->
<main class="hero-page-content">
<h2>Hi, I'm Jennifer</h2>
<p> and I write <code>#code</code> in:</p>
<ul>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I might style this to remove the bullets and left margin. That would logically keep these a lit, but visually center them along with the rest of the content.

<li>Python</li>
<li>Java</li>
<li>SQL</li>
<li>C++</li>
<li>Javascript</li>
</ul>
<section id="contact">
<h3>Contact</h3>
<p>[email protected]</p>
<a href="https://www.github.com/datateur">Github</a>
<a href="https://www.linkedin.com/in/jennifer-nouel-b72ba5172/">LinkedIn</a>
</section>
</main>
<footer>
<h2>&copy; 2022</h2>
</footer>
</body>
</html>
58 changes: 49 additions & 9 deletions pages/portfolio.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,52 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>

</body>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jennifer's Portfolio</title>
<link href="/styles/style.css" rel="stylesheet">
</head>

<body>
<!-- nav menu -->
<header>
<h1 class="page-title"> Portfolio</h1>
<nav class="nav-menu">
<div>
<a href="/pages/index.html"> Home </a>
</div>
<div>
<a href="/pages/about.html"> About </a>
</div>
</nav>
</header>

<!-- portfolio -->
<main class="portfolio">
<div id="project_1">
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Consider using a section for each of these, since they have a heading and additional content.

<h2> Solar System API</h2>
<p> Lorem ipsum....</p>
<a href="https://github.com/datateur/solar-system-api"> See on Github </a>
</div>
<div id="project_2">
<h2> Viewing Party</h2>
<p> Lorem ipsum....</p>
<a href="https://github.com/datateur/viewing-party"> See on Github </a>
</div>
<div id="project_3">
<h2> Task List API</h2>
<p> Lorem ipsum....</p>
<a href="https://github.com/datateur/task-list-api"> See on Github </a>
</div>
<div id="project_4">
<h2> Swap Meet</h2>
<p> Lorem ipsum....</p>
<a href="https://github.com/datateur/swap-meet"> See on Github </a>
</div>
</main>
<footer>
<h2>&copy; 2022</h2>
</footer>
</body>
</html>
63 changes: 63 additions & 0 deletions styles/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@

/* ----------------- all pages -------------------- */

body {
background-image: linear-gradient(
180deg,
rgba(47, 128, 237, 1),
rgba(178, 255, 218, 1)
);
}

.page-title {
text-align: left;
}

.nav-menu {
display: grid;
grid-template-columns: auto auto;
text-decoration: none;
text-align: center;
}

/* links */
a {
color: black;
text-decoration: none;
}

footer {
text-align: left;
}

/* ------------------------------------- */

main.hero-page-content {
color: white;
text-align: center;
}

main.about-content, div.reviews h2{
display: flex;
flex-wrap: wrap;
justify-content: center;
color: white;
}

div.bio {
text-align: center;
}

main.portfolio {
display: grid;
grid-template-columns: auto auto;
justify-content: center;
color: white;
padding: 30px;
row-gap: 30px;
column-gap: 50px;
}

.stars {
text-align: center;
}
Loading