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.

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

Jump to bottom

Refactor/code base #15

Closed
wants to merge 10 commits into from
Closed

Refactor/code base #15

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
8efd643
Delete prettierignore file because using linter instead of it
M-AminAlizadeh Jan 15, 2024
ab5c7c6
Change the structure of the directories
M-AminAlizadeh Jan 15, 2024
1c03c34
Change css file path
M-AminAlizadeh Jan 15, 2024
d3e9b93
Update title context
M-AminAlizadeh Jan 15, 2024
ac505b9
Change favicon source link
M-AminAlizadeh Jan 15, 2024
13a0024
Remove extra comment for clean code purposes
M-AminAlizadeh Jan 15, 2024
cb14823
Add logo
M-AminAlizadeh Jan 15, 2024
717b865
Change dimensions of the icon
M-AminAlizadeh Jan 15, 2024
51a1366
Delete extra icons
M-AminAlizadeh Jan 16, 2024
03d059c
Refactor class names for header and navbar for desktop and mobile ver…
M-AminAlizadeh Jan 16, 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
1 change: 0 additions & 1 deletion .prettierignore
View file
Open in desktop

This file was deleted.

Binary file added assets/icons/amin-alizadeh-logo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
0 images/Contact-me-background.svg → assets/images/Contact-me-background.svg
View file
Open in desktop
File renamed without changes
0 images/Counter.png → assets/images/Counter.png
View file
Open in desktop
File renamed without changes
0 images/black-line.png → assets/images/black-line.png
View file
Open in desktop
File renamed without changes
0 ...ontact form background shapes desktop.png → ...ontact-form-background-shapes-desktop.png
View file
Open in desktop
File renamed without changes
0 images/contact-form-shapes-mobile.svg → assets/images/contact-form-shapes-mobile.svg
View file
Open in desktop
File renamed without changes
0 images/Header bg.svg → assets/images/header-shapes-desktop.svg
View file
Open in desktop
File renamed without changes
0 images/header-shapes mobile@2x.svg → assets/images/header-shapes-mobile.svg
View file
Open in desktop
File renamed without changes
0 images/Snapshoot Portfolio1.png → ...jects-snapshoots/Snapshoot Portfolio1.png
View file
Open in desktop
File renamed without changes
0 images/Snapshoot Portfolio2.png → ...jects-snapshoots/Snapshoot Portfolio2.png
View file
Open in desktop
File renamed without changes
0 images/Snapshoot Portfolio3.png → ...jects-snapshoots/Snapshoot Portfolio3.png
View file
Open in desktop
File renamed without changes
0 images/Snapshoot Portfolio4.png → ...jects-snapshoots/Snapshoot Portfolio4.png
View file
Open in desktop
File renamed without changes
0 images/Snapshoot Portfolio5.png → ...jects-snapshoots/Snapshoot Portfolio5.png
View file
Open in desktop
File renamed without changes
0 images/Snapshoot Portfolio6.png → ...jects-snapshoots/Snapshoot Portfolio6.png
View file
Open in desktop
File renamed without changes
0 images/Snapshoot Portfolio7.png → ...jects-snapshoots/Snapshoot Portfolio7.png
View file
Open in desktop
File renamed without changes
0 images/Snapshoot Portfolio8.png → ...jects-snapshoots/Snapshoot Portfolio8.png
View file
Open in desktop
File renamed without changes
157 changes: 125 additions & 32 deletions style.css → assets/styles/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,138 @@
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins';
font-size: 10px;
}

:root {
--main-purple-color: #6070ff;
--main-color: #6070ff;
--secondary-color: #344563;
--font-heavey-pruple-color: #172b4d;
--light-grey-color: #7a869a;
--very-light-puple-color: #ebebff;
--white-color: #fff;
--dark-color: #000;
}

.header {
background: var(--white-color);
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 10rem;
position: sticky;
top: 0;
}

.logo__icon {
border: 1px solid var(--secondary-color);
width: 10rem;
object-fit: cover;
border-radius: 100%;
transition: .4s;
}

.logo__icon:hover {
transform: scale(1.1);
}

.navbar {
display: flex;
justify-content: space-between;
align-items: center;
list-style-type: none;
}

.navbar__menu-icon {
display:none;
cursor:pointer;
}

.navbar__link {
padding: .5rem 1.2rem;
border-bottom: 4px solid transparent;
margin: 0 1rem;
font-size: 1.5rem;
font-weight: 500;
color: var(--secondary-color);
text-decoration: none;
transition: 0.6s;
}

.navbar__link:hover {
border-bottom: 4px solid var(--main-color);
transform: rotate3d(1,1,3, -25deg);
font-size:1.6rem;
}

.mobile-navbar {
display: none;
}

@media (max-width: 700px) {
:root {
font-size: 8px;
}

.header {
padding: 1rem 3rem;
}

.navbar__menu-icon {
display: block;
}

.navbar__link {
display: none;
}

.mobile-navbar {
border: 3px solid green;
background-color: var(--main-color);
mix-blend-mode: multiply;
display: none;
flex-direction: column;
justify-content: center;
padding: 3rem;
position: absolute;
top:0;
left:0;
width: 100%;
height: 100vh;
}

.mobile-navbar__exit-icon-container {
width: 100%;
position: absolute;
top: 10rem;
right: 3rem;
display: flex;
justify-content: end;
margin-bottom: 4rem;
cursor: pointer;
}

.mobile-navbar__link {
text-decoration: none;
font-size: 4rem;
font-weight: 600;
color: var(--white-color);
margin-top: 4rem;
}

.mobile-navbar__toggler {
display: flex !important;
}

}






/*
body {
background-color: #e5e5e5;
position: relative;
Expand All @@ -33,7 +155,6 @@ body {
overflow: hidden;
}

/* Toolbar */
.toolbar-container {
background-color: #fff;
position: fixed;
Expand Down Expand Up @@ -128,7 +249,6 @@ body {
border-bottom: 2px solid var(--main-purple-color);
}

/* Headline */
.headline-container {
background-image: url(images/header-shapes\ mobile@2x.svg);
background-repeat: no-repeat;
Expand Down Expand Up @@ -175,7 +295,6 @@ body {
width: 20px;
}

/* Works */
.works-container {
display: grid;
grid-template-columns: 1fr;
Expand All @@ -184,7 +303,6 @@ body {
margin: 114px 24px;
}

/* Card */
.card-container {
background-color: #fff;
border: 1px solid #dfe1e6;
Expand Down Expand Up @@ -283,9 +401,7 @@ body {
transition: linear 0.3s;
}

/* Mobile details popup */
.mobile-details-popup-bg-container {
/* border: 3px solid green; */
background-color: #c1c7d0;
position: fixed;
width: 100%;
Expand All @@ -297,7 +413,6 @@ body {
}

.mobile-details-popup-container {
/* border: 1px solid orange; */
background-color: #fff;
font-family: 'Poppins', sans-serif;
position: relative;
Expand All @@ -312,7 +427,6 @@ body {
}

.mobile-details-first-row-container {
/* border: 1px solid green; */
display: flex;
justify-content: space-between;
align-items: center;
Expand All @@ -327,7 +441,6 @@ body {
}

.mobile-details-buttons-container {
/* border: 1px solid red; */
display: flex;
justify-content: space-between;
align-items: center;
Expand All @@ -346,7 +459,6 @@ body {
display: none;
}

/* About myself */
.about-myself-container {
border-radius: 0 100px 0 0;
background-color: #fff;
Expand Down Expand Up @@ -410,7 +522,6 @@ hr {
margin: 10px 0;
}

/* Form */
.form-container {
border: 1px solid transparent;
background: var(--main-purple-color);
Expand Down Expand Up @@ -475,7 +586,6 @@ textarea {
}

.error-message-container {
/* border: 1px solid green; */
background-color: #fff;
justify-content: flex-start;
align-items: center;
Expand Down Expand Up @@ -514,7 +624,6 @@ textarea {
left: 120px;
}

/* Pseduo Classes btns */
.card-info-link-container button:hover {
color: #fff;
background-color: #6070ff;
Expand All @@ -532,9 +641,7 @@ textarea {
border: 2px solid #fff;
}

/* Desktop screen */
@media (min-width: 768px) {
/* Toolbar */
.toolbar-content-container {
width: 80%;
}
Expand All @@ -560,7 +667,6 @@ textarea {
color: var(--secondary-color);
}

/* Headline */
.headline-container {
background-image: url(images/Header\ bg.svg);
background-repeat: no-repeat;
Expand Down Expand Up @@ -600,13 +706,11 @@ textarea {
margin-top: 30px;
}

/* Works */
.works-container {
gap: 142px;
margin: 114px 24px;
}

/* Card */
.card-container {
flex-direction: row;
padding: 24px;
Expand Down Expand Up @@ -694,9 +798,7 @@ textarea {
margin: 24px 0;
}

/* Desktop details popup */
.desktop-details-popup-bg-container {
/* border: 1px solid red; */
background-color: #c1c7d0;
font-family: 'Poppins', sans-serif;
position: fixed;
Expand All @@ -711,7 +813,6 @@ textarea {
}

.desktop-details-popup-container {
/* border: 2px solid rgb(51, 255, 0); */
background-color: white;
position: relative;
width: 75%;
Expand All @@ -720,14 +821,12 @@ textarea {
}

.desktop-details-first-row-container {
/* border: 1px solid green; */
display: flex;
justify-content: space-between;
align-items: center;
}

.desktop-client-name {
/* border: 1px solid orange; */
font-size: 15px;
font-weight: 500;
line-height: 20px;
Expand All @@ -736,25 +835,21 @@ textarea {
}

.desktop-details-popup-bottom-side-container {
/* border: 1px solid blue; */
display: flex;
}

.desktop-details-popup-description {
/* border: 3px solid rgb(0, 255, 255); */
font-size: 12px !important;
padding: 5px;
flex: 4;
}

.desktop-details-popup-right-side-container {
/* border: 1px solid orange; */
padding: 20px;
flex: 1;
}

.desktop-details-buttons-container {
/* border: 2px solid blue; */
font-size: 12px;
display: flex;
justify-content: space-between;
Expand All @@ -767,7 +862,6 @@ textarea {
justify-content: space-between;
}

/* About myself */
.about-myself-container {
border-radius: 0 70px 0 0;
display: flex;
Expand Down Expand Up @@ -828,15 +922,14 @@ textarea {
width: 122px;
}

/* Form */
.form-container {
padding: 79px 74px 48px 75px;
background-image: none;
}

.form-bg-container {
background-image: url(images/contact\ form\ background\ shapes\ desktop.png);
background-size: cover; /* maybe cover */
background-size: cover;
background-repeat: no-repeat;
position: relative;
z-index: 2;
Expand Down Expand Up @@ -874,4 +967,4 @@ textarea {
#submit-btn {
width: 40%;
}
}
} */
3 changes: 0 additions & 3 deletions images/Github icon.svg
View file
Open in desktop

This file was deleted.

3 changes: 0 additions & 3 deletions images/Icon - Menu.svg
View file
Open in desktop

This file was deleted.

5 changes: 0 additions & 5 deletions images/Linkedin icon.svg
View file
Open in desktop

This file was deleted.

3 changes: 0 additions & 3 deletions images/Medium icon.svg
View file
Open in desktop

This file was deleted.

3 changes: 0 additions & 3 deletions images/Twitter icon.svg
View file
Open in desktop

This file was deleted.

Binary file removed images/css icon.png
View file
Open in desktop
Binary file not shown.
Binary file removed images/github-icon.png
View file
Open in desktop
Binary file not shown.
3 changes: 0 additions & 3 deletions images/hand icon.svg
View file
Open in desktop

This file was deleted.

Binary file removed images/html icon.png
View file
Open in desktop
Binary file not shown.
Binary file removed images/js icon.png
View file
Open in desktop
Diff not rendered.
Binary file removed images/mobile_exit_Icon.png
View file
Open in desktop
Diff not rendered.
Binary file removed images/see-live-icon.png
View file
Open in desktop
Diff not rendered.
Loading
Loading