mirror of
https://github.com/itme-brain/itme-brain.github.io.git
synced 2026-03-23 20:19:43 -04:00
Added Animations to all Headers
This commit is contained in:
Bryan
parent
cdd05b8e85
commit
bc109d7da7
3 changed files with 84 additions and 27 deletions
30
index.html
30
index.html
|
|
@ -21,7 +21,7 @@
|
|||
<a href="https://twitter.com/Codecologist"><i class="fa-brands fa-square-twitter"></i></a>
|
||||
<a href="https://www.youtube.com/channel/UCqr3HoBvla1s9hK5CCKI_Kg"><i class="fa-brands fa-youtube"></i></a>
|
||||
|
||||
<a href="Resume.txt" download="Resume.txt">
|
||||
<a href="Resume.pdf">
|
||||
<button class="resumeDownload">
|
||||
<i class="fa-solid fa-file-arrow-down"></i>
|
||||
Resume</button></a>
|
||||
|
|
@ -32,19 +32,23 @@
|
|||
<h1>Bryan Ramos</h1>
|
||||
<div class="typewriterArea">
|
||||
<h2 class="code"><</h2>
|
||||
<h2 class="element">h2</h2>
|
||||
<!-- <h2 class="element">h2</h2>
|
||||
<h2 class="class">class=</h2>
|
||||
<h2 class="className">"title"</h2>
|
||||
<h2 class="code">></h2>
|
||||
<h2 class="plaintext">Fullstack Developer</h2>
|
||||
<h2 class="code"></</h2>
|
||||
<h2 class="element">h2</h2>
|
||||
<h2 class="code">></h2>
|
||||
<h2 class="code">></h2> -->
|
||||
<h2 class="class">Fullstack Developer</h2>
|
||||
<!-- <h2 class="code"><</h2>
|
||||
<h2 class="element">h2</h2> -->
|
||||
<h2 class="code">/></h2>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="portfolio">
|
||||
<h3>Portfolio</h3>
|
||||
<div class="typewriterArea2">
|
||||
<h3 class="code">{:</h3>
|
||||
<h3 class="className">Portfolio</h3>
|
||||
<h3 class="code">};</h3>
|
||||
</div>
|
||||
<div class="projectsGalleryGrid">
|
||||
<a><img class="project project1" src="https://media.istockphoto.com/vectors/thumbnail-image-vector-graphic-vector-id1147544807?k=20&m=1147544807&s=612x612&w=0&h=pBhz1dkwsCMq37Udtp9sfxbjaMl27JUapoyYpQm0anc="></a>
|
||||
<a><img class="project project2" src="https://media.istockphoto.com/vectors/thumbnail-image-vector-graphic-vector-id1147544807?k=20&m=1147544807&s=612x612&w=0&h=pBhz1dkwsCMq37Udtp9sfxbjaMl27JUapoyYpQm0anc="></a>
|
||||
|
|
@ -56,7 +60,11 @@
|
|||
</section>
|
||||
|
||||
<section class="technologies">
|
||||
<h3>Technologies</h3>
|
||||
<div class="typewriterArea3">
|
||||
<h3 class="code">(--</h3>
|
||||
<h3 class="variableName">Technologies</h3>
|
||||
<h3 class="code">);</h3>
|
||||
</div>
|
||||
<div class="technologiesIconsGrid">
|
||||
<i class="fa-brands fa-html5 fa-3x"></i>
|
||||
<i class="fa-brands fa-css3 fa-3x"></i>
|
||||
|
|
@ -81,14 +89,14 @@
|
|||
|
||||
<section class="contact">
|
||||
<h3 class="contactMe">[contactme@ContactForm]$</h3>
|
||||
<div class="contactForm">
|
||||
<!--<div class="contactForm">
|
||||
<form id="contact" method="post" action="">
|
||||
<input class="formField" name="name" type="text" placeholder="Your Name" required>
|
||||
<input class="formField" name="email" type="email" placeholder="Your Email" required>
|
||||
<textarea class="formField" name="message" style="resize:none" placeholder="Your Message..." rows="4" required></textarea>
|
||||
<input class="formField" type="submit" value="Send Message!">
|
||||
</form>
|
||||
</div>
|
||||
</div>-->
|
||||
</section>
|
||||
|
||||
</body>
|
||||
|
|
|
|||
81
styles.css
81
styles.css
|
|
@ -9,6 +9,7 @@
|
|||
--tertiaryTextColor: #A9DC76;
|
||||
--codeColor: #d3d3d3;
|
||||
--elementColor: #bc0457;
|
||||
--variableColor: #d152f7;
|
||||
}
|
||||
|
||||
/* Document Styling */
|
||||
|
|
@ -47,6 +48,7 @@ h3 {
|
|||
color: var(--primaryTextColor);
|
||||
margin-bottom: 10px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Animation Source */
|
||||
|
|
@ -54,7 +56,17 @@ h3 {
|
|||
/* Typewriter Animation */
|
||||
@keyframes typing {
|
||||
from { width:0 }
|
||||
to { width: 60% }
|
||||
to { width: 35% }
|
||||
}
|
||||
|
||||
@keyframes typing2 {
|
||||
from { width: 0 }
|
||||
to { width: 30% }
|
||||
}
|
||||
|
||||
@keyframes typing3 {
|
||||
from { width: 0 }
|
||||
to { width: 40% }
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
|
|
@ -62,6 +74,11 @@ h3 {
|
|||
50% { border-color: var(--elementColor);}
|
||||
}
|
||||
|
||||
@keyframes appear {
|
||||
from { opacity: 0 }
|
||||
to { opacity: 1 }
|
||||
}
|
||||
|
||||
/* Fade-In Animation */
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0 }
|
||||
|
|
@ -71,22 +88,34 @@ h3 {
|
|||
/* Code-Like Syntax Highlighting Styling */
|
||||
.code {
|
||||
color: var(--codeColor);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.element {
|
||||
color: var(--elementColor);
|
||||
white-space: nowrap;
|
||||
|
||||
}
|
||||
|
||||
.class {
|
||||
color: var(--secondaryTextColor);
|
||||
font-style: italic;
|
||||
white-space: nowrap;
|
||||
|
||||
}
|
||||
|
||||
.className {
|
||||
color: var(--tertiaryTextColor)
|
||||
color: var(--tertiaryTextColor);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.plaintext {
|
||||
color: var(--primaryTextColor);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.variableName {
|
||||
color: var(--variableColor);
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -212,13 +241,13 @@ h3 {
|
|||
.typewriterArea {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
border-right: .15em solid var(--elementColor);
|
||||
border-right: .10em solid var(--elementColor);
|
||||
border-color: var(--elementColor);
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
letter-spacing: 3px;
|
||||
animation:
|
||||
typing 2s steps(40, end),
|
||||
typing 2s steps(30, end),
|
||||
blink 0.9s step-end infinite;
|
||||
}
|
||||
|
||||
|
|
@ -231,20 +260,29 @@ h3 {
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
.typewriterArea2 {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
border-right: .10em solid var(--elementColor);
|
||||
border-color: var(--elementColor);
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
letter-spacing: 3px;
|
||||
animation:
|
||||
typing2 2s steps(30, end),
|
||||
blink 0.9s step-end infinite;
|
||||
}
|
||||
|
||||
.projectsGalleryGrid {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: var(--primaryTextColor);
|
||||
font-family: 'Ubuntu', sans-serif;
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
grid-template-columns: repeat(3, 33.3vw);
|
||||
grid-template-columns: repeat(2, 40vw);
|
||||
opacity: 0;
|
||||
animation-name: fadeIn;
|
||||
animation-duration: 5s;
|
||||
animation-delay: 3s;
|
||||
animation-fill-mode: forwards;
|
||||
animation:
|
||||
fadeIn 5s 3s forwards;
|
||||
}
|
||||
|
||||
.project {
|
||||
|
|
@ -260,6 +298,19 @@ h3 {
|
|||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.typewriterArea3 {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
border-right: .10em solid var(--elementColor);
|
||||
border-color: var(--elementColor);
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
letter-spacing: 3px;
|
||||
animation:
|
||||
typing3 2s steps(30, end),
|
||||
blink 0.9s step-end infinite;
|
||||
}
|
||||
|
||||
.technologiesIconsGrid {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
|
@ -268,15 +319,13 @@ h3 {
|
|||
font-family: 'Ubuntu', sans-serif;
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
opacity: 0;
|
||||
grid-template-columns: repeat(3, 20vw);
|
||||
animation:
|
||||
fadeIn 3s 5s forwards;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.fa-brands {
|
||||
font-family: 'Righteous', cursive;
|
||||
}
|
||||
|
||||
/* Brand Colors */
|
||||
.fa-html5 {
|
||||
color: #f06529;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue