Skip to content

Commit

Permalink
clean code and add menu action - website ready
Browse files Browse the repository at this point in the history
  • Loading branch information
@PatrykBala
PatrykBala committed May 23, 2023
1 parent 6fccd91 commit 918bec7
Show file tree
Hide file tree
Showing 3 changed files with 111 additions and 133 deletions.
2 changes: 1 addition & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ <h2 class="profession">Software implementation and support specialist</h2>

<div class="bottom_container">
<button onclick="location.href='main.html'">Come in</button>
<button >Contact</button>
<button onclick="location.href='mailto:patrykbala89@gmail.com'">Contact</button>
</div>

<div class="socialbtns">
Expand Down
58 changes: 29 additions & 29 deletions main.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,11 +43,11 @@
</button>

<ul>
<li><a>01.</a>about</li>
<li><a>02.</a>work</li>
<li><a>03.</a>skills</li>
<li><a>04.</a>project</li>
<li><a>05.</a>contact</li>
<li><a href="#section-1">01.about</a></li>
<li><a href="#section-2">02.skills</a></li>
<li><a href="#section-3">03.work</a></li>
<li><a href="#section-4">04.project</a></li>
<li><a href="#section-5">05.contact</a></li>
</ul>
</nav>
</header>
Expand All @@ -61,7 +61,7 @@ <h2>Focused on training cloud technologies and databases.</h2>
</section>

<section class="about">
<h1>01.About Me</h1>
<h1 id="section-1">01.About Me</h1>
<picture>
<img src="img/Patryk_Bala.jpg">
</picture>
Expand All @@ -71,28 +71,8 @@ <h1>01.About Me</h1>
<p> I would like to work closer to the codes in the future. Still looking for my way in IT.</p>
</section>

<section class="work">
<h1>02.My Work</h1>
<p>I work as a Software Implementation and Support Specialist. I have experience with Linux and Windows systems, where I implement software written in Java and C++ to energy industry companies. I implement SCADA type software, working with various types of technical equipmentand advanced databases.</p>
<p>My duties include:</p>
<ol>
<p>Pre-implementation analysis. Definition of requirements, identification of customer needs, solution concept.</p>
<p>Creation of project documentation, from analysis through training materials, job instructions.</p>
<p>Implementation of network management software for power groups.</p>
<p>Installation and configuration of system and hardware based on requirements.</p>
<p>Working with relational databases.</p>
<p>Analyze, repair reported defects within the software implementation and service team.</p>
<p>Administration of Windows, Linux operating systems.</p>
<p>Providing technical support to customers.</p>
</ol>
<div class="work_right_info">
<h3>Where did I work before ?</h3>
<button onclick="window.location.href='https://www.patrykbala.com'">Check my web CV</button>
</div>
</section>

<section class="skills">
<h1>03.My Skills</h1>
<h1 id="section-2">02.My Skills</h1>
<div class="skills_container">
<p class="">Check out my codes on: <a href="https://github.com/PatrykBala">GitHub</a>.</p>
<p>... my web components: <a href="https://codepen.io/Patryk-Bala">Codepen</a>.</p>
Expand Down Expand Up @@ -177,8 +157,28 @@ <h2 class="third_column_title">Software</h2>
</div>
</section>

<section class="work">
<h1 id="section-3">03.My Work</h1>
<p>I work as a Software Implementation and Support Specialist. I have experience with Linux and Windows systems, where I implement software written in Java and C++ to energy industry companies. I implement SCADA type software, working with various types of technical equipmentand advanced databases.</p>
<p>My duties include:</p>
<ol>
<p>Pre-implementation analysis. Definition of requirements, identification of customer needs, solution concept.</p>
<p>Creation of project documentation, from analysis through training materials, job instructions.</p>
<p>Implementation of network management software for power groups.</p>
<p>Installation and configuration of system and hardware based on requirements.</p>
<p>Working with relational databases.</p>
<p>Analyze, repair reported defects within the software implementation and service team.</p>
<p>Administration of Windows, Linux operating systems.</p>
<p>Providing technical support to customers.</p>
</ol>
<div class="work_right_info">
<h3>Where did I work before ?</h3>
<button onclick="window.location.href='https://www.patrykbala.com'">Check my web CV</button>
</div>
</section>

<section class="project">
<h1>04.My Projects</h1>
<h1 id="section-4">04.My Projects</h1>
<div id="grid"><a>
<div class="img"><span></span><span></span><span></span><span></span>
<img src="img/DocumentNER.jpg"/></div>
Expand All @@ -204,7 +204,7 @@ <h1>04.My Projects</h1>
</section>

<section class="contact">
<h1>05.Contact Me</h1>
<h1 id="section-5">05.Contact Me</h1>
<h2>Leave a comment</h2>
<p>My inbox is always open.</p>
<a class="contact_button" href="mailto:patrykbala89@gmail.com">Send Mail</a>
Expand Down
184 changes: 81 additions & 103 deletions main_style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,29 +99,13 @@ header nav ul li:hover {
header nav ul li a{
color: var(--icon-shake-color1);
font-size: large;
}

/* Animation */
.nav_text p {
animation: animated-text 4s steps(29,end) 1s 1 normal both,
animated-cursor 600ms steps(29,end) infinite;
}

/* text animation */
@keyframes animated-text{
from{width: 0;}
to{width: 472px;}
}

/* cursor animations */
@keyframes animated-cursor{
from{border-right-color: rgba(0,255,0,.75);}
to{border-right-color: transparent;}
text-decoration: none;
color: var(--icon-shake-color1);
}

/*start text (first section)*/
.start_text {
margin-top: 10%;
margin-top: 13%;
margin-left: 30%;
}

Expand Down Expand Up @@ -207,7 +191,7 @@ margin-left: 30%;

/*about*/
.about {
margin-top: 15%;
margin-top: 10%;
text-align: center;
display: block;
}
Expand Down Expand Up @@ -264,94 +248,18 @@ display: block;
outline-offset: calc(var(--s) / -2);
}

/*work*/
.work {
position: relative;
right: 30%;
text-align: center;
}

.work h1 {
position: relative;
z-index: 1;
}

.work h1:before{
border-top: 1px solid var(--text-shadow);
content: "";
margin: 0 auto; /* centers the line to the full width specified */
position: absolute; /* positioning must be absolute here */
top: 70%;
left: 30%;
right: 0%;
width: 50%;
}

.work p {
position: relative;
left: 35%;
text-align: justify;
width: 80%;
}

.work h3 {
margin-top: 5%;
}

.work .work_right_info {
position: relative;
left: 50%;
}

.work button,
.contact button{
padding: 15px 50px;
color: var(--text-grey);
position: relative;
float: bottom;
background: transparent;
border-color: var(--icon-shake-color1);
}

.work button::before,
.contact button::before {
content: '';
position: absolute;
bottom: 45%;
left: 20px;
width: 100%;
height: 1px;
background: var(--text-shadow);
display: inline-block;
transform-origin: right top;
transform: scale(0, 1);
transition: transform 0.6s cubic-bezier(1, 0, 0, 1);
}

.work button:hover::before,
.contact button:hover::before {
transform-origin: right top;
transform: scale(1, 1);
}

/*skills*/
.skills {
margin-top: 15%;
position: relative;
}

.skills h1 {
position: relative;
left: 10%;
z-index: 1;
margin-top: -10%;
}

.skills h2, .skills p {
position: relative;
left: 10%;
}


.skills h1:before{
border-top: 1px solid var(--text-shadow);
content: "";
Expand Down Expand Up @@ -425,7 +333,7 @@ h2.third_column_title {
position: relative;
font-style: normal;
text-align: center;
top: -20px;
top: -30px;
}

.first_column_title, .second_column_title, .third_column_title {
Expand All @@ -440,13 +348,15 @@ h2.third_column_title {
box-shadow: 0px 0px 10px 1px var(--skill-column-color1);
text-emphasis: 0;
}

.second_column_line {
height: 3px;
margin: 2px 0;
background: var(--skill-column-color2);
position: absolute;
box-shadow: 0px 0px 10px 1px var(--skill-column-color2);
}

.third_column_line {
height: 3px;
margin: 2px 0;
Expand Down Expand Up @@ -474,9 +384,76 @@ h2.third_column_title {
.prtg {width:50%;}
.postman {width:40%;}

/*work*/
.work {
position: relative;
right: 30%;
text-align: center;
margin-top: 10%;
}

.work h1 {
position: relative;
z-index: 1;
}

.work h1:before{
border-top: 1px solid var(--text-shadow);
content: "";
margin: 0 auto; /* centers the line to the full width specified */
position: absolute; /* positioning must be absolute here */
top: 70%;
left: 30%;
right: 0%;
width: 50%;
}

.work p {
position: relative;
left: 35%;
text-align: justify;
width: 80%;
}

.work .work_right_info {
position: relative;
left: 50%;
}

.work button,
.contact button{
padding: 15px 50px;
color: var(--text-grey);
position: relative;
float: bottom;
background: transparent;
border-color: var(--icon-shake-color1);
}

.work button::before,
.contact button::before {
content: '';
position: absolute;
bottom: 45%;
left: 20px;
width: 100%;
height: 1px;
background: var(--text-shadow);
display: inline-block;
transform-origin: right top;
transform: scale(0, 1);
transition: transform 0.6s cubic-bezier(1, 0, 0, 1);
}

.work button:hover::before,
.contact button:hover::before {
transform-origin: right top;
transform: scale(1, 1);
}

/*project*/
.project {
margin-top: 15%;
margin-top: 10%;
position: relative;
text-align: center;
}
Expand Down Expand Up @@ -582,25 +559,26 @@ h2.third_column_title {
font-size: 0.8rem;
margin-top: 0.3rem;
display: block;
margin-bottom: 15%;
}

/*contact*/
.contact {
margin-top: 15%;
margin-top: 5%;
position: relative;
right: 30%;
text-align: center;
}

.contact h1 {
position: relative;
left: 10%;
left: 20%;
z-index: 1;
}

.contact h2, .contact p {
position: relative;
left: 10%;
left: 30%;
}

.contact h1:before{
Expand All @@ -616,7 +594,7 @@ h2.third_column_title {

.contact .contact_button {
position: relative;
left: 10%;
left: 30%;
text-decoration: none;
background-color: transparent;
color: var(--icon-shake-color1);
Expand Down

0 comments on commit 918bec7

Please sign in to comment.