gaspersic/developer-roadmap
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Split featured content into separate components

Browse Source
This commit is contained in:
Kamran Ahmed
2019-10-28 00:20:59 +04:00
parent 1a2cd75e5d
commit 2826a5302f
4 changed files with 154 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
components/featured-content/guides.js Normal file
View File

@ -0,0 +1,54 @@
import { FeaturedContentWrap } from './style';
const FeaturedGuides = () => (
<FeaturedContentWrap className="featured-content-wrap">
<div className="container">
<p className='border-through featured-separator'>
<span>
List of most visited guides&nbsp;
<a href="#" className="dark-link d-none d-sm-none d-md-inline d-xl-inline">View all Guides &rarr;</a>
</span>
</p>
<div className="swim-lane row">
<div className="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 grid-item-container">
<a className="featured-block" href='#'>
<h4>Design Patterns for Humans</h4>
<p>A language agnostic, ultra-simplified explanation to design patterns</p>
</a>
</div>
<div className="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 grid-item-container">
<a className="featured-block" href='#'>
<h4>Learn Regex</h4>
<p>An easy to understand guide on regular expressions with real world examples</p>
</a>
</div>
<div className="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 grid-item-container">
<a className="featured-block" href='#'>
<h4>Bash Guide</h4>
<p>Easy to understand guide for bash with real world usage examples.</p>
</a>
</div>
<div className="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 grid-item-container">
<a className="featured-block" href='#'>
<h4>DNS in One Picture</h4>
<p>Quick illustrative guide on how a website is found on the internet.</p>
</a>
</div>
<div className="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 grid-item-container">
<a className="featured-block" href='#'>
<h4>Using React Hooks</h4>
<p>Start using React hooks in your react applications today with this guide.</p>
</a>
</div>
<div className="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 grid-item-container">
<a className="featured-block" href='#'>
<h4>HTTP Caching</h4>
<p>Everything you need to know about web caching</p>
</a>
</div>
</div>
</div>
</FeaturedContentWrap>
);
export default FeaturedGuides;

137
components/featured-content/index.js
View File

@ -1,136 +1,13 @@
import { FeaturedContentWrap, FeaturedWrap } from './style'; import { FeaturedWrap } from './style';
import FeaturedJourneys from './journeys';
import FeaturedGuides from './guides';
import FeaturedRoadmaps from './roadmaps';
const FeaturedContent = (props) => ( const FeaturedContent = (props) => (
<FeaturedWrap className="border-top border-bottom bg-light"> <FeaturedWrap className="border-top border-bottom bg-light">
<FeaturedContentWrap className="featured-content-wrap"> <FeaturedRoadmaps />
<div className="container"> <FeaturedGuides />
<div className="featured-head"> <FeaturedJourneys />
<h3>Featured Content</h3>
<p className="border-through featured-separator">
<span>
List of roadmaps mostly visited by the community&nbsp;
<a href="#" className="dark-link d-none d-sm-none d-md-inline d-xl-inline">View all Roadmaps &rarr;</a>
</span>
</p>
</div>
<div className="swim-lane row">
<div className="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 grid-item-container">
<a className="featured-block" href='#'>
<h4>Frontend Developer</h4>
<p>Step by step guide to becoming a modern frontend developer in 2019</p>
</a>
</div>
<div className="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 grid-item-container">
<a className="featured-block" href='#'>
<h4>Backend Developer</h4>
<p>Step by step guide to becoming a modern backend developer in 2019</p>
</a>
</div>
<div className="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 grid-item-container">
<a className="featured-block" href='#'>
<h4>DevOps Roadmap</h4>
<p>Step by step guide to become an SRE or for any operations role in 2019</p>
</a>
</div>
</div>
</div>
</FeaturedContentWrap>
<FeaturedContentWrap className="featured-content-wrap">
<div className="container">
<p className='border-through featured-separator'>
<span>
List of most visited guides&nbsp;
<a href="#" className="dark-link d-none d-sm-none d-md-inline d-xl-inline">View all Guides &rarr;</a>
</span>
</p>
<div className="swim-lane row">
<div className="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 grid-item-container">
<a className="featured-block" href='#'>
<h4>Design Patterns for Humans</h4>
<p>A language agnostic, ultra-simplified explanation to design patterns</p>
</a>
</div>
<div className="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 grid-item-container">
<a className="featured-block" href='#'>
<h4>Learn Regex</h4>
<p>An easy to understand guide on regular expressions with real world examples</p>
</a>
</div>
<div className="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 grid-item-container">
<a className="featured-block" href='#'>
<h4>Bash Guide</h4>
<p>Easy to understand guide for bash with real world usage examples.</p>
</a>
</div>
<div className="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 grid-item-container">
<a className="featured-block" href='#'>
<h4>DNS in One Picture</h4>
<p>Quick illustrative guide on how a website is found on the internet.</p>
</a>
</div>
<div className="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 grid-item-container">
<a className="featured-block" href='#'>
<h4>Using React Hooks</h4>
<p>Start using React hooks in your react applications today with this guide.</p>
</a>
</div>
<div className="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 grid-item-container">
<a className="featured-block" href='#'>
<h4>HTTP Caching</h4>
<p>Everything you need to know about web caching</p>
</a>
</div>
</div>
</div>
</FeaturedContentWrap>
<FeaturedContentWrap className="featured-content-wrap">
<div className="container">
<p className='border-through featured-separator'>
<span>
List of most visited Journeys&nbsp;
<a href="#" className="dark-link d-none d-sm-none d-md-inline d-xl-inline">View all Journeys &rarr;</a>
</span>
</p>
<div className="swim-lane row featured-journeys">
<div className="col-xl-3 col-lg-3 col-md-4 col-sm-12 col-12 grid-item-container journey-block">
<a href="#">
<img src="/static/kamran.jpeg" alt="" />
<div className="journey-meta">
<h4>Kamran Ahmed</h4>
<p>Engineering Lead at Al-tayer</p>
</div>
</a>
</div>
<div className="col-xl-3 col-lg-3 col-md-4 col-sm-12 col-12 grid-item-container journey-block">
<a href="#">
<img src="/static/aras.jpeg" alt="" />
<div className="journey-meta">
<h4>Aras Atasaygin</h4>
<p>Engg. Manager at Al-tayer</p>
</div>
</a>
</div>
<div className="col-xl-3 col-lg-3 col-md-4 col-sm-12 col-12 grid-item-container journey-block">
<a href="#">
<img src="/static/dan-abramove.jpeg" alt="" />
<div className="journey-meta">
<h4>Dan Abramov</h4>
<p>Co-founder and CTO at Blink</p>
</div>
</a>
</div>
<div className="col-xl-3 col-lg-3 col-md-4 col-sm-12 col-12 grid-item-container journey-block">
<a href="#">
<img src="/static/chris-coyier.jpeg" alt="" />
<div className="journey-meta">
<h4>Chris Coyier</h4>
<p>Co-founder of Codepen</p>
</div>
</a>
</div>
</div>
</div>
</FeaturedContentWrap>
</FeaturedWrap> </FeaturedWrap>
); );

54
components/featured-content/journeys.js Normal file
View File

@ -0,0 +1,54 @@
import { FeaturedContentWrap } from './style';
const FeaturedJourneys = () => (
<FeaturedContentWrap className="featured-content-wrap">
<div className="container">
<p className='border-through featured-separator'>
<span>
List of most visited Journeys&nbsp;
<a href="#" className="dark-link d-none d-sm-none d-md-inline d-xl-inline">View all Journeys &rarr;</a>
</span>
</p>
<div className="swim-lane row featured-journeys">
<div className="col-xl-3 col-lg-3 col-md-4 col-sm-12 col-12 grid-item-container journey-block">
<a href="#">
<img src="/static/kamran.jpeg" alt="" />
<div className="journey-meta">
<h4>Kamran Ahmed</h4>
<p>Engineering Lead at Al-tayer</p>
</div>
</a>
</div>
<div className="col-xl-3 col-lg-3 col-md-4 col-sm-12 col-12 grid-item-container journey-block">
<a href="#">
<img src="/static/aras.jpeg" alt="" />
<div className="journey-meta">
<h4>Aras Atasaygin</h4>
<p>Engg. Manager at Al-tayer</p>
</div>
</a>
</div>
<div className="col-xl-3 col-lg-3 col-md-4 col-sm-12 col-12 grid-item-container journey-block">
<a href="#">
<img src="/static/dan-abramove.jpeg" alt="" />
<div className="journey-meta">
<h4>Dan Abramov</h4>
<p>Co-founder and CTO at Blink</p>
</div>
</a>
</div>
<div className="col-xl-3 col-lg-3 col-md-4 col-sm-12 col-12 grid-item-container journey-block">
<a href="#">
<img src="/static/chris-coyier.jpeg" alt="" />
<div className="journey-meta">
<h4>Chris Coyier</h4>
<p>Co-founder of Codepen</p>
</div>
</a>
</div>
</div>
</div>
</FeaturedContentWrap>
);
export default FeaturedJourneys;

39
components/featured-content/roadmaps.js Normal file
View File

@ -0,0 +1,39 @@
import { FeaturedContentWrap } from './style';
const FeaturedRoadmaps = () => (
<FeaturedContentWrap className="featured-content-wrap">
<div className="container">
<div className="featured-head">
<h3>Featured Content</h3>
<p className="border-through featured-separator">
<span>
List of roadmaps mostly visited by the community&nbsp;
<a href="#" className="dark-link d-none d-sm-none d-md-inline d-xl-inline">View all Roadmaps &rarr;</a>
</span>
</p>
</div>
<div className="swim-lane row">
<div className="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 grid-item-container">
<a className="featured-block" href='#'>
<h4>Frontend Developer</h4>
<p>Step by step guide to becoming a modern frontend developer in 2019</p>
</a>
</div>
<div className="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 grid-item-container">
<a className="featured-block" href='#'>
<h4>Backend Developer</h4>
<p>Step by step guide to becoming a modern backend developer in 2019</p>
</a>
</div>
<div className="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 grid-item-container">
<a className="featured-block" href='#'>
<h4>DevOps Roadmap</h4>
<p>Step by step guide to become an SRE or for any operations role in 2019</p>
</a>
</div>
</div>
</div>
</FeaturedContentWrap>
);
export default FeaturedRoadmaps;