Fixes #1
Moved Other "Project Types" into the data file and changed the template to use that data. Shortens index.njk considerably.
This commit is contained in:
parent
fb846a65bb
commit
02cb7b6fe3
|
|
@ -1,121 +1,208 @@
|
||||||
{
|
{
|
||||||
"frontendMentor": {
|
"services": [
|
||||||
"serviceName": "Frontend Mentor",
|
{
|
||||||
"svgSource": "/svgs/frontendmentor.svg",
|
"name": "Frontend Mentor",
|
||||||
"svgAltText": "Frontend Mentor Logo",
|
"svgSource": "/svgs/frontendmentor.svg",
|
||||||
"description": "Collection of challenges I completed for Frontend Mentor",
|
"svgAltText": "Frontend Mentor Logo",
|
||||||
"difficulty": [
|
"description": "Collection of challenges I completed for Frontend Mentor",
|
||||||
{
|
"cssClass": "",
|
||||||
"title": "Newbie",
|
"difficulty": [
|
||||||
"challenges": [
|
{
|
||||||
{
|
"title": "Newbie",
|
||||||
"title": "Order Summary Card Component",
|
"cssClass": "frontEndMentorChallenges",
|
||||||
"url": "/FrontendMentor/newbie/order-summary-component/",
|
"challenges": [
|
||||||
"description": "",
|
{
|
||||||
"techUsed": [
|
"title": "Order Summary Card Component",
|
||||||
"html5",
|
"url": "/FrontendMentor/newbie/order-summary-component/",
|
||||||
"css3"
|
"description": "",
|
||||||
],
|
"techUsed": [
|
||||||
"screenshotURL": "/screenshots/fem-newbie-order-summary-component.png",
|
"html5",
|
||||||
"screenshotAltText": "Order Summary Component Challenge from FrontendMentor"
|
"css3"
|
||||||
},
|
],
|
||||||
{
|
"screenshotURL": "/screenshots/fem-newbie-order-summary-component.png",
|
||||||
"title": "Profile Card Component",
|
"screenshotAltText": "Order Summary Component Challenge from FrontendMentor"
|
||||||
"url": "/FrontendMentor/newbie/profile-card-component/",
|
},
|
||||||
"description": "",
|
{
|
||||||
"techUsed": [
|
"title": "Profile Card Component",
|
||||||
"html5",
|
"url": "/FrontendMentor/newbie/profile-card-component/",
|
||||||
"css3"
|
"description": "",
|
||||||
],
|
"techUsed": [
|
||||||
"screenshotURL": "/screenshots/fem-newbie-profile-card-component.jpeg",
|
"html5",
|
||||||
"screenshotAltText": "Profile Card Component Challenge from FrontendMentor"
|
"css3"
|
||||||
},
|
],
|
||||||
{
|
"screenshotURL": "/screenshots/fem-newbie-profile-card-component.jpeg",
|
||||||
"title": "Stats Preview Card Component",
|
"screenshotAltText": "Profile Card Component Challenge from FrontendMentor"
|
||||||
"url": "/FrontendMentor/newbie/stats-preview-card-component/",
|
},
|
||||||
"description": "",
|
{
|
||||||
"techUsed": [
|
"title": "Stats Preview Card Component",
|
||||||
"html5",
|
"url": "/FrontendMentor/newbie/stats-preview-card-component/",
|
||||||
"css3"
|
"description": "",
|
||||||
],
|
"techUsed": [
|
||||||
"screenshotURL": "/screenshots/fem-newbie-stats-preview-card-component.jpeg",
|
"html5",
|
||||||
"screenshotAltText": "Stats Preview Card Component Challenge from FrontendMentor"
|
"css3"
|
||||||
},
|
],
|
||||||
{
|
"screenshotURL": "/screenshots/fem-newbie-stats-preview-card-component.jpeg",
|
||||||
"title": "Article Preview Component",
|
"screenshotAltText": "Stats Preview Card Component Challenge from FrontendMentor"
|
||||||
"url": "/FrontendMentor/newbie/article-preview-component/",
|
},
|
||||||
"description": "",
|
{
|
||||||
"techUsed": [
|
"title": "Article Preview Component",
|
||||||
"html5",
|
"url": "/FrontendMentor/newbie/article-preview-component/",
|
||||||
"css3"
|
"description": "",
|
||||||
],
|
"techUsed": [
|
||||||
"screenshotURL": "/screenshots/fem-newbie-article-preview-component.jpeg",
|
"html5",
|
||||||
"screenshotAltText": "Article Preview Component Challenge from FrontendMentor"
|
"css3"
|
||||||
},
|
],
|
||||||
{
|
"screenshotURL": "/screenshots/fem-newbie-article-preview-component.jpeg",
|
||||||
"title": "Four Card Feature Section",
|
"screenshotAltText": "Article Preview Component Challenge from FrontendMentor"
|
||||||
"url": "/FrontendMentor/newbie/four-card-feature-section/",
|
},
|
||||||
"description": "",
|
{
|
||||||
"techUsed": [
|
"title": "Four Card Feature Section",
|
||||||
"html5",
|
"url": "/FrontendMentor/newbie/four-card-feature-section/",
|
||||||
"css3"
|
"description": "",
|
||||||
],
|
"techUsed": [
|
||||||
"screenshotURL": "/screenshots/fem-newbie-four-card-feature-section.jpeg",
|
"html5",
|
||||||
"screenshotAltText": "Four Card Feature Section Challenge from FrontendMentor"
|
"css3"
|
||||||
},
|
],
|
||||||
{
|
"screenshotURL": "/screenshots/fem-newbie-four-card-feature-section.jpeg",
|
||||||
"title": "Single Price Grid Component",
|
"screenshotAltText": "Four Card Feature Section Challenge from FrontendMentor"
|
||||||
"url": "/FrontendMentor/newbie/single-price-grid-component-master/",
|
},
|
||||||
"description": "",
|
{
|
||||||
"techUsed": [
|
"title": "Single Price Grid Component",
|
||||||
"html5",
|
"url": "/FrontendMentor/newbie/single-price-grid-component-master/",
|
||||||
"css3"
|
"description": "",
|
||||||
],
|
"techUsed": [
|
||||||
"screenshotURL": "/screenshots/fem-newbie-single-price-grid-component.jpeg",
|
"html5",
|
||||||
"screenshotAltText": "Single Price Grid Component Challenge from FrontendMentor"
|
"css3"
|
||||||
},
|
],
|
||||||
{
|
"screenshotURL": "/screenshots/fem-newbie-single-price-grid-component.jpeg",
|
||||||
"title": "Ping Coming-Soon",
|
"screenshotAltText": "Single Price Grid Component Challenge from FrontendMentor"
|
||||||
"url": "/FrontendMentor/newbie/ping-coming-soon-page-master/",
|
},
|
||||||
"description": "",
|
{
|
||||||
"techUsed": [
|
"title": "Ping Coming-Soon",
|
||||||
"html5",
|
"url": "/FrontendMentor/newbie/ping-coming-soon-page-master/",
|
||||||
"css3",
|
"description": "",
|
||||||
"js"
|
"techUsed": [
|
||||||
],
|
"html5",
|
||||||
"screenshotURL": "/screenshots/fem-newbie-ping-coming-soon-page.jpeg",
|
"css3",
|
||||||
"screenshotAltText": "Ping Coming-Soon Challenge from FrontendMentor"
|
"js"
|
||||||
},
|
],
|
||||||
{
|
"screenshotURL": "/screenshots/fem-newbie-ping-coming-soon-page.jpeg",
|
||||||
"title": "The Huddle Landing Page",
|
"screenshotAltText": "Ping Coming-Soon Challenge from FrontendMentor"
|
||||||
"url": "/FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/",
|
},
|
||||||
"description": "",
|
{
|
||||||
"techUsed": [
|
"title": "The Huddle Landing Page",
|
||||||
"html5",
|
"url": "/FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/",
|
||||||
"css3",
|
"description": "",
|
||||||
"js"
|
"techUsed": [
|
||||||
],
|
"html5",
|
||||||
"screenshotURL": "/screenshots/fem-newbie-huddle-landing-page-with-single-introductory-section.png",
|
"css3",
|
||||||
"screenshotAltText": "The Huddle Landing Page Challenge from FrontendMentor, with a single introductory section."
|
"js"
|
||||||
}
|
],
|
||||||
]
|
"screenshotURL": "/screenshots/fem-newbie-huddle-landing-page-with-single-introductory-section.png",
|
||||||
},
|
"screenshotAltText": "The Huddle Landing Page Challenge from FrontendMentor, with a single introductory section."
|
||||||
{
|
}
|
||||||
"title": "Junior",
|
]
|
||||||
"challenges": []
|
},
|
||||||
},
|
{
|
||||||
{
|
"title": "Junior",
|
||||||
"title": "Intermediate",
|
"cssClass": "frontEndMentorChallenges",
|
||||||
"challenges": []
|
"challenges": []
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "Advanced",
|
"title": "Intermediate",
|
||||||
"challenges": []
|
"cssClass": "frontEndMentorChallenges",
|
||||||
},
|
"challenges": []
|
||||||
{
|
},
|
||||||
"title": "Guru",
|
{
|
||||||
"challenges": []
|
"title": "Advanced",
|
||||||
}
|
"cssClass": "frontEndMentorChallenges",
|
||||||
]
|
"challenges": []
|
||||||
}
|
},
|
||||||
|
{
|
||||||
|
"title": "Guru",
|
||||||
|
"cssClass": "frontEndMentorChallenges",
|
||||||
|
"challenges": []
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Freecodecamp",
|
||||||
|
"svgSource": "/svgs/freecodecamp.svg",
|
||||||
|
"svgAltText": "Freecodecamp Logo",
|
||||||
|
"description": "Collection of challenges I completed while doing Freecodecamp",
|
||||||
|
"cssClass": "",
|
||||||
|
"difficulty": [
|
||||||
|
{
|
||||||
|
"title": "Responsive Web Design Projects",
|
||||||
|
"description": "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.",
|
||||||
|
"cssClass": "responsiveProjects",
|
||||||
|
"challenges": [
|
||||||
|
{
|
||||||
|
"title": "Project 1 - Tribute Page",
|
||||||
|
"url": "/freeCodeCamp/responsive-web-design-projects/Project1-TributePage/",
|
||||||
|
"description": "",
|
||||||
|
"techUsed": [
|
||||||
|
"html5",
|
||||||
|
"css3"
|
||||||
|
],
|
||||||
|
"screenshotURL": "/screenshots/fcc-web-Project1-TributePage.jpeg",
|
||||||
|
"screenshotAltText": "Project 1 - Tribute Page"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Project 2 - Build A Survey Form",
|
||||||
|
"url": "/freeCodeCamp/responsive-web-design-projects/Project2-BuildaSurveyForm/",
|
||||||
|
"description": "",
|
||||||
|
"techUsed": [
|
||||||
|
"html5",
|
||||||
|
"css3"
|
||||||
|
],
|
||||||
|
"screenshotURL": "/screenshots/fcc-web-Project2-BuildaSurveyForm.jpeg",
|
||||||
|
"screenshotAltText": "Project 2 - Build A Survey Form"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Project 3 - Product Landing Page",
|
||||||
|
"url": "/freeCodeCamp/responsive-web-design-projects/Project3-ProductLandingPage/",
|
||||||
|
"description": "",
|
||||||
|
"techUsed": [
|
||||||
|
"html5",
|
||||||
|
"css3"
|
||||||
|
],
|
||||||
|
"screenshotURL": "/screenshots/fcc-web-Project3-ProductLandingPage.jpeg",
|
||||||
|
"screenshotAltText": "Project 3 - Product Landing Page"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "The Complete 2022 Web Development Bootcamp",
|
||||||
|
"svgSource": "/svgs/udemy.svg",
|
||||||
|
"svgAltText": "Udemy Logo",
|
||||||
|
"description": "Coming Soon™",
|
||||||
|
"cssClass": "",
|
||||||
|
"difficulty": [
|
||||||
|
{
|
||||||
|
"title": "",
|
||||||
|
"description": "",
|
||||||
|
"cssClass": "",
|
||||||
|
"challenges": []
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "JavaScript Projects",
|
||||||
|
"svgSource": "/svgs/javascript.svg",
|
||||||
|
"svgAltText": "JavaScript",
|
||||||
|
"description": "Various JavaScript projects I've completed",
|
||||||
|
"cssClass": "",
|
||||||
|
"difficulty": [
|
||||||
|
{
|
||||||
|
"title": "",
|
||||||
|
"description": "",
|
||||||
|
"cssClass": "",
|
||||||
|
"challenges": []
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
}
|
}
|
||||||
|
|
@ -87,6 +87,7 @@ body {
|
||||||
.responsiveProjects > h3 {
|
.responsiveProjects > h3 {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 1.3rem;
|
font-size: 1.3rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* .freecodeCampProjects {} */
|
/* .freecodeCampProjects {} */
|
||||||
|
|
|
||||||
157
src/index.njk
157
src/index.njk
|
|
@ -22,137 +22,44 @@ cssReset: true
|
||||||
<p>Robert McGovern</p>
|
<p>Robert McGovern</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="projectsDiv">
|
{% for service in webprojects.services %}
|
||||||
<div class="alignedHeader">
|
<div class="projectsDiv {{service.cssClass}}">
|
||||||
<h2 class="projectsSection__title">{{webprojects.frontendMentor.serviceName}}</h2>
|
<div class="alignedHeader">
|
||||||
<img src="{{webprojects.frontendMentor.svgSource}}" alt="{{webprojects.frontendMentor.svgAltText}}"/>
|
<h2 class="projectsSection__title">{{service.name}}</h2>
|
||||||
</div>
|
{% if service.svgSource%}
|
||||||
<p>{{webprojects.frontendMentor.description}}</p>
|
<img src="{{service.svgSource}}" alt="{{service.svgAltText}}"/>
|
||||||
|
{% endif %}
|
||||||
{% for difficultyLevel in webprojects.frontendMentor.difficulty %}
|
|
||||||
{% if difficultyLevel.challenges | length %}
|
|
||||||
<div class="frontEndMentorChallenges">
|
|
||||||
<h3>{{difficultyLevel.title}} Challenges</h3>
|
|
||||||
|
|
||||||
<div class="projects-grid">
|
|
||||||
|
|
||||||
{% for challenge in difficultyLevel.challenges %}
|
|
||||||
|
|
||||||
{% set projectContent = challenge %}
|
|
||||||
{% include "components/project.njk" %}
|
|
||||||
{% endfor %}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{% endif %}
|
|
||||||
{% endfor %}
|
|
||||||
</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>
|
||||||
|
{% if service.description%}
|
||||||
|
<p>{{service.description}}</p>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{% for difficultyLevel in service.difficulty %}
|
||||||
|
{% if difficultyLevel.challenges | length %}
|
||||||
|
<div class="{{difficultyLevel.cssClass}}">
|
||||||
|
{% if difficultyLevel.title%}
|
||||||
|
<h3>{{difficultyLevel.title}} Challenges</h3>
|
||||||
|
{% endif %}
|
||||||
|
{% if difficultyLevel.description%}
|
||||||
|
<p>{{difficultyLevel.description}}</p>
|
||||||
|
{% endif %}
|
||||||
|
<div class="projects-grid">
|
||||||
|
{% for challenge in difficultyLevel.challenges %}
|
||||||
|
{% set projectContent = challenge %}
|
||||||
|
{% include "components/project.njk" %}
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
{% endfor %}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
{% endfor %}
|
||||||
|
|
||||||
<div class="projectsDiv">
|
<div class="projectsDiv">
|
||||||
|
|
||||||
<div class="alignedHeader">
|
<div class="alignedHeader">
|
||||||
<h2 class="projectsSection__title">
|
<h2 class="projectsSection__title">Playground</h2>
|
||||||
The Complete 2022 Web Development Bootcamp
|
<img style="width: 10%;" src="/svgs/purple_fedora.svg" alt="A Purple Fedora"/>
|
||||||
</h2>
|
|
||||||
<img src="/svgs/udemy.svg" alt="The Complete 2022 Web Development Bootcamp Udemy Course"/>
|
|
||||||
</div>
|
</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>
|
<p>
|
||||||
Intended for just little snippets of code that look useful
|
Intended for just little snippets of code that look useful
|
||||||
</p>
|
</p>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue