diff --git a/src/main/java/myblog/blog/article/adapter/incomming/MainController.java b/src/main/java/myblog/blog/article/adapter/incomming/MainController.java index 51c2cd6..fbb257c 100644 --- a/src/main/java/myblog/blog/article/adapter/incomming/MainController.java +++ b/src/main/java/myblog/blog/article/adapter/incomming/MainController.java @@ -39,4 +39,10 @@ public class MainController { for(var article : articles) article.parseAndRenderForView(); return articles; } + + @GetMapping("/aboutMe") + String aboutMe(Model model) { + layoutRenderingUseCase.AddLayoutTo(model); + return "aboutMe"; + } } diff --git a/src/main/resources/static/css/about.css b/src/main/resources/static/css/about.css new file mode 100644 index 0000000..9f04757 --- /dev/null +++ b/src/main/resources/static/css/about.css @@ -0,0 +1,147 @@ +*,*:before,*:after {box-sizing:inherit;margin:0; padding:0; border:0 none; position: relative;} +html { + background: #000; + box-sizing:border-box; + font-family: 'Vollkorn', sans-serif; + font-size: 1rem; + color: #000; +} + +@media screen and (min-width: 700px) { + body > article { + display: flex; + flex-wrap: wrap; + } + figure { + background: #eee; + width: calc( 50% + 1px); + height: 100vh; + margin: 0 auto 10vh 0; + position: sticky; + top: 0; + overflow: hidden; + box-shadow: 4px -4px 8px rgba(0,0,0,.4); + } + figure::after { + content: ''; + position: absolute; + top: 5vmin; + right: 5vmin; + bottom: 5vmin; + left: 45%; + border: 2px dashed #fff; + outline: 1px solid #fff; + outline-offset: -5vmin; + backdrop-filter: grayscale(1); + pointer-events: none; + } + figure:nth-of-type(2n)::after { + right: 45%; + left: 5vmin; + } + section { + background: #e5e5e5; + width: calc(50% + 1px); + height: 100vh; + margin: 0 0 10vh auto; + position: sticky; + top: 0; + // overflow: hidden; + padding: 5vmin; + box-shadow: -4px -4px 8px rgba(0,0,0,.4); + } + figure:nth-of-type(1), + section:nth-of-type(1) { + margin: 0 0 10vh 0; + width: 50%; + } + figure:nth-of-type(2n) { + margin: 0 0 10vh auto; + box-shadow: -4px -4px 8px rgba(0,0,0,.4); + } + section:nth-of-type(2n) { + margin: 0 auto 10vh 0; + box-shadow: 4px -4px 8px rgba(0,0,0,.4); + } + figure:last-of-type, + section:last-of-type { + margin-bottom: 0; + } + section::before { + background: inherit; + z-index: 1; + content: ''; + position: absolute; + top: 50%; + left:0; + width: 7vmin; + height: 7vmin; + transform: translate(calc(-50% + 1px), -50%) rotate(-45deg); + clip-path: polygon(-15% -15%, 110% 0%, 0% 110%); + box-shadow: -4px -2px 8px rgba(0,0,0,.4); + border-radius: 1.5vmin 0 0 0; + } + section:nth-of-type(2n)::before { + left:auto; + right: 0; + transform: translate(calc(50% - 1px), -50%) rotate(-45deg) scale(-1); + } + section::after { + content: ''; + position: absolute; + top: 5vmin; + right: 45%; + bottom: 5vmin; + left: 5vmin; + border: 2px dashed #fff; + outline: 1px solid #fff; + outline-offset: -5vmin; + backdrop-filter: invert(1); + pointer-events: none; + } + section:nth-of-type(2n):after { + right: 5vmin; + left: 45%; + } + figure img { + min-width: 100%; + min-height: 100%; + object-fit: cover; + object-position: center; + } + section > div { + display: flex; + flex-direction: column; + align-items: center; + height: 100%; + padding: 1rem; + } + h1, + h2 { + margin: 15% 0 auto; + font-size: calc(5vmin + 3vmax); + text-align: center; + font-weight: 700; + line-height: 1; + word-spacing: .5rem; + } + p { + text-align: right; + width: 100%; + font-family: "Cormorant", serif; + font-weight: 400; + font-style: italic; + font-size: calc(1.5vmin + 1.75vmax); + margin-bottom: 5%; + } + a { + color: transparent; + -webkit-text-stroke: 2px #212121; + text-decoration: none; + font-weight: 900; + letter-spacing: 2px; + } + a:hover, a:focus { + -webkit-text-stroke: 1px #999; + } +} \ No newline at end of file diff --git a/src/main/resources/templates/aboutMe.html b/src/main/resources/templates/aboutMe.html new file mode 100644 index 0000000..29e4a40 --- /dev/null +++ b/src/main/resources/templates/aboutMe.html @@ -0,0 +1,116 @@ + + + + + + + Jinia's LOG - About Me! + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+ +
+
+
+

Scrolling half by half

+

Made in pure #CSS and almost all is "old properties" method. And a bit imagination.
+ Yes, the flexbox is old now.

+
+
+ +
+ +
+
+
+

I'm Kseso,
+ “a #obCSServer”

+

Ramajero Argonauta, Enredique Amanuense de #CSS.

+
+
+ +
+ +
+
+
+

ξsCSS Blog

+

#impoCSSible inside EsCSS. A Spanish #CSS blog where the borders & limits of #CSS disappear.

+
+
+ +
+ +
+
+
+

#impoCSSible is nothing

+

You don´t need Javascript or #CSS processors either for almost 100% of what you want to do.

+
+
+ +
+ +
+
+
+

Idea from E.Bouças´s pen

+

Without jQuery or Javascript, nor fixed position (bye IOs problems)

+
+
+ +
+ +
+
+
+

Images from unsplash.it

+

Because it´s the best for demos. Thanks, guys!

+
+
+ +
+ +
+
+
+

show the PEN.
+ link the POST

+

Por una web con mucho estilo, para argonautas con buen gusto.

+
+
+ +
+ + + + +
+ + + \ No newline at end of file