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,12 +1,15 @@
|
||||||
{
|
{
|
||||||
"frontendMentor": {
|
"services": [
|
||||||
"serviceName": "Frontend Mentor",
|
{
|
||||||
|
"name": "Frontend Mentor",
|
||||||
"svgSource": "/svgs/frontendmentor.svg",
|
"svgSource": "/svgs/frontendmentor.svg",
|
||||||
"svgAltText": "Frontend Mentor Logo",
|
"svgAltText": "Frontend Mentor Logo",
|
||||||
"description": "Collection of challenges I completed for Frontend Mentor",
|
"description": "Collection of challenges I completed for Frontend Mentor",
|
||||||
|
"cssClass": "",
|
||||||
"difficulty": [
|
"difficulty": [
|
||||||
{
|
{
|
||||||
"title": "Newbie",
|
"title": "Newbie",
|
||||||
|
"cssClass": "frontEndMentorChallenges",
|
||||||
"challenges": [
|
"challenges": [
|
||||||
{
|
{
|
||||||
"title": "Order Summary Card Component",
|
"title": "Order Summary Card Component",
|
||||||
|
|
@ -102,20 +105,104 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "Junior",
|
"title": "Junior",
|
||||||
|
"cssClass": "frontEndMentorChallenges",
|
||||||
"challenges": []
|
"challenges": []
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "Intermediate",
|
"title": "Intermediate",
|
||||||
|
"cssClass": "frontEndMentorChallenges",
|
||||||
"challenges": []
|
"challenges": []
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "Advanced",
|
"title": "Advanced",
|
||||||
|
"cssClass": "frontEndMentorChallenges",
|
||||||
"challenges": []
|
"challenges": []
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "Guru",
|
"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": []
|
"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 {} */
|
||||||
|
|
|
||||||
131
src/index.njk
131
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="projectsDiv {{service.cssClass}}">
|
||||||
<div class="alignedHeader">
|
<div class="alignedHeader">
|
||||||
<h2 class="projectsSection__title">{{webprojects.frontendMentor.serviceName}}</h2>
|
<h2 class="projectsSection__title">{{service.name}}</h2>
|
||||||
<img src="{{webprojects.frontendMentor.svgSource}}" alt="{{webprojects.frontendMentor.svgAltText}}"/>
|
{% if service.svgSource%}
|
||||||
|
<img src="{{service.svgSource}}" alt="{{service.svgAltText}}"/>
|
||||||
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
<p>{{webprojects.frontendMentor.description}}</p>
|
{% if service.description%}
|
||||||
|
<p>{{service.description}}</p>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
{% for difficultyLevel in webprojects.frontendMentor.difficulty %}
|
{% for difficultyLevel in service.difficulty %}
|
||||||
{% if difficultyLevel.challenges | length %}
|
{% if difficultyLevel.challenges | length %}
|
||||||
<div class="frontEndMentorChallenges">
|
<div class="{{difficultyLevel.cssClass}}">
|
||||||
|
{% if difficultyLevel.title%}
|
||||||
<h3>{{difficultyLevel.title}} Challenges</h3>
|
<h3>{{difficultyLevel.title}} Challenges</h3>
|
||||||
|
{% endif %}
|
||||||
|
{% if difficultyLevel.description%}
|
||||||
|
<p>{{difficultyLevel.description}}</p>
|
||||||
|
{% endif %}
|
||||||
<div class="projects-grid">
|
<div class="projects-grid">
|
||||||
|
|
||||||
{% for challenge in difficultyLevel.challenges %}
|
{% for challenge in difficultyLevel.challenges %}
|
||||||
|
|
||||||
{% set projectContent = challenge %}
|
{% set projectContent = challenge %}
|
||||||
{% include "components/project.njk" %}
|
{% include "components/project.njk" %}
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</div>
|
</div>
|
||||||
|
{% endfor %}
|
||||||
|
|
||||||
<div class="projectsDiv">
|
<div class="projectsDiv">
|
||||||
<div class="alignedHeader">
|
<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>
|
<h2 class="projectsSection__title">Playground</h2>
|
||||||
|
<img style="width: 10%;" src="/svgs/purple_fedora.svg" alt="A Purple Fedora"/>
|
||||||
|
</div>
|
||||||
<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