crayonix/giovani.lol
Archived
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Made navigation bar responsive and fixed margin issue with history

Browse Source
This commit is contained in:
Giovani
2019-04-16 19:42:18 -04:00
parent 5ef764bf80
commit b923c53ca0
12 changed files with 138 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/pages/home.js
View File

@@ -1,7 +1,7 @@
import React, {Component} from 'react';
import Navigation from '../shared/header/navigation';
import Navigation from '../shared/navigation/navigation';
import Footer from "../shared/footer/footer";
import Introduction from '../shared/introduction/introduction';
import Introduction from '../shared/introduction/introduction';
import Bio from '../shared/bio/bio';
import History from '../shared/history/history';
import Skills from '../shared/skills/skills'

2
src/components/shared/bio/bio.css
View File

@@ -9,6 +9,6 @@
}
.content-type-size {
font-size: 1.75rem;
font-size: 1.6rem;
}
}

12
src/components/shared/header/navigation.css
View File

@@ -1,12 +0,0 @@
.nav-background-color {
background-color: #eff1f4;
}
.nav-menu-item:hover {
background-color: #d8d8da;
}
.remove-link-styling {
color: inherit !important;
text-decoration: inherit !important;
}

59
src/components/shared/header/navigation.js
View File

@@ -1,59 +0,0 @@
import React, {Component} from 'react';
import './navigation.css';
class NavigationBar extends Component {
constructor(props) {
super(props);
this.state = {
};
this.navigationOptions = [
{
content: 'Intro',
href: '#intro'
},
{
content: 'Bio',
href: '#bio'
},
{
content: 'History',
href: '#history'
},
{
content: 'Skills',
href: '#skills'
},
{
content: 'Contact',
href: '#contact'
}
];
}
navigationOptions = [];
render() {
return (
<div className="container-fluid fixed-top">
<div className="row justify-content-end nav-background-color">
<div className="col-1">
<span className="octicon-mark-github" aria-hidden="true"></span>
</div>
{this.navigationOptions.map((navigationOption, i) => {
return (
<a className="col-1 nav-menu-item remove-link-styling" href={navigationOption.href}>
<div className="text-center pt-2 pb-2">
<h3>{navigationOption.content}</h3>
</div>
</a>
);
})}
</div>
</div>
);
}
}
export default NavigationBar;

32
src/components/shared/history/history.js
View File

@@ -85,26 +85,30 @@ class History extends Component {
defaultClasses += ` ${isLeft ? 'slideInLeft' : 'slideInRight'} animated faster`;
}
return defaultClasses + ' mb-5';
if (i === (this.timelineContainers.length - 1)) {
defaultClasses += 'mb-3';
} else {
defaultClasses += 'mb-5';
}
return defaultClasses;
}
render() {
return (
<div className="container-fluid" id="history">
<div className="pb-5">
<div className="section-height"></div>
<div className="timeline">
{this.timelineContainers.map((timelineContainer, i) => {
return (
<div className={this.getTimelineContainerClasses(timelineContainer, i)} ref={(el) => timelineContainer.ref = el}>
<div className="timeline-content">
<h1>{timelineContainer.heading}</h1>
<h5>{timelineContainer.content}</h5>
</div>
<div className="section-height"></div>
<div className="timeline">
{this.timelineContainers.map((timelineContainer, i) => {
return (
<div className={this.getTimelineContainerClasses(timelineContainer, i)} ref={(el) => timelineContainer.ref = el}>
<div className="timeline-content">
<h1>{timelineContainer.heading}</h1>
<h5>{timelineContainer.content}</h5>
</div>
);
})}
</div>
</div>
);
})}
</div>
</div>
);

2
src/components/shared/introduction/introduction.css
View File

@@ -16,6 +16,6 @@
}
.profile-image {
width: 350px;
width: 300px;
}
}

30
src/components/shared/navigation/navigation.css Normal file
View File

@@ -0,0 +1,30 @@
.nav-background-color {
background-color: #eff1f4;
}
.nav-menu-item:hover {
background-color: #d8d8da !important;
}
.remove-link-styling {
color: inherit !important;
text-decoration: inherit !important;
}
.navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(55, 58, 60, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !important;
}
.mobile-nav {
display: none;
}
@media (max-width: 575.98px) { /* sm */
.desktop-nav {
display: none;
}
.mobile-nav {
display: block;
}
}

83
src/components/shared/navigation/navigation.js Normal file
View File

@@ -0,0 +1,83 @@
import React, {Component} from 'react';
import './navigation.css';
class NavigationBar extends Component {
constructor(props) {
super(props);
this.state = {
};
this.navigationOptions = [
{
content: 'Intro',
href: '#intro'
},
{
content: 'Bio',
href: '#bio'
},
{
content: 'History',
href: '#history'
},
{
content: 'Skills',
href: '#skills'
},
{
content: 'Contact',
href: '#contact'
}
];
}
navigationOptions = [];
render() {
return (
<div>
<div className="container-fluid desktop-nav fixed-top">
<div className="row justify-content-end nav-background-color">
{this.navigationOptions.map((navigationOption, i) => {
return (
<a className="col-1 nav-menu-item remove-link-styling" href={navigationOption.href}>
<div className="text-center pt-2 pb-2">
<h3>{navigationOption.content}</h3>
</div>
</a>
);
})}
</div>
</div>
<div className="pos-f-t mobile-nav fixed-top nav-background-color">
<div className="collapse" id="navbarToggleExternalContent">
<div className="m-3">
{this.navigationOptions.map((navigationOption, i) => {
return (
<div className="p-2" data-toggle="collapse" data-target="#navbarToggleExternalContent">
<a className="remove-link-styling" href={navigationOption.href} >
<h4>{navigationOption.content}</h4>
</a>
</div>
);
})}
</div>
</div>
<nav className="navbar nav-background-color">
<button className="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarToggleExternalContent"
aria-controls="navbarToggleExternalContent"
aria-expanded="true"
aria-label="Toggle navigation">
<span className="navbar-toggler-icon custom-toggler"></span>
</button>
</nav>
</div>
</div>
);
}
}
export default NavigationBar;

4
src/index.js
View File

@@ -1,8 +1,4 @@
import './css/bootstrap.cosmo.min.css';
// eslint-disable-next-line
import $ from 'jquery';
// eslint-disable-next-line
import Popper from 'popper.js';
import 'animate.css/animate.min.css'
import 'octicons/build/build.css';
import React from 'react';