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": {
|
||||
"serviceName": "Frontend Mentor",
|
||||
"svgSource": "/svgs/frontendmentor.svg",
|
||||
"svgAltText": "Frontend Mentor Logo",
|
||||
"description": "Collection of challenges I completed for Frontend Mentor",
|
||||
"difficulty": [
|
||||
{
|
||||
"title": "Newbie",
|
||||
"challenges": [
|
||||
{
|
||||
"title": "Order Summary Card Component",
|
||||
"url": "/FrontendMentor/newbie/order-summary-component/",
|
||||
"description": "",
|
||||
"techUsed": [
|
||||
"html5",
|
||||
"css3"
|
||||
],
|
||||
"screenshotURL": "/screenshots/fem-newbie-order-summary-component.png",
|
||||
"screenshotAltText": "Order Summary Component Challenge from FrontendMentor"
|
||||
},
|
||||
{
|
||||
"title": "Profile Card Component",
|
||||
"url": "/FrontendMentor/newbie/profile-card-component/",
|
||||
"description": "",
|
||||
"techUsed": [
|
||||
"html5",
|
||||
"css3"
|
||||
],
|
||||
"screenshotURL": "/screenshots/fem-newbie-profile-card-component.jpeg",
|
||||
"screenshotAltText": "Profile Card Component Challenge from FrontendMentor"
|
||||
},
|
||||
{
|
||||
"title": "Stats Preview Card Component",
|
||||
"url": "/FrontendMentor/newbie/stats-preview-card-component/",
|
||||
"description": "",
|
||||
"techUsed": [
|
||||
"html5",
|
||||
"css3"
|
||||
],
|
||||
"screenshotURL": "/screenshots/fem-newbie-stats-preview-card-component.jpeg",
|
||||
"screenshotAltText": "Stats Preview Card Component Challenge from FrontendMentor"
|
||||
},
|
||||
{
|
||||
"title": "Article Preview Component",
|
||||
"url": "/FrontendMentor/newbie/article-preview-component/",
|
||||
"description": "",
|
||||
"techUsed": [
|
||||
"html5",
|
||||
"css3"
|
||||
],
|
||||
"screenshotURL": "/screenshots/fem-newbie-article-preview-component.jpeg",
|
||||
"screenshotAltText": "Article Preview Component Challenge from FrontendMentor"
|
||||
},
|
||||
{
|
||||
"title": "Four Card Feature Section",
|
||||
"url": "/FrontendMentor/newbie/four-card-feature-section/",
|
||||
"description": "",
|
||||
"techUsed": [
|
||||
"html5",
|
||||
"css3"
|
||||
],
|
||||
"screenshotURL": "/screenshots/fem-newbie-four-card-feature-section.jpeg",
|
||||
"screenshotAltText": "Four Card Feature Section Challenge from FrontendMentor"
|
||||
},
|
||||
{
|
||||
"title": "Single Price Grid Component",
|
||||
"url": "/FrontendMentor/newbie/single-price-grid-component-master/",
|
||||
"description": "",
|
||||
"techUsed": [
|
||||
"html5",
|
||||
"css3"
|
||||
],
|
||||
"screenshotURL": "/screenshots/fem-newbie-single-price-grid-component.jpeg",
|
||||
"screenshotAltText": "Single Price Grid Component Challenge from FrontendMentor"
|
||||
},
|
||||
{
|
||||
"title": "Ping Coming-Soon",
|
||||
"url": "/FrontendMentor/newbie/ping-coming-soon-page-master/",
|
||||
"description": "",
|
||||
"techUsed": [
|
||||
"html5",
|
||||
"css3",
|
||||
"js"
|
||||
],
|
||||
"screenshotURL": "/screenshots/fem-newbie-ping-coming-soon-page.jpeg",
|
||||
"screenshotAltText": "Ping Coming-Soon Challenge from FrontendMentor"
|
||||
},
|
||||
{
|
||||
"title": "The Huddle Landing Page",
|
||||
"url": "/FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/",
|
||||
"description": "",
|
||||
"techUsed": [
|
||||
"html5",
|
||||
"css3",
|
||||
"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": "Intermediate",
|
||||
"challenges": []
|
||||
},
|
||||
{
|
||||
"title": "Advanced",
|
||||
"challenges": []
|
||||
},
|
||||
{
|
||||
"title": "Guru",
|
||||
"challenges": []
|
||||
}
|
||||
]
|
||||
}
|
||||
"services": [
|
||||
{
|
||||
"name": "Frontend Mentor",
|
||||
"svgSource": "/svgs/frontendmentor.svg",
|
||||
"svgAltText": "Frontend Mentor Logo",
|
||||
"description": "Collection of challenges I completed for Frontend Mentor",
|
||||
"cssClass": "",
|
||||
"difficulty": [
|
||||
{
|
||||
"title": "Newbie",
|
||||
"cssClass": "frontEndMentorChallenges",
|
||||
"challenges": [
|
||||
{
|
||||
"title": "Order Summary Card Component",
|
||||
"url": "/FrontendMentor/newbie/order-summary-component/",
|
||||
"description": "",
|
||||
"techUsed": [
|
||||
"html5",
|
||||
"css3"
|
||||
],
|
||||
"screenshotURL": "/screenshots/fem-newbie-order-summary-component.png",
|
||||
"screenshotAltText": "Order Summary Component Challenge from FrontendMentor"
|
||||
},
|
||||
{
|
||||
"title": "Profile Card Component",
|
||||
"url": "/FrontendMentor/newbie/profile-card-component/",
|
||||
"description": "",
|
||||
"techUsed": [
|
||||
"html5",
|
||||
"css3"
|
||||
],
|
||||
"screenshotURL": "/screenshots/fem-newbie-profile-card-component.jpeg",
|
||||
"screenshotAltText": "Profile Card Component Challenge from FrontendMentor"
|
||||
},
|
||||
{
|
||||
"title": "Stats Preview Card Component",
|
||||
"url": "/FrontendMentor/newbie/stats-preview-card-component/",
|
||||
"description": "",
|
||||
"techUsed": [
|
||||
"html5",
|
||||
"css3"
|
||||
],
|
||||
"screenshotURL": "/screenshots/fem-newbie-stats-preview-card-component.jpeg",
|
||||
"screenshotAltText": "Stats Preview Card Component Challenge from FrontendMentor"
|
||||
},
|
||||
{
|
||||
"title": "Article Preview Component",
|
||||
"url": "/FrontendMentor/newbie/article-preview-component/",
|
||||
"description": "",
|
||||
"techUsed": [
|
||||
"html5",
|
||||
"css3"
|
||||
],
|
||||
"screenshotURL": "/screenshots/fem-newbie-article-preview-component.jpeg",
|
||||
"screenshotAltText": "Article Preview Component Challenge from FrontendMentor"
|
||||
},
|
||||
{
|
||||
"title": "Four Card Feature Section",
|
||||
"url": "/FrontendMentor/newbie/four-card-feature-section/",
|
||||
"description": "",
|
||||
"techUsed": [
|
||||
"html5",
|
||||
"css3"
|
||||
],
|
||||
"screenshotURL": "/screenshots/fem-newbie-four-card-feature-section.jpeg",
|
||||
"screenshotAltText": "Four Card Feature Section Challenge from FrontendMentor"
|
||||
},
|
||||
{
|
||||
"title": "Single Price Grid Component",
|
||||
"url": "/FrontendMentor/newbie/single-price-grid-component-master/",
|
||||
"description": "",
|
||||
"techUsed": [
|
||||
"html5",
|
||||
"css3"
|
||||
],
|
||||
"screenshotURL": "/screenshots/fem-newbie-single-price-grid-component.jpeg",
|
||||
"screenshotAltText": "Single Price Grid Component Challenge from FrontendMentor"
|
||||
},
|
||||
{
|
||||
"title": "Ping Coming-Soon",
|
||||
"url": "/FrontendMentor/newbie/ping-coming-soon-page-master/",
|
||||
"description": "",
|
||||
"techUsed": [
|
||||
"html5",
|
||||
"css3",
|
||||
"js"
|
||||
],
|
||||
"screenshotURL": "/screenshots/fem-newbie-ping-coming-soon-page.jpeg",
|
||||
"screenshotAltText": "Ping Coming-Soon Challenge from FrontendMentor"
|
||||
},
|
||||
{
|
||||
"title": "The Huddle Landing Page",
|
||||
"url": "/FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/",
|
||||
"description": "",
|
||||
"techUsed": [
|
||||
"html5",
|
||||
"css3",
|
||||
"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",
|
||||
"cssClass": "frontEndMentorChallenges",
|
||||
"challenges": []
|
||||
},
|
||||
{
|
||||
"title": "Intermediate",
|
||||
"cssClass": "frontEndMentorChallenges",
|
||||
"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 {
|
||||
font-weight: 600;
|
||||
font-size: 1.3rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
/* .freecodeCampProjects {} */
|
||||
|
|
|
|||
157
src/index.njk
157
src/index.njk
|
|
@ -22,137 +22,44 @@ cssReset: true
|
|||
<p>Robert McGovern</p>
|
||||
</div>
|
||||
|
||||
<div class="projectsDiv">
|
||||
<div class="alignedHeader">
|
||||
<h2 class="projectsSection__title">{{webprojects.frontendMentor.serviceName}}</h2>
|
||||
<img src="{{webprojects.frontendMentor.svgSource}}" alt="{{webprojects.frontendMentor.svgAltText}}"/>
|
||||
</div>
|
||||
<p>{{webprojects.frontendMentor.description}}</p>
|
||||
|
||||
{% 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>
|
||||
{% for service in webprojects.services %}
|
||||
<div class="projectsDiv {{service.cssClass}}">
|
||||
<div class="alignedHeader">
|
||||
<h2 class="projectsSection__title">{{service.name}}</h2>
|
||||
{% if service.svgSource%}
|
||||
<img src="{{service.svgSource}}" alt="{{service.svgAltText}}"/>
|
||||
{% endif %}
|
||||
</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>
|
||||
{% endfor %}
|
||||
|
||||
<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"/>
|
||||
<h2 class="projectsSection__title">Playground</h2>
|
||||
<img style="width: 10%;" src="/svgs/purple_fedora.svg" alt="A Purple Fedora"/>
|
||||
</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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue