:💅🏾: style: Add a new image to the main page and style it.

index.html

@@ -18,18 +18,27 @@
     </header>
     <main>
       <h1>Raphael Carneiro | WDD 130</h1>
-      <img src="images/profile.png" alt="Hello, my name is Raphael Carneiro" width="200">
-      <p>Hello! I'm Raphael. 😁<br><br>
-
-        I'm pursuing a bachelor's degree in Software Development at Brigham Young University - Idaho. I aim to become a more consistent code developer and to be able to tackle the challenges of the programming world for companies worldwide, without encountering technical or language barriers. At the moment, my expertise is primarily focused on frontend development, but I'm actively working towards feeling confident as a full-stack developer soon.<br><br>
-
-        My professional journey thus far has been somewhat winding, yet it has consistently showcased my passion for technology. It all began back in high school when I simultaneously enrolled in and graduated from a technical course in electronics, later continuing on to become a technologist in systems analysis and development. Today, I realize that both my roles as an electronic security technician and as an IT analyst have equipped me with skills that greatly benefit my current career path, from soft skills like conflict resolution and active listening to technical abilities such as managing Linux servers, databases, and even experience with agile methodologies like Scrum.
-
-        While I know many tools for both frontend and backend development, I am more familiar with frontend technologies, specifically React.<br><br>
-
-        My main goal is to gain experience as a junior developer and ultimately become a software engineer. If you've read this far and are seeking someone committed, with a passion for challenges and opportunities for growth, that person is me 🫡. I'm actively searching for internship, freelance, or junior developer roles.
-      </p>
+      <section>
+        <h2>About Me</h2>
+        <cite>Hello! I'm Raphael. 😁</cite>
+        <img src="images/profile.png" 
+          alt="Raphael Carneiro wearing a suit" 
+          width="200"
+        >
+        <p>I'm pursuing a bachelor's degree in Software Development at Brigham Young University - Idaho. I aim to become a more consistent code developer and to be able to tackle the challenges of the programming world for companies worldwide, without encountering technical or language barriers. At the moment, my expertise is primarily focused on frontend development, but I'm actively working towards feeling confident as a full-stack developer soon.</p>
+        <p>My professional journey thus far has been somewhat winding, yet it has consistently showcased my passion for technology. It all began back in high school when I simultaneously enrolled in and graduated from a technical course in electronics, later continuing on to become a technologist in systems analysis and development. Today, I realize that both my roles as an electronic security technician and as an IT analyst have equipped me with skills that greatly benefit my current career path, from soft skills like conflict resolution and active listening to technical abilities such as managing Linux servers, databases, and even experience with agile methodologies like Scrum.</p>
+      </section>
     </main>
+    <aside>
+      <img src="images/selfie.png" 
+        alt="Raphael using headphones"
+        width="200">
+      <blockquote>
+        <p>My main goal is to gain experience as a junior developer and ultimately become a software engineer.</p>
+        <p>If you've read this far and are seeking someone committed, with a passion for challenges and opportunities for growth, that person is me 🫡.</p>
+        <p>I'm actively searching for internship, freelance, or junior developer roles</p>
+      </blockquote>     
+    </aside>
     <footer>
       <p>©2024 Raphael Carneiro 🌳 Rio de Janeiro, Brazil</p>
     </footer>

styles/styles.css

@@ -1,3 +1,7 @@
+body {
+    display: block;
+}
+
 nav {
     display: flex;
     gap: 20px;
@@ -19,23 +23,72 @@ nav a {
 h1 {
     text-align: center;
     /*padding-top: 40px;*/
-    color: steelblue;
+    color: #5b6dcd;
 }
 
-img {
+h2 {
+    color: #666666;
+    margin: 10px
+}
+
+main img {
     float: left;
     width: 150px;
     height: auto;
-    border: 1px solid steelblue;
-    padding: 2px;
-    box-shadow: 0 0 30px #808080;
-    margin: 15px;
+    margin: 10px 20px 10px 10px;
+    border-radius: 30%;
+    box-shadow: 0 0 10px #808080;
+}
+
+cite {
+    text-indent: 30px;
+    font-size: larger;
+    font-weight: bolder;
+    text-align: center;
+}
+
+main p {
+    padding: 10px 10px 0 10px;
+    text-indent: 20px;
+    margin: 0 10px;
+
 }
 
-p {
+aside {
+    display: flex;
+    flex-direction: row-reverse;
+    flex: 1;
+    width: 400px;
+    margin: 20px 10px 10px 10px;
     padding: 10px;
+    background-color: #f6edcb;
+    align-items: center;
+}
+
+aside img {
+    width: 100px;
+    height: 80px;
+    border-radius: 50% 50% 50% 70%;
+    margin-top: 10px;
+}
+
+aside blockquote {
+    margin-top: 10px;
+    margin-left: 0;
+    padding-left: 10px;
+    margin-right: 0;
+}
+
+aside blockquote p {
+    padding: 0 1px 0 0;
+    margin: 0 0 2px 0;
+    font-style: italic;
+    font-size: small;
+    text-indent: 20px;
 }
 
 footer {
+    flex: 1;
+    margin-top: 20px;
     text-align: center;
 }