mirror of
https://github.com/rjNemo/devbook_ts
synced 2026-06-12 13:36:43 +00:00
lay profile top and about out
This commit is contained in:
parent
1b99353f92
commit
43fff681f6
5 changed files with 233 additions and 5 deletions
|
|
@ -20,4 +20,9 @@ describe('App Router', () => {
|
|||
cy.visit(ROUTES.DEVELOPERS);
|
||||
cy.get('section');
|
||||
});
|
||||
|
||||
it('contains Profile page', () => {
|
||||
cy.visit(ROUTES.PROFILE);
|
||||
cy.get('section');
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -6,3 +6,4 @@ export const LANDING: string = '/';
|
|||
export const SIGN_UP: string = '/signup';
|
||||
export const SIGN_IN: string = '/signin';
|
||||
export const DEVELOPERS: string = '/developers';
|
||||
export const PROFILE: string = '/profile';
|
||||
|
|
|
|||
|
|
@ -3,11 +3,7 @@ import Header from '../components/Header';
|
|||
import DevProfile from '../components/DevProfile';
|
||||
import DevSummary from '../models/DevSummary';
|
||||
|
||||
// interface IProps {
|
||||
// developers: DevSummary[]
|
||||
// }
|
||||
|
||||
// const Developers: FC<IProps> = ({developers}) => (
|
||||
// const Developers: FC<DevSummary[]> = (developers) => {
|
||||
const Developers: FC = () => {
|
||||
const developers: DevSummary[] = [
|
||||
{
|
||||
|
|
|
|||
224
src/pages/Profile.tsx
Normal file
224
src/pages/Profile.tsx
Normal file
|
|
@ -0,0 +1,224 @@
|
|||
import React, {FC} from 'react';
|
||||
import DevFull from '../models/DevFull';
|
||||
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
|
||||
import {
|
||||
faGithub,
|
||||
faFacebook,
|
||||
faInstagram,
|
||||
faLinkedin,
|
||||
faTwitter,
|
||||
} from '@fortawesome/free-brands-svg-icons';
|
||||
import {
|
||||
faGlobe,
|
||||
IconDefinition,
|
||||
faCheck,
|
||||
} from '@fortawesome/free-solid-svg-icons';
|
||||
|
||||
const Profile: FC<DevFull> = () => {
|
||||
const dev = {
|
||||
id: '0',
|
||||
name: 'John Doe',
|
||||
picture:
|
||||
'https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?s=200',
|
||||
description: 'Developer at Microsoft',
|
||||
location: 'Seattle, WA',
|
||||
skills: ['HTML', 'CSS', 'JavaScript', 'Python'],
|
||||
links: {
|
||||
web: '#',
|
||||
instagram: 'http://insta.com',
|
||||
facebook: '#',
|
||||
linkedin: '#',
|
||||
twitter: '#',
|
||||
github: '#',
|
||||
},
|
||||
bio:
|
||||
'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Blanditiis unde quae vero enim adipisci voluptas magni sapiente reprehenderit error minima.',
|
||||
};
|
||||
|
||||
/** return the icon corresponding to the social name */
|
||||
const renderSocialIcon = (name: string): IconDefinition => {
|
||||
switch (name) {
|
||||
case 'facebook':
|
||||
return faFacebook;
|
||||
case 'github':
|
||||
return faGithub;
|
||||
case 'instagram':
|
||||
return faInstagram;
|
||||
case 'linkedin':
|
||||
return faLinkedin;
|
||||
case 'twitter':
|
||||
return faTwitter;
|
||||
default:
|
||||
return faGlobe;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="container">
|
||||
<a href="profiles.html" className="btn">
|
||||
Back to profiles
|
||||
</a>
|
||||
|
||||
<div className="profile-grid my-1">
|
||||
<div className="profile-top bg-primary p-2">
|
||||
<img
|
||||
src="https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?s=200"
|
||||
alt="Some guy"
|
||||
className="round-img my-1"
|
||||
/>
|
||||
<h1 className="large">{dev.name}</h1>
|
||||
<p className="lead">{dev.description}</p>
|
||||
<p>{dev.location}</p>
|
||||
<div className="icons my-1">
|
||||
{Object.entries(dev.links).map(([icon, webAddress], i: number) => (
|
||||
<a href={webAddress} key={i}>
|
||||
<FontAwesomeIcon icon={renderSocialIcon(icon)} size="2x" />
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="profile-about bg-light p-2">
|
||||
<h2 className="text-primary">{`${dev.name}'s Bio`}</h2>
|
||||
<p>{dev.bio}</p>
|
||||
<div className="line"></div>
|
||||
<h2 className="text-primary">Skill Set</h2>
|
||||
<div className="skills">
|
||||
{dev.skills.map((s: string, i: number) => (
|
||||
<div className="p-1" key={i}>
|
||||
<FontAwesomeIcon icon={faCheck} /> {s}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="profile-exp bg-white p-2">
|
||||
<h2 className="text-primary">Experiences</h2>
|
||||
<div>
|
||||
<h3>Microsoft</h3>
|
||||
<p>Oct. 2011 - Current</p>
|
||||
<p>
|
||||
<strong>Position: </strong>Senior Developer
|
||||
</p>
|
||||
<p>
|
||||
<strong>Description: </strong>Lorem ipsum dolor sit amet
|
||||
consectetur adipisicing elit. Repellendus at rem totam sed qui!
|
||||
Quas.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Sun Microsystems</h3>
|
||||
<p>Oct. 2004 - Nov. 2010</p>
|
||||
<p>
|
||||
<strong>Position: </strong>System Admin
|
||||
</p>
|
||||
<p>
|
||||
<strong>Description: </strong>Lorem ipsum dolor sit amet
|
||||
consectetur adipisicing elit. Repellendus at rem totam sed qui!
|
||||
Quas.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="profile-edu bg-white p-2">
|
||||
<h2 className="text-primary">Education</h2>
|
||||
<div>
|
||||
<h3>University of Washington</h3>
|
||||
<p>Sep. 1993 - June 1999</p>
|
||||
<p>
|
||||
<strong>Degree: </strong>Master
|
||||
</p>
|
||||
<p>
|
||||
<strong>Field: </strong>Computer Science
|
||||
</p>
|
||||
<p>
|
||||
<strong>Description: </strong>Lorem ipsum dolor sit amet
|
||||
consectetur adipisicing elit. Repellendus at rem totam sed qui!
|
||||
Quas.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="profile-github">
|
||||
<h2 className="text-primary my-1">
|
||||
<i className="fa fa-github"></i>
|
||||
GitHub Repos
|
||||
</h2>
|
||||
|
||||
<div className="repo bg-white my-1 p-1">
|
||||
<div>
|
||||
<h4>
|
||||
<a href="">Repo #1</a>
|
||||
</h4>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit,
|
||||
deserunt.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<ul>
|
||||
<li className="badge badge-primary">
|
||||
<i className="fa fa-star"></i> Stars: 42
|
||||
</li>
|
||||
<li className="badge badge-dark">
|
||||
<i className="fa fa-eye"></i> Watchers: 2
|
||||
</li>
|
||||
<li className="badge badge-light">
|
||||
<i className="fa fa-code-fork"></i> Forks: 4
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="repo bg-white my-1 p-1">
|
||||
<div>
|
||||
<h4>
|
||||
<a href="">Repo #2</a>
|
||||
</h4>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit,
|
||||
deserunt.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<ul>
|
||||
<li className="badge badge-primary">
|
||||
<i className="fa fa-star"></i> Stars: 42
|
||||
</li>
|
||||
<li className="badge badge-dark">
|
||||
<i className="fa fa-eye"></i> Watchers: 2
|
||||
</li>
|
||||
<li className="badge badge-light">
|
||||
<i className="fa fa-code-fork"></i> Forks: 4
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="repo bg-white my-1 p-1">
|
||||
<div>
|
||||
<h4>
|
||||
<a href="">Repo #3</a>
|
||||
</h4>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit,
|
||||
deserunt.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<ul>
|
||||
<li className="badge badge-primary">
|
||||
<i className="fa fa-star"></i> Stars: 42
|
||||
</li>
|
||||
<li className="badge badge-dark">
|
||||
<i className="fa fa-eye"></i> Watchers: 2
|
||||
</li>
|
||||
<li className="badge badge-light">
|
||||
<i className="fa fa-code-fork"></i> Forks: 4
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Profile;
|
||||
|
|
@ -4,6 +4,7 @@ import Landing from '../pages/Landing';
|
|||
import SignUp from '../pages/SignUp';
|
||||
import SignIn from '../pages/SignIn';
|
||||
import Developers from '../pages/Developers';
|
||||
import Profile from '../pages/Profile';
|
||||
import * as ROUTES from '../constants/routes';
|
||||
|
||||
const Router: FC = () => (
|
||||
|
|
@ -12,6 +13,7 @@ const Router: FC = () => (
|
|||
<Route exact path={ROUTES.SIGN_UP} component={SignUp} />
|
||||
<Route exact path={ROUTES.SIGN_IN} component={SignIn} />
|
||||
<Route exact path={ROUTES.DEVELOPERS} component={Developers} />
|
||||
<Route exact path={ROUTES.PROFILE} component={Profile} />
|
||||
</Switch>
|
||||
);
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue