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

Jump to bottom

C15A - portfolio #8

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

C15A - portfolio #8

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
64 changes: 64 additions & 0 deletions about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name= "viewport" content="width=device-width">
<!-- Styles -->
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<nav>
<a href="#" class="navbar">
Nathalia Cervantes </a>

<ul class="nav-list">
<li class="nav-item"><a href="index.html">Index</a></li>
<li class="nav-item"><a href="about.html">About</a></li>
<li class="nav-item"><a href="portfolio.html">Portfolio</a></li>
<li class="nav-item"><a href="blog.html">Blog</a></li>
</ul>
</nav>
Comment on lines +11 to +21
Copy link

Choose a reason for hiding this comment

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

great use of the nav tag

</header>

<!-- Main content area -->
<div id="main">
<div class = "img" >
<img src="images/photo.jpeg "/>
Copy link

Choose a reason for hiding this comment

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

when you use an image tag you want to add an alt attribute that describes the picture. This for accessibility purposes or if your image does not appear the alt text will show in its place. Learn more about it here.

</div>
<article class="about">
<h2 id="projects">About</h2>
<p>Detail-oriented and driven entry-level software engineering professional with organized nature, customer-focused
mindset and good critical thinking skills. Fluent in JavaScript and Ruby programming languages used
to develop Web Applications. Proud team player focused on achieving project objectives with speed and
accuracy.</p>

<h2 id="hobbies">Hobbies</h2>

<ul>
<li>I love watch new shows on Netflix</li>
<li>I love traveling</li>
<li>I'm into</li>
<li>I love traveling</li>
<li>I'm into</li>
</ul>

<h2 id="fun-facts">Fun Facts</h2>
<p>I have travel in 3 different continents</p>
<ul>
<li>Dive</li>
<li>Camping</li>
<li>I love traveling</li>
<li>I'm into</li>
<li>I climb a vulcan</li>
<li>I love traveling</li>
<li>I'm into</li>
</ul>
</article>
Comment on lines +29 to +57
Copy link

Choose a reason for hiding this comment

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

Love this section about you!

</div>
</div>
<footer>
&copy; 2021 Nathalia Cervantes, All Rights Reserved.
</footer>
</body>
</html>
60 changes: 60 additions & 0 deletions blog.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name= "viewport" content="width=device-width">
<!-- Styles -->
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<nav>
<a href="#" class="navbar">
Nathalia Cervantes </a>

<ul class="nav-list">
<li class="nav-item"><a href="index.html">Index</a></li>
<li class="nav-item"><a href="about.html">About</a></li>
<li class="nav-item"><a href="portfolio.html">Portfolio</a></li>
<li class="nav-item"><a href="blog.html">Blog</a></li>
</ul>
</nav>
Comment on lines +11 to +21
Copy link

Choose a reason for hiding this comment

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

Jquery is a javascript library that you can use to make your nav bar reusable? I know this project focused on HTML/CSS but its a fun library to look into. Here is an example explaining how to implement it.

</header>

<!-- Main content area -->
<div id="main">
<article class="about">
<h2 id="projects">About</h2>
</article>
<h2 id="hobbies">Hobbies</h2>

<ul>
<li>I love watch new shows on Netflix</li>
<li>I love traveling</li>
<li>I'm into</li>
<li>I love traveling</li>
<li>I'm into</li>
</ul>

<h2 id="fun-facts">Fun Facts</h2>
<p>I have travel in 3 different continents</p>
<ul>
<li>Dive</li>
<li>Camping</li>
<li>I love traveling</li>
<li>I'm into</li>
<li>I climb a vulcan</li>
<li>I love traveling</li>
Comment on lines +31 to +47
Copy link

Choose a reason for hiding this comment

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

this is repeated info from your about page. If you just want placeholder text you can use an example like this

<li>I'm into</li>

<p>Link:<a href="https://techtonicaorg.medium.com/apprentice-story-nathalia-c24a9c9048a2">Nathalia Cervantes </a></p>

</ul>
</div>
</div>

<footer>
&copy; 2021 Nathalia Cervantes, All Rights Reserved.
</footer>
Comment on lines +56 to +58
Copy link

Choose a reason for hiding this comment

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

Look at the JQuery resource I commented above to also make your footer reusable.

</body>
</html>
Binary file added images/background.jpeg
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.
Binary file added images/photo.jpeg
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.
32 changes: 32 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="utf-8">
<meta name= "viewport" content="width=device-width">
<!-- Styles -->
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<nav>
<a href="#" class="navbar">
Nathalia Cervantes </a>

<ul class="nav-list">
<li class="nav-item"><a href="index.html">Index</a></li>
<li class="nav-item"><a href="about.html">About</a></li>
<li class="nav-item"><a href="portfolio.html">Portfolio</a></li>
<li class="nav-item"><a href="blog.html">Blog</a></li>
</ul>
</nav>
</header>
<div class="banner">
</div>
<footer>
<p>Copyright 2021 Nathalia Cervantes</p>
</footer>
</body>

</html>
66 changes: 66 additions & 0 deletions portfolio.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name= "viewport" content="width=device-width">
<!-- Styles -->
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<nav>
<a href="#" class="navbar">
Nathalia Cervantes </a>

<ul class="nav-list">
<li class="nav-item"><a href="index.html">Index</a></li>
<li class="nav-item"><a href="about.html">About</a></li>
<li class="nav-item"><a href="portfolio.html">Portfolio</a></li>
<li class="nav-item"><a href="blog.html">Blog</a></li>
</ul>
</nav>
</header>

<!-- Main content area -->
<div id="main">
<div class = "img" >
<img src="images/photo.jpeg "/>
</div>
<article class="projects">
<h2 id="projects">Projects</h2>
Copy link

Choose a reason for hiding this comment

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

This is the same title as the one on line 36. Was that intended?

<p>Detail-oriented and driven entry-level software engineering professional with organized nature, customer-focused
mindset and good critical thinking skills. Fluent in JavaScript and Ruby programming languages used
to develop Web Applications. Proud team player focused on achieving project objectives with speed and
accuracy.</p>

<h2 id="projects">Projects</h2>

<p>Description:</p>
<ul>
<li>Create a class to tie together data and methods</li>
<li>Create a endpoint which manages a collection of other objects</li>
<li>Write code that interacts with the api routes</li>
</ul>
<p>Skills: Python, Flask</p>
<p>Link:<a href="https://github.com/cervantesnathalia/solar-system-api">Solar System</a></p>
Copy link

Choose a reason for hiding this comment

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

I would add some type of styling to your project name to make the link stand out to users.

<p>Project done in collaboration with Karolina Benitez</p>

<h2 id="fun-facts">Fun Facts</h2>
<p>I have travel in 3 different continents</p>
<ul>
<li>Dive</li>
<li>Camping</li>
<li>I love traveling</li>
<li>I'm into</li>
<li>I climb a vulcan</li>
<li>I love traveling</li>
<li>I'm into</li>
</ul>
Comment on lines +49 to +58
Copy link

Choose a reason for hiding this comment

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

since you already using this in your about page, I would suggest adding some fun facts about working on your projects or learning to code.

</article>
</div>
</div>
<footer>
&copy; 2021 Nathalia Cervantes, All Rights Reserved.
</footer>
</body>
</html>
140 changes: 140 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,140 @@
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: sans-serif;
background-color:black;
color:white;
margin: 0;
}

header {
width: 100%;
background-color: black;
position: fixed;
height: 60px;
box-shadow: 0 2px 5px #444;
display: flex;
align-items: center
}

main {
color: #333333;
padding: 5px 0;
margin: 0 auto;
text-align: center;
}

nav {
width: 100%;
display: flex;
align-items: center;
padding: 0 15px;
justify-content: space-between;
}

.navbar {
font-size: 24px;
color: white;
text-decoration: none;
cursor: pointer;
}

.nav-list {
color: white;
list-style: none;
}

.nav-item {
display: inline-block;
margin-right: 10px;
transition: all 0.3s ease-out;
cursor: pointer;

}

.nav-item:hover {
text-decoration: underline;
}

.nav-item: last-of-type {
margin-right: 0;

}

.banner {
width: 100%;
height: 100vh;
background-image: url("./images/background.jpeg");
background-repeat: no-repeat;
background-size: cover;
}

.info-wrap{
position: relative;
top: 25%;
left: 50%;
transform: translateX(-50%);
}

.info-container {
color: white;
font-size: 48px;
display: flex;
flex-direction: column;
align-item: center;

}

footer {
background-color: #333;
color: white;
text-align: center;
padding: 5px 0;
margin: 0 auto;
}

a {
text-decoration:none;
color: white;
text-decoration: none;
cursor: pointer;
}

h1 {
font-size: 32px;
}

h2 {
font-size: 24px;
text-align: center;
padding: 10px 0;
}

.about {
width: 700px;
border: 1px;
padding: 0 0;
margin: 0 auto;
}

.img{
Copy link

@tgoslee tgoslee Jul 5, 2021 •
edited
Loading

Choose a reason for hiding this comment

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

I would also look into the top property to move your image so that is not being cut off by the nav bar https://www.w3schools.com/cssref/pr_pos_top.asp


width: 20%;
height: 30%;
text-align: center;
margin: auto;
float: center;
Copy link

Choose a reason for hiding this comment

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

I would look into using flex or grid for aligning your elements. It is more responsive than float. https://css-tricks.com/snippets/css/a-guide-to-flexbox/

padding: 10px 0;

}

.projects {
width: 700px;
border: 1px;
padding: 0 0;
margin: 0 auto;
}