Skip to content

Instantly share code, notes, and snippets.

@Terron23

Terron23/index.html

Created October 16, 2017 17:34
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Terron23/7f9bc71d0c4486e4890c7a5fadf531c4 to your computer and use it in GitHub Desktop.
Save Terron23/7f9bc71d0c4486e4890c7a5fadf531c4 to your computer and use it in GitHub Desktop.
Download ZIP
Main Portfolio
Raw
index.html
<html>
<head>
<title>Terron M. Johnson Portfolio</title>
</head>
<body >
<section id="cover">
<div id="blackout">
<div id="cover-caption">
<div class="container-fluid">
<div class="col-md-12">
<h1 class="text-uppercase"><em>Welcome To My Portfolio</em><br>
<small>Fullstack Developer | Database Administrator | Writer<br><span class="name"> <em> <span class="text-lowercase">by</span> Terron M. Johnson
</span></small></em></h1>
<div class="container">
<hr>
</div>
<div class="btn-group btn-sm btn-group-horizontal" role="group" aria-label="...">
<div class="btn-group" role="group">
<a target="_blank" href="https://www.facebook.com/terron.johnson.5" type="button" class="btn btn-primary btn-md outline">Facebook</a>
</div>
<div class="btn-group" role="group">
<a href="https://www.linkedin.com/home?trk=nav_responsive_tab_home" target="_blank" type="button" class="btn btn-info btn-md outline">LinkedIn</a>
</div>
<div class="btn-group" role="group">
<a target="_blank" href="https://plus.google.com/u/0/" type="button" class="outline btn btn-danger btn-md">Google+</a>
</div>
</div>
<a href="#my-navbar" class="btn-btn-secondary-outline btn-lg" role="button">
<p class="outline ">&dArr;</p>
</a>
<!--<form action="" class="form-inline">
<div class="form-group">
<label class="sr-only">Name</label>
<input type="text" class="form-control form-control-lg" placeholder="Your name">
</div>
<div class="form-group">
<label class="sr-only">Email</label>
<center><input type="text" class="form-control form-control-lg" placeholder="email">
</div>
<button type="submit" class="btn btn-success btn-lg">Submit</button>
</form>
</center>-->
</div>
</div>
</div>
</div>
</section>
<!--Navigation bar-->
<nav class="navbar navbar-inverse navbar-static-top" id="my-navbar">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="" class="navbar-brand"> E.T.L.T</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<a href="" class="btn btn-danger navbar-btn navbar-right" onclick="notactive()">Subscribe To My News Letter</a>
<ul class="nav navbar-nav">
<li><a href="#experience">About me</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Projects <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#projects">Programming</a></li>
<li><a onclick="change()" class="toggle" href="#writing">Writing</a></li>
</ul>
</li>
<li><a href="#skills">Skills & Core Competencies</a></li>
<li><a href="#contact2">Contact</a></li>
</ul>
</div>
</div>
</div>
<!--End container1-->
</nav>
<!--End navbar-->
<!--2. Begin experence section-->
<section id="experience">
<div class="container-fluid experience-section">
<h1 class="text-center text-uppercase"><em>Experience</em></h1>
<hr>
<!--end page-header-->
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
<a href="#collapse-0" data-toggle="collapse" data-parent=#accordion><h4>New York County Lawyers Association
<br><small>Web & Database Administrator</small></h4></a>
</div>
<!--End Panel title-->
<div id="collapse-0" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li>Managed and resolved design issues during development stage. </li>
<li>Generated reports from the database using T-SQL and SQL.</li>
<li>Created & Managed Database Structure, Storage Allocation.</li>
<li>Confirmed that backups have been made and saved successfully in the defined location</li>
<li>Worked closely with management and served as primary technical contact for technical solutions for iMIS and application development</li>
<li>Identified and implemented Website enhancements.</li>
<li>Wrote and maintained documentation and business rules</li>
<li>Developed SEO strategies, and implemented and monitored marketing campaigns</li>
<li>Performed site analysis, keyword research and mapping, and assessed link building opportunities</li>
</ul>
</div>
</div>
</div>
</div>
<!--End of NYCLA-->
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
<a href="#collapse-t" data-toggle="collapse" data-parent=#accordion><h4>The Borgen Project
<br><small>Editor</small></h4></a>
</div>
<!--End Panel title-->
<div id="collapse-t" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li>Edited and formated articles submitted by national writers.
</li>
<li>Worked with writers to improve their articles
</li>
<li>Created personal fundraising campaigns</li>
<li>Created and implemented weekly email campaigns
</li>
<li>Created SEO friendly content</li>
</ul>
</div>
</div>
</div>
</div>
<!--End of the Borgen Project-->
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
<a href="#collapse-1" data-toggle="collapse" data-parent=#accordion><h4>KeepAmerica.com <br><small>Account Manager</small></h4></a>
</div>
<!--End Panel title-->
<div id="collapse-1" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li>Updated webpages on a regular basis </li>
<li>Created daily content for multiple social media platforms</li>
<li>Communicated on a daily basis with clients to maintain awareness of updates and offerings</li>
<li> Cultivated long-term relationships with internet retail clients and brands </li>
<li> Provided strategic guidance to clients on an ongoing basis </li>
<li>Experience working with website and/or social media administration (e.g.: WordPress, Facebook, Instagram, Twitter, and Mail Chimp) </li>
<li> Responsible for stylish writing and frequently posting new content to the Internet.</li>
<li>Utilized extensive knowledge of SEO techniques to drive traffic to website </li>
<li>Monitored and analyzed revenue generation from website traffic information </li>
<li>Assisted staff members with various aspects of website site maintenance </li>
<li>Coordinated various web pages with appropriate links and multimedia elements </li>
<li>Created and implemented weekly email campaigns </li>
<li>Marketed new products with regular website updates </li>
<li>Formulated business plans and spearheaded promotions for new product and company launches</li>
</ul>
</div>
</div>
</div>
</div>
<!--end Keepamerica-->
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
<a href="#collapse-2" data-toggle="collapse" data-parent=#accordion><h4>Rapid realty<br><small>Real Estate Agent</small></h4></a>
</div>
<!--End Panel title-->
<div id="collapse-2" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li>Assisted agents and brokers with sales procedures </li>
<li> Assisted with copywriting and uploading of images for online sales listings </li>
<li> Carried out telephone marketing </li>
<li> General administration duties </li>
<li> Interviewed clients to determine what kinds of properties they are seeking. </li>
<li> Coordinated appointments to show homes to prospective buyers.</li>
<li> Generated lists of properties that are compatible with buyers' needs and financial resources.</li>
</ul>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
<a href="#collapse-3" data-toggle="collapse" data-parent=#accordion><h4>Blink Fitness<br><small>Assistant Manager</small></h4></a>
</div>
<!--End Panel title-->
<div id="collapse-3" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li>Responded professionally to requests and inquiries from guests, members and staff. </li>
<li>Trained and developed a strong team of front desk and maintenance associates. </li>
<li>Ensured team members consistently executed the basics in punctuality, dress code compliance, friendliness and cleanliness</li>
<li>Responsible for the successful attainment of department targets, including revenue and member retention. </li>
<li>Kept records of customer interactions and transactions by recording details of inquiries or comments, as well as actions taken </li>
<li>Determined charges for services requested, collected deposits or payments, and made billing arrangements </li>
<li>Resolved customers' service or billing concerns by performing activities such as exchanging merchandise, refunding money, or adjusting bills. </li>
<li>Completed contract forms, prepared change of address records, and issued service discontinuance orders, using computers.</li>
</ul>
<hr>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
<a href="#collapse-4" data-toggle="collapse" data-parent=#accordion><h4>Fundraising Resources<br><small>Corporate Trainer</small></h4></a>
</div>
<!--End Panel title-->
<div id="collapse-4" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li>Generated sales revenue by adding new program customers as well as cross-selling & up-selling current customers. </li>
<li>Sold programs and services door-to-door to existing and prospective customers </li>
<li>Determined target geographic selling area on a weekly basis </li>
<li> Created selling strategies sales pitch and formulated answers and objections</li>
<li>Conducted retention and service calls through means of person-to-person contact</li>
</ul>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
<a href="#collapse-5" data-toggle="collapse" data-parent=#accordion><h4>New York Cares<br><small>Volunteer</small></h4></a>
</div>
<!--End Panel title-->
<div id="collapse-5" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li> Helped build and rehabilitate libraries, parks, and schools by painting, plastering, and general construction work</li>
<li>Responsible for overseeing and creating weekly activities for children</li>
<li>Served and prepared meals for the homeless</li>
<li>Tutored students in reading, writing, arithmetic, and science</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!--end panel-group-->
</div>
<!--end Work History container-->
</div>
</div>
</div>
</section>
<!--end experience section-->
<div id="writing"></div>
<section id="projects">
<div id="project-programming" class="container-fluid project-programming ">
<h1 class="text-center text-uppercase"><em><strong>projects: Programming</strong></em><hr></h1>
<div class="row">
<div class="col-md-3 padding-0">
<div class="hovereffect">
<a target="_blank" href="https://codepen.io/Terron23/full/ezJbRx/"><iframe src="https://codepen.io/Terron23/full/ezJbRx/"></iframe>
</a>
<div class="overlay text-center">
<h1 class="caption"><em><a href="https://codepen.io/Terron23/full/ezJbRx/" target="_blank">Javascript Calculator</a></em></h1></div>
</div>
</div>
<div class="col-md-3 padding-0">
<div class="hovereffect">
<a target="_blank" href="https://codepen.io/Terron23/full/vKGBgp/"><img class="img-responsive img-thumbnail img-up" src="http://shrinktheweb.snapito.io/v2/webshot/spu-ea68c8-ogi2-3cwn3bmfojjlb56e?size=800x0&screen=1024x768&url=http%3A%2F%2Fcodepen.io%2FTerron23%2Ffull%2FvKGBgp%2F" /></a>
<div class="overlay text-center">
<h1 class="caption"><em><a target="_blank" href="https://codepen.io/Terron23/full/vKGBgp/">StopWatch</a></em></h1></div>
</div>
</div>
<div class="col-md-3 padding-0">
<div class="hovereffect">
<a target="_blank" href="https://codepen.io/Terron23/full/pbgOPZ/"><img class="img-responsive img-thumbnail img-up" src="http://shrinktheweb.snapito.io/v2/webshot/spu-ea68c8-ogi2-3cwn3bmfojjlb56e?size=800x0&screen=1024x768&url=http%3A%2F%2Fcodepen.io%2FTerron23%2Ffull%2FpbgOPZ%2F" /></a>
<div class="overlay text-center">
<h1 class="caption"><em><a target="_blank" href="https://codepen.io/Terron23/full/pbgOPZ/">Simple Calculator</a></em></h1></div>
</div>
</div>
<div class="col-md-3 padding-0">
<div class="hovereffect">
<a target="_blank" href="https://codepen.io/Terron23/full/WxwegV/"><img class="img-responsive img-thumbnail img-up" src="http://shrinktheweb.snapito.io/v2/webshot/spu-ea68c8-ogi2-3cwn3bmfojjlb56e?size=800x0&screen=1024x768&url=http%3A%2F%2Fcodepen.io%2FTerron23%2Ffull%2FWxwegV%2F" /></a>
<div class="overlay text-center">
<h1 class="caption"><em> <a target="_blank" href="https://codepen.io/Terron23/full/WxwegV/">Tech Site Template</a></em></h1></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3 padding-0">
<div class="hovereffect">
<a target="_blank" href="https://codepen.io/Terron23/full/KMdoWv/"><img class="img-responsive img-thumbnail img-up" src="http://shrinktheweb.snapito.io/v2/webshot/spu-ea68c8-ogi2-3cwn3bmfojjlb56e?size=800x0&screen=1024x768&url=http%3A%2F%2Fcodepen.io%2FTerron23%2Ffull%2FKMdoWv%2F" /></a>
<div class="overlay text-center">
<h1 class="caption"><em> <a target="_blank" href="https://codepen.io/Terron23/full/KMdoWv/">Website Template</a></em></h4>
</div>
</div>
</div>
<div class="col-md-3 padding-0">
<div class="hovereffect">
<a target="_blank" href="https://codepen.io/Terron23/full/GobejW/"><img class="img-responsive img-thumbnail img-up" src="http://shrinktheweb.snapito.io/v2/webshot/spu-ea68c8-ogi2-3cwn3bmfojjlb56e?size=800x0&screen=1024x768&url=http%3A%2F%2Fcodepen.io%2FTerron23%2Ffull%2FGobejW%2F" /></a>
<div class="overlay text-center">
<h1 class="caption smaller"><em><a target="_blank" href="https://codepen.io/Terron23/full/GobejW/">Harlem Hellfighter's Tribute Page</a></em></h1></div>
</div>
</div>
<div class="col-md-3 padding-0">
<div class="hovereffect">
<a target="_blank" href="https://codepen.io/Terron23/full/OMgzae/"><img class="img-responsive img-thumbnail img-up" src="http://shrinktheweb.snapito.io/v2/webshot/spu-ea68c8-ogi2-3cwn3bmfojjlb56e?size=800x0&screen=1024x768&url=http%3A%2F%2Fcodepen.io%2FTerron23%2Ffull%2FOMgzae%2F" /></a>
<div class="overlay text-center">
<h1 class="caption"><em><a target="_blank" href="https://codepen.io/Terron23/full/OMgzae/">Motivation Quote Machine</a></em></h1></div>
</div>
</div>
<!-- Image Link for Writing Port: http://snapito.com/screenshots/codepen.io.html?size=800x0&screen=1024x768&cache=2592000&delay=-1&url=http%3A%2F%2Fcodepen.io%2FTerron23%2Ffull%2FXdOmYw%2F-->
<div class="col-md-3 padding-0">
<div class="hovereffect">
<a target="_blank" href="https://codepen.io/Terron23/full/XdOmYw/"><img class="img-responsive img-thumbnail img-up" src="http://shrinktheweb.snapito.io/v2/webshot/spu-ea68c8-ogi2-3cwn3bmfojjlb56e?size=800x0&screen=1024x768&url=http%3A%2F%2Fcodepen.io%2FTerron23%2Ffull%2FXdOmYw%2F"></a>
<div class="overlay text-center">
<h1 class="caption"><em> <a target="_blank" href="https://codepen.io/Terron23/full/XdOmYw/">Art History Project</a></em></h1></div>
</div>
</div>
</div>
</div><!--End Programming Portfolio-->
<!--Beginning of writing Portfolio-->
<div id="project-writing" class=" container-fluid project-writing">
<h1 class=" text-uppercase text-center"><em><strong>projects: Writing</strong></em><hr></h1>
<div class="row">
<div class="col-md-3 padding-0">
<div class="hovereffect">
<img class="img-responsive img-thumbnail img-up" src="https://s32.postimg.org/w7obgatth/Lieutenant_Uhura_ppcorn.jpg" />
<div class="overlay text-center">
<h1 class="smaller-writing"><em> <a target="_blank" href="https://codepen.io/Terron23/full/XdOmYw/">Top 5 Civil Rights Heroes Who Deserve More....
</a></em></h1></div></div>
</div>
<div class="col-md-3 padding-0">
<div class="hovereffect">
<img class="img-responsive img-thumbnail img-up" src="http://ppcorn.com/us/wp-content/uploads/sites/14/2016/01/unnamed6.jpg" />
<div class="overlay text-center">
<h1 class=" smaller-writing"><em> <a target="_blank" href="http://ppcorn.com/us/2016/01/16/top-10-unbelieveable-futuristic-fashion-designs/">Top 10 Unbelieveable Futuristic Fashion Designs
</a></em></h1></div></div>
</div>
<div class="col-md-3 padding-0">
<div class="hovereffect">
<img class="img-responsive img-thumbnail img-up" src="http://ppcorn.com/us/wp-content/uploads/sites/14/2016/01/sigularity.jpg" />
<div class="overlay text-center">
<h1 class="smaller-writing"><em> <a target="_blank" href="http://ppcorn.com/us/2016/01/07/technology-will-make-immortal"/>Top 6 Ways Technology Will Make You Immortal
</a></em></h1></div></div>
</div>
<div class="col-md-3 padding-0">
<div class="hovereffect">
<img class="img-responsive img-thumbnail img-up" src="https://s31.postimg.org/xw408exqz/carpe_diem_24.jpg" />
<div class="overlay text-center">
<h1 class="smaller-writing"><em> <a target="_blank" href="https://medium.com/@terron_johnson/cease-the-moment-6d819b86079#.ey26n2z39">Motivational Essay: Seize the Moment
</a></em></h1></div></div>
</div>
</div><!--end firs writing row-->
<div class="row">
<div class="col-md-3 padding-0">
<div class="hovereffect">
<img class="img-write img-responsive img-thumbnail img-up" src="https://s31.postimg.org/lo4pwylcr/pic_Story_Tempest_Title.jpg" />
<div class="overlay text-center">
<h1 class="smaller-writing"><em> <a target="_blank" href="https://docs.google.com/document/d/1VBoKqMBTQy5AZYOTHKOanIF2SjcBeWPsR9Bm_zuipig/edit?usp=sharing">Shakespeare's The Tempest: Analytical Essay
</a></em></h1></div></div>
</div>
<div class="col-md-3 padding-0">
<div class="hovereffect">
<img class="img-responsive img-thumbnail img-up" src="http://ppcorn.com/us/wp-content/uploads/sites/14/2015/12/ppcorn-one.jpg" />
<div class="overlay text-center">
<h1 class="smaller-writing"><em> <a target="_blank" href="http://ppcorn.com/us/2015/12/22/8-outrageous-things-darknet/">8 Outrageous Things You Can Find on the Darknet
</a></em></h1></div></div>
</div>
<div class="col-md-3 padding-0">
<div class="hovereffect">
<img class="img-responsive img-thumbnail img-up" src="https://s31.postimg.org/45afwn2h7/rsz_uwasocrates_gobeirne_cropped.jpg" />
<div class="overlay text-center">
<h1 class="smaller-writing"><em> <a target="_blank" href="https://dochub.com/terronmjohnson/6a4g3e/gadfly-2010?dt=724jjvsp6hnev7vh">The Gadfly: Philosophy Journal
</a></em></h1></div></div>
</div>
<div class="col-md-3 padding-0">
<div class="hovereffect">
<img class="img-responsive img-thumbnail img-up" src="https://s31.postimg.org/kjd9ialff/CP94j_KU.jpg" />
<div class="overlay text-center">
<h1 class="smaller-writing"><em> <a target="_blank" href="https://docs.google.com/document/d/1dh6iTEbqukWNsaGcMFYg8q6kHTcYocA3vYNudxJS94w/edit?usp=sharing">Persuasive Speech: Anonymous Web Browsing & .......
</a></em></h1></div></div>
</div>
</div>
</div>
<div class="text-center">
<a href="#writing" onclick="change()" id="switch" class="toggle btn btn-default btn-lg">Writing Portfolio</a></div>
</section>
<section id="skills">
<div class="container-fluid skills-section text-center">
<h1 class="text-uppercase text-center"><em>Skills & Core Competencies</em><hr>
</h1>
<div class="container progress-skills">
<div class="row">
<div class="col-sm-3">
<h4>HTML 5</h4>
<div class="progress">
<div class="progress-bar progress-bar-custom" role="progressbar" aria-valuenow="86" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">
<h4>100%</h4>
<span class="sr-only">100% Complete</span>
</div>
</div>
</div>
<div class="col-sm-3">
<h4>CSS</h4>
<div class="progress">
<div class="progress-bar progress-bar-custom" role="progressbar" aria-valuenow="86" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">
<h4>100%</h4>
<span class="sr-only">100% Complete</span>
</div>
</div>
</div>
<div class="col-sm-3">
<h4>Bootstrap</h4>
<div class="progress">
<div class="progress-bar progress-bar-custom" role="progressbar" aria-valuenow="86" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">
<h4>100%</h4>
<span class="sr-only">100% Complete</span>
</div>
</div>
</div>
<div class="col-sm-3">
<h4>Javascript</h4>
<div class="progress">
<div class="progress-bar progress-bar-custom" role="progressbar" aria-valuenow="86" aria-valuemin="0" aria-valuemax="100" style="width: 86%;">
<h4>86%</h4>
<span class="sr-only">86% Complete</span>
</div>
</div>
</div>
<div class="col-sm-3">
<h4>SQL</h4>
<div class="progress">
<div class="progress-bar progress-bar-custom" role="progressbar" aria-valuenow="86" aria-valuemin="0" aria-valuemax="100" style="width: 90%;">
<h4>90%</h4>
<span class="sr-only">90% Complete</span>
</div>
</div>
</div>
<div class="col-sm-3">
<h4>C++</h4>
<div class="progress">
<div class="progress-bar progress-bar-custom" role="progressbar" aria-valuenow="86" aria-valuemin="0" aria-valuemax="100" style="width: 85%;">
<h4>85%</h4>
<span class="sr-only">70% Complete</span>
</div>
</div>
</div>
<div class="col-sm-3">
<h4>Web Design</h4>
<div class="progress">
<div class="progress-bar progress-bar-custom" role="progressbar" aria-valuenow="86" aria-valuemin="0" aria-valuemax="100" style="width: 92%;">
<h4>92%</h4>
<span class="sr-only">92% Complete</span>
</div>
</div>
</div>
<div class="col-sm-3">
<h4>Photoshop</h4>
<div class="progress">
<div class="progress-bar progress-bar-custom" role="progressbar" aria-valuenow="86" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">
<h4>100%</h4>
<span class="sr-only">100% Complete</span>
</div>
</div>
</div>
<div class="col-sm-3">
<h4>Eccomerce</h4>
<div class="progress">
<div class="progress-bar progress-bar-custom" role="progressbar" aria-valuenow="86" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">
<h4>100%</h4>
<span class="sr-only">100% Complete</span>
</div>
</div>
</div>
<div class="col-sm-3">
<h4>Database Management</h4>
<div class="progress">
<div class="progress-bar progress-bar-custom" role="progressbar" aria-valuenow="86" aria-valuemin="0" aria-valuemax="100" style="width: 90%;">
<h4>90%</h4>
<span class="sr-only">100% Complete</span>
</div>
</div>
</div>
<div class="col-sm-3">
<h4>SEM / SEO</h4>
<div class="progress">
<div class="progress-bar progress-bar-custom" role="progressbar" aria-valuenow="86" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">
<h4>100%</h4>
<span class="sr-only">100% Complete</span>
</div>
</div>
</div>
<div class="col-sm-3">
<h4>Pay Per Click </h4>
<div class="progress">
<div class="progress-bar progress-bar-custom" role="progressbar" aria-valuenow="86" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">
<h4>100%</h4>
<span class="sr-only">100% Complete</span>
</div>
</div>
</div>
<div class="col-sm-3">
<h4>SEO Copy Writing</h4>
<div class="progress">
<div class="progress-bar progress-bar-custom" role="progressbar" aria-valuenow="86" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">
<h4>100%</h4>
<span class="sr-only">100% Complete</span>
</div>
</div>
</div>
<div class="col-sm-3">
<h4>Technical Writing</h4>
<div class="progress">
<div class="progress-bar progress-bar-custom" role="progressbar" aria-valuenow="86" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">
<h4>100%</h4>
<span class="sr-only">100% Complete</span>
</div>
</div>
</div>
<div class="col-sm-3">
<h4>Creative Writing</h4>
<div class="progress">
<div class="progress-bar progress-bar-custom" role="progressbar" aria-valuenow="86" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">
<h4>100%</h4>
<span class="sr-only">100% Complete</span>
</div>
</div>
</div>
<div class="col-sm-3">
<h4>Blogging</h4>
<div class="progress">
<div class="progress-bar progress-bar-custom" role="progressbar" aria-valuenow="86" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">
<h4>100%</h4>
<span class="sr-only">100% Complete</span>
</div>
</div>
</div>
<div class="col-sm-3 col-md-offset-2">
<h4>Google Adwords</h4>
<div class="progress">
<div class="progress-bar progress-bar-custom" role="progressbar" aria-valuenow="86" aria-valuemin="0" aria-valuemax="100" style="width: 83%;">
<h4>83%</h4>
<span class="sr-only">100% Complete</span>
</div>
</div>
</div>
<div class="col-sm-3 col-md-offset-2">
<h4>Google Analytics</h4>
<div class="progress">
<div class="progress-bar progress-bar-custom" role="progressbar" aria-valuenow="86" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
<h4>80%</h4>
<span class="sr-only">100% Complete</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="contact1">
<div class="container-fluid skills-section text-center">
<div id="drop" class="navbar navbar-inverse navbar-fixed-bottom ">
<div class="container">
<p class="navbar-text pull-left">Site Built by T.M. Johnson</p>
<p class="navbar-text pull-right"> Email:&nbsp; <a href="#" class=" pull-right"> tmj72386@gmail.com</a></p>
</div>
</div>
</div>
</section>
<section id="contact2">
<div class="container-fluid skills-section ">
<h1>Contact Me:</h1><br>
<div class="row text-center">
<div class="col-md-4">
<span class=" glyphicon glyphicon-phone-alt"> 347.225.2289</span>
</div>
<div class=col-md-4>
<a target="_blank" href="https://www.facebook.com/terron.johnson.5" type="button" class="btn btn-primary btn-lg">Facebook</a>
<a href="https://www.linkedin.com/home?trk=nav_responsive_tab_home" target="_blank" type="button" class="btn btn-info btn-lg ">LinkedIn</a>
<a target="_blank" href="https://plus.google.com/u/0/" type="button" class=" btn btn-danger btn-lg">Google+</a>
<a target="_blank" href="https://www.freecodecamp.com/terron23" type="button" class=" btn btn-warning btn-lg">Skype</a>
</div>
<div class=col-md-4>
<span class=" glyphicon glyphicon-envelope"> tmj72386@gmail.com</span>
</div>
</div>
</section>
</body>
</html>
Raw
script.js
function notactive() {
var t = alert("News Letter Not Active as of yet. Check Out My Writing Portfolio");
return t;
}
$(document).ready(function() {
$(".toggle").click(function() {
$("#project-programming").fadeToggle("fast");
$("#project-writing").fadeToggle("fast");
});
});
function change() {
var elem = document.getElementById("switch");
if (elem.innerHTML == "Writing Portfolio") {
elem.innerHTML = "Programming Portfolio";
} else {
elem.innerHTML = "Writing Portfolio";
}
}
Raw
scripts
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Raw
style.css
html,
body {
margin: 0;
padding: 0;
}
#cover {
background: url("http://wallpapercave.com/wp/qaZcFEq.png") no-repeat;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
width: 100%;
height: 640px;
color: white;
text-align: center;
display: flex;
align-item: center;
}
#blackout {
background: rgba(0, 0, 0, .7);
height: 150%;
width: 100%;
height: 100%;
}
#cover-caption {
padding-top: 50px;
width: 100%;
height: 100%;
}
.navbar-right {
margin-right: 10px;
}
h1 {
font-size: 3vw;
}
.name {
color: white;
font-family: times;
font-weight: 300%;
}
.btn.outline {
background: none;
padding: 12px 22px;
}
.btn-danger.outline {
color: #d9534f;
}
.btn-info.outline {
color: #5bc0de;
}
.btn-primary.outline {
color: #0099cc;
}
.btn-primary.outline:hover,
.btn-primary.outline:focus,
.btn-primary.outline:active,
.btn-primary.outline.active {
color: #33a6cc;
border: solid 3px #0099cc;
}
.btn-info.outline:hover,
.btn-info.outline:focus,
.btn-info.outline:active,
.btn-info.outline.active {
color: #5bc0de;
border: solid 3px #5bc0de;
}
.btn-danger.outline:hover,
.btn-danger.outline:focus,
.btn-danger.outline:active,
.btn-danger.outline.active {
color: #d9534f;
border: solid 3px #d9534f;
}
a > p {
font-size: 40px;
color: #D3D3D3;
}
a>p:hover,
a>p:focus,
a>p:active,
a>p.active {
color: #33a6cc;
font-size: 50px;
}
a.btn-btn-secondary-outline:hover,
a.btn-btn-secondary-outline:focus,
a:active,
a.btn-btn-secondary-outline.active {
text-decoration: none;
}
#nav-main {
margin-bottom: 0px;
padding: 0px;
border: solid 1px;
border-color: black;
}
#nav-form {
margin-top: 10px;
}
#experience {
background-color: white;
padding-left: 50px;
padding-right: 50px;
padding-top: 0px;
padding-bottom: 50px;
}
.panel-body {
margin-left: 20px;
}
li > h2 {
font-size: 2vw;
}
li > h3 {
font-size: 1vw;
}
#projects {
background-color: #181816;
padding-left: 50px;
padding-right: 50px;
padding-top: 0px;
padding-bottom: 50px;
color: white;
font-size: 2vw;
}
#project-writing {
padding-top: 50px;
display: none;
}
#project-programming {
padding-top: 50px;
}
.caption {
color: white;
margin-top: 50px;
text-decoration: none
}
.caption>em>a {
color: white;
margin-top: 50px;
text-decoration: none
}
.smaller-writing>em>a {
color: white;
text-decoration: none
}
.smaller {
font-size: 2.5vw;
text-decoration: none
}
.smaller-writing {
font-size: 2vw;
margin-bottom: 0px;
}
iframe {
display: block;
height: 400px;
width: 600px;
}
.img-up {
height: 400px;
width: 600px;
}
.hovereffect {
width: 100%;
height: 100%;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
}
.hovereffect .overlay {
position: absolute;
overflow: hidden;
width: 80%;
height: 80%;
left: 10%;
top: 10%;
border-bottom: 1px solid #FFF;
border-top: 1px solid #FFF;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: scale(0,1);
-ms-transform: scale(0,1);
transform: scale(0,1);
}
.hovereffect:hover .overlay {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.hovereffect img {
display: block;
position: relative;
-webkit-transition: all 0.35s;
transition: all 0.35s;
}
.hovereffect:hover img {
filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="0.6" /><feFuncG type="linear" slope="0.6" /><feFuncB type="linear" slope="0.6" /></feComponentTransfer></filter></svg>#filter');
filter: brightness(0.6);
-webkit-filter: brightness(0.6);
}
.hovereffect h2 {
text-transform: uppercase;
text-align: center;
position: relative;
font-size: 17px;
background-color: transparent;
color: #FFF;
padding: 1em 0;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(0,-100%,0);
transform: translate3d(0,-100%,0);
}
.hovereffect a, hovereffect p {
color: #FFF;
padding: 1em 0;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(0,100%,0);
transform: translate3d(0,100%,0);
}
.hovereffect:hover a, .hovereffect:hover p, .hovereffect:hover h2 {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.padding-0 {
padding: 0;
}
.toggle {
margin-top: 10px;
padding-top: 10px;
}
#skills {
background-color: white;
margin-top: 50px;
padding-bottom: 100px;
}
.skills-section text-center {
font-size: 2vw;
color: black;
padding-top: 50px;
}
.img-circle {
max-width: 100%;
padding: 0px;
}
.progress {
background: rgba(220, 220, 220, 1);
border: 0px solid rgba(4, 0, 0, 1);
border-radius: 4px;
height: 40px;
box-shadow: 10px 10px 3px #888888;
}
.progress-bar-custom {
background: rgba(66, 139, 202, 1);
background: -webkit-linear-gradient(top, rgba(79, 90, 99, 1) 0%, rgba(66, 139, 202, 1) 100%);
background: linear-gradient(to bottom, rgba(79, 90, 99, 1) 0%, rgba(6, 139, 202, 1) 100%);
}
#contact2 {
background-color: #181816;
padding-left: 50px;
padding-right: 50px;
padding-top: 0px;
padding-bottom: 50px;
margin-bottom: 50px;
}
.glyphicon-phone-alt {
font-size: 30px;
color: white;
}
.glyphicon-envelope {
font-size: 30px;
color: white;
}
@media only screen and (max-width: 800px) {
body {
margin: 0 auto;
width: 100%;
height: 105%;
}
h1 {
font-size: 32px;
}
h2 {
font-size: 1.5vw;
}
h4 {
font-size: 20px;
}
li {
font-size: 16px;
width: 100%;
}
.panel {
width: 110%;
}
.btn-primary.outline:hover,
.btn-primary.outline:focus,
.btn-primary.outline:active,
.btn-primary.outline.active {
color: #33a6cc;
border: solid 0px #0099cc;
}
.btn-info.outline:hover,
.btn-info.outline:focus,
.btn-info.outline:active,
.btn-info.outline.active {
color: #5bc0de;
border: solid 0px #5bc0de;
}
.btn-danger.outline:hover,
.btn-danger.outline:focus,
.btn-danger.outline:active,
.btn-danger.outline.active {
color: #d9534f;
border: solid 0px #d9534f;
;
}
.btn-danger.outline {
padding: 10px;
color: #d9534f;
}
.btn-info.outline {
padding: 10px;
color: #5bc0de;
}
.btn-primary.outline {
padding: 10px;
color: #0099cc;
}
#contact1 {
font-size:7.5px;
margin-top:100px;
height: 100%;
}
#contact2 {
positiion: relative;
top: 150px;
}
.col-md-4>span {
font-size: 15px;
}
.caption {
font-size: 30px;
}
}
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment