Changes to be committed:
modified: css/style.css modified: index.html
This commit is contained in:
DarkShyMW
@@ -1,12 +1,17 @@
|
|||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
background-color: black;
|
background-color: black;
|
||||||
color: #00ff00;
|
color: #00ff00;
|
||||||
font-family: 'Courier New', Courier, monospace;
|
font-family: 'Courier New', Courier, monospace;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header {
|
header {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -35,7 +40,7 @@ body {
|
|||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 12px;
|
width: 12px;
|
||||||
height: 12px;
|
height: 12px;
|
||||||
margin-right: 3px;
|
margin-right: 5px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -59,7 +64,6 @@ body {
|
|||||||
.terminal-body h1 {
|
.terminal-body h1 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
text-align: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#blink {
|
#blink {
|
||||||
@@ -74,7 +78,6 @@ body {
|
|||||||
|
|
||||||
main {
|
main {
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
text-align: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.about, .projects {
|
.about, .projects {
|
||||||
@@ -86,7 +89,13 @@ main {
|
|||||||
background: #1e1e1e;
|
background: #1e1e1e;
|
||||||
}
|
}
|
||||||
|
|
||||||
.projects .btn {
|
.centered-image {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-links a {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin: 10px;
|
margin: 10px;
|
||||||
padding: 10px 20px;
|
padding: 10px 20px;
|
||||||
@@ -97,14 +106,13 @@ main {
|
|||||||
transition: background 0.3s;
|
transition: background 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.projects .btn:hover {
|
.project-links a:hover {
|
||||||
background: #00ff00;
|
background: #00ff00;
|
||||||
color: black;
|
color: black;
|
||||||
}
|
}
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
text-align: center;
|
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
border-top: 2px solid #00ff00;
|
border-top: 2px solid #00ff00;
|
||||||
}
|
}
|
||||||
@@ -121,15 +129,3 @@ footer {
|
|||||||
.terminal-footer a:hover {
|
.terminal-footer a:hover {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
.image-section {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
margin: 20px auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.centered-image {
|
|
||||||
max-width: 100%;
|
|
||||||
height: auto;
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
34
index.html
34
index.html
@@ -3,12 +3,17 @@
|
|||||||
<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.0">
|
||||||
<meta name="description" content="Сайт визитка DarkShy, системного администратора и разработчика.">
|
<meta name="description" content="Личный сайт DarkShy, системного администратора и разработчика в стиле терминала Linux.">
|
||||||
<meta name="keywords" content="DarkShy, разработка, системное администрирование, веб-дизайн">
|
<meta name="keywords" content="DarkShy, системный администратор, разработчик, терминал, Linux, блог">
|
||||||
<meta name="author" content="DarkShy">
|
<meta name="author" content="DarkShy">
|
||||||
<title>DarkShy - main page</title>
|
<meta property="og:title" content="DarkShy - Личный сайт">
|
||||||
|
<meta property="og:description" content="Личный сайт DarkShy, системного администратора и разработчика. Узнай обо мне больше!">
|
||||||
|
<meta property="og:image" content="/img/darkshy-character.png">
|
||||||
|
<meta property="og:url" content="https://darkshy.bronyfurry.com">
|
||||||
|
<meta property="og:type" content="website">
|
||||||
|
<link rel="icon" href="/img/favicon.ico" type="image/x-icon">
|
||||||
|
<title>DarkShy - Личный сайт</title>
|
||||||
<link rel="stylesheet" href="/css/style.css">
|
<link rel="stylesheet" href="/css/style.css">
|
||||||
<link rel="icon" type="image/x-icon" href="/img/favicon.ico">
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header class="header">
|
<header class="header">
|
||||||
@@ -20,7 +25,8 @@
|
|||||||
<span class="terminal-title">darkshy@bronyfurry:~</span>
|
<span class="terminal-title">darkshy@bronyfurry:~</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="terminal-body">
|
<div class="terminal-body">
|
||||||
<h1 class="dark">Просто серая пегаска..<span id="blink">|</span></h1>
|
<h1>darkshy@bronyfurry:~ <span id="blink">|</span></h1>
|
||||||
|
<p>Привет! Добро пожаловать на мой личный сайт в стиле терминала Linux.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
@@ -28,22 +34,20 @@
|
|||||||
<main>
|
<main>
|
||||||
<section class="about">
|
<section class="about">
|
||||||
<h2>Обо мне</h2>
|
<h2>Обо мне</h2>
|
||||||
<p>Меня зовут DarkShy. В свободное время я занимаюсь изучением программирования на языке NodeJS, а также сайтами. По профессии я - системный администратор.</p>
|
<p>Меня зовут DarkShy. Я системный администратор и разработчик, увлекаюсь программированием на NodeJS и созданием веб-сайтов. Когда я не работаю, я разрабатываю свои проекты и изучаю новые технологии.</p>
|
||||||
<p>На данный момент работаю в школе учителем информатики и математики, а также сетевым администратором. Задумываюсь о высшем образовании, хотя ещё не понял, зачем оно мне нужно.</p>
|
<p>Люблю делиться знаниями, поэтому также веду блог и работаю в сфере образования.</p>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="image-section">
|
<section class="image-section">
|
||||||
<img src="/img/log.webp" alt="DarkShy" class="centered-image">
|
<img src="/img/darkshy-character.png" alt="DarkShy" class="centered-image">
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="projects">
|
<section class="projects">
|
||||||
<h2>Мои проекты</h2>
|
<h2>Мои проекты</h2>
|
||||||
<div class="project-links">
|
<div class="project-links">
|
||||||
<a href="https://bronyfurry.com/?from=darkshy" class="btn" target="_blank">BronyFurry fediverse</a>
|
|
||||||
<a href="https://github.com/darkshymw" class="btn" target="_blank">Мой GitHub</a>
|
<a href="https://github.com/darkshymw" class="btn" target="_blank">Мой GitHub</a>
|
||||||
<a href="https://vk.com/gigisarts" class="btn" target="_blank">Паблик с рисунками</a>
|
<a href="https://bronyfurry.com/?from=darkshy" class="btn" target="_blank">BronyFurry</a>
|
||||||
<a href="/offline.html" class="btn" target="_blank">Страница offline</a>
|
<a href="/offline.html" class="btn" target="_blank">Страница offline</a>
|
||||||
<a href="https://article.darkshy.bronyfurry.com/" class="btn" target="_blank">Блоговый форум</a>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
@@ -57,5 +61,13 @@
|
|||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Можно добавить функциональность, например, для бл blinking текста
|
||||||
|
setInterval(() => {
|
||||||
|
const blinkElement = document.getElementById("blink");
|
||||||
|
blinkElement.style.opacity = (blinkElement.style.opacity === "0" ? "1" : "0");
|
||||||
|
}, 1000);
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user