build(npm script)

package.json

@@ -6,7 +6,8 @@
     "start": "ng serve",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
-    "test": "ng test"
+    "test": "ng test",
+    "commit": "cz"
   },
   "private": true,
   "dependencies": {
@@ -34,5 +35,10 @@
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.0.0",
     "typescript": "~4.7.2"
+  },
+  "config": {
+    "commitizen": {
+      "path": "cz-conventional-changelog"
+    }
   }
 }

src/app/components/big-card/big-card.component.css

@@ -1,4 +1,4 @@
-.container__big-card{
+.container__big-card {
 
   margin-left: 20px;
   margin-right: 20px;
@@ -12,20 +12,86 @@
   justify-content: flex-start;
 }
 
-.big-card__title > h1  {
+.big-card__title>h1 {
   margin-top: 15px;
   font-size: 20px;
 }
 
-.big-card__description{
+.big-card__description {
   margin-top: 20px;
 }
 
-.big-card__description > p > a {
+.big-card__description>p>a {
   color: grey;
 }
 
-.big-card__photo > img{
+.big-card__photo>img {
   width: 100%;
   min-width: 400px;
 }
+
+/* For Tablet View */
+@media screen and (min-device-width: 768px) and (max-device-width: 1024px) {
+
+  .container__big-card .big-card__title .big-card__description .big-card__photo {
+    width: 400px;
+    height: 400px;
+  }
+}
+
+/* For Mobile Portrait View */
+@media screen and (max-device-width: 480px) and (orientation: portrait) {
+
+  .container__big-card .big-card__title .big-card__description .big-card__photo {
+    width: 200px;
+    height: 200px;
+  }
+}
+
+/* For Mobile Landscape View */
+@media screen and (max-device-width: 640px) and (orientation: landscape) {
+
+  .container__big-card .big-card__title .big-card__description .big-card__photo {
+    width: 400px;
+    height: 200px;
+  }
+}
+
+/* For Mobile Phones Portrait or Landscape View */
+@media screen and (max-device-width: 640px) {
+
+  .container__big-card .big-card__title .big-card__description .big-card__photo {
+    width: 400px;
+    height: 200px;
+
+  }
+}
+
+/* For iPhone 4 Portrait or Landscape View */
+@media screen and (min-device-width: 320px) and (-webkit-min-device-pixel-ratio: 2) {
+
+  .container__big-card .big-card__title .big-card__description .big-card__photo {
+    width: 400px;
+    height: 400px;
+  }
+}
+
+/* For iPhone 5 Portrait or Landscape View */
+@media (device-height: 568px) and (device-width: 320px) and (-webkit-min-device-pixel-ratio: 2) {
+
+  .container__big-card .big-card__title .big-card__description .big-card__photo {
+    width: 400px;
+    height: 400px;
+
+  }
+}
+
+/* For iPhone 6 and 6 plus Portrait or Landscape View */
+@media (min-device-height: 667px) and (min-device-width: 375px) and (-webkit-min-device-pixel-ratio: 3) {
+
+  .container__big-card .big-card__title .big-card__description .big-card__photo {
+    width: 400px;
+    height: 400px;
+
+  }
+}

src/app/components/big-card/big-card.component.html

@@ -1,12 +1,7 @@
 <div class="container__big-card">
 
   <div class="big-card__photo">
-    <img
-      src="{{ photoCover }}"
-      alt=""
-      height="200px"
-      srcset=""
-    >
+    <img src="{{ photoCover }}" alt="" height="200px" srcset="">
   </div>
 
   <div class="big-card__title">
@@ -16,9 +11,9 @@ <h1><a [routerLink]="['content', Id]">{{ cardTitle }}</a></h1>
   <div class="big-card__description">
     <p>
       <a [routerLink]="['content', Id]">
-          {{ cardDescription }}
+        {{ cardDescription }}
       </a>
     </p>
   </div>
 
-</div>
+</div>

src/app/components/menu-bar/menu-bar.component.css

@@ -1,12 +1,65 @@
-
-
-.container__menu-bar > ul{
+.container__menu-bar>ul {
   display: flex;
   flex-direction: row;
 }
 
-.container__menu-bar > ul > li{
+.container__menu-bar>ul>li {
   margin-right: 20px;
   list-style: none;
 }
 
+/* For Tablet View */
+@media screen and (min-device-width: 768px) and (max-device-width: 1024px) {
+  .container__menu-bar {
+    width: 400px;
+    height: 400px;
+  }
+}
+
+/* For Mobile Portrait View */
+@media screen and (max-device-width: 480px) and (orientation: portrait) {
+  .container__menu-bar {
+    width: 200px;
+    height: 200px;
+  }
+}
+
+/* For Mobile Landscape View */
+@media screen and (max-device-width: 640px) and (orientation: landscape) {
+  .container__menu-bar {
+    width: 400px;
+    height: 200px;
+  }
+}
+
+/* For Mobile Phones Portrait or Landscape View */
+@media screen and (max-device-width: 640px) {
+  .container__menu-bar {
+    width: 400px;
+    height: 200px;
+  }
+}
+
+/* For iPhone 4 Portrait or Landscape View */
+@media screen and (min-device-width: 320px) and (-webkit-min-device-pixel-ratio: 2) {
+  .container__menu-bar {
+    width: 400px;
+    height: 400px;
+  }
+}
+
+/* For iPhone 5 Portrait or Landscape View */
+@media (device-height: 568px) and (device-width: 320px) and (-webkit-min-device-pixel-ratio: 2) {
+  .container__menu-bar {
+    width: 400px;
+    height: 400px;
+  }
+}
+
+/* For iPhone 6 and 6 plus Portrait or Landscape View */
+@media (min-device-height: 667px) and (min-device-width: 375px) and (-webkit-min-device-pixel-ratio: 3) {
+  .container__menu-bar {
+    width: 400px;
+    height: 400px;
+  }
+}

src/app/components/menu-bar/menu-bar.component.html

@@ -1,9 +1,8 @@
 <div class="container__menu-bar">
   <ul>
-    <li><a href="https://linkedin.com/in/felipe-aguiar-exe">Linkedin</a></li>
+    <li><a href="https://www.linkedin.com/in/cesarconstanzo/">Linkedin</a></li>
     <li><span>•</span></li>
-    <li><a href="https://github.com/felipeAguiarCode">Github</a></li>
+    <li><a href="https://github.com/che36">Github</a></li>
     <li><span>•</span></li>
-    <li><a href="https://www.youtube.com/channel/UCCcDZkI7AITYFCgDEFV9OoQ">Youtube</a></li>
   </ul>
-</div>
+</div>

src/app/components/menu-title/menu-title.component.css

@@ -1,8 +1,8 @@
-.container__menu-title{
+.container__menu-title {
   color: white;
 }
 
-.container__menu-title > h1{
+.container__menu-title>h1 {
   margin-top: 15px;
   margin-bottom: 15px;
   font-size: 135px;
@@ -11,7 +11,63 @@
   justify-content: center;
 }
 
-.container__menu-title > hr{
+.container__menu-title>hr {
   margin-top: 20px;
   margin-bottom: 5px;
 }
+
+/* For Tablet View */
+@media screen and (min-device-width: 768px) and (max-device-width: 1024px) {
+  .container__menu-title {
+    width: 400px;
+    height: 400px;
+  }
+}
+
+/* For Mobile Portrait View */
+@media screen and (max-device-width: 480px) and (orientation: portrait) {
+  .container__menu-title {
+    width: 200px;
+    height: 200px;
+  }
+}
+
+/* For Mobile Landscape View */
+@media screen and (max-device-width: 640px) and (orientation: landscape) {
+  .container__menu-title {
+    width: 400px;
+    height: 200px;
+  }
+}
+
+/* For Mobile Phones Portrait or Landscape View */
+@media screen and (max-device-width: 640px) {
+  .container__menu-title {
+    width: 400px;
+    height: 200px;
+  }
+}
+
+/* For iPhone 4 Portrait or Landscape View */
+@media screen and (min-device-width: 320px) and (-webkit-min-device-pixel-ratio: 2) {
+  .container__menu-title {
+    width: 400px;
+    height: 400px;
+  }
+}
+
+/* For iPhone 5 Portrait or Landscape View */
+@media (device-height: 568px) and (device-width: 320px) and (-webkit-min-device-pixel-ratio: 2) {
+  .container__menu-title {
+    width: 400px;
+    height: 400px;
+  }
+}
+
+/* For iPhone 6 and 6 plus Portrait or Landscape View */
+@media (min-device-height: 667px) and (min-device-width: 375px) and (-webkit-min-device-pixel-ratio: 3) {
+  .container__menu-title {
+    width: 400px;
+    height: 400px;
+  }
+}

src/app/components/small-card/small-card.component.css

@@ -1,14 +1,14 @@
-.container__small-card{
+.container__small-card {
   width: 700px;
   margin-bottom: 15px;
 }
 
-.container__small-card-content{
+.container__small-card-content {
   display: flex;
   flex-direction: row;
 }
 
-.small-card__photo > img {
+.small-card__photo>img {
   width: 200px;
   min-width: 200px;
   margin-right: 20px;
@@ -20,6 +20,63 @@
   align-items: center;
 }
 
-.container__small-card__separator{
+.container__small-card__separator {
   margin-top: 10px;
 }
+
+/* For Tablet View */
+@media screen and (min-device-width: 768px) and (max-device-width: 1024px) {
+  .container__small-card .container__small-card-content .small-card__photo .small-card__title .container__small-card__separator {
+    width: 400px;
+    height: 400px;
+  }
+}
+
+/* For Mobile Portrait View */
+@media screen and (max-device-width: 480px) and (orientation: portrait) {
+  .container__small-card .container__small-card-content .small-card__photo .small-card__title .container__small-card__separator {
+    width: 200px;
+    height: 200px;
+
+  }
+}
+
+/* For Mobile Landscape View */
+@media screen and (max-device-width: 640px) and (orientation: landscape) {
+  .container__small-card .container__small-card-content .small-card__photo .small-card__title .container__small-card__separator {
+    width: 400px;
+    height: 200px;
+  }
+}
+
+/* For Mobile Phones Portrait or Landscape View */
+@media screen and (max-device-width: 640px) {
+  .container__small-card .container__small-card-content .small-card__photo .small-card__title .container__small-card__separator {
+    width: 400px;
+    height: 200px;
+  }
+}
+
+/* For iPhone 4 Portrait or Landscape View */
+@media screen and (min-device-width: 320px) and (-webkit-min-device-pixel-ratio: 2) {
+  .container__small-card .container__small-card-content .small-card__photo .small-card__title .container__small-card__separator {
+    width: 400px;
+    height: 400px;
+  }
+}
+
+/* For iPhone 5 Portrait or Landscape View */
+@media (device-height: 568px) and (device-width: 320px) and (-webkit-min-device-pixel-ratio: 2) {
+  .container__small-card .container__small-card-content .small-card__photo .small-card__title .container__small-card__separator {
+    width: 400px;
+    height: 400px;
+  }
+}
+
+/* For iPhone 6 and 6 plus Portrait or Landscape View */
+@media (min-device-height: 667px) and (min-device-width: 375px) and (-webkit-min-device-pixel-ratio: 3) {
+  .container__small-card .container__small-card-content .small-card__photo .small-card__title .container__small-card__separator {
+    width: 400px;
+    height: 400px;
+  }
+}