commit v1

szymonrykala · Aug 7, 2020 · c22a7a9 · c22a7a9
commit c22a7a9
Show file tree

Hide file tree

Showing 5 changed files with 252 additions and 0 deletions.
diff --git a/css/main.css b/css/main.css
@@ -0,0 +1,93 @@
+*{box-sizing:border-box;}
+html{
+   scroll-behavior:smooth;
+   animation: ease-in-out appear 2s;
+}
+body{
+  width:100%;
+  margin:0px;
+  padding:0px;
+}
+
+.capitalize{
+  text-transform:uppercase;
+}
+
+section{
+  min-height:90vh;
+}
+
+.divider{
+  max-width:300px;
+  margin: 30px auto;
+}
+
+h4{line-height:70%;}
+h4>small{
+  font-size:50%;
+}
+
+section a,footer a{
+  color:inherit;
+  text-decoration:none;
+}
+
+footer a:hover{
+  color: #343434;
+}
+
+
+blockquote{
+  width:fit-content;
+  margin:auto !important;
+   border-left: 5px solid #4db6ac !important;
+}
+
+div.card>.card-image>img{
+  height:260px;
+  object-fit: cover;
+}
+div.card>.card-content{
+  min-height:160px;
+}
+
+ul#nav-mobile{
+  width:90%;
+  margin:auto 5%;
+  display:flex;
+  justify-content:space-around;
+}
+
+.card span.card-title{
+    background-color: #34343445;
+    /* background-color: #eeeeee45; */
+    color:black;
+    border-radius: 30px 30px 0px 0px;
+    backdrop-filter: blur(3px);
+    line-height: 15px;
+    width:100%
+}
+
+nav.white.z-depth-0{
+  z-index:100;
+  position:sticky;
+  top:0px;
+  left:0px;
+}
+
+nav>.nav-wrapper>ul>li>a{
+  transition:.4s;
+}
+nav>.nav-wrapper>ul>li>a:hover{
+    background-color: #fff;
+    color: #4db6ac !important;
+}
+
+
+@keyframes appear{
+    from{
+        opacity:0;
+    }to{
+        opacity:1;
+    }
+}
diff --git a/img/human.jpg b/img/human.jpg
diff --git a/img/maciejkossowski.jpg b/img/maciejkossowski.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <link rel="stylesheet" href="./css/main.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
+
+    <script src="./js/main.js" async ></script>
+    <title>developer</title>
+</head>
+
+<body>
+    <header>
+        <div class="divider "></div>
+        <h4 class="center-align capitalize">
+            Szymon Rykała <br>
+            <small class="teal-text">web developer</small></h4>
+        <div class="divider "></div>
+    </header>
+
+    <nav class="white z-depth-0">
+        <div class="nav-wrapper">
+            <ul id="nav-mobile" class="right capitalize">
+                <li><a href="#portfolio" class='grey-text '>Portfolio</a></li>
+                <li><a href="#about" class='grey-text'>About</a></li>
+                <li><a href="#contact" class='grey-text'>Contact</a></li>
+            </ul>
+        </div>
+    </nav>
+
+    <div class="parallax-container">
+        <div class="parallax">
+            <img src="./img/human.jpg">
+        </div>
+    </div>
+
+    <main class="center-align">
+
+        <section id="portfolio" class="section valign-wrapper">
+            <div class="row container">
+                <br>&nbsp;
+                <h5 class='capitalize '>Portfolio </h5>
+                <div class="divider "></div>
+                <div><br>&nbsp;</div>
+
+                <!-- loaded by JS -->
+                <span id="portfolioContainer"></span> 
+            </div>
+        </section>
+
+        <section id="about" class="section valign-wrapper teal lighten-3">
+            <div class="row container ">
+                <br>&nbsp;
+                <h5 class='capitalize'>About me </h5>
+                <div class="divider white"></div>
+                <br>&nbsp;
+
+                <img src="https://media-exp1.licdn.com/dms/image/C5603AQHpHnTPL0gG_w/profile-displayphoto-shrink_200_200/0?e=1601510400&v=beta&t=hE1u5yvjYHo7xdyV3dDH8cM6haTecphd8efRFTCKuXM"
+                    alt="Szymon Rykala" class="responsive circle col offset-s3 s6 m4 offset-m4 l2 offset-l5">
+                <p class="flow-text col s12 ">
+                    Hello, my name is Szymon and I create websites and web apps. I am a daily student on University of
+                    science and Technology in Bydgoszcz on Electronic and Telecommunication. My hobby is photography,
+                    plants(especially ginseg ficuses). In free times I usually play on trombone, listen to good music or
+                    edit photos which I made earlier. <br>
+                    <small class="left">P.S. I will make You a website!</small>
+                </p>
+            </div>
+        </section>
+
+        <section id="contact" class="section valign-wrapper">
+            <div class="row container">
+                <br>&nbsp;
+                <h5 class='capitalize'>Contact </h5>
+                <div class="divider"></div>
+
+                <blockquote>
+                    I am all to Your disposition. Please, let me know if you need me. Promise to help You 😊.
+                </blockquote>
+                <br><br><br><br>
+                <div class="row">
+                    <a href="tel:+48 731266432" class="col s12 m4 offset-m2 "><i
+                            class="material-icons large">phone</i></a>
+                    <p class="flow-text col s12 m4 ">Simply call me!</p>
+                </div>
+                <div class="row">
+                    <a href="mailto:[email protected]" class="col s12 m4 offset-m2 "> <i
+                            class="material-icons large">mail_outline</i> </a>
+                    <p class="flow-text col s12 m4 ">Write me an email!</p>
+                </div>
+            </div>
+        </section>
+
+    </main>
+    <footer class='page-footer teal lighten-2'>
+        <div class="container">
+            <h5 class="white-text">Useful links</h5>
+            <p>LinkedIn <a href="https://www.linkedin.com/in/szymon-ryka%C5%82a/" target="blank">Add me to Your contact
+                    network</a></p>
+            <p>GitHub: <a href="https://github.com/szymonrykala" target="blank">My public repositories</a></p>
+        </div>
+        <div class="footer-copyright">
+            <div class="container center-align">Szymon Rykała &copy; all rights reserved.</div>
+        </div>
+    </footer>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
+    <script type="text/javascript">
+        M.AutoInit();
+    </script>
+</body>
+
+</html>
diff --git a/js/main.js b/js/main.js
@@ -0,0 +1,44 @@
+
+window.addEventListener('load', () => {
+    const portfolioContainer = document.querySelector('#portfolioContainer');
+    dataJson.projectsItems.forEach(item => portfolioContainer.appendChild(printProjectItem(item)));
+})
+
+const dataJson = {
+    projectsItems: [
+        {
+            title: 'Daily Note',
+            description: `Daily Note allows You to create personalisable notes. You can easily install it on Your
+            phone or laptop. <br> P.S. It looks like a corkboard!`,
+            img: 'https://szymonrykala.github.io/dailynote/static/media/app.ed079c16.jpg',
+            link: 'https://szymonrykala.github.io/dailynote/'
+        }, {
+            title: 'Photographer',
+            description: `Business site of Maciej Kossowski, who is a photographer.
+             Thanks to the custom CMS, he can easily edit the content of his own website.`,
+            img: './img/maciejkossowski.jpg',
+            link: 'http://maciejkossowski.pl/'
+        }
+    ]
+}
+
+function printProjectItem(item) {
+    const projectItem = document.createElement('div');
+    projectItem.setAttribute('class', 'col s12 m6 l4');
+
+    projectItem.innerHTML = `<div class="card">
+                                <div class="card-image">
+                                    <img class="responsive" alt="image" src="${item.img}">
+                                    <span class="card-title">${item.title}</span>
+                                </div>
+                                <div class="card-content ">
+                                    <p>${item.description}</p>
+                                </div>
+                                <div class="card-action">
+                                    <a href="${item.link}" targe="blank" class='teal-text'>Check
+                                        here!</a>
+                                </div>
+                            </div>`;
+    return projectItem;
+}
+