mirror of
https://github.com/Dvorinka/Portfolio.git
synced 2026-06-03 19:32:56 +00:00
Tomas Dvorak
1472 lines
40 KiB
HTML
1472 lines
40 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>TDvorak - TOR Portfolio</title>
|
|
</head>
|
|
<body>
|
|
<style>
|
|
@font-face{
|
|
font-family: simple;
|
|
src: url(assets/fonts/Lato-Regular.ttf);
|
|
}
|
|
@font-face{
|
|
font-family: new;
|
|
src: url(assets/fonts/MonumentExtended-Ultrabold.otf);
|
|
}
|
|
@font-face{
|
|
font-family: newsmall;
|
|
src: url(assets/fonts/MonumentExtended-Regular.otf);
|
|
}
|
|
@font-face{
|
|
font-family: moon;
|
|
src: url(assets/fonts/Moon\ Bold.otf);
|
|
}
|
|
@font-face{
|
|
font-family: moonsmall;
|
|
src: url(assets/fonts/Moon\ Light.otf);
|
|
}
|
|
::-webkit-scrollbar {
|
|
width: .6rem;
|
|
border-radius: .5rem;
|
|
background-color: hsl(207, 4%, 15%);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background-color: hsl(207, 4%, 25%);
|
|
border-radius: .5rem;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background-color: hsl(207, 4%, 35%);
|
|
}
|
|
:root {
|
|
--header-height: 3rem;
|
|
--nav-width: 324px;
|
|
/*===== Font weight =====*/
|
|
--font-medium: 500;
|
|
--font-semi-bold: 600;
|
|
--font-bold: 700;
|
|
/*===== Colores =====*/
|
|
--first-color: #ffffff;
|
|
--first-color-dark: #ffffff;
|
|
--first-color-darken: #ffffff;
|
|
--text-color: #ffffff;
|
|
--first-color-light: #1a1a1a;
|
|
--first-color-lighten: #0e0e0e;
|
|
--h1-font-size: 1.5rem;
|
|
--h2-font-size: 1.25rem;
|
|
--h3-font-size: 1rem;
|
|
--normal-font-size: .938rem;
|
|
--small-font-size: .813rem;
|
|
--smaller-font-size: .75rem;
|
|
/*===== Margenes =====*/
|
|
--mb-1: .5rem;
|
|
--mb-2: 1rem;
|
|
--mb-3: 1.5rem;
|
|
--mb-4: 2rem;
|
|
--mb-5: 2.5rem;
|
|
/*===== z index =====*/
|
|
--z-fixed: 100;
|
|
}
|
|
|
|
@media screen and (min-width: 768px) {
|
|
:root {
|
|
--h1-font-size: 2.25rem;
|
|
--h2-font-size: 1.5rem;
|
|
--h3-font-size: 1.25rem;
|
|
--normal-font-size: 1rem;
|
|
--small-font-size: .875rem;
|
|
--smaller-font-size: .813rem;
|
|
}
|
|
}
|
|
|
|
/*===== BASE =====*/
|
|
*, ::before, ::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
margin: var(--header-height) 0 0 0;
|
|
font-size: var(--normal-font-size);
|
|
font-weight: var(--font-medium);
|
|
background-color: var(--first-color-lighten);
|
|
color: var(--text-color);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
h1, h2, h3, p {
|
|
margin: 0;
|
|
}
|
|
|
|
h1 {
|
|
font-family: new;
|
|
}
|
|
ul {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
color: var(--text-color);
|
|
}
|
|
|
|
img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
display: block;
|
|
}
|
|
|
|
/*===== CLASS CSS ===== */
|
|
.section {
|
|
padding: 4rem 0 2rem;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: var(--h1-font-size);
|
|
color: var(--first-color);
|
|
margin-bottom: var(--mb-3);
|
|
text-align: center;
|
|
}
|
|
|
|
.section-subtitle {
|
|
display: block;
|
|
font-size: var(--small-font-size);
|
|
color: var(--first-color-darken);
|
|
text-align: center;
|
|
font-weight: var(--font-bold);
|
|
margin-bottom: .25rem;
|
|
font-family: newsmall;
|
|
letter-spacing: 10px;
|
|
}
|
|
|
|
/*===== LAYOUT =====*/
|
|
.bd-grid {
|
|
max-width: 1024px;
|
|
display: grid;
|
|
grid-template-columns: 100%;
|
|
column-gap: 2rem;
|
|
width: calc(100% - 2rem);
|
|
margin-left: var(--mb-2);
|
|
margin-right: var(--mb-2);
|
|
}
|
|
|
|
.l-header {
|
|
width: 100%;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: var(--z-fixed);
|
|
background-color: var(--first-color-lighten);
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
/*===== NAV =====*/
|
|
.nav {
|
|
height: var(--header-height);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.nav__menu {
|
|
position: fixed;
|
|
bottom: 0;
|
|
margin-bottom: 300px;
|
|
margin-top: 300px;
|
|
border-top-right-radius: 25px;
|
|
border-bottom-right-radius: 25px;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 30vh;
|
|
padding: 3rem;
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: rgb(255, 255, 255);
|
|
transition: .5s;
|
|
}
|
|
|
|
.nav__close {
|
|
position: absolute;
|
|
top: 1rem;
|
|
right: 1rem;
|
|
font-size: 2rem;
|
|
color: var(--first-color-dark);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.nav__item {
|
|
margin-bottom: var(--mb-4);
|
|
font-family: newsmall;
|
|
letter-spacing: 2.2px;
|
|
}
|
|
|
|
.nav__link {
|
|
font-size: 1rem;
|
|
text-transform: uppercase;
|
|
color: rgb(167, 167, 167);
|
|
font-weight: bold;
|
|
transition: .3s;
|
|
}
|
|
|
|
.nav__link:hover {
|
|
color: rgb(255, 0, 0);
|
|
}
|
|
|
|
.nav__toggle {
|
|
color: var(--first-color-dark);
|
|
font-size: 1.3rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/*=== Show menu ===*/
|
|
.show {
|
|
left: 0;
|
|
}
|
|
|
|
/*Active menu*/
|
|
.active {
|
|
color: rgb(0, 0, 0);
|
|
}
|
|
|
|
/*===== HOME =====*/
|
|
.home__container {
|
|
height: calc(100vh - var(--header-height));
|
|
align-items: center;
|
|
}
|
|
|
|
.home__data {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
height: max-content;
|
|
text-align: center;
|
|
}
|
|
|
|
.home__img {
|
|
width: 300px;
|
|
height: 160px;
|
|
transform: scale(1.3rem);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: flex-end;
|
|
overflow: hidden;
|
|
margin-bottom: var(--mb-2);
|
|
}
|
|
|
|
.home__img img {
|
|
width: 145px;
|
|
}
|
|
|
|
.home__title {
|
|
font-size: var(--h1-font-size);
|
|
color: var(--first-color);
|
|
font-weight: var(--font-semi-bold);
|
|
}
|
|
|
|
.home__profession {
|
|
font-size: var(--small-font-size);
|
|
color: var(--first-color-dark);
|
|
margin-bottom: var(--mb-5);
|
|
font-family: newsmall;
|
|
}
|
|
|
|
.home__social {
|
|
margin-bottom: 5rem;
|
|
}
|
|
|
|
.home__social-link {
|
|
display: inline-flex;
|
|
background-color: var(--first-color);
|
|
color: var(--first-color-light);
|
|
font-size: 1.1rem;
|
|
border-radius: 50%;
|
|
padding: .40rem;
|
|
margin: 0 var(--mb-1);
|
|
transition: .3s;
|
|
}
|
|
|
|
.home__social-link:hover {
|
|
background-color: rgb(255, 0, 0);
|
|
}
|
|
|
|
.home__button {
|
|
width: 90%;
|
|
border: 2px white solid;
|
|
color: white;
|
|
font-size: 14px;
|
|
font-family: moon;
|
|
}
|
|
.home__button:hover {
|
|
font-size: 16px;
|
|
}
|
|
/*BUTTONS*/
|
|
.button {
|
|
display: inline-block;
|
|
color: white;
|
|
padding: 1rem 2rem;
|
|
font-weight: var(--font-semi);
|
|
border-radius: .5rem;
|
|
transition: .3s;
|
|
}
|
|
|
|
.button:hover {
|
|
background-color: white;
|
|
color: black;
|
|
}
|
|
|
|
.button__light {
|
|
background-color: var(--first-color-lighten);
|
|
color: var(--first-color);
|
|
}
|
|
|
|
.button__light:hover {
|
|
color: var(--first-color-lighten);
|
|
}
|
|
|
|
/* ===== ABOUT =====*/
|
|
.about__container {
|
|
row-gap: 2rem;
|
|
}
|
|
|
|
.about__data {
|
|
text-align: center;
|
|
}
|
|
|
|
.about__text {
|
|
margin-bottom: var(--mb-4);
|
|
font-family: simple;
|
|
font-size: 19px;
|
|
}
|
|
|
|
.about__img {
|
|
width: 550px;
|
|
border-radius: .5rem;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.about__information {
|
|
margin-bottom: var(--mb-4);
|
|
}
|
|
|
|
.about__information-title {
|
|
font-size: var(--h3-font-size);
|
|
font-weight: var(--font-semi-bold);
|
|
color: var(--first-color-dark);
|
|
margin-bottom: var(--mb-2);
|
|
font-family: moon;
|
|
}
|
|
|
|
.about__information-data {
|
|
display: flex;
|
|
align-items: center;
|
|
padding-left: var(--mb-3);
|
|
margin-bottom: var(--mb-3);
|
|
font-family: moonsmall;
|
|
}
|
|
|
|
.about__information-icon {
|
|
font-size: 1.5rem;
|
|
color: var(--first-color);
|
|
margin-right: var(--mb-4);
|
|
}
|
|
|
|
.about__information-subtitle {
|
|
display: block;
|
|
font-weight: var(--font-semi-bold);
|
|
}
|
|
|
|
.about__information-subtitle-small {
|
|
font-size: var(--small-font-size);
|
|
}
|
|
|
|
/* ===== SKILLS =====*/
|
|
.skills__container {
|
|
row-gap: 2rem;
|
|
}
|
|
|
|
.skills__subtitle {
|
|
font-size: var(--h3-font-size);
|
|
font-weight: var(--font-semi-bold);
|
|
color: var(--first-color-dark);
|
|
margin-bottom: var(--mb-2);
|
|
font-family: moon;
|
|
}
|
|
|
|
.skills__data {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin: 0 var(--mb-2);
|
|
margin-bottom: var(--mb-4);
|
|
font-family: moonsmall;
|
|
}
|
|
|
|
.skills__name {
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.skills__bar {
|
|
position: absolute;
|
|
bottom: -.75rem;
|
|
height: .25rem;
|
|
background-color: var(--first-color);
|
|
}
|
|
|
|
.animate {
|
|
animation-fill-mode: forwards;
|
|
animation-delay: 0.3s;
|
|
}
|
|
|
|
.skills__html.animate {
|
|
width: 0%;
|
|
animation-name: html;
|
|
animation-duration: 2s;
|
|
}
|
|
|
|
.skills__js.animate {
|
|
width: 0%;
|
|
animation-name: js;
|
|
animation-duration: 2s;
|
|
}
|
|
|
|
@keyframes js {
|
|
0% {width: 0%;}
|
|
100% {width: 5%;}
|
|
}
|
|
@keyframes html {
|
|
0% {width: 0%;}
|
|
100% {width: 80%;}
|
|
}
|
|
@keyframes python {
|
|
0% {width: 0%;}
|
|
100% {width: 20%;}
|
|
}
|
|
@keyframes linux {
|
|
0% {width: 0%;}
|
|
100% {width: 60%;}
|
|
}
|
|
|
|
.skills__react.animate {
|
|
width: 0%;
|
|
animation-name: js;
|
|
animation-duration: 2s;
|
|
}
|
|
|
|
.skills__typescript.animate {
|
|
width: 0%;
|
|
animation-name: js;
|
|
animation-duration: 2s;
|
|
}
|
|
|
|
.skills__php.animate {
|
|
width: 0%;
|
|
animation-name: js;
|
|
animation-duration: 2s;
|
|
}
|
|
|
|
.skills__node.animate {
|
|
width: 0%;
|
|
animation-name: js;
|
|
animation-duration: 2s;
|
|
}
|
|
|
|
.skills__python.animate {
|
|
width: 0%;
|
|
animation-name: python;
|
|
animation-duration: 2s;
|
|
}
|
|
|
|
.skills__linux.animate {
|
|
width: 0%;
|
|
animation-name: linux;
|
|
animation-duration: 2s;
|
|
}
|
|
|
|
/* ===== EDUCATION =====*/
|
|
.education__container {
|
|
row-gap: 2rem;
|
|
}
|
|
|
|
.education__content {
|
|
display: grid;
|
|
grid-template-columns: 1fr max-content 1fr;
|
|
}
|
|
|
|
.education__year, .education__race {
|
|
font-size: var(--h3-font-size);
|
|
font-weight: var(--font-semi-bold);
|
|
margin-bottom: .25rem;
|
|
font-family: moon;
|
|
}
|
|
|
|
.education__university, .education__specialty {
|
|
display: block;
|
|
font-size: var(--smaller-font-size);
|
|
font-family: moonsmall;
|
|
}
|
|
|
|
.education__year, .education__university {
|
|
text-align: right;
|
|
}
|
|
|
|
.education__time {
|
|
padding: 0 1rem;
|
|
justify-self: center;
|
|
}
|
|
|
|
.education__rounder {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 12px;
|
|
height: 12px;
|
|
background-color: var(--first-color);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.education__rounder::before {
|
|
content: '';
|
|
position: absolute;
|
|
transform: translate(-4px, -4px);
|
|
width: 20px;
|
|
height: 20px;
|
|
border: 1px solid var(--first-color);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
|
|
.education__line {
|
|
display: block;
|
|
height: 80%;
|
|
width: 2px;
|
|
background-color: var(--first-color);
|
|
transform: translate(5px, -4px);
|
|
}
|
|
|
|
/* ===== SERVICES =====*/
|
|
.services__container {
|
|
row-gap: 2rem;
|
|
}
|
|
|
|
.services__content {
|
|
padding: 1.5rem .5rem;
|
|
border: 2px solid var(--first-color);
|
|
border-radius: .5rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.services__content:hover {
|
|
background-color: var(--first-color);
|
|
}
|
|
|
|
.services__content:hover .services__icon {
|
|
background-color: var(--first-color-lighten);
|
|
color: var(--first-color);
|
|
}
|
|
|
|
.services__content:hover .services__title {
|
|
color: var(--first-color-lighten);
|
|
}
|
|
|
|
.services__content:hover .services__description {
|
|
color: var(--first-color-lighten);
|
|
}
|
|
|
|
.services__icon {
|
|
font-size: 2rem;
|
|
padding: .5rem;
|
|
background-color: var(--first-color);
|
|
color: var(--first-color-lighten);
|
|
border-radius: 50%;
|
|
margin-bottom: var(--mb-2);
|
|
}
|
|
|
|
.services__title {
|
|
font-size: 1.25rem;
|
|
font-weight: var(--font-semi-bold);
|
|
color: var(--first-color-dark);
|
|
margin-bottom: var(--mb-1);
|
|
font-family: moon;
|
|
}
|
|
|
|
.services__content, .services__icon, .services__description, .services__title {
|
|
transition: .5s;
|
|
}
|
|
|
|
.services__description{
|
|
font-family: moonsmall;
|
|
}
|
|
|
|
/* ===== PROJECT IN MIND =====*/
|
|
.project {
|
|
background-color: var(--first-color);
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.project__container {
|
|
row-gap: 2rem;
|
|
}
|
|
|
|
.project__data {
|
|
text-align: center;
|
|
}
|
|
|
|
.project__title, .project__description {
|
|
color: var(--first-color-lighten);
|
|
}
|
|
|
|
.project__description {
|
|
margin-bottom: var(--mb-4);
|
|
}
|
|
|
|
.project__img {
|
|
width: 320px;
|
|
justify-self: center;
|
|
}
|
|
|
|
/* ===== WORKS =====*/
|
|
.works__container {
|
|
justify-items: center;
|
|
row-gap: 2rem;
|
|
}
|
|
|
|
.works__img {
|
|
position: relative;
|
|
overflow: hidden;
|
|
border-radius: .5rem;
|
|
}
|
|
|
|
.works__img:hover .works__data {
|
|
bottom: 0;
|
|
}
|
|
|
|
.works__data {
|
|
position: absolute;
|
|
bottom: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: rgba(48, 48, 48, 0.7);
|
|
border-radius: .5rem;
|
|
transition: .3s;
|
|
}
|
|
|
|
.works__link {
|
|
display: inline-flex;
|
|
font-size: 1.5rem;
|
|
background-color: var(--first-color-lighten);
|
|
color: var(--first-color);
|
|
padding: .25rem;
|
|
border-radius: .25rem;
|
|
margin-bottom: var(--mb-2);
|
|
}
|
|
|
|
.works__title {
|
|
font-size: var(--h2-font-size);
|
|
color: var(--first-color-lighten);
|
|
}
|
|
|
|
/* ===== CONTACT =====*/
|
|
.contact__container {
|
|
row-gap: 3rem;
|
|
}
|
|
|
|
.contact__input {
|
|
width: 100%;
|
|
padding: 1rem;
|
|
outline: none;
|
|
border: none;
|
|
background-color: var(--first-color-light);
|
|
font-size: var(--normal-font-size);
|
|
margin-bottom: var(--mb-2);
|
|
border-radius: .5rem;
|
|
}
|
|
|
|
.contact ::placeholder {
|
|
color: var(--first-color-dark);
|
|
font-family: var(--body-font);
|
|
font-weight: var(--font-medium);
|
|
}
|
|
|
|
.contact__button {
|
|
outline: none;
|
|
border: none;
|
|
font-family: var(--body-font);
|
|
font-size: var(--normal-font-size);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.contact__info {
|
|
margin-bottom: var(--mb-3);
|
|
}
|
|
|
|
.contact__subtitle {
|
|
font-size: var(--h3-font-size);
|
|
font-weight: var(--font-semi-bold);
|
|
color: var(--first-color-dark);
|
|
margin-bottom: var(--mb-1);
|
|
}
|
|
|
|
.contact__text {
|
|
display: block;
|
|
padding-left: 1rem;
|
|
}
|
|
|
|
.footer {
|
|
background-color: var(--first-color-darken);
|
|
color: var(--first-color-lighten);
|
|
text-align: center;
|
|
}
|
|
|
|
.footer__title {
|
|
font-size: var(--h1-font-size);
|
|
margin-bottom: var(--mb-2);
|
|
}
|
|
|
|
.footer__description {
|
|
margin-bottom: var(--mb-2);
|
|
}
|
|
|
|
.footer__social {
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
.footer__link {
|
|
display: inline-flex;
|
|
background-color: var(--first-color);
|
|
color: var(--first-color-light);
|
|
font-size: 1.1rem;
|
|
border-radius: 50%;
|
|
padding: .40rem;
|
|
margin: 0 var(--mb-1);
|
|
transition: .3s;
|
|
}
|
|
|
|
.footer__link:hover {
|
|
background-color: var(--first-color-lighten);
|
|
color: var(--first-color);
|
|
}
|
|
|
|
.footer__copy {
|
|
font-size: var(--smaller-font-size);
|
|
color: rgb(0, 0, 0);
|
|
font-family: moon;
|
|
}
|
|
|
|
/* Scroll top */
|
|
.scrolltop {
|
|
position: fixed;
|
|
right: 1rem;
|
|
bottom: -20%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: .3rem;
|
|
background: rgb(255, 0, 0);
|
|
border-radius: .4rem;
|
|
z-index: var(--z-tooltip);
|
|
transition: .4s;
|
|
}
|
|
|
|
.scrolltop:hover {
|
|
background-color: #000000;
|
|
}
|
|
|
|
.scrolltop__icon {
|
|
font-size: 1.5rem;
|
|
color: var(--first-color-light);
|
|
}
|
|
|
|
/* Show scroll */
|
|
.show-scroll {
|
|
bottom: 2rem;
|
|
}
|
|
|
|
/* ===== MEDIA QUERIES =====*/
|
|
@media screen and (min-width: 768px) {
|
|
.nav__menu {
|
|
width: var(--nav-width);
|
|
}
|
|
.about__container,
|
|
.skills__container,
|
|
.services__container,
|
|
.works__container,
|
|
.contact__container,
|
|
.contact__inputs {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
.about__data {
|
|
text-align: initial;
|
|
}
|
|
.about__text {
|
|
margin-bottom: var(--mb-5);
|
|
}
|
|
.about__img {
|
|
width: 520px;
|
|
}
|
|
.about__information {
|
|
padding-left: 4rem;
|
|
}
|
|
.education__time {
|
|
padding: 0 2rem;
|
|
}
|
|
.project {
|
|
background: none;
|
|
}
|
|
.project__container {
|
|
background-color: var(--first-color);
|
|
grid-template-columns: 2fr 1.2fr;
|
|
padding: 0 2rem;
|
|
border-radius: .5rem;
|
|
}
|
|
.project__data {
|
|
padding: 3rem 0;
|
|
}
|
|
.project__title, .project__data {
|
|
text-align: initial;
|
|
}
|
|
.project__img {
|
|
width: 530px;
|
|
align-self: flex-end;
|
|
}
|
|
.contact__inputs {
|
|
display: grid;
|
|
column-gap: 1.5rem;
|
|
}
|
|
.contact__info {
|
|
padding-left: 3rem;
|
|
}
|
|
.footer {
|
|
background: none;
|
|
}
|
|
.footer__container {
|
|
background-color: var(--first-color-darken);
|
|
padding: 3rem 0;
|
|
border-radius: .5rem;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 568px) {
|
|
.home__button {
|
|
width: initial;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 1024px) {
|
|
body {
|
|
margin: 0;
|
|
padding-left: var(--nav-width);
|
|
}
|
|
.l-header {
|
|
width: 0;
|
|
}
|
|
.nav__toggle, .nav__logo, .nav__close {
|
|
display: none;
|
|
}
|
|
.nav__menu {
|
|
left: 0;
|
|
}
|
|
.home__container {
|
|
height: 100vh;
|
|
}
|
|
.section {
|
|
padding: 3rem 0 2rem;
|
|
}
|
|
.section-title {
|
|
margin-bottom: var(--mb-4);
|
|
font-family: new;
|
|
}
|
|
.bd-grid {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
.services__container,
|
|
.works__container {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
}
|
|
|
|
/* For tall screens on mobiles y desktop*/
|
|
@media screen and (min-height: 721px) {
|
|
.home__container {
|
|
height: 640px;
|
|
}
|
|
}
|
|
|
|
.terminal-section {
|
|
flex: 1;
|
|
min-width: 50%;
|
|
}
|
|
|
|
.terminal {
|
|
background-color: var(--terminal);
|
|
border-radius: 5px;
|
|
padding: 1rem;
|
|
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
|
|
position: relative;
|
|
overflow: hidden;
|
|
height: 400px;
|
|
border: 1px solid rgb(255 0 0 / 57%);
|
|
height: 400px;
|
|
width: 65%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.terminal-header {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 1rem;
|
|
padding-bottom: 0.5rem;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.terminal-dots {
|
|
display: flex;
|
|
gap: 6px;
|
|
}
|
|
|
|
.terminal-dot {
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.dot-red {
|
|
background-color: #ff5f56;
|
|
}
|
|
|
|
.dot-yellow {
|
|
background-color: #ffbd2e;
|
|
}
|
|
|
|
.dot-green {
|
|
background-color: #27c93f;
|
|
}
|
|
|
|
.terminal-title {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
font-size: 0.8rem;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.terminal-content {
|
|
font-family: 'Courier New', monospace;
|
|
font-size: 0.9rem;
|
|
line-height: 1.5;
|
|
height: 85%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.terminal-line {
|
|
display: flex;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.terminal-prompt {
|
|
color: var(--primary);
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
.terminal-cursor {
|
|
display: inline-block;
|
|
width: 8px;
|
|
height: 15px;
|
|
background-color: var(--primary);
|
|
margin-left: 2px;
|
|
animation: blink 1s infinite;
|
|
}
|
|
|
|
@keyframes blink {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0; }
|
|
}
|
|
|
|
</style>
|
|
<header class="l-header">
|
|
<nav class="nav bd-grid">
|
|
<div class="nav__toggle" id="nav-toggle">
|
|
<i class='bx bx-menu ' ></i>
|
|
</div>
|
|
<div class="nav__menu" id="nav-menu">
|
|
<div class="nav__close" id="nav-close">
|
|
<i class='bx bx-x' ></i>
|
|
</div>
|
|
<ul class="nav__list">
|
|
<li class="nav__item"><a href="#home" class="nav__link active">Home</a></li>
|
|
<li class="nav__item"><a href="#about" class="nav__link">About</a></li>
|
|
<li class="nav__item" style="margin: 0;"><a href="#skills" class="nav__link">Skills</a></li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
|
|
<main class="l-main">
|
|
<section class="home" id="home">
|
|
<div class="home__container bd-grid">
|
|
<div class="home__data">
|
|
<div class="home__img">
|
|
<img src="assets/img/ascii1.png" alt="">
|
|
</div>
|
|
<h1 class="home__title">Tomáš Dvořák</h1>
|
|
<span class="home__profession">WhiteHat, Fullstack</span>
|
|
<!-- <p href="tdvorak5yysirjdcvecyyde5svpkycuheneavst4ahbgguiid5tuxwid.onion" class="button home__button" id="copyLink" style="cursor: pointer;">Dark Web Website</p><br> -->
|
|
<style>
|
|
@media only screen and (max-width: 730px) {
|
|
#fadeshow1 {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|
|
<div id="fadeshow1">
|
|
<!-- <p style="font-family: newsmall; font-size: smaller; letter-spacing: 1.6px;">ᔓ tdvorak5yysirjdcvecyyde5svpkycuheneavst4ahbgguiid5tuxwid.<span style="color: red;">onion</span> ᔓ</p> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
var copyLinkButton = document.getElementById('copyLink');
|
|
|
|
copyLinkButton.addEventListener('click', function () {
|
|
// Copy the link
|
|
var linkToCopy = copyLinkButton.getAttribute('href');
|
|
var tempInput = document.createElement('input');
|
|
tempInput.value = linkToCopy;
|
|
document.body.appendChild(tempInput);
|
|
tempInput.select();
|
|
document.execCommand('copy');
|
|
document.body.removeChild(tempInput);
|
|
|
|
copyLinkButton.textContent = 'Copied!';
|
|
setTimeout(function () {
|
|
copyLinkButton.textContent = 'Dark Web Website';
|
|
}, 99500);
|
|
});
|
|
});
|
|
</script>
|
|
<section class="about section" id="about">
|
|
<span class="section-subtitle"><p>ᔓ</p>WHO<span style="color: rgb(255, 0, 0);">AM</span>I</span>
|
|
<h2 class="section-title" style="font-family: new;">About Me</h2>
|
|
<div class="about__container bd-grid">
|
|
<div class="about__data">
|
|
<p class="about__text">
|
|
I'm a <strong>self-taught ethical hacker</strong> passionate about cybersecurity, wireless exploitation, and hardware hacking. I work with tools like <strong>Kali Linux, Parrot OS, Raspberry Pi 5, LilyGO T-Embed CC1101 Bruce, P4wnP1 A.L.O.A., Pwnagotchi & GhostESP</strong>. Always learning, always exploring.
|
|
</p>
|
|
|
|
<img src="assets/img/ascii2.png" alt="" class="about__img">
|
|
</div>
|
|
<div>
|
|
<div class="about__information">
|
|
<h3 class="about__information-title">Contact me:</h3>
|
|
<div class="about__information-data">
|
|
<span>tdvorak_dev@proton.me</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section>
|
|
<div class="terminal-section">
|
|
<div class="terminal">
|
|
<div class="terminal-header">
|
|
<div class="terminal-dots">
|
|
<div class="terminal-dot dot-red"></div>
|
|
<div class="terminal-dot dot-yellow"></div>
|
|
<div class="terminal-dot dot-green"></div>
|
|
</div>
|
|
</div>
|
|
<div class="terminal-content" id="terminalContent">
|
|
<div class="terminal-line">
|
|
<span class="terminal-prompt">tdvorak_dev@proton.me:~$</span>
|
|
<span id="typedText"></span>
|
|
<span class="terminal-cursor"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- <section class="skills section" id="skills">
|
|
<span class="section-subtitle"><p>ᔓ</p>WHO<span style="color: red;">IS</span></span>
|
|
<h2 class="section-title" style="font-family: new;">My skills</h2>
|
|
<div class="skills__container bd-grid">
|
|
<div class="skills__content">
|
|
<h3 class="skills__subtitle">Frontend</h3>
|
|
<div class="skills__data">
|
|
<span class="skills__name">Html & Css</span>
|
|
<span class="skills__number">80%</span>
|
|
<span class="skills__bar skills__html"></span>
|
|
</div>
|
|
<div class="skills__data">
|
|
<span class="skills__name">Javascript</span>
|
|
<span class="skills__number">5%</span>
|
|
<span class="skills__bar skills__js"></span>
|
|
</div>
|
|
<div class="skills__data">
|
|
<span class="skills__name">React</span>
|
|
<span class="skills__number">5%</span>
|
|
<span class="skills__bar skills__react"></span>
|
|
</div>
|
|
<div class="skills__data">
|
|
<span class="skills__name">Typescript</span>
|
|
<span class="skills__number">5%</span>
|
|
<span class="skills__bar skills__typescript"></span>
|
|
</div>
|
|
</div>
|
|
<div class="skills__content">
|
|
<h3 class="skills__subtitle">Backend</h3>
|
|
<div class="skills__data">
|
|
<span class="skills__name">PHP</span>
|
|
<span class="skills__number">5%</span>
|
|
<span class="skills__bar skills__php"></span>
|
|
</div>
|
|
<div class="skills__data">
|
|
<span class="skills__name">Node.js</span>
|
|
<span class="skills__number">5%</span>
|
|
<span class="skills__bar skills__node"></span>
|
|
</div>
|
|
<div class="skills__data">
|
|
<span class="skills__name">Python</span>
|
|
<span class="skills__number">20%</span>
|
|
<span class="skills__bar skills__python"></span>
|
|
</div>
|
|
<div class="skills__data">
|
|
<span class="skills__name">Linux</span>
|
|
<span class="skills__number">60%</span>
|
|
<span class="skills__bar skills__linux"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section> -->
|
|
<section class="education section">
|
|
<span class="section-subtitle"><p>ᔓ</p>SS<span style="color: red;">H</span></span>
|
|
<h2 class="section-title" style="font-family: new;">My Education</h2>
|
|
<div class="education__container bd-grid">
|
|
<!-- <div class="education__content">
|
|
<div>
|
|
<h3 class="education__year">2023 - 2024</h3>
|
|
<span class="education__university">OAUH</span>
|
|
</div>
|
|
<div class="education__time">
|
|
<span class="education__rounder"></span>
|
|
<span class="education__line"></span>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="education__race">Economics</h3>
|
|
</div>
|
|
</div> -->
|
|
<!-- <div class="education__content">
|
|
<div>
|
|
<h3 class="education__year">2024 - 2027</h3>
|
|
<span class="education__university">SGaSOS Kunovice</span>
|
|
</div>
|
|
<div class="education__time">
|
|
<span class="education__rounder"></span>
|
|
<span class="education__line"></span>
|
|
</div>
|
|
<div>
|
|
<h3 class="education__race">Information Technology</h3>
|
|
<span class="education__specialty">Frontend, Backend</span>
|
|
</div>
|
|
</div> -->
|
|
<!-- <div class="education__content">
|
|
<div>
|
|
<h3 class="education__year">2022 - 2023</h3>
|
|
<span class="education__university">FreeCodeCamp</span>
|
|
</div>
|
|
<div class="education__time">
|
|
<span class="education__rounder"></span>
|
|
<span class="education__line"></span>
|
|
</div>
|
|
<div>
|
|
<h3 class="education__race">ONLINE CERTIFICATION</h3>
|
|
<span class="education__specialty">Frontend, Backend</span>
|
|
</div>
|
|
</div> -->
|
|
<div class="education__content">
|
|
<div>
|
|
<h3 class="education__year">2023 - 202?</h3>
|
|
<span class="education__university">Zero To Mastery</span>
|
|
</div>
|
|
<div class="education__time">
|
|
<span class="education__rounder"></span>
|
|
<span class="education__line"></span>
|
|
</div>
|
|
<div>
|
|
<h3 class="education__race">ONLINE CERTIFICATION</h3>
|
|
<span class="education__specialty">Frontend, Backend, Programming, Ethical Hacking, Pentesting</span>
|
|
</div>
|
|
</div>
|
|
<div class="education__content">
|
|
<div>
|
|
<h3 class="education__year">2022 - 202?</h3>
|
|
<span class="education__university">NetworkChuck</span>
|
|
</div>
|
|
<div class="education__time">
|
|
<span class="education__rounder"></span>
|
|
<span class="education__line"></span>
|
|
</div>
|
|
<div>
|
|
<h3 class="education__race">YouTube Videos</h3>
|
|
<span class="education__specialty">Hacking, Raspberry Pi, IT</span>
|
|
</div>
|
|
</div>
|
|
<div class="education__content">
|
|
<div>
|
|
<h3 class="education__year">2024 - 202?</h3>
|
|
<span class="education__university">Talking Sasquach</span>
|
|
</div>
|
|
<div class="education__time">
|
|
<span class="education__rounder"></span>
|
|
<span class="education__line"></span>
|
|
</div>
|
|
<div>
|
|
<h3 class="education__race">YouTube Videos</h3>
|
|
<span class="education__specialty">Hacking</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<footer class="footer section">
|
|
<div class="footer__container bd-grid">
|
|
<h1 class="footer__title" style="margin: 0">TDvorak</h1>
|
|
<p class="footer__copy">All right reserved - 2025</p>
|
|
</div>
|
|
</footer>
|
|
<a href="#" class="scrolltop" id="scroll-top">
|
|
<i class='bx bx-up-arrow-alt scrolltop__icon'><img src="assets/img/arrow.png" height="20px" width="20px" alt=""></i>
|
|
</a>
|
|
<script>
|
|
const navMenu = document.getElementById('nav-menu'),
|
|
toggleMenu = document.getElementById('nav-toggle'),
|
|
closeMenu = document.getElementById('nav-close')
|
|
|
|
// SHOW
|
|
toggleMenu.addEventListener('click', ()=>{
|
|
navMenu.classList.toggle('show')
|
|
})
|
|
|
|
// HIDDEN
|
|
closeMenu.addEventListener('click', ()=>{
|
|
navMenu.classList.remove('show')
|
|
})
|
|
|
|
/*===== ACTIVE AND REMOVE MENU =====*/
|
|
const navLink = document.querySelectorAll('.nav__link');
|
|
|
|
function linkAction(){
|
|
/*Remove menu mobile*/
|
|
navMenu.classList.remove('show')
|
|
}
|
|
navLink.forEach(n => n.addEventListener('click', linkAction));
|
|
|
|
/*===== SCROLL SECTIONS ACTIVE LINK =====*/
|
|
const sections = document.querySelectorAll('section[id]')
|
|
|
|
function scrollActive(){
|
|
const scrollY = window.pageYOffset
|
|
|
|
sections.forEach(current =>{
|
|
const sectionHeight = current.offsetHeight
|
|
const sectionTop = current.offsetTop - 50;
|
|
sectionId = current.getAttribute('id')
|
|
|
|
if(scrollY > sectionTop && scrollY <= sectionTop + sectionHeight){
|
|
document.querySelector('.nav__menu a[href*=' + sectionId + ']').classList.add('active')
|
|
}else{
|
|
document.querySelector('.nav__menu a[href*=' + sectionId + ']').classList.remove('active')
|
|
}
|
|
})
|
|
}
|
|
|
|
window.addEventListener('scroll', scrollActive)
|
|
|
|
/*==================== SHOW SCROLL TOP ====================*/
|
|
function scrollTop(){
|
|
const scrollTop = document.getElementById('scroll-top');
|
|
// When the scroll is higher than 560 viewport height, add the show-scroll class to the a tag with the scroll-top class
|
|
if(this.scrollY >= 560) scrollTop.classList.add('show-scroll'); else scrollTop.classList.remove('show-scroll')
|
|
}
|
|
window.addEventListener('scroll', scrollTop)
|
|
|
|
|
|
const htmlSkill = document.querySelector('.skills__html');
|
|
const jsSkill = document.querySelector('.skills__js');
|
|
const phpSkill = document.querySelector('.skills__php');
|
|
const reactSkill = document.querySelector('.skills__react');
|
|
const typescriptSkill = document.querySelector('.skills__typescript');
|
|
const nodeSkill = document.querySelector('.skills__node');
|
|
const pythonSkill = document.querySelector('.skills__python');
|
|
const linuxSkill = document.querySelector('.skills__linux');
|
|
|
|
let options = {
|
|
root: null,
|
|
rootMargin: '0px',
|
|
threshold: 0.5
|
|
};
|
|
|
|
let callback = (entries, observer) => {
|
|
entries.forEach(entry => {
|
|
if(entry.isIntersecting) {
|
|
entry.target.classList.add('animate');
|
|
}
|
|
});
|
|
};
|
|
|
|
let observer = new IntersectionObserver(callback, options);
|
|
|
|
observer.observe(htmlSkill);
|
|
observer.observe(jsSkill);
|
|
observer.observe(phpSkill);
|
|
observer.observe(reactSkill);
|
|
observer.observe(typescriptSkill);
|
|
observer.observe(nodeSkill);
|
|
observer.observe(pythonSkill);
|
|
observer.observe(linuxSkill);
|
|
</script>
|
|
<script>
|
|
// Terminal typing animation
|
|
const commands = [
|
|
"sudo apt update",
|
|
"nmap -sS -sV -p- --min-rate 5000 target.com",
|
|
"cd /opt/tools/metasploit",
|
|
"./msfconsole -q",
|
|
"use auxiliary/scanner/ssh/ssh_login",
|
|
"set rhosts 192.168.1.1/24",
|
|
"run",
|
|
"sudo tor start",
|
|
"proxychains firefox",
|
|
"cd /opt/tartaros",
|
|
"python3 vulnerability_scanner.py",
|
|
"sudo airmon-ng start wlan0",
|
|
"sudo reaver -i wlan0mon -b 00:11:22:33:44:55 -vv",
|
|
"tail -f /var/log/secure",
|
|
"cd /home/tartaros/tools",
|
|
"git clone https://github.com/tartaros/security-tools.git",
|
|
"torsocks wget https://hidden.onion/file.txt",
|
|
"./init_secure_environment.sh"
|
|
];
|
|
|
|
const terminalContent = document.getElementById('terminalContent');
|
|
const typedText = document.getElementById('typedText');
|
|
|
|
let commandIndex = 0;
|
|
let charIndex = 0;
|
|
let isDeleting = false;
|
|
let typingDelay = 100;
|
|
|
|
function typeTerminal() {
|
|
const currentCommand = commands[commandIndex];
|
|
|
|
if (isDeleting) {
|
|
typedText.textContent = currentCommand.substring(0, charIndex - 1);
|
|
charIndex--;
|
|
typingDelay = 30;
|
|
|
|
if (charIndex === 0) {
|
|
isDeleting = false;
|
|
commandIndex = (commandIndex + 1) % commands.length;
|
|
typingDelay = 500;
|
|
}
|
|
} else {
|
|
typedText.textContent = currentCommand.substring(0, charIndex + 1);
|
|
charIndex++;
|
|
typingDelay = 70 + Math.random() * 50;
|
|
|
|
if (charIndex === currentCommand.length) {
|
|
isDeleting = true;
|
|
typingDelay = 1500;
|
|
|
|
// Add command output
|
|
setTimeout(() => {
|
|
const line = document.createElement('div');
|
|
line.classList.add('terminal-line');
|
|
|
|
// Generate random output based on the command
|
|
let output = '';
|
|
if (currentCommand.includes('nmap')) {
|
|
output = 'Starting Nmap scan...\nPort 22/tcp open ssh OpenSSH 8.4\nPort 80/tcp open http nginx 1.18.0\nPort 443/tcp open https nginx 1.18.0\n';
|
|
} else if (currentCommand.includes('msfconsole')) {
|
|
output = ' =[ metasploit v6.2.26-dev ]\n+ -- --=[ 2275 exploits - 1194 auxiliary - 404 post ]\n+ -- --=[ 951 payloads - 45 encoders - 11 nops ]\n+ -- --=[ 9 evasion ]\n\nmsf6 >';
|
|
} else if (currentCommand.includes('run') || currentCommand.includes('.py')) {
|
|
output = '[*] Scanning...\n[+] Found 3 potential vulnerabilities\n[+] Generating report...';
|
|
} else if (currentCommand.includes('git clone')) {
|
|
output = 'Cloning into \'security-tools\'...\nremote: Enumerating objects: 573, done.\nremote: Counting objects: 100% (573/573), done.\nRemote: Compressing objects: 100% (432/432), done.';
|
|
} else if (currentCommand.includes('apt')) {
|
|
output = 'Reading package lists... Done\nBuilding dependency tree... Done\nReading state information... Done\n37 packages can be upgraded.';
|
|
} else if (currentCommand.includes('tor')) {
|
|
output = '[notice] Tor v0.4.7.13 running on Linux with Libevent 2.1.12-stable\n[notice] Tor has successfully opened a circuit.\n[notice] Bootstrapped 100%: Done';
|
|
} else {
|
|
output = 'Command executed successfully.';
|
|
}
|
|
|
|
line.textContent = output;
|
|
terminalContent.appendChild(line);
|
|
|
|
// Add new prompt line
|
|
const newPromptLine = document.createElement('div');
|
|
newPromptLine.classList.add('terminal-line');
|
|
|
|
const promptSpan = document.createElement('span');
|
|
promptSpan.classList.add('terminal-prompt');
|
|
promptSpan.textContent = 'tdvorak_dev@proton.me:~$';
|
|
|
|
const newTypedText = document.createElement('span');
|
|
newTypedText.id = 'typedText';
|
|
|
|
const cursor = document.createElement('span');
|
|
cursor.classList.add('terminal-cursor');
|
|
|
|
newPromptLine.appendChild(promptSpan);
|
|
newPromptLine.appendChild(newTypedText);
|
|
newPromptLine.appendChild(cursor);
|
|
|
|
// Limit terminal lines to keep performance
|
|
if (terminalContent.children.length > 10) {
|
|
terminalContent.removeChild(terminalContent.children[0]);
|
|
terminalContent.removeChild(terminalContent.children[0]);
|
|
}
|
|
|
|
terminalContent.appendChild(newPromptLine);
|
|
|
|
// Update references
|
|
typedText = newTypedText;
|
|
}, 500);
|
|
}
|
|
}
|
|
|
|
setTimeout(typeTerminal, typingDelay);
|
|
}
|
|
|
|
// Start the typing animation
|
|
setTimeout(typeTerminal, 1000);
|
|
|
|
// Create binary background
|
|
function createBinaryBackground() {
|
|
const binaryBg = document.getElementById('binaryBg');
|
|
const characters = '01';
|
|
let output = '';
|
|
|
|
for (let i = 0; i < 10000; i++) {
|
|
output += characters.charAt(Math.floor(Math.random() * characters.length));
|
|
}
|
|
|
|
binaryBg.textContent = output;
|
|
}
|
|
|
|
createBinaryBackground();
|
|
</script>
|
|
</body>
|
|
</html> |