├── README.md ├── img ├── bg13.jpg ├── fav.png ├── index.PNG ├── me.jpeg ├── meuh.jpeg ├── blacpic.jpg └── favicon.jpeg ├── js ├── print.js └── contact.js ├── pages ├── loyaut.html ├── login.html ├── contact.html ├── about.html ├── service.html └── resume.html ├── css ├── loyaut.css ├── services.css ├── portifolio.css ├── login.css ├── contact.css ├── resume.css └── about.css └── index.html /README.md: -------------------------------------------------------------------------------- 1 | # code-with-Edison 2 | my official personal portifolio website 3 | -------------------------------------------------------------------------------- /img/bg13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeWithEdison/code-with-Edison/HEAD/img/bg13.jpg -------------------------------------------------------------------------------- /img/fav.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeWithEdison/code-with-Edison/HEAD/img/fav.png -------------------------------------------------------------------------------- /img/index.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeWithEdison/code-with-Edison/HEAD/img/index.PNG -------------------------------------------------------------------------------- /img/me.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeWithEdison/code-with-Edison/HEAD/img/me.jpeg -------------------------------------------------------------------------------- /img/meuh.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeWithEdison/code-with-Edison/HEAD/img/meuh.jpeg -------------------------------------------------------------------------------- /img/blacpic.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeWithEdison/code-with-Edison/HEAD/img/blacpic.jpg -------------------------------------------------------------------------------- /img/favicon.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeWithEdison/code-with-Edison/HEAD/img/favicon.jpeg -------------------------------------------------------------------------------- /js/print.js: -------------------------------------------------------------------------------- 1 | window.jsPDF = window.jspdf.jsPDF; 2 | var docPDF = jspdf(); 3 | function print(){ 4 | var elementHTML = 5 | document.querySelector("#printResume") 6 | docPDF 7 | } -------------------------------------------------------------------------------- /pages/loyaut.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /css/loyaut.css: -------------------------------------------------------------------------------- 1 | .nav { 2 | height: ; 3 | display: inline-block; 4 | justify-content: left; 5 | padding: 10px 0px; 6 | margin-top: 0px; 7 | font-size: 20px; 8 | } 9 | 10 | .nav ul li { 11 | list-style: none; 12 | display: inline-block; 13 | padding: 10px 20px; 14 | } 15 | .nav ul li a { 16 | text-decoration: none; 17 | color: #1d1d24; 18 | position: relative; 19 | padding: 5px 0; 20 | } 21 | .nav ul li a:hover { 22 | color: #fd4766; 23 | } 24 | .nav ul li a:after { 25 | content: ""; 26 | position: absolute; 27 | left: 0; 28 | width: 0; 29 | height: 3px; 30 | background: #fd4766; 31 | transition: 0.3s; 32 | bottom: 0; 33 | } 34 | .nav ul li a:hover:after { 35 | width: 100%; 36 | } -------------------------------------------------------------------------------- /js/contact.js: -------------------------------------------------------------------------------- 1 | function contactMe(){ 2 | var result = true; 3 | var name = document.getElementById("name").value; 4 | var email = document.getElementById("mail").value; 5 | var phone = document.getElementById("phone").value; 6 | var message = document.getElementById("query").value; 7 | if(name = ""){ 8 | alert("name missing!"); 9 | result = false; 10 | } 11 | if(email = ""){ 12 | alert("email missing!!"); 13 | result = false; 14 | } 15 | if(phone = ""){ 16 | alert("phone is missing!"); 17 | result = false; 18 | } 19 | var atpas; 20 | if(email != "") 21 | atpas = email.indexof("@"); 22 | else 23 | atpas = -1; 24 | if(atpas < 0){ 25 | alert("email adress is incorrect!"); 26 | result = false; 27 | } 28 | return result; 29 | 30 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Code with Edison 7 | 8 | 9 | 10 | 11 |
12 | 24 | 25 |
26 | code with Edison 27 |

Hello, I’m Edison

28 |

29 | I’m working on a professional, visually sophisticated and 30 | technologically proficient, responsive and multi-functional Web 31 | Components. 32 |

33 | Download CV 34 |
35 |
36 | 37 | -------------------------------------------------------------------------------- /pages/login.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Login form |codewithEdison 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 |
16 | 21 |
Login Form
22 |
23 |
24 | 25 | 26 |
27 |
28 | 29 | 30 |
31 |
32 | Forgot Password? 33 |
34 |
35 |
36 | 37 |
38 | 41 |
42 |
43 |
44 | 45 | -------------------------------------------------------------------------------- /pages/contact.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | contact| codewithEdison 11 | 12 | 13 | 14 | 15 | 16 |
17 |

Contact Me

18 |

You will hear from Me at the earliest!

19 |
24 |
25 | 26 | 27 | 28 |
29 |
30 | 31 | 32 |
33 |
34 | 35 | 36 |
37 |
38 | 40 |
41 |
42 | 43 |
44 |
45 |

You can also contact Me at +250-788-240-303

46 |
47 | 48 | 49 | -------------------------------------------------------------------------------- /css/services.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | font-family: "Poppins", sans-serif; 6 | } 7 | section { 8 | height: 100vh; 9 | width: 100%; 10 | display: grid; 11 | place-items: center; 12 | } 13 | .row { 14 | display: flex; 15 | flex-wrap: wrap; 16 | } 17 | .column { 18 | width: 100%; 19 | padding: 0 1em 1em 1em; 20 | text-align: center; 21 | } 22 | .card { 23 | width: 100%; 24 | height: 100%; 25 | padding: 2em 1.5em; 26 | background: linear-gradient(#ffffff 50%, #fd4766 50%); 27 | background-size: 100% 200%; 28 | background-position: 0 2.5%; 29 | border-radius: 5px; 30 | box-shadow: 0 0 35px rgba(0, 0, 0, 0.12); 31 | cursor: pointer; 32 | transition: 0.5s; 33 | } 34 | h3 { 35 | font-size: 20px; 36 | font-weight: 600; 37 | color: #1f194c; 38 | margin: 1em 0; 39 | } 40 | p { 41 | color: #575a7b; 42 | font-size: 15px; 43 | line-height: 1.6; 44 | letter-spacing: 0.03em; 45 | } 46 | .icon-wrapper { 47 | background-color: #fd4766; 48 | position: relative; 49 | margin: auto; 50 | font-size: 30px; 51 | height: 2.5em; 52 | width: 2.5em; 53 | color: #ffffff; 54 | border-radius: 50%; 55 | display: grid; 56 | place-items: center; 57 | transition: 0.5s; 58 | } 59 | .card:hover { 60 | background-position: 0 100%; 61 | } 62 | .card:hover .icon-wrapper { 63 | background-color: #ffffff; 64 | color: #12192c; 65 | } 66 | .card:hover h3 { 67 | color: #ffffff; 68 | } 69 | .card:hover p { 70 | color: #f0f0f0; 71 | } 72 | @media screen and (min-width: 768px) { 73 | section { 74 | padding: 0 2em; 75 | } 76 | .column { 77 | flex: 0 50%; 78 | max-width: 50%; 79 | } 80 | } 81 | @media screen and (min-width: 992px) { 82 | section { 83 | padding: 1em 3em; 84 | } 85 | .column { 86 | flex: 0 0 33.33%; 87 | max-width: 33.33%; 88 | } 89 | } -------------------------------------------------------------------------------- /css/portifolio.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap"); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | font-family: "Poppins", sans-serif; 8 | } 9 | a, button { 10 | text-decoration: none; 11 | } 12 | .hero { 13 | width: 100%; 14 | height: 100vh; 15 | background: url(bg13.jpg); 16 | background-size: cover; 17 | } 18 | nav { 19 | display: flex; 20 | align-items: center; 21 | justify-content: space-between; 22 | padding: 30px 100px; 23 | } 24 | .logo { 25 | max-height: 100px; 26 | border-radius: 50%; 27 | 28 | } 29 | nav ul li { 30 | list-style: none; 31 | display: inline-block; 32 | padding: 10px 20px; 33 | } 34 | nav ul li a, button { 35 | color: #1d1d24; 36 | position: relative; 37 | padding: 5px 0; 38 | } 39 | nav ul li a:hover { 40 | color: #fd4766; 41 | } 42 | nav ul li a:after { 43 | content: ""; 44 | position: absolute; 45 | left: 0; 46 | width: 0; 47 | height: 3px; 48 | background: #fd4766; 49 | transition: 0.3s; 50 | bottom: 0; 51 | } 52 | nav ul li a:hover:after { 53 | width: 100%; 54 | } 55 | .btn { 56 | color: #fff; 57 | font-size: 16px; 58 | text-transform: uppercase; 59 | letter-spacing: 2px; 60 | padding: 16px 40px; 61 | border-radius: 500px; 62 | display: inline-block; 63 | font-weight: 500; 64 | transition: all 0.4s ease-in-out; 65 | background-size: 152% 100%; 66 | background: #fd4766; 67 | border: 2px solid #fd4766; 68 | } 69 | .btn:hover { 70 | background: transparent; 71 | border-color: #fd4766; 72 | color: #fd4766; 73 | } 74 | .content { 75 | position: absolute; 76 | top: 35%; 77 | left: 8%; 78 | } 79 | .content .title { 80 | color: #0a0a0a; 81 | font-size: 15px; 82 | text-transform: uppercase; 83 | letter-spacing: 4px; 84 | display: inline-block; 85 | margin-bottom: 20px; 86 | background: linear-gradient( 87 | 120deg, 88 | #1c99fe 20.69%, 89 | #7644ff 50.19%, 90 | #fd4766 79.69% 91 | ); 92 | -webkit-background-clip: text; 93 | -webkit-text-fill-color: transparent; 94 | } 95 | .content h1 { 96 | color: #1f1f25; 97 | font-size: 75px; 98 | font-weight: 900; 99 | line-height: 90px; 100 | text-transform: inherit; 101 | width: 70%; 102 | } 103 | .content h1 span { 104 | color: #fd4766; 105 | } 106 | .content p { 107 | width: 55%; 108 | color: #202020; 109 | margin-top: 25px; 110 | margin-bottom: 30px; 111 | } -------------------------------------------------------------------------------- /css/login.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap"); 2 | * { 3 | margin: 0; 4 | padding: 0; 5 | outline: none; 6 | box-sizing: border-box; 7 | font-family: "Poppins", sans-serif; 8 | } 9 | body { 10 | height: 100vh; 11 | width: 100%; 12 | background: linear-gradient(115deg, #56d8e4 10%, #9f01ea 90%); 13 | } 14 | .show-btn { 15 | background: #fff; 16 | padding: 10px 20px; 17 | font-size: 20px; 18 | font-weight: 500; 19 | color: #3498db; 20 | cursor: pointer; 21 | box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); 22 | } 23 | .show-btn, 24 | .container { 25 | position: absolute; 26 | top: 50%; 27 | left: 50%; 28 | transform: translate(-50%, -50%); 29 | } 30 | input[type="checkbox"] { 31 | display: none; 32 | } 33 | .container { 34 | display: none; 35 | background: #fff; 36 | width: 410px; 37 | padding: 30px; 38 | box-shadow: 0 0 8px rgba(0, 0, 0, 0.1); 39 | } 40 | #show:checked ~ .container { 41 | display: block; 42 | } 43 | .container .close-btn { 44 | position: absolute; 45 | right: 20px; 46 | top: 15px; 47 | font-size: 18px; 48 | cursor: pointer; 49 | } 50 | .container .close-btn:hover { 51 | color: #3498db; 52 | } 53 | .container .text { 54 | font-size: 35px; 55 | font-weight: 600; 56 | text-align: center; 57 | } 58 | .container form { 59 | margin-top: -20px; 60 | } 61 | .container form .data { 62 | height: 45px; 63 | width: 100%; 64 | margin: 40px 0; 65 | } 66 | form .data label { 67 | font-size: 18px; 68 | } 69 | form .data input { 70 | height: 100%; 71 | width: 100%; 72 | padding-left: 10px; 73 | font-size: 17px; 74 | border: 1px solid silver; 75 | } 76 | form .data input:focus { 77 | border-color: #3498db; 78 | border-bottom-width: 2px; 79 | } 80 | form .forgot-pass { 81 | margin-top: -8px; 82 | } 83 | form .forgot-pass a { 84 | color: #3498db; 85 | text-decoration: none; 86 | } 87 | form .forgot-pass a:hover { 88 | text-decoration: underline; 89 | } 90 | form .btn { 91 | margin: 30px 0; 92 | height: 45px; 93 | width: 100%; 94 | position: relative; 95 | overflow: hidden; 96 | } 97 | form .btn .inner { 98 | height: 100%; 99 | width: 300%; 100 | position: absolute; 101 | left: -100%; 102 | z-index: -1; 103 | background: -webkit-linear-gradient( 104 | right, 105 | #56d8e4, 106 | #9f01ea, 107 | #56d8e4, 108 | #9f01ea 109 | ); 110 | transition: all 0.4s; 111 | } 112 | form .btn:hover .inner { 113 | left: 0; 114 | } 115 | form .btn button { 116 | height: 100%; 117 | width: 100%; 118 | background: none; 119 | border: none; 120 | color: #fff; 121 | font-size: 18px; 122 | font-weight: 500; 123 | text-transform: uppercase; 124 | letter-spacing: 1px; 125 | cursor: pointer; 126 | } 127 | form .signup-link { 128 | text-align: center; 129 | } 130 | form .signup-link a { 131 | color: #3498db; 132 | text-decoration: none; 133 | } 134 | form .signup-link a:hover { 135 | text-decoration: underline; 136 | } -------------------------------------------------------------------------------- /pages/about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | About Me Profile card || codewithEdison 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 |
18 | 19 |
20 |
21 |
22 |
23 | about image 24 |
25 |
26 | 27 | code with Edison 28 |

COMPUTER SCIENCE STUDENT

29 |
30 | 31 |
    32 |
    • 33 |
    • 34 |
    • 35 |
    • 36 |
    • 37 |
    • 38 | 39 |
40 |
41 | 42 |
43 | 44 |
45 |

Hello!

46 |

I am Edison & I am web developer

47 |
48 | 49 | 50 |
51 | 52 |
53 |

Hi, I’m Edison UWIHANGANYE! I'm a web developer. 54 | I study computer science in University of Rwanda. 55 | In a nutshell, I create system that help organizations 56 | address business challenges and meet their needs. 57 | I manage everything from website navigation 58 | and layout to a company's web hosting and 59 | security architecture. 60 | My expertise lies within front-end web apps, 61 | and the main languages in my tech stack are JavaScript, 62 | React,PHP and of course HTML/CSS. 63 | I’m a lifelong learner and love to read and swim

64 |
65 |
Made with ❤ by Edison
66 |
67 |
68 | 69 | -------------------------------------------------------------------------------- /pages/service.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Responsive Services Section 7 | 8 | 12 | 13 | 17 | 18 | 19 | 20 | 21 |
22 |
23 |

Our Services

24 |
25 |
26 |
27 |
28 |
29 | 30 |
31 |

Web developmet

32 |

33 | We help personal and big company to develop their 34 | reponsive and morden website ad we have experience in this field. 35 |

36 |
37 |
38 |
39 |
40 |
41 | 42 |
43 |

app development

44 |

45 | our passion in to centerlize all everything of our level. 46 | we help to develop many applications of user choice. 47 |

48 |
49 |
50 |
51 |
52 |
53 | 54 |
55 |

logo design

56 |

57 | personal and company need to have their logo. 58 | we are expert in this field so hiring us if you need it. 59 |

60 |
61 |
62 |
63 |
64 |
65 | 66 |
67 |

content writting

68 |

69 | we are here to help you to create and write 70 | content of given certain thing. 71 |

72 |
73 |
74 |
75 |
76 |
77 | 78 |
79 |

software analyses

80 |

81 | 82 |

we can help you analyse and make report of your 83 | software that can be easy to present to your customer. 84 |
85 |
86 |
87 |
88 |
89 | 90 |
91 |

Software documentation

92 |

93 | we can help you to make documentation of 94 | softaware to help user to get information about software. 95 |

96 |
97 |
98 |
99 |
100 | 101 | -------------------------------------------------------------------------------- /css/contact.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600&display=swap'); 2 | 3 | body { 4 | background-image: linear-gradient(40deg, 5 | hsl(240deg 56% 48%) 0%, 6 | hsl(250deg 48% 49%) 10%, 7 | hsl(260deg 40% 49%) 24%, 8 | hsl(271deg 34% 50%) 42%, 9 | hsl(285deg 28% 50%) 57%, 10 | hsl(305deg 24% 50%) 68%, 11 | hsl(325deg 29% 54%) 75%, 12 | hsl(340deg 34% 58%) 81%, 13 | hsl(354deg 40% 62%) 85%, 14 | hsl(358deg 39% 63%) 89%, 15 | hsl(353deg 31% 62%) 92%, 16 | hsl(345deg 22% 61%) 94%, 17 | hsl(330deg 14% 60%) 96%, 18 | hsl(284deg 9% 60%) 97%, 19 | hsl(232deg 12% 62%) 98%, 20 | hsl(212deg 22% 61%) 99%, 21 | hsl(204deg 32% 60%) 100%, 22 | hsl(200deg 41% 58%) 100%); 23 | background-repeat: no-repeat; 24 | height: 99vh; 25 | overflow-y: hidden; 26 | display: flex; 27 | justify-content: center; 28 | align-items: center; 29 | font-family: 'Quicksand', sans-serif; 30 | } 31 | 32 | .formBox { 33 | padding: 15px; 34 | text-align: center; 35 | min-height: 50vh; 36 | min-width: 50vw; 37 | display: flex; 38 | flex-direction: column; 39 | background: #f8f8f885; 40 | border-radius: 30px; 41 | backdrop-filter: blur(10px); 42 | 43 | } 44 | 45 | h2 { 46 | margin-bottom: -10px; 47 | } 48 | 49 | p { 50 | font-weight: 500; 51 | font-size: 1.1em; 52 | } 53 | 54 | form { 55 | padding: 10px; 56 | } 57 | 58 | form>div { 59 | padding: 10px; 60 | position: relative; 61 | font-size: 1.3em; 62 | } 63 | 64 | form>div i { 65 | position: absolute; 66 | top: 22px; 67 | margin-left: 10px; 68 | opacity: 0.6; 69 | } 70 | 71 | form>div input { 72 | height: 2em; 73 | width: 70vw; 74 | padding-left: 40px; 75 | font-size: 1em; 76 | border-radius: 20px; 77 | outline: none; 78 | border: 1px solid #b5adad; 79 | background-color: #f1f1f1; 80 | } 81 | 82 | div>input:focus { 83 | border: 1px solid #6f6a6a; 84 | 85 | } 86 | 87 | form>div:hover>i { 88 | 89 | opacity: 1; 90 | transition: opacity 1s; 91 | } 92 | 93 | textarea { 94 | border: none; 95 | width: 70vw; 96 | border-radius: 20px; 97 | padding: 10px; 98 | outline: none; 99 | font-size: 1em; 100 | } 101 | 102 | button { 103 | width: 50%; 104 | height: 5vh; 105 | color: #ffffff; 106 | background: #00d689; 107 | outline: none; 108 | border: none; 109 | border-radius: 10px; 110 | cursor: pointer; 111 | font-size: 0.8em; 112 | } 113 | 114 | @media screen and (min-width:900px) { 115 | form>div input { 116 | width: 50vw; 117 | } 118 | 119 | textarea { 120 | width: 50vw; 121 | } 122 | } -------------------------------------------------------------------------------- /css/resume.css: -------------------------------------------------------------------------------- 1 | :root{ 2 | --background: #c3c0ba; 3 | --white: #fff; 4 | --one: #c3266f; 5 | --two: #743578; 6 | --black: #54585d; 7 | --process: #a5a5a5; 8 | } 9 | *{ 10 | margin:0px; 11 | padding:0px; 12 | box-sizing: border-box; 13 | font-family: system-ui; 14 | } 15 | body{ 16 | background: var(--background); 17 | } 18 | .col-div-3{ 19 | width: 25%; 20 | float: left; 21 | } 22 | .col-div-7{ 23 | width: 75%; 24 | float: left; 25 | } 26 | .col-div-4{ 27 | width: 35%; 28 | float: left; 29 | } 30 | .col-div-8{ 31 | width: 65%; 32 | float: left; 33 | } 34 | .col-div-6{ 35 | width: 50%; 36 | float: left; 37 | position: relative; 38 | } 39 | .clearfix{ 40 | clear: both; 41 | } 42 | .resume-main{ 43 | width: 800px; 44 | height: auto; 45 | background: linear-gradient(var(--one), var(--two)); 46 | margin: 50px auto; 47 | box-shadow:5px 5px 5px 5px #54585d33; 48 | } 49 | .left-box{ 50 | width: 35%; 51 | float: left; 52 | height: auto;} 53 | .right-box{ 54 | width: 65%; 55 | float: left; 56 | background-color: var(--white); 57 | height: 800px; 58 | margin: 50px 0px; 59 | border-radius: 50px 0px 0px 50px; 60 | padding:30px 50px; 61 | box-shadow: -7px 2px 15px 2px #54585d52; 62 | } 63 | .profile{ 64 | width: 150px; 65 | height: 185px; 66 | border: 3px solid var(--white); 67 | padding: 1px; 68 | border-radius: 50%; margin: 20px auto;} 69 | .profile img{ 70 | width: 100%; 71 | border-radius: 50%;} 72 | .content-box{ 73 | padding: 0px 40px 0px 45px; 74 | } 75 | .content-box h2{ 76 | text-transform: uppercase; 77 | font-weight: 500;color: var(--white); 78 | letter-spacing: 1px; font-size: 20px; 79 | } 80 | .hr1{ 81 | border: none; 82 | height: 1px; background: var(--white); 83 | margin-top: 3px;} 84 | .p1{ 85 | font-size: 11px;color: var(--white); 86 | letter-spacing: 1px;padding-top: 12px; 87 | } 88 | #progress { 89 | background: var(--process); 90 | border-radius: 13px; 91 | height: 8px; 92 | width: 100%;} 93 | #progress:after { 94 | content: ''; 95 | display: block; 96 | background: var(--white); 97 | width: 80%; 98 | height: 100%; 99 | border-radius: 9px; 100 | } 101 | #progress1 { 102 | background: var(--process); 103 | border-radius: 13px; 104 | height: 8px;width: 100%; 105 | } 106 | #progress1:after { 107 | content: ''; 108 | display: block; 109 | background: var(--white); 110 | width: 20%; 111 | height: 100%; 112 | border-radius: 9px; 113 | } 114 | #progress2 { 115 | background: var(--process); 116 | border-radius: 13px; 117 | height: 8px;width: 100%; 118 | } 119 | #progress2:after { 120 | content: ''; 121 | display: block; 122 | background: var(--white); 123 | width: 99%; 124 | height: 100%; 125 | border-radius: 9px; 126 | } 127 | .content-box h3{ 128 | font-size: 13px; 129 | text-transform: uppercase; 130 | letter-spacing: 1px;padding-top: 10px; 131 | color: white; 132 | font-weight: 500; 133 | } 134 | .p2{ 135 | font-size: 13px; 136 | margin-bottom: 5px; margin-top: 5px; 137 | color: var(--white); 138 | } 139 | .circle{ 140 | color:var(--white); 141 | font-size: 14px!important; 142 | margin-top: 7px;} 143 | .circle1{ 144 | color:var(--process); 145 | font-size: 14px!important; 146 | margin-top: 7px;} 147 | .in{ 148 | background:var(--white); 149 | color: var(--one);padding: 8px; 150 | border-radius: 20px; 151 | font-size: 14px!important; 152 | } 153 | .inp{ 154 | color: var(--white); 155 | font-size: 11px;} 156 | .col3{ 157 | text-align: center;} 158 | h1{ 159 | font-size: 50px; 160 | text-transform: uppercase; 161 | color: var(--black); line-height: 50px;} 162 | h1 span{ 163 | color: var(--one); 164 | } 165 | .p3{ 166 | 167 | letter-spacing: 4px; 168 | color: #54585d; 169 | font-weight: 500; 170 | } 171 | .heading{ 172 | text-transform: uppercase; 173 | font-weight: 500;color: var(--one); 174 | letter-spacing: 1px; 175 | font-size: 20px; 176 | } 177 | .hr2{ 178 | border: none; 179 | height: 1px; 180 | background: var(--black); 181 | margin-top: 3px;} 182 | .p5{ 183 | font-weight: 700; 184 | color: var(--black);} 185 | .span1{ 186 | font-size: 13px; 187 | color: var(--black);} -------------------------------------------------------------------------------- /css/about.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800&display=swap'); 2 | 3 | *{ 4 | padding: 0; 5 | margin: 0; 6 | box-sizing: border-box; 7 | } 8 | body{ 9 | font-family: 'Poppins', sans-serif; 10 | } 11 | .about-wrapper{ 12 | height: 100vh; 13 | } 14 | .about-left{ 15 | background-color: #21D4FD; 16 | background-image: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%); 17 | display: flex; 18 | flex-direction: column; 19 | align-items: center; 20 | justify-content: center; 21 | height: 100vh; 22 | color:#fff 23 | } 24 | .about-left-content > div{ 25 | background: #12192c; 26 | padding: 4rem 4rem 2.5rem 5rem; 27 | text-align: center; 28 | 29 | border-radius: 12px 12px 0 0; 30 | } 31 | .about-left-content{ 32 | box-shadow: 0px 0px 18px -1px rgba(0, 0, 0, 0.39); 33 | -webkit-box-shadow: 0px 0px 18px -1px rgba(0, 0, 0, 0.39); 34 | -moz-box-shadow: 0px 0px 18px -1px rgba(0, 0, 0, 0.39); 35 | border-radius: 12px; 36 | width:80%; 37 | } 38 | .about-img img{ 39 | display: block; 40 | width: 100%; 41 | border-radius: 50%; 42 | } 43 | } 44 | .about-img{ 45 | width: 150px; 46 | height: 185px; 47 | overflow: hidden; 48 | border-radius: 50%; 49 | transition: all 0.5s ease-in-out; 50 | } 51 | .shadow{ 52 | margin-left: auto; 53 | margin-right: auto; 54 | border-radius: 50%; 55 | width: 200px; 56 | height: 260px; 57 | } 58 | 59 | 60 | 61 | .about-left-content h2{ 62 | font-size: 2rem; 63 | margin: 2.2rem 0 0.6rem 0; 64 | line-height: 1.2; 65 | padding-bottom: 1rem; 66 | border-bottom: 2px solid #B721FF; 67 | } 68 | .about-left-content h3{ 69 | text-transform: uppercase; 70 | font-weight: 300; 71 | letter-spacing: 5px; 72 | margin-top: 1.2rem; 73 | } 74 | .icons{ 75 | background: #12192c; 76 | display: flex; 77 | justify-content: center; 78 | padding: 0.8rem 0; 79 | border-radius: 0 0 12px 12px; 80 | } 81 | .icons li{ 82 | list-style-type: none; 83 | background: #B721FF; 84 | color: #fff; 85 | width: 40px; 86 | height: 40px; 87 | margin: 0 0.5rem; 88 | border-radius: 50%; 89 | display: flex; 90 | justify-content: center; 91 | align-items: center; 92 | font-size: 1.2rem; 93 | cursor: pointer; 94 | transition: all 0.5s ease-in-out; 95 | } 96 | .icons li:hover{ 97 | background: #edffec; 98 | color: #000; 99 | } 100 | .about-right{ 101 | background: #12192c; 102 | height: 100vh; 103 | display: flex; 104 | flex-direction: column; 105 | align-items: center; 106 | justify-content: center; 107 | padding: 0 5rem; 108 | text-align: center; 109 | color:#fff 110 | } 111 | .about-right h1{ 112 | font-size: 5rem; 113 | text-transform: uppercase; 114 | } 115 | .about-right h1 span{ 116 | color: #B721FF; 117 | } 118 | .about-right h2{ 119 | font-weight: 600; 120 | } 121 | .about-btns{ 122 | display: flex; 123 | margin: 2rem 0; 124 | } 125 | .btn{ 126 | border: none; 127 | font-size: 0.9rem; 128 | text-transform: uppercase; 129 | border: 2px solid #fff; 130 | border-radius: 20px; 131 | padding: 0.55rem 0; 132 | width: 130px; 133 | font-weight: 600; 134 | background: transparent; 135 | margin: 0 0.5rem; 136 | cursor: pointer; 137 | color:#fff 138 | } 139 | .btn.btn-pink{ 140 | background: #B721FF; 141 | color: #fff; 142 | border-color: #B721FF; 143 | transition: all 0.5s ease-in-out; 144 | } 145 | .btn.btn-pink:hover{ 146 | background: transparent; 147 | border-color: #fff; 148 | color: #fff; 149 | } 150 | .btn.btn-white{ 151 | transition: all 0.5s ease-in-out; 152 | } 153 | .btn.btn-white:hover{ 154 | background: #B721FF; 155 | border-color: #B721FF; 156 | color: #fff; 157 | } 158 | .about-para p{ 159 | font-weight: 300; 160 | padding: 0.5rem; 161 | opacity: 0.8; 162 | } 163 | 164 | @media screen and (min-width: 992px){ 165 | .about-wrapper{ 166 | display: grid; 167 | grid-template-columns: repeat(2, 2fr); 168 | } 169 | 170 | .about-left{ 171 | position: relative; 172 | } 173 | .about-left-content{ 174 | position: absolute; 175 | width:80% 176 | 177 | } 178 | } 179 | .credit{ 180 | text-align: center; 181 | color: #fff; 182 | font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; 183 | } 184 | .credit a{ 185 | text-decoration: none; 186 | color:#B721FF; 187 | font-weight: bold; 188 | } 189 | .title { 190 | color: #0a0a0a; 191 | font-size: 15px; 192 | text-transform: uppercase; 193 | letter-spacing: 4px; 194 | display: inline-block; 195 | margin-bottom: 20px; 196 | background: linear-gradient( 197 | 120deg, 198 | #1c99fe 20.69%, 199 | #7644ff 50.19%, 200 | #fd4766 79.69% 201 | ); 202 | -webkit-background-clip: text; 203 | -webkit-text-fill-color: transparent; 204 | } -------------------------------------------------------------------------------- /pages/resume.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Resume |codewithEdison 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 |

18 |
19 | 20 |
21 |
22 |

Profile Info

23 |
24 |

My name is Edison UWIHANGANYE and I am computer science student in UNIVERSITY OF RWANDA.

25 | 26 |

Languages:

27 |

English

28 |
29 |

French

30 |
31 |

Swahili

32 |
33 |

kinyarwanda

34 |
35 | 36 |

37 |

My Skills

38 |
39 |
40 |

HTML

41 |
42 | 43 | 44 | 45 | 46 | 47 |
48 |
49 |

CSS

50 |
51 | 52 | 53 | 54 | 55 | 56 |
57 |
58 |

MYSQL

59 |
60 | 61 | 62 | 63 | 64 | 65 |
66 |
67 |

JAVASCRIPT

68 |
69 | 70 | 71 | 72 | 73 | 74 |
75 |
76 |

REACT

77 |
78 | 79 | 80 | 81 | 82 | 83 |
84 |
85 |

PHP

86 |
87 | 88 | 89 | 90 | 91 | 92 |
93 |
94 |
95 |

interests

96 |
97 |
98 |
99 | 100 | music 101 |
102 |
103 | 104 | sport 105 |
106 | 110 |
111 | 112 | Read 113 |
114 |
115 |
116 | 117 |
118 |

119 | Edison
120 | UWIHANGANYE 121 |

122 |

COMPUTER SCIENCE STUDENT

123 | 124 |
125 |

Work Experience

126 |
127 |
128 |
129 |

2019

130 | GS MARIE REINE DE CONGO-NIL 131 |
132 |
133 |

Student

134 | I create website of school that hold all imformation of students and workers . 135 |
136 |
137 |
138 |
139 |

2022

140 | UNIVERSITY OF RWANDA 141 |
142 |
143 |

Student

144 | I created system that help organizations adress business challenges and 145 | meet their needs. 146 |
147 | 148 |
149 |
150 | 159 | 160 |
161 |

My Education

162 |
163 |
164 |
165 |

2018-2021

166 | GS MARIE REINNE DE CONGO-NIL 167 |
168 |
169 |

Mathematics Economics and computer-science

170 | My web developer career started in secondary school in 2018 at GS Congo-nil. 171 |
172 |
173 |
174 |
175 |

2022-2026

176 | UNIVERSITY OF RWANDA 177 |
178 |
179 |

Computer-science

180 | I study bachlors of science witH honor of computer science in university of Rwanda . 181 |
182 |
183 |
184 |
185 | 186 |
187 | 188 | 189 | --------------------------------------------------------------------------------