diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..16fb43e Binary files /dev/null and b/.DS_Store differ diff --git a/about.html b/about.html new file mode 100644 index 0000000..c09429d --- /dev/null +++ b/about.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html lang="en"> + +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <meta http-equiv="X-UA-Compatible" content="ie=edge"> + <title>Layout 2</title> + <link href="https://fonts.googleapis.com/css?family=Lora:700" rel="stylesheet"> + <link rel="stylesheet" href="style.css"> +</head> + +<body> + <div class="app"> + <nav class="nav"> + <div class="nav__home">HOME</div> + <ul class="nav__links"> + <li class="nav__links__link"><a href="about.html">skills</a></li> + <li class="nav__links__link">portfolio</li> + <li class="nav__links__link">work</li> + <li class="nav__links__link">life</li> + <li class="nav__links__link nav__links__link__contact">contact</li> + <li class="nav__links__link"></li> + </ul> + </nav> + <div class="content"> + + <main class="content__main"> + <p>I’m Phil. I’m nearly 40 and I live in north west London. I’m currently on my third mid-life crisis and attempting a career change from digital marketing to software development.</p> + <p>I’m currently doing a 12 week javascript bootcamp at Constructor Labs. Over the next 11 weeks I hope to learn all the good and proper ways javascript can be used to build web applications, and how a well functioning technical team works together.</p> + <p>Previously I have worked in a number of marketing roles from SEO to managing the digital marketing team at Simply Business while we grew from 0 to 300,000 customers. More of this in the [work] page and on [LinkedIn].</p> + <p>Here’s a list of some things I like that I wrote in about 20 seconds. </p> + </main> + </div> + <footer class="footer"> + <div class="footer__notes"><img src="/images/inst-logo-small.png"> <img src="/images/LinkedIn-logo-small.png"> </div> + </footer> + + </div> +</body> +</html> \ No newline at end of file diff --git a/images/LinkedIn-logo-small.png b/images/LinkedIn-logo-small.png new file mode 100644 index 0000000..241281b Binary files /dev/null and b/images/LinkedIn-logo-small.png differ diff --git a/images/html_css_logo.png b/images/html_css_logo.png new file mode 100644 index 0000000..622018a Binary files /dev/null and b/images/html_css_logo.png differ diff --git a/images/inst-logo-small.png b/images/inst-logo-small.png new file mode 100644 index 0000000..ddadf96 Binary files /dev/null and b/images/inst-logo-small.png differ diff --git a/images/js_logo.png b/images/js_logo.png new file mode 100644 index 0000000..0a18ed3 Binary files /dev/null and b/images/js_logo.png differ diff --git a/images/phil-home.jpeg b/images/phil-home.jpeg new file mode 100644 index 0000000..69050d8 Binary files /dev/null and b/images/phil-home.jpeg differ diff --git a/images/phil-home.jpg b/images/phil-home.jpg new file mode 100644 index 0000000..d2ca08e Binary files /dev/null and b/images/phil-home.jpg differ diff --git a/images/phil_with-skis.jpeg b/images/phil_with-skis.jpeg new file mode 100644 index 0000000..55956ed Binary files /dev/null and b/images/phil_with-skis.jpeg differ diff --git a/images/react_logo.png b/images/react_logo.png new file mode 100644 index 0000000..54aec6a Binary files /dev/null and b/images/react_logo.png differ diff --git a/images/sea-to-sky.jpg b/images/sea-to-sky.jpg new file mode 100644 index 0000000..6ea4c23 Binary files /dev/null and b/images/sea-to-sky.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..c06ce1e --- /dev/null +++ b/index.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<html lang="en"> + +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <meta http-equiv="X-UA-Compatible" content="ie=edge"> + <title>Layout 2</title> + <link href="https://fonts.googleapis.com/css?family=Lora:700" rel="stylesheet"> + <link rel="stylesheet" href="style.css"> +</head> + +<body> + <div class="app"> + <!-- <header class="masthead"> + <h1 class="masthead__text">my name is phil</h1> + <p>and this website is all about me.</p> + </header> --> + <nav class="nav"> + <div class="nav__home nav__home__mobile"><a href="/">home</a></div> + <div class="nav__blank nav__home"></div> + <ul class="nav__links"> + <li class="nav__links__link nav__home__tablet"><a href="/">home</a></li> + <li class="nav__links__link nav__skills"><a href="skills.html">skills</a></li> + <li class="nav__links__link nav__portfolio">portfolio</li> + <li class="nav__links__link nav__work">work</li> + <li class="nav__links__link nav__life">life</li> + <li class="nav__links__link nav__contact">contact</li> + <li class="nav__links__link nav__blank__spacer"></li> + </ul> + </nav> + <div class="content"> + + <main class="content__main"> + <p class="content__main__intro">I'm Phil Berryman, an aspiring JS developer from London. Find out more about me using the links above. Thanks!</p> + <div class="home__images"> + <figure class="figure home__image__1"> + <img class="figure" src="images/sea-to-sky.jpg" width="261" height="440"> + <figcaption class="figcaption">1 Clare and Phil at the top of Sea to Sky / Vancouver, BC - June 2018</figcaption> + </figure> + <figure class="figure home__image__2"> + <img class="figure" src="images/sea-to-sky.jpg" width="261" height="440"> + <figcaption class="figcaption">2 Clare and Phil at the top of Sea to Sky / Vancouver, BC - June 2018</figcaption> + </figure> + <figure class="figure home__image__3"> + <img class="figure" src="images/sea-to-sky.jpg" width="261" height="440"> + <figcaption class="figcaption">3 Clare and Phil at the top of Sea to Sky / Vancouver, BC - June 2018</figcaption> + </figure> + <figure class="figure home__image__4"> + <img class="figure" src="images/sea-to-sky.jpg" width="261" height="440"> + <figcaption class="figcaption">4 Clare and Phil at the top of Sea to Sky / Vancouver, BC - June 2018</figcaption> + </figure> + </div> + + </main> + </div> + <footer class="footer"> + <div class="footer__notes"><img src="/images/inst-logo-small.png"> <img src="/images/LinkedIn-logo-small.png"> </div> + </footer> + + </div> +</body> +</html> \ No newline at end of file diff --git a/skills.html b/skills.html new file mode 100644 index 0000000..3e9072b --- /dev/null +++ b/skills.html @@ -0,0 +1,171 @@ +<!DOCTYPE html> +<html lang="en"> + +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <meta http-equiv="X-UA-Compatible" content="ie=edge"> + <title>Layout 2</title> + <link rel="stylesheet" href="style.css"> + <style> + .app { + background: var(--skills-color); + } + </style> +</head> + +<body> + <div class="app"> + <nav class="nav"> + <div class="nav__home nav__home__mobile"><a href="/">home</a></div> + <div class="nav__blank nav__home"></div> + <ul class="nav__links"> + <li class="nav__links__link nav__home__tablet"><a href="/">home</a></li> + <li class="nav__links__link nav__skills"><a href="skills.html">skills</a></li> + <li class="nav__links__link nav__portfolio">portfolio</li> + <li class="nav__links__link nav__work">work</li> + <li class="nav__links__link nav__life">life</li> + <li class="nav__links__link nav__contact">contact</li> + <li class="nav__links__link nav__blank__spacer"></li> + </ul> + </nav> + + <div class="responsive__content"> + <div class="margin"></div> + <div class="skills"> + <div class="skill"> + <div class="skill__header"> + <div class="skill__logo"><img src="images/js_logo.png" width="75" height="75"></div> + <div class="skill__name">Javascript</div> + <div class="skill__spacer"></div> + </div> + <div class="skill__body"> + <div class="skill__text"> + <p>Single shot white a et ristretto arabica aftertaste frappuccino white. Eu mazagran cup, + aftertaste wings id bar iced.</p> + <p>Irish, carajillo, sit mocha skinny carajillo aftertaste mazagran java aged grounds. + Ristretto, to go cultivar a percolator as carajillo dark.</p> + <p>Spoon, mocha percolator french press, chicory, single shot extra viennese aromatic froth + plunger pot. Wings doppio rich, french press mocha organic steamed black.</p> + <p>Fair trade acerbic decaffeinated foam robusta turkish breve. Mocha, trifecta, extra + decaffeinated grinder est wings dark doppio galão. + </div> + <div class="skill__links"> + <div class="skill__links__portfolio">Projects where I've used this: + <ul> + <li class="link">Project 1</li> + <li class="link">Project 2</li> + <li class="link">Project 3</li> + <li class="link">Project 4</li> + </ul> + </div> + <div class="skill__links__useful">Websites I've found useful: + <ul> + <li class="link">Project 1</li> + <li class="link">Project 2</li> + <li class="link">Project 3</li> + <li class="link">Project 4</li> + </ul> + </div> + </div> + </div> + </div> + <div class="skill"> + <div class="skill__header"> + <div class="skill__logo"><img src="images/html_css_logo.png" width="75" height="75"></div> + <div class="skill__name">HTML & CSS</div> + <div class="skill__spacer"></div> + </div> + <div class="skill__body"> + <div class="skill__text"> + <p>Single shot white a et ristretto arabica aftertaste frappuccino white. Eu mazagran cup, + aftertaste wings id bar iced.</p> + <p>Irish, carajillo, sit mocha skinny carajillo aftertaste mazagran java aged grounds. + Ristretto, to go cultivar a percolator as carajillo dark.</p> + <p>Spoon, mocha percolator french press, chicory, single shot extra viennese aromatic froth + plunger pot. Wings doppio rich, french press mocha organic steamed black.</p> + <p>Fair trade acerbic decaffeinated foam robusta turkish breve. Mocha, trifecta, extra + decaffeinated grinder est wings dark doppio galão. + </div> + <div class="skill__links"> + <div class="skill__links__portfolio">Projects where I've used this: + <ul> + <li class="link">Project 1</li> + <li class="link">Project 2</li> + <li class="link">Project 3</li> + <li class="link">Project 4</li> + </ul> + </div> + <div class="skill__links__useful">Websites I've found useful: + <ul> + <li class="link">Project 1</li> + <li class="link">Project 2</li> + <li class="link">Project 3</li> + <li class="link">Project 4</li> + </ul> + </div> + </div> + </div> + </div> + <div class="skill"> + <div class="skill__header"> + <div class="skill__logo"><img src="images/react_logo.png" width="75" height="75"></div> + <div class="skill__name">React</div> + <div class="skill__spacer"></div> + </div> + <div class="skill__body"> + <div class="skill__text"> + <p>Single shot white a et ristretto arabica aftertaste frappuccino white. Eu mazagran cup, + aftertaste wings id bar iced.</p> + <p>Irish, carajillo, sit mocha skinny carajillo aftertaste mazagran java aged grounds. + Ristretto, to go cultivar a percolator as carajillo dark.</p> + <p>Spoon, mocha percolator french press, chicory, single shot extra viennese aromatic froth + plunger pot. Wings doppio rich, french press mocha organic steamed black.</p> + <p>Fair trade acerbic decaffeinated foam robusta turkish breve. Mocha, trifecta, extra + decaffeinated grinder est wings dark doppio galão. + </div> + <div class="skill__links"> + <div class="skill__links__portfolio">Projects where I've used this: + <ul> + <li class="link">Project 1</li> + <li class="link">Project 2</li> + <li class="link">Project 3</li> + <li class="link">Project 4</li> + </ul> + </div> + <div class="skill__links__useful">Websites I've found useful: + <ul> + <li class="link">Project 1</li> + <li class="link">Project 2</li> + <li class="link">Project 3</li> + <li class="link">Project 4</li> + </ul> + </div> + </div> + </div> + </div> + </div> + <div class="margin"></div> + + <div class="sidebar"> + <p>About Me</p> + <div class="sidebar__photo"></div> + <p>The bizzle ipsum dolizzle dizzle amizzle, consectetuer adipiscing elit.</p> + <p>I'm in the shizzle crackalackin velizzle, own yo' volutpat. </p> + <p>suscipizzle crackalackin, bow wow wow vizzle, arcu. Pellentesque fo shizzle mah nizzle fo rizzle, mah home g-dizzle tortizzle. Sizzle erizzle. Bling bling izzle yippiyo dapibizzle turpis tempizzle away.</p> + </div> + + <div class="margin"></div> + + + + </div> + <footer class="footer"> + <div class="footer__notes"><img src="/images/inst-logo-small.png"> <img src="/images/LinkedIn-logo-small.png"> + </div> + </footer> + + </div> +</body> + +</html> \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..ba46119 --- /dev/null +++ b/style.css @@ -0,0 +1,377 @@ +* { + box-sizing: inherit; + } + + + :root { + --primary-color:#91867E; + --secondary-color: #910052; + --tertiary-color: #FFAA5A; + --skills-color:#95A1C3; + --portfolio-color: #B2C891 ; + --work-color:#E49969 ; + --life-color: #AD85BA; + --contact-color: #C88691; + --nav-font: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; + } + + body { + box-sizing: border-box; + margin: 0; + font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; + display: flex; + flex-direction: column; + min-height: 100vh; + } + + .figure { + display: table; + margin: 0; + } + + .figure img { + max-width: 100%; + } + + .figcaption { + display: table-caption; + caption-side: bottom; + background-color: var(--tertiary-color); + color:white; + padding: 10px; + } + + .app { + display: flex; + flex-direction: column; + flex-grow: 1; + background:#BBCDE5; + } + + + ul { + padding-left: 0; + } + + p { + margin:5px; + } + + h1 { + font-size: 2em; + font-weight:100; + display: block; + margin:0; + } + h2 { + padding =0; + } + + + .content { + display: flex; + flex-direction: column; + flex:1; + padding-top: 10px; + } + + .nav { + display: flex; + flex-direction: row; + align-items: stretch; + background: white; + margin: 0px 0px 0px 0px; + } + + .nav__home { + display:flex; + writing-mode: vertical-rl; + text-orientation: upright; + font-size: 20px; + font-weight: 600; + background: var(--primary-color); + color: white; + flex:1; + flex-direction:row; + justify-content:center; + align-items:center; + writing-mode: vertical-rl; + text-orientation: upright; + font-size: 20px; + font-weight: 600; + background: var(--primary-color); + font-family: var(--nav-font); + } + + + + .nav__links { + display: flex; + flex-direction: row; + flex-grow:1; + flex-wrap: wrap; + margin:0px; + padding-left:0px; + flex:11; + } + + + + .nav__links__link { + display: flex; + flex:1; + background: var(--primary-color); + color: white; + margin:0px; + padding:5px 0px 5px 10px; + min-width:150px; + font-family: var(--nav-font); + font-weight:300; + font-size: 20px; + } + + .nav__links__link a, .nav__home a{ + color: white; /* blue colors for links too */ + text-decoration: inherit; /* no underline */ + } + + .nav__skills { + background: var(--skills-color); + } + + .nav__portfolio { + background: var(--portfolio-color); + } + + .nav__work { + background: var(--work-color); + } + + .nav__life { + background: var(--life-color); + } + + .nav__contact { + background: var(--contact-color); + } + + .nav__links__link__contact { + color: var(--tertiary-color); + } + + .nav__blank { + display:none; + } + + .nav__home__tablet { + display:none; + } + + .content__main { + background: #BBCDE5; + padding:10px; + flex-grow:1; + display:flex; + align-items: center; + flex-direction: column; + } + + .content__main__intro { + text-align: center; + } + + .footer { + padding:10px; + background:var(--primary-color); + } + + .home__images { + display: flex; + flex-direction: row; + } + + .home__image__2 { + display: none; + } + + .home__image__3 { + display: none; + } + + .home__image__4 { + display: none; + } + + + .responsive__content { + display: flex; + flex-direction: row; + margin-top:20px; + } + + .skills { + display: flex; + flex-direction: column; + flex:10; + flex-wrap:wrap; + } + + .skill { + display:flex; + flex-direction: row; + min-width: 300px; + margin-bottom: 20px; + flex-wrap:wrap; + background:white; + } + + .skill__header { + display:flex; + flex-direction: row; + } + + .skill__body { + display:flex; + flex-direction: column; + } + + .skill__name { + display:flex; + flex:1; + min-width:200px; + font-size:2em; + justify-content:flex-end; + margin:5px 10px 0px 0px; + + } + + .skill__text { + min-width:200px; + margin-top: 15px; + margin-bottom:15px; + margin:10px 5px 10px 5px; + + } + + .skill__links { + margin:0px 5px 5px 5px; + } + + .skill__logo { + padding:5px 0px 0px 5px; + } + + .margin { + display:flex; + flex:1; + } + + .link { + display:list-item; + list-style-type: square; + margin-left: 20px; + } + + .sidebar { + display:none; + } + + @media (min-width: 768px) { + .home__image__2 { + display: table; + margin-left: 30px; + } + .nav__links { + align-content: flex-start; + } + .nav__links__link { + font-size: 30px; + min-width:240px; + } + + .skill__body { + flex-direction:row; + } + + .skill__text { + flex:7; + } + + .skill__links { + flex:3; + } + + .skill__header { + flex:1; + display:flex; + } + + .skill__logo { + flex:3; + } + + .skill__name { + flex:4; + } + + .skill__spacer { + flex:3; + } + .nav__home__mobile { + display:none; + } + + .nav__blank__spacer { + display:none; + } + + .nav__home__tablet { + display: flex; + } + + + } + + @media (min-width: 960px) { + .home__images { + flex-wrap: wrap; + width: 600px; + } + + .home__image__1, .home__image__2, .home__image__3, .home__image__4 { + display: table; + margin-left: 30px; + margin-bottom:30px; + } + + .nav__home { + display:none; + } + + .nav__blank { + display:none; + } + + .nav__blank__spacer { + display:flex; + } + + .nav__links__link { + min-width:130px; + } + + .sidebar { + display:flex; + flex:3; + flex-direction:column; + background:white; + margin-bottom:20px; + align-items: center; + } + + .sidebar__photo { + background-image: url(images/phil_with-skis.jpeg); + background-size: contain; + } + + } \ No newline at end of file