MVP aka Version 1.0

CONTRIBUTING.md

@@ -9,10 +9,12 @@ Created by [Krita](https://krita.org).
 * Canvas should have size `160x44`.
 * Use white background and eraser. 
 * At top rib select `Brush Settings` ->  `Text`. Branch preset should be `Eraser` (Second option)
-* Font used `Non Sans Arabic UI Md, 18`
+* Font used `Source Sans Pro Black, 22`
 * Save as png: compression: `1`
 * Encode given png to base64. Using [base64-image.de](https://www.base64-image.de/)
 * Embed it to html
 
 ## About:icons
 Icons are resized using [resizeimage.net](https://resizeimage.net/)
+
+Logos are taken from [IconNinja](https://www.iconninja.com/)

pom.xml

@@ -70,6 +70,12 @@
 			<artifactId>lombok</artifactId>
 			<optional>true</optional>
 		</dependency>
+        <!-- Emoji Pack -->
+        <dependency>
+            <groupId>com.vdurmont</groupId>
+            <artifactId>emoji-java</artifactId>
+            <version>5.1.1</version>
+        </dependency>
 		<dependency>
 			<groupId>org.springframework.boot</groupId>
 			<artifactId>spring-boot-starter-test</artifactId>

src/main/java/io/kyberorg/whoami/Emoji.java

@@ -0,0 +1,8 @@
+package io.kyberorg.whoami;
+
+public class Emoji {
+    public static final String LOVE = "❤️";
+    public static final String CROSS = "❌";
+    public static final String FOREST = "\uD83C\uDF32";
+    public static final String ESTONIA = "\uD83C\uDDEA\uD83C\uDDEA";
+}

src/main/java/io/kyberorg/whoami/elements/Divider.java

@@ -0,0 +1,11 @@
+package io.kyberorg.whoami.elements;
+
+import com.vaadin.flow.component.html.Hr;
+
+public class Divider extends Hr {
+    public Divider() {
+        getStyle().set("background-image", "#f5f9ff");
+        getStyle().set("flex", "0 0 2px");
+        getStyle().set("align-self", "stretch");
+    }
+}

src/main/java/io/kyberorg/whoami/elements/Logo.java

@@ -0,0 +1,59 @@
+package io.kyberorg.whoami.elements;
+
+import com.vaadin.flow.component.Tag;
+import com.vaadin.flow.component.UI;
+import com.vaadin.flow.component.html.Image;
+import org.apache.commons.lang3.StringUtils;
+
+@Tag("img")
+public class Logo extends Image {
+    public static Builder create() {
+        return new Builder();
+    }
+
+    private Logo(String source, String alt, String url) {
+        getStyle().set("margin", "0.5rem");
+        if(StringUtils.isNotBlank(source)) {
+            setSrc(source);
+        }
+
+        if (StringUtils.isNotBlank(alt)) {
+            setAlt(alt);
+        }
+
+        if(StringUtils.isNotBlank(url)) {
+            addClickListener(event -> UI.getCurrent().getPage().setLocation(url));
+            getStyle().set("cursor","pointer");
+        }
+    }
+
+    public Logo roundLogo() {
+        getStyle().set("borderRadius", "25%");
+        return this;
+    }
+
+    public static class Builder {
+        private String source;
+        private String altText;
+        private String url;
+
+        public Builder withSource(String imageSource) {
+            this.source = imageSource;
+            return this;
+        }
+
+        public Builder withAltText(String alternativeText) {
+            this.altText = alternativeText;
+            return this;
+        }
+
+        public Builder withUrl(String url) {
+            this.url = url;
+            return this;
+        }
+
+        public Logo build() {
+            return new Logo(source, altText, url);
+        }
+    }
+}

src/main/java/io/kyberorg/whoami/ui/MainView.java

@@ -1,12 +1,12 @@
 package io.kyberorg.whoami.ui;
 
+import com.vaadin.flow.component.Component;
 import com.vaadin.flow.component.UI;
-import com.vaadin.flow.component.dependency.CssImport;
-import com.vaadin.flow.component.html.H2;
-import com.vaadin.flow.component.html.H3;
+
 import com.vaadin.flow.component.orderedlayout.VerticalLayout;
 import com.vaadin.flow.component.page.Push;
 import com.vaadin.flow.component.page.Viewport;
+import com.vaadin.flow.router.PageTitle;
 import com.vaadin.flow.router.Route;
 import com.vaadin.flow.server.InitialPageSettings;
 import com.vaadin.flow.server.PWA;
@@ -15,6 +15,7 @@
 import com.vaadin.flow.spring.annotation.UIScope;
 import com.vaadin.flow.theme.Theme;
 import com.vaadin.flow.theme.lumo.Lumo;
+import io.kyberorg.whoami.ui.sections.*;
 
 @SpringComponent
 @UIScope
@@ -27,22 +28,48 @@
         offlineResources = {"images/logo.jpg"},
         description = "WhoAmI: site about @kyberorg")
 @Theme(value = Lumo.class, variant = Lumo.DARK)
-@CssImport("./css/main_view.css")
+@PageTitle("Kyberorg.io")
 @Route("")
 public class MainView extends VerticalLayout implements PageConfigurator {
 
     public MainView() {
-        H2 title = new H2("Hello, I am kyberorg");
-        H3 subTitle = new H3("Soon here will some useful content. See again soon...");
+        Component titleSection = TitleSection.getInstance();
+
+        Section aboutSection = Section.create()
+                .withTitle("Who Am I? (About Me)")
+                .andContent(new AboutSection())
+                .build();
+
+        Section socialSection = Section.create()
+                .withTitle("Where Am I? (Social Network Accounts)")
+                .andContent(new SocialSection())
+                .build();
+
+        Section myProjectSection = Section.create()
+                .withTitle("What I do? (My Projects)")
+                .andContent(new ProjectsSection())
+                .build();
 
+        Section myWorkSection = Section.create()
+                .withTitle("Who pays me? (My Work)")
+                .andContent(new WorkSection())
+                .build();
+
+        Section homeSection = Section.create()
+                .withTitle("Where I reside? (My Home)")
+                .andContent(new HomeSection())
+                .build();
+
+        getStyle().set("margin","0 auto");
+        setMaxWidth("1000px");
         addClassName("centered-content");
-        add(title, subTitle);
+
+        add(titleSection, aboutSection, socialSection, myProjectSection, myWorkSection, homeSection);
 
         // hide the splash screen after the main view is loaded
         UI.getCurrent().getPage().executeJs(
                 "document.querySelector('#splash-screen').classList.add('loaded')");
     }
-
     @Override
     public void configurePage(InitialPageSettings settings) {
         settings.addFavIcon("icon", "/icons/favicon-32x32.png", "32x32");

src/main/java/io/kyberorg/whoami/ui/sections/AboutSection.java

@@ -0,0 +1,19 @@
+package io.kyberorg.whoami.ui.sections;
+
+import com.vaadin.flow.component.orderedlayout.VerticalLayout;
+
+public class AboutSection extends VerticalLayout {
+
+    public AboutSection() {
+        String sectionText = """
+                Software craftsman and DevOps engineer. \
+                                
+                Mainly dealing with Docker, Docker Swarm and Kubernetes.\
+                Developing in Java (Spring and Vaadin). \
+                                                               
+                Hobbies are: traveling, 4x4, aviation.
+                """;
+
+        add(sectionText);
+    }
+}

src/main/java/io/kyberorg/whoami/ui/sections/HomeSection.java

@@ -0,0 +1,13 @@
+package io.kyberorg.whoami.ui.sections;
+
+import com.vaadin.flow.component.orderedlayout.VerticalLayout;
+import com.vdurmont.emoji.EmojiParser;
+import io.kyberorg.whoami.Emoji;
+
+public class HomeSection extends VerticalLayout {
+
+    public HomeSection() {
+        add(EmojiParser.parseToUnicode("I live in Pirita "+ Emoji.FOREST
+                +" district of Tallinn, capital of "+Emoji.ESTONIA));
+    }
+}

src/main/java/io/kyberorg/whoami/ui/sections/ProjectsSection.java

@@ -0,0 +1,22 @@
+package io.kyberorg.whoami.ui.sections;
+
+import com.vaadin.flow.component.orderedlayout.FlexLayout;
+import io.kyberorg.whoami.elements.Logo;
+
+public class ProjectsSection extends FlexLayout {
+
+    public ProjectsSection() {
+
+        Logo yalseeLogo = Logo.create()
+                .withSource("images/yalsee.png").withAltText("yals.ee")
+                .withUrl("https://yals.ee")
+                .build();
+
+        yalseeLogo.setWidth("4rem");
+        yalseeLogo.setHeight("4rem");
+
+        yalseeLogo.setTitle("Yalsee - the link shortener");
+
+        add(yalseeLogo);
+    }
+}

src/main/java/io/kyberorg/whoami/ui/sections/Section.java

@@ -0,0 +1,42 @@
+package io.kyberorg.whoami.ui.sections;
+
+import com.vaadin.flow.component.Component;
+import com.vaadin.flow.component.Tag;
+import com.vaadin.flow.component.html.Div;
+import com.vaadin.flow.component.html.H3;
+import io.kyberorg.whoami.elements.Divider;
+
+@Tag("section")
+public class Section extends Div {
+
+    public static Builder create() {
+        return new Builder();
+    }
+
+    private Section(String title, Component content) {
+        H3 titleElement = new H3(title);
+        Divider divider = new Divider();
+
+        add(titleElement, divider, content);
+    }
+
+    public static class Builder {
+        private String title;
+        private Component content;
+
+        public Builder withTitle(String title) {
+            this.title = title;
+            return this;
+        }
+
+        public Builder andContent(Component content) {
+            this.content = content;
+            return this;
+        }
+
+        public Section build() {
+            return new Section(title, content);
+        }
+    }
+
+}

src/main/java/io/kyberorg/whoami/ui/sections/SocialSection.java

@@ -0,0 +1,31 @@
+package io.kyberorg.whoami.ui.sections;
+
+import com.vaadin.flow.component.orderedlayout.FlexLayout;
+import io.kyberorg.whoami.elements.Logo;
+
+public class SocialSection extends FlexLayout {
+
+    public SocialSection() {
+        Logo gitHubLogo = Logo.create()
+                .withSource("images/gh.png").withAltText("GitHub")
+                .withUrl("https://github.com/kyberorg")
+                .build();
+
+        Logo linkedInLogo = Logo.create()
+                .withSource("images/linked.png").withAltText("LinkedIn")
+                .withUrl("https://www.linkedin.com/in/kyberorg/")
+                .build();
+
+        Logo facebookLogo = Logo.create()
+                .withSource("images/fb.png").withAltText("Facebook")
+                .withUrl("https://www.facebook.com/kyberorg")
+                .build();
+
+        Logo twitterLogo = Logo.create()
+                .withSource("images/twitter.png").withAltText("Twitter")
+                .withUrl("https://twitter.com/kyberorg")
+                .build();
+
+        add(gitHubLogo, linkedInLogo, facebookLogo, twitterLogo);
+    }
+}

src/main/java/io/kyberorg/whoami/ui/sections/TitleSection.java

@@ -0,0 +1,34 @@
+package io.kyberorg.whoami.ui.sections;
+
+import com.vaadin.flow.component.html.H2;
+import com.vaadin.flow.component.html.Image;
+import com.vaadin.flow.component.orderedlayout.FlexComponent;
+import com.vaadin.flow.component.orderedlayout.FlexLayout;
+
+public class TitleSection extends FlexLayout {
+
+    public static TitleSection getInstance() {
+        return new TitleSection();
+    }
+
+    private TitleSection() {
+        H2 title = new H2("Hello, I am kyberorg");
+        Image myPhoto = new Image("images/logo.png", "myPhoto");
+
+        title.getStyle().set("marginTop", "initial");
+        title.getStyle().set("marginRight", "2rem");
+        title.getStyle().set("marginBottom", "initial");
+        title.getStyle().set("marginLeft", "initial");
+
+        myPhoto.setWidth("4rem");
+        myPhoto.setWidth("4rem");
+        myPhoto.getStyle().set("borderRadius","100%");
+
+        setJustifyContentMode(FlexComponent.JustifyContentMode.CENTER);
+        setAlignItems(FlexComponent.Alignment.CENTER);
+        setWidthFull();
+
+        add(title, myPhoto);
+    }
+
+}

src/main/java/io/kyberorg/whoami/ui/sections/WorkSection.java

@@ -0,0 +1,30 @@
+package io.kyberorg.whoami.ui.sections;
+
+import com.vaadin.flow.component.Text;
+import com.vaadin.flow.component.orderedlayout.FlexLayout;
+import com.vaadin.flow.component.orderedlayout.VerticalLayout;
+import com.vdurmont.emoji.EmojiParser;
+import io.kyberorg.whoami.Emoji;
+import io.kyberorg.whoami.elements.Logo;
+
+public class WorkSection extends VerticalLayout {
+
+    public WorkSection() {
+        FlexLayout firstLine = new FlexLayout();
+        Text first = new Text("I work at ");
+        Logo knLogo = Logo.create()
+                .withSource("images/kn.png").withAltText("Kühne+Nagel")
+                .build().roundLogo();
+
+        Text second = new Text(EmojiParser.parseToUnicode("and I "+ Emoji.LOVE +" it"));
+        firstLine.setAlignItems(Alignment.CENTER);
+        firstLine.add(first, knLogo, second);
+
+        FlexLayout secondLine = new FlexLayout();
+        Text availableForHireText = new Text("Am I available to hire: ");
+        Text availableForHireStatus = new Text(EmojiParser.parseToUnicode(Emoji.CROSS));
+
+        secondLine.add(availableForHireText, availableForHireStatus);
+        add(firstLine, secondLine);
+    }
+}