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

10
package-lock.json generated
View File

@@ -8740,11 +8740,6 @@
"topo": "2.0.2"
}
},
"jquery": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.3.1.tgz",
"integrity": "sha512-Ubldcmxp5np52/ENotGxlLe6aGMvmF4R8S6tZjsP6Knsaxd/xp3Zrh50cG93lR6nPXyUFwzN3ZSOQI0wRJNdGg=="
},
"js-levenshtein": {
"version": "1.1.6",
"resolved": "https://registry.npmjs.org/js-levenshtein/-/js-levenshtein-1.1.6.tgz",
@@ -10269,11 +10264,6 @@
"ts-pnp": "1.0.1"
}
},
"popper.js": {
"version": "1.15.0",
"resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.15.0.tgz",
"integrity": "sha512-w010cY1oCUmI+9KwwlWki+r5jxKfTFDVoadl7MSrIujHU5MJ5OR6HTDj6Xo8aoR/QsA56x8jKjA59qGH4ELtrA=="
},
"portfinder": {
"version": "1.0.20",
"resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.20.tgz",

2
package.json
View File

@@ -4,9 +4,7 @@
"private": true,
"dependencies": {
"animate.css": "^3.7.0",
"jquery": "^3.3.1",
"octicons": "^8.5.0",
"popper.js": "^1.15.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-scripts": "2.1.8"

3
public/index.html
View File

@@ -23,6 +23,9 @@
Learn how to configure a non-root public URL by running `npm run build`.
-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<title>React App</title>
</head>
<body>

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';