info edits, removed google analytics, added contact button and modal

complxalgorithm · Nov 3, 2023 · a1a9cf8 · a1a9cf8
1 parent bb6d95c
commit a1a9cf8
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 25 deletions.
diff --git a/assets/js/contact.js b/assets/js/contact.js
@@ -0,0 +1,33 @@
+// File: contact.js
+// Author: Stephen C Sanders <https://stephensanders.me>
+// License: MIT
+
+// Target Contact button
+var contactButton = document.getElementById("contact-button");
+
+// Run when Contact button is clicked
+contactButton.addEventListener('click', () => {
+	// Set email address
+	var asdfg = "scsandman6496"
+	var hjklp = "gmail.com"
+	var d = asdfg + "@" + hjklp
+
+	// Needed to open default email program
+	var m = "mail" + "to" + ":"
+
+	// Set message
+	var message = "If you have any questions or professional inquiries, " 
+	message += "feel free to email me at " + "<a href=\"" + m + d + "\" style=\"color:#981A61 !important;\">" + d + "</a>.\n"
+	message += "I am not necessarily looking for work right now, but am open to working on projects for small businesses.\n"
+	message += "In any case, I will attempt to get back to you as soon as I can.\nThank you!"
+
+	// Create new Popup and set relevant information
+	const Contact = new Popup({
+    	id: "contact-popup",
+    	title: "Contact",
+    	content: message,
+	});
+
+	// Show the Contact pop-up
+	Contact.show();
+});
diff --git a/assets/js/script.js b/assets/js/script.js
@@ -1,4 +1,4 @@
-// File: scripts.js
+// File: script.js
 // Author: Stephen C Sanders <https://stephensanders.me>
 // License: MIT
 

diff --git a/index.html b/index.html
@@ -7,8 +7,8 @@
         <title>Stephen C. Sanders</title>
 
         <meta name="author" content="Stephen C. Sanders">
-        <meta name="description" content="Stephen C. Sanders is a Web Developer, Web Designer, and aspiring GIS Analyst based in Buffalo, New York who specializes in demographics data, cartography, WordPress, HTML/CSS/SCSS, and website administration.">
-        <meta name="keywords" content="GIS Analyst, ArcGIS Pro, QGIS, Python, web developer, web development, web design, Rochester, Buffalo, New York, HTML, CSS, SCSS, WordPress development, website administration">
+        <meta name="description" content="Stephen C. Sanders is a Data and GIS Analyst based in Buffalo, New York who specializes in demographics data, crime data, market data, and cartography.">
+        <meta name="keywords" content="GIS, GIS Analyst, data analyst, demographics, market research, ArcGIS Pro, QGIS, Python, web developer, web development, web design, Rochester, Buffalo, Brockport, New York, HTML, CSS, SCSS, WordPress development, website administration">
 
         <link rel="icon" type="image/jpg" href="assets/img/mi.jpg" />
 
@@ -21,17 +21,8 @@
         <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
         <link href="styles/assets/ie10-viewport-bug-workaround.css" rel="stylesheet">
 
-        <!-- Google Analytics -->
-        <script>
-        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-        })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
-
-        ga('create', 'UA-77261307-2', 'auto');
-        ga('send', 'pageview');
-
-        </script>
+        <!-- popup-js -->
+        <script src="https://cdn.jsdelivr.net/npm/@simondmc/[email protected]/popup.min.js"></script>
     </head>
 
     <body id="body">
@@ -67,6 +58,10 @@ <h5>BUFFALO, NEW YORK</h5>
                                 <a href="https://www.facebook.com/Scsandman4/" target="_blank" class="btn btn-social-icon btn-lg btn-facebook"><i class="fab fa-facebook"><span class="seo-icon">F</span></i></a>
                             </div>
                         </div>
+
+                        <div class="contact-row">
+                            <button class="btn btn-lg" id="contact-button">Contact</button>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -86,9 +81,9 @@ <h2 class="sec-header about-header">About Me</h2>
                     <div class="col-md-6">
                         <div class="about-text">
                             <p>I'm Stephen C. Sanders, and I am a data analyst. I completed an A.S. in Geography and Certificate in Geospatial Information Science and Technology at <a href="https://www.monroecc.edu" target="_blank" class="link">Monroe Community College</a>. Previously, I graduated from <a href="https://brockport.edu/" target="_blank" class="link">SUNY Brockport</a>, where I majored in Philosophy and minored in Anthropology.</p>
-                            <p>I have 1.5 years of experience using geographic information systems, especially ArcGIS Pro and QGIS. I have programmed in Python extensively in my work, and can use the ArcPy, Pandas, GeoPandas, and Matplotlib libraries. I also have four years of experience as a web developer, mainly using WordPress, HTML5/CSS3 (SCSS, Bootstrap), JavaScript, and Git. I have also worked as a website administrator for multiple client websites.</p>
+                            <p>I have 1.5 years of experience using geographic information systems, especially ArcGIS Pro and QGIS. I have programmed in Python extensively in my work, and can use the ArcPy, Pandas, GeoPandas, and Plotly libraries. In the past, I worked as a web developer for four years, mainly using WordPress, HTML5/CSS3 (SCSS, Bootstrap), JavaScript, and Git. I also acted as a website administrator for multiple client websites.</p>
                             <p>The main activity in which I partake outside of GIS is <a href="https://www.wikitree.com/genealogy/Sanders-Family-Tree-11855" target="_blank" class="link">genealogical research</a>. I have been researching my family tree for around five years. I enjoy research involving New York State, veterans of the American Civil War, <a href="https://en.wikipedia.org/wiki/Gottschee" target="_blank" class="link">Gottschee</a>, and Germany.</p>
-                            <p>I am also an amateur philosopher (I have to put my philosophy degree to use somehow). I've written some <a href="https://philpeople.org/profiles/stephen-c-sanders" target="_blank" class="link">neat stuff</a> related to culture, society, and philosophical topics such as epistemology.</p>
+                            <p>I am also an amateur philosopher (I have to put my philosophy degree to use somehow). I've written <a href="https://philpeople.org/profiles/stephen-c-sanders" target="_blank" class="link">some stuff</a> related to culture, society, and philosophical topics such as epistemology.</p>
                         </div>
                     </div>
                 </div>
@@ -370,7 +365,10 @@ <h5 class="proj-yrs">Jun 2017 - Sep 2017</h5>
         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
         <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
 
-        <!-- Custom JS - mainly animations -->
+        <!-- Animate main information -->
         <script src="assets/js/script.js"></script>
+
+        <!-- Contact Module -->
+        <script src="assets/js/contact.js"></script>
     </body>
 </html>
diff --git a/styles/main.css b/styles/main.css
diff --git a/styles/scss/main.scss b/styles/scss/main.scss
@@ -107,12 +107,19 @@ body {
 
             .main-info {
                 position: relative;
-                @include transform-y(55%, auto);
+                @include transform-y(40%, auto);
 
-                @media screen and (max-width: 440px) {
-                    top: 30% !important;
+                @media screen and (max-width: 375px) {
+                    transform: translateY(20%) !important;
+                }
+
+                @media screen and (min-width: 376px) and (max-width: 400px) {
                     transform: translateY(30%) !important;
                 }
+
+                @media screen and (min-width: 401px) and (max-width: 475px) {
+                    transform: translateY(40%) !important;
+                }
 
                 h1 {
                     font-size: 55px;
@@ -174,6 +181,20 @@ body {
                         }
                     }
                 }
+
+                .contact-row {
+                    padding: 15px 0;
+
+                    button {
+                        color: white;
+                        background-color: $secondary-color;
+                        font-family: $main-font;
+
+                        &:hover {
+                            background-color: $primary-color;
+                        }
+                    }
+                }
             }
         }
     }
@@ -313,15 +334,15 @@ body {
 }
 
 // MOBILE STYLES
-@media screen and (max-width: 379px) {
+@media screen and (max-width: 390px) {
     .main-info {
         h3 {
             font-size: 16px !important;
         }
     }
 }
 
-@media screen and (min-width: 380px) and (max-width: 569px) {
+@media screen and (min-width: 391px) and (max-width: 569px) {
     .main-info {
         h1 {
             font-size: 40px !important;    
@@ -359,8 +380,8 @@ body {
 
 @media screen and (min-width: 1500px) {  // styles for larger monitors
     .main-info {
-        top: 75% !important;
-        transform: translateY(75%) !important;
+        top: 65% !important;
+        transform: translateY(65%) !important;
 
         h1 {
             font-size: 75px;