Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

added portfolio website #125

Merged
merged 1 commit into from
Oct 9, 2022
Merged

added portfolio website #125

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
added portfolio website
  • Loading branch information
@Collins-Omariba
Collins-Omariba committed Oct 9, 2022
commit 27cfd1ee0814715ce66f8af565009c29915b0e9b
91 changes: 91 additions & 0 deletions OmaribaCollins/BootCampWebsite.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BootCamp Website</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">

<!-- fonts (confirm link) -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Code+Pro:300,900
|Source+Sans+Pro:300,900&display=swap">

<link rel="stylesheet" href="css/style.css">


</head>
<body>
<header>
<div class="logo">
<img src="img/logo.png" alt="HTML tag logo">
</div>
<button class="nav-toggle" aria-label="toggle navigation">
<span class="hamburger"></span>
</button>
<nav class="nav">
<ul class="nav__list">
<li class="nav__item"><a href="index.html"class="nav__link">Home</a></li>
<li class="nav__item"><a href="index.html#services"class="nav__link">My services</a></li>
<li class="nav__item"><a href="index.html#about"class="nav__link">About me </a></li>
<li class="nav__item"><a href="index.html#work"class="nav__link">My work</a></li>
</ul>
</nav>
</header>

<!--Introduction-->

<section class="intro" id="home">
<h1 class="section__title section__title--intro">
BootCamp <strong> Website</strong>
</h1>
<p class="section___subtitle section___subtitle--intro">
<a href="https://github.com/Collins-Omariba/Bootcamp-website" class="github__link">
<i class="fab fa-github"></i> <Strong>WEBSITE CODE</Strong></a>
</p>
<img src="img/BOOTCAMP Website.png" alt="screenshot of website" class="intro__img">

</section>

<div class="portfolio-item-individual">
<p>The website is made using HTML , Javascript , CSS and the Bootstrap library. </p>

<p>It is very elegant and professionaly looking website that conveys a lot of information at a glance ,
It is also easy to navigate and interact with</p>

<h3 class="screen_shot_text" ><strong>Below is a link to the live website</strong> </h3>
<button class="btn"
onclick="window.location.href='https://collins-omariba.github.io/Bootcamp-website/';" >
OPEN</button>

</div>


<!--Footer -->
<footer class="footer">
<a href="mailto:collinsomariba@gmail.com" class="footer__link">collinsomariba@gmail.com</a>
<ul class="social-list">

<li class="social-list__item">
<a href="https://github.com/Collins-Omariba" class="social-list__link">
<i class="fab fa-github"></i>
</a>
</li>

<li class="social-list__item">
<a href="https://www.linkedin.com/in/omariba-collins-b28b841b9" class="social-list__link">
<i class="fab fa-linkedin"></i>
</a>
</li>
<li class="social-list__item">
<a href="https://twitter.com/OmaribaCollins" class="social-list__link">
<i class="fab fa-twitter"></i>
</a>
</li>

</ul>
</footer>
<script src="js/index.js"></script>
</body>
</html>
21 changes: 21 additions & 0 deletions OmaribaCollins/LICENSE
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
MIT License

Copyright (c) 2022 Onami Omariba Collins

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
89 changes: 89 additions & 0 deletions OmaribaCollins/Note-Taking-web-App.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Note-Taking-Web-App</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">

<!-- fonts (confirm link) -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Code+Pro:300,900
|Source+Sans+Pro:300,900&display=swap">

<link rel="stylesheet" href="css/style.css">


</head>
<body>
<header>
<div class="logo">
<img src="img/logo.png" alt="HTML tag logo">
</div>
<button class="nav-toggle" aria-label="toggle navigation">
<span class="hamburger"></span>
</button>
<nav class="nav">
<ul class="nav__list">
<li class="nav__item"><a href="index.html"class="nav__link">Home</a></li>
<li class="nav__item"><a href="index.html#services"class="nav__link">My services</a></li>
<li class="nav__item"><a href="index.html#about"class="nav__link">About me </a></li>
<li class="nav__item"><a href="index.html#work"class="nav__link">My work</a></li>
</ul>
</nav>
</header>

<!--Introduction-->

<section class="intro" id="home">
<h1 class="section__title section__title--intro">
Note Taking <strong> Web App</strong>
</h1>
<p class="section___subtitle section___subtitle--intro">
<a href="https://github.com/Collins-Omariba/FLASK-WEB-APPLICATION" class="github__link">
<i class="fab fa-github"></i> <Strong> WEBSITE CODE</Strong></a> </p>
<img src="img/face.png" alt="" class="intro__img">

</section>

<div class="portfolio-item-individual">
<p>The website's Backend is made using <strong>Flask</strong> , <strong>Flask-SQLAlchemy </strong> and <strong>flask-login</strong> . Users can signup by creating an account using their credentials
and be able to login and out securely .</p>

<h3 class="screen_shot_text" ><strong>Below is a screenshot of the website</strong> </h3>

<img src="img/Note-Taking-Web-App.png" alt="">

<p>It is very elegant and can Convey a lot of information at a glance ,
It is also easy to navigate and interact with</p>
</div>


<!--Footer -->
<footer class="footer">
<a href="mailto:collinsomariba@gmail.com" class="footer__link">collinsomariba@gmail.com</a>
<ul class="social-list">

<li class="social-list__item">
<a href="https://github.com/Collins-Omariba" class="social-list__link">
<i class="fab fa-github"></i>
</a>
</li>

<li class="social-list__item">
<a href="https://www.linkedin.com/in/omariba-collins-b28b841b9" class="social-list__link">
<i class="fab fa-linkedin"></i>
</a>
</li>
<li class="social-list__item">
<a href="https://twitter.com/OmaribaCollins" class="social-list__link">
<i class="fab fa-twitter"></i>
</a>
</li>

</ul>
</footer>
<script src="js/index.js"></script>
</body>
</html>
4 changes: 4 additions & 0 deletions OmaribaCollins/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
# Collins-Omariba.github.io

My portfolio website .
🔗 https://collins-omariba.github.io/
113 changes: 113 additions & 0 deletions OmaribaCollins/Spotify-music-rooms.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,113 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Note-Taking-Web-App</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">

<!-- fonts (confirm link) -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Code+Pro:300,900
|Source+Sans+Pro:300,900&display=swap">

<link rel="stylesheet" href="css/style.css">


</head>
<body>
<header>
<div class="logo">
<img src="img/logo.png" alt="HTML tag logo">
</div>
<button class="nav-toggle" aria-label="toggle navigation">
<span class="hamburger"></span>
</button>
<nav class="nav">
<ul class="nav__list">
<li class="nav__item"><a href="index.html"class="nav__link">Home</a></li>
<li class="nav__item"><a href="index.html#services"class="nav__link">My services</a></li>
<li class="nav__item"><a href="index.html#about"class="nav__link">About me </a></li>
<li class="nav__item"><a href="index.html#work"class="nav__link">My work</a></li>
</ul>
</nav>
</header>

<!--Introduction-->

<section class="intro" id="home">
<h1 class="section__title section__title--intro">
Spotify Music Rooms <strong> Web App</strong>
</h1>
<p class="section___subtitle section___subtitle--intro">
<a href="https://github.com/Collins-Omariba/music_control" class="github__link">
<i class="fab fa-github"></i> <Strong> WEBSITE CODE</Strong></a> </p>
<img src="img/musify_home.png" alt="" class="intro__img">

</section>

<div class="portfolio-item-individual">
<p> A room can be created by clicking the create room button and choosing
whether guests of the room can be allowed to play/pause
and the number of votes required to skip a song .

After creating a room the host can still change whether
guests can play/pause and the votes required to skip by clicking the settings button
</p>

<p> A host can share their room code to guests who
can click the join room button and type/paste
the room code to the shown box ,then click the Enter A Room button.
</p>

<p>
It is a great web app that implements serverside rendering of <strong>React</strong> code ,
the react frontend sends requests to the endpoints of the <strong>Django</strong> backend api.
</p>

<p>
The use of <strong>Spotify API</strong> enables accessing of playback information from spotify and also control of
music playing.
</p>

<h3 class="screen_shot_text" ><strong>Below are screenshots of the website</strong> </h3>

<h4>1. Creating A room</h4>
<img src="img/musify_create_room.png" alt="">

<h4>2. joining A room</h4>
<img src="img/musify_join_room.png" alt="">

<h4>3. Music Playing interface</h4>
<img src="img/musify_music_playing.png" alt="">
</div>


<!--Footer -->
<footer class="footer">
<a href="mailto:collinsomariba@gmail.com" class="footer__link">collinsomariba@gmail.com</a>
<ul class="social-list">

<li class="social-list__item">
<a href="https://github.com/Collins-Omariba" class="social-list__link">
<i class="fab fa-github"></i>
</a>
</li>

<li class="social-list__item">
<a href="https://www.linkedin.com/in/omariba-collins-b28b841b9" class="social-list__link">
<i class="fab fa-linkedin"></i>
</a>
</li>
<li class="social-list__item">
<a href="https://twitter.com/OmaribaCollins" class="social-list__link">
<i class="fab fa-twitter"></i>
</a>
</li>

</ul>
</footer>
<script src="js/index.js"></script>
</body>
</html>
Loading