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

First draft of personal website - week 1 constructor labs projects #21

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

First draft of personal website - week 1 constructor labs projects #21

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
Binary file added .DS_Store
View file
Open in desktop
Binary file not shown.
41 changes: 41 additions & 0 deletions about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Binary file added images/LinkedIn-logo-small.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/html_css_logo.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/inst-logo-small.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/js_logo.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/phil-home.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/phil-home.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/phil_with-skis.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/react_logo.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/sea-to-sky.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.
63 changes: 63 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
171 changes: 171 additions & 0 deletions skills.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Loading