Start re-designing About page
This commit is contained in:
parent
dd87592f46
commit
dbab8f5770
267
css/about.css
267
css/about.css
@ -1,198 +1,123 @@
|
|||||||
html, body {
|
* {
|
||||||
margin: 0;
|
all: unset;
|
||||||
padding: 0;
|
|
||||||
scroll-behavior: smooth;
|
|
||||||
height: 100%;
|
|
||||||
font-family: sans-serif;
|
|
||||||
background: #232323;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
main {
|
|
||||||
scroll-snap-type: y mandatory;
|
|
||||||
overflow-y: scroll;
|
|
||||||
height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section {
|
|
||||||
scroll-snap-align: start;
|
|
||||||
height: 90vh;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
margin: 0;
|
}
|
||||||
|
|
||||||
|
head, script {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
html, body {
|
||||||
|
height: 100%;
|
||||||
|
font-family: "IosevkaTermSlab Nerd Font Mono", monospace;
|
||||||
|
background: #202020;
|
||||||
|
color: #e0e0e0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sections {
|
||||||
|
height: 100vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
scroll-snap-type: y mandatory;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Each section is exactly 90vh tall. */
|
||||||
|
/* The missing 10vh comes from the next section's title-footer. */
|
||||||
|
.section {
|
||||||
|
height: 90vh;
|
||||||
|
scroll-snap-align: start;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
/* This belongs to THIS section, but visually appears at the bottom of
|
||||||
|
the previous section's viewport. */
|
||||||
|
/* The rest of the section: 80vh main content */
|
||||||
}
|
}
|
||||||
.section .title-footer {
|
.section .title-footer {
|
||||||
position: sticky;
|
|
||||||
top: 0;
|
|
||||||
height: 10vh;
|
height: 10vh;
|
||||||
width: 100%;
|
flex-shrink: 0;
|
||||||
margin: 0;
|
display: flex;
|
||||||
z-index: 2;
|
align-items: center;
|
||||||
text-align: left;
|
justify-content: center;
|
||||||
font-size: 2rem;
|
text-decoration: none;
|
||||||
text-shadow: 0 0 5px #000;
|
cursor: pointer;
|
||||||
transition: top 0.3s ease;
|
|
||||||
background-color: white;
|
|
||||||
color: purple;
|
|
||||||
}
|
}
|
||||||
.section::before {
|
.section .title-footer h2 {
|
||||||
content: "";
|
font-size: 1.2rem;
|
||||||
position: absolute;
|
color: #bdbdbd;
|
||||||
top: 0;
|
}
|
||||||
left: 0;
|
.section .title-footer:hover h2 {
|
||||||
right: 0;
|
color: #6fa8a8;
|
||||||
bottom: 0;
|
|
||||||
background-size: cover;
|
|
||||||
background-position: center;
|
|
||||||
filter: blur(5px);
|
|
||||||
opacity: 0.2;
|
|
||||||
z-index: 0;
|
|
||||||
}
|
}
|
||||||
.section .content {
|
.section .content {
|
||||||
position: relative;
|
height: 80vh;
|
||||||
z-index: 1;
|
flex-shrink: 0;
|
||||||
text-align: center;
|
padding: 3rem;
|
||||||
max-width: 800px;
|
display: flex;
|
||||||
margin: 0 2rem;
|
flex-direction: column;
|
||||||
}
|
justify-content: center;
|
||||||
|
}
|
||||||
h2 {
|
.section .content h1 {
|
||||||
font-size: 2rem;
|
font-size: 3rem;
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 0.5rem;
|
||||||
}
|
color: #e0e0e0;
|
||||||
|
}
|
||||||
ul {
|
.section .content p {
|
||||||
list-style: none;
|
color: #bdbdbd;
|
||||||
padding: 0;
|
line-height: 1.5;
|
||||||
}
|
|
||||||
ul li {
|
|
||||||
margin: 0.5rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
footer {
|
|
||||||
margin-top: auto;
|
|
||||||
padding: 1rem;
|
|
||||||
font-size: 0.875rem;
|
|
||||||
text-align: center;
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* background colors */
|
||||||
.section1 {
|
.section1 {
|
||||||
padding: 1rem;
|
background: #202020;
|
||||||
}
|
|
||||||
.section1::before {
|
|
||||||
background-image: url("https://static.vecteezy.com/system/resources/thumbnails/013/384/142/small_2x/fabric-texture-abstract-pattern-black-and-white-textiles-backgrounds-photo.jpg");
|
|
||||||
}
|
|
||||||
.section1 .content {
|
|
||||||
text-align: left;
|
|
||||||
max-width: 1024px;
|
|
||||||
margin: 4rem auto auto;
|
|
||||||
}
|
|
||||||
.section1 .content .portrait {
|
|
||||||
text-align: right;
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
.section1 .content .portrait img {
|
|
||||||
width: 350px;
|
|
||||||
height: 350px;
|
|
||||||
object-fit: cover;
|
|
||||||
border-radius: 50%;
|
|
||||||
box-shadow: 0 0 12px rgba(0, 0, 0, 0.6);
|
|
||||||
}
|
|
||||||
.section1 .content h1 {
|
|
||||||
font-size: 4rem;
|
|
||||||
margin: -6rem 0 1rem;
|
|
||||||
color: #5488bf;
|
|
||||||
text-shadow: 0 0 9px #373737;
|
|
||||||
}
|
|
||||||
.section1 .content h1 .myname {
|
|
||||||
font-style: normal;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
.section1 .content .tagline {
|
|
||||||
font-size: 1.7rem;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
.section1 .content .tagline .tagline-item {
|
|
||||||
display: inline;
|
|
||||||
margin-right: 0.7ch;
|
|
||||||
}
|
|
||||||
.section1 .content .tagline .tagline-item .cursor {
|
|
||||||
display: inline-block;
|
|
||||||
animation: blink 1s steps(2, start) infinite;
|
|
||||||
margin-left: 0.2ch;
|
|
||||||
}
|
|
||||||
@media (max-width: 600px) {
|
|
||||||
.section1 .content {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
.section1 .content .portrait {
|
|
||||||
text-align: center;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
.section1 .content .portrait img {
|
|
||||||
width: 200px;
|
|
||||||
height: 200px;
|
|
||||||
}
|
|
||||||
.section1 .content h1 {
|
|
||||||
text-align: left;
|
|
||||||
margin: 0 0 1ch 1.5rem;
|
|
||||||
font-size: 2.7rem;
|
|
||||||
}
|
|
||||||
.section1 .content .tagline {
|
|
||||||
display: block;
|
|
||||||
margin-left: 1.5rem;
|
|
||||||
}
|
|
||||||
.section1 .content .tagline .tagline-item {
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 0.3rem;
|
|
||||||
}
|
|
||||||
.section1 .content .tagline .tagline-item:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
.section1 .content .tagline .tagline-item:last-child .cursor {
|
|
||||||
margin-left: 0.4ch;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes blink {
|
|
||||||
0%, 100% {
|
|
||||||
color: rgba(255, 255, 255, 0);
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.section2 {
|
.section2 {
|
||||||
background-color: orange;
|
background: #1b1b1b;
|
||||||
}
|
}
|
||||||
.section2::before {
|
.section2 .title-footer {
|
||||||
background-image: url("https://wallpapers.com/images/hd/integral-project-management-cover-erpo8ef1af3wuquu.jpg");
|
background: #1b1b1b;
|
||||||
}
|
|
||||||
|
|
||||||
.lastsection {
|
|
||||||
height: 100vh;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.section3 {
|
.section3 {
|
||||||
background-color: red;
|
background: #242424;
|
||||||
}
|
}
|
||||||
.section3::before {
|
.section3 .title-footer {
|
||||||
background-image: url("https://visme.co/blog/wp-content/uploads/2017/07/50-Beautiful-and-Minimalist-Presentation-Backgrounds-013.jpg");
|
background: #242424;
|
||||||
}
|
}
|
||||||
|
|
||||||
.section4 {
|
.section4 {
|
||||||
background-color: green;
|
background: #171717;
|
||||||
}
|
}
|
||||||
.section4::before {
|
.section4 .title-footer {
|
||||||
background-image: url("https://www.elegantthemes.com/blog/wp-content/uploads/2013/09/bg-1-full.jpg");
|
background: #171717;
|
||||||
}
|
}
|
||||||
|
|
||||||
.section5 {
|
.section5 {
|
||||||
background-color: blue;
|
background: #101010;
|
||||||
}
|
}
|
||||||
.section5::before {
|
.section5 .title-footer {
|
||||||
background-image: url("https://wallpapers.com/images/hd/professional-zoom-background-3h69jq8rrky7f3tj.jpg");
|
background: #101010;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* section5 special footer */
|
||||||
|
.section5 footer {
|
||||||
|
height: 10vh;
|
||||||
|
flex-shrink: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: rgba(255, 255, 255, 0.05);
|
||||||
|
color: #bdbdbd;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* responsive */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.section .content {
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
.section .content h1 {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
.title-footer h2 {
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,72 +1,65 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="utf-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||||
<title>MyName - Portfolio</title>
|
<title>About • candifloss.cc</title>
|
||||||
<link rel="stylesheet" href="../css/about.css" />
|
<link rel="stylesheet" href="../css/about.css">
|
||||||
|
<style>html { scroll-behavior: smooth; }</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<main>
|
|
||||||
<section class="section intro section1" id="intro">
|
<main class="sections" role="main">
|
||||||
|
|
||||||
|
<!-- section1 has no title-footer because nothing should peek above it -->
|
||||||
|
<section id="section1id" class="section section1">
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<div class="portrait">
|
<h1>Section1 title</h1>
|
||||||
<img src="../img/me.jpg" alt="A stylized portrait" />
|
<p>This is section 1</p>
|
||||||
</div>
|
|
||||||
<h1>
|
|
||||||
Hello, I'm <span class="myname">[My Name]</span>
|
|
||||||
</h1>
|
|
||||||
<p class="tagline">
|
|
||||||
<span class="tagline-item">Code Wizard.</span>
|
|
||||||
<span class="tagline-item">Terminal Fanatic.</span>
|
|
||||||
<span class="tagline-item">Amateur Artist.<span class="cursor">_</span></span>
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="section section2" id="about">
|
<!-- section2 starts with title-footer (this belongs to section2) -->
|
||||||
<a class="title-footer">
|
<section id="section2id" class="section section2">
|
||||||
<h2>About Me</h2>
|
<a class="title-footer" href="#section2id" aria-label="Section 2">
|
||||||
|
<h2>Section 2 title</h2>
|
||||||
</a>
|
</a>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>A short, informal overview about who you are and what you enjoy doing.</p>
|
<p>Section 2 content</p>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="section section3" id="skills">
|
<section id="section3id" class="section section3">
|
||||||
<a class="title-footer">
|
<a class="title-footer" href="#section3id" aria-label="Section 3">
|
||||||
<h2>Skills</h2>
|
<h2>Section 3 title</h2>
|
||||||
</a>
|
</a>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<ul>
|
<p>Section 3 content</p>
|
||||||
<li>Web development</li>
|
|
||||||
<li>Linux & system tinkering</li>
|
|
||||||
<li>Rust, Python, Bash</li>
|
|
||||||
<li>Designing interfaces, ricing desktops</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="section section4" id="projects">
|
<section id="section4id" class="section section4">
|
||||||
<a class="title-footer">
|
<a class="title-footer" href="#section4id" aria-label="Section 4">
|
||||||
<h2>Projects</h2>
|
<h2>Section 4 title</h2>
|
||||||
</a>
|
</a>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>A few interesting things I've made or contributed to.</p>
|
<p>Section 4 content</p>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="section section5 lastsection" id="contact">
|
<section id="section5id" class="section section5">
|
||||||
<a class="title-footer">
|
<a class="title-footer" href="#section5id" aria-label="Section 5">
|
||||||
<h2>Contact</h2>
|
<h2>Section 5 title</h2>
|
||||||
</a>
|
</a>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>Email: you@example.com<br />Mastodon / GitHub / etc.</p>
|
<p>Section 5 content</p>
|
||||||
</div>
|
</div>
|
||||||
<footer>
|
<footer>
|
||||||
<p>© 2024 candifloss.cc. All rights reserved.</p>
|
<p>© 2024 candifloss.cc. All rights reserved.</p>
|
||||||
</footer>
|
</footer>
|
||||||
</section>
|
</section>
|
||||||
</main>
|
|
||||||
|
</main>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
10
scss/_vars.scss
Normal file
10
scss/_vars.scss
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
// colors and small tokens
|
||||||
|
$text: #e0e0e0;
|
||||||
|
$muted: #bdbdbd;
|
||||||
|
$accent: #6fa8a8;
|
||||||
|
|
||||||
|
$bg1: #202020;
|
||||||
|
$bg2: #1b1b1b;
|
||||||
|
$bg3: #242424;
|
||||||
|
$bg4: #171717;
|
||||||
|
$bg5: #101010;
|
||||||
@ -1,27 +1,85 @@
|
|||||||
@use "about/base";
|
@use "vars" as v;
|
||||||
@use "about/section1";
|
|
||||||
@use "about/section2";
|
|
||||||
@use "about/section5";
|
|
||||||
|
|
||||||
|
* { all: unset; box-sizing: border-box; }
|
||||||
|
head, script { display: none; }
|
||||||
|
|
||||||
|
html, body {
|
||||||
.section3 {
|
height: 100%;
|
||||||
&::before {
|
font-family: "IosevkaTermSlab Nerd Font Mono", monospace;
|
||||||
background-image: url('https://visme.co/blog/wp-content/uploads/2017/07/50-Beautiful-and-Minimalist-Presentation-Backgrounds-013.jpg');
|
background: v.$bg1;
|
||||||
}
|
color: v.$text;
|
||||||
background-color: red;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.section4 {
|
.sections {
|
||||||
&::before {
|
height: 100vh;
|
||||||
background-image: url('https://www.elegantthemes.com/blog/wp-content/uploads/2013/09/bg-1-full.jpg');
|
overflow-y: auto;
|
||||||
}
|
scroll-snap-type: y mandatory;
|
||||||
background-color: green;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.section5 {
|
/* Each section is exactly 90vh tall. */
|
||||||
&::before {
|
/* The missing 10vh comes from the next section's title-footer. */
|
||||||
background-image: url('https://wallpapers.com/images/hd/professional-zoom-background-3h69jq8rrky7f3tj.jpg');
|
.section {
|
||||||
|
height: 90vh;
|
||||||
|
scroll-snap-align: start;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
/* This belongs to THIS section, but visually appears at the bottom of
|
||||||
|
the previous section's viewport. */
|
||||||
|
.title-footer {
|
||||||
|
height: 10vh;
|
||||||
|
flex-shrink: 0;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
color: v.$muted;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover h2 { color: v.$accent; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* The rest of the section: 80vh main content */
|
||||||
|
.content {
|
||||||
|
height: 80vh;
|
||||||
|
flex-shrink: 0;
|
||||||
|
|
||||||
|
padding: 3rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
h1 { font-size: 3rem; margin-bottom: .5rem; color: v.$text; }
|
||||||
|
p { color: v.$muted; line-height: 1.5; }
|
||||||
}
|
}
|
||||||
background-color: blue;
|
}
|
||||||
|
|
||||||
|
/* background colors */
|
||||||
|
.section1 { background: v.$bg1; }
|
||||||
|
.section2 { background: v.$bg2; .title-footer { background: v.$bg2; } }
|
||||||
|
.section3 { background: v.$bg3; .title-footer { background: v.$bg3; } }
|
||||||
|
.section4 { background: v.$bg4; .title-footer { background: v.$bg4; } }
|
||||||
|
.section5 { background: v.$bg5; .title-footer { background: v.$bg5; } }
|
||||||
|
|
||||||
|
/* section5 special footer */
|
||||||
|
.section5 footer {
|
||||||
|
height: 10vh;
|
||||||
|
flex-shrink: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: rgba(255,255,255,0.05);
|
||||||
|
color: v.$muted;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* responsive */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.section .content { padding: 1.5rem; h1 { font-size: 2rem; } }
|
||||||
|
.title-footer h2 { font-size: 1rem; }
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,87 +0,0 @@
|
|||||||
@use "vars" as *;
|
|
||||||
|
|
||||||
html, body {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
scroll-behavior: smooth;
|
|
||||||
height: 100%;
|
|
||||||
font-family: $font-stack;
|
|
||||||
background: $background;
|
|
||||||
color: $text-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
main {
|
|
||||||
scroll-snap-type: y mandatory;
|
|
||||||
overflow-y: scroll;
|
|
||||||
height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section {
|
|
||||||
scroll-snap-align: start;
|
|
||||||
height: 90vh;
|
|
||||||
//display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
//padding: 1rem;
|
|
||||||
box-sizing: border-box;
|
|
||||||
//position: relative;
|
|
||||||
margin:0;
|
|
||||||
|
|
||||||
.title-footer {
|
|
||||||
position: sticky;
|
|
||||||
top: 0;
|
|
||||||
height: 10vh;
|
|
||||||
width: 100%;
|
|
||||||
margin: 0;
|
|
||||||
z-index: 2;
|
|
||||||
text-align: left;
|
|
||||||
//color: white;
|
|
||||||
font-size: 2rem;
|
|
||||||
text-shadow: 0 0 5px #000;
|
|
||||||
transition: top 0.3s ease;
|
|
||||||
background-color: white;
|
|
||||||
color: purple;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
top: 0; left: 0; right: 0; bottom: 0;
|
|
||||||
background-size: cover;
|
|
||||||
background-position: center;
|
|
||||||
filter: blur(5px);
|
|
||||||
opacity: 0.2;
|
|
||||||
z-index: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
text-align: center;
|
|
||||||
max-width: 800px;
|
|
||||||
margin: 0 2rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
font-size: 2rem;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
|
||||||
list-style: none;
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
li {
|
|
||||||
margin: 0.5rem 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
footer {
|
|
||||||
margin-top: auto;
|
|
||||||
padding: 1rem;
|
|
||||||
font-size: 0.875rem;
|
|
||||||
text-align: center;
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
@ -1,102 +0,0 @@
|
|||||||
@use "vars" as *;
|
|
||||||
|
|
||||||
.section1 {
|
|
||||||
padding: 1rem;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
background-image: url('https://static.vecteezy.com/system/resources/thumbnails/013/384/142/small_2x/fabric-texture-abstract-pattern-black-and-white-textiles-backgrounds-photo.jpg');
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
text-align: left;
|
|
||||||
max-width: 1024px;
|
|
||||||
margin: 4rem auto auto;
|
|
||||||
|
|
||||||
.portrait {
|
|
||||||
text-align: right;
|
|
||||||
margin-top: 0;
|
|
||||||
//margin-right: -25rem;
|
|
||||||
|
|
||||||
img {
|
|
||||||
width: 350px;
|
|
||||||
height: 350px;
|
|
||||||
object-fit: cover;
|
|
||||||
border-radius: 50%;
|
|
||||||
box-shadow: 0 0 12px rgba(0, 0, 0, 0.6);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 4rem;
|
|
||||||
margin: -6rem 0 1rem;
|
|
||||||
color: #5488bf;
|
|
||||||
text-shadow: 0 0 9px #373737;
|
|
||||||
|
|
||||||
.myname {
|
|
||||||
font-style: normal;
|
|
||||||
color: $text-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.tagline {
|
|
||||||
font-size: 1.7rem;
|
|
||||||
text-align: left;
|
|
||||||
|
|
||||||
.tagline-item {
|
|
||||||
display: inline;
|
|
||||||
margin-right: 0.7ch;
|
|
||||||
|
|
||||||
.cursor {
|
|
||||||
display: inline-block;
|
|
||||||
animation: blink 1s steps(2, start) infinite;
|
|
||||||
margin-left: 0.2ch;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 600px) {
|
|
||||||
.content {
|
|
||||||
margin: 0;
|
|
||||||
|
|
||||||
.portrait {
|
|
||||||
text-align: center;
|
|
||||||
margin: 0;
|
|
||||||
|
|
||||||
img {
|
|
||||||
width: 200px;
|
|
||||||
height: 200px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
text-align: left;
|
|
||||||
margin: 0 0 1ch 1.5rem;
|
|
||||||
font-size: 2.7rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tagline {
|
|
||||||
display: block;
|
|
||||||
margin-left: 1.5rem;
|
|
||||||
|
|
||||||
.tagline-item {
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 0.3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tagline-item:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
.cursor {
|
|
||||||
margin-left: 0.4ch;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Blinking cursor animation
|
|
||||||
@keyframes blink {
|
|
||||||
0%, 100% { color: #fff0; }
|
|
||||||
50% { color: #fff; }
|
|
||||||
}
|
|
||||||
@ -1,6 +0,0 @@
|
|||||||
.section2 {
|
|
||||||
&::before {
|
|
||||||
background-image: url('https://wallpapers.com/images/hd/integral-project-management-cover-erpo8ef1af3wuquu.jpg');
|
|
||||||
}
|
|
||||||
background-color: orange;
|
|
||||||
}
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
.lastsection {
|
|
||||||
height: 100vh;
|
|
||||||
}
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
$font-stack: sans-serif;
|
|
||||||
$background:#232323;
|
|
||||||
$text-color: #fff;
|
|
||||||
Loading…
x
Reference in New Issue
Block a user