merged old main, rearranged files

.eleventy.js

@@ -4,6 +4,7 @@ module.exports = function (eleventyConfig) {
     eleventyConfig.addPassthroughCopy("./src/images");
     eleventyConfig.addPassthroughCopy("./src/svgs");
     eleventyConfig.addPassthroughCopy("./src/js");
+    eleventyConfig.addPassthroughCopy("./src/screenshots");
     //eleventyConfig.addPassthroughCopy({
     //    "./src/assets/images": "img",
     //});

css/style.css

@@ -1,229 +0,0 @@
-@import url("https://fonts.googleapis.com/css2?family=Black+Ops+One&family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap");
-
-/* 
-* Hi, thank you for checking out my CSS. Layout is currently Rev 2.
-* Plan is to do more interesting ones as I feel more comfortable doing things.
-*
-* For instance was thinking of swapping to a 3 column affair, with the title running
-* vertically in the first column. Second column is the projects, third the blurb
-*
-* I'd like to add some animations and transitions, and a light and dark theme.
-*/
-
-:root {
-    font-size: 1.25rem;
-    --marginTop: 0.5rem;
-
-    --pinky-color: rgba(216, 81, 201, 0.632);
-    --lightcoral-color: lightcoral;
-    --projects-border-color: green;
-}
-
-* {
-    margin: 0;
-}
-
-body {
-    /* background-color: whitesmoke; */
-    background-color: #f2f2f2;
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23ac2e2e' fill-opacity='0.24'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
-}
-
-.header,
-.blurb,
-.projectsDiv {
-    background-color: rgba(0, 0, 0, 0.1);
-    border: 5px solid;
-    margin: 0 auto;
-    width: 90%;
-    max-width: 700px;
-    box-sizing: border-box;
-    border-radius: 10px;
-}
-
-.blurb,
-.projectsDiv {
-    padding: 10px 20px;
-    margin-top: 2rem;
-    font-family: "Source Sans Pro", sans-serif;
-}
-
-.header {
-    text-align: center;
-    padding-top: 10px;
-    padding-bottom: 10px;
-    border-color: var(--lightcoral-color);
-}
-
-.header > h1 {
-    font-family: "Black Ops One", cursive;
-    /* scale the font from size used on mobile to "desktop" */
-    font-size: min(max(2.5rem, 8vw), 3rem);
-}
-
-.blurb {
-    border-color: var(--pinky-color);
-}
-
-.projectsDiv {
-    border-color: rgba(0, 0, 0, 0.7);
-}
-
-.frontEndMentorChallenges,
-.freecodeCampProjects,
-.completeWebDev2020Projects,
-.vanillaJSProjects {
-    margin-top: var(--marginTop);
-}
-
-.projectsSection__title {
-    font-weight: 600;
-    font-size: 1.8rem;
-}
-
-/* .frontEndMentorChallenges {} */
-
-.frontEndMentorChallenges .newbieChallenges {
-    margin-left: 1rem;
-}
-
-.newbieChallenges > h3,
-.responsiveProjects > h3 {
-    font-weight: 600;
-    font-size: 1.3rem;
-}
-
-/* .freecodeCampProjects {} */
-/* .completeWebDev2020Projects {} */
-/* .vanillaJSProjects {} */
-
-footer {
-    margin-top: 3rem;
-    text-align: center;
-    font-size: 0.9rem;
-    margin-left: auto;
-    margin-right: auto;
-    width: 85%;
-}
-
-footer * {
-    margin-top: 1rem;
-}
-
-footer > a {
-    display: block;
-}
-
-.alignedHeader {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: 1rem;
-}
-
-.alignedHeader img {
-    /* /* width: 100%;  */
-    height: 100%;
-
-    /* margin-left: auto; */
-}
-
-.stacked {
-    display: grid;
-}
-
-.stacked > * {
-    grid-column: 1/2;
-    grid-row: 1/2;
-}
-
-.card__content {
-    z-index: 10;
-    background: rgba(255, 255, 255, 0.9);
-    backdrop-filter: blur(100px);
-    -webkit-backdrop-filter: blur(100px);
-    align-self: end;
-    margin: 0.5rem; /*.5rem 2rem;*/
-    padding: 0.5rem;
-
-    box-shadow: 0 0.25rem 1rem rgba(0 0 0 / 0.1);
-    border: gray 2px dashed;
-    border-radius: 5px;
-}
-
-.projects-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
-    gap: 0.25rem;
-    margin-top: 0.5rem;
-}
-
-.projectsDiv > * {
-    margin-bottom: 1rem;
-}
-
-.project-card {
-    border: 3px solid var(--projects-border-color);
-    border-radius: 10px;
-    aspect-ratio: 1 / 1.4;
-    overflow: hidden;
-}
-
-.card__img {
-    width: 100%;
-    aspect-ratio: 1 / 1.25;
-    object-fit: cover;
-}
-
-.card__techUsed {
-    list-style: none;
-    display: flex;
-    /* align-content: space-evenly; */
-    justify-content: space-evenly;
-    align-items: center;
-
-    /* font-size: 0.625rem; */
-}
-
-/* .card__techUsed > li {
-    margin: 0;
-} */
-
-.card__techUsed img {
-    margin-top: 0.25rem;
-    width: 100%;
-    height: 100%;
-}
-
-.card__title {
-    font-size: 0.75rem;
-    font-weight: 600;
-    line-height: 1.1;
-    color: darkred;
-    text-align: center;
-}
-
-.card__description {
-    font-size: 0.625rem;
-    line-height: 1.2;
-}
-
-@media (min-width: 38em) {
-    .card__img {
-        aspect-ratio: 1 / 1;
-    }
-
-    .project-card.featured {
-        grid-row: span 2;
-        grid-column: span 2;
-    }
-
-    .project-card.featured .card__img {
-        aspect-ratio: 1 / 1.33;
-    }
-
-    .project-card.featured .card__title {
-        font-size: 1.25rem;
-    }
-}

index.html

@@ -1,372 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Practice Projects</title>
-    <link rel="stylesheet" href="./FrontendMentor/reset.css" />
-    <link rel="stylesheet" href="./css/style.css" />
-</head>
-
-<body>
-    <header>
-        <!-- some logo here -->
-        <div class="header">
-            <h1 class="test">Practice Projects</h1>
-        </div>
-        <!-- consider a menu for jumping down page -->
-    </header>
-    <main>
-        <div class="blurb">
-            <p>
-                These are completed projects done to practice using HTML,
-                CSS & Javascript. They come from different services, and
-                most are freely available for anyone to practice with.
-            </p>
-            &nbsp;
-            <p>
-                I have put them all into a single GIT repository rather than
-                litter my github page with many different projects. This may
-                change in future depending on how many of these that I do.
-            </p>
-            &nbsp;
-            <p>Robert McGovern</p>
-        </div>
-
-        <div class="projectsDiv">
-            <div class="alignedHeader">
-                <h2 class="projectsSection__title">Frontend Mentor</h2>
-                <img src="./svgs/frontendmentor.svg" alt="Frontend Mentor" />
-            </div>
-            <p>Collection of challenges I completed for Frontend Mentor</p>
-            <div class="newbieChallenges">
-                <h3>Newbie Challenges</h3>
-
-                <div class="projects-grid">
-
-                    <div class="project-card stacked featured">
-                        <a href="./FrontendMentor/newbie/order-summary-component/">
-                            <img class="card__img" src="./screenshots/fem-newbie-order-summary-component.png"
-                                alt="Order Summary Component Challenge from FrontendMentor" />
-                        </a>
-                        <div class="card__content">
-                            <h3 class="card__title">
-                                Order Summary Card Component
-                            </h3>
-                            <!-- <p class="card__description">
-                                Lorem ipsum dolor sit amet consectetur
-                                adipisicing elit.
-                            </p> -->
-                            <ul class="card__techUsed">
-                                <li>
-                                    <img src="./svgs/html5.svg" alt="HTML5" />
-                                </li>
-                                <li>
-                                    <img src="./svgs/css3.svg" alt="CSS3" />
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
-
-                    <div class="project-card stacked">
-                        <a href="./FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/">
-                            <img class="card__img"
-                                src="./screenshots/fem-newbie-huddle-landing-page-with-single-introductory-section.png"
-                                alt="The Huddle Landing Page Challenge from FrontendMentor, with a single introductory section." />
-                        </a>
-                        <div class="card__content">
-                            <h3 class="card__title">
-                                The Huddle Landing Page
-                            </h3>
-                            <!-- <p class="card__description">
-                                Lorem ipsum dolor sit amet consectetur
-                                adipisicing elit.
-                            </p> -->
-                            <ul class="card__techUsed">
-                                <li>
-                                    <img src="./svgs/html5.svg" alt="HTML5" />
-                                </li>
-                                <li>
-                                    <img src="./svgs/css3.svg" alt="CSS3" />
-                                </li>
-                                <li>
-                                    <img src="./svgs/javascript.svg" alt="JavaScript" />
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
-
-                    <div class="project-card stacked">
-                        <a href="./FrontendMentor/newbie/ping-coming-soon-page-master/">
-                            <img class="card__img" src="./screenshots/fem-newbie-ping-coming-soon-page.jpeg"
-                                alt="Ping Coming-Soon Challenge from FrontendMentor" />
-                        </a>
-                        <div class="card__content">
-                            <h3 class="card__title">Ping Coming-Soon</h3>
-                            <!-- <p class="card__description">
-                                Lorem ipsum dolor sit amet consectetur
-                                adipisicing elit.
-                            </p> -->
-                            <ul class="card__techUsed">
-                                <li>
-                                    <img src="./svgs/html5.svg" alt="HTML5" />
-                                </li>
-                                <li>
-                                    <img src="./svgs/css3.svg" alt="CSS3" />
-                                </li>
-                                <li>
-                                    <img src="./svgs/javascript.svg" alt="JavaScript" />
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
-
-                    <div class="project-card stacked">
-                        <a href="./FrontendMentor/newbie/single-price-grid-component-master/">
-                            <img class="card__img" src="./screenshots/fem-newbie-single-price-grid-component.jpeg"
-                                alt="Single Price Grid Component Challenge from FrontendMentor" />
-                        </a>
-                        <div class="card__content">
-                            <h3 class="card__title">
-                                Single Price Grid Component
-                            </h3>
-                            <!-- <p class="card__description">
-                                Lorem ipsum dolor sit amet consectetur
-                                adipisicing elit.
-                            </p> -->
-                            <ul class="card__techUsed">
-                                <li>
-                                    <img src="./svgs/html5.svg" alt="HTML5" />
-                                </li>
-                                <li>
-                                    <img src="./svgs/css3.svg" alt="CSS3" />
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
-
-                    <div class="project-card stacked">
-                        <a href="./FrontendMentor/newbie/four-card-feature-section/">
-                            <img class="card__img" src="./screenshots/fem-newbie-four-card-feature-section.jpeg"
-                                alt="Four Card Feature Section Challenge from FrontendMentor" />
-                        </a>
-                        <div class="card__content">
-                            <h3 class="card__title">
-                                Four Card Feature Section
-                            </h3>
-                            <!-- <p class="card__description">
-                                Lorem ipsum dolor sit amet consectetur
-                                adipisicing elit.
-                            </p> -->
-                            <ul class="card__techUsed">
-                                <li>
-                                    <img src="./svgs/html5.svg" alt="HTML5" />
-                                </li>
-                                <li>
-                                    <img src="./svgs/css3.svg" alt="CSS3" />
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
-
-                    <div class="project-card stacked">
-                        <a href="./FrontendMentor/newbie/article-preview-component/">
-                            <img class="card__img" src="./screenshots/fem-newbie-article-preview-component.jpeg"
-                                alt="Article Preview Component Challenge from FrontendMentor" />
-                        </a>
-                        <div class="card__content">
-                            <h3 class="card__title">
-                                Article Preview Component
-                            </h3>
-                            <!-- <p class="card__description">
-                                Lorem ipsum dolor sit amet consectetur
-                                adipisicing elit.
-                            </p> -->
-                            <ul class="card__techUsed">
-                                <li>
-                                    <img src="./svgs/html5.svg" alt="HTML5" />
-                                </li>
-                                <li>
-                                    <img src="./svgs/css3.svg" alt="CSS3" />
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
-
-                    <div class="project-card stacked">
-                        <a href="./FrontendMentor/newbie/stats-preview-card-component/">
-                            <img class="card__img" src="./screenshots/fem-newbie-stats-preview-card-component.jpeg"
-                                alt="Stats Preview Card Component Challenge from FrontendMentor" />
-                        </a>
-                        <div class="card__content">
-                            <h3 class="card__title">
-                                Stats Preview Card Component
-                            </h3>
-                            <!-- <p class="card__description">
-                                Lorem ipsum dolor sit amet consectetur
-                                adipisicing elit.
-                            </p> -->
-                            <ul class="card__techUsed">
-                                <li>
-                                    <img src="./svgs/html5.svg" alt="HTML5" />
-                                </li>
-                                <li>
-                                    <img src="./svgs/css3.svg" alt="CSS3" />
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
-
-                    <div class="project-card stacked">
-                        <a href="./FrontendMentor/newbie/profile-card-component/">
-                            <img class="card__img" src="./screenshots/fem-newbie-profile-card-component.jpeg"
-                                alt="Profile Card Component Challenge from FrontendMentor" />
-                        </a>
-                        <div class="card__content">
-                            <h3 class="card__title">
-                                Profile Card Component
-                            </h3>
-                            <!-- <p class="card__description">
-                                Lorem ipsum dolor sit amet consectetur
-                                adipisicing elit.
-                            </p> -->
-                            <ul class="card__techUsed">
-                                <li>
-                                    <img src="./svgs/html5.svg" alt="HTML5" />
-                                </li>
-                                <li>
-                                    <img src="./svgs/css3.svg" alt="CSS3" />
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
-
-                </div>
-            </div>
-        </div>
-
-        <div class="projectsDiv">
-            <div class="alignedHeader">
-                <h2 class="projectsSection__title">Freecodecamp</h2>
-                <img src="./svgs/freecodecamp.svg" alt="Freecodecamp" />
-            </div>
-            <div class="responsiveProjects">
-                <h3>Responsive Web Design Projects</h3>
-                <p>
-                    Note: As of 11 Oct 2020, these require a partial rework
-                    to look good on mobile. 1-3 where written much earlier
-                    in my learning, so while they fufill all the
-                    requirements, they don't look great on mobile.
-                </p>
-                <div class="projects-grid">
-                    <div class="project-card stacked">
-                        <a href="../freeCodeCamp/responsive-web-design-projects/Project1-TributePage/">
-                            <img class="card__img" src="./screenshots/fcc-web-Project1-TributePage.jpeg"
-                                alt="Project 1 - Tribute Page" />
-                        </a>
-                        <div class="card__content">
-                            <h3 class="card__title">
-                                Project 1 - Tribute Page
-                            </h3>
-                            <!-- <p class="card__description">
-                                Lorem ipsum dolor sit amet consectetur
-                                adipisicing elit.
-                            </p> -->
-                            <ul class="card__techUsed">
-                                <li>
-                                    <img src="./svgs/html5.svg" alt="HTML5" />
-                                </li>
-                                <li>
-                                    <img src="./svgs/css3.svg" alt="CSS3" />
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
-                    <div class="project-card stacked">
-                        <a href="./freeCodeCamp/responsive-web-design-projects/Project2-BuildaSurveyForm/">
-                            <img class="card__img" src="./screenshots/fcc-web-Project2-BuildaSurveyForm.jpeg"
-                                alt="Project 2 - Build A Survey Form" />
-                        </a>
-                        <div class="card__content">
-                            <h3 class="card__title">
-                                Project 2 - Build A Survey Form
-                            </h3>
-                            <!-- <p class="card__description">
-                                Lorem ipsum dolor sit amet consectetur
-                                adipisicing elit.
-                            </p> -->
-                            <ul class="card__techUsed">
-                                <li>
-                                    <img src="./svgs/html5.svg" alt="HTML5" />
-                                </li>
-                                <li>
-                                    <img src="./svgs/css3.svg" alt="CSS3" />
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
-                    <div class="project-card stacked">
-                        <a href="./freeCodeCamp/responsive-web-design-projects/Project3-ProductLandingPage/">
-                            <img class="card__img" src="./screenshots/fcc-web-Project3-ProductLandingPage.jpeg"
-                                alt="Project 3 - Product Landing Page" />
-                        </a>
-                        <div class="card__content">
-                            <h3 class="card__title">
-                                Project 3 - Product Landing Page
-                            </h3>
-                            <!-- <p class="card__description">
-                                Lorem ipsum dolor sit amet consectetur
-                                adipisicing elit.
-                            </p> -->
-                            <ul class="card__techUsed">
-                                <li>
-                                    <img src="./svgs/html5.svg" alt="HTML5" />
-                                </li>
-                                <li>
-                                    <img src="./svgs/css3.svg" alt="CSS3" />
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <div class="projectsDiv">
-
-            <div class="alignedHeader">
-                <h2 class="projectsSection__title">
-                    The Complete 2022 Web Development Bootcamp
-                </h2>
-                <img src="./svgs/udemy.svg" alt="The Complete 2022 Web Development Bootcamp Udemy Course" />
-            </div>
-            <p>coming soon</p>
-        </div>
-
-        <div class="projectsDiv">
-            <h2 class="projectsSection__title">Vanilla JS Projects</h2>
-            <p>coming soon</p>
-        </div>
-
-        <div class="projectsDiv">
-            <h2 class="projectsSection__title">Playground</h2>
-            <p>
-                Intended for just little snippets of code that look useful
-            </p>
-            <a href="./playground.html">The Playground</a>
-        </div>
-    </main>
-    <footer>
-        <!-- some blurb here -->
-        <p>
-            All projects are the work of Robert McGovern, 2020-2022. <br />
-            <a href="emailto:work@tarasis.net">Email</a>,
-            <a href="https://tarasis.net">Website/Blog</a>
-        </p>
-        <a href="http://www.heropatterns.com/">Background SVG provided by Steve Schoger @ Hero Patterns</a>
-    </footer>
-    <script src="./js/script.js"></script>
-</body>
-
-</html>

js/script.js

@@ -1,3 +0,0 @@
-// use strict
-
-// An empty JS for the moment :) Shh