Skip to content

Add files via upload #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
F0rNiX wants to merge 1 commit into
base: gh-pages
Choose a base branch
from
Open

Add files via upload #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
112 changes: 112 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Daniil Bondarev - CV</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" crossorigin="anonymous" />
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
// Add the new slick-theme.css if you want the default styling
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
</head>

<body>
<div class="wrapper">
<header>
<section class="name-photo">
<div class="info">
<h1>Daniil Bondarev</h1>
<p>Back-end Developer</p>
</div>
<img class="border" src="https://i.pinimg.com/736x/c2/98/b2/c298b2348456023dfd79a2e422c5f058--martin-schoeller-portrait-inspiration.jpg" width="15%" height="15%" alt="Не существующая личность">
</section>
<ul class="contact-list">
<li><i class="fa fa-map-marker-alt"></i>Krasnodar, Russia</li>
<li><i class="fa fa-envelope"></i>danilbond01@gmail.com</li>
<li><i class="fa fa-phone"></i>(952)819-05-80</li>
<li><i class="fa fa-code"></i><a href="https://www.codewars.com/users/F0rNiX">CodeWars</a></li>
<li><i class="fab fa-github"></i><a href="https://github.com/F0rNiX">GitHub</a></li>
</ul>
</header>

<main>
<section class="about-me">
<h2>About Me</h2>
<p>Учу разные языки программирования для общего понимания об их устройстве. Основная цель развиваться в области развлечений интересных компьютерных игр. Изучал основы вёрстки и работы с разными движками.</p>
</section>

<section class="skills">
<h2>Skills</h2>
<ul class="skill-list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Node.js</li>
<li>Lua</li>
<li>Git</li>
</ul>
</section>

<section class="code-examples">
<h2>Code Examples</h2>
<ul class="code-list">
<li>
<a href="#">My resume</a>
<p>Вы смотрите данный пример работы на HTML CSS</p>
</li>
<li>
<a href="https://github.com/F0rNiX/rsschool-cv">GIT</a>
<p>Мой репозиторий на гитхабе</p>
</li>
<li>
<a href="https://rbxscript.com/scripts-copy/UniversalAimlock-E9duv">Lua scripts</a>
<p>Создавал скрипты с помощью данного скриптового языка для игры Roblox</p>
</li>
</ul>
</section>

<section class="work-experience">
<h2 class="work-title">Work Experience</h2>
<ul class="work-list">
<li>
<h3>Layout designer</h3>
<p>Selfin's company (2022-summer, 2023-last time)</p>
<ul>
<li>Успешно закончил начинающие курсы по HTML, CSS</li>
<li>Понял какого быть верстальщиком</li>
<li>Начал изучать JavaScript, до сих пор в процессе</li>
<li>Пинал балду</li>
</ul>
</li>
<li>
<h3>Back-end Developer</h3>
<p>Google Inc. (2024 - 20**)</p>
<ul>
<li>Предвижу своё будущее в данной компании, буду делать им сайты</li>
<li>Делал им приложения</li>
<li>Учавствовал в коллоборации создания общего поисковика вместе с Яндекс</li>
</ul>
</li>
</ul>
</section>
<section class="education">
<h2>Education</h2>
<ul class="education-list">
<li>
<h3>Programmer in computer systems</h3>
<p>Краснодарский Гуманитарно Технический Колледж (КГТК) (2020 - 2024)</p>
</li>
</ul>
</section>
</main>
</div>
</body>
<footer>
<div class="footer">
<p>&copy; 2023 Daniil Bondarev. All rights reserved.</p>
</ul>
</div>
</footer>
</html>
281 changes: 281 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,281 @@
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
color: #333;
background-color: #f7f7f7;
}

.wrapper {
max-width: 800px;
margin: 0 auto;
padding: 5px;
}

.border {

border-bottom-left-radius: 5px;
}

header {
flex-wrap: wrap;
align-items: center;
border: 5px solid;
border-radius: 5px;
}

.name-photo {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
}

.name-photo .info {
display: flex;
flex-direction: column;
justify-content: center;
text-align: right;
}

.name-photo h1 {
margin-bottom: 0;
}

.name-photo p {
margin-top: 5px;
}


.footer {
background-color: #333;
max-width: 800px;
margin: 0 auto;
border: 20px solid #333;
color: #f7f7f7;
}

h1 {
font-size: 40px;
font-weight: bold;
margin-bottom: 10px;
color: #f7f7f7;
background-color: #333;
border-bottom-right-radius: 5px;
}

p {
font-size: 18px;
flex: 1 1 100%;
}

.contact-list {
display: flex;
flex-wrap: wrap;
align-items: center;
list-style: none;
margin-top: 20px;
}

.contact-list li {
display: flex;
align-items: center;
margin-right: 20px;
}

.contact-list li a {
color: #333;
text-decoration: none;
}

.contact-list li a:hover {
color: #0077b5;
}

.contact-list li i {
margin-right: 5px;
font-size: 20px;
}

.fa {
text-align: center;
min-width: 1em;
}

.about-me {
margin-top: 30px;
}

.about-me p {
margin-top: 20px;
}

.skills {
margin-top: 30px;
}

.skill-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-gap: 20px;
list-style: none;
color: #31bfff;
}

.skill-list li { /*Поиграться с тенями*/
background-color: #fff;
border: 1px solid #ccc;
padding: 10px 20px;
border-radius: 5px;
text-align: center;
font-size: 18px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

.code-examples {
margin-top: 30px;
}

.code-list {
list-style: none;
}

.code-list li {
margin-top: 20px;
}

.code-list li a {
color: #333;
text-decoration: none;
font-weight: bold;
}

.code-list li
{
display: block;
font-size: 18px;
margin-top: 5px;
}

.code-list li a:hover {
color: #0077b5;
}

.work-experience {
margin-top: 30px;
border: 5px solid#333;
border-radius: 5px;
}

.work-list {
list-style: none;
}

.work-list li {
margin-top: 20px;
}

.work-list h3 {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
}

.work-list p {
font-size: 18px;
font-style: italic;
margin-bottom: 10px;
}

.work-list ul {
list-style: disc;
margin-left: 20px;
margin-bottom: 10px;
}

.work-list ul li {
font-size: 18px;
margin-top: 5px;
}

.education {
margin-top: 30px;
}

.education-list {
list-style: none;
}

.education-list h3 {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
}

.education-list p {
font-size: 18px;
font-style: italic;
margin-bottom: 10px;
}

h2 {
background-color: #333;
color: #f7f7f7;
border-radius:5px;
}

@media only screen and (max-width: 600px) { /*если экран меньше 600 то используется ксс ниже*/
.contact-list {
flex-wrap: wrap;
}
.contact-list li {
flex: 1 1 100%;
margin-right: 0;
margin-bottom: 10px;
}

.skills {
margin-top: 20px;
}

.skill-list {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.code-list li {
margin-top: 10px;
}

.work-list h3 {
font-size: 22px;
margin-bottom: 5px;
}

.work-list p {
font-size: 16px;
}

.work-list ul {
margin-left: 0;
}

.work-list ul li {
font-size: 16px;
margin-top: 2px;
}

.education-list h3 {
font-size: 22px;
margin-bottom: 5px;
}

.education-list p {
font-size: 16px;
}

}