Added Styling and about site

Code-JL · Jan 10, 2025 · 20e48b2 · 20e48b2
1 parent ec6f0b9
commit 20e48b2
Show file tree

Hide file tree

Showing 4 changed files with 148 additions and 0 deletions.
diff --git a/assets/about.css b/assets/about.css
@@ -0,0 +1,66 @@
+/* Section Styling */
+.story, .programming-journey, .education, .personal-growth, .philosophy {
+    width: 70%;
+    margin: 40px auto;
+    padding: 20px;
+}
+
+/* Typography */
+li, p {
+    font-size: 18px;
+    line-height: 1.6;
+    margin-bottom: 20px;
+}
+
+h1 {
+    font-size: 85px;
+}
+
+h2 {
+    font-size: 55px;
+    margin-bottom: 25px;
+}
+
+h3 {
+    font-size: 40px;
+}
+
+/* Contact Section Styling */
+section#contact p a img {
+    width: 50px;
+    height: 50px;
+    margin-right: 8px;
+    vertical-align: middle;
+}
+
+section#contact p a {
+    font-family: 'rampage-monoline', sans-serif;
+    font-size: 30px;
+    color: #e7df69;
+}
+
+section#contact p a:visited {
+    color: #dfa843;
+}
+
+/* Title Section */
+.title {
+    text-align: center;
+    margin-bottom: 50px;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .story, .programming-journey, .education, .personal-growth, .philosophy {
+        width: 90%;
+        margin: 20px auto;
+    }
+
+    h1 {
+        font-size: 60px;
+    }
+
+    h2 {
+        font-size: 40px;
+    }
+}
diff --git a/assets/about.html b/assets/about.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>About - Joseph Lavoie</title>
+    <link rel="stylesheet" href="load/universal.css">
+    <link rel="stylesheet" href="about.css">
+</head>
+<body>
+    <header></header>
+
+    <main>
+        <section class="title">
+            <h1 id="type">My Journey</h1>
+        </section>
+
+        <section class="story">
+            <h2>Early Beginnings</h2>
+            <p>My path to software development began with a nomadic childhood, moving between Fort McMurray, Edmonton, and the Dominican Republic. These transitions, while challenging, instilled in me a natural adaptability and an insatiable curiosity about the world around me.</p>
+
+            <p>In grade 8, while settling into yet another new environment, I discovered my passion for programming through video game development. What started as a hobby quickly evolved into a deep fascination with computational problem-solving.</p>
+        </section>
+
+        <section class="programming-journey">
+            <h2>Technical Evolution</h2>
+            <p>My programming journey began with C++, a choice that threw me into the deep end of software development by the use of a C++ For Dummies book and the Code::Blocks IDE. The complexity of the language taught me fundamental principles that would shape my approach to problem-solving. From there, my curiosity led me to explore Python's elegant simplicity and C#'s robust features.</p>
+
+            <p>During high school, I ventured into web development with HTML and CSS, building projects that could reach users directly through their browsers. This period marked my transition from creating programs for personal use to developing solutions for others.</p>
+        </section>
+
+        <section class="education">
+            <h2>Academic Growth</h2>
+            <p>At Cornell College, my passion for technology flourished. The unique one-course-at-a-time format allowed me to dive deep into each programming language and concept. I expanded my toolkit to include Java, React.js, and Scala, while also gaining exposure to binary-level programming.</p>
+
+            <p>Recently, I've begun exploring Android development with Kotlin, embracing the mobile development landscape and its unique challenges.</p>
+        </section>
+
+        <section class="personal-growth">
+            <h2>Beyond the Code</h2>
+            <p>My commitment to personal growth extends beyond programming. Through sports and weightlifting, I've learned the value of discipline and consistent effort. These physical pursuits have taught me that progress, whether in coding or fitness, comes through dedicated practice and perseverance.</p>
+
+            <p>The diverse environment at Cornell College has been transformative, helping me develop from an introverted programmer into a more well-rounded individual. Interacting with peers from various backgrounds has enhanced my communication skills and broadened my perspective on problem-solving.</p>
+        </section>
+
+        <section class="philosophy">
+            <h2>Looking Forward</h2>
+            <p>I view software development as more than just writing code. It's about creating solutions that make a difference, whether that's through a more efficient inventory system or an AI-powered web tool. Each project is an opportunity to learn and grow.</p>
+
+            <p>My diverse background has taught me that the best solutions often come from combining different perspectives and approaches. I bring this mindset to every project, always looking for innovative ways to solve complex problems.</p>
+        </section>
+
+        <section id="contact">
+            <h2>You know a bit about me now. Let's Connect</h2>
+            <p><a href="mailto:JosephL@tuta.com"><img src="../images/email.png" alt="Email Icon">JosephL@tuta.com</a></p>
+            <p><a href="https://github.com/Code-JL" target="_blank"><img src="../images/github.png" alt="GitHub Icon">Code-JL</a></p>
+            <p><a href="https://linkedin.com/in/joseph-lavoie-803470260/" target="_blank"><img src="../images/linkedin.png" alt="LinkedIn Icon">LinkedIn</a></p>
+        </section>
+    </main>
+
+    <footer>
+        <p>© 2025 Joseph Lavoie</p>
+    </footer>
+
+    <canvas id="bg1"></canvas>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.19.0/matter.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.19.0/plugins/matter-wrap.min.js"></script>
+    <script src="load/universal.js"></script>
+</body>
+</html>
diff --git a/assets/load/header.html b/assets/load/header.html
@@ -5,6 +5,11 @@
                 <img src="../../images/home.png" alt="Home Icon"> Home
             </a>
         </li>
+        <li>
+            <a href="about.html" aria-label="About">
+                <img src="../../images/about.png" alt="About Icon"> About
+            </a>
+        </li>
         <li>
             <a href="projects.html" aria-label="Projects">
                 <img src="../../images/projects.png" alt="Projects Icon"> Projects

diff --git a/assets/load/universal.css b/assets/load/universal.css
@@ -89,6 +89,12 @@ section {
 	border-radius: 10px;
 	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
 	color: #eef6fc;
+	border-left: 3px solid #e7df69;
+    transition: transform 0.3s ease;
+}
+
+section:hover {
+    transform: translateX(10px);
 }
 
 /* Section Sizing */