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 @@ + + + + + + + + Layout 2 + + + + + +
+ +
+ +
+

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.

+

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.

+

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].

+

Here’s a list of some things I like that I wrote in about 20 seconds.

+
+
+ + +
+ + \ 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 @@ + + + + + + + + Layout 2 + + + + + +
+ + +
+ +
+

I'm Phil Berryman, an aspiring JS developer from London. Find out more about me using the links above. Thanks!

+
+
+ +
1 Clare and Phil at the top of Sea to Sky / Vancouver, BC - June 2018
+
+
+ +
2 Clare and Phil at the top of Sea to Sky / Vancouver, BC - June 2018
+
+
+ +
3 Clare and Phil at the top of Sea to Sky / Vancouver, BC - June 2018
+
+
+ +
4 Clare and Phil at the top of Sea to Sky / Vancouver, BC - June 2018
+
+
+ +
+
+ + +
+ + \ 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 @@ + + + + + + + + Layout 2 + + + + + +
+ + +
+
+
+
+
+ +
Javascript
+
+
+
+
+

Single shot white a et ristretto arabica aftertaste frappuccino white. Eu mazagran cup, + aftertaste wings id bar iced.

+

Irish, carajillo, sit mocha skinny carajillo aftertaste mazagran java aged grounds. + Ristretto, to go cultivar a percolator as carajillo dark.

+

Spoon, mocha percolator french press, chicory, single shot extra viennese aromatic froth + plunger pot. Wings doppio rich, french press mocha organic steamed black.

+

Fair trade acerbic decaffeinated foam robusta turkish breve. Mocha, trifecta, extra + decaffeinated grinder est wings dark doppio galão. +

+
+
Projects where I've used this: +
    +
  • Project 1
    • +
  • Project 2
    • +
  • Project 3
    • +
  • Project 4
    • +
+
+
Websites I've found useful: +
    +
  • Project 1
    • +
  • Project 2
    • +
  • Project 3
    • +
  • Project 4
    • +
+
+
+
+
+
+
+ +
HTML & CSS
+
+
+
+
+

Single shot white a et ristretto arabica aftertaste frappuccino white. Eu mazagran cup, + aftertaste wings id bar iced.

+

Irish, carajillo, sit mocha skinny carajillo aftertaste mazagran java aged grounds. + Ristretto, to go cultivar a percolator as carajillo dark.

+

Spoon, mocha percolator french press, chicory, single shot extra viennese aromatic froth + plunger pot. Wings doppio rich, french press mocha organic steamed black.

+

Fair trade acerbic decaffeinated foam robusta turkish breve. Mocha, trifecta, extra + decaffeinated grinder est wings dark doppio galão. +

+
+
Projects where I've used this: +
    +
  • Project 1
    • +
  • Project 2
    • +
  • Project 3
    • +
  • Project 4
    • +
+
+
Websites I've found useful: +
    +
  • Project 1
    • +
  • Project 2
    • +
  • Project 3
    • +
  • Project 4
    • +
+
+
+
+
+
+
+ +
React
+
+
+
+
+

Single shot white a et ristretto arabica aftertaste frappuccino white. Eu mazagran cup, + aftertaste wings id bar iced.

+

Irish, carajillo, sit mocha skinny carajillo aftertaste mazagran java aged grounds. + Ristretto, to go cultivar a percolator as carajillo dark.

+

Spoon, mocha percolator french press, chicory, single shot extra viennese aromatic froth + plunger pot. Wings doppio rich, french press mocha organic steamed black.

+

Fair trade acerbic decaffeinated foam robusta turkish breve. Mocha, trifecta, extra + decaffeinated grinder est wings dark doppio galão. +

+
+
Projects where I've used this: +
    +
  • Project 1
    • +
  • Project 2
    • +
  • Project 3
    • +
  • Project 4
    • +
+
+
Websites I've found useful: +
    +
  • Project 1
    • +
  • Project 2
    • +
  • Project 3
    • +
  • Project 4
    • +
+
+
+
+
+
+
+ +
+

About Me

+
+

The bizzle ipsum dolizzle dizzle amizzle, consectetuer adipiscing elit.

+

I'm in the shizzle crackalackin velizzle, own yo' volutpat.

+

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.

+
+ +
+ + + +
+ + +
+ + + \ 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