diff --git a/images/bg.svg b/images/bg.svg new file mode 100644 index 0000000..1b781cf --- /dev/null +++ b/images/bg.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/profile.jpg b/images/profile.jpg new file mode 100644 index 0000000..5b44873 Binary files /dev/null and b/images/profile.jpg differ diff --git a/index.html b/index.html index b9140bd..1954723 100644 --- a/index.html +++ b/index.html @@ -1,9 +1,61 @@ - - - - Olivier Boeren: Portfolio - - -

Welcome to my portfolio

- - + + + + + + + Document + + + + + +
+
+
+ Profile picture +

Olivier Boeren

+

Software developer

+
+ Resume +
+
+

ABOUT

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus dignissim rutrum. Suspendisse vel dapibus risus. Morbi vitae sodales nisi, vitae convallis dolor. In non vulputate magna. Praesent ultrices, tellus nec lacinia molestie, dui mi aliquet mi, imperdiet ultricies neque lacus blandit risus. Curabitur condimentum nisi sit amet dui auctor malesuada. Integer eleifend nisi mi, in tempus tortor fringilla ac. Donec ultrices lacus feugiat, feugiat tortor vitae, tincidunt risus. +

+
+

SKILLS

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus dignissim rutrum. Suspendisse vel dapibus risus. Morbi vitae sodales nisi, vitae convallis dolor. In non vulputate magna. Praesent ultrices, tellus nec lacinia molestie, dui mi aliquet mi, imperdiet ultricies neque lacus blandit risus. Curabitur condimentum nisi sit amet dui auctor malesuada. Integer eleifend nisi mi, in tempus tortor fringilla ac. Donec ultrices lacus feugiat, feugiat tortor vitae, tincidunt risus. +

+
+

EDUCATION

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus dignissim rutrum. Suspendisse vel dapibus risus. Morbi vitae sodales nisi, vitae convallis dolor. In non vulputate magna. Praesent ultrices, tellus nec lacinia molestie, dui mi aliquet mi, imperdiet ultricies neque lacus blandit risus. Curabitur condimentum nisi sit amet dui auctor malesuada. Integer eleifend nisi mi, in tempus tortor fringilla ac. Donec ultrices lacus feugiat, feugiat tortor vitae, tincidunt risus. +

+
+

PROJECTS

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus dignissim rutrum. Suspendisse vel dapibus risus. Morbi vitae sodales nisi, vitae convallis dolor. In non vulputate magna. Praesent ultrices, tellus nec lacinia molestie, dui mi aliquet mi, imperdiet ultricies neque lacus blandit risus. Curabitur condimentum nisi sit amet dui auctor malesuada. Integer eleifend nisi mi, in tempus tortor fringilla ac. Donec ultrices lacus feugiat, feugiat tortor vitae, tincidunt risus. +

+
+

CONTACT

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus dignissim rutrum. Suspendisse vel dapibus risus. Morbi vitae sodales nisi, vitae convallis dolor. In non vulputate magna. Praesent ultrices, tellus nec lacinia molestie, dui mi aliquet mi, imperdiet ultricies neque lacus blandit risus. Curabitur condimentum nisi sit amet dui auctor malesuada. Integer eleifend nisi mi, in tempus tortor fringilla ac. Donec ultrices lacus feugiat, feugiat tortor vitae, tincidunt risus. +

+
+
+ + + + \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..16c4fbe --- /dev/null +++ b/styles.css @@ -0,0 +1,97 @@ +@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap'); +*{ + font-family: 'Roboto', sans-serif; +} +body{ + background-image: url("./images/bg.svg"); + background-attachment: fixed; + margin: 0; + margin-top: 50px; +} +h1{ + color:#212121; + font-size: 2rem; + margin-bottom: 10px; +} +p{ + color:#424242; + line-height: 28px; +} + +nav{ + margin: auto; + padding-left: 330px; + width: 950px; + height: 50px; +} +nav ul{ + list-style-type: none; + margin: 0; + padding: 0; +} +nav li{ + display: inline; +} +nav a{ + text-decoration: none; + color: #424242; + font-size: 20px; + padding: 10px; + display: inline-block; + transition: 0.3s; +} + +.content{ + display: flex; + flex-direction: row; + gap: 30px; + margin: auto; + width: 1280px; +} +.profile{ + width: 300px; + height: 400px; + background: #155d77; + color:#f1f1f1; + display: flex; + flex-direction: column; + align-items: center; +} +.profile .picture{ + width: 180px; + height: 180px; + background: #fff; + border-radius: 50%; + margin-top: 60px; + margin-bottom: 30px; +} +.profile h2{ + margin: 0; + font-size: 32px; +} +.profile h3{ + margin: 0; + opacity: 60%; + font-size: 18px; +} +.resume{ + width: 100%; + height: 70px; + line-height: 70px; + display: block; + text-align: center; + bottom: 0; + background: #fff; + color:#212121; + font-size: 24px; + font-weight: 500; +} +.resume:hover{ + background-color: #efefef; +} +.info{ + width: 850px; + padding: 50px; + min-height: calc(100vh - 200px); + background: #f1f1f1; +} \ No newline at end of file