https://github.com/chrisarmstrong5/christian.git

package.json

@@ -20,7 +20,7 @@
   },
   "homepage": "https://github.com/cobiwave/simplefolio#readme",
   "devDependencies": {
-    "@parcel/transformer-sass": "^2.8.2",
+    "@parcel/transformer-sass": "^2.11.0",
     "parcel": "^2.8.2",
     "prettier": "^2.8.1"
   },

src/index.html

@@ -18,7 +18,7 @@
     <link rel="shortcut icon" type="image/png" href="assets/favicon.png" />
 
     <!-- Todo: put here your site title -->
-    <title>[Your name here] | Developer</title>
+    <title>Christian Armstrong | Digital Marketer</title>
     <!-- Todo: add some coding keywords below - e.g: (javascript, yourusername, etc) -->
     <meta name="keywords" content="[username], [name], skill" />
     <!-- Todo: improve your SEO by adding a small description of you -->
@@ -46,13 +46,13 @@
     <section id="hero" class="jumbotron">
       <div class="container">
         <h1 class="hero-title load-hidden">
-          Hi, my name is <span class="text-color-main">Your Name</span>
+          Hi, my name is <span class="text-color-main">Christian</span>
           <br />
-          I'm the Unknown Developer.
+          I'm a Digital Marketing Expert.
         </h1>
         <p class="hero-cta load-hidden">
           <a rel="noreferrer" class="cta-btn cta-btn--hero" href="#about"
-            >Know more</a
+            >Learn more about me!</a
           >
         </p>
       </div>
@@ -71,26 +71,37 @@ <h2 class="section-title load-hidden">About me</h2>
                 class="img-fluid rounded shadow-lg"
                 height="auto"
                 width="300px"
-                src="assets/profile.jpg"
+                src="assets/IMG_7500.jpg"
                 alt="Profile Image"
               />
             </div>
           </div>
           <div class="col-md-6 col-sm-12">
             <div class="about-wrapper__info load-hidden">
               <p class="about-wrapper__info-text">
-                This is where you can describe about yourself. The more you
-                describe about yourself, the more chances you have!
+                Hello! I'm Christian Armstrong—a Digital Marketing enthusiast split between Barbados and Toronto, Ontario. I'm your go-to person for all things website development, digital marketing, SEO and social media expertise. With experience as a Social Media Manager and Digital Marketing Strategist, I'm all about crafting engaging content and deciphering analytics. As a recent graduate of Business Management at Fanshawe College, I've also stepped my foot into the entrepreneurial world with various online businesses. When I'm not immersed in the digital world, you'll find me kicking playing football, tennis or strategizing my next move on the chessboard. Let's make things happen!
               </p>
               <p class="about-wrapper__info-text">
-                Extra Information about you! like hobbies and your goals.
+                Skills: 
+                • Shopify
+                • Google analytics
+                • Youtube
+                • SEO
+                • Photoshop
+                • Canva 
+                • FB Ads
+                • Slack
+                • Sprout
+                • Later
+                • E-commerce Management
+                • Problem Solving
               </p>
               <span class="d-flex mt-3">
                 <a
                   rel="noreferrer"
                   target="_blank"
                   class="cta-btn cta-btn--resume"
-                  href="assets/resume.pdf"
+                  href="assets/Christian Armstrong Professional Resume  (1).pdf"
                 >
                   View Resume
                 </a>
@@ -112,7 +123,7 @@ <h2 class="section-title dark-blue-text">Projects</h2>
           <div class="row">
             <div class="col-lg-4 col-sm-12">
               <div class="project-wrapper__text load-hidden">
-                <h3 class="project-wrapper__text-title">Project Title 0</h3>
+                <h3 class="project-wrapper__text-title">Website Design and Branding for Medi-Derm Skincare</h3>
                 <div>
                   <p class="mb-4">
                     Describe the project being very specific, you can use the Twitter standard: no more than 280 characters: 
@@ -124,17 +135,14 @@ <h3 class="project-wrapper__text-title">Project Title 0</h3>
                   rel="noreferrer"
                   target="_blank"
                   class="cta-btn cta-btn--hero"
-                  href="#!"
+                  href="https://medidermskincare.myshopify.com/"
                 >
                   See Live
                 </a>
                 <a
-                  rel="noreferrer"
-                  target="_blank"
-                  class="cta-btn text-color-main"
-                  href="#!"
+
                 >
-                  Source Code
+
                 </a>
               </div>
             </div>
@@ -151,7 +159,7 @@ <h3 class="project-wrapper__text-title">Project Title 0</h3>
                     <img
                       alt="Project Image"
                       class="img-fluid"
-                      src="assets/project.jpg"
+                      src="assets/Screenshot 2024-01-04 at 4.17.23 PM.png"
                     />
                   </div>
                 </a>
@@ -164,29 +172,19 @@ <h3 class="project-wrapper__text-title">Project Title 0</h3>
           <div class="row">
             <div class="col-lg-4 col-sm-12">
               <div class="project-wrapper__text load-hidden">
-                <h3 class="project-wrapper__text-title">Project Title 1</h3>
+                <h3 class="project-wrapper__text-title">Youtube Channel Management</h3>
                 <div>
                   <p class="mb-4">
-                    Demonstrate in this description the skills of a programmer: such as having commitment, 
-                    having perseverance and accepting alternative solutions. Remember that being a portfolio you are not selling the project, 
-                    you are selling yourself, it reflects the resources used: Frameworks, libraries, platforms, etc.
+                    Managed and scaled this Youtube channel to >150,000 views and 5000 subscribers by building a team and outsourcing the production.
                   </p>
                 </div>
                 <a
-                  rel="noreferrer"
-                  target="_blank"
-                  class="cta-btn cta-btn--hero"
-                  href="#!"
+
                 >
-                  See Live
+
                 </a>
                 <a
-                  rel="noreferrer"
-                  target="_blank"
-                  class="cta-btn text-color-main"
-                  href="#!"
-                >
-                  Source Code
+
                 </a>
               </div>
             </div>
@@ -203,7 +201,7 @@ <h3 class="project-wrapper__text-title">Project Title 1</h3>
                     <img
                       alt="Project Image"
                       class="img-fluid"
-                      src="assets/project.jpg"
+                      src="assets/Screenshot 2024-02-09 at 12.06.40 AM.png"
                     />
                   </div>
                 </a>
@@ -216,28 +214,14 @@ <h3 class="project-wrapper__text-title">Project Title 1</h3>
           <div class="row">
             <div class="col-lg-4 col-sm-12">
               <div class="project-wrapper__text load-hidden">
-                <h3 class="project-wrapper__text-title">Project Title 2</h3>
+                <h3 class="project-wrapper__text-title">Thumbnail Design for Gaming Youtubers</h3>
                 <div>
                   <p class="mb-4">
-                    If the project was collaborative, reflect it in this description, that will demonstrate communication and/or leadership skills. 
-                    Additionally, if you made use of the mastery of a second language, it will reflect on you professionalism.
+                    As a freelance gaming thumbnail designer, I cultivated success by managing over 10 recurring clients through a dual strategy. Leveraging Instagram's visual appeal and community engagement, I executed effective organic outreach, showcasing my work and connecting with gaming YouTubers. Simultaneously, Fiverr broadened my client base. Building strong relationships through regular communication and adaptability to emerging trends were key. This brief journey left a creative imprint on the gaming YouTube community, establishing me as a designer attuned to the industry's pulse.
                   </p>
                 </div>
                 <a
-                  rel="noreferrer"
-                  target="_blank"
-                  class="cta-btn cta-btn--hero"
-                  href="#!"
-                >
-                  See Live
-                </a>
-                <a
-                  rel="noreferrer"
-                  target="_blank"
-                  class="cta-btn text-color-main"
-                  href="#!"
-                >
-                  Source Code
+
                 </a>
               </div>
             </div>
@@ -254,31 +238,65 @@ <h3 class="project-wrapper__text-title">Project Title 2</h3>
                     <img
                       alt="Project Image"
                       class="img-fluid"
-                      src="assets/project.jpg"
-                    />
+                      src="assets/design-gaming-thumbnail-for-your-youtube-video.png"
+                      />
                   </div>
                 </a>
               </div>
             </div>
           </div>
+
           <!-- /END Project -->
+          <div class="row">
+            <div class="col-lg-4 col-sm-12">
+              <!-- Project 2 Text -->
+              <div class="project-wrapper__text load-hidden">
+                <!-- Project 2 Title and Description -->
+                <h3 class="project-wrapper__text-title">Extensive music production portfolio</h3>
+                <div>
+                  <p class="mb-4">
+                    I have produced hundreds of instrumentals and also produced over 15 published songs.
+                  </p>
+                </div>
+                <!-- Project 2 Buttons -->
+                <a rel="noreferrer" target="_blank" class="cta-btn cta-btn--hero" href="https://youtube.com/@merv797?si=G8A6OHzmHnMQNLSo!">See Live</a>
+
+              </div>
+            </div>
+            <!-- Project 2 Image -->
+            <div class="col-lg-8 col-sm-12">
+              <div class="project-wrapper__image load-hidden">
+                <a rel="noreferrer" href="#!" target="_blank">
+                  <div data-tilt data-tilt-max="4" data-tilt-glare="true" data-tilt-max-glare="0.5" class="thumbnail rounded js-tilt">
+                    <img alt="Project Image 2" class="img-fluid" src="assets/Screenshot 2024-02-09 at 1.06.11 AM.png" />
+                  </div>
+                </a>
+              </div>
+            </div>
+          </div>
+  <!-- /END Project 2 -->
+  ...
+</section>
         </div>
       </div>
     </section>
+
+
+
     <!-- /END Projects Section -->
 
     <!-- **** Contact Section **** -->
     <section id="contact">
       <div class="container">
-        <h2 class="section-title">Contact</h2>
+        <h2 class="section-title">Let's get in touch!</h2>
         <div class="contact-wrapper load-hidden">
-          <p class="contact-wrapper__text">[Put your call to action here]</p>
+          <p class="contact-wrapper__text"></p>
           <a
             rel="noreferrer"
             target="_blank"
             class="cta-btn cta-btn--resume"
-            href="mailto:[email protected]"
-            >Call to Action</a
+            href=""
+            >[email protected] or 226-577-3186</a
           >
         </div>
       </div>
@@ -292,52 +310,30 @@ <h2 class="section-title">Contact</h2>
           <i class="fa fa-angle-up fa-2x" aria-hidden="true"></i>
         </a>
         <div class="social-links">
-          <a rel="noreferrer" href="#!" target="_blank">
-            <i class="fa fa-twitter fa-inverse"></i>
+          <a rel="noreferrer" href="https://www.instagram.com/_christianarmstrong/?hl=en!" target="_blank">
+            <i class="fa fa-instagram" aria-hidden="true"></i>
+
           </a>
-          <a rel="noreferrer" href="#!" target="_blank">
+          <a rel="noreferrer" href="https://www.linkedin.com/in/christian-a-636184133" target="_blank">
             <i class="fa fa-linkedin fa-inverse"></i>
           </a>
-          <a rel="noreferrer" href="#!" target="_blank">
-            <i class="fa fa-github fa-inverse"></i>
+          <a rel="noreferrer" href="https://youtube.com/@merv797?si=QV1WlCyB6BFMEO9y!" target="_blank">
+            <i class="fa fa-youtube-play" aria-hidden="true"></i>
+
           </a>
         </div>
 
         <hr />
 
         <!-- Notice: if you want to give me some credit, it will be huge for me! if not, put your data on it -->
         <p class="footer__text">
-          © 2021 - Template developed by
-          <a rel="noreferrer" href="https://github.com/cobiwave" target="_blank"
-            >Jacobo Martínez</a
+          © 2024 - Developed by Christian Armstrong
+          <a rel="noreferrer" href="https://www.linkedin.com/in/christian-a-636184133/" target="_blank"
+            >Christian Armstrong</a
           >
         </p>
 
-        <!-- TO DO: remove this entire paragraph once you finish your portfolio -->
-        <p class="mt-3 pt-3">
-          <a
-            rel="noreferrer"
-            class="github-button"
-            href="https://github.com/cobiwave/simplefolio/fork"
-            data-icon="octicon-repo-forked"
-            data-size="large"
-            data-show-count="true"
-            aria-label="Fork ntkme/github-buttons on GitHub"
-            >Fork</a
-          >
-          <a
-            rel="noreferrer" 
-            class="github-button"
-            href="https://github.com/cobiwave/simplefolio"
-            data-icon="octicon-star"
-            data-size="large"
-            data-show-count="true"
-            aria-label="Star cobiwave/simplefolio on GitHub"
-            >Star</a
-          >
-        </p>
-      </div>
-    </footer>
+
     <!-- /END Footer Section -->
 
     <script defer type="module" src="index.js"></script>

src/sass/abstracts/_variables.scss

@@ -1,15 +1,15 @@
 // COLORS
-$primary-color: #02aab0;
-$secondary-color: #00cdac;
+$primary-color: #42047e;
+$secondary-color: #07f49e;
 
-$white-color: #fff;
+$white-color: #F8F4E3;
 
-$dark-grey: #333333;
-$light-grey: #d2d2d2;
+$dark-grey: #42047e;
+$light-grey: #42047e;
 
-$dark-blue-text: #272341; // For Headings
+$dark-blue-text: #262626; // For Headings
 
 // FONT SIZE
-$default-font-size: 1.6rem;
-$big-font-size: 4rem;
+$default-font-size: 1.9rem;
+$big-font-size: 5rem;
 $mid-font-size: 2.5rem;

src/sass/sections/_projects.scss

@@ -1,5 +1,5 @@
 #projects {
-  background-color: $white-color;
+  background-color: url("/src/assets/carlos-torres-MHNjEBeLTgw-unsplash.jpg");
   color: $dark-blue-text;
   margin-top: -10rem;
   padding-top: 15rem;