git 계정 변경 test
This commit is contained in:
Wonjin-Choi
@@ -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";
|
||||
}
|
||||
}
|
||||
|
||||
147
src/main/resources/static/css/about.css
Normal file
147
src/main/resources/static/css/about.css
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
116
src/main/resources/templates/aboutMe.html
Normal file
116
src/main/resources/templates/aboutMe.html
Normal file
@@ -0,0 +1,116 @@
|
||||
<!DOCTYPE html>
|
||||
<html th:replace="~{layout/layout.html :: layout(~{::head}, ~{::section})}"
|
||||
lang="ko" xmlns:th="http://www.thymeleaf.org"
|
||||
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5" xmlns="http://www.w3.org/1999/html">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, user-scalable = no, initial-scale=1.0"/>
|
||||
<title>Jinia's LOG - About Me!</title>
|
||||
<!-- SEO -->
|
||||
<meta name="description" content="비전공 출신, 개발자 지망생의 공부 내용을 기록하는 블로그입니다."/>
|
||||
<meta name="keyword" content="개발, 테크, IT, 코딩, 알고리즘, 쥬니어, 개발자, 포트폴리오, 블로그, CS, 컴공지식, 컴공, 프로그래밍, 프로그래밍 언어, 비전공, 코딩 테스트, 취업, 취준"/>
|
||||
<meta name="author" content="Jinia"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
|
||||
|
||||
<link rel="icon" href="/img/favicon-16x16.png"/>
|
||||
<link rel="apple-touch-icon" href="/img/favicon-16x16.png"/>
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/img/favicon-16x16.png">
|
||||
<meta name="msapplication-TileColor" content="#ffffff">
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
<!-- CSS RESET -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"/>
|
||||
<link rel="stylesheet" th:href="@{/node_modules/bootstrap/dist/css/bootstrap.min.css}"/>
|
||||
<link rel="stylesheet" th:href="@{/css/mainCss.css?ver=1.1}"/>
|
||||
<link rel="stylesheet" th:href="@{/css/about.css}">
|
||||
|
||||
<script src="https://kit.fontawesome.com/233840a552.js" crossorigin="anonymous"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<section class="login-section">
|
||||
|
||||
<article>
|
||||
<figure>
|
||||
<img src='https://unsplash.it/450/800?image=508' alt />
|
||||
</figure>
|
||||
<section>
|
||||
<div>
|
||||
<h1>Scrolling half by half</h1>
|
||||
<p>Made in pure #CSS and almost all is "old properties" method. And a bit imagination.<br/>
|
||||
Yes, the flexbox is old now.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<figure>
|
||||
<img src='https://unsplash.it/450/800?image=817' alt />
|
||||
</figure>
|
||||
<section>
|
||||
<div>
|
||||
<h2>I'm Kseso,<br/>
|
||||
“a #obCSServer”</h2>
|
||||
<p>Ramajero Argonauta, Enredique Amanuense de #CSS.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<figure>
|
||||
<img src='https://unsplash.it/450/800?image=948' alt />
|
||||
</figure>
|
||||
<section>
|
||||
<div>
|
||||
<h2><a href='https://escss.blogspot.com'>ξsCSS Blog</a></h2>
|
||||
<p>#impoCSSible inside EsCSS. A Spanish #CSS blog where the borders & limits of #CSS disappear.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<figure>
|
||||
<img src='https://unsplash.it/450/800?image=737' alt />
|
||||
</figure>
|
||||
<section>
|
||||
<div>
|
||||
<h2>#impoCSSible is nothing</h2>
|
||||
<p>You don´t need Javascript or #CSS processors either for almost 100% of what you want to do.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<figure>
|
||||
<img src='https://unsplash.it/450/800?image=870' alt />
|
||||
</figure>
|
||||
<section>
|
||||
<div>
|
||||
<h2>Idea from E.Bouças´s <a href='https://codepen.io/eduardoboucas/full/qdaOWv/'>pen</a></h2>
|
||||
<p>Without jQuery or Javascript, nor fixed position (bye IOs problems)</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<figure>
|
||||
<img src='https://unsplash.it/450/800?image=743' alt />
|
||||
</figure>
|
||||
<section>
|
||||
<div>
|
||||
<h2>Images from unsplash.it</h2>
|
||||
<p>Because it´s the best for demos. Thanks, guys!</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<figure>
|
||||
<img src='https://unsplash.it/450/800?image=452' alt />
|
||||
</figure>
|
||||
<section>
|
||||
<div>
|
||||
<h2>show the PEN.<br/>
|
||||
<a href='https://escss.blogspot.com/2017/08/scroll-half-by-half-pure-css.html'>link the POST</a></h2>
|
||||
<p>Por una web con mucho estilo, para argonautas con buen gusto.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</article>
|
||||
|
||||
|
||||
<script th:src="@{/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js}"></script>
|
||||
|
||||
</section>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user