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

Worked on making intro and bio more responsive

Browse Source
This commit is contained in:
Giovani
2019-04-16 13:31:16 -04:00
parent 3cb7ae2fa0
commit 5ef764bf80
11 changed files with 53 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
package-lock.json generated
View File

@@ -2479,16 +2479,6 @@
"resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
"integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
},
"boostrap": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/boostrap/-/boostrap-2.0.0.tgz",
"integrity": "sha512-JEeFMOweKeGXEM9rt95eaVISOkluG9aKcl0jQCETOVH9jynCZxuBZe2oWgcWJpj5wqYWZl625SnW7OgHT2Ineg=="
},
"bootstrap": {
"version": "4.3.1",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.3.1.tgz",
"integrity": "sha512-rXqOmH1VilAt2DyPzluTi2blhk17bO7ef+zLLPlWvG494pDxcM234pJ8wTc/6R40UWizAIIMgxjvxZg5kmsbag=="
},
"brace-expansion": {
"version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -6546,7 +6536,6 @@
"minimatch": {
"version": "3.0.4",
"bundled": true,
"optional": true,
"requires": {
"brace-expansion": "1.1.11"
}

2
package.json
View File

@@ -4,8 +4,6 @@
"private": true,
"dependencies": {
"animate.css": "^3.7.0",
"boostrap": "^2.0.0",
"bootstrap": "^4.3.1",
"jquery": "^3.3.1",
"octicons": "^8.5.0",
"popper.js": "^1.15.0",

1
public/index.html
View File

@@ -22,6 +22,7 @@
work correctly both with client-side routing and a non-root public URL.
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">
<title>React App</title>
</head>
<body>

10
src/components/App.css
View File

@@ -2,3 +2,13 @@
html {
scroll-behavior: smooth;
}
.section-height {
height: 5rem;
}
@media (max-width: 575.98px) {
.section-height {
height: 3rem;
}
}

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

@@ -1,7 +1,14 @@
.row-height-25 {
height: 25rem;
.content-width {
width: 75%;
}
.row-background-color {
background-color: #eff1f4;
@media (max-width: 575.98px) { /* sm */
.content-width {
width: 85%;
}
.content-type-size {
font-size: 1.75rem;
}
}

7
src/components/shared/bio/bio.js
View File

@@ -5,10 +5,11 @@ class Bio extends Component {
render() {
return (
<div className="container-fluid" id="bio">
<div className="row row-height-25 p-5">
<div className="section-height"></div>
<div className="row">
<div className="col">
<div className="mx-auto text-center border-top border-bottom d-flex h-100 w-75">
<h2 className="align-self-center">
<div className="mx-auto text-center border-top border-bottom pl-1 pl-lg-5 pr-1 pr-lg-5 pt-5 pb-5 d-flex h-100 content-width">
<h2 className="content-type-size">
My name is <strong>Giovani Rodriguez</strong> and I create tools, applications and websites as solutions for individuals or businesses that need them.
I am a problem solver, solution maker upper and answer deilverer. I always itch to learn something new and strive to deliver my best. When I'm not
creating I am either reading, writing or playing games.

4
src/components/shared/history/history.css
View File

@@ -1,7 +1,3 @@
.row-height-5 {
height: 5rem;
}
* {
box-sizing: border-box !important;
}

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

@@ -92,7 +92,7 @@ class History extends Component {
return (
<div className="container-fluid" id="history">
<div className="pb-5">
<div className="row-height-5"></div>
<div className="section-height"></div>
<div className="timeline">
{this.timelineContainers.map((timelineContainer, i) => {
return (

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

@@ -2,3 +2,20 @@
line-height: 100%;
}
.profile-image {
width: 500px;
}
@media (max-width: 575.98px) { /* sm */
.line-one-type-size {
font-size: 2rem;
}
.line-two-type-size {
font-size: 1.5rem;
}
.profile-image {
width: 350px;
}
}

18
src/components/shared/introduction/introduction.js
View File

@@ -90,20 +90,20 @@ class Introduction extends Component {
render() {
return (
<div className="container-fluid pt-5" id="intro">
<div className="row align-items-center pt-5 pb-5">
<div className="col-lg-6 col-sm-12">
<div className="text-center">
<img src={ProfilePicture} alt="Giovani's Face" className="rounded-circle img-fluid img-thumbnail float-right" width="500" />
<div className="row align-items-center pt-4 pt-lg-5 pb-1 pb-lg-3">
<div className="col-12 col-lg-6">
<div className="text-center text-lg-right">
<img src={ProfilePicture} alt="Giovani's Face" className="profile-image rounded-circle img-fluid img-thumbnail" width="500" />
</div>
</div>
<div className="col-lg-6 col-sm-12">
<div className="col-12 col-lg-6 mt-3 mt-lg-1">
<div className="pl-3">
<h1 className="text-left">{this.state.currentLineOne}<span className={this.getCursorClasses(1)}>|</span></h1>
<h2 className="text-left">{this.state.currentLineTwo}<span className={this.getCursorClasses(2)}>|</span></h2>
<h1 className="text-center text-lg-left line-one-type-size">{this.state.currentLineOne}<span className={this.getCursorClasses(1)}>|</span></h1>
<h2 className="text-center text-lg-left line-two-type-size">{this.state.currentLineTwo}<span className={this.getCursorClasses(2)}>|</span></h2>
</div>
<a href="#bio">
<div className="mt-5 pl-3">
<button type="button" className="btn btn-outline-primary btn-lg float-left">Get To Know Me</button>
<div className="text-center text-lg-left pt-4 pt-lg-5 pl-3">
<button type="button" className="btn btn-outline-primary btn-lg">Get To Know Me</button>
</div>
</a>
</div>

2
src/index.js
View File

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