Skip to content
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.

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

Issues #3 and #5 🎟️: Waving Alien when form submitted (Contact Page) and JSR Assess changes #6

Merged
merged 19 commits into from
Feb 9, 2024
Merged
Changes from 1 commit
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
d2a1b06
Syles: remove margin 0 from '.line-count' class
ITurres Feb 7, 2024
385264d
Styles: remove unnecesary parent reference for '.line-count' class
ITurres Feb 7, 2024
e24a74d
Chore: Update 'expertiseSummary.json' data
ITurres Feb 7, 2024
594c183
Styles: update styles to accomodate more cards at 'ExpertiseSummaryPa…
ITurres Feb 7, 2024
9660f1c
Feat: Important Updates to 'ContactForm.tsx' UI component
ITurres Feb 7, 2024
b6f9090
Fix: missing dependencies and re-renders at 'ContactForm' UI component
ITurres Feb 7, 2024
c97c9d9
Styles: add styles for '.send-email-icon' class at 'ContactForm.scss'
ITurres Feb 7, 2024
9a60009
Feat: Add email details on 'ContactPage' component
ITurres Feb 7, 2024
b5a0bfa
Feat: remove second email and add react arrow icon on 'ContactPage' c…
ITurres Feb 7, 2024
3c4eb44
Styles: add styles and animations to '.contact-page__details' class a…
ITurres Feb 7, 2024
2f71e3c
Fix: dependency and re-render issues at 'LikeButton' UI component
ITurres Feb 7, 2024
ace6d33
Feat: Add CTA to 'AboutPage' component and update 'about' paragrapth
ITurres Feb 7, 2024
e4dcbba
Styles: add margin bottom to '.animated-button' class at 'AnimatedBut…
ITurres Feb 7, 2024
f693d5f
Styles: Add styles and animations for CTA at 'AboutPage.scss'
ITurres Feb 7, 2024
f048f50
Assets: add 'apple-touch-icon.png' file
ITurres Feb 7, 2024
3be3c9c
Chore: Update index description and apple-touch-icon path
ITurres Feb 7, 2024
ef0715c
Chore: Add 'deploy.yml' file
ITurres Feb 7, 2024
5465202
Docs: Update 'future features' section, check complete
ITurres Feb 7, 2024
dea6340
Chore: update 'manifest.json'
ITurres Feb 8, 2024
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
Prev Previous commit
Next Next commit
Styles: add styles and animations to '.contact-page__details' class a…
…t 'ContactPage.scss'
ITurres committed Feb 7, 2024
commit 3c4eb4415240a262eb9a57890e7f16ec009a54ec
62 changes: 58 additions & 4 deletions src/styles/pages/ContactPage.scss
Original file line number Diff line number Diff line change
@@ -2,6 +2,7 @@
@use '../mixins' as mixins;

$color1: colors.$color1;
$dark: colors.$dark;

@forward '../animations/blend-in-out.scss';

@@ -16,6 +17,10 @@ body:has(.drone) {
center,
no-repeat
);

@media screen and (min-width: 768px) {
height: 100vh;
}
}

.contact-page {
@@ -25,10 +30,59 @@ body:has(.drone) {
padding: 3rem 1rem;
width: 100%;

&__details {
position: fixed;
bottom: 1rem;
left: 0;
right: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.2rem;
width: fit-content;
margin: 0 auto;
background-color: rgba($dark, 0.7);
padding: 0.4rem 0.8rem;
border-radius: 0.5rem;
transform: perspective(500px) rotateX(55deg);

span {
font-size: 1rem;
}

.details-icon {
position: absolute;
font-size: 3rem;
animation: slideIn 2s ease-in-out infinite;

@keyframes slideIn {
0% {
bottom: 40rem;
opacity: 0;
}

50% {
opacity: 1;
}

100% {
bottom: 2rem;
opacity: 0.3;
}
}
}

span,
.details-icon {
font-weight: 600;
color: $color1;
}
}

@include mixins.component-code-snippet(
'const Contact = () => {',
colors.$color1,
colors.$color1,
$color1,
$color1,
-2
);

@@ -38,8 +92,8 @@ body:has(.drone) {

@include mixins.component-code-snippet(
'const Contact = () => {',
colors.$color1,
colors.$color1,
$color1,
$color1,
4
);
}