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

Snow Leopards | Anika SW #113

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

Snow Leopards | Anika SW #113

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
e75f57b
Moves index.html from pages dir to root dir. Adds basic elements to h…
anika-sw Nov 26, 2022
9f3f60b
Adds images dir with one image and adds content to About Me page
anika-sw Nov 27, 2022
8139ffc
Changes name of Portfolio nav item to Projects
anika-sw Nov 27, 2022
21453ed
Fixes typo in Contact email
anika-sw Nov 27, 2022
465433b
Adds screenshots of repos to images dir, corrects indentation in port…
anika-sw Nov 27, 2022
4d97f22
Adds descriptions for each project
anika-sw Nov 27, 2022
27dc0c3
Fixes indentations in index.html file
anika-sw Nov 27, 2022
c26893c
Fixes indentation errors and moves p and img elements inside of li el…
anika-sw Nov 27, 2022
bd088cd
Fixes incorrect relative link for homepage
anika-sw Nov 27, 2022
caa5f00
Fixes typos in project descriptions
anika-sw Nov 27, 2022
81bb11e
Removes unneeded punctuation from relative links
anika-sw Nov 27, 2022
493e94d
Adds styles dirrectory and initial css file. Modifies existing html f…
anika-sw Nov 27, 2022
1740f9b
Fixes files based on W3C validation messages
anika-sw Nov 27, 2022
8ba12f0
Adds more images for bio page, flex box to bio page, and updates styl…
anika-sw Nov 27, 2022
6c1e6ea
Adds Ada logo as grid to home page and updates css with relevant rule…
anika-sw Nov 28, 2022
6652b2a
Updates names of grid and flex box ids for clarity and consistency
anika-sw Nov 28, 2022
c634f50
Adds additional rule-sets for hyperlinks to css
anika-sw Nov 28, 2022
dcdb405
Updates pixel nth-child property from background to background-color
anika-sw Nov 28, 2022
a288490
Updates logo size and style
anika-sw Nov 28, 2022
8ed23d3
Updated the logo with more white pixels
anika-sw Nov 28, 2022
578db45
Makes most of the images on the site responsive
anika-sw Nov 28, 2022
ee827cd
Makes flexbox images responsive
anika-sw Nov 28, 2022
999e325
Makes the flex-container responsive
anika-sw Nov 28, 2022
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
Binary file added images/adagrams.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.
Binary file added images/anika-pic.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/ben-&-anika.JPG
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/bodhi.jpg
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/clementine.JPG
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/solar-system-api.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.
Binary file added images/swap-meet.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.
Binary file added images/task-list-api.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.
Binary file added images/viewing-party.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.
212 changes: 212 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,212 @@
<!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>Anika's Portfolio</title>
<link href="styles/style.css" rel="stylesheet">
</head>
<body>
<header>
<h1>Anika's Personal Portfolio</h1>
<nav>
<ul>
<li>
<a href="/pages/about.html">About Me</a>
</li>
<li>
<a href="/pages/portfolio.html">Projects</a>
</li>
</ul>
</nav>
</header>
<main>
<section id="welcome-message">
<h2>Welcome!</h2>
<p>
Thank you for visiting my online portfolio!
</p>
<div id="grid-container">
Copy link

Choose a reason for hiding this comment

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

Interesting! Good practice working on styling a grid and then applying different styles to each little box!

That seems like a tedious job.

In practice, you'd probably grab an image of the logo and use the image tag for it since that's more semantic, but I think you did this for practice with css grid.

<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
</div>
</section>
</main>
<footer>
<h2>© 2022 Anika Stephen Wilbur | C18 Snow Leopards</h2>
<nav>
<ul>
<li>
<a href="mailto:[email protected]">Contact</a>
</li>
</ul>
</nav>
</footer>
</body>
</html>
59 changes: 54 additions & 5 deletions pages/about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,61 @@
<!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>
<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>Anika's Portfolio: About</title>
<link href="/styles/style.css" rel="stylesheet">
</head>
<body>

<header>
<h1>Anika's Personal Portfolio: About Me</h1>
<nav>
<ul>
<li>
<a href="/pages/portfolio.html">Projects</a>
</li>
<li>
<a href="/index.html">Home</a>
</li>
</ul>
</nav>
</header>
<main>
<section>
<h2 class="extra-padding">Bio</h2>
<p class="short-bio">
Hi there! I'm Anika (she/her), part of the Snow Leopards homeroom
for Ada Developer Academy's C18 cohort. Currently, I'm based just
outside of Portland, OR, but I'm originally from sunny Santa Monica, CA.
When I'm not working on assignments for Ada, I like to spend
time with my husband, Ben, and our two rescue cats! 🐾🐾
</p>
<img alt="Anika in a white tunic and blue jeans sitting on a green couch
playing vinyl records" src="/images/anika-pic.jpeg">
</section>
<section>
<h2 class="extra-padding">My Family</h2>
<div id="flex-box-container">
<img class="collage" alt="Clementine, a black cat, staring at Venetian blinds
with the sun on her face" src="/images/clementine.JPG">
<img class="collage" alt="Ben and Anika dressed in warm winter clothes standing
in front of a pink cherry blossom tree" src="/images/ben-&-anika.JPG">
<img class="collage" alt="Close up of Bodhi the cat's face. Bodhi is a grey
and white cat with green eyes and half a grey mustache"
src="/images/bodhi.jpg">
</div>
</section>
</main>
<footer>
<h2>© 2022 Anika Stephen Wilbur | C18 Snow Leopards</h2>
<nav>
<ul>
<li>
<a href="mailto:[email protected]">Contact</a>
</li>
</ul>
</nav>
</footer>
</body>
</html>
12 changes: 0 additions & 12 deletions pages/index.html
View file
Open in desktop

This file was deleted.

93 changes: 88 additions & 5 deletions pages/portfolio.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,95 @@
<!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>
<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>Anika's Portfolio: Projects</title>
<link href="/styles/style.css" rel="stylesheet">
</head>
<body>

<header>
<h1>Anika's Personal Portfolio: Projects</h1>
<nav>
Copy link

Choose a reason for hiding this comment

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

Looks like nav is a child to the header tag, but the indentation is one level off. Think it needs to be indented one more time

<ul>
<li>
<a href="/pages/about.html">About Me</a>
</li>
<li>
<a href="/index.html">Home</a>
</li>
</ul>
</nav>
</header>
<section>
<h2 class="extra-padding">Projects Completed (newest to oldest)</h2>
<nav>
<ol>
<li>
<a href="https://github.com/anika-sw/task-list-api" class="project-title">Task List API</a>
<p>
Worked with SQL, Flask, relational databases, and principles
of CRUD to build an API centered around task completion.
</p>
<img class="project-img" alt="Screenshot of GitHub Task List API repository"
src="/images/task-list-api.png">
</li>
<li>
<a href="https://github.com/anniegallagher/solar-system-api"
class="project-title">Solar System API (collab)</a>
<p>
Worked collaboratively with another Ada student utilizing SQL,
Flask, relational databases, and principles of CRUD to build
an API concerned with planets.
</p>
<img class="project-img" alt="Screenshot of GitHub Solar System API repository"
src="/images/solar-system-api.png">
</li>
<li>
<a href="https://github.com/hokumcangus/swap-meet" class=
"project-title">Swap Meet (collab)</a>
<p>
Worked collaboratively with another Ada student utilizing Python
to build a program for swapping items between vendors and friends.
</p>
<img class="project-img" alt="Screenshot of GitHub Swap Meet repository"
src="/images/swap-meet.png">
</li>
<li>
<a href="https://github.com/ariastroud/adagrams-py" class=
"project-title">AdaGrams (collab)</a>
<p>
Worked collaboratively with another Ada student utilizing Python
to build a game that creates words from randomly selected
(and weighted) tiles. The score for each word is calculated
to determine the game's winner.
</p>
<img class="project-img" alt="Screenshot of GitHub AdaGrams repository"
src="/images/adagrams.png">
</li>
<li>
<a href="https://github.com/anika-sw/viewing-party" class=
"project-title">Viewing Party</a>
<p>
Used Python to build a program that reads the movie
lists for a friend group -- watched movies, favorite movies,
and movies to watch -- in order to generate movie recommendations.
</p>
<img class="project-img" alt="Screenshot of GitHub Viewing Party repository"
src="/images/viewing-party.png">
</li>
</ol>
</nav>
</section>
<footer>
<h2>© 2022 Anika Stephen Wilbur | C18 Snow Leopards</h2>
<nav>
<ul>
<li>
<a href="mailto:[email protected]">Contact</a>
</li>
</ul>
</nav>
</footer>
</body>
</html>
Loading