FEAT: New 404 page, pages now use jekyll for componentalization.
This commit is contained in:
MajorDroolz
5
.gitignore
vendored
Normal file
5
.gitignore
vendored
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
_site
|
||||||
|
.bundle
|
||||||
|
.jekyll-cache
|
||||||
|
vendor
|
||||||
|
.vscode
|
||||||
16
404.html
Normal file
16
404.html
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
---
|
||||||
|
title: 404
|
||||||
|
description: This is the home page of Maxim Voldman Hutz's personal website.
|
||||||
|
layout: default
|
||||||
|
---
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="/styles/404.css">
|
||||||
|
|
||||||
|
<section id="notfound" class="back">
|
||||||
|
<div id="text-outer">
|
||||||
|
<i>Looks like your lost!</i>
|
||||||
|
<h1 id="text-404" class="shadow">404</h1>
|
||||||
|
</div>
|
||||||
|
<hr class="lighter">
|
||||||
|
<button type="button" class="nav-link white button" onclick="history.back(-1)">Go Back.</button>
|
||||||
|
</section>
|
||||||
2
Gemfile
Normal file
2
Gemfile
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
source "https://rubygems.org"
|
||||||
|
gem "jekyll", "~> 4.3"
|
||||||
70
Gemfile.lock
Normal file
70
Gemfile.lock
Normal file
@@ -0,0 +1,70 @@
|
|||||||
|
GEM
|
||||||
|
remote: https://rubygems.org/
|
||||||
|
specs:
|
||||||
|
addressable (2.8.1)
|
||||||
|
public_suffix (>= 2.0.2, < 6.0)
|
||||||
|
colorator (1.1.0)
|
||||||
|
concurrent-ruby (1.1.10)
|
||||||
|
em-websocket (0.5.3)
|
||||||
|
eventmachine (>= 0.12.9)
|
||||||
|
http_parser.rb (~> 0)
|
||||||
|
eventmachine (1.2.7)
|
||||||
|
ffi (1.15.5)
|
||||||
|
forwardable-extended (2.6.0)
|
||||||
|
google-protobuf (3.21.12)
|
||||||
|
http_parser.rb (0.8.0)
|
||||||
|
i18n (1.12.0)
|
||||||
|
concurrent-ruby (~> 1.0)
|
||||||
|
jekyll (4.3.1)
|
||||||
|
addressable (~> 2.4)
|
||||||
|
colorator (~> 1.0)
|
||||||
|
em-websocket (~> 0.5)
|
||||||
|
i18n (~> 1.0)
|
||||||
|
jekyll-sass-converter (>= 2.0, < 4.0)
|
||||||
|
jekyll-watch (~> 2.0)
|
||||||
|
kramdown (~> 2.3, >= 2.3.1)
|
||||||
|
kramdown-parser-gfm (~> 1.0)
|
||||||
|
liquid (~> 4.0)
|
||||||
|
mercenary (>= 0.3.6, < 0.5)
|
||||||
|
pathutil (~> 0.9)
|
||||||
|
rouge (>= 3.0, < 5.0)
|
||||||
|
safe_yaml (~> 1.0)
|
||||||
|
terminal-table (>= 1.8, < 4.0)
|
||||||
|
webrick (~> 1.7)
|
||||||
|
jekyll-sass-converter (3.0.0)
|
||||||
|
sass-embedded (~> 1.54)
|
||||||
|
jekyll-watch (2.2.1)
|
||||||
|
listen (~> 3.0)
|
||||||
|
kramdown (2.4.0)
|
||||||
|
rexml
|
||||||
|
kramdown-parser-gfm (1.1.0)
|
||||||
|
kramdown (~> 2.0)
|
||||||
|
liquid (4.0.3)
|
||||||
|
listen (3.7.1)
|
||||||
|
rb-fsevent (~> 0.10, >= 0.10.3)
|
||||||
|
rb-inotify (~> 0.9, >= 0.9.10)
|
||||||
|
mercenary (0.4.0)
|
||||||
|
pathutil (0.16.2)
|
||||||
|
forwardable-extended (~> 2.6)
|
||||||
|
public_suffix (5.0.1)
|
||||||
|
rb-fsevent (0.11.2)
|
||||||
|
rb-inotify (0.10.1)
|
||||||
|
ffi (~> 1.0)
|
||||||
|
rexml (3.2.5)
|
||||||
|
rouge (3.30.0)
|
||||||
|
safe_yaml (1.0.5)
|
||||||
|
sass-embedded (1.57.1-arm64-darwin)
|
||||||
|
google-protobuf (~> 3.21)
|
||||||
|
terminal-table (3.0.2)
|
||||||
|
unicode-display_width (>= 1.1.1, < 3)
|
||||||
|
unicode-display_width (2.4.1)
|
||||||
|
webrick (1.7.0)
|
||||||
|
|
||||||
|
PLATFORMS
|
||||||
|
arm64-darwin-21
|
||||||
|
|
||||||
|
DEPENDENCIES
|
||||||
|
jekyll (~> 4.3)
|
||||||
|
|
||||||
|
BUNDLED WITH
|
||||||
|
2.4.2
|
||||||
13
_includes/footer.html
Normal file
13
_includes/footer.html
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
<link rel="stylesheet" href="/styles/footer.css">
|
||||||
|
|
||||||
|
<footer class="dark back">
|
||||||
|
<h2>© 2022</h2>
|
||||||
|
<div class="flex"></div>
|
||||||
|
<a href="https://github.com/MajorDroolz" class="png-icon" target="_blank">
|
||||||
|
<img src="/res/icons/github.png" alt="GitHub" width="30" height="30">
|
||||||
|
</a>
|
||||||
|
<a href="https://www.linkedin.com/in/maximhutz/" class="png-icon" target="_blank">
|
||||||
|
<img src="/res/icons/linkedin.png" alt="LinkedIn" width="30" height="30">
|
||||||
|
</a>
|
||||||
|
<a href="mailto:maximhutz@gmail.com" class="nav-link white icon" data-i="mail" aria-label="Contact" target="_blank"></a>
|
||||||
|
</footer>
|
||||||
30
_includes/header.html
Normal file
30
_includes/header.html
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
<link rel="stylesheet" href="/styles/header.css">
|
||||||
|
|
||||||
|
<header class="light back shadow">
|
||||||
|
<a href="/" class="nav-link dark">MAX HUTZ</a>
|
||||||
|
<div class="flex"></div>
|
||||||
|
<a href="/experience" class="nav-link dark icon nav3" data-i="work">Experience</a>
|
||||||
|
<a href="/resume" class="nav-link dark icon nav3" data-i="clinical_notes">Resume</a>
|
||||||
|
<a href="mailto:maximhutz@gmail.com" class="nav-link dark icon nav3" data-i="mail">Contact</a>
|
||||||
|
<a href="/experience" class="nav-link dark icon nav2" data-i="work" aria-label="Experience"></a>
|
||||||
|
<a href="/resume" class="nav-link dark icon nav2" data-i="clinical_notes" aria-label="Resume"></a>
|
||||||
|
<a href="mailto:maximhutz@gmail.com" class="nav-link dark icon nav2" data-i="mail" aria-label="Contact"></a>
|
||||||
|
<button class="nav-link dark icon nav1" data-i="menu" aria-label="Menu" onclick="document.getElementById('menu')?.showModal()"></button>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<dialog id="menu">
|
||||||
|
<div class="light width-pad shadow">
|
||||||
|
<div id="menu-inner">
|
||||||
|
<div id="menu-top">
|
||||||
|
<a href="/home" class="nav-link dark">MAX HUTZ</a>
|
||||||
|
<div class="flex"></div>
|
||||||
|
<form method="dialog">
|
||||||
|
<button class="nav-link dark icon" data-i="close" aria-label="Close"></button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<a href="/experience" class="nav-link dark icon" data-i="work">Experience</a>
|
||||||
|
<a href="/resume" class="nav-link dark icon" data-i="clinical_notes">Resume</a>
|
||||||
|
<a href="mailto:maximhutz@gmail.com" class="nav-link dark icon" data-i="mail">Contact</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</dialog>
|
||||||
1
_includes/style.html
Normal file
1
_includes/style.html
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<link rel="stylesheet" href="/styles/{{ include.name }}.css">
|
||||||
30
_layouts/default.html
Normal file
30
_layouts/default.html
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta name="description" content="{{ page.description }}">
|
||||||
|
|
||||||
|
<link rel="shortcut icon" type="image/png" href="/res/favicon.png">
|
||||||
|
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,500,1,200">
|
||||||
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap">
|
||||||
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;900&display=swap">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="/styles/global.css">
|
||||||
|
<link rel="stylesheet" href="/styles/default.css">
|
||||||
|
|
||||||
|
<title>{{ page.title }} ─ Max Hutz</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
{% include header.html %}
|
||||||
|
|
||||||
|
{{ content }}
|
||||||
|
|
||||||
|
{% include footer.html %}
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
120
home/index.html
120
home/index.html
@@ -1,120 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<meta name="description" content="This is the home page of Maxim Voldman Hutz's personal website.">
|
|
||||||
|
|
||||||
<link rel="icon" type="image/x-icon" href="/res/favicon.ico">
|
|
||||||
|
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
||||||
|
|
||||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,500,1,200">
|
|
||||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap">
|
|
||||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;900&display=swap">
|
|
||||||
|
|
||||||
<link rel="stylesheet" href="/styles.css">
|
|
||||||
<link rel="stylesheet" href="index.css">
|
|
||||||
<title>Max Hutz</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="header-outer" class="light width-pad shadow">
|
|
||||||
<header>
|
|
||||||
<a href="#" class="nav-link dark">MAX HUTZ</a>
|
|
||||||
<div class="flex"></div>
|
|
||||||
<a href="/experience" class="nav-link dark icon nav3" data-i="work">Experience</a>
|
|
||||||
<a href="/resume" class="nav-link dark icon nav3" data-i="clinical_notes">Resume</a>
|
|
||||||
<a href="mailto:maximhutz@gmail.com" class="nav-link dark icon nav3" data-i="mail">Contact</a>
|
|
||||||
<a href="/experience" class="nav-link dark icon nav2" data-i="work" aria-label="Experience"></a>
|
|
||||||
<a href="/resume" class="nav-link dark icon nav2" data-i="clinical_notes" aria-label="Resume"></a>
|
|
||||||
<a href="mailto:maximhutz@gmail.com" class="nav-link dark icon nav2" data-i="mail" aria-label="Contact"></a>
|
|
||||||
<button class="nav-link dark icon nav1" data-i="menu" aria-label="Menu" onclick="document.getElementById('menu')?.showModal()"></button>
|
|
||||||
</header>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="light width-pad">
|
|
||||||
<section id="about">
|
|
||||||
<div class="flex"></div>
|
|
||||||
<div class="flex"></div>
|
|
||||||
<div>
|
|
||||||
<h1>Hey! 👋 <span class="pre">I'm Max Hutz.</span></h1>
|
|
||||||
<i>Software engineer in New York.</i>
|
|
||||||
</div>
|
|
||||||
<p id="about-me">
|
|
||||||
I’m a passionate computer science student skilled in building
|
|
||||||
responsive, full-stack applications. I love learning from colleagues
|
|
||||||
and teaching future developers. I thrive where teamwork and creativity
|
|
||||||
are key.
|
|
||||||
</p>
|
|
||||||
<hr class="darker">
|
|
||||||
<nav>
|
|
||||||
<div id="inner-nav">
|
|
||||||
<a href="mailto:maximhutz@gmail.com" class="nav-link blue button flex">maximhutz@gmail.com</a>
|
|
||||||
<a href="/resume" class="nav-link red button r-icon flex" data-i="arrow_right" target="_blank">View Resume</a>
|
|
||||||
</div>
|
|
||||||
<div class="space"></div>
|
|
||||||
</nav>
|
|
||||||
<div class="flex"></div>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="dark width-pad">
|
|
||||||
<section id="projects">
|
|
||||||
<h2>Worked on:</h2>
|
|
||||||
<div id="project-list">
|
|
||||||
<a class="yellow project-item shadow" href="/experience/malung">
|
|
||||||
<div class="space"></div>
|
|
||||||
<div class="nav-link project-link r-icon" data-i="arrow_right">Malung: COVID-19 Classifier</div>
|
|
||||||
</a>
|
|
||||||
<a class="blue project-item shadow" href="/experience/freshmanual">
|
|
||||||
<div class="space"></div>
|
|
||||||
<div class="nav-link project-link r-icon" data-i="arrow_right">Freshmanual: Mobile App</div>
|
|
||||||
</a>
|
|
||||||
<a class="green project-item shadow" href="/experience/pollbuddy">
|
|
||||||
<div class="space"></div>
|
|
||||||
<div class="nav-link project-link r-icon" data-i="arrow_right">Poll Buddy</div>
|
|
||||||
</a>
|
|
||||||
<a class="red project-item shadow" href="/experience/rpi-crisis">
|
|
||||||
<div class="space"></div>
|
|
||||||
<div class="nav-link project-link r-icon" data-i="arrow_right">CRISIS</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<hr class="lighter">
|
|
||||||
<a href="/experience" id="experience-button" class="nav-link white button">View all experiences.</a>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="footer-pad" class="dark width-pad">
|
|
||||||
<footer>
|
|
||||||
<h2>© 2022</h2>
|
|
||||||
<div class="flex"></div>
|
|
||||||
<a href="https://github.com/MajorDroolz" class="png-icon" target="_blank">
|
|
||||||
<img src="/res/icons/github.png" alt="GitHub" width="30" height="30">
|
|
||||||
</a>
|
|
||||||
<a href="https://www.linkedin.com/in/maximhutz/" class="png-icon" target="_blank">
|
|
||||||
<img src="/res/icons/linkedin.png" alt="LinkedIn" width="30" height="30">
|
|
||||||
</a>
|
|
||||||
<a href="mailto:maximhutz@gmail.com" class="nav-link white icon" data-i="mail" aria-label="Contact" target="_blank"></a>
|
|
||||||
</footer>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<dialog id="menu">
|
|
||||||
<div class="light width-pad shadow">
|
|
||||||
<div id="menu-inner">
|
|
||||||
<div id="menu-top">
|
|
||||||
<a href="/home" class="nav-link dark">MAX HUTZ</a>
|
|
||||||
<div class="flex"></div>
|
|
||||||
<form method="dialog">
|
|
||||||
<button class="nav-link dark icon" data-i="close" aria-label="Close"></button>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
<a href="/experience" class="nav-link dark icon" data-i="work">Experience</a>
|
|
||||||
<a href="/resume" class="nav-link dark icon" data-i="clinical_notes">Resume</a>
|
|
||||||
<a href="mailto:maximhutz@gmail.com" class="nav-link dark icon" data-i="mail">Contact</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</dialog>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
59
index.html
59
index.html
@@ -1,7 +1,52 @@
|
|||||||
<!DOCTYPE html>
|
---
|
||||||
<html>
|
title: Home
|
||||||
<head>
|
description: This is the home page of Maxim Voldman Hutz's personal website.
|
||||||
<meta http-equiv="Refresh" content="0; url=resume">
|
layout: default
|
||||||
<link rel="stylesheet" href="/styles.css">
|
---
|
||||||
</head>
|
|
||||||
</html>
|
<section id="about" class="light back">
|
||||||
|
<div class="flex"></div>
|
||||||
|
<div class="flex"></div>
|
||||||
|
<div>
|
||||||
|
<h1>Hey! 👋 <span class="pre">I'm Max Hutz.</span></h1>
|
||||||
|
<i>Software engineer in New York.</i>
|
||||||
|
</div>
|
||||||
|
<p id="about-me">
|
||||||
|
I’m a passionate computer science student skilled in building responsive,
|
||||||
|
full-stack applications. I love learning from colleagues and teaching future
|
||||||
|
developers. I thrive where teamwork and creativity are key.
|
||||||
|
</p>
|
||||||
|
<hr class="darker">
|
||||||
|
<nav>
|
||||||
|
<div id="inner-nav">
|
||||||
|
<a href="mailto:maximhutz@gmail.com" class="nav-link blue button flex">maximhutz@gmail.com</a>
|
||||||
|
<a href="/resume" class="nav-link red button r-icon flex" data-i="arrow_right" target="_blank">View Resume</a>
|
||||||
|
</div>
|
||||||
|
<div class="space"></div>
|
||||||
|
</nav>
|
||||||
|
<div class="flex"></div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="projects" class="dark back">
|
||||||
|
<h2>Worked on:</h2>
|
||||||
|
<div id="project-list">
|
||||||
|
<a class="yellow project-item shadow" href="/experience/malung">
|
||||||
|
<div class="space"></div>
|
||||||
|
<div class="nav-link project-link r-icon" data-i="arrow_right">Malung: COVID-19 Classifier</div>
|
||||||
|
</a>
|
||||||
|
<a class="blue project-item shadow" href="/experience/freshmanual">
|
||||||
|
<div class="space"></div>
|
||||||
|
<div class="nav-link project-link r-icon" data-i="arrow_right">Freshmanual: Mobile App</div>
|
||||||
|
</a>
|
||||||
|
<a class="green project-item shadow" href="/experience/pollbuddy">
|
||||||
|
<div class="space"></div>
|
||||||
|
<div class="nav-link project-link r-icon" data-i="arrow_right">Poll Buddy</div>
|
||||||
|
</a>
|
||||||
|
<a class="red project-item shadow" href="/experience/rpi-crisis">
|
||||||
|
<div class="space"></div>
|
||||||
|
<div class="nav-link project-link r-icon" data-i="arrow_right">CRISIS</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<hr class="lighter">
|
||||||
|
<a href="/experience" id="experience-button" class="nav-link white button">View all experiences.</a>
|
||||||
|
</section>
|
||||||
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 20 KiB |
@@ -16,8 +16,8 @@
|
|||||||
">
|
">
|
||||||
|
|
||||||
<!-- Resume styling. -->
|
<!-- Resume styling. -->
|
||||||
<link rel="preload stylesheet" as="style" href="/styles.css">
|
<link rel="preload stylesheet" as="style" href="/styles/global.css">
|
||||||
<link rel="preload stylesheet" as="style" href="index.css">
|
<link rel="preload stylesheet" as="style" href="/styles/resume.css">
|
||||||
|
|
||||||
<!-- Site's Icon -->
|
<!-- Site's Icon -->
|
||||||
<link rel="icon" type="image/png" href="/res/favicon.ico">
|
<link rel="icon" type="image/png" href="/res/favicon.ico">
|
||||||
30
styles/404.css
Normal file
30
styles/404.css
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
#notfound {
|
||||||
|
--color: var(--dark) linear-gradient(#0000, #0003);
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
color: white;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#notfound > * {
|
||||||
|
max-width: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#text-outer > i {
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#text-outer {
|
||||||
|
display: inline-flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#text-404 {
|
||||||
|
font-size: 160px;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
@@ -1,5 +1,19 @@
|
|||||||
|
html {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
min-height: 100vh;
|
||||||
|
width: min(100vw, 1024px);
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*----------------------------------------------------------------------------*/
|
||||||
|
|
||||||
* {
|
* {
|
||||||
overflow: hidden;
|
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -7,20 +21,6 @@ button {
|
|||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: flex-start;
|
|
||||||
width: 100vw;
|
|
||||||
overflow-y: scroll;
|
|
||||||
}
|
|
||||||
|
|
||||||
html {
|
|
||||||
overflow-y: scroll;
|
|
||||||
scroll-behavior: smooth;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pre {
|
.pre {
|
||||||
all: unset;
|
all: unset;
|
||||||
white-space: pre;
|
white-space: pre;
|
||||||
@@ -96,6 +96,8 @@ hr {
|
|||||||
color: var(--color);
|
color: var(--color);
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 10px 30px;
|
padding: 10px 30px;
|
||||||
|
font-size: 20px;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button::before {
|
.button::before {
|
||||||
@@ -123,26 +125,6 @@ hr {
|
|||||||
|
|
||||||
/*----------------------------------------------------------------------------*/
|
/*----------------------------------------------------------------------------*/
|
||||||
|
|
||||||
#header-outer {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
z-index: 100;
|
|
||||||
}
|
|
||||||
|
|
||||||
header {
|
|
||||||
margin: auto;
|
|
||||||
max-width: 1024px;
|
|
||||||
display: flex;
|
|
||||||
gap: 40px;
|
|
||||||
font-size: 25px;
|
|
||||||
font-family: "Open Sans";
|
|
||||||
font-weight: bolder;
|
|
||||||
color: var(--dark);
|
|
||||||
align-items: center;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
#about {
|
#about {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
@@ -151,9 +133,8 @@ header {
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
max-width: 1024px;
|
max-width: 1024px;
|
||||||
min-height: 90vh;
|
min-height: 85vh;
|
||||||
color: var(--dark);
|
color: var(--dark);
|
||||||
padding-top: 30px;
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
gap: 30px;
|
gap: 30px;
|
||||||
}
|
}
|
||||||
@@ -220,19 +201,6 @@ nav {
|
|||||||
align-self: center;
|
align-self: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
#footer-pad {
|
|
||||||
background: var(--dark) linear-gradient(#0002, #0002);
|
|
||||||
}
|
|
||||||
|
|
||||||
footer {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
color: white;
|
|
||||||
max-width: 1024px;
|
|
||||||
margin: auto;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*----------------------------------------------------------------------------*/
|
/*----------------------------------------------------------------------------*/
|
||||||
|
|
||||||
#menu {
|
#menu {
|
||||||
12
styles/footer.css
Normal file
12
styles/footer.css
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
footer {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
color: white;
|
||||||
|
max-width: 1024px;
|
||||||
|
margin: auto;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer::before {
|
||||||
|
filter: brightness(0.8);
|
||||||
|
}
|
||||||
@@ -18,6 +18,8 @@
|
|||||||
|
|
||||||
--grad: linear-gradient(45deg, #F008, #00F8);
|
--grad: linear-gradient(45deg, #F008, #00F8);
|
||||||
--shadow: 0px 10px 50px 0 #0008;
|
--shadow: 0px 10px 50px 0 #0008;
|
||||||
|
|
||||||
|
--width: 1024px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.light { --color: var(--light) }
|
.light { --color: var(--light) }
|
||||||
@@ -28,11 +30,38 @@
|
|||||||
.blue { --color: var(--blue) }
|
.blue { --color: var(--blue) }
|
||||||
.white { --color: white }
|
.white { --color: white }
|
||||||
|
|
||||||
.flex-space, .flex { flex-grow: 1 }
|
.flex-space, .flex, br { flex-grow: 1 }
|
||||||
.space { flex: 1000 }
|
.space { flex: 1000 }
|
||||||
|
|
||||||
/*----------------------------------------------------------------------------*/
|
/*----------------------------------------------------------------------------*/
|
||||||
|
|
||||||
html {
|
html {
|
||||||
background: var(--dark);
|
background-color: var(--dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*----------------------------------------------------------------------------*/
|
||||||
|
|
||||||
|
.back {
|
||||||
|
position: relative;
|
||||||
|
padding: 10px 20px;
|
||||||
|
width: min(100vw, 1024px);
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back::before {
|
||||||
|
background: var(--color);
|
||||||
|
width: 100vw;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
content: "";
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark-back::before {
|
||||||
|
filter: brightness(0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*----------------------------------------------------------------------------*/
|
||||||
13
styles/header.css
Normal file
13
styles/header.css
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
header {
|
||||||
|
position: sticky !important;
|
||||||
|
top: 0;
|
||||||
|
z-index: 10000;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
gap: 40px;
|
||||||
|
font-size: 25px;
|
||||||
|
font-family: "Open Sans";
|
||||||
|
font-weight: bolder;
|
||||||
|
color: var(--dark);
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user