- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| src | -
-
- |
- 100% | -249/249 | -66.66% | -2/3 | -100% | -1/1 | -100% | -249/249 | -
| src/components | -
-
- |
- 99% | -298/301 | -92.85% | -13/14 | -90% | -9/10 | -99% | -298/301 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 | 1x -1x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -1x - | import aboutSvg from "../assets/about_dev.svg";
-const About = () => {
- return (
- <section
- className='bg-white pt-20 dark:bg-slate-800 dark:text-white dark:border-l-8 dark:border-emerald-100'
- id='about'
- role='region'
- >
- <div className='mx-auto max-w-7xl px-8 grid md:grid-cols-1 items-center gap-16'>
- <article>
- <h2 role="heading" className='text-4xl font-medium tracking-wider text-center capitalize underline decoration-emerald-300 dark:decoration-dotted'>
- about me
- </h2>
-
- <p className='text-slate-500 md:text-center dark:text-slate-300 mt-8 leading-loose'>
- I am an adept Full Stack Developer with over two years of experience
- specializing in the MERN stack, well-versed in JavaScript and
- TypeScript. My expertise encompasses front-end and back-end
- development, proficiently utilizing technologies like React.js,
- Redux, Node.js, and Express.js,tailwindcss, nextjs to create responsive web applications
- and RESTful APIs. I excel in ensuring code quality through rigorous
- testing practices with technologies like jest,vitest,supertest,and cypress.
- Automated CI/CD pipelines with github actions, and efficient
- deployment strategies using firebase,flyctl,render and c-panel hosting.
- My passion for continuous learning and
- problem-solving fuels my commitment to delivering high-quality
- solutions and collaborating effectively within cross-functional
- teams. I am eager to contribute my skills and experience to new
- opportunities and challenges in the ever-evolving field of web
- development.
- </p>
- </article>
- </div>
- </section>
- );
-};
-export default About;
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 | 1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -2x -1x -1x -1x -1x -1x -1x -1x -1x -1x -2x -2x -2x -2x -2x -2x -2x -2x -2x -2x -2x -2x -2x -2x -2x -2x -2x -2x - | import educImg from "../assets/education.svg";
-export const Academic = ({ academic }) => {
- return (
- <section
- className='bg-white py-0 dark:bg-slate-800 dark:text-white dark:border-l-8 dark:border-emerald-100'
- id='education'
- data-testid='academic'
- >
- <div className='mx-auto max-w-7xl px-8 grid md:grid-cols-2 items-center gap-16'>
- <img
- src={educImg}
- alt='man reading a math book'
- className='w-full h-64 hover:animate-pulse'
- />
- <article>
- <h2 className='text-2xl font-medium tracking-wider capitalize mb-2 '>
- Education
- </h2>
- <div className='education__container grid gap-3'>
- {academic.map((academy) => (
- <Academy key={academy.institution} {...academy} />
- ))}
- </div>
- </article>
- </div>
- </section>
- );
-};
-
-const Academy = ({ course, date, institution }) => {
- return (
- <div className='education__content'>
- <div className='education__time'>
- <span className='education__rounder'></span>
- <span className='education__line'></span>
- </div>
- <div className='education__data grid'>
- <h3 className='education__title'>{course}</h3>
- <span className='education__year text-slate-500 dark:text-slate-300'>
- {date}
- </span>
- <span className='education__studies text-slate-500 dark:text-slate-300 leading-loose'>
- {institution}
- </span>
- </div>
- </div>
- );
-};
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 | 1x -1x -1x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -1x - | import { FaGithubSquare, FaLinkedin, FaTwitterSquare } from "react-icons/fa";
-
-const Footer = () => {
- return (
- <footer className='bg-emerald-100 dark:bg-slate-950 dark:text-white dark:border-x-8 dark:border-emerald-100'>
- <div className='w-full mx-auto max-w-screen-xl p-4 md:flex md:items-center md:justify-between'>
- <span className='text-sm text-gray-500 sm:text-center dark:text-gray-400'>
- © 2023{" "}
- <a href='https://flowbite.com/' className='hover:underline'>
- FullStack<span className='text-emerald-600'>Dev™</span>
- </a>
- . All Rights Reserved.
- </span>
- <ul className='flex flex-wrap items-center mt-3 text-sm font-medium text-gray-500 dark:text-gray-400 sm:mt-0'>
- <li>
- <a href='#' className='mr-4 hover:underline md:mr-6 '>
- 0789447622
- </a>
- </li>
- <li>
- <a href='#' className='mr-4 hover:underline md:mr-6'>
- hassanbulega@gmail.com
- </a>
- </li>
- <li className='pr-2'>
- <a href='#'>
- <FaGithubSquare
- className='h-4 w-4 text-slate-500 hover:text-black duration-300 '
- data-testid='github-icon'
- />
- </a>
- </li>
- <li className='pr-2'>
- <a href='#'>
- <FaLinkedin
- className='h-4 w-4 text-slate-500 hover:text-black duration-300 '
- data-testid='linkedin-icon'
- />
- </a>
- </li>
- <li>
- <a href='#'>
- <FaTwitterSquare
- className='h-4 w-4 text-slate-500 hover:text-black duration-300 '
- data-testid='twitter-icon'
- />
- </a>
- </li>
- </ul>
- </div>
- </footer>
- );
-};
-export default Footer;
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 | 1x -1x -1x -6x -6x -6x -6x -6x -6x -6x -6x -6x -6x -6x -6x -6x -6x -6x -6x -6x -6x -6x -6x -6x -6x -6x -6x -6x -6x -6x -6x -6x -6x -6x -6x -6x -6x -6x -6x -6x -6x -6x -6x -6x -6x -6x -6x -6x -6x -6x -1x - | import heroImg from "../assets/hero_dev.svg";
-import { FaGithubSquare, FaLinkedin, FaTwitterSquare } from "react-icons/fa";
-const Hero = () => {
- return (
- <section role="region" className='bg-emerald-100 py-24 dark:bg-slate-800 dark:text-white dark:border-x-8 dark:border-emerald-100'>
- <div className=' mx-auto max-w-7xl px-8 grid md:grid-cols-2 items-center gap-8'>
- <article>
- <h1 role="heading" className='text-7xl font-bold tracking-wider'>
- I'm Hassan Bulega
- </h1>
- <p className='mt-4 text-3xl text-slate-700 capitalize tracking-wide dark:text-white'>
- Full Stack Engineer
- </p>
- <p className='mt-2 text-lg text-slate-700 capitalize tracking-wide dark:text-white'>
- turning ideas into exciting and interactive reality to represent
- your presence worldwide. be it business or portfolio.
- </p>
- <div className='flex gap-x-4 mt-4'>
- <a href='#'>
- <FaGithubSquare
- className='h-8 w-8 text-slate-500 hover:text-black duration-300'
- data-testid='github-icon'
- />
- </a>
- <a href='#'>
- <FaLinkedin
- className='h-8 w-8 text-slate-500 hover:text-black duration-300'
- data-testid='linkedin-icon'
- />
- </a>
- <a href='#'>
- <FaTwitterSquare
- className='h-8 w-8 text-slate-500 hover:text-black duration-300'
- data-testid='twitter-icon'
- />
- </a>
- </div>
- </article>
-
- <article className='hidden md:block '>
- <img
- src={heroImg}
- alt='man coding on a laptop with an extended screen'
- className='h-80 lg:h-96'
- />
- </article>
- </div>
- </section>
- );
-};
-export default Hero;
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 | 1x -1x -1x -3x -3x -3x -3x -3x -3x -3x -3x -3x -18x -18x -18x -18x -18x -18x -18x -18x -18x -18x -3x -3x -3x -3x -3x -3x -3x -3x -3x -1x - | import { links } from "../data";
-import Switcher from "./Switcher";
-const Navbar = () => {
- return (
- <nav className='bg-emerald-100 sticky top-0 z-10 dark:bg-slate-950 dark:text-white dark:border-x-8 dark:border-emerald-100'>
- <div className='mx-auto max-w-7xl px-8 py-4 flex justify-between flex-col sm:flex-row sm:gap-x-16 sm:items-center sm:py-8'>
- <h2 className='text-3xl font-bold '>
- FullStack
- <span className='text-emerald-600'>Dev</span>
- </h2>
- <div className='flex gap-x-3 '>
- {links.map((link) => {
- const { id, href, text } = link;
- return (
- <a
- key={id}
- href={href}
- className='capitalize text-xl tracking-wide hover:text-emerald-600 duration-300'
- >
- {text}
- </a>
- );
- })}
- </div>
- <h2>
- <Switcher />
- </h2>
- </div>
- </nav>
- );
-};
-export default Navbar;
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 | 1x -1x -1x -1x -3x -3x -3x -3x -3x -3x -3x - - - -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x - | import { useState } from "react";
-import { DarkModeSwitch } from "react-toggle-dark-mode";
-import useDarkSide from "../useDarkSide";
-
-export default function Switcher() {
- const [colorTheme, setTheme] = useDarkSide();
- const [darkSide, setDarkSide] = useState(
- colorTheme === "light" ? true : false
- );
-
- const toggleDarkMode = (checked) => {
- setTheme(colorTheme);
- setDarkSide(checked);
- };
-
- return (
- <>
- <DarkModeSwitch
- checked={darkSide}
- onChange={toggleDarkMode}
- size={30}
- data-testid='switcher'
- />
- </>
- );
-}
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 | 1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -2x -1x -1x -1x -1x -1x -1x -1x -1x -1x -2x -2x -2x -2x -2x -2x -2x -2x -2x -2x -2x -2x -7x -7x -7x -7x -7x -2x -2x -2x -2x -2x - | import aboutSvg from "../assets/about_dev.svg";
-
-export const Works = ({ works }) => {
- return (
- <section
- className='bg-white py-10 dark:bg-slate-800 dark:text-white dark:border-l-8 dark:border-emerald-100'
- id='experience'
- data-testid='works'
- >
- <div className='mx-auto max-w-7xl px-8 grid md:grid-cols-2 items-center gap-16'>
- <img
- src={aboutSvg}
- alt='man sitted with laptop'
- className='w-full h-64 hover:animate-pulse'
- />
- <article>
- <h2 className='text-2xl font-medium tracking-wider capitalize mb-2 '>
- Experience
- </h2>
- <div className='experience__container grid gap-3'>
- {works.map((work) => (
- <Work key={work.company} {...work} />
- ))}
- </div>
- </article>
- </div>
- </section>
- );
-};
-
-const Work = ({ title, period, company, description }) => {
- return (
- <div className='experience__content'>
- <div className='experience__time'>
- <span className='experience__rounder'></span>
- <span className='experience__line'></span>
- </div>
- <div className='experience__data bd-grid'>
- <h3 className='text-sm'>{title}</h3>
- <span className=''>
- {period} | {company}
- </span>
- {description.map((desc, i) => (
- <ul key={i}>
- <li className='text-slate-500 dark:text-slate-300 list-disc'>
- {desc}
- </li>
- </ul>
- ))}
- </div>
- </div>
- );
-};
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| About.jsx | -
-
- |
- 100% | -37/37 | -100% | -1/1 | -100% | -1/1 | -100% | -37/37 | -
| Academic.jsx | -
-
- |
- 100% | -48/48 | -100% | -3/3 | -100% | -2/2 | -100% | -48/48 | -
| Footer.jsx | -
-
- |
- 100% | -54/54 | -100% | -1/1 | -100% | -1/1 | -100% | -54/54 | -
| Hero.jsx | -
-
- |
- 100% | -51/51 | -100% | -1/1 | -100% | -1/1 | -100% | -51/51 | -
| Navbar.jsx | -
-
- |
- 100% | -32/32 | -100% | -2/2 | -100% | -1/1 | -100% | -32/32 | -
| Switcher.jsx | -
-
- |
- 88.46% | -23/26 | -50% | -1/2 | -50% | -1/2 | -88.46% | -23/26 | -
| Works.jsx | -
-
- |
- 100% | -53/53 | -100% | -4/4 | -100% | -2/2 | -100% | -53/53 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 -141 -142 -143 -144 -145 -146 -147 -148 -149 -150 -151 -152 -153 -154 -155 -156 -157 -158 -159 -160 -161 -162 -163 -164 -165 -166 -167 -168 -169 -170 -171 -172 -173 -174 -175 -176 -177 -178 -179 -180 -181 -182 -183 -184 -185 -186 -187 -188 -189 -190 -191 -192 -193 -194 -195 -196 -197 -198 -199 -200 -201 -202 -203 -204 -205 -206 -207 -208 -209 -210 -211 -212 -213 -214 -215 -216 -217 -218 -219 -220 -221 -222 -223 -224 -225 -226 -227 -228 -229 -230 -231 -232 -233 -234 -235 | 1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x - | import { nanoid } from "nanoid";
-import { FaHtml5, FaJs, FaReact, FaCss3 } from "react-icons/fa";
-import { TbBrandNextjs } from "react-icons/tb";
-import {
- SiTailwindcss,
- SiMongodb,
- SiMongoose,
- SiGit,
- SiGithub,
- SiNodedotjs,
- SiExpress,
- SiTypescript,
- SiGithubactions,
- SiCypress,
-} from "react-icons/si";
-export const links = [
- { id: nanoid(), href: "#home", text: "home" },
- { id: nanoid(), href: "#about", text: "about" },
- { id: nanoid(), href: "#skills", text: "skills" },
- { id: nanoid(), href: "#projects", text: "projects" },
- { id: nanoid(), href: "#testimonials", text: "testimonials" },
- { id: nanoid(), href: "#contact", text: "contact" },
-];
-
-export const skills = [
- {
- id: nanoid(),
- title: "HTML&CSS",
- icon: <FaHtml5 className='h-16 w-16 text-emerald-500' />,
- text: "Highly skilled in HTML & CSS, adeptly crafting visually appealing and responsive websites for optimal user experiences.",
- },
- {
- id: nanoid(),
- title: "Javascript",
- icon: <FaJs className='h-16 w-16 text-emerald-500' />,
- text: "Expertise in JavaScript, building interactive and dynamic web applications with a focus on seamless user interactions and functionality",
- },
- {
- id: nanoid(),
- title: "React",
- icon: <FaReact className='h-16 w-16 text-emerald-500' />,
- text: "Advanced proficiency in React, developing efficient and interactive front-end applications with a strong emphasis on component-based architecture.",
- },
- {
- id: nanoid(),
- title: "HTML&CSS",
- icon: <FaCss3 className='h-16 w-16 text-emerald-500' />,
- text: "Highly skilled in HTML & CSS, adeptly crafting visually appealing and responsive websites for optimal user experiences.",
- },
- {
- id: nanoid(),
- title: "HTML&CSS",
- icon: <SiTailwindcss className='h-16 w-16 text-emerald-500' />,
- text: "Highly skilled in HTML & CSS, adeptly crafting visually appealing and responsive websites for optimal user experiences.",
- },
- {
- id: nanoid(),
- title: "Javascript",
- icon: <TbBrandNextjs className='h-16 w-16 text-emerald-500' />,
- text: "Expertise in JavaScript, building interactive and dynamic web applications with a focus on seamless user interactions and functionality",
- },
- {
- id: nanoid(),
- title: "React",
- icon: <SiNodedotjs className='h-16 w-16 text-emerald-500' />,
- text: "Advanced proficiency in React, developing efficient and interactive front-end applications with a strong emphasis on component-based architecture.",
- },
- {
- id: nanoid(),
- title: "HTML&CSS",
- icon: <SiExpress className='h-16 w-16 text-emerald-500' />,
- text: "Highly skilled in HTML & CSS, adeptly crafting visually appealing and responsive websites for optimal user experiences.",
- },
- {
- id: nanoid(),
- title: "Javascript",
- icon: <SiMongodb className='h-16 w-16 text-emerald-500' />,
- text: "Expertise in JavaScript, building interactive and dynamic web applications with a focus on seamless user interactions and functionality",
- },
- {
- id: nanoid(),
- title: "React",
- icon: <SiMongoose className='h-16 w-16 text-emerald-500' />,
- text: "Advanced proficiency in React, developing efficient and interactive front-end applications with a strong emphasis on component-based architecture.",
- },
- {
- id: nanoid(),
- title: "HTML&CSS",
- icon: <SiTypescript className='h-16 w-16 text-emerald-500' />,
- text: "Highly skilled in HTML & CSS, adeptly crafting visually appealing and responsive websites for optimal user experiences.",
- },
- {
- id: nanoid(),
- title: "Javascript",
- icon: <SiGit className='h-16 w-16 text-emerald-500' />,
- text: "Expertise in JavaScript, building interactive and dynamic web applications with a focus on seamless user interactions and functionality",
- },
- {
- id: nanoid(),
- title: "Github",
- icon: <SiGithub className='h-16 w-16 text-emerald-500' />,
- text: "Advanced proficiency in React, developing efficient and interactive front-end applications with a strong emphasis on component-based architecture.",
- },
- {
- id: nanoid(),
- title: "Github Actions",
- icon: <SiGithubactions className='h-16 w-16 text-emerald-500' />,
- text: "Expertise in JavaScript, building interactive and dynamic web applications with a focus on seamless user interactions and functionality",
- },
- {
- id: nanoid(),
- title: "Cypress",
- icon: <SiCypress className='h-16 w-16 text-emerald-500' />,
- text: "Advanced proficiency in React, developing efficient and interactive front-end applications with a strong emphasis on component-based architecture.",
- },
-];
-
-export const projects = [
- {
- id: nanoid(),
- img: "https://images.pexels.com/photos/326503/pexels-photo-326503.jpeg?auto=compress&cs=tinysrgb&w=800",
- title: "first project",
- text: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Asperiores aperiam porro impedit tenetur quo hic omnis doloribus dolores enim deleniti.",
- },
- {
- id: nanoid(),
- img: "https://images.pexels.com/photos/2148222/pexels-photo-2148222.jpeg?auto=compress&cs=tinysrgb&w=800",
-
- title: "second project",
- text: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Asperiores aperiam porro impedit tenetur quo hic omnis doloribus dolores enim deleniti.",
- },
- {
- id: nanoid(),
- img: "https://images.pexels.com/photos/12883026/pexels-photo-12883026.jpeg?auto=compress&cs=tinysrgb&w=800",
-
- title: "third project",
- text: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Asperiores aperiam porro impedit tenetur quo hic omnis doloribus dolores enim deleniti.",
- },
- {
- id: nanoid(),
- img: "https://images.pexels.com/photos/326503/pexels-photo-326503.jpeg?auto=compress&cs=tinysrgb&w=800",
- title: "Forth project",
- text: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Asperiores aperiam porro impedit tenetur quo hic omnis doloribus dolores enim deleniti.",
- },
- {
- id: nanoid(),
- img: "https://images.pexels.com/photos/2148222/pexels-photo-2148222.jpeg?auto=compress&cs=tinysrgb&w=800",
-
- title: "Fifth project",
- text: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Asperiores aperiam porro impedit tenetur quo hic omnis doloribus dolores enim deleniti.",
- },
- {
- id: nanoid(),
- img: "https://images.pexels.com/photos/12883026/pexels-photo-12883026.jpeg?auto=compress&cs=tinysrgb&w=800",
-
- title: "sixth project",
- text: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Asperiores aperiam porro impedit tenetur quo hic omnis doloribus dolores enim deleniti.",
- },
-];
-export const testimonials = [
- {
- id: nanoid(),
- url: "https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(1).jpg",
- name: "Maria Sammy",
- role: "Hotel Manager",
- comment:
- "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos rend kdcnci ijvos jvodjd kncno hdkc jlc",
- },
- {
- id: nanoid(),
- url: "https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(2).jpg",
- name: "Racheal Sanders",
- role: "Chief Cook",
- comment:
- "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos rend kdcnci ijvos jvodjd kncno hdkc jlc",
- },
- {
- id: nanoid(),
- url: "https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(9).jpg",
- name: "John Doe",
- role: "Cafe chains Manager",
- comment:
- "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos rend kdcnci ijvos jvodjd kncno hdkc jlc",
- },
-];
-
-export const experience = {
- works: [
- {
- title: "FULL-STACK DEVELOPER",
- period: "Sept. 2022 - Present",
- company: "Smarter Labs",
- description: [
- "Collaborated with other developers to build a react based UI for the online smartlabs. The UI used context API and later changed to use Redux.",
- "Collaborated with other developers to build the smart-labs API with node, express and mongo DB",
- "Deploying using firebase(frontend) and fly.io(backend) plus CI/CD.",
- "Maintaining the codebase, debugging and adding new features",
- ],
- },
- {
- title: "CEO AND FULL-STACK DEVELOPER",
- period: "July. 2021 - Present",
- company: "Hasgotech",
- description: [
- "A self company where I make web apps per client request.",
- "Use of MERN stack with nextjs-13,bootstrap,tailwindcss and other technologies to build both frontend and full stack apps",
- "Hosting of client projects using c-panel-hosting, firebase, vercel, fly.io and render",
- ],
- },
- ],
- academic: [
- {
- course: "BSc Physics & Mathematics with Education",
- date: "2015-2019",
- institution: "Makerere University",
- },
-
- {
- course: "Uganda Advanced Certificate of Education",
- date: "2012-2013",
- institution: "Gayaza Cambridge College",
- },
- {
- course: "Uganda Certificate of Education",
- date: "2008-2011",
- institution: "Gayaza Cambridge College",
- },
- {
- course: "CCNA, Huaawei Cloud and Security",
- date: "2019-2020",
- institution: "Self Taught and Online Resources",
- },
- ],
-};
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| data.jsx | -
-
- |
- 100% | -234/234 | -100% | -0/0 | -100% | -0/0 | -100% | -234/234 | -
| useDarkSide.js | -
-
- |
- 100% | -15/15 | -66.66% | -2/3 | -100% | -1/1 | -100% | -15/15 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 | 1x -1x -1x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x -3x - | import { useState, useEffect } from "react";
-
-export default function useDarkSide() {
- const [theme, setTheme] = useState(localStorage.theme);
- const colorTheme = theme === "dark" ? "light" : "dark";
-
- useEffect(() => {
- const root = window.document.documentElement;
- root.classList.remove(colorTheme);
- root.classList.add(theme);
- localStorage.setItem("theme", theme);
- }, [theme, colorTheme]);
-
- return [colorTheme, setTheme];
-}
- |