Skip to content

Commit 87af802

Browse files
tuganimanatuganimana
committed
adding a toggle
1 parent 73694e8 commit 87af802

File tree

3 files changed

+186
-7
lines changed

3 files changed

+186
-7
lines changed

‎public/index.html

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,10 @@
77
<meta name="theme-color" content="#000000" />
88
<meta
99
name="description"
10-
content="Web site created using create-react-app"
10+
content="Popschools -We exist today to create an inclusive community for pre-career and early-career software developers, provide opportunities for networking, and make pathways to paying work in tech roles "
1111
/>
1212
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo.png" />
13+
1314
<!--
1415
manifest.json provides metadata used when your web app is installed on a
1516
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@@ -26,6 +27,8 @@
2627
Learn how to configure a non-root public URL by running `npm run build`.
2728
-->
2829
<title>Popschools.org - Welcome to popschools </title>
30+
<script src="js/uikit.min.js"></script>
31+
<script src="js/uikit-icons.min.js"></script>
2932
</head>
3033
<body>
3134
<noscript>You need to enable JavaScript to run this app.</noscript>

‎src/components/Home.js

Lines changed: 151 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,12 @@ import '../App.css';
55
import 'bulma/css/bulma.css'
66
import Homeimage from '../image/home.jpeg';
77
import {AnimatedOnScroll} from "react-animated-css-onscroll";
8-
import {CheckCircleFilled,GithubFilled,InteractionFilled,TwitterCircleFilled,FacebookFilled} from '@ant-design/icons';
8+
import {CheckCircleFilled,GithubFilled,InteractionFilled,TwitterCircleFilled,FacebookFilled,RightOutlined,LeftOutlined} from '@ant-design/icons';
99
import about from '../image/home.jpeg';
1010
import bak from '../image/bak.svg';
1111
import Footer from './Footer';
12+
import 'uikit/dist/css/uikit.css';
13+
import 'uikit/dist/js/uikit';
1214
function Home(){
1315
return (
1416
<div>
@@ -109,7 +111,7 @@ function Home(){
109111
<div>
110112

111113

112-
<p className="text-lg text-gray-600 px-3 py-4 " data-aos="fade-left">My work is about creating opportunities for technologists like myself who are just getting started in their tech careers.
114+
<p className="text-lg text-gray-600 px-3 py-4 prose " data-aos="fade-left">My work is about creating opportunities for technologists like myself who are just getting started in their tech careers.
113115

114116
I recognize from experience the extra effort it takes to get a great start when you are dealing with financial hardships and a number of non-negotiable adult responsibilities.
115117

@@ -123,6 +125,153 @@ When you sponsor me, you allow me the mental space to do my work to the best of
123125

124126
</div>
125127
{/* Sponsors */}
128+
<div className=" py-8 bg-purple-400">
129+
<div className="container">
130+
<p className=" text-center text-2xl font-extrabold text-gray-600">Our Sponsors</p>
131+
<center><hr className="w-48"/></center>
132+
</div>
133+
<div uk-slider="center: true" >
134+
135+
<div className="uk-position-relative uk-visible-toggle uk-light" tabindex="-1">
136+
137+
<ul className="uk-slider-items uk-child-width-1-5@s uk-grid">
138+
139+
<li >
140+
<div className="bg-gray-200 rounded-lg shadow">
141+
<a href=""> <div className=" ">
142+
<div className="rounded-lg" uk-scrollspy-class="uk-animation-slide-top">
143+
<img className="rounded-t-lg md:h-64" src={about} width="100%" />
144+
145+
</div>
146+
<div className=" rounded-lg uk-animation-slide-left-small mt-2 mb-4 ">
147+
<p className="text-gray-700 text-center text-sm px-2 py-2 font-bold">@Company</p>
148+
149+
150+
</div>
151+
152+
</div></a>
153+
</div>
154+
</li>
155+
<li >
156+
<div className="bg-gray-200 rounded-lg shadow">
157+
<a href=""> <div className=" ">
158+
<div className="rounded-lg" uk-scrollspy-class="uk-animation-slide-top">
159+
<img className="rounded-t-lg md:h-64" src={about} width="100%" />
160+
161+
</div>
162+
<div className=" rounded-lg uk-animation-slide-left-small mt-2 mb-4 ">
163+
<p className="text-gray-700 text-center text-sm px-2 py-2 font-bold">@Company</p>
164+
165+
166+
</div>
167+
168+
</div></a>
169+
</div>
170+
</li> <li >
171+
<div className="bg-gray-200 rounded-lg shadow">
172+
<a href=""> <div className=" ">
173+
<div className="rounded-lg" uk-scrollspy-class="uk-animation-slide-top">
174+
<img className="rounded-t-lg md:h-64" src={about} width="100%" />
175+
176+
</div>
177+
<div className=" rounded-lg uk-animation-slide-left-small mt-2 mb-4 ">
178+
<p className="text-gray-700 text-center text-sm px-2 py-2 font-bold">@Company</p>
179+
180+
181+
</div>
182+
183+
</div></a>
184+
</div>
185+
</li> <li >
186+
<div className="bg-gray-200 rounded-lg shadow">
187+
<a href=""> <div className=" ">
188+
<div className="rounded-lg" uk-scrollspy-class="uk-animation-slide-top">
189+
<img className="rounded-t-lg md:h-64" src={about} width="100%" />
190+
191+
</div>
192+
<div className=" rounded-lg uk-animation-slide-left-small mt-2 mb-4 ">
193+
<p className="text-gray-700 text-center text-sm px-2 py-2 font-bold">@Company</p>
194+
195+
196+
</div>
197+
198+
</div></a>
199+
</div>
200+
</li> <li >
201+
<div className="bg-gray-200 rounded-lg shadow">
202+
<a href=""> <div className=" ">
203+
<div className="rounded-lg" uk-scrollspy-class="uk-animation-slide-top">
204+
<img className="rounded-t-lg md:h-64" src={about} width="100%" />
205+
206+
</div>
207+
<div className=" rounded-lg uk-animation-slide-left-small mt-2 mb-4 ">
208+
<p className="text-gray-700 text-center text-sm px-2 py-2 font-bold">@Company</p>
209+
210+
211+
</div>
212+
213+
</div></a>
214+
</div>
215+
</li> <li >
216+
<div className="bg-gray-200 rounded-lg shadow">
217+
<a href=""> <div className=" ">
218+
<div className="rounded-lg" uk-scrollspy-class="uk-animation-slide-top">
219+
<img className="rounded-t-lg md:h-64" src={about} width="100%" />
220+
221+
</div>
222+
<div className=" rounded-lg uk-animation-slide-left-small mt-2 mb-4 ">
223+
<p className="text-gray-700 text-center text-sm px-2 py-2 font-bold">@Company</p>
224+
225+
226+
</div>
227+
228+
</div></a>
229+
</div>
230+
</li> <li >
231+
<div className="bg-gray-200 rounded-lg shadow">
232+
<a href=""> <div className=" ">
233+
<div className="rounded-lg" uk-scrollspy-class="uk-animation-slide-top">
234+
<img className="rounded-t-lg md:h-64" src={about} width="100%" />
235+
236+
</div>
237+
<div className=" rounded-lg uk-animation-slide-left-small mt-2 mb-4 ">
238+
<p className="text-gray-700 text-center text-sm px-2 py-2 font-bold">@Company</p>
239+
240+
241+
</div>
242+
243+
</div></a>
244+
</div>
245+
</li> <li >
246+
<div className="bg-gray-200 rounded-lg shadow">
247+
<a href=""> <div className=" ">
248+
<div className="rounded-lg" uk-scrollspy-class="uk-animation-slide-top">
249+
<img className="rounded-t-lg md:h-64" src={about} width="100%" />
250+
251+
</div>
252+
<div className=" rounded-lg uk-animation-slide-left-small mt-2 mb-4 ">
253+
<p className="text-gray-700 text-center text-sm px-2 py-2 font-bold">@Company</p>
254+
255+
256+
</div>
257+
258+
</div></a>
259+
</div>
260+
</li>
261+
262+
263+
</ul>
264+
<a className="uk-position-center-left uk-position-small uk-hidden-hover bg-purple-600 text-white font-bold rounded-full shadow h-8 w-8 px-3 " href="#" uk-slider-item="previous"><LeftOutlined /></a>
265+
<a className="uk-position-center-right uk-position-small uk-hidden-hover bg-purple-600 text-white font-bold rounded-full shadow h-8 w-8 px-3" href="#" uk-slider-item="next"><RightOutlined /></a>
266+
</div>
267+
268+
<ul className="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>
269+
270+
</div>
271+
</div>
272+
273+
274+
{/* end sponsors */}
126275

127276
{/* Contributors */}
128277

‎src/components/Navbar.js

Lines changed: 31 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,43 @@
1-
import React, { useState,useEffect } from 'react';
1+
import React, { useState,useEffect,useRef } from 'react';
22
import Logo from '../image/logo.png';
33
import '../css/tailwind.css';
44
import AOS from 'aos';
55
import 'aos/dist/aos.css';
66
import 'bulma/css/bulma.css'
77
import '../App.css';
8+
9+
810
AOS.init();
911
function Navbar(){
12+
const ref = useRef();
13+
const [isOpen, setIsOpen] = useState('navbar-menu')
1014
const [scrolling, setScrolling] = useState(false);
1115
const [scrollTop, setScrollTop] = useState(0);
1216
const [status, setStatus] =useState('navbar is-transparent has-background-light back ');
17+
function useOnClickOutside(ref, handler) {
18+
useEffect(
19+
() => {
20+
const listener = event => {
21+
// Do nothing if clicking ref's element or descendent elements
22+
if (!ref.current || ref.current.contains(event.target)) {
23+
return;
24+
}
25+
26+
handler(event);
27+
};
28+
29+
document.addEventListener('mousedown', listener);
30+
document.addEventListener('touchstart', listener);
1331

32+
return () => {
33+
document.removeEventListener('mousedown', listener);
34+
document.removeEventListener('touchstart', listener);
35+
};
36+
},
37+
[ref, handler]
38+
);
39+
}
40+
useOnClickOutside(ref, () => setIsOpen('navbar-menu'));
1441

1542

1643
useEffect(() => {
@@ -41,14 +68,14 @@ return(
4168
<a className="navbar-item" href="https://bulma.io">
4269
<img src={Logo} alt="logo" />
4370
</a>
44-
<div className="navbar-burger burger" data-target="navbarExampleTransparentExample">
71+
<div className="navbar-burger burger" onClick={() => setIsOpen('block')}>
4572
<span></span>
4673
<span></span>
4774
<span></span>
4875
</div>
4976
</div>
5077

51-
<div id="navbarExampleTransparentExample" className="navbar-menu">
78+
<div className={isOpen} ref={ref}>
5279
<div className="navbar-start">
5380
<a className="navbar-item text-gray-600 text-md font-bold " href="https://bulma.io/">
5481
Home
@@ -74,7 +101,7 @@ return(
74101
<p className="control">
75102

76103
<a className="bg-purple-900 px-4 text-gray-100 font-bold md:w-32 py-2 rounded-full shadow-lg">
77-
<strong>Become a Sponsor </strong>
104+
<strong>Become a sponsor </strong>
78105
</a>
79106

80107
</p>

0 commit comments

Comments
 (0)