Sharks - Camilla

README.md

@@ -1,97 +1,2 @@
-# Personal Portfolio Site
+# Personal Portfolio
 
-## Introduction
-
-It is common for developers to create a website to show off their web-dev skills and document their work and interests. These sites often feature things like:
-
-- A professional introduction of themselves, careers, and interests
-- A portfolio of projects that they've created and/or collaborated on
-- A blog to share their experiences, thoughts, and/or subject matter expertise
-- Other materials to share any non-coding interests and hobbies
-- A site designed to express themselves
-
-We will use HTML & CSS to create a static site whose content is our personal portfolio. Our personal portfolio site should contain information about ourselves and the coding work we've done.
-
-### Some Inspiration
-- [http://lizabinante.com/](http://lizabinante.com/)
-- [http://where.coraline.codes/](http://where.coraline.codes/)
-- [http://danisaurus.github.io/](http://danisaurus.github.io/)
-- [http://www.fenslattery.com/](https://fenslattery.com/)
-- [https://www.heyellieday.com/](https://heyellieday.com/)
-- [http://car.oline.codes/](http://car.oline.codes/)
-
-## Learning Goals:
-- Practice creating semantic HTML
-- Practice applying visual styles with CSS
-- Use both HTML & CSS together to create a comprehensive design
-
-## Project Requirements
-
-### Only Use Static HTML and CSS
-
-We should only use static HTML and CSS for this project. Preprocessors (haml, erb, sass, less, etc.) and Javascript of any kind are not allowed. All submitted HTML needs to pass as valid HTML through an [HTML Validator](https://validator.w3.org/).
-
-## Wave 1 - Basic HTML
-
-This portfolio site must have the following HTML files:
-
-- `index.html` must include your name somewhere.
-
-- `about.html` should include some information about you, your interests, background or similar. Only post what you are comfortable sharing.
-
-- `portfolio.html` must include information about several projects you have completed at Ada (or elsewhere) with links to the GitHub repo (if available), descriptions, images, etc.
-
-### Layout
-
-Each page in this project must comply with the following layout requirements:
-
-- Has the following tags: `<header>`, `<footer>`, and `<nav>`
-- Inside of the `<nav>`, there are links to all of the other pages
-
-## Wave 2 - Styling
-
-### Required Content
-
-- Uses at least one CSS file (likely named `style.css`)
-
-## Wave 3 - Layout
-
-### Required Content
-
-Present the elements on the page as you see fit by using the following at least once:
-* a grid container with a few grid items
-* a flexbox container with a few flex items
-
-Both of these containers do not need to be on the same page. Try using one for one page, and the other for another page!
-
-<details>
-<summary>If you need some inspiration, here are two common layouts you can replicate</summary>
-
-![Personal Portfolio Wfireframe Example 1](./assets/personal-portfolio_wireframe1.png)  
-
-![Personal Portfolio Wfireframe Example 2](./assets/personal-portfolio_wireframe2.png)  
-</details>
-</br>
-
-### Non-Functional Requirements
-
-The site should follow best practices, including:
-  - All markup should be semantic, with consideration of hierarchy and accessibility
-  - CSS should be concise and well-formatted
-  - Images and stylesheets should be kept in their own folders, called `images` and `stylesheets`, respectively
-  - Run your site through an [HTML Validator](https://validator.w3.org/#validate_by_upload) and fix all errors before submitting
-
-### Optional Enhancements
-
-- Create a `blog/` or `code-journal/` directory. Within this directory...
-  - create single `html` file for each entry in your blog/journal
-  - update the nav on the rest of your site to reference each entry as a sublist/subnav.
-  - update any tags with path references (`img`, `link`, `a` tags) to accommodate for the entries being in a different directory.
-- Create any number of additional pages or directories.
-
-### A Word of Caution
-
-A lot of developers find their initial foray into CSS frustrating. Every browser implements the CSS standard a little (or a lot) differently. Learning to manipulate elements and understand the _box model_ takes time. Layout can be especially challenging to developers new to CSS. For this project, focus on understanding the mechanics and semantics of HTML and CSS, and how the two work together.
-
-### Optional: Deploy with GitHub Pages
-Want more? Make your site live on the internet! There are a lot of ways to go about hosting a live website, but GitHub provides a way to host static sites for free using your GitHub account. [Follow the steps listed here](https://pages.github.com/).

pages/about2.html

@@ -0,0 +1,71 @@
+<!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">
+  <link rel="stylesheet" type="text/css" href="../styles/style-flexbox.css">
+  <title>About</title>
+</head>
+
+<body>
+
+  <header class="portfolio">
+    <h1 class="title">
+      Camilla Berretta, full-stack developer
+    </h1>
+  </header>
+
+  <main>
+    <section>
+      <h1 class="othertitle">
+        ABOUT
+      </h1>
+      <p class="about">
+        I used to spend a lot of time practicing and playing in symphonies
+        until the pandemic shut concert halls down.
+        Then I tried coding and it was a lot of fun.
+      </p>
+
+      <p class="about">
+        A noir, E blanc, I rouge, U vert, O bleu1 : voyelles,
+        Je dirai quelque jour vos naissances latentes:
+        A, noir corset velu des mouches éclatantes
+        Qui bombinent2 autour des puanteurs cruelles3,
+
+        Golfes d'ombre ; E, candeurs4 des vapeurs et des tentes,
+        Lances des glaciers fiers, rois blancs, frissons d'ombelles;
+        I, pourpres, sang craché, rire des lèvres belles
+        Dans la colère ou les ivresses pénitentes ;
+
+        U, cycles, vibrements divins des mers virides6,
+        Paix des pâtis semés d'animaux, paix des rides
+        Que l'alchimie imprime aux grands fronts studieux ;
+
+        O, Suprême Clairon7 plein des strideurs étranges,
+        Silences traversés des Mondes et des Anges :
+        - Ô l'Omega, rayon violet de Ses Yeux !
+
+        A. Rimbaud
+
+        Manuscrit autographe confié à Emile Blémont.
+      </p>
+
+    </section>
+
+  </main>
+
+  <footer>
+    <nav class="footer">
+      <ul>
+        <li><a class="logo" href="../pages/index.html">home</a></li>
+        <li><a class="logo" href="../pages/portfolio.html">portfolio</a></li>
+        <li><a class="logo" href="https://github.com/camilla122333">contact</a></li>
+      </ul>
+    </nav>
+  </footer>
+
+</body>
+
+</html>

pages/index.html

@@ -1,12 +1,56 @@
 <!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>
+  <link rel="stylesheet" type="text/css" href="../styles/style-flexbox.css">
+  <title>Camilla Berretta Dev</title>
 </head>
+
 <body>
-
+
+  <header class="portfolio">
+    <h1 class="title">
+      Camilla Berretta, full-stack developer
+    </h1>
+  </header>
+
+  <main>
+    <nav class="box flex">
+      <p>
+        <a href="../pages/portfolio.html">
+          <img src="../assets/cheetah.png" alt="cheetah" class="center greyscalehover">
+          portfolio
+        </a>
+      </p>
+      <p>
+        <a href="../pages/about2.html">
+          <img src="../assets/dolphin.png" alt="dolphin" class="center">
+          about
+        </a>
+      </p>
+      <p>
+        <a href="../pages/portfolio.html">
+          <img src="../assets/fox2.png" alt="fox" class="center">
+          contact
+       </a>
+      </p>
+    </nav>
+
+  </main>
+
+  <footer>
+    <nav class="footer">
+      <ul>
+        <li><a class="logo" href="https://github.com/camilla122333">github</a></li>
+        <li><a class="logo" href="https://linkedin.com">linkedin</a></li>
+        <li><a class="logo" href="https://twitter.com">twitter</a></li>
+      </ul>
+    </nav>
+  </footer>
+
 </body>
+
 </html>

pages/portfolio.html

@@ -1,12 +1,79 @@
 <!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>
+  <link rel="stylesheet" type="text/css" href="../styles/style-portfolio.css">
+  <title>Portfolio</title>
 </head>
+
 <body>
-
+  <main class="grid-parent">
+    <header>
+      <h1 class="title">
+        Camilla Berretta, full-stack developer
+      </h1>
+    </header>
+    <section>
+    </section>
+
+    <article>
+      <h1>My Portfolio</h1>
+      <p>
+        C'est un trou de verdure où chante une rivière,
+        Accrochant follement aux herbes des haillons
+        D'argent ; où le soleil, de la montagne fière,
+        Luit : c'est un petit val qui mousse de rayons.
+
+        Un soldat jeune, bouche ouverte, tête nue,
+        Et la nuque baignant dans le frais cresson bleu,
+        Dort ; il est étendu dans l'herbe, sous la nue,
+        Pâle dans son lit vert où la lumière pleut.
+
+        Les pieds dans les glaïeuls, il dort. Souriant comme
+        Sourirait un enfant malade, il fait un somme :
+        Nature, berce-le chaudement : il a froid.
+
+        Les parfums ne font pas frissonner sa narine ;
+        Il dort dans le soleil, la main sur sa poitrine,
+        Tranquille. Il a deux trous rouges au côté droit.1
+
+        Octobre 1870
+      </p>
+
+      <nav class="box flex">
+        <p>
+          <a href="https://github.com/camilla122333/task-list-api">
+            <img src="../assets/pink-paint.jpg" alt="project" class="center">
+            tasklist
+          </a>
+        </p>
+        <p>
+          <a href="https://github.com/camilla122333/viewing-party">
+            <img src="../assets/blue-paint.jpg" alt="project" class="center">
+            viewing party
+          </a>
+        </p>
+        <p>
+          <a href="https://www.pasadenastringtheory.com/recordings">
+            <img src="../assets/pink-paint.jpg" alt="project" class="center">
+            music projects
+         </a>
+        </p>
+      </nav>
+
+    </article>
+
+    <footer class="portfolio">
+      <ul class="links">
+        <li><a class="logo" href="../pages/index.html">home</a></li>
+        <li><a class="logo" href="../pages/about2.html">about</a></li>
+        <li><a class="logo" href="https://github.com/camilla122333">contact</a></li>
+      </ul>
+    </footer>
+  </main>
 </body>
+
 </html>