diff --git a/.prettierignore b/.prettierignore deleted file mode 100644 index 0b2fbe6..0000000 --- a/.prettierignore +++ /dev/null @@ -1 +0,0 @@ -js/ \ No newline at end of file diff --git a/assets/icons/amin-alizadeh-logo.png b/assets/icons/amin-alizadeh-logo.png new file mode 100755 index 0000000..9d0a37c Binary files /dev/null and b/assets/icons/amin-alizadeh-logo.png differ diff --git a/images/Contact-me-background.svg b/assets/images/Contact-me-background.svg similarity index 100% rename from images/Contact-me-background.svg rename to assets/images/Contact-me-background.svg diff --git a/images/Counter.png b/assets/images/Counter.png similarity index 100% rename from images/Counter.png rename to assets/images/Counter.png diff --git a/images/black-line.png b/assets/images/black-line.png similarity index 100% rename from images/black-line.png rename to assets/images/black-line.png diff --git a/images/contact form background shapes desktop.png b/assets/images/contact-form-background-shapes-desktop.png similarity index 100% rename from images/contact form background shapes desktop.png rename to assets/images/contact-form-background-shapes-desktop.png diff --git a/images/contact-form-shapes-mobile.svg b/assets/images/contact-form-shapes-mobile.svg similarity index 100% rename from images/contact-form-shapes-mobile.svg rename to assets/images/contact-form-shapes-mobile.svg diff --git a/images/Header bg.svg b/assets/images/header-shapes-desktop.svg similarity index 100% rename from images/Header bg.svg rename to assets/images/header-shapes-desktop.svg diff --git a/images/header-shapes mobile@2x.svg b/assets/images/header-shapes-mobile.svg similarity index 100% rename from images/header-shapes mobile@2x.svg rename to assets/images/header-shapes-mobile.svg diff --git a/images/Snapshoot Portfolio1.png b/assets/images/projects-snapshoots/Snapshoot Portfolio1.png similarity index 100% rename from images/Snapshoot Portfolio1.png rename to assets/images/projects-snapshoots/Snapshoot Portfolio1.png diff --git a/images/Snapshoot Portfolio2.png b/assets/images/projects-snapshoots/Snapshoot Portfolio2.png similarity index 100% rename from images/Snapshoot Portfolio2.png rename to assets/images/projects-snapshoots/Snapshoot Portfolio2.png diff --git a/images/Snapshoot Portfolio3.png b/assets/images/projects-snapshoots/Snapshoot Portfolio3.png similarity index 100% rename from images/Snapshoot Portfolio3.png rename to assets/images/projects-snapshoots/Snapshoot Portfolio3.png diff --git a/images/Snapshoot Portfolio4.png b/assets/images/projects-snapshoots/Snapshoot Portfolio4.png similarity index 100% rename from images/Snapshoot Portfolio4.png rename to assets/images/projects-snapshoots/Snapshoot Portfolio4.png diff --git a/images/Snapshoot Portfolio5.png b/assets/images/projects-snapshoots/Snapshoot Portfolio5.png similarity index 100% rename from images/Snapshoot Portfolio5.png rename to assets/images/projects-snapshoots/Snapshoot Portfolio5.png diff --git a/images/Snapshoot Portfolio6.png b/assets/images/projects-snapshoots/Snapshoot Portfolio6.png similarity index 100% rename from images/Snapshoot Portfolio6.png rename to assets/images/projects-snapshoots/Snapshoot Portfolio6.png diff --git a/images/Snapshoot Portfolio7.png b/assets/images/projects-snapshoots/Snapshoot Portfolio7.png similarity index 100% rename from images/Snapshoot Portfolio7.png rename to assets/images/projects-snapshoots/Snapshoot Portfolio7.png diff --git a/images/Snapshoot Portfolio8.png b/assets/images/projects-snapshoots/Snapshoot Portfolio8.png similarity index 100% rename from images/Snapshoot Portfolio8.png rename to assets/images/projects-snapshoots/Snapshoot Portfolio8.png diff --git a/style.css b/assets/styles/styles.css similarity index 88% rename from style.css rename to assets/styles/styles.css index b34a851..163035e 100644 --- a/style.css +++ b/assets/styles/styles.css @@ -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; @@ -33,7 +155,6 @@ body { overflow: hidden; } -/* Toolbar */ .toolbar-container { background-color: #fff; position: fixed; @@ -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; @@ -175,7 +295,6 @@ body { width: 20px; } -/* Works */ .works-container { display: grid; grid-template-columns: 1fr; @@ -184,7 +303,6 @@ body { margin: 114px 24px; } -/* Card */ .card-container { background-color: #fff; border: 1px solid #dfe1e6; @@ -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%; @@ -297,7 +413,6 @@ body { } .mobile-details-popup-container { - /* border: 1px solid orange; */ background-color: #fff; font-family: 'Poppins', sans-serif; position: relative; @@ -312,7 +427,6 @@ body { } .mobile-details-first-row-container { - /* border: 1px solid green; */ display: flex; justify-content: space-between; align-items: center; @@ -327,7 +441,6 @@ body { } .mobile-details-buttons-container { - /* border: 1px solid red; */ display: flex; justify-content: space-between; align-items: center; @@ -346,7 +459,6 @@ body { display: none; } -/* About myself */ .about-myself-container { border-radius: 0 100px 0 0; background-color: #fff; @@ -410,7 +522,6 @@ hr { margin: 10px 0; } -/* Form */ .form-container { border: 1px solid transparent; background: var(--main-purple-color); @@ -475,7 +586,6 @@ textarea { } .error-message-container { - /* border: 1px solid green; */ background-color: #fff; justify-content: flex-start; align-items: center; @@ -514,7 +624,6 @@ textarea { left: 120px; } -/* Pseduo Classes btns */ .card-info-link-container button:hover { color: #fff; background-color: #6070ff; @@ -532,9 +641,7 @@ textarea { border: 2px solid #fff; } -/* Desktop screen */ @media (min-width: 768px) { - /* Toolbar */ .toolbar-content-container { width: 80%; } @@ -560,7 +667,6 @@ textarea { color: var(--secondary-color); } - /* Headline */ .headline-container { background-image: url(images/Header\ bg.svg); background-repeat: no-repeat; @@ -600,13 +706,11 @@ textarea { margin-top: 30px; } - /* Works */ .works-container { gap: 142px; margin: 114px 24px; } - /* Card */ .card-container { flex-direction: row; padding: 24px; @@ -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; @@ -711,7 +813,6 @@ textarea { } .desktop-details-popup-container { - /* border: 2px solid rgb(51, 255, 0); */ background-color: white; position: relative; width: 75%; @@ -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; @@ -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; @@ -767,7 +862,6 @@ textarea { justify-content: space-between; } - /* About myself */ .about-myself-container { border-radius: 0 70px 0 0; display: flex; @@ -828,7 +922,6 @@ textarea { width: 122px; } - /* Form */ .form-container { padding: 79px 74px 48px 75px; background-image: none; @@ -836,7 +929,7 @@ textarea { .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; @@ -874,4 +967,4 @@ textarea { #submit-btn { width: 40%; } -} +} */ diff --git a/images/Github icon.svg b/images/Github icon.svg deleted file mode 100644 index e1a397b..0000000 --- a/images/Github icon.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/images/Icon - Menu.svg b/images/Icon - Menu.svg deleted file mode 100644 index 34e0d66..0000000 --- a/images/Icon - Menu.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/images/Linkedin icon.svg b/images/Linkedin icon.svg deleted file mode 100644 index 171e0b6..0000000 --- a/images/Linkedin icon.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/images/Medium icon.svg b/images/Medium icon.svg deleted file mode 100644 index fe56514..0000000 --- a/images/Medium icon.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/images/Twitter icon.svg b/images/Twitter icon.svg deleted file mode 100644 index f505d95..0000000 --- a/images/Twitter icon.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/images/css icon.png b/images/css icon.png deleted file mode 100644 index ddca959..0000000 Binary files a/images/css icon.png and /dev/null differ diff --git a/images/github-icon.png b/images/github-icon.png deleted file mode 100644 index 88f35c6..0000000 Binary files a/images/github-icon.png and /dev/null differ diff --git a/images/hand icon.svg b/images/hand icon.svg deleted file mode 100644 index 62f5268..0000000 --- a/images/hand icon.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/images/html icon.png b/images/html icon.png deleted file mode 100644 index 71c3b59..0000000 Binary files a/images/html icon.png and /dev/null differ diff --git a/images/js icon.png b/images/js icon.png deleted file mode 100644 index 982f7df..0000000 Binary files a/images/js icon.png and /dev/null differ diff --git a/images/mobile_exit_Icon.png b/images/mobile_exit_Icon.png deleted file mode 100644 index c6e3c0a..0000000 Binary files a/images/mobile_exit_Icon.png and /dev/null differ diff --git a/images/see-live-icon.png b/images/see-live-icon.png deleted file mode 100644 index fb380bb..0000000 Binary files a/images/see-live-icon.png and /dev/null differ diff --git a/index.html b/index.html index e23867a..ee9f3b3 100644 --- a/index.html +++ b/index.html @@ -3,66 +3,50 @@ - + - Amin's Portfolio + href="https://img.icons8.com/color/48/code.png" + /> + Amin Alizadeh Portfolio - -
-
- -
- My Logo +
+ + + + +
+ Portfolio + About + Contact + +
- -
+ +

I’m Amin.
Glad to see you!

-

I’m a software developer! I can help you build a product , feature @@ -71,7 +55,6 @@

contact me.

-

LET’S CONNECT

- +
-
-
alt="Tonic sanpshoot" class="card-snapshoot-desktop desktop" />
-
-

Tonic

-
- CANOPY counter icon - Back End Dev counter icon - 2015
-

A daily selection of privately personalized reads; no accounts or sign-ups required.

-
  • HTML
  • CSS
  • JavaScript
-
-
Tonic alt="Multi-post strories sanpshoot" class="card-snapshoot-desktop desktop" />
-
-

Multi-Post Stories

-
- CANOPY FACEBOOK counter-icon - Back End Dev Full Stack Dev counter-icon - 2015
-

A daily selection of privately personalized reads; no accounts or @@ -198,21 +162,18 @@

Multi-Post Stories

friends.

-
  • HTML
  • Ruby on rails
  • CSS
  • JavaScript
-
-
Multi-Post Stories alt="Tonic sanpshoot" class="card-snapshoot-desktop desktop" />
-
-

Tonic

Facebook 360

-
- + CANOPY FACEBOOK counter-icon - + Back End Dev Full Stack Dev counter-icon - + 2015
-

A daily selection of privately personalized reads; no accounts or @@ -255,21 +212,18 @@

Facebook 360

VR.

-
  • HTML
  • Ruby on rails
  • CSS
  • JavaScript
-
-
Facebook 360 alt="Tonic sanpshoot" class="card-snapshoot-desktop desktop" />
-
-

Multi-Post Stories

Uber Navigation

-
- CANOPY Uber counter-icon - Back End Dev Lead Developer counter-icon - 2015 2018
-

A daily selection of privately personalized reads; no accounts or @@ -312,44 +259,35 @@

Uber Navigation

unlocking your most expensive computer: your car.

-
  • HTML
  • Ruby on rails
  • CSS
  • JavaScript
-
- +
-
-

Tonic

exit icon
-
- CANOPY counter icon - Back End Dev counter icon - 2015
-
Tonic src="images/Snapshoot Portfolio1.png" alt="Tonic sanpshoot" />
-

Lorem Ipsum is simply dummy text of the printing and typesetting @@ -368,7 +305,6 @@

Tonic

electronic typesetting, remaining essent

-
  • HTML
    • @@ -376,7 +312,6 @@

    Tonic

  • JavaScripts
-
- +
-
-

Tonic

exit icon
-
- CANOPY counter icon - Back End Dev counter icon - 2015
-
Tonic class="card-snapshoot-desktop desktop" />
-

@@ -441,7 +368,6 @@

Tonic

-
  • HTML
    • @@ -449,7 +375,6 @@

    Tonic

  • JavaScripts
-
- +
-
-

About Myself

-

Hello I’m a software developer! I can help you build a product , @@ -486,7 +408,6 @@

hesitate to contact me.

-

@@ -521,13 +442,11 @@

-
-
- +
-

Contact me

-

If you have an application you are interested in developing, a @@ -589,9 +506,7 @@

Contact me

love to help with it!

-
- Contact me maxlength="30" id="form-full-name" required /> - Contact me placeholder="Enter your email address" id="form-email" required /> -