├── LICENSE
├── README.md
├── css
    ├── 404.css
    ├── cursor.css
    ├── design.css
    ├── education.css
    ├── event.css
    ├── experience.css
    ├── home.css
    ├── hover-min.css
    ├── preloader.css
    ├── project.css
    ├── references.css
    ├── research.css
    ├── sem_temp.css
    ├── style.css
    ├── techstack.css
    └── travel_temp.css
├── design.html
├── designs
    ├── BMI Calculator.jpg
    ├── BMI_Calculator_1.png
    ├── Blog_dark_light.png
    ├── New_restTutorial.png
    ├── Projet_1.jpg
    ├── ProjetoPizza.png
    ├── Projeto_1_2.jpg
    ├── Projeto_2.jpg
    ├── Projeto_Chuteira.jpg
    ├── Resume_app.png
    ├── bmicalculator.png
    ├── coursera.png
    ├── hcl_domino.png
    ├── hero.svg
    ├── itil_22.png
    ├── javascript.png
    ├── mockups
    │   ├── 1.svg
    │   ├── 2.svg
    │   ├── 3.svg
    │   ├── 4.svg
    │   ├── 5.svg
    │   ├── 6.svg
    │   ├── 7.svg
    │   └── 8.svg
    ├── rest_tutorial.png
    └── ui_ux
    │   ├── 1.svg
    │   ├── 2.svg
    │   ├── 3.svg
    │   ├── 4.svg
    │   ├── 5.svg
    │   ├── 6.svg
    │   ├── 7.svg
    │   └── 8.svg
├── education.html
├── event.html
├── event
    ├── image1.jpg
    ├── image2.jpg
    ├── image3.jpg
    ├── image4.jpg
    ├── image5.jpg
    ├── image6.jpg
    ├── image7.jpg
    └── image8.jpg
├── experience.html
├── fonts
    └── Agustina.woff
├── home
    └── resume.png
├── icons
    └── arrow-right
    │   └── arrow-right-circle.svg
├── index.html
├── js
    ├── 404.js
    ├── app.js
    ├── cursor.js
    ├── dynamicTitle.js
    ├── education.js
    ├── event.js
    ├── experience.js
    ├── particle.js
    ├── particles.min.js
    ├── project.js
    ├── references.js
    ├── research.js
    ├── sem_temp.js
    ├── techstack.js
    └── travel_temp.js
├── project-page
    ├── header-female.svg
    ├── header-male.svg
    └── project-card.svg
└── projects.html


/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 Smaranjit Ghose, Anush Bhatia
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <h2 align="center">
 2 |   Portfolio Template<br/>
 3 |   <a href="https://portfoliodavids.netlify.app/" target="_blank">David Portfolio</a>
 4 | </h2>
 5 | 
 6 | <h2 align="center"> Portfolio Template for Developers 🚀 built with JavaScript, HTML and CSS </h2>
 7 | 
 8 | 
 9 | 
10 | 
11 | ![image](https://user-images.githubusercontent.com/109705197/195660780-a83e2414-2a7b-47fd-b1c9-25ff0a0fe497.png)
12 | ![image](https://user-images.githubusercontent.com/109705197/195681788-5e634a1b-f54a-45d8-be23-7bab71551b06.png)
13 | 
14 | 
15 | 
16 | ## Built With
17 | 
18 | 
19 | Portfolio Template for Developers  <a href="https://portfoliodavids.netlify.app/" target="_blank">portfolio</a> which features some examples of projects.<br/>
20 | Feel free to modified into our goals and projects 🚀 :D <br/>
21 | 
22 | 
23 | 
24 | 
25 | This project was built using these technologies:
26 | - JavaScript
27 | - HTML
28 | - CSS3
29 | - VsCode
30 | 
31 | ## Getting Started
32 | 
33 | 
34 | Clone down this repository. You will need `node.js` and `git` installed globally on your machine.
35 | 
36 | 
37 | ## 🛠 Installation and Setup Instructions.
38 | 1. Installation: `npm install`
39 | 
40 | 2. In the project directory, you can run: `npm start`
41 | 
42 | 
43 | 
44 | 
45 | Runs the app in the development mode.\
46 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
47 | The page will reload if you make edits.
48 | 
49 | 
50 | #
51 | 
52 | 
53 |  <h2 align= "center">Show your support! </br>
54 | Thank You !</h2>
55 | 
56 | 
57 | ### Give a ⭐ if you like this website!
58 | 
59 | 
60 | 
61 | 
62 | 
63 | 
64 | 
65 | 
66 | 
67 | 


--------------------------------------------------------------------------------
/css/404.css:
--------------------------------------------------------------------------------
  1 | @import url("https://fonts.googleapis.com/css2?family=Nunito:wght@300;400&display=swap");
  2 | 
  3 | body {
  4 |   background: linear-gradient(to right, #02aab0, #00cdac);
  5 | }
  6 | .container {
  7 |   display: flex;
  8 |   justify-content: center;
  9 |   align-items: center;
 10 |   width: 100%;
 11 | }
 12 | svg {
 13 |   width: 50rem;
 14 |   height: auto;
 15 | }
 16 | #handboy {
 17 |   animation: swing ease-in-out 1.3s infinite alternate;
 18 |   transform-origin: 98% 98%;
 19 |   transform-box: fill-box;
 20 | }
 21 | #girllight {
 22 |   animation: swing ease-in-out 1.3s infinite alternate;
 23 |   transform-origin: 0% 97%;
 24 |   transform-box: fill-box;
 25 | }
 26 | #hairgirl {
 27 |   animation: swinghair ease-in-out 1.3s infinite alternate;
 28 |   transform-origin: 60% 0%;
 29 |   transform-box: fill-box;
 30 | }
 31 | #zero {
 32 |   transform-origin: bottom;
 33 |   transform-box: fill-box;
 34 | }
 35 | @keyframes swing {
 36 |   0% {
 37 |     transform: rotate(10deg);
 38 |   }
 39 |   100% {
 40 |     transform: rotate(-10deg);
 41 |   }
 42 | }
 43 | @keyframes swinghair {
 44 |   0% {
 45 |     transform: rotate(6deg);
 46 |   }
 47 |   100% {
 48 |     transform: rotate(-6deg);
 49 |   }
 50 | }
 51 | 
 52 | /* go back btn */
 53 | .backbtn {
 54 |   display: flex;
 55 |   justify-content: center;
 56 |   align-items: center;
 57 | }
 58 | .btn {
 59 |   font-family: "Nunito", sans-serif;
 60 |   line-height: 0;
 61 |   padding: 0.8rem 1rem;
 62 |   border-radius: 8em;
 63 |   transition: 0.5s;
 64 |   margin-top: 2rem;
 65 |   color: #fff;
 66 |   background: #272727;
 67 |   box-shadow: 0px 5px 10px rgba(109, 39, 238, 0.6);
 68 | }
 69 | .btn span {
 70 |   font-family: "Nunito", sans-serif;
 71 |   font-weight: 700;
 72 |   font-size: 1.3rem;
 73 |   letter-spacing: 0.1rem;
 74 | }
 75 | .btn i {
 76 |   margin-left: 0.3rem;
 77 |   font-size: 1.2rem;
 78 |   transition: 0.3s;
 79 | }
 80 | .btn:hover {
 81 |   color: rgb(255, 230, 0);
 82 | }
 83 | .btn:hover i {
 84 |   transform: translateX(-4px);
 85 | }
 86 | 
 87 | /* responsiveness */
 88 | @media (max-width: 550px) {
 89 |   svg {
 90 |     width: 24rem;
 91 |     margin-top: 10rem;
 92 |     margin-bottom: 4rem;
 93 |   }
 94 |   .btn {
 95 |     padding: 0.8rem 0.8rem;
 96 |     border-radius: 6em;
 97 |     margin-top: 1.5rem;
 98 |   }
 99 |   .btn i {
100 |     margin-left: 0.2rem;
101 |     font-size: 1rem;
102 |   }
103 |   .btn span {
104 |     font-size: 1rem;
105 |   }
106 | }
107 | 


--------------------------------------------------------------------------------
/css/cursor.css:
--------------------------------------------------------------------------------
 1 | html,
 2 | html *,
 3 | body,
 4 | body * {
 5 |   cursor: none;
 6 | }
 7 | 
 8 | .cursor-dot,
 9 | .cursor-dot-outline {
10 |   pointer-events: none;
11 |   z-index: 2;
12 |   position: absolute;
13 |   top: 50%;
14 |   left: 50%;
15 |   border-radius: 50%;
16 |   opacity: 0;
17 |   transform: translate(-50%, -50%);
18 |   transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
19 | }
20 | 
21 | .cursor-dot {
22 |   width: 10px;
23 |   height: 10px;
24 |   background-color: #b83030f1;
25 | }
26 | 
27 | .cursor-dot-outline {
28 |   width: 20px;
29 |   height: 20px;
30 |   background-color: rgba(211, 115, 115, 0.959);
31 | }
32 | 


--------------------------------------------------------------------------------
/css/design.css:
--------------------------------------------------------------------------------
  1 | /* gallery section starts */
  2 | .gallery_section span, .gallery_section b {
  3 |     font-size: 1.2rem;
  4 | }
  5 | .gallery_section span {
  6 |     color: #444;
  7 |     margin-bottom: 0.5rem;
  8 | }
  9 | .gallery_section {
 10 |     position: relative;
 11 |     margin: 0;
 12 |     padding: 0;
 13 |     display: flex;
 14 |     justify-content: center;
 15 |     background: #fbfbf0;
 16 | }
 17 | .gallery_section a {
 18 |     display: flex;
 19 |     flex-direction: column;
 20 |     justify-content: center;
 21 |     align-items: center;
 22 |     width: 100%;
 23 |     height: 100%;
 24 |     color: black;
 25 |     text-decoration: none;
 26 |     opacity: 0;
 27 |     border-radius: 2rem;
 28 |     background-color: rgba(255, 255, 255, 0.7);
 29 |     transition: opacity 200ms ease-out;
 30 | }
 31 | .staggered-grid {
 32 |     display: grid;
 33 |     width: 43.75rem;
 34 |     min-height: 100vh;
 35 |     padding: 2rem 0;
 36 |     grid-template-columns: repeat(2, 1fr);
 37 |     grid-template-rows: repeat(9, 9rem);
 38 |     grid-gap: 1.5rem;
 39 |     animation: fade-and-slide-in 2000ms 1 forwards cubic-bezier(0.17, 0.91, 0.73, 1.03);
 40 | }
 41 | @keyframes fade-and-slide-in {
 42 |     0% {
 43 |         transform: translateY(-100%);
 44 |         opacity: 0;
 45 |    }
 46 |     100% {
 47 |         transform: translateY(0);
 48 |         opacity: 1;
 49 |    }
 50 | }
 51 | .picture-container {
 52 |     background-position: center center;
 53 |     background-size: auto 100%;
 54 |     background-repeat: no-repeat;
 55 |     border-radius: 2rem;
 56 |     box-shadow: 0 0 0.75rem 0.25rem rgba(0, 0, 0, 0.1);
 57 |     display: flex;
 58 |     justify-content: center;
 59 |     align-items: center;
 60 | }
 61 | .picture-container:hover a {
 62 |     opacity: 1;
 63 | }
 64 | 
 65 | div.picture-container:nth-child(1) {
 66 |     grid-column-start: 1;
 67 |     grid-row-start: 1;
 68 |     grid-row-end: 3;
 69 | }
 70 | div.picture-container:nth-child(2) {
 71 |     grid-column-start: 2;
 72 |     grid-row-start: 2;
 73 |     grid-row-end: 4;
 74 | }
 75 | div.picture-container:nth-child(3) {
 76 |     grid-column-start: 1;
 77 |     grid-row-start: 3;
 78 |     grid-row-end: 5;
 79 | }
 80 | div.picture-container:nth-child(4) {
 81 |     grid-column-start: 2;
 82 |     grid-row-start: 4;
 83 |     grid-row-end: 6;
 84 | }
 85 | div.picture-container:nth-child(5) {
 86 |     grid-column-start: 1;
 87 |     grid-row-start: 5;
 88 |     grid-row-end: 7;
 89 | }
 90 | div.picture-container:nth-child(6) {
 91 |     grid-column-start: 2;
 92 |     grid-row-start: 6;
 93 |     grid-row-end: 8;
 94 | }
 95 | div.picture-container:nth-child(7) {
 96 |     grid-column-start: 1;
 97 |     grid-row-start: 7;
 98 |     grid-row-end: 9;
 99 | }
100 | div.picture-container:nth-child(8) {
101 |     grid-column-start: 2;
102 |     grid-row-start: 8;
103 |     grid-row-end: 10;
104 | }
105 | 
106 | .item1 div.picture-container:nth-child(1) {
107 |     background-image: url(../images/designs/ui_ux/1.svg);
108 | }
109 | .item1 div.picture-container:nth-child(2) {
110 |     background-image: url(../images/designs/ui_ux/2.svg);
111 | }
112 | .item1 div.picture-container:nth-child(3) {
113 |     background-image: url(../images/designs/ui_ux/3.svg);
114 | }
115 | .item1 div.picture-container:nth-child(4) {
116 |     background-image: url(../images/designs/ui_ux/4.svg);
117 | }
118 | .item1 div.picture-container:nth-child(5) {
119 |     background-image: url(../images/designs/ui_ux/5.svg);
120 | }
121 | .item1 div.picture-container:nth-child(6) {
122 |     background-image: url(../images/designs/ui_ux/6.svg);
123 | }
124 | .item1 div.picture-container:nth-child(7) {
125 |     background-image: url(../images/designs/ui_ux/7.svg);
126 | }
127 | .item1 div.picture-container:nth-child(8) {
128 |     background-image: url(../images/designs/ui_ux/8.svg);
129 | }
130 | 
131 | .item2 div.picture-container:nth-child(1) {
132 |     background-image: url(../images/designs/mockups/1.svg);
133 | }
134 | .item2 div.picture-container:nth-child(2) {
135 |     background-image: url(../images/designs/mockups/2.svg);
136 | }
137 | .item2 div.picture-container:nth-child(3) {
138 |     background-image: url(../images/designs/mockups/3.svg);
139 | }
140 | .item2 div.picture-container:nth-child(4) {
141 |     background-image: url(../images/designs/mockups/4.svg);
142 | }
143 | .item2 div.picture-container:nth-child(5) {
144 |     background-image: url(../images/designs/mockups/5.svg);
145 | }
146 | .item2 div.picture-container:nth-child(6) {
147 |     background-image: url(../images/designs/mockups/6.svg);
148 | }
149 | .item2 div.picture-container:nth-child(7) {
150 |     background-image: url(../images/designs/mockups/7.svg);
151 | }
152 | .item2 div.picture-container:nth-child(8) {
153 |     background-image: url(../images/designs/mockups/8.svg);
154 | }
155 | 
156 | .container_gallery {
157 |     padding-top: 5px;
158 |     padding-bottom: 100px;
159 |     background-color: #fbfbf0;
160 | }
161 | .container_gallery h2 {
162 |     text-align: center;
163 | }
164 | .container_gallery .item1,  .container_gallery .item2{
165 |     margin-top: 100px;
166 | }
167 | /* gallery section ends */
168 | 
169 | /*hero section starts*/
170 | .hero {
171 |     background-color: white;
172 |     display: flex;
173 |     height: 100vh;
174 | }
175 | .hero .item1 {
176 |     width:50%;
177 |     background: url('../images/designs/hero.svg');
178 |     background-repeat: no-repeat;
179 |     background-position: 20% 35%;
180 |     background-size: 350px;
181 |     background-attachment: fixed;
182 | }
183 | .hero .item2 {
184 |     background-color: white; /* rgb(245, 225, 245) */
185 |     width: 50%;
186 |     display: flex;
187 |     flex-direction: column;
188 |     align-items: center;
189 |     justify-content: center;
190 |     font-weight: bold;
191 |     color: #343a40;
192 | }
193 | .hero .item2 span {
194 |     color: rgb(121, 59, 221);
195 | }
196 | .item2 h1 {
197 |     font-weight: bold;
198 |     font-size: 33px;
199 | }
200 | .item2 p {
201 |     letter-spacing: 10px;
202 |     color: rgb(17, 16, 16);
203 | }
204 | 
205 | @media only screen and (max-width: 950px) {
206 |     .hero .item1 {
207 |         background-size: 300px;
208 |         background-position: 10% 35%;
209 |     }
210 |     .item2 p {
211 |         letter-spacing: 5px;
212 |     }
213 | }
214 | @media only screen and (max-width: 700px) {
215 | 
216 |     .container_gallery {
217 |         padding-top: 5px;
218 |     }
219 |     .container_gallery .item1,  .container_gallery .item2{
220 |         margin-top: 0px;
221 |     }
222 | 
223 |     .hero {
224 |         flex-direction: column;
225 |         justify-content: space-evenly;
226 |         height: 50vh;
227 |     }
228 |     .hero .item1 {
229 |         background-position: 55% 50%;
230 |         background-size: 172px;
231 |         height: 50%;
232 |         width: 100%;
233 |         background-attachment: unset;
234 |     }
235 |     .hero .item2 {
236 |         width: 100%;
237 |     }
238 |     .item2 p {
239 |         letter-spacing: 0px;
240 |     }
241 | }
242 | /*hero section ends*/
243 | 


--------------------------------------------------------------------------------
/css/event.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |   margin: 0;
  3 |   padding: 0;
  4 |   box-sizing: border-box;
  5 |   font-family: "Poppins", sans-serif;
  6 | }
  7 | 
  8 | /* light mode */
  9 | html[data-theme="light"] {
 10 |   --bg-color: #ecf0f3;
 11 |   --shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
 12 |   --border: 1px solid #ecf0f3;
 13 | }
 14 | /* dark mode */
 15 | html[data-theme="dark"] {
 16 |   --bg-color: #272727;
 17 |   --shadow: 0 4px 8px 0 rgba(104, 102, 102, 0.2);
 18 |   --border: none;
 19 | }
 20 | 
 21 | .image-slider .swiper-slide {
 22 |   position: relative;
 23 |   display: grid;
 24 |   align-self: center;
 25 |   overflow: hidden;
 26 | }
 27 | .image-slider .swiper-slide .wrapper {
 28 |   margin-top: 340px;
 29 |   margin-bottom: 60px;
 30 | }
 31 | .image-slider .swiper-slide .img-container {
 32 |   position: absolute;
 33 |   top: 0;
 34 |   left: 0;
 35 |   right: 0;
 36 |   margin: auto;
 37 |   display: -webkit-box;
 38 |   display: -ms-flexbox;
 39 |   display: flex;
 40 |   -webkit-box-pack: center;
 41 |   -ms-flex-pack: center;
 42 |   justify-content: center;
 43 |   -webkit-box-align: center;
 44 |   -ms-flex-align: center;
 45 |   align-items: center;
 46 |   height: 95%;
 47 | }
 48 | .image-slider .swiper-slide .img-container img {
 49 |   width: 80%;
 50 |   height: 100%;
 51 | }
 52 | .image-slider .swiper-slide .title {
 53 |   font-size: 3rem;
 54 |   color: var(--text-color);
 55 |   text-transform: uppercase;
 56 | }
 57 | .controller,
 58 | .controller1 {
 59 |   position: absolute;
 60 |   right: 11%;
 61 |   border-radius: 50%;
 62 |   width: 44px;
 63 |   display: flex;
 64 |   align-items: center;
 65 |   justify-content: center;
 66 | }
 67 | .controller1 {
 68 |   left: 11%;
 69 | }
 70 | .swiper-container
 71 |   .image-slider
 72 |   .swiper-button-next
 73 |   .swiper-nav-ctrl
 74 |   .prev-ctrl {
 75 |   position: absolute !important;
 76 |   left: 14% !important;
 77 |   border-radius: 50%;
 78 |   width: 44px !important;
 79 |   padding-right: 4px !important;
 80 |   display: flex;
 81 |   align-items: center;
 82 |   justify-content: center;
 83 | }
 84 | .controller :hover {
 85 |   background-color: rgba(0, 0, 0, 0.5);
 86 |   border-radius: 50%;
 87 |   width: 44px;
 88 |   height: 44px;
 89 | 
 90 |   display: flex;
 91 |   align-items: center;
 92 |   justify-content: center;
 93 | }
 94 | .controller1 :hover {
 95 |   background-color: rgba(0, 0, 0, 0.5);
 96 |   border-radius: 50%;
 97 |   width: 44px;
 98 |   height: 44px;
 99 |   display: flex;
100 |   align-items: center;
101 |   justify-content: center;
102 | }
103 | .swiper-button-next .swiper-nav-ctrl :hover {
104 |   background-color: rgba(0, 0, 0, 0.5);
105 | }
106 | /* for text */
107 | .content {
108 |   display: flex;
109 |   justify-content: end;
110 |   color: #fff;
111 | }
112 | .swiper-button-next,
113 | .swiper-container-rtl .swiper-button-prev {
114 |   background-image: none;
115 | }
116 | .swiper-button-prev,
117 | .swiper-container-rtl .swiper-button-next {
118 |   background-image: none;
119 | }
120 | .image-slider .ctrl:hover {
121 |   background-color: rgba(0, 0, 0, 0.5);
122 | }
123 | .parallax-slider .swiper-nav-ctrl.next-ctrl {
124 |   right: 0;
125 | }
126 | .parallax-slider .swiper-nav-ctrl.prev-ctrl {
127 |   left: 0;
128 | }
129 | .image-slider .text-wrapper {
130 |   overflow: hidden;
131 |   width: 100%;
132 |   display: -webkit-inline-box;
133 |   display: -ms-inline-flexbox;
134 |   display: inline-flex;
135 | }
136 | .image-slider .text-wrapper .text-inner {
137 |   -webkit-transform: translateY(100%);
138 |   color: var(--text-color);
139 |   transform: translateY(100%);
140 |   -webkit-transition: all ease 0.5s;
141 |   transition: all ease 0.5s;
142 | }
143 | .image-slider .swiper-slide-active.active .text-inner {
144 |   -webkit-transform: translateY(0);
145 |   transform: translateY(0);
146 |   opacity: 1;
147 | }
148 | .image-slider .swiper-slide.active .sub-title .text-inner {
149 |   -webkit-transition-delay: 0.05s;
150 |   transition-delay: 0.05s;
151 | }
152 | .image-slider .swiper-slide.active .title .text-inner {
153 |   -webkit-transition-delay: 0.1s;
154 |   transition-delay: 0.1s;
155 | }
156 | .image-slider .swiper-slide.active .description .text-inner {
157 |   -webkit-transition-delay: 0.15s;
158 |   transition-delay: 0.15s;
159 | }
160 | /* positioning */
161 | .container {
162 |   position: relative;
163 | }
164 | .row {
165 |   display: flex;
166 |   -ms-flex-wrap: wrap;
167 |   flex-wrap: wrap;
168 |   margin-right: -15px;
169 |   margin-left: -15px;
170 | }
171 | .event_svg {
172 |   height: 100%;
173 | }
174 | .arrow_contain {
175 |   width: 85%;
176 | }
177 | .root_block {
178 |   margin-top: 8%;
179 | }
180 | /* Responsiveness*/
181 | @media only screen and (max-width: 1000px) {
182 |   .heading {
183 |     margin-top: 10%;
184 |   }
185 |   .root_block {
186 |     margin-top: 12%;
187 |   }
188 |   .image-slider .text-wrapper .text-inner {
189 |     font-size: 45px;
190 |   }
191 | }
192 | @media only screen and (max-width: 770px) {
193 |   .image-slider .ctrl {
194 |     height: 50px;
195 |     width: 50px;
196 |   }
197 |   .image-slider .text-wrapper .text-inner {
198 |     font-size: 37px;
199 |   }
200 |   .image-slider .swiper-slide .wrapper {
201 |     margin-top: 330px;
202 |     margin-bottom: 70px;
203 |   }
204 |   .controller {
205 |     right: 5%;
206 |   }
207 |   .controller1 {
208 |     left: 5%;
209 |   }
210 |   .controller,
211 |   .controller1 {
212 |     width: 36px;
213 |     height: 36px;
214 |   }
215 |   .content {
216 |     justify-content: center;
217 |   }
218 |   .root_block {
219 |     margin-top: 17%;
220 |   }
221 |   .arrow_contain {
222 |     width: 100%;
223 |   }
224 | 
225 |   .image-slider .swiper-slide .img-container img {
226 |     width: 100%;
227 |     height: 80%;
228 |   }
229 |   .block_two {
230 |     height: 80% !important;
231 |   }
232 |   .controls,
233 |   .controls1 {
234 |     bottom: 0;
235 |   }
236 | }
237 | @media only screen and (max-width: 690px) {
238 |   .root_block {
239 |     height: 85% !important;
240 |     margin-top: 22%;
241 |   }
242 |   .image-slider .swiper-slide .wrapper {
243 |     margin-top: 330px;
244 |     margin-bottom: 70px;
245 |   }
246 |   .content {
247 |     justify-content: center;
248 |   }
249 |   .image-slider .text-wrapper .text-inner {
250 |     font-size: 35px;
251 |   }
252 |   .controller,
253 |   .controller1 {
254 |     width: 30px;
255 |     height: 30px;
256 |   }
257 |   .controller {
258 |     right: 5%;
259 |   }
260 |   .controller1 {
261 |     left: 5%;
262 |   }
263 | }
264 | @media only screen and (max-width: 500px) {
265 |   .root_block {
266 |     height: 70% !important;
267 |     margin-top: 32%;
268 |   }
269 |   .image-slider .swiper-slide .title {
270 |     font-size: 3rem !important;
271 |   }
272 |   .heading {
273 |     margin-top: 8%;
274 |     margin-bottom: 0% !important;
275 |   }
276 |   .image-slider .text-wrapper .text-inner {
277 |     font-size: 30px;
278 |   }
279 | }
280 | 


--------------------------------------------------------------------------------
/css/preloader.css:
--------------------------------------------------------------------------------
  1 | /* preloader */
  2 | .no-scroll-preload {
  3 |     overflow: hidden;
  4 |     height: auto;
  5 | }
  6 | 
  7 | :root {
  8 |     --atom-size: 400px;
  9 |     --atom-color-hex: #0d00ff;
 10 |     --atom-color-rgb: 217,217,217;
 11 |     --nucleus-size: calc(var(--atom-size) / 5);
 12 |     --electron-color-hex: #36C5F0;
 13 |     --electron-size : calc(var(--atom-size) / 25);
 14 |     --electron-orbit-size : calc(var(--atom-size) / 2.5);
 15 |     --electron-speed : 1.2s;
 16 |     --electron-speed-alpha : 1s;
 17 |     --electron-speed-omega : .8s;
 18 | }
 19 | 
 20 | .loader-container {
 21 |   position: fixed;
 22 |   top: 0;
 23 |   left: 0;
 24 |   background-color: #202124;
 25 |   height: 100%;
 26 |   width: 100%;
 27 |   display: flex;
 28 |   justify-content: center;
 29 |   align-items: center;
 30 |   z-index: 999999;
 31 |   color: white;
 32 | }
 33 | 
 34 | /* Atom */
 35 | .atom {
 36 |   position: relative;
 37 |   justify-content: center;
 38 |   align-items: center;
 39 |   width: var(--atom-size);
 40 |   height: var(--atom-size);
 41 |   animation: 8s atom infinite cubic-bezier(1, .25, 0, .75);
 42 | }
 43 | @keyframes atom{
 44 |   0% {    
 45 |     transform: rotate(0deg) scale(1); 
 46 |   }
 47 |   12.5% { 
 48 |     transform: rotate(-45deg) scale(.9); 
 49 |   }
 50 |   25% {   
 51 |     transform: rotate(-90deg) scale(1); 
 52 |   }
 53 |   37.5% { 
 54 |     transform: rotate(-135deg) scale(.9); 
 55 |   }
 56 |   50% {   
 57 |     transform: rotate(-180deg) scale(1); 
 58 |   }
 59 |   62.5% { 
 60 |     transform: rotate(-225deg) scale(.9); 
 61 |   }
 62 |   75% {   
 63 |     transform: rotate(-270deg) scale(1); 
 64 |   }
 65 |   87.5% { 
 66 |     transform: rotate(-315deg) scale(.9); 
 67 |   }
 68 |   100% {  
 69 |     transform: rotate(-360deg) scale(1); 
 70 |   }
 71 | }
 72 | 
 73 | /* Nucleus */
 74 | .atom::before {
 75 |     content: '';
 76 |     display: block;
 77 |     position: absolute;
 78 |     top: 50%;
 79 |     left: 50%;
 80 |     width: var(--nucleus-size);
 81 |     height: var(--nucleus-size);
 82 |     margin-top: calc(var(--nucleus-size) / -2);
 83 |     margin-left: calc(var(--nucleus-size) / -2);
 84 |     background: var(--electron-color-hex); /* var(--atom-color-hex); */
 85 |     border-radius: 100%;
 86 |     box-shadow: 0 0 3px 0 var(--atom-color-hex);
 87 |     animation: 3s nucleus infinite cubic-bezier(.65, 0, .35, 1);
 88 | }
 89 | @keyframes nucleus {
 90 |     0% { transform: scale(1); }
 91 |     25% { transform: scale(.9); }
 92 |     50% { transform: scale(1); }
 93 |     75% { transform: scale(.85); }
 94 |     100% { transform: scale(1); }
 95 | }
 96 | 
 97 | /* Electron Orbit */
 98 | .atom > [class^="electron"] {
 99 |     border-top: solid rgba(var(--atom-color-rgb), .5) 1px;
100 |     border-right: solid rgba(var(--atom-color-rgb), .35) 2px;
101 |     border-bottom: solid rgba(var(--atom-color-rgb), .2) 4px;
102 |     border-left: solid rgba(var(--atom-color-rgb), 0) 2px;
103 |     border-radius: 100%;
104 |     width: 100%;
105 |     height: var(--electron-orbit-size);
106 |     position: absolute;
107 |     top: 50%;
108 |     margin-top: calc(var(--electron-orbit-size) / -2);
109 |     animation: var(--electron-speed) electron-orbit infinite linear;
110 | }
111 | .atom > .electron-alpha {
112 |     transform: rotate(60deg);
113 |     animation: var(--electron-speed-alpha) electron-orbit infinite linear;
114 | }
115 | .atom > .electron-omega {
116 |     transform: rotate(-60deg);
117 |     animation: var(--electron-speed-omega) electron-orbit infinite linear;
118 | }
119 | @keyframes electron-orbit {
120 |     0% {
121 |         border-top: solid rgba(var(--atom-color-rgb), 1) 5px;
122 |         border-right: solid rgba(var(--atom-color-rgb), 1) 7px;
123 |         border-bottom: solid rgba(var(--atom-color-rgb), .2) 10px;
124 |         border-left: solid rgba(var(--atom-color-rgb), 0) 10px;
125 |     }
126 |     25% {
127 |         border-top: solid rgba(var(--atom-color-rgb), .35) 5px;
128 |         border-right: solid rgba(var(--atom-color-rgb), .2) 7px;
129 |         border-bottom: solid rgba(var(--atom-color-rgb), 0) 10px;
130 |         border-left: solid rgba(var(--atom-color-rgb), .5) 10px;
131 |     }
132 |     50% {
133 |         border-top: solid rgba(var(--atom-color-rgb), .2) 5px;
134 |         border-right: solid rgba(var(--atom-color-rgb), 0) 7px;
135 |         border-bottom: solid rgba(var(--atom-color-rgb), .5) 10px;
136 |         border-left: solid rgba(var(--atom-color-rgb), .35) 10px;
137 |     }
138 |     75% {
139 |         border-top: solid rgba(var(--atom-color-rgb), 0) 5px;
140 |         border-right: solid rgba(var(--atom-color-rgb), .5) 7px;
141 |         border-bottom: solid rgba(var(--atom-color-rgb), .35) 10px;
142 |         border-left: solid rgba(var(--atom-color-rgb), .2) 10px;
143 |     }
144 |     100% {
145 |         border-top: solid rgba(var(--atom-color-rgb), 1) 5px;
146 |         border-right: solid rgba(var(--atom-color-rgb), 1) 7px;
147 |         border-bottom: solid rgba(var(--atom-color-rgb), 1) 10px;
148 |         border-left: solid rgba(var(--atom-color-rgb), 1) 10px;
149 |     }
150 | }
151 | 
152 | /* Electron Unit */
153 | .atom [class^="electron"]::after {
154 |     content: '';
155 |     display: block;
156 |     width: var(--electron-size);
157 |     height: var(--electron-size);
158 |     border-radius: 50%;
159 |     margin-top: calc(var(--electron-size) / -2);
160 |     position: absolute;
161 |     top: 50%;
162 |     left: calc(var(--electron-size) / -1);
163 |     transform: scale(1);
164 |     animation: calc(var(--electron-speed) * 2) electron infinite ease-in-out;
165 | }
166 | 
167 | .atom .electron::after { background: #ECB22E;}
168 | .atom .electron-alpha::after { 
169 |     animation: calc(var(--electron-speed-alpha) * 2) electron infinite ease-in-out; 
170 |     background: #E01E5A;
171 |   }
172 | .atom .electron-omega::after { 
173 |     animation: calc(var(--electron-speed-omega) * 2) electron infinite ease-in-out; 
174 |     background: #2EB67D;
175 |   }
176 | @keyframes electron {
177 |     0% {
178 |         left: calc(var(--electron-size) / -1);
179 |         transform: scale(1);
180 |     }
181 |     12.5% {
182 |         top: 100%;
183 |         transform: scale(1.5);
184 |     }
185 |     25% {
186 |         left: 100%;
187 |         transform: scale(1);
188 |     }
189 |     37.5% {
190 |         top: 0%;
191 |         transform: scale(.25);
192 |     }
193 |     50% {
194 |         left: calc(var(--electron-size) / -1);
195 |         transform: scale(1);
196 |     }
197 |     62.5% {
198 |         top: 100%;
199 |         transform: scale(1.5);
200 |     }
201 |     75% {
202 |         left: 100%;
203 |         transform: scale(1);
204 |     }
205 |     87.5% {
206 |         top: 0%;
207 |         transform: scale(.25);
208 |     }
209 |     100% {
210 |         left: calc(var(--electron-size) / -1);
211 |         transform: scale(1);
212 |     }
213 | }
214 | 
215 | @keyframes fadeInAnimation {
216 | 	0% {
217 | 		opacity: 0;
218 | 	}
219 | 	100% {
220 | 		opacity: 1;
221 | 	}
222 | }
223 | 
224 | .disappear {
225 |   animation: vanish 1s forwards;
226 | }
227 | 
228 | @keyframes vanish {
229 |   100% {
230 |     opacity: 1;
231 |     visibility: hidden;
232 |   }
233 | }
234 | 


--------------------------------------------------------------------------------
/css/sem_temp.css:
--------------------------------------------------------------------------------
  1 | html,
  2 | body {
  3 |   width: 100vw;
  4 |   height: 100vh;
  5 |   overflow: hidden !important;
  6 | }
  7 | 
  8 | .sem_temp_div {
  9 |   position: absolute;
 10 |   height: 100vh !important;
 11 |   width: 100vw !important;
 12 |   top: 0;
 13 |   left: 0;
 14 |   overflow: hidden;
 15 |   animation: rotateHue infinite 20s linear;
 16 |   animation-delay: 0.625s;
 17 | }
 18 | 
 19 | @keyframes rotateHue {
 20 |   0% {
 21 |     filter: hue-rotate(0deg);
 22 |   }
 23 | 
 24 |   20% {
 25 |     filter: hue-rotate(0deg);
 26 |   }
 27 | 
 28 |   25% {
 29 |     filter: hue-rotate(90deg);
 30 |   }
 31 | 
 32 |   45% {
 33 |     filter: hue-rotate(90deg);
 34 |   }
 35 | 
 36 |   50% {
 37 |     filter: hue-rotate(180deg);
 38 |   }
 39 | 
 40 |   70% {
 41 |     filter: hue-rotate(180deg);
 42 |   }
 43 | 
 44 |   75% {
 45 |     filter: hue-rotate(270deg);
 46 |   }
 47 | 
 48 |   95% {
 49 |     filter: hue-rotate(270deg);
 50 |   }
 51 | 
 52 |   100% {
 53 |     filter: hue-rotate(360deg);
 54 |   }
 55 | }
 56 | 
 57 | .sem_temp_shutters {
 58 |   position: absolute;
 59 |   height: 150vmax;
 60 |   width: 150vmax;
 61 |   left: calc(50% - 75vmax);
 62 |   top: calc(50% - 75vmax);
 63 |   pointer-events: none;
 64 |   z-index: 2;
 65 |   animation: rotateFrame 10s linear infinite;
 66 | }
 67 | 
 68 | @keyframes rotateFrame {
 69 |   0% {
 70 |     transform: rotate(0deg);
 71 |   }
 72 |   100% {
 73 |     transform: rotate(180deg);
 74 |   }
 75 | }
 76 | 
 77 | .sem_temp_shutters:before, .sem_temp_shutters:after {
 78 |   content: '';
 79 |   position: absolute;
 80 |   height: 100%;
 81 |   width: 100%;
 82 |   left: 50%;
 83 |   transform: translate3d(-50%, 0, 0);
 84 |   background-color: #b3401a;
 85 |   pointer-events: auto;
 86 | }
 87 | 
 88 | .sem_temp_shutters:before {
 89 |   bottom: 50%;
 90 |   animation: openTop 5s infinite;
 91 | }
 92 | 
 93 | @keyframes openTop {
 94 |   0% {
 95 |     transform: translate3d(-50%, 0, 0);
 96 |     animation-timing-function: cubic-bezier(0.8, 0, 0.1, 1);
 97 |   }
 98 |   40% {
 99 |     transform: translate3d(-50%, -65vmax, 0);
100 |     animation-timing-functon: cubic-bezier(0.6, 0.04, 0.98, 0.335);
101 |   }
102 |   70% {
103 |     transform: translate3d(-50%, -65vmax, 0);
104 |     animation-timing-functon: cubic-bezier(0.6, 0.04, 0.98, 0.335);
105 |   }
106 |   100% {
107 |     transform: translate3d(-50%, 0, 0);
108 |     animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.335);
109 |   }
110 | }
111 | 
112 | .sem_temp_shutters:after {
113 |   top: 50%;
114 |   animation: openBottom 5s infinite;
115 | }
116 | 
117 | @keyframes openBottom {
118 |   0% {
119 |     transform: translate3d(-50%, 0, 0);
120 |     animation-timing-function: cubic-bezier(0.8, 0, 0.1, 1);
121 |   }
122 |   40% {
123 |     transform: translate3d(-50%, 65vmax, 0);
124 |     animation-timing-functon: cubic-bezier(0.6, 0.04, 0.98, 0.335);
125 |   }
126 |   70% {
127 |     transform: translate3d(-50%, 65vmax, 0);
128 |     animation-timing-functon: cubic-bezier(0.6, 0.04, 0.98, 0.335);
129 |   }
130 |   100% {
131 |     transform: translate3d(-50%, 0, 0);
132 |     animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.335);
133 |   }
134 | }
135 | 
136 | .sem_temp_slides {
137 |   position: absolute;
138 |   height: 100%;
139 |   width: 100%;
140 |   top: 0;
141 |   left: 0;
142 |   background-color: #b3401a;
143 | }
144 | 
145 | .sem_temp_slide {
146 |   position: absolute;
147 |   height: 100%;
148 |   width: 100%;
149 |   opacity: 0;
150 |   animation: showHideSlide infinite 20s steps(1);
151 | }
152 | 
153 | @keyframes showHideSlide {
154 |   0% {
155 |     opacity: 1;
156 |     pointer-events: auto;
157 |     z-index: 1;
158 |   }
159 |   25% {
160 |     opacity: 0;
161 |     pointer-events: none;
162 |     z-index: -1;
163 |   }
164 |   100% {
165 |     opacity: 0;
166 |     pointer-events: none;
167 |     z-index: -1;
168 |   }
169 | }
170 | 
171 | .sem_temp_slide:nth-child(1) {
172 |   animation-delay: 0s;
173 | }
174 | .sem_temp_slide:nth-child(2) {
175 |   animation-delay: 5s;
176 | }
177 | .sem_temp_slide:nth-child(3) {
178 |   animation-delay: 10s;
179 | 
180 | }
181 | 
182 | .sem_temp_slide:nth-child(4) {
183 |   animation-delay: 15s;
184 | }
185 | 
186 | .sem_temp_slide:nth-child(5) {
187 |   animation-delay: 20s;
188 | }
189 | .sem_temp_slide:nth-child(5) {
190 |   animation-delay: 25s;
191 | }
192 | 
193 | .sem_temp_slideBg {
194 |   position: relative;
195 |   height: 100%;
196 |   width: 100%;
197 |   top: 0;
198 |   left: 0;
199 |   background-size: cover;
200 |   background-position: center;
201 |   background-color: #b3401a;
202 |   background-blend-mode: hard-light;
203 |   opacity: 1;
204 |   z-index: -1;
205 |   animation: bgInOut 5s infinite;
206 | }
207 | 
208 | @keyframes bgInOut {
209 |   0% {
210 |     transform: rotate(-45deg) scale(1.1);
211 |     animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
212 |   }
213 |   33% {
214 |     transform: rotate(0deg);
215 |   }
216 |   50% {
217 |     transform: rotate(0deg);
218 |   }
219 |   66% {
220 |     transform: rotate(0deg);
221 |     animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
222 |   }
223 |   100% {
224 |     transform: rotate(45deg) scale(0.9);
225 |   }
226 | }
227 | 
228 | .sem_temp_slideContent {
229 |   position: absolute;
230 |   top: 50%;
231 |   left: 50%;
232 |   transform: translate3d(-50%, -50%, 0);
233 |   color: white;
234 |   font-family: 'Abril Fatface', sans-serif;
235 |   line-height: 0.8;
236 |   letter-spacing: -0.025em;
237 |   z-index: 2;
238 |   opacity: 1;
239 |   text-shadow: 0 0 0.5em rgba(179, 64, 26, 0.25);
240 |   mix-blend-mode: lighten;
241 | }
242 | 
243 | .sem_temp_slideContent span {
244 |   display: block;
245 |   font-size: 15vmin;
246 | }
247 | 
248 | body {
249 |   overflow-y: hidden !important;
250 | }


--------------------------------------------------------------------------------
/css/techstack.css:
--------------------------------------------------------------------------------
  1 | @import url("https://fonts.googleapis.com/css?family=Fira+Sans:400,500,600,700,800");
  2 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap");
  3 | 
  4 | html[light-mode="light"] {
  5 |   --bg1-color: rgba(0, 0, 0, 0);
  6 |   --text-color: #6c757d;
  7 |   --shadow-col1: #babdc2;
  8 |   --shadow-col2: #ffffff;
  9 |   --meta-col: #444;
 10 |   --head-col: black;
 11 | }
 12 | 
 13 | html[light-mode="dark"] {
 14 |   --bg1-color: #272727;
 15 |   --text-color: #fff;
 16 |   --bg-txt-img: linear-gradient(315deg, #d5adc8 0%, #ff8489 74%);
 17 |   --txt-fill: transparent;
 18 |   --shadow-col1: #191919;
 19 |   --shadow-col2: #1d1d1d;
 20 |   --meta-col: rgb(155, 149, 149);
 21 |   --head-col: #fff;
 22 | }
 23 | 
 24 | html {
 25 |   overflow-x: hidden;
 26 | }
 27 | 
 28 | 
 29 | /* .main{
 30 |   width: 100%;
 31 |    padding-left: 4rem;
 32 |   padding-right: 4rem;
 33 |   margin: 0 auto; 
 34 | } */
 35 | 
 36 | /* Tech Stack Cards */
 37 | .techstack-box{
 38 |     /* position: absolute; */
 39 |     /* left: 0; */
 40 |     display: flex;
 41 |     flex-direction: row;
 42 |     flex-wrap: wrap;
 43 |     overflow: hidden;
 44 |     justify-content: center;
 45 | }
 46 | .tech_card{
 47 |     display: flex;
 48 |     flex-direction: column;
 49 |     justify-content: center;
 50 |     align-items: center;
 51 |     border: none;
 52 |     border-radius: 13px;
 53 |     background-color: rgb(65, 62, 65);
 54 |     width: 45.7vw;
 55 |     margin:3.5em 30px;
 56 |     padding: 20px;
 57 |     box-shadow: 0px 0px 15px 2px black;
 58 | }
 59 | html[light-mode="light"] .tech_card{
 60 |     background-color: white;
 61 |     color: #303030;
 62 |     box-shadow: 0px 0px 10px #303030;
 63 | }
 64 | .tech_card img{
 65 |     width: 120px;
 66 |     height: 120px;
 67 |     /* border: 1px solid black; */
 68 |     /* box-shadow: 8px 8px 7px black; */
 69 |     border-radius: 8px;
 70 |     margin-bottom: 8px;
 71 |     padding: 20px;
 72 |     
 73 | }
 74 | .tech_card h4{
 75 |     font-weight: bold;
 76 |     font-family: cursive;
 77 | }
 78 | .main-heading{
 79 |     font-weight: 700;
 80 |     
 81 | }
 82 | .main-heading .my_techstacks{
 83 |     color: #4e00bb;
 84 |     text-shadow: 0px 0px 15px #4e00bb;
 85 | }
 86 | html[light-mode="light"] .main-heading .my_techstacks{
 87 |     text-shadow: none !important;
 88 | }
 89 | .skill-head{
 90 |     font-size: 2rem;
 91 |     font-weight: 700;
 92 | }
 93 | .skill-head .my_skill{
 94 |     color: #4e00bb;
 95 |     text-shadow: 0px 0px 15px #4e00bb;
 96 | }
 97 | html[light-mode="light"] .skill-head .my_skill{
 98 |     text-shadow: none !important;
 99 | }
100 | .tech_card .card_img img{
101 |     animation: scale_anime 2s infinite ease-in-out;
102 | }
103 | html[light-mode="light"] .tech_card img{
104 |     animation: scale_anime_dark 2s infinite ease-in-out;
105 | 
106 | }
107 | @keyframes scale_anime_dark {
108 |     0%{
109 |         transform: scale(1);
110 |     }
111 |     50%{
112 |         transform: scale(1.15);
113 |     }100%{
114 |         transform: scale(1);
115 |     }
116 | }
117 | @keyframes scale_anime {
118 |     0%{
119 |         transform: scale(1);
120 |     }
121 |     50%{
122 |         transform: scale(1.15);
123 |     }100%{
124 |         transform: scale(1);
125 |     }
126 | }
127 | #svg_css_text {
128 |     animation: translate_forward 2s infinite ease-in-out;
129 | }
130 | 
131 | #svg_html_text {
132 |     animation: translate_backward 2s infinite ease-in-out;
133 | }
134 | 
135 | @keyframes translate_forward {
136 |     0% {
137 |         transform: translateX(12px);
138 |     }
139 | 
140 |     50% {
141 |         transform: translateX(0px);
142 |     }
143 | 
144 |     100% {
145 |         transform: translateX(12px);
146 |     }
147 | }
148 | 
149 | @keyframes translate_backward {
150 |     0% {
151 |         transform: translateX(0px);
152 |     }
153 | 
154 |     50% {
155 |         transform: translateX(12px);
156 |     }
157 | 
158 |     100% {
159 |         transform: translateX(0px);
160 |     }
161 | }
162 | 
163 | .techstacks_icons {
164 |     align-items: center;
165 |     justify-content: center;
166 | }
167 | 
168 | .techstacks_icons .techstack_icon {
169 |     padding: 5px 10px;
170 | 
171 | }
172 | 
173 | .techstacks_icons .techstack_icon i {
174 |     font-size: 2.5rem;
175 |     opacity: .7;
176 | }
177 | html[light-mode="light"] .techstacks_icons .techstack_icon i {
178 |     font-size: 2.5rem;
179 |     opacity: 1;
180 | }
181 | div.techstack_icon>i:hover {
182 |     opacity: 1;
183 |     transition: opacity .2s linear;
184 |     transform: scale(1.3);
185 | }
186 | 
187 | div.html_icon.techstack_icon>i.fa-html5 {
188 |     /* color: #FF5733 !important; */
189 |     display: inline-block;
190 |     background: linear-gradient(-90deg, #F06529 50%, #E34C26 50%);
191 |     -webkit-background-clip: text;
192 |     -webkit-text-fill-color: transparent;
193 |     -moz-background-clip: text;
194 |     -moz-text-fill-color: transparent;
195 | }
196 | 
197 | div.techstack_icon>i.fa-css3-alt {
198 |     /* color: #2965f1 !important; */
199 |     display: inline-block;
200 |     background: linear-gradient(-90deg, #264de4 50%, #2965f1 50%);
201 |     -webkit-background-clip: text;
202 |     -webkit-text-fill-color: transparent;
203 |     -moz-background-clip: text;
204 |     -moz-text-fill-color: transparent;
205 | }
206 | 
207 | div.techstack_icon>i.fa-bootstrap {
208 |     color: #ad428d !important;
209 | }
210 | 
211 | div.techstack_icon>i.fa-js-square {
212 |     color: #F0DB4F;
213 | }
214 | 
215 | div.techstack_icon>i.fa-python {
216 |     display: inline-block;
217 |     background: linear-gradient(-120deg, #ffde57, #4584b6, #646464);
218 |     -webkit-background-clip: text;
219 |     -webkit-text-fill-color: transparent;
220 |     -moz-background-clip: text;
221 |     -moz-text-fill-color: transparent;
222 | }
223 | 
224 | div.techstack_icon>i.fa-react {
225 |     color: #61DBFB;
226 | }
227 | 
228 | div.techstack_icon>i.fa-git-alt {
229 |     color: #F1502F;
230 | }
231 | 
232 | div.techstack_icon>i.fa-node {
233 |     color: #3C873A;
234 | }
235 | 
236 | div.techstack_icon>i.fa-cuttlefish {
237 |     color: #044F88;
238 | }
239 | #box1{
240 |     animation: slide-down 8s infinite linear;
241 | }
242 | #box3{
243 |     animation: slide-up 8s 4s infinite linear;
244 | }
245 | @keyframes slide-down {
246 |     0%{
247 |         transform: translate(0px,0px);
248 |     }
249 |     50%{
250 |         transform: translate(212px, 61px)
251 |     }
252 |     100%{
253 |         transform: translate(0px,0px);
254 |     }
255 |     
256 | }
257 | @keyframes slide-up {
258 |     0%{
259 |         transform: translate(-212px, -60px);
260 |     }
261 |     50%{
262 |         transform: translate(0px,0px);
263 |     }
264 |     100%{
265 |         transform: translate(-212px, -60px);
266 |     }
267 |     
268 | }
269 | 
270 | .project_item{
271 |     margin-top: 4px;
272 | }
273 | .project_item a{
274 |     color: #bb86c9;
275 |     text-decoration: none;
276 | }
277 | html[light-mode="light"] .project_item a{
278 |     color: #4e00bb ;
279 |     text-decoration: none;
280 | }
281 | @media (max-width:1180px){
282 |     .tech_card{
283 |         width: 45vw;
284 |     }
285 |     .techstack-box{
286 |         justify-content: center !important;
287 |     }
288 | }
289 | @media (max-width:1000px){
290 |     .tech_card{
291 |         width: 90vw;
292 |     }
293 | }
294 | @media (max-width:450px){
295 |     .skill-head{
296 |         margin-top: 10px;
297 |         font-size: 22px;
298 |     }
299 |     .main-heading{
300 |         font-size: 25px;
301 |     }
302 |     .techstacks_icons .techstack_icon i {
303 |         font-size: 1.8rem;
304 |     }
305 |     .pre-heading{
306 |         font-size: 13px;
307 |     }
308 | }
309 | @media (max-width:350px){
310 |     .techstack-box{
311 |         justify-content: center;
312 |     }
313 |     .tech_card{
314 |         width: 95vw;
315 |     }
316 | }


--------------------------------------------------------------------------------
/css/travel_temp.css:
--------------------------------------------------------------------------------
  1 | /* Travel Vlog Summary section starts */
  2 | *, *:before, *:after {
  3 |     box-sizing: border-box;
  4 |     margin: 0;
  5 |     padding: 0;
  6 | }
  7 | body {
  8 |     background: whitesmoke; /* #1f1f1f */
  9 |     font-family: 'Open Sans', Helvetica, Arial, sans-serif;
 10 | }
 11 | .cont {
 12 |     position: relative;
 13 |     overflow: hidden;
 14 |     height: 70vh; /* 100vh */
 15 |     padding: 80px 60px;
 16 | }
 17 | .cont__inner {
 18 |     position: relative;
 19 |     height: 100%;
 20 | }
 21 | .cont__inner:hover .el__bg:after {
 22 |     opacity: 1;
 23 | }
 24 | .el {
 25 |     position: absolute;
 26 |     left: 0;
 27 |     top: 0;
 28 |     width: 19.2%;
 29 |     height: 90%; 
 30 |     background: #252525;
 31 |     transition: transform 0.6s 0.7s, width 0.7s, opacity 0.6s 0.7s, z-index 0s 1.3s;
 32 |     will-change: transform, width, opacity;
 33 | }
 34 | .el:not(.s--active) {
 35 |     cursor: pointer;
 36 | }
 37 | .el__overflow {
 38 |     overflow: hidden;
 39 |     position: relative;
 40 |     height: 100%;
 41 | }
 42 | .el__inner {
 43 |     overflow: hidden;
 44 |     position: relative;
 45 |     height: 100%;
 46 |     transition: transform 1s;
 47 | }
 48 | .cont.s--inactive .el__inner {
 49 |     transform: translate3d(0, 100%, 0);
 50 | }
 51 | .el__bg {
 52 |     position: relative;
 53 |     width: calc(100vw - 140px);
 54 |     height: 100%;
 55 |     transition: transform 0.6s 0.7s;
 56 |     will-change: transform;
 57 | }
 58 | .el__bg:before {
 59 |     content: "";
 60 |     position: absolute;
 61 |     left: 0;
 62 |     top: -5%;
 63 |     width: 100%;
 64 |     height: 110%;
 65 |     background-size: 100% 100%;
 66 |     background-position: center center;
 67 |     transition: transform 1s;
 68 |     transform: translate3d(0, 0, 0) scale(1);
 69 | }
 70 | .cont.s--inactive .el__bg:before {
 71 |     transform: translate3d(0, -100%, 0) scale(1.2);
 72 | }
 73 | .el.s--active .el__bg:before {
 74 |     transition: transform 0.8s;
 75 | }
 76 | .el__bg:after {
 77 |     content: "";
 78 |     z-index: 1;
 79 |     position: absolute;
 80 |     left: 0;
 81 |     top: 0;
 82 |     width: 100%;
 83 |     height: 100%;
 84 |     background: rgba(0, 0, 0, 0.3);
 85 |     opacity: 0;
 86 |     transition: opacity 0.5s;
 87 | }
 88 | .cont.s--el-active .el__bg:after {
 89 |     transition: opacity 0.5s 1.4s;
 90 |     opacity: 1 !important;
 91 | }
 92 | .el__preview-cont {
 93 |     z-index: 2;
 94 |     display: flex;
 95 |     justify-content: center;
 96 |     align-items: center;
 97 |     position: absolute;
 98 |     left: 0;
 99 |     top: 0;
100 |     width: 100%;
101 |     height: 100%;
102 |     transition: all 0.3s 1.2s;
103 | }
104 | .cont.s--inactive .el__preview-cont {
105 |     opacity: 0;
106 |     transform: translateY(10px);
107 | }
108 | .cont.s--el-active .el__preview-cont {
109 |     opacity: 0;
110 |     transform: translateY(30px);
111 |     transition: all 0.5s;
112 | }
113 | .el__heading {
114 |     color: #fff;
115 |     text-transform: uppercase;
116 |     font-size: 18px;
117 | }
118 | .el__content {
119 |     z-index: -1;
120 |     position: absolute;
121 |     left: 0;
122 |     top: 0;
123 |     width: 100%;
124 |     height: 100%;
125 |     padding: 30px;
126 |     opacity: 0;
127 |     pointer-events: none;
128 |     transition: all 0.1s;
129 | }
130 | .el.s--active .el__content {
131 |     z-index: 2;
132 |     opacity: 1;
133 |     pointer-events: auto;
134 |     transition: all 0.5s 1.4s;
135 | }
136 | .el__text {
137 |     text-transform: uppercase;
138 |     font-size: 40px;
139 |     color: #fff;
140 | }
141 | .el__close-btn {
142 |     z-index: -1;
143 |     position: absolute;
144 |     right: 10px;
145 |     top: 10px;
146 |     width: 60px;
147 |     height: 60px;
148 |     opacity: 0;
149 |     pointer-events: none;
150 |     transition: all 0s 0.45s;
151 |     cursor: pointer;
152 | }
153 | .el.s--active .el__close-btn {
154 |     z-index: 5;
155 |     opacity: 1;
156 |     pointer-events: auto;
157 |     transition: all 0s 1.4s;
158 | }
159 | .el__close-btn:before, .el__close-btn:after {
160 |     content: "";
161 |     position: absolute;
162 |     left: 0;
163 |     top: 50%;
164 |     width: 100%;
165 |     height: 8px;
166 |     margin-top: -4px;
167 |     background: #fff;
168 |     opacity: 0;
169 |     transition: opacity 0s;
170 | }
171 | .el.s--active .el__close-btn:before, .el.s--active .el__close-btn:after {
172 |     opacity: 1;
173 | }
174 | .el__close-btn:before {
175 |     transform: rotate(45deg) translateX(100%);
176 | }
177 | .el.s--active .el__close-btn:before {
178 |     transition: all 0.3s 1.4s cubic-bezier(0.72, 0.09, 0.32, 1.57);
179 |     transform: rotate(45deg) translateX(0);
180 | }
181 | .el__close-btn:after {
182 |     transform: rotate(-45deg) translateX(100%);
183 | }
184 | .el.s--active .el__close-btn:after {
185 |     transition: all 0.3s 1.55s cubic-bezier(0.72, 0.09, 0.32, 1.57);
186 |     transform: rotate(-45deg) translateX(0);
187 | }
188 | .el__index {
189 |     overflow: hidden;
190 |     position: absolute;
191 |     left: 0;
192 |     bottom: -80px;
193 |     width: 100%;
194 |     height: 100%;
195 |     min-height: 250px;
196 |     text-align: center;
197 |     font-size: 20vw;
198 |     line-height: 0.85;
199 |     font-weight: bold;
200 |     transition: transform 0.5s, opacity 0.3s 1.4s;
201 |     transform: translate3d(0, 1vw, 0);
202 | }
203 | .el:hover .el__index {
204 |     transform: translate3d(0, 0, 0);
205 | }
206 | .cont.s--el-active .el__index {
207 |     transition: transform 0.5s, opacity 0.3s;
208 |     opacity: 0;
209 | }
210 | .el__index-back, .el__index-front {
211 |     position: absolute;
212 |     left: 0;
213 |     bottom: 0;
214 |     width: 100%;
215 | }
216 | .el__index-back {
217 |     color: #2f3840;
218 |     opacity: 0;
219 |     transition: opacity 0.25s 0.25s;
220 | }
221 | .el:hover .el__index-back {
222 |     transition: opacity 0.25s;
223 |     opacity: 1;
224 | }
225 | .el__index-overlay {
226 |     overflow: hidden;
227 |     position: relative;
228 |     transform: translate3d(0, 100%, 0);
229 |     transition: transform 0.5s 0.1s;
230 |     color: transparent;
231 | }
232 | .el__index-overlay:before {
233 |     content: attr(data-index);
234 |     position: absolute;
235 |     left: 0;
236 |     bottom: 0;
237 |     width: 100%;
238 |     height: 100%;
239 |     color: rgb(207, 207, 207); /* #fff */
240 |     transform: translate3d(0, -100%, 0);
241 |     transition: transform 0.5s 0.1s;
242 | }
243 | .el:hover .el__index-overlay {
244 |     transform: translate3d(0, 0, 0);
245 | }
246 | .el:hover .el__index-overlay:before {
247 |     transform: translate3d(0, 0, 0);
248 | }
249 | 
250 | .el:nth-child(1) {
251 |     transform: translate3d(0%, 0, 0);
252 |     transform-origin: 50% 50%;
253 | }
254 | .cont.s--el-active .el:nth-child(1):not(.s--active) {
255 |     transform: scale(0.5) translate3d(0%, 0, 0);
256 |     opacity: 0;
257 |     transition: transform 0.95s, opacity 0.95s;
258 | }
259 | .el:nth-child(1) .el__inner {
260 |     transition-delay: 0s;
261 | }
262 | .el:nth-child(1) .el__bg {
263 |     transform: translate3d(0%, 0, 0);
264 | }
265 | .el:nth-child(1) .el__bg:before {
266 |     transition-delay: 0s;
267 |     /* background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/onepgscr-3.jpg"); */
268 | }
269 | .el:nth-child(2) {
270 |     transform: translate3d(105.2083333333%, 0, 0);
271 |     transform-origin: 155.2083333333% 50%;
272 | }
273 | .cont.s--el-active .el:nth-child(2):not(.s--active) {
274 |     transform: scale(0.5) translate3d(105.2083333333%, 0, 0);
275 |     opacity: 0;
276 |     transition: transform 0.95s, opacity 0.95s;
277 | }
278 | .el:nth-child(2) .el__inner {
279 |     transition-delay: 0.1s;
280 | }
281 | .el:nth-child(2) .el__bg {
282 |     transform: translate3d(-19.2%, 0, 0);
283 | }
284 | .el:nth-child(2) .el__bg:before {
285 |     transition-delay: 0.1s;
286 | }
287 | .el:nth-child(3) {
288 |     transform: translate3d(210.4166666667%, 0, 0);
289 |     transform-origin: 260.4166666667% 50%;
290 | }
291 | .cont.s--el-active .el:nth-child(3):not(.s--active) {
292 |     transform: scale(0.5) translate3d(210.4166666667%, 0, 0);
293 |     opacity: 0;
294 |     transition: transform 0.95s, opacity 0.95s;
295 | }
296 | .el:nth-child(3) .el__inner {
297 |     transition-delay: 0.2s;
298 | }
299 | .el:nth-child(3) .el__bg {
300 |     transform: translate3d(-38.4%, 0, 0);
301 | }
302 | .el:nth-child(3) .el__bg:before {
303 |     transition-delay: 0.2s;
304 | }
305 | .el:nth-child(4) {
306 |     transform: translate3d(315.625%, 0, 0);
307 |     transform-origin: 365.625% 50%;
308 | }
309 | .cont.s--el-active .el:nth-child(4):not(.s--active) {
310 |     transform: scale(0.5) translate3d(315.625%, 0, 0);
311 |     opacity: 0;
312 |     transition: transform 0.95s, opacity 0.95s;
313 | }
314 | .el:nth-child(4) .el__inner {
315 |     transition-delay: 0.3s;
316 | }
317 | .el:nth-child(4) .el__bg {
318 |     transform: translate3d(-57.6%, 0, 0);
319 | }
320 | .el:nth-child(4) .el__bg:before {
321 |     transition-delay: 0.3s;
322 | }
323 | .el:nth-child(5) {
324 |     transform: translate3d(420.8333333333%, 0, 0);
325 |     transform-origin: 470.8333333333% 50%;
326 | }
327 | .cont.s--el-active .el:nth-child(5):not(.s--active) {
328 |     transform: scale(0.5) translate3d(420.8333333333%, 0, 0);
329 |     opacity: 0;
330 |     transition: transform 0.95s, opacity 0.95s;
331 | }
332 | .el:nth-child(5) .el__inner {
333 |     transition-delay: 0.4s;
334 | }
335 | .el:nth-child(5) .el__bg {
336 |     transform: translate3d(-76.8%, 0, 0);
337 | }
338 | .el:nth-child(5) .el__bg:before {
339 |     transition-delay: 0.4s;
340 | }
341 | 
342 | .el:hover .el__bg:after {
343 |     opacity: 0;
344 | }
345 | .el.s--active {
346 |     z-index: 1;
347 |     width: 100%;
348 |     transform: translate3d(0, 0, 0);
349 |     transition: transform 0.6s, width 0.7s 0.7s, z-index 0s;
350 | }
351 | .el.s--active .el__bg {
352 |     transform: translate3d(0, 0, 0);
353 |     transition: transform 0.6s;
354 | }
355 | .el.s--active .el__bg:before {
356 |     transition-delay: 0.6s;
357 |     transform: scale(1.1);
358 | }
359 | .icon-link {
360 |     position: absolute;
361 |     left: 5px;
362 |     bottom: 5px;
363 |     width: 32px;
364 | }
365 | .icon-link img {
366 |     width: 100%;
367 |     vertical-align: top;
368 | }
369 | .container_summary {
370 |     margin-top: 120px;
371 |     margin-bottom: 100px;
372 | }
373 | .container_summary h2 {
374 |     text-align: center;
375 | }
376 | .div_quote {
377 |     text-align: center;
378 |     margin-bottom: 200px;
379 |     color: rgb(121, 59, 221);
380 |     font-weight: bold;
381 |     letter-spacing: 5px;
382 | }
383 | /* Travel Vlog Summary section ends */
384 | 
385 | /*hero section starts*/
386 | .hero {
387 |     background-color: white;
388 |     display: flex;
389 |     height: 100vh;
390 | }
391 | .hero .item1 {
392 |     width:50%;
393 |     background: url('../images/travel/hero.svg');
394 |     background-repeat: no-repeat;
395 |     background-position: 60% 35%;
396 |     background-size: 350px;
397 | }
398 | .hero .item2 {
399 |     background-color: white; 
400 |     width: 50%;
401 |     display: flex;
402 |     flex-direction: column;
403 |     align-items: center;
404 |     justify-content: center;
405 |     font-weight: bold;
406 |     color: #343a40;
407 | }
408 | .hero .item2 span {
409 |     color: rgb(121, 59, 221);
410 | }
411 | .hero .item2 h1 {
412 |     font-weight: bold;
413 |     font-size: 28px;
414 | }
415 | .hero .item2 p {
416 |     letter-spacing: 1px;
417 |     color: #585c61;
418 |     text-align: center;
419 | }
420 | 
421 | @media only screen and (max-width: 950px) {
422 |     .hero .item1 {
423 |         background-size: 300px;
424 |         background-position: 10% 35%;
425 |     }
426 |     .hero .item2 p {
427 |         letter-spacing: 1px;
428 |     }
429 | }
430 | @media only screen and (max-width: 700px) {
431 | 
432 |     .container_summary {
433 |         margin-top: 5px;
434 |         margin-bottom: 5px;
435 |     }
436 |     .div_quote {
437 |         margin-bottom: 70px;
438 |         letter-spacing: 2px;
439 |     }
440 | 
441 |     .hero {
442 |         flex-direction: column;
443 |         justify-content:space-evenly;
444 |         height: 80vh;
445 |     }
446 |     .hero .item1 {
447 |         background-position: 60% 0%;
448 |         background-size: 300px;
449 |         height: 40%;
450 |         width: 100%;
451 |     }
452 |     .hero .item2 {
453 |         width: 100%;
454 |     }
455 | 
456 |     .el__text {
457 |         font-size: 25px;
458 |     }
459 | }
460 | /*hero section ends*/
461 | 


--------------------------------------------------------------------------------
/designs/BMI Calculator.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DaveSimoes/Developer.Portfolio/1eb60b78856ecf2afc5b474061ee0a20a32b4430/designs/BMI Calculator.jpg


--------------------------------------------------------------------------------
/designs/BMI_Calculator_1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DaveSimoes/Developer.Portfolio/1eb60b78856ecf2afc5b474061ee0a20a32b4430/designs/BMI_Calculator_1.png


--------------------------------------------------------------------------------
/designs/Blog_dark_light.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DaveSimoes/Developer.Portfolio/1eb60b78856ecf2afc5b474061ee0a20a32b4430/designs/Blog_dark_light.png


--------------------------------------------------------------------------------
/designs/New_restTutorial.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DaveSimoes/Developer.Portfolio/1eb60b78856ecf2afc5b474061ee0a20a32b4430/designs/New_restTutorial.png


--------------------------------------------------------------------------------
/designs/Projet_1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DaveSimoes/Developer.Portfolio/1eb60b78856ecf2afc5b474061ee0a20a32b4430/designs/Projet_1.jpg


--------------------------------------------------------------------------------
/designs/ProjetoPizza.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DaveSimoes/Developer.Portfolio/1eb60b78856ecf2afc5b474061ee0a20a32b4430/designs/ProjetoPizza.png


--------------------------------------------------------------------------------
/designs/Projeto_1_2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DaveSimoes/Developer.Portfolio/1eb60b78856ecf2afc5b474061ee0a20a32b4430/designs/Projeto_1_2.jpg


--------------------------------------------------------------------------------
/designs/Projeto_2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DaveSimoes/Developer.Portfolio/1eb60b78856ecf2afc5b474061ee0a20a32b4430/designs/Projeto_2.jpg


--------------------------------------------------------------------------------
/designs/Projeto_Chuteira.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DaveSimoes/Developer.Portfolio/1eb60b78856ecf2afc5b474061ee0a20a32b4430/designs/Projeto_Chuteira.jpg


--------------------------------------------------------------------------------
/designs/Resume_app.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DaveSimoes/Developer.Portfolio/1eb60b78856ecf2afc5b474061ee0a20a32b4430/designs/Resume_app.png


--------------------------------------------------------------------------------
/designs/bmicalculator.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DaveSimoes/Developer.Portfolio/1eb60b78856ecf2afc5b474061ee0a20a32b4430/designs/bmicalculator.png


--------------------------------------------------------------------------------
/designs/coursera.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DaveSimoes/Developer.Portfolio/1eb60b78856ecf2afc5b474061ee0a20a32b4430/designs/coursera.png


--------------------------------------------------------------------------------
/designs/hcl_domino.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DaveSimoes/Developer.Portfolio/1eb60b78856ecf2afc5b474061ee0a20a32b4430/designs/hcl_domino.png


--------------------------------------------------------------------------------
/designs/hero.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" id="aee208a0-d3af-4f9e-8f7e-ec9443f0f7b7" width="848.284" height="615.234" data-name="Layer 1" viewBox="0 0 848.284 615.234"><path fill="#f2f2f2" d="M634.89862,256.95766a554.59164,554.59164,0,0,1-5.22832,71.26187c-.1145.82939-.23926,1.65873-.35424,2.488L406.03976,329.46c-.65557-.82369-1.30082-1.65726-1.926-2.50079-2.08453-2.79166-4.03825-5.66267-5.83174-8.6327-8.62038-14.3084-12.56688-31.06069-8.6121-42.61879l.07082-.1796a20.28147,20.28147,0,0,1,3.95842-6.878c9.01681-10.14979,27.24788-8.45788,43.7922-.26533-14.83916-16.24314-26.655-36.73947-27.55279-55.03482-.88028-17.84516,8.45086-30.59321,18.5716-41.42684.33209-.35814.66412-.70633.99615-1.05445.16116-.1791.332-.34819.4927-.52729,7.89635-8.256,17.10212-16.39469,30.42691-15.41018,14.61381,1.08167,30.81618,13.32235,42.1766,27.58606,11.36047,14.2537,18.90977,30.4461,26.56182,46.24911,7.66188,15.79306,15.9514,31.98965,28.24628,45.48855C540.758,253.19161,527.33168,229.2262,522.372,205.91809s-.5948-45.694,14.24655-56.67128a34.71268,34.71268,0,0,1,15.20493-6.13511c.64025-.10641,1.29065-.1928,1.95124-.26913,13.73893-1.56321,30.14281,3.18849,44.09959,14.54662,15.3703,12.50612,26.02665,31.04593,31.32878,48.64583C634.50473,223.63493,635.06974,240.57835,634.89862,256.95766Z" transform="translate(-175.85805 -142.38305)"/><path fill="#fff" d="M488.81825,329.92255l-4.26947-.02385q-2.03345-1.27134-4.08612-2.51286c-.84712-.53471-1.70412-1.04952-2.56155-1.57434q-21.24279-12.97391-42.75125-24.88928Q413.661,288.997,391.956,278.17057a1.78937,1.78937,0,0,1-1.02862-2.04581.51534.51534,0,0,1,.07115-.14957c.20183-.37889.65291-.5364,1.31127-.21271,1.77484.88994,3.55993,1.77993,5.33466,2.68988q21.76425,11.01171,43.3417,23.12254,21.56257,12.10564,42.87944,25.27995c.29879.18167.598.37335.89681.555C486.11761,328.24746,487.463,329.085,488.81825,329.92255Z" transform="translate(-175.85805 -142.38305)"/><path fill="#fff" d="M543.86768,330.23014l-2.64009-.01475c-.59545-.8333-1.18065-1.6666-1.7761-2.5q-20.98532-29.42769-41.96185-58.85538-34.35146-48.17766-68.68242-96.35523a1.70041,1.70041,0,0,1-.297-.58168c-.19573-.71113.32663-1.1282.99615-1.05445a2.0056,2.0056,0,0,1,1.395.88781q19.25925,27.018,38.50885,54.016,34.17263,47.9367,68.33556,95.86329c1.44865,2.02815,2.89724,4.06624,4.34589,6.09439C542.687,328.56355,543.28249,329.3969,543.86768,330.23014Z" transform="translate(-175.85805 -142.38305)"/><path fill="#fff" d="M602.68425,314.89856c-.13473,4.44933-.42922,8.82776-.81381,13.16564q-.11169,1.24443-.22387,2.48878l-2.77-.01548c.08471-.82949.16943-1.65905.24389-2.48866.58532-6.26685,1.00062-12.60459,1.057-19.11439a266.65605,266.65605,0,0,0-5.24956-53.75014,334.665,334.665,0,0,0-16.25856-55.84172A383.49231,383.49231,0,0,0,552.068,144.09306a1.47569,1.47569,0,0,1-.24452-.98136c.11428-.78941,1.16541-1.02353,1.95124-.26913a2.29258,2.29258,0,0,1,.3971.50222q1.91668,3.29577,3.76342,6.61116a383.2281,383.2281,0,0,1,25.46063,55.44311,333.08069,333.08069,0,0,1,15.15748,55.9256A263.07433,263.07433,0,0,1,602.68425,314.89856Z" transform="translate(-175.85805 -142.38305)"/><path fill="#3f3d56" d="M791.57777,328.85694h-607a8.72766,8.72766,0,0,0-8.71972,8.72v411.32a8.72766,8.72766,0,0,0,8.71972,8.72h607a8.71242,8.71242,0,0,0,6.63037-3.06,2.04307,2.04307,0,0,0,.18994-.24,8.1662,8.1662,0,0,0,1.25-2.11,8.50708,8.50708,0,0,0,.65967-3.31V337.577A8.72954,8.72954,0,0,0,791.57777,328.85694Zm6.24024,420.04a6.17532,6.17532,0,0,1-1.03028,3.42,6.44578,6.44578,0,0,1-2.35986,2.12,6.1843,6.1843,0,0,1-2.8501.69h-607a6.23757,6.23757,0,0,1-6.23-6.23V337.577a6.23757,6.23757,0,0,1,6.23-6.23h607a6.23945,6.23945,0,0,1,6.24024,6.23Z" transform="translate(-175.85805 -142.38305)"/><rect width="621.957" height="2.493" x="1.243" y="221.423" fill="#3f3d56"/><circle cx="22.432" cy="205.17" r="7.478" fill="#3f3d56"/><circle cx="43.932" cy="205.17" r="7.478" fill="#3f3d56"/><circle cx="65.433" cy="205.17" r="7.478" fill="#3f3d56"/><path fill="#3f3d56" d="M644.17739,421.50889h-312a13,13,0,0,1,0-26h312a13,13,0,0,1,0,26Zm-312-24a11,11,0,0,0,0,22h312a11,11,0,0,0,0-22Z" transform="translate(-175.85805 -142.38305)"/><path fill="#6c63ff" d="M358.08289,574.12671h-120a17.01917,17.01917,0,0,1-17-17v-56a17.01917,17.01917,0,0,1,17-17h120a17.01917,17.01917,0,0,1,17,17v56A17.01917,17.01917,0,0,1,358.08289,574.12671Z" transform="translate(-175.85805 -142.38305)"/><path fill="#6c63ff" d="M548.083,574.12671h-120a17.01919,17.01919,0,0,1-17.00012-17v-56a17.01919,17.01919,0,0,1,17.00012-17h120a17.01917,17.01917,0,0,1,17,17v56A17.01917,17.01917,0,0,1,548.083,574.12671Z" transform="translate(-175.85805 -142.38305)"/><path fill="#6c63ff" d="M738.083,574.12671h-120a17.01917,17.01917,0,0,1-17-17v-56a17.01917,17.01917,0,0,1,17-17h120a17.01917,17.01917,0,0,1,17,17v56A17.01917,17.01917,0,0,1,738.083,574.12671Z" transform="translate(-175.85805 -142.38305)"/><path fill="#6c63ff" d="M358.08289,692.12671h-120a17.01917,17.01917,0,0,1-17-17v-56a17.01917,17.01917,0,0,1,17-17h120a17.01917,17.01917,0,0,1,17,17v56A17.01917,17.01917,0,0,1,358.08289,692.12671Z" transform="translate(-175.85805 -142.38305)"/><path fill="#6c63ff" d="M548.083,692.12671h-120a17.01919,17.01919,0,0,1-17.00012-17v-56a17.01919,17.01919,0,0,1,17.00012-17h120a17.01917,17.01917,0,0,1,17,17v56A17.01917,17.01917,0,0,1,548.083,692.12671Z" transform="translate(-175.85805 -142.38305)"/><path fill="#6c63ff" d="M738.083,692.12671h-120a17.01917,17.01917,0,0,1-17-17v-56a17.01917,17.01917,0,0,1,17-17h120a17.01917,17.01917,0,0,1,17,17v56A17.01917,17.01917,0,0,1,738.083,692.12671Z" transform="translate(-175.85805 -142.38305)"/><circle cx="697.115" cy="248.744" r="33" fill="#2f2e41"/><path fill="#ffb8b8" d="M790.30093,562.79573a10.7427,10.7427,0,0,1,6.25283-15.23974l41.81616-88.45906,19.12793,13.413-47.11861,82.73471a10.80091,10.80091,0,0,1-20.07831,7.55105Z" transform="translate(-175.85805 -142.38305)"/><path fill="#6c63ff" d="M826.13287,470.8413a4.81169,4.81169,0,0,1,.55209-3.97272l13.00137-20.38208a13.37737,13.37737,0,0,1,24.45588,10.8499l-6.54916,23.35317a4.81687,4.81687,0,0,1-6.60409,3.09631L828.78041,473.855A4.81141,4.81141,0,0,1,826.13287,470.8413Z" transform="translate(-175.85805 -142.38305)"/><path fill="#ffb8b8" d="M931.348,571.56571a10.74268,10.74268,0,0,1-7.44457-14.69442l-39.60233-89.47208,22.65457-5.706,31.80418,89.74234a10.80091,10.80091,0,0,1-7.41185,20.13012Z" transform="translate(-175.85805 -142.38305)"/><polygon fill="#ffb8b8" points="766.285 591.358 754.765 595.553 733.105 553.115 750.107 546.924 766.285 591.358"/><path fill="#2f2e41" d="M923.47893,735.69332H947.1228a0,0,0,0,1,0,0v14.88687a0,0,0,0,1,0,0H908.59207a0,0,0,0,1,0,0v0A14.88686,14.88686,0,0,1,923.47893,735.69332Z" transform="translate(-374.11248 219.90765) rotate(-20.00652)"/><path fill="#2f2e41" d="M910.69461,706.89767l-43.88711-76.802a4.82207,4.82207,0,0,1,.052-4.86807l19.76235-32.93708a4.81658,4.81658,0,0,1,8.66077.84148l37.36376,103.46818a4.79859,4.79859,0,0,1-2.46853,5.9897l-13.23928,6.27089a4.7736,4.7736,0,0,1-2.04386.4589A4.84031,4.84031,0,0,1,910.69461,706.89767Z" transform="translate(-175.85805 -142.38305)"/><circle cx="694.111" cy="260.239" r="24.561" fill="#ffb8b8"/><path fill="#6c63ff" d="M835.0336,513.87352c-19.34214-42.88856.15732-66.85887,9.43874-75.17337a14.557,14.557,0,0,1,9.73013-3.72135h34.59941a14.576,14.576,0,0,1,13.03753,21.09462l-23.1296,46.25869-43.488,11.95954Z" transform="translate(-175.85805 -142.38305)"/><path fill="#6c63ff" d="M885.65074,483.434a4.8117,4.8117,0,0,1-2.64533-3.01488l-6.92414-23.16293a13.37737,13.37737,0,0,1,24.198-11.41337l13.39047,20.22269a4.81688,4.81688,0,0,1-1.97428,7.02164l-22.03343,10.31357A4.81148,4.81148,0,0,1,885.65074,483.434Z" transform="translate(-175.85805 -142.38305)"/><polygon fill="#ffb8b8" points="687.147 602.955 674.887 602.954 669.055 555.666 687.149 555.667 687.147 602.955"/><path fill="#2f2e41" d="M666.12988,599.45141h23.64387a0,0,0,0,1,0,0v14.88687a0,0,0,0,1,0,0H651.243a0,0,0,0,1,0,0v0A14.88686,14.88686,0,0,1,666.12988,599.45141Z"/><path fill="#2f2e41" d="M857.81014,727.28565l-19.62855-2.26417a4.81784,4.81784,0,0,1-4.22285-5.42l17.51831-131.89992a3.75008,3.75008,0,0,0-.07291-1.37669l-17.60768-72.64473a4.761,4.761,0,0,1,.75368-3.92624c2.73038-3.76421,12.08576-12.53656,39.91435-12.70276h.03006a4.83432,4.83432,0,0,1,4.39715,2.82655l3.7122,8.16606a3.76278,3.76278,0,0,0,1.25282,1.51259c5.10954,3.61682,29.862,23.918,15.32784,68.48852-14.28487,43.80741-32.58717,128.8549-36.11121,145.45881a4.79131,4.79131,0,0,1-4.69769,3.81438A4.92486,4.92486,0,0,1,857.81014,727.28565Z" transform="translate(-175.85805 -142.38305)"/><path fill="#2f2e41" d="M895.77671,387.17325A33.40487,33.40487,0,0,1,876.686,393.0731a20.4708,20.4708,0,0,0,8.11361,3.338,67.35862,67.35862,0,0,1-27.514.15459,17.80737,17.80737,0,0,1-5.75977-1.97823,7.2892,7.2892,0,0,1-3.55521-4.75471c-.60365-3.44851,2.08348-6.58157,4.876-8.69307A35.96732,35.96732,0,0,1,883.07116,375.1c3.37627.87272,6.75853,2.34727,8.9515,5.05866s2.84258,6.8915.75322,9.68353Z" transform="translate(-175.85805 -142.38305)"/><path fill="#2f2e41" d="M879.3779,370.08826c-2.8056-.93408-5.69279-1.91393-7.916-3.86357s-3.63443-5.13865-2.63514-7.92169c.96283-2.6815,3.89625-4.24792,6.73756-4.45882s5.63774.66859,8.35114,1.53748c-1.22708-1.85419-2.49474-5.44908-3.60458-9.24084-2.53233-8.65169,8.02021-16.55262,17.01128-15.90053q.39724.02881.76911.08264c9.066,1.32279,13.769,4.78121,20.10086,11.40309,7.92094,8.28379,12.06335,19.46117,14.83741,30.58174s4.403,22.56415,8.3047,33.341S951.817,426.785,961.8803,432.2706a33.98159,33.98159,0,0,0,35.25973-2.173,30.44213,30.44213,0,0,1-34.97174,34.48426c-12.992-2.09839-23.39954-12.56259-28.9584-24.49133s-7.07657-25.28067-8.47144-38.36692-2.80706-26.434-8.18513-38.44535c-2.1766-4.86121-5.38082-9.809-11.10726-10.58456a6.8902,6.8902,0,0,0-7.38673,3.95869c-2.51776,6.09372,6.09628,11.25411,3.88914,17.06135a6.39293,6.39293,0,0,1-5.69215,3.88711c-4.1636.2738-7.58409-2.11256-10.80631-4.41625C878.85854,368.47208,879.3779,370.08826,879.3779,370.08826Z" transform="translate(-175.85805 -142.38305)"/><path fill="#3f3d56" d="M1023.142,757.617h-230a1,1,0,0,1,0-2h230a1,1,0,0,1,0,2Z" transform="translate(-175.85805 -142.38305)"/></svg>


--------------------------------------------------------------------------------
/designs/itil_22.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DaveSimoes/Developer.Portfolio/1eb60b78856ecf2afc5b474061ee0a20a32b4430/designs/itil_22.png


--------------------------------------------------------------------------------
/designs/javascript.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DaveSimoes/Developer.Portfolio/1eb60b78856ecf2afc5b474061ee0a20a32b4430/designs/javascript.png


--------------------------------------------------------------------------------
/designs/mockups/2.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" id="b1e55c18-19aa-4dcf-8e98-b72f0689681d" width="974.917" height="611.895" data-name="Layer 1" viewBox="0 0 974.917 611.895"><path fill="#3f3d56" d="M769.77783,413.35119H112.54162V144.05236H769.77783Zm-655.23621-2H767.77783V146.05236H114.54162Z" transform="translate(-112.54162 -144.05236)"/><path fill="#ff6584" d="M205.37,246.68939H164.06638a144.46051,144.46051,0,0,1,0-49.24667H205.37A88.61114,88.61114,0,0,0,205.37,246.68939Z" transform="translate(-112.54162 -144.05236)"/><path fill="#e6e6e6" d="M241.12784,267.66712h41.30365a144.46007,144.46007,0,0,0,0-49.24668H241.12784A88.61117,88.61117,0,0,1,241.12784,267.66712Z" transform="translate(-112.54162 -144.05236)"/><path fill="#e6e6e6" d="M507.6702,277.73653h56.126a1.5009,1.5009,0,0,0,0-3h-56.126a1.5009,1.5009,0,0,0,0,3Z" transform="translate(-112.54162 -144.05236)"/><path fill="#e6e6e6" d="M562.33744,263.585l8.769,8.004c1.00287.91538,3.76135,2.80521,4.38446,4.002,1.28839,2.47452-.09595,1.91-2.30359,2.76747a49.35994,49.35994,0,0,0-14.76367,9.16753c-1.45135,1.27893.67712,3.394,2.12134,2.12131a45.83257,45.83257,0,0,1,13.43988-8.396c1.769-.6998,5.12518-1.1096,5.9657-3.2168,1.02868-2.579-2.24756-4.482-3.79981-5.89883l-11.692-10.67208c-1.42353-1.29936-3.551.81635-2.12134,2.12133Z" transform="translate(-112.54162 -144.05236)"/><path fill="#6c63ff" d="M193.12784,338.66712h41.30365a144.46007,144.46007,0,0,0,0-49.24668H193.12784A88.61117,88.61117,0,0,1,193.12784,338.66712Z" transform="translate(-112.54162 -144.05236)"/><path fill="#6c63ff" d="M514.12784,242.66712h41.30365a144.46007,144.46007,0,0,0,0-49.24668H514.12784A88.61117,88.61117,0,0,1,514.12784,242.66712Z" transform="translate(-112.54162 -144.05236)"/><polygon fill="#f2f2f2" points="270.825 179.533 270.825 57.985 259.825 55.533 259.825 190.533 342.825 189.684 342.545 178.8 270.825 179.533"/><path fill="#3f3d56" d="M465.36705,344.73653h-100v-161h100Zm-98-2h96v-157h-96Z" transform="translate(-112.54162 -144.05236)"/><rect width="16.197" height="2" x="261.825" y="49.684" fill="#3f3d56"/><rect width="16.197" height="2" x="261.825" y="54.684" fill="#3f3d56"/><rect width="16.197" height="2" x="261.825" y="59.684" fill="#3f3d56"/><rect width="69.197" height="2" x="269.825" y="145.684" fill="#3f3d56"/><rect width="69.197" height="2" x="269.825" y="156.684" fill="#3f3d56"/><rect width="69.197" height="2" x="269.825" y="167.684" fill="#3f3d56"/><path fill="#3f3d56" d="M450.36705,206.73653a7,7,0,1,1,7-7A7.00786,7.00786,0,0,1,450.36705,206.73653Zm0-12a5,5,0,1,0,5,5A5.00573,5.00573,0,0,0,450.36705,194.73653Z" transform="translate(-112.54162 -144.05236)"/><path fill="#3f3d56" d="M452.36705,266.73653h-71v-46h71Zm-69-2h67v-42h-67Z" transform="translate(-112.54162 -144.05236)"/><rect width="2" height="81.835" x="415.867" y="202.819" fill="#3f3d56" transform="matrix(0.53767, -0.84316, 0.84316, 0.53767, -125.318, 320.12045)"/><rect width="81.835" height="2" x="375.949" y="242.736" fill="#3f3d56" transform="translate(-178.20836 118.30595) rotate(-32.52429)"/><polygon fill="#f2f2f2" points="524.825 179.533 524.825 57.985 513.825 55.533 513.825 190.533 596.825 189.684 596.545 178.8 524.825 179.533"/><path fill="#3f3d56" d="M720.367,342.73653h-100v-161h100Zm-98-2h96v-157h-96Z" transform="translate(-112.54162 -144.05236)"/><rect width="16.197" height="2" x="516.825" y="47.684" fill="#3f3d56"/><rect width="16.197" height="2" x="516.825" y="52.684" fill="#3f3d56"/><rect width="16.197" height="2" x="516.825" y="57.684" fill="#3f3d56"/><path fill="#3f3d56" d="M705.367,204.73653a7,7,0,1,1,7-7A7.00786,7.00786,0,0,1,705.367,204.73653Zm0-12a5,5,0,1,0,5,5A5.00573,5.00573,0,0,0,705.367,192.73653Z" transform="translate(-112.54162 -144.05236)"/><path fill="#3f3d56" d="M707.367,264.73653h-71v-46h71Zm-69-2h67v-42h-67Z" transform="translate(-112.54162 -144.05236)"/><rect width="2" height="81.835" x="670.867" y="200.819" fill="#3f3d56" transform="translate(-5.73668 534.20071) rotate(-57.47511)"/><rect width="81.835" height="2" x="630.949" y="240.736" fill="#3f3d56" transform="translate(-137.15596 255.02317) rotate(-32.5184)"/><path fill="#3f3d56" d="M707.367,324.73653h-71v-46h71Zm-69-2h67v-42h-67Z" transform="translate(-112.54162 -144.05236)"/><rect width="2" height="81.835" x="670.867" y="260.819" fill="#3f3d56" transform="translate(-56.32615 561.94076) rotate(-57.47511)"/><rect width="81.835" height="2" x="630.949" y="300.736" fill="#3f3d56" transform="translate(-169.41018 264.43003) rotate(-32.5184)"/><path fill="#6c63ff" d="M400.12784,375.66712h41.30365a144.46007,144.46007,0,0,0,0-49.24668H400.12784A88.61117,88.61117,0,0,1,400.12784,375.66712Z" transform="translate(-112.54162 -144.05236)"/><circle cx="897.962" cy="342.261" r="29.266" fill="#ffb8b8" transform="translate(-166.66901 328.60718) rotate(-28.66322)"/><circle cx="831.302" cy="161.871" r="25.89" fill="#2f2e41"/><path fill="#2f2e41" d="M966.1754,327.36177a25.89173,25.89173,0,0,1-39.98159-13.59461A25.8918,25.8918,0,1,0,976.699,303.14972,25.88224,25.88224,0,0,1,966.1754,327.36177Z" transform="translate(-112.54162 -144.05236)"/><path fill="#2f2e41" d="M864.00058,327.39054c4.51979-8.09173,6.24924-11.47187,12.077-16.39233,5.15347-4.35167,11.49242-5.62963,16.60531-1.50633a30.61956,30.61956,0,1,1-18.475,28.10592,30.87312,30.87312,0,0,1,.20862-3.4622C869.97214,333.51144,868.4449,328.0147,864.00058,327.39054Z" transform="translate(-112.54162 -144.05236)"/><polygon fill="#ffb8b8" points="714.548 597.707 701.163 593.819 709.789 540.338 729.545 546.077 714.548 597.707"/><path fill="#2f2e41" d="M800.65658,732.3224H829.578a0,0,0,0,1,0,0v16.92591a0,0,0,0,1,0,0H785.76972a0,0,0,0,1,0,0v-2.03905A14.88686,14.88686,0,0,1,800.65658,732.3224Z" transform="translate(126.15148 -339.94245) rotate(16.19699)"/><polygon fill="#ffb8b8" points="852.88 598.027 838.941 598.026 832.31 544.261 852.882 544.262 852.88 598.027"/><path fill="#2f2e41" d="M826.94535,594.04308h28.92138a0,0,0,0,1,0,0V610.969a0,0,0,0,1,0,0H812.05849a0,0,0,0,1,0,0v-2.03905A14.88686,14.88686,0,0,1,826.94535,594.04308Z"/><path fill="#ffb8b8" d="M932.62439,554.92014a11.43313,11.43313,0,0,1,3.2083-17.23524l-7.23756-39.97958,19.41432,8.2976,3.89648,36.69318a11.49507,11.49507,0,0,1-19.28154,12.224Z" transform="translate(-112.54162 -144.05236)"/><path fill="#6c63ff" d="M943.03294,459.19813l-22.77759-69.14795c-.47522-.793-6.14465-9.71631-18.49048-5.92041a10.32417,10.32417,0,0,0-6.3772,5.20019c-3.61389,6.92822-.24316,17.63135-.22814,17.688l28.04284,62.84082.02918.06494,8.85144,64.53565,19.11535-3.88086Z" transform="translate(-112.54162 -144.05236)"/><path fill="#2f2e41" d="M791.6378,715.00721l34.28369-105.12793L865.672,519.0199l-.57227-44.06689L912.271,463.9535l5.49316,18.46777c31.76965,20.96289,21.30383,61.28809,20.557,63.99072l47.86914,176.65967L933.99522,728.871l-35.035-167.26416-32.31127,67.96484-22.846,101.665Z" transform="translate(-112.54162 -144.05236)"/><path fill="#6c63ff" d="M861.69883,437.96082c-9.37878-17.97754-2.598-24.82324,7.65564-35.17773a141.13594,141.13594,0,0,0,11.77332-13.01465c15.99695-20.56641,34.563-10.46582,34.74878-10.36084l.10449.05859,4.58716,6.88037c15.11645,15.21338-7.80713,57.01758-9.5481,60.13086L912.1699,476.37l-48.749,4.64258Z" transform="translate(-112.54162 -144.05236)"/><path fill="#ffb8b8" d="M880.272,553.36445a11.43315,11.43315,0,0,1,7.46464-15.86272l3.11326-40.50995,16.68324,12.93968L902.019,546.41661a11.49507,11.49507,0,0,1-21.747,6.94784Z" transform="translate(-112.54162 -144.05236)"/><path fill="#6c63ff" d="M883.80491,534.372,891.68,468.77967l-11.22534-67.875c-.02637-.47607-.58435-11.73242,4.9458-17.8335a11.2912,11.2912,0,0,1,8.18567-3.74707c14.02564-.61425,17.37915,11.0708,17.41126,11.18848l4.56775,72.91748-10.30469,72.13428Z" transform="translate(-112.54162 -144.05236)"/><path fill="#ccc" d="M705.45838,755.94764h381a1,1,0,0,0,0-2h-381a1,1,0,0,0,0,2Z" transform="translate(-112.54162 -144.05236)"/></svg>


--------------------------------------------------------------------------------
/designs/mockups/7.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" id="e49cd177-4f21-4b2c-9072-3096883e7875" width="819.571" height="641.807" data-name="Layer 1" viewBox="0 0 819.571 641.807"><path fill="#f2f2f2" d="M334.77145,657.99886c-13.71858-9.21282-26.57168-30.26129-15.1905-47.84554,5.64447-8.72086,15.49314-11.94609,24.76948-12.89552,12.83117-1.31326,25.8106,1.37332,37.74418,5.433,13.76466,4.6825,26.68525,11.48117,39.48567,18.33381,12.63671,6.76494,25.33933,13.36443,38.31626,19.4334a665.52091,665.52091,0,0,0,78.75812,30.87618A660.41535,660.41535,0,0,0,619.06875,691.676q20.25532,3.78075,40.76955,6.23141c12.76652,1.51691,25.63393,2.90268,38.57207,2.84777,17.04678-.07245,45.4984-2.05732,51.76261-23.87,3.32148-11.56577-1.17362-23.59534-6.794-32.94841-6.79582-11.3091-16.1236-20.647-25.27558-29.7517q-63.8548-63.5247-128.0156-126.70859c-9.95922-9.85716-20.05229-19.60671-29.31061-30.21555-8.668-9.93246-16.92654-20.76291-22.12417-33.30782-4.53966-10.957-7.199-24.32455-2.28691-36.18727,4.07375-9.838,12.838-16.11309,22.00281-19.78153,22.69022-9.08234,48.64975-6.21771,71.17476-1.22982,27.985,6.19691,54.7387,16.67255,82.68576,23.01738,22.56557,5.12305,47.75524,7.83594,70.75053.11706,8.8167-2.95951,17.47363-7.81986,23.3936-15.70465,5.799-7.72372,7.83241-17.396,6.91232-26.77975-1.08593-11.075-5.70046-21.3621-11.22176-30.46651a134.01312,134.01312,0,0,0-23.885-28.63461c-19.82123-18.33734-42.57052-32.74029-63.7963-49.16216-10.40957-8.05363-20.80767-16.48783-29.40729-26.69587-7.28576-8.64844-14.71378-19.37106-15.91946-31.47254-2.48764-24.96816,27.69657-27.47844,43.88927-26.57005a234.62315,234.62315,0,0,1,32.81609,4.65087c2.31439.46276,2.78669-3.4563.48311-3.91691-11.36344-2.27218-22.86141-4.23823-34.5189-4.73524-9.81525-.41844-20.26944-.01325-29.68795,4.03222-7.9103,3.39765-14.58679,10.00823-16.36254,19.04573-2.101,10.693,2.722,21.44867,7.89768,29.8964,6.84425,11.17122,16.05075,20.31717,25.75907,28.63332,10.22459,8.75844,21.05682,16.703,31.90893,24.5843,21.685,15.74864,44.72186,31.23332,61.27552,53.186,11.57981,15.35656,25.41443,41.0725,11.80841,60.93384-6.03976,8.81656-15.84,13.726-25.39807,16.41891-11.55131,3.25453-23.56672,3.866-35.26959,3.254-54.57173-2.854-103.26934-35.08136-158.83759-31.71068-18.89354,1.14606-43.59389,7.02158-52.02907,28.153-4.38189,10.97734-2.96992,23.1666.53436,33.734,4.1971,12.65684,11.70613,23.73732,19.8478,33.72692,8.61242,10.56716,18.22484,20.15963,27.838,29.6855q16.0482,15.90241,32.11377,31.78547l64.97585,64.30988,32.28356,31.9528c9.85309,9.7521,20.09207,19.4144,27.93294,31.14267,6.42006,9.60308,12.90094,23.7749,7.10189,35.9632-4.6054,9.67961-15.44283,13.72949-24.65755,15.66808-11.932,2.51022-24.17754,2.365-36.10354,1.56064-13.75589-.92781-27.45627-2.59179-41.05477-4.58807a642.11378,642.11378,0,0,1-82.90521-17.8899,667.5143,667.5143,0,0,1-80.18135-28.51789q-19.78437-8.49442-38.99381-18.27764c-13.199-6.7266-26.05147-14.16688-39.4544-20.47606-12.12315-5.7068-24.77162-10.42275-38.09223-12.50563-11.12249-1.73916-23.51415-1.93537-34.35823,2.89122a29.834,29.834,0,0,0-16.32742,17.9957,36.79335,36.79335,0,0,0,1.26283,24.64618,47.41333,47.41333,0,0,0,17.91842,21.57062c1.95976,1.31611,4.26836-1.88528,2.2999-3.20721Z" transform="translate(-190.21447 -129.09644)"/><path fill="#fff" d="M1009.78553,231.09644h-301v-102h301Z" transform="translate(-190.21447 -129.09644)"/><rect width="290" height="195.648" x="335.626" y="319.659" fill="#fff"/><path fill="#3f3d56" d="M816.84046,645.40356h-292V447.75562h292Zm-290-2h288V449.75562h-288Z" transform="translate(-190.21447 -129.09644)"/><path fill="#e6e6e6" d="M550.3475,601.51624H791.33342V464.2768H550.3475Z" transform="translate(-190.21447 -129.09644)"/><circle cx="431.026" cy="396.355" r="24.153" fill="#6c63ff"/><path fill="#3f3d56" d="M696.98143,599.88244H578.49376a2.41321,2.41321,0,0,1-.44276-.0351l56.03922-97.068a3.92371,3.92371,0,0,1,6.83011,0l37.60932,65.14015,1.80178,3.117Z" transform="translate(-190.21447 -129.09644)"/><polygon points="506.767 470.786 466.312 470.786 486.171 441.94 487.601 439.862 488.316 438.823 490.117 441.94 506.767 470.786" opacity=".2" style="isolation:isolate"/><path fill="#3f3d56" d="M762.95452,599.88244H660.47241l19.859-28.846,1.42913-2.078,25.87808-37.59177a5.23628,5.23628,0,0,1,7.77263-.4647,4.67237,4.67237,0,0,1,.37266.4647Z" transform="translate(-190.21447 -129.09644)"/><rect width="295" height="143" x="436.571" y="138" fill="#fff"/><circle cx="484.495" cy="185.33" r="21.338" fill="#e6e6e6"/><path fill="#e6e6e6" d="M723.99148,300.201a3.55641,3.55641,0,0,0,0,7.11282H891.65085a3.55642,3.55642,0,0,0,0-7.11282Z" transform="translate(-190.21447 -129.09644)"/><path fill="#e6e6e6" d="M723.99148,321.53943a3.55642,3.55642,0,1,0-.015,7.11282h72.15933a3.55641,3.55641,0,1,0,0-7.11282Z" transform="translate(-190.21447 -129.09644)"/><path fill="#e6e6e6" d="M658.34264,355.6535c-2.70528,0-4.90674,1.59558-4.90674,3.55642s2.20146,3.55639,4.90674,3.55639H889.661c2.70531,0,4.90674-1.59561,4.90674-3.55639s-2.20149-3.55642-4.90674-3.55642Z" transform="translate(-190.21447 -129.09644)"/><path fill="#e6e6e6" d="M658.34264,376.99194c-2.70528,0-4.90674,1.59555-4.90674,3.5564s2.20146,3.55639,4.90674,3.55639H889.661c2.70531,0,4.90674-1.59561,4.90674-3.55639s-2.20149-3.5564-4.90674-3.5564Z" transform="translate(-190.21447 -129.09644)"/><path fill="#e6e6e6" d="M924.78553,413.09644h-301v-149h301Zm-295-6h289v-137h-289Z" transform="translate(-190.21447 -129.09644)"/><circle cx="569.495" cy="50.33" r="21.338" fill="#e6e6e6"/><path fill="#e6e6e6" d="M808.99148,165.201a3.55641,3.55641,0,0,0,0,7.11282H976.65085a3.55642,3.55642,0,0,0,0-7.11282Z" transform="translate(-190.21447 -129.09644)"/><path fill="#e6e6e6" d="M808.99148,186.53943a3.55642,3.55642,0,1,0-.015,7.11282h72.15933a3.55641,3.55641,0,1,0,0-7.11282Z" transform="translate(-190.21447 -129.09644)"/><path fill="#e6e6e6" d="M1009.78553,231.09644h-301v-102h301Zm-295-6h289v-90h-289Z" transform="translate(-190.21447 -129.09644)"/><polygon fill="#ffb8b8" points="184.403 624.868 200.589 624.867 208.29 562.433 184.4 562.435 184.403 624.868"/><path fill="#2f2e41" d="M371.149,749.33891h50.87185a0,0,0,0,1,0,0v19.655a0,0,0,0,1,0,0h-35.985A14.88686,14.88686,0,0,1,371.149,754.10709v-4.76818A0,0,0,0,1,371.149,749.33891Z" transform="translate(602.99008 1389.21831) rotate(179.99738)"/><polygon fill="#ffb8b8" points="119.708 624.868 135.895 624.867 143.595 562.433 119.706 562.435 119.708 624.868"/><path fill="#2f2e41" d="M306.45467,749.33891h50.87185a0,0,0,0,1,0,0v19.655a0,0,0,0,1,0,0h-35.985a14.88686,14.88686,0,0,1-14.88686-14.88686v-4.76818A0,0,0,0,1,306.45467,749.33891Z" transform="translate(473.60137 1389.22127) rotate(179.99738)"/><path fill="#ffb8b8" d="M402.81806,573.98138a12.38035,12.38035,0,0,1,1.067-18.95377l-6.9347-27.42815L412.59059,519.32l9.24911,38.87141a12.44744,12.44744,0,0,1-19.02164,15.79Z" transform="translate(-190.21447 -129.09644)"/><polygon fill="#2f2e41" points="113.952 396.978 115.272 489.399 116.592 610.866 145.639 608.225 160.162 440.548 178.646 608.225 208.633 608.225 211.653 439.227 201.091 402.259 113.952 396.978"/><path fill="#6c63ff" d="M361.01719,538.48541c-31.60436.00242-60.6958-14.30179-61.08849-14.49814l-.32623-.16312L296.95029,460.175c-.76907-2.24921-15.91334-46.63112-18.47821-60.73779-2.59871-14.29213,35.06456-26.83528,39.6382-28.30213l1.03792-11.49738,42.2064-4.548,5.34935,14.7114,15.14186,5.67771a7.4896,7.4896,0,0,1,4.64191,8.79869l-8.41567,34.2233,16.55373,113.22725-.425.19151C383.59419,536.70985,372.14665,538.48481,361.01719,538.48541Z" transform="translate(-190.21447 -129.09644)"/><path fill="#6c63ff" d="M398.74994,545.58949l-14.64707-60.298-15.87558-72.76318,8.05862-36.2653h6.88961c.12627,0,12.64615.18728,15.34183,16.3601,2.61078,15.66474,10.48393,65.51834,10.56307,66.01978l13.30648,85.16194Z" transform="translate(-190.21447 -129.09644)"/><path fill="#ffb8b8" d="M336.07524,535.39962a12.38034,12.38034,0,0,0-15.11512-11.48551l-16.372-23.07271-16.44782,6.52949,23.57812,32.25841a12.44744,12.44744,0,0,0,24.35686-4.22968Z" transform="translate(-190.21447 -129.09644)"/><path fill="#6c63ff" d="M304.16674,533.68975l-49.53915-64.26717,18.56189-58.33693c1.36022-14.6667,10.538-18.76216,10.92858-18.92951l.59569-.25555L300.866,434.97454,289.00646,466.6l29.109,48.95707Z" transform="translate(-190.21447 -129.09644)"/><circle cx="341.905" cy="317.421" r="30.389" fill="#ffb8b8" transform="translate(-300.56943 73.80032) rotate(-28.66319)"/><path fill="#2f2e41" d="M362.30818,302.61883c-3.14573,3.72278-8.46951,4.77328-13.38045,5.204-9.97353.87471-24.47619-.54414-34.223-2.79449-.69561,6.74242,1.20105,14.01237-2.77028,19.55871a90.79845,90.79845,0,0,1-3.22612-20.58362c-.12038-2.98589-.07325-6.07478,1.14028-8.81587s3.85958-5.06786,6.907-5.09221a17.311,17.311,0,0,0-7.7218-3.30125l9.64913-4.849-2.47789-2.54393,17.46919-1.069-5.05972-3.21438a109.71477,109.71477,0,0,1,22.98556-.72558c3.55989.26226,7.28177.7633,10.16613,2.82589s4.551,6.162,2.7604,9.1903a13.344,13.344,0,0,1,10.16941,8.069c1.28588,3.26,1.168,6.88092.772,10.35461a73.39881,73.39881,0,0,1-3.84846,16.281" transform="translate(-190.21447 -129.09644)"/><path fill="#ccc" d="M572.21447,770.90356h-381a1,1,0,0,1,0-2h381a1,1,0,1,1,0,2Z" transform="translate(-190.21447 -129.09644)"/></svg>


--------------------------------------------------------------------------------
/designs/mockups/8.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" id="ed283abe-d35d-4870-aca9-7e129b645167" width="743.13" height="477.701" data-name="Layer 1" viewBox="0 0 743.13 477.701"><path fill="#6c63ff" d="M856.58507,452.44486l.96659,123.00988a6.50753,6.50753,0,0,1-6.44873,6.55087l-14.75882.116a6.50752,6.50752,0,0,1-6.55087-6.44872L828.82665,452.663a6.50753,6.50753,0,0,1,6.44873-6.55087l14.75882-.116A6.50752,6.50752,0,0,1,856.58507,452.44486Z" transform="translate(-228.43522 -211.14927)"/><rect width="324.033" height="2.241" x="419.097" y="475.461" fill="#3f3d56"/><path fill="#2f2e41" d="M803.69878,687.86319H788.9395a6.50753,6.50753,0,0,1-6.5-6.5V558.34951a6.50753,6.50753,0,0,1,6.5-6.5h14.75928a6.50753,6.50753,0,0,1,6.5,6.5V681.36319A6.50753,6.50753,0,0,1,803.69878,687.86319Z" transform="translate(-228.43522 -211.14927)"/><path fill="#2f2e41" d="M832.89116,687.86319H818.1314a6.50753,6.50753,0,0,1-6.5-6.5V558.34951a6.50753,6.50753,0,0,1,6.5-6.5h14.75976a6.50753,6.50753,0,0,1,6.5,6.5V681.36319A6.50753,6.50753,0,0,1,832.89116,687.86319Z" transform="translate(-228.43522 -211.14927)"/><circle cx="582.48" cy="145.403" r="53.519" fill="#6c63ff"/><path fill="#2f2e41" d="M803.03978,376.388l.05566-2c-3.7207-.10352-7.001-.33692-9.46582-2.1377a6.148,6.148,0,0,1-2.38135-4.52832,3.51437,3.51437,0,0,1,1.15283-2.89453c1.63623-1.38184,4.269-.93457,6.188-.05469l1.65479.75879-3.17334-23.19043-1.98145.27148,2.69922,19.72657c-2.60742-.7666-5.02344-.43653-6.67822.96093a5.471,5.471,0,0,0-1.86035,4.49219,8.13266,8.13266,0,0,0,3.20019,6.07324C795.61692,376.18,799.73265,376.29526,803.03978,376.388Z" transform="translate(-228.43522 -211.14927)"/><rect width="10.771" height="2" x="546.083" y="133.165" fill="#2f2e41"/><rect width="10.771" height="2" x="580.083" y="133.165" fill="#2f2e41"/><path fill="#ccc" d="M864.83678,490.04139h-44v-49a22,22,0,0,1,44,0Z" transform="translate(-228.43522 -211.14927)"/><path fill="#6c63ff" d="M783.15233,459.30577l-92.07449,81.576a6.50752,6.50752,0,0,1-9.17563-.55473l-9.78756-11.04717a6.50753,6.50753,0,0,1,.55473-9.17564l92.0745-81.57605a6.50752,6.50752,0,0,1,9.17563.55474l9.78756,11.04717A6.50752,6.50752,0,0,1,783.15233,459.30577Z" transform="translate(-228.43522 -211.14927)"/><path fill="#ccc" d="M760.24006,490.235,731.32131,457.0732l36.9302-32.205A22,22,0,0,1,797.17026,458.03Z" transform="translate(-228.43522 -211.14927)"/><rect width="233.593" height="157" fill="#6c63ff"/><polygon fill="#ccc" points="2 8.349 4 8.349 4 3.349 9 3.349 9 1.349 2 1.349 2 8.349"/><rect width="12.412" height="2" x="219.993" y="1.349" fill="#ccc"/><rect width="12.412" height="2" x="170.348" y="1.349" fill="#ccc"/><rect width="12.412" height="2" x="195.171" y="1.349" fill="#ccc"/><rect width="12.412" height="2" x="269.639" y="1.349" fill="#ccc"/><rect width="12.412" height="2" x="294.462" y="1.349" fill="#ccc"/><rect width="12.412" height="2" x="244.816" y="1.349" fill="#ccc"/><rect width="12.412" height="2" x="46.234" y="1.349" fill="#ccc"/><rect width="12.412" height="2" x="21.411" y="1.349" fill="#ccc"/><rect width="12.412" height="2" x="71.057" y="1.349" fill="#ccc"/><rect width="12.412" height="2" x="120.702" y="1.349" fill="#ccc"/><rect width="12.412" height="2" x="95.88" y="1.349" fill="#ccc"/><rect width="12.412" height="2" x="145.525" y="1.349" fill="#ccc"/><rect width="12.412" height="2" x="319.284" y="1.349" fill="#ccc"/><polygon fill="#ccc" points="344.107 1.349 344.107 3.349 349.107 3.349 349.107 8.349 351.107 8.349 351.107 1.349 344.107 1.349"/><rect width="2" height="12.45" x="349.107" y="170.2" fill="#ccc"/><rect width="2" height="12.45" x="349.107" y="145.3" fill="#ccc"/><rect width="2" height="12.45" x="349.107" y="95.499" fill="#ccc"/><rect width="2" height="12.45" x="349.107" y="45.699" fill="#ccc"/><rect width="2" height="12.449" x="349.107" y="70.6" fill="#ccc"/><rect width="2" height="12.45" x="349.107" y="120.399" fill="#ccc"/><rect width="2" height="12.45" x="349.107" y="195.1" fill="#ccc"/><rect width="2" height="12.45" x="349.107" y="20.799" fill="#ccc"/><polygon fill="#ccc" points="349.107 225 344.107 225 344.107 227 351.107 227 351.107 220 349.107 220 349.107 225"/><rect width="12.412" height="2" x="294.462" y="225" fill="#ccc"/><rect width="12.412" height="2" x="95.88" y="225" fill="#ccc"/><rect width="12.412" height="2" x="46.234" y="225" fill="#ccc"/><rect width="12.412" height="2" x="71.057" y="225" fill="#ccc"/><rect width="12.412" height="2" x="21.411" y="225" fill="#ccc"/><rect width="12.412" height="2" x="219.993" y="225" fill="#ccc"/><rect width="12.412" height="2" x="269.639" y="225" fill="#ccc"/><rect width="12.412" height="2" x="244.816" y="225" fill="#ccc"/><rect width="12.412" height="2" x="319.284" y="225" fill="#ccc"/><rect width="12.412" height="2" x="170.348" y="225" fill="#ccc"/><rect width="12.412" height="2" x="145.525" y="225" fill="#ccc"/><rect width="12.412" height="2" x="120.702" y="225" fill="#ccc"/><rect width="12.412" height="2" x="195.171" y="225" fill="#ccc"/><polygon fill="#ccc" points="4 220 2 220 2 227 9 227 9 225 4 225 4 220"/><rect width="2" height="12.45" x="2" y="70.599" fill="#ccc"/><rect width="2" height="12.45" x="2" y="95.499" fill="#ccc"/><rect width="2" height="12.45" x="2" y="20.799" fill="#ccc"/><rect width="2" height="12.45" x="2" y="45.698" fill="#ccc"/><rect width="2" height="12.45" x="2" y="195.1" fill="#ccc"/><rect width="2" height="12.45" x="2" y="170.199" fill="#ccc"/><rect width="2" height="12.449" x="2" y="145.3" fill="#ccc"/><rect width="2" height="12.45" x="2" y="120.399" fill="#ccc"/><polygon fill="#3f3d56" points="399.14 258.684 397.148 258.881 397.98 267.23 302.732 183.27 311.12 183.048 311.065 181.047 299.058 181.366 300.249 193.317 302.241 193.12 301.407 184.767 396.66 268.733 388.269 268.953 388.323 270.954 400.329 270.636 399.14 258.684"/><circle cx="349.695" cy="226" r="11" fill="#3f3d56"/><circle cx="371.074" cy="244.846" r="6" fill="#ccc"/><circle cx="327.565" cy="206.493" r="6" fill="#ccc"/><path fill="#ccc" d="M844.22828,574.72958h-67.0625a6.50753,6.50753,0,0,1-6.5-6.5V425.754a6.50753,6.50753,0,0,1,6.5-6.5h67.0625a6.50753,6.50753,0,0,1,6.5,6.5V568.22958A6.50753,6.50753,0,0,1,844.22828,574.72958Z" transform="translate(-228.43522 -211.14927)"/><path fill="#2f2e41" d="M843.9071,374.86791c-4.897-1.91065-7.64882-6.70422-9.02856-11.53447-1.6362-5.72811-1.38033-11.58447-1.31279-17.4745.07474-6.51776-.13724-13.34152-3.24274-19.23871-2.83114-5.3762-7.886-9.03221-13.45915-11.18755-13.58354-5.25325-28.43928-.81943-42.51253-2.22417-6.53215-.652-13.31322-2.49529-18.54993-6.61568-4.54114-3.5731-8.20364-8.94839-8.76615-14.80981-1.23536-12.87251,12.566-21.09281,24.1399-19.50049a1.55423,1.55423,0,0,0,1.84518-1.04766,1.50916,1.50916,0,0,0-1.04766-1.84517c-10.86982-1.49546-23.54241,3.9721-27.13485,14.9841-1.91765,5.87825-.53507,12.32936,2.702,17.47a29.68339,29.68339,0,0,0,15.05358,11.80562c6.651,2.477,13.91244,3.01812,20.95445,2.872,8.193-.17,16.4724-1.36718,24.64368-.22255,6.11995.85728,12.3733,3.20219,16.67624,7.78942,4.76791,5.08291,5.63553,12.1406,5.70462,18.81765.06614,6.39191-.48046,12.773.87812,19.07741,1.145,5.3133,3.55991,10.625,8.07158,13.88574a15.91838,15.91838,0,0,0,3.58754,1.89165c1.79944.70209,2.57929-2.19764.79751-2.89284Z" transform="translate(-228.43522 -211.14927)"/></svg>


--------------------------------------------------------------------------------
/designs/rest_tutorial.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DaveSimoes/Developer.Portfolio/1eb60b78856ecf2afc5b474061ee0a20a32b4430/designs/rest_tutorial.png


--------------------------------------------------------------------------------
/designs/ui_ux/2.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" id="b08e8e8f-1307-48a6-9539-94597298b0fc" width="1038" height="764.064" data-name="Layer 1" viewBox="0 0 1038 764.064"><title>creation</title><rect width="375" height="413" x="637" y="184.064" fill="#f2f2f2"/><circle cx="262" cy="429.064" r="262" fill="#f2f2f2"/><line x1="996.917" x2="996.917" y1="571.224" y2="455.131" fill="#3f3d56" stroke="#3f3d56" stroke-miterlimit="10" stroke-width="2"/><circle cx="996.917" cy="455.131" r="16.417" fill="#3f3d56"/><path fill="#3f3d56" d="M1078.41727,595.14959s-2.34533-50.44293-50.42446-44.57962" transform="translate(-81.5 -68.46809)"/><line x1="850.007" x2="850.007" y1="571.379" y2="189.375" fill="#3f3d56" stroke="#3f3d56" stroke-miterlimit="10" stroke-width="2"/><circle cx="850.007" cy="189.192" r="16.417" fill="#3f3d56"/><circle cx="799.583" cy="469.357" r="16.417" fill="#3f3d56"/><path fill="#3f3d56" d="M931.50719,341.52009s-2.34532-50.44293-50.42446-44.57962" transform="translate(-81.5 -68.46809)"/><path fill="#3f3d56" d="M931.50719,484.52009s-2.34532-50.44293-50.42446-44.57962" transform="translate(-81.5 -68.46809)"/><path fill="none" stroke="#3f3d56" stroke-miterlimit="10" stroke-width="2" d="M931.50719,635.33417s10.554-92.81816-50.42446-97.50881" transform="translate(-81.5 -68.46809)"/><circle cx="900.439" cy="469.357" r="16.417" fill="#3f3d56"/><path fill="none" stroke="#3f3d56" stroke-miterlimit="10" stroke-width="2" d="M931.51439,635.33417s-10.554-92.81816,50.42446-97.50881" transform="translate(-81.5 -68.46809)"/><circle cx="901.439" cy="315.357" r="16.417" fill="#3f3d56"/><path fill="none" stroke="#3f3d56" stroke-miterlimit="10" stroke-width="2" d="M932.51439,481.33417s-10.554-92.81816,50.42446-97.50881" transform="translate(-81.5 -68.46809)"/><line x1="736.356" x2="736.356" y1="571.879" y2="339.692" fill="#3f3d56" stroke="#3f3d56" stroke-miterlimit="10" stroke-width="2"/><circle cx="736.356" cy="339.692" r="16.417" fill="#3f3d56"/><path fill="#3f3d56" d="M817.85612,475.02009s-2.34533-50.44293-50.42447-44.57962" transform="translate(-81.5 -68.46809)"/><path fill="none" stroke="#3f3d56" stroke-miterlimit="10" stroke-width="2" d="M817.85612,635.83417s10.55395-92.81816-50.42447-97.50881" transform="translate(-81.5 -68.46809)"/><circle cx="685.932" cy="469.857" r="16.417" fill="#3f3d56"/><circle cx="736" cy="237.064" r="64" fill="#ff6584"/><line x1="45" x2="1037" y1="33.064" y2="33.064" fill="none" stroke="#3f3d56" stroke-miterlimit="10" stroke-width="2"/><line x1="282" x2="801" y1="763.064" y2="763.064" fill="none" stroke="#3f3d56" stroke-miterlimit="10" stroke-width="2"/><circle cx="67.064" cy="11.064" r="11.064" fill="#6c63ff"/><circle cx="96" cy="11.064" r="11.064" fill="#6c63ff"/><circle cx="124.936" cy="11.064" r="11.064" fill="#6c63ff"/><rect width="375" height="413" x="662" y="159.064" fill="none" stroke="#3f3d56" stroke-miterlimit="10" stroke-width="2"/><line x1="136" x2="136" y1="173.064" y2="685.064" fill="none" stroke="#3f3d56" stroke-miterlimit="10" stroke-width="2"/><circle cx="550" cy="730.064" r="33" fill="#6c63ff"/><polygon fill="#fff" points="562.412 717.913 545.878 734.447 538.045 726.613 534.995 729.663 545.868 740.536 565.462 720.963 562.412 717.913"/><path fill="#ffb9b9" d="M303.06953,326.483s-2.67377,9.80381,2.67377,13.36884,7.13005,20.49889,7.13005,20.49889l-10.69507,29.41145-28.5202,5.34753L262.963,374.61083v-30.3027s3.565-15.15135,2.67377-19.60763S303.06953,326.483,303.06953,326.483Z" transform="translate(-81.5 -68.46809)"/><path d="M303.06953,326.483s-2.67377,9.80381,2.67377,13.36884,7.13005,20.49889,7.13005,20.49889l-10.69507,29.41145-28.5202,5.34753L262.963,374.61083v-30.3027s3.565-15.15135,2.67377-19.60763S303.06953,326.483,303.06953,326.483Z" opacity=".2" transform="translate(-81.5 -68.46809)"/><path fill="#2f2e41" d="M331.58972,494.9304l23.17266,4.45628s1.78251,25.84642,0,32.08521-3.565,13.36884-1.78251,15.15136-8.02131,47.23656-7.13,49.91033,2.67377,10.69507,1.78251,16.04261-3.565,3.565-1.78251,8.91256,3.565,6.23879,1.78251,9.80382-10.69507,90.01686-13.36884,90.90811-26.73768,1.78251-26.73768,0,8.02131-15.15135,5.34754-18.71637.89125-64.17044.89125-66.84421,5.34754-7.13,2.67377-8.91256-4.45628-3.565-3.565-6.23879,2.67377-3.565.89125-6.23879-1.78251-56.14913-8.0213-57.93164c0,0-8.0213,39.21526-5.34754,49.01908s-.89125,13.36884-.89125,13.36884l12.47758,10.69507-16.93386,32.08522-17.82512-20.49889s0-5.34754-3.565-6.23879-5.34753-1.78251-5.34753-4.45628-6.2388-19.60764-6.2388-19.60764-17.82512-56.14912-8.91256-84.66932,12.34609-27.57617,12.34609-27.57617Z" transform="translate(-81.5 -68.46809)"/><polygon fill="#ffb9b9" points="264.35 610.952 274.154 621.647 270.589 651.059 262.567 651.059 250.09 623.43 264.35 610.952"/><path fill="#2f2e41" d="M352.08861,699.028s-3.565,8.02131-6.23879,6.2388-3.56-4.45628-7.57318-4.45628-7.57817.89125-6.68692,2.67377S343.176,724.87445,343.176,724.87445a25.19338,25.19338,0,0,1,0,21.39014c-5.34753,11.58633,14.2601,17.82512,17.82512,5.34754s4.45628-26.73768,3.565-32.08522,4.45628-32.97647,4.45628-32.97647-14.39809-6.63758-18.78538-6.88381C350.2371,679.66663,353.87113,695.463,352.08861,699.028Z" transform="translate(-81.5 -68.46809)"/><path fill="#2f2e41" d="M328.0247,718.63566l3.565,10.69507s0,10.69507,3.565,16.04261,7.13005,16.93386-7.13,17.82512-20.49889-4.45628-20.49889-4.45628,2.67377-7.13,0-9.80382,0-8.0213,0-8.0213l2.67377-21.39015Z" transform="translate(-81.5 -68.46809)"/><path fill="#2f2e41" d="M303.96079,629.51006h8.0213l40.10652,52.5841s-7.13005,16.93386-17.82512,18.71638c0,0-1.78251-.89126-9.80381-6.2388s-29.41145-32.08521-29.41145-32.08521l-2.67377-15.15135Z" transform="translate(-81.5 -68.46809)"/><circle cx="202.853" cy="241.081" r="28.52" fill="#ffb9b9"/><path fill="#6c63ff" d="M319.11214,346.09064l-8.91256-3.565s-.89126,31.194-17.82512,31.194-34.759-4.45628-34.759-13.36884-14.26009,16.0426-14.26009,16.0426S256.72422,465.519,255.833,466.4102s9.80382,48.12783,9.80382,48.12783,45.45406,1.78251,60.60541-4.45628,19.60763-17.82512,19.60763-17.82512L339.611,413.8261l-12.47759-60.60541Z" transform="translate(-81.5 -68.46809)"/><path fill="#575a89" d="M303.96594,338.06934s3.55987-3.565,8.90741,0,38.324,11.58632,38.324,14.26009v33.86773s.89125,5.34754-1.78252,8.91256-8.91256,16.93387-5.34753,23.17266,16.93386,78.43053,14.2601,87.34309-9.80382,16.93386-9.80382,16.93386-38.324-81.1043-38.324-104.277.37194-51.60162.37194-51.60162Z" transform="translate(-81.5 -68.46809)"/><path fill="#575a89" d="M343.176,353.22069h8.02131s30.3027,57.93164,30.3027,69.518-19.60763,75.75676-21.39014,76.648-7.13-9.80382-7.13-9.80382l-4.45628-35.65024s8.91256-21.39015,6.23879-24.95517-16.04261-31.194-16.04261-31.194Z" transform="translate(-81.5 -68.46809)"/><path fill="#575a89" d="M264.28106,338.06934s-10.23061,7.13-12.01312,9.80381-28.52019,17.82512-29.41145,21.39015S243.35538,403.131,243.35538,403.131s8.91256,49.91033,8.91256,53.47536,3.565,64.17043,3.565,64.17043,36.5415,10.69507,36.5415,4.45628.89126-95.36439-4.45628-114.972S264.28106,338.06934,264.28106,338.06934Z" transform="translate(-81.5 -68.46809)"/><path fill="#ffb9b9" d="M270.09306,522.55933s30.3027,40.99778,14.2601,40.10652-26.73769-35.65024-26.73769-35.65024Z" transform="translate(-81.5 -68.46809)"/><path fill="#575a89" d="M233.55156,366.58953l-10.69507,2.67377s-8.91256,78.43053-3.565,89.1256,33.86772,80.213,33.86772,77.53927,25.08864-7.43951,24.13065-9.95854-6.30553-13.21411-8.088-16.77914-4.45628-8.0213-3.565-12.47758-9.80382-23.53056-9.80382-23.53056-2.67377-11.22843-3.565-16.576-8.91256-64.17044-8.91256-64.17044Z" transform="translate(-81.5 -68.46809)"/><path fill="#2f2e41" d="M312.31666,287.47133a7.08719,7.08719,0,0,0-3.22724-3.96493,15.18546,15.18546,0,0,0-.6814-5.23249c-1.77527-4.94-5.98087-4.65681-9.949-6.84086-1.72159-.94758-1.61525-1.78508-2.51148-3.34147a12.79235,12.79235,0,0,0-5.077-4.87563c-2.54578-1.52669-5.23309-3.099-8.24472-3.29219-6.329-.406-11.18151,5.19707-17.23067,6.99535-2.66631.79259-5.53135.82526-8.21174,1.57458s-5.35458,2.53849-5.75405,5.14328c-.18441,1.20256.14093,2.43622-.04611,3.63844-.37186,2.38945-2.59909,4.06294-4.09006,6.02828-3.29708,4.3461-2.92,10.48592-.2833,15.21464a21.26931,21.26931,0,0,0,1.90124,2.80038,16.48252,16.48252,0,0,0,2.0074,6.397c2.63667,4.72872,7.17375,8.2623,11.91331,11.198a25.00836,25.00836,0,0,1-.703-4.77509,3.11594,3.11594,0,0,1,.21572-1.58215c.52782-1.03853,1.92253-1.31472,2.98593-1.88349,2.20255-1.17809,3.06627-3.78524,3.13-6.169s-.473-4.77139-.20767-7.14271a3.81443,3.81443,0,0,1,1.41946-2.87094,5.15,5.15,0,0,1,2.67616-.60055c4.5128-.17329,9.228-.25132,13.20853-2.26a20.071,20.071,0,0,1,4.11118-1.95748c3.38284-.83032,6.84029,1.40139,8.7899,4.13277s2.92164,5.98175,4.72041,8.80334,4.90632,5.3378,8.38417,5.00351a1.43143,1.43143,0,0,0,1.03865-.43472,1.395,1.395,0,0,0,.19133-.8329l.19431-12.51307A17.85183,17.85183,0,0,0,312.31666,287.47133Z" transform="translate(-81.5 -68.46809)"/></svg>


--------------------------------------------------------------------------------
/designs/ui_ux/3.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" id="e8c09660-db65-4061-a2dc-920e909a0453" width="1057.994" height="557" data-name="Layer 1" viewBox="0 0 1057.994 557"><title>web_development</title><path fill="#f2f2f2" d="M1000.12219,420.11243,899.99683,467.5l88.61529-66.2619a500.05588,500.05588,0,0,0-48.38385-63.66846L505.99683,445.5,898.23022,295.87646a499.98052,499.98052,0,0,0-56.95764-43.41418L179.60608,359.03943A495.88009,495.88009,0,0,0,71.00317,668.5h995.98731A495.6132,495.6132,0,0,0,1000.12219,420.11243Z" transform="translate(-71.00317 -171.5)"/><path fill="#f2f2f2" d="M787.12,221.69537A495.97179,495.97179,0,0,0,568.99683,171.5c-153.82965,0-291.36139,69.75269-382.71033,179.34869C342.71289,316.57422,615.06372,257.24316,787.12,221.69537Z" transform="translate(-71.00317 -171.5)"/><path fill="#3f3d56" d="M1066.99683,666.5c0,15.464-143.7166,62-321,62s-321-46.536-321-62,143.71659,6,321,6S1066.99683,651.036,1066.99683,666.5Z" transform="translate(-71.00317 -171.5)"/><path d="M1066.99683,666.5c0,15.464-143.7166,62-321,62s-321-46.536-321-62,143.71659,6,321,6S1066.99683,651.036,1066.99683,666.5Z" opacity=".1" transform="translate(-71.00317 -171.5)"/><ellipse cx="674.994" cy="495" fill="#3f3d56" rx="321" ry="28"/><path fill="#ffb8b8" d="M656.64413,438.62638s12.91086,20.47705,8.29993,26.02136,34.59341,5.68291,34.59341,5.68291-5.88892-29.78793-4.15568-36.64328Z" transform="translate(-71.00317 -171.5)"/><path d="M656.64413,438.62638s12.91086,20.47705,8.29993,26.02136,34.59341,5.68291,34.59341,5.68291-5.88892-29.78793-4.15568-36.64328Z" opacity=".1" transform="translate(-71.00317 -171.5)"/><circle cx="606.274" cy="234.063" r="40.484" fill="#ff6584"/><polygon fill="#ffb8b8" points="701.494 453.5 701.494 477.5 725.494 472.5 723.494 455.5 701.494 453.5"/><path fill="#ffb8b8" d="M857.49683,629l67,11-17,25s-47-16-59-16S857.49683,629,857.49683,629Z" transform="translate(-71.00317 -171.5)"/><path fill="#2f2e41" d="M705.49683,581s50-58,66-55,23,21,23,21l9,89s-32,3-32,0-6-67-6-67-47,104-72,35Z" transform="translate(-71.00317 -171.5)"/><path fill="#2f2e41" d="M624.49683,620s1,50,31,53,63-20,63-20l54-25.87008s64,33.87008,83,24.87008c0,0,20-21,7-27s-1,0-1,0l-77-40s-15-4-41,7-61,16-61,16Z" transform="translate(-71.00317 -171.5)"/><circle cx="603.494" cy="247.5" r="30" fill="#ffb8b8"/><path fill="#3f3d56" d="M717.49683,503l-2,42s1,55-8,59c-4.55,2.02-13.69,6.08-22.14,10.52-6.34,3.32-12.29,6.84-15.61,9.87a11.19431,11.19431,0,0,0-2.25,2.61c-4,7-30,6-36,1s-2,6-7,8c-4.84,1.94-11.55-13.92-7.44-37.6.13-.79.28-1.59.44-2.4,4.59-22.95-2.62-77.92-1.51-99.16a37.36888,37.36888,0,0,1,.51-4.84c3-16,41.28-48.56,48.44-34.69,8.82,17.12,29.08,1.48,32.56-6.31,20-1,27,23,27,23Z" transform="translate(-71.00317 -171.5)"/><path fill="#2f2e41" d="M798.49683,640s-16,6-21,5-10,3-10,9-6,20,3,21,46-1,54,2c0,0,36,1,33-14s-18-14-18-14S798.49683,647,798.49683,640Z" transform="translate(-71.00317 -171.5)"/><path fill="#2f2e41" d="M915.49683,643s2-6,5-6,27,4,30,3,38-3,32,14-26,19-26,19-36-4-41-3-23,0-20-5S917.49683,651,915.49683,643Z" transform="translate(-71.00317 -171.5)"/><path fill="#d0cde1" d="M824.47088,499.36345l5.48617,22.63046a1.41354,1.41354,0,0,1-.02746.76382l-24.88642,77.77a1.4135,1.4135,0,0,1-2.75071-.2712l-3.44274-30.29616a1.41351,1.41351,0,0,1,.06051-.59751l22.843-70.10435A1.4135,1.4135,0,0,1,824.47088,499.36345Z" transform="translate(-71.00317 -171.5)"/><polygon fill="#f2f2f2" points="751.45 329.775 756.515 349.191 734.565 420.104 729.5 398.155 751.45 329.775"/><path fill="#d0cde1" d="M711.862,606.80006c.84421,2.53261,87.79721-.8442,88.64141-1.68841a18.32436,18.32436,0,0,0,1.85721-3.37681c.7936-1.68841,1.51961-3.37682,1.51961-3.37682l-3.37682-27.33532-86.1088-3.056s-2.15276,23.165-2.59176,33.76816A25.33138,25.33138,0,0,0,711.862,606.80006Z" transform="translate(-71.00317 -171.5)"/><polygon points="718.526 403.22 720.214 426.858 682.225 426.858 682.225 403.22 718.526 403.22" opacity=".1"/><polygon points="669.562 410.818 669.789 410.773 668.718 420.949 647.612 420.949 647.612 410.818 669.562 410.818" opacity=".1"/><path d="M711.862,606.80006c.84421,2.53261,87.79721-.8442,88.64141-1.68841a18.32436,18.32436,0,0,0,1.85721-3.37681H711.80287A25.33138,25.33138,0,0,0,711.862,606.80006Z" opacity=".1" transform="translate(-71.00317 -171.5)"/><path fill="#ff6584" d="M698.40919,333.5a22.12987,22.12987,0,0,1-12.76894,8.778c-8.929,2.391-.07293,15.80887-.07293,15.80887s-3.22041-4.87923,1.42459-10.04646S699.1119,339.34049,698.40919,333.5Z" transform="translate(-71.00317 -171.5)"/><circle cx="612.982" cy="189.806" r="11.283" fill="#ff6584"/><path fill="#3f3d56" d="M698.38979,370.7623c-9.19775-3.47892-24.51282-5.2429-32.392-4.03709l1.0806-7.8905c7.57488,3.91493,22.81967,5.7547,32.392,4.03709Z" transform="translate(-71.00317 -171.5)"/><path fill="#ff6584" d="M680.59215,373.5867s-11.52728,19.17376-38.3321,26.35147-.219,47.45791-.219,47.45791-9.66758-14.64735,4.27659-30.15928S682.70167,391.11973,680.59215,373.5867Z" transform="translate(-71.00317 -171.5)"/><path fill="#ff6584" d="M681.507,372.42157s11.07394,26.336,23.2314,28.82592,11.23534,44.10345-7.777,50.34359c0,0,13.86347-24.39564,2.01338-40.75671S679.6396,381.53967,681.507,372.42157Z" transform="translate(-71.00317 -171.5)"/><path d="M685.35681,614.52c-2.47,4.67-5.37,9.52-5.86,11.48-.33,1.33-3.99.56-9.75-1.61-11.55-4.37-31.57-14.38-50.25-24.39a15.775,15.775,0,0,1-2.44-1.6c.13-.79.28-1.59.44-2.4,4.59-22.95-2.62-77.92-1.51-99.16l8.51-2.84,17,16v68s44,24,47,26C690.02686,605.02,687.91681,609.67,685.35681,614.52Z" opacity=".1" transform="translate(-71.00317 -171.5)"/><path fill="#ffb8b8" d="M722.49683,560l27,14s16-17,26-4-29,17-29,17-34-8-35-19S722.49683,560,722.49683,560Z" transform="translate(-71.00317 -171.5)"/><path fill="#ffb8b8" d="M677.49683,597l16,4s18-22,37-14-24,24-24,24-23,12-32,2S677.49683,597,677.49683,597Z" transform="translate(-71.00317 -171.5)"/><path fill="#3f3d56" d="M712.49683,465c1,1,12,9,12,9s3,38-1,46-7,8-4,12,7,1,3,8-8,6-5,9,2,4,2,4l12,10s-7.3623,11.72633-16.68115,10.86317S697.49683,528,697.49683,528Z" transform="translate(-71.00317 -171.5)"/><path fill="#3f3d56" d="M624.49683,489l-9,3s-24,88,4,103,59,30,60,26,12-20,9-22-47-26-47-26V505Z" transform="translate(-71.00317 -171.5)"/><polygon points="566.994 354 564.994 402 617.994 427 568.994 402 566.994 354" opacity=".1"/><path fill="#3f3d56" d="M1084.09713,633.143c-20.15507,11.88443-28.08825,35.77412-28.08825,35.77412s24.74464,4.62122,44.8997-7.26321,28.08825-35.77412,28.08825-35.77412S1104.25219,621.2586,1084.09713,633.143Z" transform="translate(-71.00317 -171.5)"/><path fill="#6c63ff" d="M1091.15958,640.51126c-11.28676,20.49574-34.9329,29.12782-34.9329,29.12782s-5.34669-24.59808,5.94007-45.09382,34.9329-29.12782,34.9329-29.12782S1102.44634,620.01553,1091.15958,640.51126Z" transform="translate(-71.00317 -171.5)"/><circle cx="21.994" cy="228" r="4" fill="#6c63ff"/><circle cx="32.994" cy="228" r="4" fill="#6c63ff"/><circle cx="43.994" cy="228" r="4" fill="#6c63ff"/><rect width="58" height="6" x="78.994" y="378.873" fill="#6c63ff" opacity=".3"/><rect width="54.865" height="6" x="78.994" y="391.873" fill="#6c63ff" opacity=".3"/><rect width="39.973" height="6" x="78.994" y="404.873" fill="#6c63ff" opacity=".3"/><g opacity=".3"><rect width="58" height="6" x="213.994" y="378.873" fill="#6c63ff"/><rect width="54.865" height="6" x="213.994" y="391.873" fill="#6c63ff"/><rect width="39.973" height="6" x="213.994" y="404.873" fill="#6c63ff"/><rect width="58" height="6" x="213.994" y="378.873" fill="#6c63ff" opacity=".3"/><rect width="54.865" height="6" x="213.994" y="391.873" fill="#6c63ff" opacity=".3"/><rect width="39.973" height="6" x="213.994" y="404.873" fill="#6c63ff" opacity=".3"/></g><rect width="58" height="6" x="353.994" y="378.873" fill="#6c63ff" opacity=".3"/><rect width="54.865" height="6" x="353.994" y="391.873" fill="#6c63ff" opacity=".3"/><rect width="39.973" height="6" x="353.994" y="404.873" fill="#6c63ff" opacity=".3"/><rect width="74" height="66" x="70.994" y="300.873" fill="#6c63ff" opacity=".3"/><rect width="74" height="66" x="205.994" y="300.873" fill="#3f3d56"/><rect width="74" height="66" x="345.994" y="300.873" fill="#3f3d56"/><path fill="#6c63ff" d="M304.35546,538.09512l-.97627-.01907c.021-1.08114.63114-26.56133,10.66219-33.604l.56059.79893C304.97563,512.02955,304.36022,537.83532,304.35546,538.09512Z" transform="translate(-71.00317 -171.5)"/><circle cx="248.2" cy="327.768" r="4.881" fill="#6c63ff"/><path fill="#6c63ff" d="M318.2161,516.50423a15.19762,15.19762,0,0,1-7.84148.33859,13.85016,13.85016,0,0,1,14.23984-4.88441A15.19753,15.19753,0,0,1,318.2161,516.50423Z" transform="translate(-71.00317 -171.5)"/><path fill="#6c63ff" d="M444.35546,538.09512l-.97627-.01907c.021-1.08114.63114-26.56133,10.66219-33.604l.56059.79893C444.97563,512.02955,444.36022,537.83532,444.35546,538.09512Z" transform="translate(-71.00317 -171.5)"/><circle cx="388.2" cy="327.768" r="4.881" fill="#6c63ff"/><path fill="#6c63ff" d="M458.2161,516.50423a15.19762,15.19762,0,0,1-7.84148.33859,13.85016,13.85016,0,0,1,14.23984-4.88441A15.19753,15.19753,0,0,1,458.2161,516.50423Z" transform="translate(-71.00317 -171.5)"/><path fill="#2f2e41" d="M555.99683,665.5h-479v-277h479Zm-477-2h475v-273h-475Z" transform="translate(-71.00317 -171.5)"/><rect width="477" height="2" x="6.994" y="237.065" fill="#2f2e41"/></svg>


--------------------------------------------------------------------------------
/designs/ui_ux/5.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" id="bafe8b78-4c8e-4247-a450-f8fe2d5894b0" width="1025.5" height="720.713" data-name="Layer 1" viewBox="0 0 1025.5 720.713"><title>slider</title><ellipse cx="521.811" cy="689.117" fill="#3f3d56" rx="503.689" ry="31.597"/><path fill="#3f3d56" d="M125.94114,747.782c11.54993,21.41984,36.063,30.61492,36.063,30.61492s5.787-25.53335-5.763-46.95319-36.063-30.61492-36.063-30.61492S114.39121,726.36216,125.94114,747.782Z" transform="translate(-87.25 -89.64329)"/><path fill="#6c63ff" d="M133.87984,740.735c20.85238,12.54548,28.88328,37.46426,28.88328,37.46426s-25.77747,4.57854-46.62984-7.96694S87.25,732.76808,87.25,732.76808,113.02747,728.18955,133.87984,740.735Z" transform="translate(-87.25 -89.64329)"/><rect width="825.318" height="26.257" x="101.717" y="88.343" fill="#f2f2f2"/><polygon fill="#6c63ff" points="927.035 681.247 101.717 681.247 101.717 504.122 192.831 425.792 927.035 370.122 927.035 681.247"/><circle cx="123.803" cy="101.085" r="6.795" fill="#6c63ff"/><circle cx="145.888" cy="101.085" r="6.795" fill="#6c63ff"/><circle cx="167.973" cy="101.085" r="6.795" fill="#6c63ff"/><polygon fill="#fff" points="101.717 503.715 927.035 369.266 927.035 114.6 101.717 114.6 101.717 503.715"/><path fill="#3f3d56" d="M921.88932,649.923q-33.42034-5.662-64.281-9.725l8.13329-15.76933c-2.74256-.95255-14.79194,8.07808-14.79194,8.07808l10.67364-45.77458c-13.79337,1.66343-20.80642,48.40207-20.80642,48.40207l-15.41077-15.802,7.46085,17.76562c-62.968-7.41544-117.34916-10.165-163.09014-10.26406l6.9613-13.4969c-2.74256-.95255-14.79194,8.07808-14.79194,8.07808l10.67364-45.77458c-13.79337,1.66343-20.80642,48.40207-20.80642,48.40207l-15.41077-15.802,7.90222,18.8167a916.11979,916.11979,0,0,0-93.75366,6.36833c7.041-21.02573,30.95992-41.02287,30.95992-41.02287-18.2667,5.43279-27.84858,14.53661-32.85538,23.024a368.67139,368.67139,0,0,1,21.30917-127.38076S532.20827,570.20755,537.026,625.358l.57623,9.79313c-32.00911,4.58328-48.10185,9.35173-48.10185,9.35173Z" transform="translate(-87.25 -89.64329)"/><rect width="230.47" height="9.293" x="161.279" y="263.984" fill="#3f3d56"/><rect width="230.47" height="9.293" x="161.279" y="284.429" fill="#3f3d56"/><rect width="78.063" height="9.293" x="161.279" y="304.874" fill="#3f3d56"/><circle cx="488.085" cy="663.612" r="9.066" fill="#f2f2f2"/><circle cx="514.376" cy="664.519" r="9.066" fill="#f2f2f2"/><circle cx="540.667" cy="665.425" r="9.066" fill="#f2f2f2"/><circle cx="514.459" cy="664.519" r="7.253" fill="#3f3d56"/><circle cx="773.315" cy="133.243" r="83.979" fill="#ff6584"/><path fill="#6c63ff" d="M919.01933,324.04621c16.53357,112.83138-44.77152,162.0517-127.5078,174.17533q-2.88274.42242-5.74708.77638-5.76987.71873-11.46029,1.14394c-75.447,5.65488-139.53577-27.25732-154.912-132.19026C603.47977,259.359,722.18743,101.98009,731.11128,90.322c.00909-.00133.00909-.00133.01694-.01188.33885-.44412.51294-.66683.51294-.66683S902.4871,211.224,919.01933,324.04621Z" transform="translate(-87.25 -89.64329)"/><path fill="#3f3d56" d="M783.52985,481.76157l43.57456-84.58626L784.6234,490.186l1.14105,8.81193q-5.76987.71873-11.46029,1.14394l-10.6371-113.74241-.1739-.86675.07676-.18037L762.568,374.604l-67.54934-77.10356,66.54392,69.08889.46941,2.24177-8.03732-85.93677L693.95505,201.788l58.42265,66.03361L731.11128,90.322l-.06793-.59112.08487.57924,19.66064,139.55482,38.82143-62.15574-37.26414,74.194,9.9486,76.54606,33.0938-79.70672L763.76525,329.702l5.53253,42.56339,48.663-111.33L771.2201,387.1148Z" transform="translate(-87.25 -89.64329)"/></svg>


--------------------------------------------------------------------------------
/designs/ui_ux/6.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" id="e07c9319-842b-449a-9f57-029d5804b779" width="1168.75" height="684.517" data-name="Layer 1" viewBox="0 0 1168.75 684.517"><title>portfolio_website</title><path fill="#3f3d56" d="M1056.375,363.74173a128,128,0,1,1,128-128A128.14509,128.14509,0,0,1,1056.375,363.74173Zm0-254a126,126,0,1,0,126,126A126.1428,126.1428,0,0,0,1056.375,109.74173Z" transform="translate(-15.625 -107.74173)"/><circle cx="1041.179" cy="128.367" r="64.273" fill="#f2f2f2"/><rect width="981.176" height="492.924" x="64.244" y="128.517" fill="#3f3d56"/><rect width="367.941" height="252.303" x="339.908" y="271.021" opacity=".1"/><circle cx="1129.149" cy="38.028" r="25.917" fill="#6c63ff"/><circle cx="93.445" cy="147.206" r="11.681" fill="#6c63ff"/><circle cx="129.655" cy="147.206" r="11.681" fill="#6c63ff"/><circle cx="165.866" cy="147.206" r="11.681" fill="#6c63ff"/><rect width="23.361" height="23.361" x="177.546" y="311.903" fill="#6c63ff"/><rect width="23.361" height="23.361" x="888.899" y="515.147" fill="#fff"/><rect width="23.361" height="23.361" x="832.104" y="465.199" fill="#6c63ff" transform="translate(-127.75925 529.15786) rotate(-38.97687)"/><polygon fill="#3f3d56" points="747.563 670.5 14.017 670.5 14.017 275.693 16.353 275.693 16.353 668.164 747.563 668.164 747.563 670.5"/><path fill="#3f3d56" d="M777.20483,792.25827a15.18488,15.18488,0,1,1,15.18488-15.18487A15.20245,15.20245,0,0,1,777.20483,792.25827Zm0-28.03361a12.84874,12.84874,0,1,0,12.84874,12.84874A12.86328,12.86328,0,0,0,777.20483,764.22466Z" transform="translate(-15.625 -107.74173)"/><path fill="#3f3d56" d="M30.80987,384.60281a15.18488,15.18488,0,1,1,15.18488-15.18488A15.20172,15.20172,0,0,1,30.80987,384.60281Zm0-28.03362a12.84874,12.84874,0,1,0,12.84874,12.84874A12.86328,12.86328,0,0,0,30.80987,356.56919Z" transform="translate(-15.625 -107.74173)"/><path fill="#f2f2f2" d="M250.40651,699.981l-10.43083,29.20168H216.53256V699.39693c1.72872-37.36646,22.69554-54.93424,23.34966-55.47151-15.75722,15.1965-14.00512,67.73621-14.00512,67.73621,10.51261-45.55462,19.85714-46.72269,19.85714-46.72269-5.65347,8.4918-8.57364,47.11979-8.74881,49.526C237.68624,706.34694,250.40651,699.981,250.40651,699.981Z" transform="translate(-15.625 -107.74173)"/><path fill="#f2f2f2" d="M975.77626,703.95234v25.2303H957.753l-8.84228-24.77473S958.99114,709.454,959.55179,715.89c-.14016-1.98573-2.45291-32.54234-6.93832-39.27042,0,0,7.41727.92275,15.75721,37.05106,0,0,1.37838-41.66494-11.10826-53.7194C957.788,660.38345,974.40964,674.30679,975.77626,703.95234Z" transform="translate(-15.625 -107.74173)"/><path fill="#d0cde1" d="M660.34,631.06H631.93l-.19-2.33-2.07-25.97v-.01l-2.15-27,13.11-55.69,11.14,11.14V584.27s6.55,9.83,5.24,12.45-2.62,2.62-1.31,4.58c1.31,1.97,2.62,3.28,1.31,4.59a4.92,4.92,0,0,0,0,5.9c1.31,1.31,3.93,3.27,1.96,5.24-1.96,1.96-4.58.65-1.96,7.86a23.00135,23.00135,0,0,0,1.8,3.84A25.502,25.502,0,0,0,660.34,631.06Z" transform="translate(-15.625 -107.74173)"/><polygon fill="#ffb9b9" points="557.189 343.847 553.258 383.159 593.225 389.056 596.173 366.452 599.122 343.847 557.189 343.847"/><polygon points="557.189 343.847 553.258 383.159 593.225 389.056 596.173 366.452 599.122 343.847 557.189 343.847" opacity=".1"/><circle cx="579.138" cy="325.174" r="31.45" fill="#ffb9b9"/><path fill="#d0cde1" d="M515.29,631.06c-.11-.23-.23-.47-.35-.73-.23-.49-.48-1.02-.75-1.6-1.74-3.88-3.87-9.4-2.64-11.05,1.97-2.62,2.62-5.24,1.31-6.55s-5.24,1.31-1.31-1.97c3.93-3.27,5.24-1.31,3.93-5.24s-3.93-1.96-1.31-3.93c2.62-1.96,4.59-1.31,3.28-3.27-1.31-1.97-3.93-1.97-1.31-3.28s4.59,0,3.93-3.28c-.66-3.27-1.31-1.96,0-3.27.34-.34,1.53-3.64,3.12-8.35,4.45-13.31,11.95-37.86,11.95-38.83,0-1.31-10.48-42.58-10.48-42.58l-4.59-2.63s-20.31,13.76-26.86,44.56c-6.56,30.79-11.14,38.66-11.14,38.66s-6.55,1.31-1.97,5.89c4.59,4.59,4.59,3.93.66,6.55s-6.55-2.62-3.93,2.62c2.62,5.25,5.89,3.94,3.27,7.21-2.62,3.28-7.2,3.28-4.58,5.9s-2.62,8.52.65,11.14c3.28,2.62,4.59,3.27,4.59,7.86a24.2678,24.2678,0,0,0,.31,3.84,19.59679,19.59679,0,0,0,.48,2.33c.15.61.3,1.07.4,1.36Z" transform="translate(-15.625 -107.74173)"/><polygon fill="#3f3d56" points="499.665 523.318 502.335 523.318 502.475 522.388 499.315 522.588 487.825 523.318 466.325 524.678 499.665 523.318"/><path fill="#d0cde1" d="M529.24,603.27l-5.89-20.31-.16-4.42-3.12-84.04,38.66-13.75L565.28,475.5s1.31-15.07,3.28-16.38c.71-.47,1.85.08,3.36,1.36,2.65,2.25,6.45,6.74,11.05,11.75,7.21,7.86,22.28,6.55,26.86005,3.93a15.46778,15.46778,0,0,1,1.83-.91c3.29-1.36,4.72-.4,4.72-.4,3.28,2.62-4.58,11.14-4.58,11.14s2.62,5.89,19.65,11.79c17.04,5.9,20.32,33.42,20.32,33.42s-20.32,55.03-19.66,58.96c.56,3.37-1.76,10.59-2.44,12.59v.01c-.11.32-.18.51-.18.51l1.49,25.46.14,2.33H532.01a13.47767,13.47767,0,0,0-1.11-2.33c-.11-.18-.23-.37-.35-.56C524.66,618.99,529.24,603.27,529.24,603.27Z" transform="translate(-15.625 -107.74173)"/><path fill="#2f2e41" d="M563.09532,436.94441s-3.26589-4.89882-2.00978-10.17448a30.83664,30.83664,0,0,0,.87928-9.16959s2.63783-8.54154,5.27565-13.31475,1.38172-6.783,9.672-8.29032,4.89882-12.30986,26.75511-.62805a6.40974,6.40974,0,0,0,6.65737,2.51222c4.522-.87928,6.15494,5.40126,6.15494,5.40126s3.01466-1.75855,4.14515.75367,9.19122-1.50778,9.19122,15.44968-9.17281,32.10485-9.17281,32.10485.67245-28.52449-14.27524-31.41354-31.02588-11.305-34.91981-.50244A82.35048,82.35048,0,0,1,563.09532,436.94441Z" transform="translate(-15.625 -107.74173)"/><ellipse cx="605.346" cy="332.054" fill="#ffb9b9" rx="2.948" ry="3.931"/><path fill="#fff" d="M355.53,360.07V631.06H785.38V360.07ZM783.05,628.73H357.87V362.41H783.05Z" transform="translate(-15.625 -107.74173)"/></svg>


--------------------------------------------------------------------------------
/designs/ui_ux/7.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" id="a8771333-170f-4b31-b00f-586a01436e20" width="825.318" height="679.903" data-name="Layer 1" viewBox="0 0 825.318 679.903"><title>personal_website</title><circle cx="670.821" cy="368.904" r="83.979" fill="#ff6584"/><rect width="825.318" height="26.257" x="0" fill="#f2f2f2"/><circle cx="22.085" cy="12.741" r="6.795" fill="#6c63ff"/><circle cx="44.17" cy="12.741" r="6.795" fill="#6c63ff"/><circle cx="66.256" cy="12.741" r="6.795" fill="#6c63ff"/><polygon fill="#f2f2f2" points=".584 502.277 0 502.779 0 679.903 825.318 679.903 825.318 368.779 815.482 369.525 .584 502.277"/><rect width="230.47" height="9.293" x="59.561" y="262.641" fill="#3f3d56"/><rect width="230.47" height="9.293" x="59.561" y="283.086" fill="#3f3d56"/><rect width="78.063" height="9.293" x="59.561" y="303.531" fill="#3f3d56"/><circle cx="386.368" cy="662.269" r="9.066" fill="#fff"/><circle cx="412.659" cy="663.176" r="9.066" fill="#f2f2f2"/><circle cx="438.95" cy="664.082" r="9.066" fill="#fff"/><circle cx="412.742" cy="663.176" r="7.253" fill="#3f3d56"/><path fill="#6c63ff" d="M859.14309,567.14468c0,59.16833-64.7533,37.4968-144.63055,37.4968S569.882,626.313,569.882,567.14468,634.6353,390.374,714.51254,390.374,859.14309,507.97634,859.14309,567.14468Z" transform="translate(-187.34116 -110.04827)"/><path fill="#3f3d56" d="M1003.37369,616.762q-25.12823-4.25715-48.33186-7.31209l6.11529-11.85669c-2.06208-.71618-11.12175,6.0738-11.12175,6.0738l8.02528-34.41712c-10.37106,1.25072-15.644,36.39264-15.644,36.39264L930.8296,593.76134l5.60966,13.35766a1069.83378,1069.83378,0,0,0-122.62463-7.71735l5.23409-10.14812c-2.06208-.71618-11.1218,6.0738-11.1218,6.0738l8.02533-34.41712c-10.371,1.25072-15.644,36.39265-15.644,36.39265L788.7212,585.42161l5.9415,14.148c-13.45009.269-25.72688.84335-36.857,1.60468l1.84694-3.581c-1.308-.45428-5.42944,2.11049-8.27034,4.04784-.81884.06378-1.61951.13-2.42467.19572l7.59854-32.58688c-8.46015,1.02025-13.52718,24.5907-15.1074,33.24276-1.11305.10394-2.21655.2089-3.30028.316l-8.74246-8.9644c7.32342-11.36346,18.0432-20.33089,18.0432-20.33089-13.73443,4.08483-20.93885,10.92983-24.7034,17.31133a277.19745,277.19745,0,0,1,16.022-95.77534s-28.38856,61.776-24.76623,103.24263l.38774,6.5893c-38.7225-3.89644-72.76886-5.41622-102.0792-5.47969l5.23408-10.14812c-2.06208-.71618-11.12179,6.0738-11.12179,6.0738l8.02533-34.41712c-10.371,1.25072-15.644,36.39265-15.644,36.39265L587.2167,585.42161l5.94149,14.148a688.81886,688.81886,0,0,0-70.49169,4.78821c5.294-15.80886,23.27821-30.84435,23.27821-30.84435-13.73443,4.08483-20.93886,10.92983-24.70341,17.31133a277.19727,277.19727,0,0,1,16.022-95.77534s-28.38857,61.776-24.76623,103.24263l.43326,7.3633c-24.06708,3.44607-36.16695,7.03142-36.16695,7.03142L801.86914,616.762q-8.50438-1.44076-16.782-2.73627ZM729.378,593.88731l3.95519,9.418c-3.18683.34107-6.25122.69255-9.16219,1.05243A47.72894,47.72894,0,0,1,729.378,593.88731Z" transform="translate(-187.34116 -110.04827)"/><path fill="#3f3d56" d="M905.16965,608.10151c-.17562-.287-4.31644-7.201-5.752-21.55827-1.31676-13.172-.47006-35.37447,11.04443-66.34505,21.81385-58.67172-5.02713-106.01129-5.30139-106.48284l1.32423-.76823c.0695.11957,6.99553,12.1893,11.087,31.40851a137.02486,137.02486,0,0,1-5.675,76.37613c-21.77648,58.57158-5.58685,86.29886-5.42095,86.57237Z" transform="translate(-187.34116 -110.04827)"/><circle cx="709.299" cy="290.274" r="9.948" fill="#6c63ff"/><circle cx="740.674" cy="327.005" r="9.948" fill="#3f3d56"/><circle cx="719.247" cy="351.493" r="9.948" fill="#6c63ff"/><circle cx="745.265" cy="372.155" r="9.948" fill="#6c63ff"/><circle cx="711.594" cy="404.295" r="9.948" fill="#3f3d56"/><path fill="#3f3d56" d="M911.17948,608.46769s-9.94813-24.48771,19.89627-42.8535Z" transform="translate(-187.34116 -110.04827)"/><path fill="#3f3d56" d="M898.94482,608.02349s-4.52748-26.04064-39.56946-25.81745Z" transform="translate(-187.34116 -110.04827)"/><path fill="#2f2e41" d="M738.06824,183.40231c-10.91222-18.43827-32.50116-19.29757-32.50116-19.29757s-21.0372-2.69022-34.53243,25.39149c-12.57864,26.17446-29.93875,51.44643-2.79484,57.57369l4.903-15.26027,3.03639,16.39637a106.20415,106.20415,0,0,0,11.61387.19849c29.06893-.93851,56.7527.27459,55.86132-10.15657C742.46944,224.3812,748.568,201.14361,738.06824,183.40231Z" transform="translate(-187.34116 -110.04827)"/><polygon fill="#a0616a" points="472.074 222.167 469.778 263.49 537.12 270.378 539.415 227.524 516.458 212.985 472.074 222.167"/><path fill="#2f2e41" d="M840.39469,422.89675c-2.0195-19.52168-82.19232-28.38305-101.45987-30.23328l-7.20435-4.20257-2.29573-24.48771s-71.16741-6.12193-76.5241-6.88717-9.94813,9.18289-9.94813,11.47862c0,1.65915-1.00111,13.5075-5.02171,20.53016-8.68243,6.97666-35.15344,28.92858-35.15344,37.24553,0,9.94813,21.04412,135.065,21.04412,135.065l2.29573,26.01819,21.42675,3.82621-1.53049-81.11555s7.65241-46.6797-3.061-59.6888v-5.35668s31.42257-8.18664,42.49722-17.10032c3.209-.68958,12.22685-2.38844,17.20732-.911.683.40219,1.47051.81526,2.34588,1.23548a3.57764,3.57764,0,0,1,.31672.32316s.03129-.04815.08641-.13227c14.32632,6.70557,51.07713,15.16353,66.10694,12.75875a52.60028,52.60028,0,0,1,33.6706,6.12193c-8.41765,10.71337-2.29572,41.323-2.29572,41.323l.76524,65.81073,10.71337,13.0091h14.53958V531.561S842.69041,445.08874,840.39469,422.89675Z" transform="translate(-187.34116 -110.04827)"/><circle cx="511.484" cy="98.581" r="25.253" fill="#a0616a"/><path fill="#a0616a" d="M683.52028,224.69933s3.82621,16.8353-1.53048,18.36578a72.42051,72.42051,0,0,0-12.24386,5.35669L663.624,268.31806v19.89627l74.22837,8.41765,2.29573-6.88717v-9.94813l-8.41765-15.30482-3.82621-3.82621s-16.8353-18.36578-13.0091-35.96632Z" transform="translate(-187.34116 -110.04827)"/><path fill="#a0616a" d="M749.71363,285.536s2.29572,26.78343,0,39.02729-1.53048,30.60964-1.53048,30.60964l-16.8353-3.061v-41.323l3.8262-22.192Z" transform="translate(-187.34116 -110.04827)"/><circle cx="520.868" cy="54.15" r="15.61" fill="#2f2e41"/><path fill="#2f2e41" d="M690.95619,160.09023A15.61059,15.61059,0,0,1,704.923,144.568a15.61,15.61,0,1,0,0,31.04447A15.6106,15.6106,0,0,1,690.95619,160.09023Z" transform="translate(-187.34116 -110.04827)"/><polygon fill="#2f2e41" points="545.903 71.577 524.574 60.404 495.12 64.975 489.026 91.89 504.195 91.306 508.433 81.418 508.433 91.143 515.433 90.874 519.496 75.131 522.035 91.89 546.918 91.382 545.903 71.577"/><rect width="93.359" height="93.359" x="468.248" y="270.378" fill="#f2f2f2"/><path fill="#a0616a" d="M640.28417,272.52689l-13.77434,56.62783s-5.35669,12.24386,6.88717,19.89627,39.79253,17.60054,39.79253,17.60054,24.48771,33.67061,27.54868,19.89627-18.36579-31.37488-18.36579-31.37488l-37.49681-23.72247,14.53958-39.79254Z" transform="translate(-187.34116 -110.04827)"/><path fill="#a0616a" d="M739.7655,343.6943s11.47861-1.53048,10.71337,11.47862-16.07006,14.53958-16.07006,14.53958-6.88717,29.07915-16.8353,23.72247,5.35668-34.43585,5.35668-34.43585l13.0091-9.94813Z" transform="translate(-187.34116 -110.04827)"/><path fill="#2f2e41" d="M665.91974,267.55282l12.24386-25.25295-24.48772,8.41765s-13.77433,6.88717-14.53958,22.95723,17.60055,24.48771,17.60055,24.48771,3.061,22.95723,1.53048,26.0182,0,15.30482,0,15.30482,29.46178-8.035,44.00136,1.9131,26.40081,4.20882,26.40081,4.20882-.76524-19.131,5.35669-22.192,11.47861-17.60055,6.12193-26.78344c0,0,12.24385,1.53048,11.47861-9.94813s-6.88717-21.42675-16.8353-26.0182-11.04785-5.325-11.04785-5.325l14.10881,25.98654v6.88717s-24.97661-15.94252-49.68752-17.27106a32.91358,32.91358,0,0,0-22.24467,7.32256l-.00046.00037Z" transform="translate(-187.34116 -110.04827)"/><path fill="#d0cde1" d="M646.36342,561.72557s10.85884,5.11,14.05262,7.0263,15.96888-1.91626,13.41385,9.58133S660.416,600.68963,660.416,600.68963s-5.11005,5.7488-5.11005,9.58133-12.7751,33.21527-28.10523,31.93776-12.7751-16.60763-12.7751-16.60763l3.19378-16.60764s6.38755-28.10523,7.66506-27.46647,4.47129,5.11,4.47129,5.11S645.72467,580.24947,646.36342,561.72557Z" transform="translate(-187.34116 -110.04827)"/><path fill="#d0cde1" d="M805.6189,542.59454s-10.85884,5.11-14.05262,7.02631-15.96888-1.91627-13.41386,9.58133,13.41386,22.35643,13.41386,22.35643,5.11,5.7488,5.11,9.58133,12.77511,33.21527,28.10523,31.93776,12.77511-16.60764,12.77511-16.60764l-3.19378-16.60763s-6.38755-28.10523-7.66506-27.46648-4.47129,5.11005-4.47129,5.11005S806.25765,561.11844,805.6189,542.59454Z" transform="translate(-187.34116 -110.04827)"/></svg>


--------------------------------------------------------------------------------
/designs/ui_ux/8.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" id="b26bef22-1f65-4f25-beb8-c3985f2c0abb" width="856.363" height="548.704" data-name="Layer 1" viewBox="0 0 856.363 548.704"><rect id="aea5e876-5b18-4677-ac52-565f186c2754" width="855.997" height="548.219" x=".366" y=".485" fill="#e6e6e6" data-name="Rectangle 1"/><rect id="aeed2be9-3178-4cee-b478-9db2d7f97a20" width="807.043" height="447.026" x="24.843" y="69.246" fill="#fff" data-name="Rectangle 2"/><rect id="b3ae8885-9a9e-4403-9d49-07bff8102aa7" width="855.997" height="36.366" fill="#6c63ff" data-name="Rectangle 9"/><rect id="b27f3643-394f-4790-b443-091b1b383c54" width="293.762" height="283.55" x="468.794" y="118.164" fill="#e6e6e6" data-name="Rectangle 10"/><circle id="e395ce2b-339a-464a-b2a8-2798fb0dfcd4" cx="27.024" cy="18.592" r="6.74" fill="#fff" data-name="Ellipse 12"/><circle id="ba9fbbde-097d-4714-9aa4-a15d83836bc3" cx="52.608" cy="18.592" r="6.74" fill="#fff" data-name="Ellipse 13"/><circle id="ab9aef1c-a9cb-4a01-bb5b-9a91a857f5fb" cx="78.192" cy="18.592" r="6.74" fill="#fff" data-name="Ellipse 14"/><rect id="e493c728-f703-42a2-881c-386585883b73" width="78.336" height="78.336" x="86.904" y="117.581" fill="#6c63ff" data-name="Rectangle 13"/><rect id="fef75a5d-72e7-4f52-be39-ca98924ebad3" width="78.336" height="78.336" x="195.841" y="118.03" fill="#e6e6e6" data-name="Rectangle 14"/><rect id="b42a9be3-8096-4c9f-95c4-e18278a3579e" width="78.336" height="260.658" x="196.152" y="225.635" fill="#6c63ff" data-name="Rectangle 15"/><rect id="e3bd9f8a-f01d-48ae-a6f1-3d5ac6753111" width="78.336" height="133.362" x="84.767" y="225.054" fill="#e6e6e6" data-name="Rectangle 16"/><path id="b03a159e-94f4-480c-9a5d-9f23eb0385fc" fill="#2f2e41" d="M785.50752,338.6c-12.9-21.792-38.412-22.807-38.412-22.807s-24.863-3.179-40.813,30.009c-14.866,30.935-35.384,60.8-3.3,68.044l5.795-18.036,3.589,19.378a125.5385,125.5385,0,0,0,13.726.235c34.356-1.109,67.074.325,66.021-12C790.70949,387.031,797.91652,359.567,785.50752,338.6Z" data-name="Path 4" transform="translate(-171.8185 -175.648)"/><path id="edc5401e-f5b9-4166-9a45-6d9296a0e0c2" fill="#ffb8b8" d="M697.46451,545.527l-43.494,30.2s-25.372,26.58-7.249,26.58,25.372-22.955,25.372-22.955l55.576-24.163Z" data-name="Path 5" transform="translate(-171.8185 -175.648)"/><path id="a1145783-9ad9-4920-9c36-7da703d314d6" fill="#2f2e41" d="M714.9825,427.731s-38.057,117.8-25.976,123.838,38.661,9.665,38.661,9.665Z" data-name="Path 6" transform="translate(-171.8185 -175.648)"/><path id="a69c490e-693f-4e62-8a32-5b49f335d225" d="M714.9825,427.731s-38.057,117.8-25.976,123.838,38.661,9.665,38.661,9.665Z" data-name="Path 7" opacity=".1" transform="translate(-171.8185 -175.648)" style="isolation:isolate"/><path id="e424da1a-71ea-46da-8962-7b7b116f82e2" fill="#2f2e41" d="M834.62849,576.339h-85.672l60.868-30.808a38.7974,38.7974,0,0,1,3.854,2.851A77.279,77.279,0,0,1,834.62849,576.339Z" data-name="Path 8" transform="translate(-171.8185 -175.648)"/><circle id="e1ba790b-7394-4885-ab4c-2c84c77f3e7f" cx="567.328" cy="190.465" r="31.412" fill="#ffb8b8" data-name="Ellipse 1"/><path id="f3be7be2-223c-4c9b-8b5e-90f6ae9f04e0" fill="#ffb8b8" d="M738.54251,392.089s7.249,22.955,0,31.413,39.87-12.082,39.87-12.082-16.914-24.163-12.082-35.037Z" data-name="Path 9" transform="translate(-171.8185 -175.648)"/><path id="b8fe7dc2-df95-4ac5-a3bc-1c8e36bb8e76" fill="#2f2e41" d="M808.13052,496.971l-2.537,16.54s1.281,3.757,2.839,9.231c2.03,7.14,4.531,17.2,5.243,25.637.737,8.554-.375,15.44-5.666,15.875-7.587.628-11.538,5.231-15.477,12.082h-87.4c.23-3.769.507-7.684.834-11.707q.272-3.625.6-7.346c.242-2.851,8.8-56.409,2.368-67.935-13.286-23.8,3.625-37.453,3.625-37.453s2.416-18.123,2.416-24.163c0-4.736,18.557-10.209,26.58-12.36.52-.133.979-.266,1.4-.362,1.389-.362,2.223-.568,2.223-.568l6.343-2.6s17.82-3.443,19.029-5.86a6.139,6.139,0,0,1,3.093-2.2c2.549-1.087,5.8-1.861,6.573-2.634a30.801,30.801,0,0,0,2.984-4.06,16.14792,16.14792,0,0,1,8.892-5.2c12.976-3.274,31.618,3.214,31.618,3.214l-6.524,42.588Z" data-name="Path 10" transform="translate(-171.8185 -175.648)"/><path id="b7b1d332-0442-4c4a-aa9d-2d666bd52d71" fill="#ffb8b8" d="M846.07048,470.621l-43.494,30.2s-25.372,26.58-7.249,26.58,25.36609-22.951,25.36609-22.951l55.576-24.163Z" data-name="Path 11" transform="translate(-171.8185 -175.648)"/><path id="faae9d8a-2ade-475e-8bc6-8f0e7b87a797" fill="#2f2e41" d="M771.34851,336.499l-25.208-13.2-15.81,2.45a28.274,28.274,0,0,0-23.24,21.7l-2.96,13.058,17.929-.69,5.009-11.687v11.494l8.273-.318,4.8-18.606,3,19.806,29.409-.6Z" data-name="Path 12" transform="translate(-171.8185 -175.648)"/><path id="ba178fc8-375d-4438-9c01-c19893b0df8a" fill="#2f2e41" d="M815.26147,397.526l8.457-2.416s85.78,35.037,83.364,65.241,1.208,30.2-13.29,31.412-56.78-13.29-55.58-15.706,9.665-14.5,9.665-14.5l-32.621-25.372Z" data-name="Path 13" transform="translate(-171.8185 -175.648)"/><circle id="b052f10f-e5c3-45aa-968a-35c6c5894796" cx="598.741" cy="190.466" r="4.833" fill="#ffb8b8" data-name="Ellipse 2"/><rect id="aa772a43-ca79-434e-998e-525da0608a2b" width="293.762" height="39.168" x="468.794" y="447.288" fill="#e6e6e6" data-name="Rectangle 17"/><rect id="b869959f-3b5e-4542-9dd3-67ec9d40b083" width="78.336" height="97.865" x="84.767" y="387.847" fill="#e6e6e6" data-name="Rectangle 18"/><rect id="ed8504c8-ba55-4496-b946-b31fe66f24a3" width="78.336" height="239.85" x="307.537" y="118.565" fill="#e6e6e6" data-name="Rectangle 19"/><rect id="af23db80-e058-4986-866a-292ebf8abb10" width="78.336" height="97.921" x="307.226" y="388.086" fill="#e6e6e6" data-name="Rectangle 20"/></svg>


--------------------------------------------------------------------------------
/event.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en" light-mode="dark">
  3 |   <head>
  4 |     <title>David Simoes</title>
  5 |     <meta charset="UTF-8" />
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7 |     <meta name="keywords" content="awesome portfolio website, portfolio website, free website template, open source, open source website"/>
  8 |     <meta name="description" content="The open source project that takes care of showcasing your work while you focus on learning and innovation"/>
  9 |     <!--Favicon-->
 10 |     <link id="favicon" rel="icon" href="assets/images/davidphoto.png" type="image/png" />
 11 |     <!-- Google Analytics -->
 12 |     <script async src="https://www.googletagmanager.com/gtag/js?id=G-G6D61F5TL4"></script>
 13 |     <!-- Robot.txt -->
 14 |     <meta name="robots" content="index,follow" />
 15 |     <meta name="Googlebot" content="index,follow" />
 16 |     <meta name="AdsBot-Google" content="index,follow"/>
 17 |     <!-- Open Graph Cards-->
 18 |     <meta property="og:title" content="David Simoes | Event" />
 19 |     <meta property="og:type" content="profile" />
 20 |     <meta property="og:description" content="The open source project that takes care of showcasing your work while you focus on learning and innovation"/>
 21 |     <meta property="og:site_name" content="https://portfolio.smaranjitghose.codes/event.html"/>
 22 |     <meta property="og:url" content="https://portfolio.smaranjitghose.codes/event.html"/>
 23 |     <!-- Twitter Cards-->
 24 |     <meta name="twitter:card" content="summary" />
 25 |     <meta name="twitter:site" content="https://portfolio.smaranjitghose.codes/research.html" />
 26 | 
 27 |     <meta name="application-name" content="David Simoes | Research" />
 28 |     <meta name="apple-mobile-web-app-title" content="David Simoes | Research" />
 29 |     <meta
 30 |       name="summary"
 31 |       content="The open source project that takes care of showcasing your work while you focus on learning and innovation"
 32 |     />
 33 |     
 34 |     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"/>
 35 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jpswalsh/academicons@1/css/academicons.min.css" />
 36 |     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;300&display=swap" rel="stylesheet" />
 37 | 
 38 |     <!--Import animation.css-->
 39 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous"/>
 40 |     <script src="https://kit.fontawesome.com/a076d05399.js"></script>
 41 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.min.css" integrity="sha256-DBYdrj7BxKM3slMeqBVWX2otx7x4eqoHRJCsSDJ0Nxw=" crossorigin="anonymous"/>
 42 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.1/iconfont/material-icons.min.css" integrity="sha256-x8PYmLKD83R9T/sYmJn1j3is/chhJdySyhet/JuHnfY=" crossorigin="anonymous"/>
 43 |     <link rel="stylesheet" href="assets/css/preloader.css" />
 44 |     <link rel="stylesheet" type="text/css" href="assets/css/event.css" />
 45 |     <link rel="stylesheet" type="text/css" href="assets/css/style.css" />
 46 |     <script src="https://code.iconify.design/1/1.0.7/iconify.min.js"></script>
 47 | 
 48 |     <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet" />
 49 |     <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
 50 |     <!--For Dark/Light mode Toggle-->
 51 |     <script src="https://code.iconify.design/1/1.0.4/iconify.min.js"></script>
 52 |     <script defer src="./assets/js/dynamicTitle.js"></script>
 53 |     <!-- Global site tag (gtag.js) - Google Analytics -->
 54 |     <script async src="https://www.googletagmanager.com/gtag/js?id=G-M11CMZ12Q"></script>
 55 |     <script>
 56 |       window.dataLayer = window.dataLayer || [];
 57 |       function gtag(){dataLayer.push(arguments);}
 58 |       gtag('js', new Date());
 59 | 
 60 |       gtag('config', 'G-M11CMZ12Q');
 61 |     </script>
 62 |   </head>
 63 |  
 64 | <body class="no-scroll-preload">
 65 |     
 66 |   <!-- Pre-loader -->
 67 |     <div class="loader-container">
 68 |         <div class="atom">
 69 |           <div class="electron"></div>
 70 |           <div class="electron-alpha"></div>
 71 |           <div class="electron-omega"></div>
 72 | 		    </div>
 73 |     </div>
 74 | 
 75 |     <!--Dynamic Nav Bar-->
 76 |     <div class="container root_block" style="width: 100%">
 77 |       <h2 data-aos="fade-up" data-aos-delay="300" class="event_heading text-center mb-3 font-weight-bold heading">Events</h2>
 78 |       
 79 |       <div class="container-fluid">
 80 |         <div class="row">
 81 |           <div class="col-md-12 px-0">
 82 |             <div class="swiper-container image-slider">
 83 |                 
 84 |                 <div class="swiper-wrapper"><!-- fetching from json --></div>
 85 |                 
 86 |                 <!-- slider controls -->
 87 |                 <div class="swiper-button-next swiper-nav-ctrl next-ctrl controller">
 88 |                   <i class="fas fa-chevron-right"></i>
 89 |                 </div>
 90 |                 
 91 |                 <div class="swiper-button-prev swiper-nav-ctrl prev-ctrl controller1" >
 92 |                   <i class="fas fa-chevron-left"></i>
 93 |                 </div>
 94 |               
 95 |             </div>
 96 |           </div>
 97 |         </div>
 98 |       </div>
 99 |     </div>
100 |     
101 |     <br />
102 |     <br />
103 |     <!-- Dynamic footer section -->
104 |     <!-- script -->
105 |     <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"  integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous" ></script>
106 |     <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"  integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous" ></script>
107 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.7.5/swiper-bundle.min.js"></script>
108 |     <script src="assets/js/app.js"></script>
109 |     <script src="assets/js/event.js"></script>
110 |   </body>
111 | </html>
112 | 


--------------------------------------------------------------------------------
/event/image1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DaveSimoes/Developer.Portfolio/1eb60b78856ecf2afc5b474061ee0a20a32b4430/event/image1.jpg


--------------------------------------------------------------------------------
/event/image2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DaveSimoes/Developer.Portfolio/1eb60b78856ecf2afc5b474061ee0a20a32b4430/event/image2.jpg


--------------------------------------------------------------------------------
/event/image3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DaveSimoes/Developer.Portfolio/1eb60b78856ecf2afc5b474061ee0a20a32b4430/event/image3.jpg


--------------------------------------------------------------------------------
/event/image4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DaveSimoes/Developer.Portfolio/1eb60b78856ecf2afc5b474061ee0a20a32b4430/event/image4.jpg


--------------------------------------------------------------------------------
/event/image5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DaveSimoes/Developer.Portfolio/1eb60b78856ecf2afc5b474061ee0a20a32b4430/event/image5.jpg


--------------------------------------------------------------------------------
/event/image6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DaveSimoes/Developer.Portfolio/1eb60b78856ecf2afc5b474061ee0a20a32b4430/event/image6.jpg


--------------------------------------------------------------------------------
/event/image7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DaveSimoes/Developer.Portfolio/1eb60b78856ecf2afc5b474061ee0a20a32b4430/event/image7.jpg


--------------------------------------------------------------------------------
/event/image8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DaveSimoes/Developer.Portfolio/1eb60b78856ecf2afc5b474061ee0a20a32b4430/event/image8.jpg


--------------------------------------------------------------------------------
/fonts/Agustina.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DaveSimoes/Developer.Portfolio/1eb60b78856ecf2afc5b474061ee0a20a32b4430/fonts/Agustina.woff


--------------------------------------------------------------------------------
/home/resume.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DaveSimoes/Developer.Portfolio/1eb60b78856ecf2afc5b474061ee0a20a32b4430/home/resume.png


--------------------------------------------------------------------------------
/icons/arrow-right/arrow-right-circle.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="feather feather-arrow-right-circle" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="12 16 16 12 12 8"/><line x1="8" x2="16" y1="12" y2="12"/></svg>


--------------------------------------------------------------------------------
/js/404.js:
--------------------------------------------------------------------------------
 1 | anime({
 2 |     targets: ".row svg",
 3 |     translateY: 10,
 4 |     autoplay: true,
 5 |     loop: true,
 6 |     easing: "easeInOutSine",
 7 |     direction: "alternate",
 8 | });
 9 | anime({
10 |     targets: "#zero",
11 |     translateX: 10,
12 |     autoplay: true,
13 |     loop: true,
14 |     easing: "easeInOutSine",
15 |     direction: "alternate",
16 |     scale: [{ value: 1 }, { value: 1.4 }, { value: 1, delay: 250 }],
17 |     rotateY: { value: "+=180", delay: 200 },
18 | });


--------------------------------------------------------------------------------
/js/cursor.js:
--------------------------------------------------------------------------------
  1 | var cursor = {
  2 |   delay: 8,
  3 |   _x: 0,
  4 |   _y: 0,
  5 |   endX: window.innerWidth / 2,
  6 |   endY: window.innerHeight / 2,
  7 |   cursorVisible: true,
  8 |   cursorEnlarged: false,
  9 |   $dot: document.querySelector(".cursor-dot"),
 10 |   $outline: document.querySelector(".cursor-dot-outline"),
 11 |   lastScrolledLeft : 0, // For changing position of cursor with scrolling
 12 |   lastScrolledTop : 0,  // For changing position of cursor with scrolling
 13 | 
 14 |   init: function () {
 15 |     // Set up element sizes
 16 |     this.dotSize = this.$dot.offsetWidth;
 17 |     this.outlineSize = this.$outline.offsetWidth;
 18 | 
 19 |     this.setupEventListeners();
 20 |     this.animateDotOutline();
 21 |   },
 22 | 
 23 |   setupEventListeners: function () {
 24 |     var self = this;
 25 | 
 26 |     // Anchor hovering
 27 |     document.querySelectorAll("a").forEach(function (el) {
 28 |       el.addEventListener("mouseover", function () {
 29 |         self.cursorEnlarged = true;
 30 |         self.toggleCursorSize();
 31 |       });
 32 |       el.addEventListener("mouseout", function () {
 33 |         self.cursorEnlarged = false;
 34 |         self.toggleCursorSize();
 35 |       });
 36 |     });
 37 | 
 38 |     // Click events
 39 |     document.addEventListener("mousedown", function () {
 40 |       self.cursorEnlarged = true;
 41 |       self.toggleCursorSize();
 42 |     });
 43 |     document.addEventListener("mouseup", function () {
 44 |       self.cursorEnlarged = false;
 45 |       self.toggleCursorSize();
 46 |     });
 47 | 
 48 |     document.addEventListener("mousemove", function (e) {
 49 |       // Show the cursor
 50 |       self.cursorVisible = true;
 51 |       self.toggleCursorVisibility();
 52 | 
 53 |       // Position the dot
 54 |       self.endX = e.pageX;
 55 |       self.endY = e.pageY;
 56 |       self.$dot.style.top = self.endY + "px";
 57 |       self.$dot.style.left = self.endX + "px";
 58 |     });
 59 | 
 60 |     // Hide/show cursor
 61 |     document.addEventListener("mouseenter", function (e) {
 62 |       self.cursorVisible = true;
 63 |       self.toggleCursorVisibility();
 64 |       self.$dot.style.opacity = 1;
 65 |       self.$outline.style.opacity = 1;
 66 |     });
 67 | 
 68 |     document.addEventListener("mouseleave", function (e) {
 69 |       self.cursorVisible = true;
 70 |       self.toggleCursorVisibility();
 71 |       self.$dot.style.opacity = 0;
 72 |       self.$outline.style.opacity = 0;
 73 |     });
 74 | 
 75 |     // Change position of cursor with scrolling
 76 |     document.addEventListener('scroll', function (e) {
 77 | 
 78 |       if (self.lastScrolledLeft != $(document).scrollLeft()) {
 79 |         self.endX -= self.lastScrolledLeft;
 80 |         self.lastScrolledLeft = $(document).scrollLeft();
 81 |         self.endX += self.lastScrolledLeft;
 82 |       }
 83 |       if (self.lastScrolledTop != $(document).scrollTop()) {
 84 |         self.endY -= self.lastScrolledTop;
 85 |         self.lastScrolledTop = $(document).scrollTop();
 86 |         self.endY += self.lastScrolledTop;
 87 |       }
 88 |       self.$dot.style.top = self.endY + "px";
 89 |       self.$dot.style.left = self.endX + "px";
 90 | 
 91 |     });
 92 |   },
 93 | 
 94 |   animateDotOutline: function () {
 95 |     var self = this;
 96 | 
 97 |     self._x += (self.endX - self._x) / self.delay;
 98 |     self._y += (self.endY - self._y) / self.delay;
 99 |     self.$outline.style.top = self._y + "px";
100 |     self.$outline.style.left = self._x + "px";
101 | 
102 |     requestAnimationFrame(this.animateDotOutline.bind(self));
103 |   },
104 | 
105 |   toggleCursorSize: function () {
106 |     var self = this;
107 | 
108 |     if (self.cursorEnlarged) {
109 |       self.$dot.style.transform = "translate(-50%, -50%) scale(0.75)";
110 |       self.$outline.style.transform = "translate(-50%, -50%) scale(1.5)";
111 |     } else {
112 |       self.$dot.style.transform = "translate(-50%, -50%) scale(1)";
113 |       self.$outline.style.transform = "translate(-50%, -50%) scale(1)";
114 |     }
115 |   },
116 | 
117 |   toggleCursorVisibility: function () {
118 |     var self = this;
119 | 
120 |     if (self.cursorVisible) {
121 |       self.$dot.style.opacity = 1;
122 |       self.$outline.style.opacity = 1;
123 |     } else {
124 |       self.$dot.style.opacity = 0;
125 |       self.$outline.style.opacity = 0;
126 |     }
127 |   },
128 | };
129 | 
130 | cursor.init();
131 | 


--------------------------------------------------------------------------------
/js/dynamicTitle.js:
--------------------------------------------------------------------------------
 1 | window.onload = function () {
 2 |   const favicon = document.getElementById("favicon");
 3 |   let pageTitle = document.title;
 4 |   let attentionMessage = "Come back";
 5 | 
 6 |   document.addEventListener("visibilitychange", function (e) {
 7 |     let isPageActive = !document.hidden;
 8 | 
 9 |     if (!isPageActive) {
10 |       toggle();
11 |     } else {
12 |       document.title = pageTitle;
13 |     }
14 |   });
15 | 
16 |   document.addEventListener("visibilitychange", function (e) {
17 |     if (!document.hidden) {
18 |       document.title = pageTitle;
19 |       favicon.href = "./assets/images/dp_male.svg";
20 |     }
21 |   });
22 | 
23 |   function toggle() {
24 |     if (document.title === attentionMessage) {
25 |       document.title = pageTitle;
26 |       favicon.href = "./assets/images/dp_male.svg";
27 |     } else {
28 |       document.title = attentionMessage;
29 |       favicon.href = "./assets/images/folded.png";
30 |     }
31 |   }
32 | };
33 | 


--------------------------------------------------------------------------------
/js/education.js:
--------------------------------------------------------------------------------
  1 | AOS.init();
  2 | 
  3 | // MOOCs Cards
  4 | 
  5 | const moocs = document.querySelector(".moocs");
  6 | const moocscards = [
  7 |   {
  8 |     title: "ITIL® Foundation Certificate in IT Service Management",
  9 |   /*  cardImage: "assets/images/designs/itil_22", */
 10 |     cardImage: "assets/images/designs/itil_22.png",
 11 |     link: "https://https://www.peoplecert.org/certifications-and-memberships",
 12 |   },
 13 |   {
 14 |     title: "Introduction to Cloud Computing",
 15 |     cardImage: "assets/images/designs/coursera.png",
 16 |     moocLink: "https://www.udemy.com/course/cryptography-for-beginners/",
 17 |   },
 18 |   {
 19 |     title: "HCL Certified Domino Developer Application",
 20 |     cardImage: "assets/images/designs/hcl_domino.png",
 21 |     moocLink: "https://www.coursera.org/learn/machine-learning",
 22 |   },
 23 |   {
 24 |     title: "Linkedin Skill Assessment (JavaScript)",
 25 |     cardImage: "assets/images/designs/javascript.png",
 26 |     moocLink: "https://www.linkedin.com/skill-assessments/JavaScript/report/",
 27 |   },
 28 | 
 29 |  /* {
 30 |     title: "Introduction to CSS 3",
 31 |     cardImage: "assets/images/education-page/udacity.svg",
 32 |     moocLink: "https://www.udacity.com/course/intro-to-html-and-css--ud001",
 33 |   },
 34 |   {
 35 |     title: "Javascript",
 36 |     cardImage: "assets/images/education-page/udacity.svg",
 37 |     moocLink: "https://www.udacity.com/course/intro-to-javascript--ud803",
 38 |   },
 39 |   {
 40 |     title: "Bootstrap 4",
 41 |     cardImage: "assets/images/education-page/udemy.svg",
 42 |     moocLink: "https://www.udemy.com/course/bootstrap-4-tutorials/",
 43 |   },
 44 |   {
 45 |     title: "Intro to React",
 46 |     cardImage: "assets/images/education-page/edx.svg",
 47 |     moocLink: "https://www.edx.org/learn/reactjs",
 48 |   },
 49 |   {
 50 |     title: "Intro to React Native",
 51 |     cardImage: "assets/images/education-page/coursera2.svg",
 52 |     moocLink:
 53 |       "https://www.coursera.org/lecture/react-native/introduction-to-react-native-Eax0D",
 54 |   },
 55 |   {
 56 |     title: "NodeJS, Express and MongoDB",
 57 |     cardImage: "assets/images/education-page/coursera2.svg",
 58 |     moocLink: "https://www.coursera.org/learn/server-side-nodejs",
 59 |   },
 60 |   {
 61 |     title: "XML-AJAX",
 62 |     cardImage: "assets/images/education-page/udemy.svg",
 63 |     moocLink: "https://www.udemy.com/course/xml-from-beginner-to-expert/",
 64 |   },
 65 |   {
 66 |     title: "Data Structures & Algorithms",
 67 |     cardImage: "assets/images/education-page/udacity.svg",
 68 |     moocLink:
 69 |       "https://www.udacity.com/course/data-structures-and-algorithms-nanodegree--nd256",
 70 |   }, */
 71 | ];
 72 | 
 73 | const experience = [
 74 |   {
 75 |     img: "assets/images/education-page/c1.png",
 76 |   },
 77 |   {
 78 |     img: "assets/images/education-page/c2.jpg",
 79 |   },
 80 |   {
 81 |     img: "assets/images/education-page/c3.png",
 82 |   },
 83 |   {
 84 |     img: "assets/images/education-page/c4.png",
 85 |   },
 86 |   {
 87 |     img: "assets/images/education-page/c5.jpg",
 88 |   },
 89 | ];
 90 | 
 91 | let currentItem = 0;
 92 | 
 93 | const img = document.getElementById("image");
 94 | 
 95 | const prevBtn = document.querySelector("#prevBtn");
 96 | const nextBtn = document.querySelector("#nextBtn");
 97 | 
 98 | window.addEventListener("DOMContentLoaded", function () {
 99 |   showExperience();
100 | });
101 | 
102 | function showExperience() {
103 |   setInterval(function () {
104 |     if (currentItem === experience.length) {
105 |       currentItem = 0;
106 |     }
107 |     const item = experience[currentItem];
108 |     img.src = item.img;
109 |     currentItem++;
110 |   }, 3000);
111 | }
112 | 
113 | const showCards = () => {
114 |   let output = "";
115 |   moocscards.forEach(
116 |     ({ title, cardImage, moocLink }) =>
117 |       (output += `        
118 |         <div class="col-6 col-md-3 col-sm-4 column" data-aos="fade-up" data-aos-easing="linear" data-aos-delay="600" >  
119 |             <div class="card mb-3 mx-auto">
120 |                <div class="content">
121 |                   <div class="content-overlay"></div>
122 |                     <img src=${cardImage} class="card-img-top content-image">     
123 |                   <div class="content-details fadeIn-bottom">
124 |                     <a href="${moocLink}" target="_blank"><i class="fa fa-info-circle fa-2x" aria-hidden="true" style="color: white;"></i></a>                                   
125 |                   </div>
126 |                 </div>
127 |                 <div class="card-body">
128 |                     <h6 class="mt-0 py-2 text-center font-weight-bold mooc-title" style="font-size:12px;">${title}</h6>
129 |                 </div>
130 |             </div>
131 |         </div>        
132 |       `)
133 |   );
134 |   moocs.innerHTML = output;
135 | };
136 | document.addEventListener("DOMContentLoaded", showCards);
137 | 
138 | /* Badges*/
139 | 
140 | const bagdes = document.querySelector(".badges");
141 | const badgesection = [
142 |   {
143 |     title: "Google Developer Essentials",
144 |     image: "assets/images/education-page/badge1.png",
145 |     description: "Earned May 20, 2020",
146 |   },
147 |   {
148 |     title: "VM Migration",
149 |     image: "assets/images/education-page/badge2.png",
150 |     description: "Earned June 20, 2020",
151 |   },
152 |   {
153 |     title: "G Suite Essentials",
154 |     image: "assets/images/education-page/badge3.png",
155 |     description: "Earned July 20, 2020",
156 |   },
157 | ];
158 | 
159 | const showCards1 = () => {
160 |   let output = "";
161 |   badgesection.forEach(
162 |     ({ title, image, description }) =>
163 |       (output += `       
164 |       <div class="col-lg-4 col-md-6 p-2" data-aos="fade-up" data-aos-easing="linear" data-aos-delay="600"> 
165 |         <img class="img-fluid d-block mb-3 mx-auto hvr-grow" src="${image}" alt="Card image cap" width="200">
166 |           <div class="text-center font-weight-bolder" style="font-size: 1.3em;">${title}</div>
167 |           <div class="text-center text-muted font-weight-bolder p-2">${description}</div>
168 |       </div>`)
169 |   );
170 |   bagdes.innerHTML = output;
171 | };
172 | document.addEventListener("DOMContentLoaded", showCards1);
173 | 
174 | /* Timeline Section*/
175 | 
176 | $(function () {
177 |   window.sr = ScrollReveal();
178 | 
179 |   if ($(window).width() < 768) {
180 |     if ($(".timeline-content").hasClass("js--fadeInLeft")) {
181 |       $(".timeline-content")
182 |         .removeClass("js--fadeInLeft")
183 |         .addClass("js--fadeInRight");
184 |     }
185 | 
186 |     sr.reveal(".js--fadeInRight", {
187 |       origin: "right",
188 |       distance: "300px",
189 |       easing: "ease-in-out",
190 |       duration: 800,
191 |     });
192 |   } else {
193 |     sr.reveal(".js--fadeInLeft", {
194 |       origin: "left",
195 |       distance: "300px",
196 |       easing: "ease-in-out",
197 |       duration: 800,
198 |     });
199 | 
200 |     sr.reveal(".js--fadeInRight", {
201 |       origin: "right",
202 |       distance: "300px",
203 |       easing: "ease-in-out",
204 |       duration: 800,
205 |     });
206 |   }
207 | 
208 |   sr.reveal(".js--fadeInLeft", {
209 |     origin: "left",
210 |     distance: "300px",
211 |     easing: "ease-in-out",
212 |     duration: 800,
213 |   });
214 | 
215 |   sr.reveal(".js--fadeInRight", {
216 |     origin: "right",
217 |     distance: "300px",
218 |     easing: "ease-in-out",
219 |     duration: 800,
220 |   });
221 | });
222 | 


--------------------------------------------------------------------------------
/js/event.js:
--------------------------------------------------------------------------------
  1 | $(document).ready(function () {
  2 |   AOS.init();
  3 |   const eventswiper = document.querySelector(".swiper-wrapper");
  4 |   const event = [
  5 |     // eslint-disable-next-line linebreak-style
  6 |     {
  7 |       title: "Talk on ABC",
  8 |       image: "assets/images/event/image3.jpg",
  9 |     },
 10 |     {
 11 |       title: "Keynote on XYZ",
 12 |       image: "assets/images/event/image2.jpg",
 13 |     },
 14 |     { title: "Group Picture", image: "assets/images/event/image1.jpg" },
 15 |     {
 16 |       title: "Presentation",
 17 |       image: "assets/images/event/image4.jpg",
 18 |     },
 19 |     {
 20 |       title: "Note on XYZ",
 21 |       image: "assets/images/event/image5.jpg",
 22 |     },
 23 |     {
 24 |       title: "Keytopics",
 25 |       image: "assets/images/event/image6.jpg",
 26 |     },
 27 |     {
 28 |       title: "The Gist",
 29 |       image: "assets/images/event/image7.jpg",
 30 |     },
 31 |     {
 32 |       title: "Thank You",
 33 |       image: "assets/images/event/image8.jpg",
 34 |     },
 35 |   ];
 36 |   // Filling the details from the object array event
 37 |   function fillData() {
 38 |     let output = "";
 39 |     for (let x = 0; x < event.length; x++) {
 40 |       output += `
 41 |     <div class="swiper-slide">
 42 |     <div class="img-container">
 43 |       <img src=${event[x].image} alt="" class="img-fluid" />
 44 |     </div>
 45 |     <div class="container arrow_contain">
 46 |       <div class="row justify-content-center">
 47 |         <div class="col-md-8">
 48 |           <div class="wrapper">
 49 |             <div class="content">
 50 |               <div class="title">
 51 |                 <div class="text-wrapper">
 52 |                   <div class="text-inner">
 53 |                   ${event[x].title}
 54 |                   </div>
 55 |                 </div>
 56 |               </div>
 57 |             </div>
 58 |           </div>
 59 |          </div> 
 60 |           <!-- wraper freee -->
 61 |       </div>
 62 |     </div>
 63 |   </div>`;
 64 |     }
 65 |     eventswiper.innerHTML = output;
 66 |   }
 67 |   document.addEventListener("DOMContentLoaded", fillData());
 68 |   const parallaxSliderOptions = {
 69 |     speed: 1000,
 70 |     effect: "coverflow",
 71 |     autoplay: false,
 72 |     parallax: true,
 73 |     loop: true,
 74 |     grabCursor: true,
 75 |     centeredSlides: true,
 76 |     coverflowEffect: {
 77 |       rotate: 30,
 78 |       depth: 20,
 79 |       stretch: 0,
 80 |       modifier: 1,
 81 |       slideShadows: true,
 82 |     },
 83 |     // parallax effect
 84 |     on: {
 85 |       init: function () {
 86 |         const swiper = this;
 87 |         for (let i = 0; i < swiper.slides.length; i++) {
 88 |           $(swiper.slides[i])
 89 |             .find(".img-container")
 90 |             .attr({
 91 |               "data-swiper-parallax": 0.75 * swiper.width,
 92 |               "data-swiper-paralalx-opacity": 0.5,
 93 |             });
 94 |         }
 95 |         const index = swiper.activeIndex;
 96 |         $(swiper.slides).removeClass("active");
 97 |         $(swiper.slides[index]).addClass("active");
 98 |       },
 99 |       transitionEnd: function () {
100 |         const swiper = this;
101 |         const index = swiper.activeIndex;
102 |         $(swiper.slides).removeClass("active");
103 |         $(swiper.slides[index]).addClass("active");
104 |       },
105 |       resize: function () {
106 |         this.update();
107 |       },
108 |     },
109 |     navigation: {
110 |       nextEl: ".image-slider .next-ctrl",
111 |       prevEl: ".image-slider .prev-ctrl",
112 |     },
113 |   };
114 |   // initializing swiper
115 |   const slider = new Swiper(".image-slider", parallaxSliderOptions);
116 | });
117 | 


--------------------------------------------------------------------------------
/js/experience.js:
--------------------------------------------------------------------------------
  1 | AOS.init();
  2 | 
  3 | //  Work experience cards
  4 | 
  5 | const experiencecards = document.querySelector(".experience-cards");
  6 | const exp = [
  7 |   {
  8 |     title: "Front End Developer",
  9 |     cardImage: "assets/images/experience-page/Del.png",
 10 |     place: "D&L IT ",
 11 |     time: "(Jan, 2021 - Current Time)",
 12 |     desp: "<ul><li>Development of Websites on demand using JavaScript, React, HTML, CSS</li><li>Consulting work for our Customers</li><li>Prospection and creation of course via web</li><li>Starting development mobile application by React Native</li><li>JavaScript Blog Creation</li></ul>" 
 13 |   },
 14 | 
 15 |   {
 16 |     title: "System Engineer",
 17 |     cardImage: "assets/images/experience-page/Marinit_1.png",
 18 |     place: "Marin IT AS",
 19 |     time: "(Jan, 2012 - 2021)",
 20 |     desp: "<ul><li>Development and improvement on Demand of JavaScript, HTML, CSS, XML and LotuScript software used on the company's Vessels and Its Onshore Offices in Brazil and Norway</li> <li>Development and creation of new application in Javascript, HTML, CSS, XML and LotuScript, for QMS Department which has been used at Vessels company </li> <li>Responsible by support and improvement to Vessels software such as : SGS/SGI,  Material Movement and Certificates and Documents applications</li><li>Management of applications hosted on the cloud by using Microsoft Azure</li> <li>Domino Administrator for Notes Application hosted in Domino Server.</li> </ul>" 
 21 |   },
 22 |   {
 23 |     title: "System Engineer",
 24 |     cardImage: "assets/images/experience-page/Brdistribuidora_1.png", 
 25 |     place: "BR Oil Distributor (Petrobras)",
 26 |     time: "(Sep, 2010- Aug, 2012)",
 27 |     desp: "<ul><li>Development and support to Web applications in JavaScript, Java, HTML, CSS, XML and LotuScript</li><li>Development of API`s on Demand for BR customers </li><li>Support by Call Center for BR`s Users </li><li>Domino Server Administrator</li></ul>",
 28 |   },
 29 |   {
 30 |     title: "System Engineer",
 31 |     cardImage: "assets/images/experience-page/IBM.png",    
 32 |     place: "IBM (International Business Machines Corporation)",
 33 |     time: "(Dec, 19 - Jan, 20)",
 34 |     desp: "<ul><li>Development of Audit System Program in JavaScript/LotuScript </li><li>Development of JavaScript, PHP, LotuScript codes used by customers also maintenance of Domino Server and IBM® Db2®</li><li>Supervision of applications running on DB2 Server for occasional critical environments</li><li>Supervisor and support for junior and intern developers</li> </ul>"
 35 |   },
 36 | ];
 37 | 
 38 | const showCards2 = () => {
 39 |   let output = "";
 40 |   exp.forEach(
 41 |     ({ title, cardImage, place, time, desp }) =>
 42 |     (output += `        
 43 |     <div class="col gaap" data-aos="fade-up" data-aos-easing="linear" data-aos-delay="100" data-aos-duration="400"> 
 44 |       <div class="card card1">
 45 |         <img src="${cardImage}" class="featured-image"/>
 46 |         <article class="card-body">
 47 |           <header>
 48 |             <div class="title">
 49 |               <h3>${title}</h3>
 50 |             </div>
 51 |             <p class="meta">
 52 |               <span class="pre-heading">${place}</span><br>
 53 |               <span class="author">${time}</span>
 54 |             </p>
 55 |             <ol>
 56 |               ${desp}
 57 |             </ol>
 58 |           </header>
 59 |         </article>
 60 |       </div>
 61 |     </div>
 62 |       `)
 63 |   );
 64 |   experiencecards.innerHTML = output;
 65 | };
 66 | document.addEventListener("DOMContentLoaded", showCards2);
 67 | 
 68 | // Github screen (project)
 69 | 
 70 | const volunteership = document.querySelector(".volunteership");
 71 | const volunteershipcards = [
 72 |   {
 73 |     title: "Nhaac Restaurant Website",
 74 |    /* cardImage: "assets/images/experience-page/1.jpg",*/
 75 |     cardImage: "assets/images/designs/ProjetoPizza.png",
 76 |     description:
 77 |       "Responsible for handling the projects GirlScript App and GirlScript Website Boilerplate.",
 78 |   },
 79 |   {
 80 |     title: "Registration Form",
 81 |   /*  cardImage: "assets/images/experience-page/2.jpg", */
 82 |     cardImage: "assets/images/designs/Blog_dark_light.png",
 83 |     description: "Registration Form to receive newsletter",
 84 |   },
 85 |   {
 86 |     title: "Landing Page Nike",
 87 |     /* cardImage: "assets/images/experience-page/3.jpg", */
 88 |     cardImage: "assets/images/designs/Projeto_Chuteira.jpg",
 89 |     description:
 90 |       "Landing Page Football Boots Nike ",
 91 |   },
 92 |   {
 93 |     title: "Tutorial Rest API (In Developing)",
 94 |     cardImage: "assets/images/designs/rest_tutorial.png",
 95 |     description:"REST API  tutorial for all levels: What is Rest?, HTTP methods, Resource Name, IdemPotence...",
 96 |   },
 97 |   {
 98 |     title: "BMI calculator",
 99 |     cardImage:"assets/images/designs/BMI Calculator.jpg",
100 |     description:"BMI Calculator app. Developed using Flutter",
101 |   },
102 | ];
103 | 
104 | /* const showCards = () => {
105 |   let output = "";
106 |   volunteershipcards.forEach(
107 |     ({ title, cardImage, description }) =>
108 |     (output += `        
109 |       <div class="card volunteerCard" data-aos="fade-down" data-aos-easing="linear" data-aos-delay="100" data-aos-duration="600" style="height: 550px;width:400px">
110 |       
111 |       <img src="${cardImage}" height="250" width="65" class="card-img" style="border-radius:10px">
112 |       <div class="content">
113 |           <h2 class="volunteerTitle">${title}</h2><br>
114 |           <p class="copy">${description}</p></div>
115 |       
116 |       </div>
117 |       `)
118 |   );
119 |   volunteership.innerHTML = output;
120 | };
121 | document.addEventListener("DOMContentLoaded", showCards); 
122 | 
123 | // Hackathon Section
124 | 
125 |  /*const hackathonsection = document.querySelector(".hackathon-section"); */
126 | 
127 | 
128 | /* const showCards3 = () => {
129 |   let output = "";
130 |   mentor.forEach(
131 |     ({ title, image, subtitle, desp }) =>
132 |     (output += `  
133 |       <div class="blog-slider__item swiper-slide">
134 |         <div class="blog-slider__img">
135 |             <img src="${image}" alt="">
136 |         </div>
137 |         <div class="blog-slider__content">
138 |           <div class="blog-slider__title">${title}</div>
139 |           <span class="blog-slider__code">${subtitle}</span>
140 |           <div class="blog-slider__text">${desp}</div>
141 |           <a href="#" class="blog-slider__button">Read More</a>   
142 |         </div>
143 |       </div>
144 |       `)
145 |   );
146 |   hackathonsection.innerHTML = output;
147 | };
148 | document.addEventListener("DOMContentLoaded", showCards3); */
149 | 


--------------------------------------------------------------------------------
/js/particle.js:
--------------------------------------------------------------------------------
  1 | /* ---- particles.js config ---- */
  2 | 
  3 | particlesJS("particles-js", {
  4 |   particles: {
  5 |     number: {
  6 |       value: 140,
  7 |       density: {
  8 |         enable: true,
  9 |         value_area: 800,
 10 |       },
 11 |     },
 12 |     color: {
 13 |       value: ["#2EB67D", "#ECB22E", "#E01E5B", "#36C5F0"],
 14 |     },
 15 |     shape: {
 16 |       type: "circle",
 17 |       stroke: {
 18 |         width: 0,
 19 |         color: "#fff",
 20 |       },
 21 |       polygon: {
 22 |         nb_sides: 5,
 23 |       },
 24 |       image: {
 25 |         src: "https://cdn.freebiesupply.com/logos/large/2x/slack-logo-icon.png",
 26 |         width: 100,
 27 |         height: 100,
 28 |       },
 29 |     },
 30 | 
 31 |     opacity: {
 32 |       value: 1,
 33 |       random: false,
 34 |       anim: {
 35 |         enable: false,
 36 |         speed: 1,
 37 |         opacity_min: 0.1,
 38 |         sync: false,
 39 |       },
 40 |     },
 41 |     size: {
 42 |       value: 8,
 43 |       random: true,
 44 |       anim: {
 45 |         enable: false,
 46 |         speed: 10,
 47 |         size_min: 10,
 48 |         sync: false,
 49 |       },
 50 |     },
 51 |     line_linked: {
 52 |       enable: true,
 53 |       distance: 150,
 54 |       color: "#808080",
 55 |       opacity: 0.4,
 56 |       width: 1,
 57 |     },
 58 |     move: {
 59 |       enable: true,
 60 |       speed: 5,
 61 |       direction: "none",
 62 |       random: false,
 63 |       straight: false,
 64 |       out_mode: "out",
 65 |       bounce: false,
 66 |       attract: {
 67 |         enable: false,
 68 |         rotateX: 600,
 69 |         rotateY: 1200,
 70 |       },
 71 |     },
 72 |   },
 73 |   interactivity: {
 74 |     detect_on: "window",
 75 |     events: {
 76 |       onhover: {
 77 |         enable: true,
 78 |         mode: "repulse",
 79 |       },
 80 |       onclick: {
 81 |         enable: true,
 82 |         mode: "push",
 83 |       },
 84 |     },
 85 |     modes: {
 86 |       repulse: {
 87 |         distance: 70,
 88 |         duration: 0.4,
 89 |       },
 90 |       push: {
 91 |         particles_nb: 4,
 92 |       },
 93 |     },
 94 |   },
 95 |   retina_detect: true,
 96 | });
 97 | const allElements = document.querySelectorAll(".animated-text");
 98 | 
 99 | // It checks if there is at least one element
100 | if (allElements.length > 0) {
101 |   //It runs the script for each found element
102 |   allElements.forEach((element) => {
103 |     const txtElement = element,
104 |       wordsList = txtElement.getAttribute("data-words"),
105 |       words = wordsList.split(", "); // It makes an array of words from data attribute
106 | 
107 |     let wordsCount = 0;
108 | 
109 |     entry();
110 | 
111 |     // Initial function
112 |     function entry() {
113 |       if (wordsCount < words.length) {
114 |         // It runs the code for each word
115 |         let word = words[wordsCount],
116 |           txtArr = word.split(""), // It makes an array of letters in the word
117 |           count = 0;
118 | 
119 |         txtElement.textContent = ""; // It removes the previous text from the element
120 | 
121 |         // For each letter in the array
122 |         txtArr.forEach((letter) => {
123 |           // It replaces the empty space for the "non-break-space" HTML...
124 |           // ... This is needed to separate the words properly
125 |           let _letter = letter === " " ? "&nbsp;" : letter;
126 | 
127 |           // It wraps every letter with a "span" and puts all they back to the element
128 |           txtElement.innerHTML += `<span>${_letter}</span>`;
129 |         });
130 | 
131 |         let spans = txtElement.childNodes;
132 | 
133 |         // It sets the interval between each letter showing
134 |         const letterInterval = setInterval(activeLetter, 70);
135 | 
136 |         function activeLetter() {
137 |           spans[count].classList.add("active");
138 |           count++;
139 | 
140 |           if (count === spans.length) {
141 |             clearInterval(letterInterval);
142 | 
143 |             // It waits 4 seconds to start erasing the word
144 |             setTimeout(() => {
145 |               eraseText();
146 |             }, 600);
147 |           }
148 |         }
149 | 
150 |         function eraseText() {
151 |           // It sets the interval between each letter hiding
152 |           let removeInterval = setInterval(removeLetter, 40);
153 |           count--;
154 | 
155 |           function removeLetter() {
156 |             spans[count].classList.remove("active");
157 |             count--;
158 | 
159 |             if (count === -1) {
160 |               clearInterval(removeInterval);
161 |               wordsCount++;
162 | 
163 |               // After removing the last letter, call the initial function again
164 |               entry();
165 |             }
166 |           }
167 |         }
168 |       } else {
169 |         // If the code reaches the last word
170 |         // It resets the words counter...
171 |         wordsCount = 0;
172 |         // ...and calls the initial function again.
173 |         entry();
174 |       }
175 |     }
176 |   });
177 | }
178 | 


--------------------------------------------------------------------------------
/js/project.js:
--------------------------------------------------------------------------------
  1 | AOS.init();
  2 | /* Project Cards */
  3 | 
  4 | const projectcards = document.querySelector(".projectcards");
  5 | 
  6 | // Array of object for projects
  7 | const projects = [
  8 |   {
  9 |     title: "Nhaac Restaurant WebSite",
 10 |    /* cardImage: "assets/images/design/ProjetoPizza.png",*/
 11 |     cardImage: "assets/images/designs/ProjetoPizza.png",
 12 |     description: "Nhaac Restaurant WebSite.",
 13 |     /* tagimg: "https://cdn.iconscout.com/icon/free/png-512/react-1-282599.png", */
 14 |     Previewlink: "https://davesimoes.github.io/nhaackdavesimoes.github.io//",
 15 |     Githublink: "https://github.com/DaveSimoes/nhaackdavesimoes.github.io",
 16 |   },
 17 |   {
 18 |     title: "Registration Form",
 19 |     cardImage: "assets/images/designs/Blog_dark_light.png",
 20 |     description: "Registration Form built in JavaScript, HTML and CSS",
 21 |  /* tagimg: "https://image.flaticon.com/icons/png/512/643/643350.png", */
 22 |     Previewlink: "",
 23 |     Githublink: "https://github.com/DaveSimoes/landing_page_darktheme",
 24 |   },
 25 |   {
 26 |     title: "Landing Page Nike",
 27 |     cardImage: "assets/images/designs/Projeto_Chuteira.jpg",
 28 |     description: "Landing Page Nike built using JS, HTML and CSS",
 29 |     tagimg: "https://cdn.iconscout.com/icon/free/png-512/react-1-282599.png",
 30 |     Previewlink: "",
 31 |     Githublink: "https://github.com/DaveSimoes/LightandDarktheme",
 32 |   },
 33 |   {
 34 |     title: "Tutorial Rest API (In Developing)",
 35 |     cardImage: "assets/images/designs/rest_tutorial.png",
 36 |     description: "Tutorial Rest API Website",
 37 |  /* tagimg: "https://miro.medium.com/max/2800/0*U2DmhXYumRyXH6X1.png", */
 38 |     Previewlink: "",
 39 |     Githublink: "https://github.com/DaveSimoes/LightandDarktheme",
 40 |   },
 41 |   {
 42 |     title: "BMI Calculator",
 43 |     cardImage: "assets/images/designs/bmicalculator.png",
 44 |     description: "BMI Calculator app. Developed built using Flutter",
 45 |     Previewlink: "",
 46 |     Githublink: "https://github.com/DaveSimoes/MyFirstAppMobile",
 47 |   },
 48 |  {
 49 |     title: "Responsive Resume Website",
 50 |     cardImage: "assets/images/designs/Resume_app.png",
 51 |     description: "Poker game built using typescript.",
 52 |   /*  tagimg: "https://miro.medium.com/max/816/1*mn6bOs7s6Qbao15PMNRyOA.png", */
 53 |     Previewlink: "https://davidsimoes-resume.netlify.app/",
 54 |     Githublink: "",
 55 |   }, 
 56 |  /* {
 57 |     title: "Tic Tac Toe Game",
 58 |     cardImage: "assets/images/project-page/tic-tac-toe.png",
 59 |     description:
 60 |       "Tested a React Tic Tac Toe Game using Jest and React Testing Library.",
 61 |     tagimg: "https://cdn.iconscout.com/icon/free/png-512/react-1-282599.png",
 62 |     Previewlink: "",
 63 |     Githublink: "",
 64 |   }, */
 65 | /*  {
 66 |     title: "Personal Book Library",
 67 |     cardImage: "assets/images/project-page/book.png",
 68 |     description: "Personal book library app built using JavaScript.",
 69 |     tagimg:
 70 |     Previewlink: "",
 71 |     Githublink: "", 
 72 |   }, */
 73 |  /* {
 74 |     title: "Minesweeper Game",
 75 |     cardImage: "assets/images/project-page/minesweeper.jpg",
 76 |     description:
 77 |       "Minesweeper Game built using python Object Oriented Programming.",
 78 |     tagimg:
 79 |       "https://camo.githubusercontent.com/888e388801f947dec7c3d843942c277af25fe2b1aed1821542c4e711f210312a/68747470733a2f2f75706c6f61642e77696b696d656469612e6f72672f77696b6970656469612f636f6d6d6f6e732f7468756d622f632f63332f507974686f6e2d6c6f676f2d6e6f746578742e7376672f37363870782d507974686f6e2d6c6f676f2d6e6f746578742e7376672e706e67",
 80 |     Previewlink: "",
 81 |     Githublink: "",
 82 |   }, */
 83 | /*  {
 84 |     title: "Battery Life Calculator",
 85 |     cardImage: "assets/images/project-page/battery.png",
 86 |     description: "Built battery life calculator using Python.",
 87 |     tagimg:
 88 |       "https://camo.githubusercontent.com/888e388801f947dec7c3d843942c277af25fe2b1aed1821542c4e711f210312a/68747470733a2f2f75706c6f61642e77696b696d656469612e6f72672f77696b6970656469612f636f6d6d6f6e732f7468756d622f632f63332f507974686f6e2d6c6f676f2d6e6f746578742e7376672f37363870782d507974686f6e2d6c6f676f2d6e6f746578742e7376672e706e67",
 89 |     Previewlink: "",
 90 |     Githublink: "",
 91 |   }, */
 92 |  /* {
 93 |     title: "Movie Recommendation System",
 94 |     cardImage: "assets/images/project-page/movie-recommendation.jpeg",
 95 |     description: "Built using Tensorflow.",
 96 |     tagimg:
 97 |       "https://cdn-images-1.medium.com/max/1200/1*iDQvKoz7gGHc6YXqvqWWZQ.png",
 98 |     Previewlink: "",
 99 |     Githublink: "",
100 |   }, */
101 |  /* {
102 |     title: "Music Recommendation Engine",
103 |     cardImage: "assets/images/project-page/music.jpg",
104 |     description: "Built using Python.",
105 |     tagimg:
106 |       "https://camo.githubusercontent.com/888e388801f947dec7c3d843942c277af25fe2b1aed1821542c4e711f210312a/68747470733a2f2f75706c6f61642e77696b696d656469612e6f72672f77696b6970656469612f636f6d6d6f6e732f7468756d622f632f63332f507974686f6e2d6c6f676f2d6e6f746578742e7376672f37363870782d507974686f6e2d6c6f676f2d6e6f746578742e7376672e706e67",
107 |     Previewlink: "",
108 |     Githublink: "",
109 |   }, */
110 | ];
111 | 
112 | // function for rendering project cards data
113 | const showCards = () => {
114 |   let output = "";
115 |   projects.forEach(({ title, cardImage, Previewlink, Githublink }) => {
116 |     output += `       
117 |         <div class="column skill-card card" style="margin: 15px"data-aos="zoom-in-up" data-aos-easing="linear" data-aos-delay="300" data-aos-duration="600" >
118 |           <div class="wrapper" style="background: url(${cardImage}) center / cover no-repeat;">
119 |             <div class="header">
120 |             </div>
121 |             <div class="data">
122 |               <div class="content">
123 |               <div class="title-div">
124 |                 <h1 class="title"><a href="#">${title}</a></h1>
125 |                 </div>
126 |             <ul class="menu-content"><br>
127 |                   <li><a href="${Previewlink}" class="social-icon"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="25" viewBox="0 0 30 28" fill="none" stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-monitor"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect><line x1="8" y1="21" x2="16" y2="21"></line><line x1="12" y1="17" x2="12" y2="21"></line></svg></a></li>
128 |                   <li><a href="${Githublink}" class="social-icon"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="25" viewBox="0 0 30 28" fill="none" stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-github"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg></a></li>
129 |                 </ul>
130 |               </div>
131 |             </div>
132 |           </div>
133 |         </div>`;
134 |   });
135 |   projectcards.innerHTML = output;
136 | };
137 | document.addEventListener("DOMContentLoaded", showCards);
138 | 
139 | function myFunction() {
140 |   // Declare variables
141 |   var input, button, i, skillcard, card, title;
142 |   input = document.getElementById("myInput").value;
143 |   input = input.toUpperCase();
144 |   skillcard = document.getElementsByClassName("skill-card");
145 |   card = document.getElementsByClassName("card");
146 |   title = document.getElementsByClassName("title");
147 | 
148 |   // Loop through all list items, and hide those who don't match the search query
149 |   for (i = 0; i < button.length; i++) {
150 |     if (
151 |       button[i].innerHTML.toUpperCase().includes(input) ||
152 |       title[i].innerHTML.toUpperCase().includes(input)
153 |     ) {
154 |       skillcard[i].style.display = "";
155 |       card[i].style.display = "";
156 |     } else {
157 |       skillcard[i].style.display = "none";
158 |       card[i].style.display = "none";
159 |     }
160 |   }
161 | }
162 | 


--------------------------------------------------------------------------------
/js/references.js:
--------------------------------------------------------------------------------
  1 | /*Reference Details Table*/
  2 | // Changes made 10/1/2021:
  3 | // Added reviewphoto1 - reviewphoto5 in assets/references-page
  4 | // Changed names and descriptions of references
  5 | const referenceTable = document.querySelector(".pain");
  6 | 
  7 | const references = [
  8 |   {
  9 |     sl1: 1,
 10 |     name1 : "Smaranjit Ghose",
 11 |         designation1 : "Product Manager, Microsoft",
 12 |         image1 : "https://avatars.githubusercontent.com/u/46641503?v=4",
 13 |         message1 : "John is a conscientious individual whom I mentored during JWOC'2021. His problem-solving skills and a keen interest in learning new skillsets are remarkable. His hardworking nature and team-building abilities make him different from others.",
 14 |         
 15 | 
 16 |         sl2:2,
 17 |         name2 : "Anush Bhatia",
 18 |         designation2 : "Senior Analyst, Capgemini", 
 19 |         image2: "https://avatars.githubusercontent.com/u/40017559?v=4",
 20 |         message2 : "John has the best grasping skills I have seen in a new developer. I got to know him through GSSOC'2021 when I mentored him, and he made an exceptional growth during the competition. He made some incredible contributions and has good experience with Open Source.",
 21 |         
 22 |         
 23 |     },
 24 | 
 25 |     {
 26 |         sl1:3,
 27 |         name1 : "Aditya Jyoti Paul",
 28 |         designation1 : "Technical Analyst, Amazon",
 29 |         image1 : "https://media-exp1.licdn.com/dms/image/C5603AQGEV-kzawPxjw/profile-displayphoto-shrink_800_800/0/1588602102622?e=1651708800&v=beta&t=8nxhFoR-WB4OKVltyYaVjmRpig_kQcvFsoa-eLjJPBQ",
 30 |         message1 : "John and I have worked on several projects. Apart from technical skills, he also has good soft skills. He has good experience with debugging and has excellent leadership qualities.",
 31 |         
 32 | 
 33 |         sl2:4,
 34 |         name2 : "Arnab Dutta Purkayastha",
 35 |         designation2 : "Data Scientist, Flipkart",
 36 |         image2 : "https://avatars.githubusercontent.com/u/59832779?v=4",
 37 |         message2 : "John and I worked together during a hackathon and the thing that surprised me the most about him was his knowledge of fundamentals. He offered sincere help to the team throughout the competition. He is an impressive problem solver who is able to address complex issues strategically and confidently.",
 38 |   },
 39 | ];
 40 | 
 41 | AOS.init();
 42 | const fillData = () => {
 43 |   let output = "";
 44 | 
 45 |   references.forEach(
 46 |     ({
 47 |       sl1,
 48 |       image1,
 49 |       name1,
 50 |       designation1,
 51 |       message1,
 52 |       absbox_for_linkedin1,
 53 |       sl2,
 54 |       image2,
 55 |       name2,
 56 |       designation2,
 57 |       message2,
 58 |       absbox_for_linkedin2,
 59 |     }) =>
 60 |       (output += `<tr data-aos="zoom-in-left"> 
 61 |                 <td class="imgCol"><img src="${image1}" class="rImg"></td>
 62 |                 <td class = "referenceTitleName">
 63 |                     <div>
 64 |                         <span class="imgResponsive">
 65 |                             <img src="${image1}" class="imgRes">
 66 |                         </span>
 67 |                     </div>
 68 |                     <img src="https://img.icons8.com/fluency/48/000000/quote-left.png"/>
 69 |                     <a href="#0" class="paperTitle"> ${name1} </a> 
 70 |                     <div> ${designation1} </div> <div class="rConferences">  
 71 |                         <div class="referenceY">${message1}</div>
 72 |                     </div>  
 73 |                 </td>
 74 |             </tr> 
 75 |             
 76 |             <tr data-aos="zoom-in-left"> 
 77 |                        
 78 |                         <td class = "referenceTitleName">
 79 |                             <div>
 80 |                                 <span class="imgResponsive">
 81 |                                     <img src="${image2}" class="imgRes">
 82 |                                 </span>
 83 |                             </div>
 84 |                             <img src="https://img.icons8.com/fluency/48/000000/quote-left.png"/>
 85 |                             <a href="#0" class="paperTitle">${name2} </a> 
 86 |                             <div> ${designation2} </div> <div class="rConferences">
 87 |                                 <div class="referenceY">${message2}</div>
 88 |                             </div>
 89 |                 
 90 |                             
 91 |                             
 92 |                            
 93 |                         </td>
 94 |                         <td class="imgCol"><img src="${image2}" class="rImg1"></td>
 95 |                     </tr>`)
 96 |   );
 97 |   referenceTable.innerHTML = output;
 98 | };
 99 | document.addEventListener("DOMContentLoaded", fillData);
100 | 


--------------------------------------------------------------------------------
/js/research.js:
--------------------------------------------------------------------------------
  1 | /*Research Details Table*/
  2 | 
  3 | const researchTable = document.querySelector(".main");
  4 | 
  5 | const research = [
  6 |   {
  7 |     title: "A Batch Normalized Inference Network Keeps the KL Vanishing Away",
  8 |     authors:
  9 |       "Qile Zhu, Wei Bi, Xiaojiang Liu, Xiyao Ma, Xiaolin Li and Dapeng Wu",
 10 |     conferences:
 11 |       "The 58th Annual Meeting of the Association for Computational Linguistics",
 12 |     researchYr: 2020,
 13 |     citebox: "popup1",
 14 |     image: "assets/images/research-page/inteferenceNetwork.png",
 15 |     citation: {
 16 |       vancouver:
 17 |         "Qile Zhu, Wei Bi, Xiaojiang Liu, Xiyao Ma, Xiaolin Li and Dapeng Wu. A Batch Normalized Inference Network Keeps the KL Vanishing Away. The 58th Annual Meeting of the Association for Computational Linguistics 2020.",
 18 |     },
 19 |     abstract:
 20 |       "This is currently left empty and this can be considered as a dummy data 1",
 21 |     absbox: "absPopup1",
 22 |   },
 23 | 
 24 |   {
 25 |     title: "A Call for More Rigor in Unsupervised Cross-lingual Learning",
 26 |     authors:
 27 |       "Mikel Artetxe, Sebastian Ruder, Dani Yogatama, Gorka Labaka and Eneko Agirre",
 28 |     conferences:
 29 |       "The 58th Annual Meeting of the Association for Computational Linguistics",
 30 |     researchYr: 2020,
 31 |     citebox: "popup2",
 32 |     image: "assets/images/research-page/crossLingual.png",
 33 |     citation: {
 34 |       vancouver:
 35 |         "Mikel Artetxe, Sebastian Ruder, Dani Yogatama, Gorka Labaka and Eneko Agirre. A Call for More Rigor in Unsupervised Cross-lingual Learning. The 58th Annual Meeting of the Association for Computational Linguistics 2020.",
 36 |     },
 37 |     abstract:
 38 |       "This is currently left empty and this can be considered as a dummy data 2",
 39 |     absbox: "absPopup2",
 40 |   },
 41 | 
 42 |   {
 43 |     title:
 44 |       "A Comprehensive Analysis of Preprocessing for Word Representation Learning in Affective Tasks",
 45 |     authors: "Nastaran Babanejad, Ameeta Agrawal, Aijun An and Manos Papagelis",
 46 |     conferences:
 47 |       "The 58th Annual Meeting of the Association for Computational Linguistics",
 48 |     researchYr: 2020,
 49 |     citebox: "popup3",
 50 |     image: "assets/images/research-page/wordRepresentation.png",
 51 |     citation: {
 52 |       vancouver:
 53 |         "Nastaran Babanejad, Ameeta Agrawal, Aijun An and Manos Papagelis. A Comprehensive Analysis of Preprocessing for Word Representation Learning in Affective Tasks. The 58th Annual Meeting of the Association for Computational Linguistics 2020.",
 54 |     },
 55 |     abstract:
 56 |       "This is currently left empty and this can be considered as a dummy data 3",
 57 |     absbox: "absPopup3",
 58 |   },
 59 | 
 60 |   {
 61 |     title:
 62 |       "A Contextual Hierarchical Attention Network with Adaptive Objective for Dialogue State Tracking",
 63 |     authors:
 64 |       "Yong Shan, Zekang Li, Jinchao Zhang, Fandong Meng, Yang Feng, Cheng Niu and Jie Zhou",
 65 |     conferences:
 66 |       "The 58th Annual Meeting of the Association for Computational Linguistics",
 67 |     researchYr: 2020,
 68 |     citebox: "popup4",
 69 |     image: "assets/images/research-page/dialogueState.png",
 70 |     citation: {
 71 |       vancouver:
 72 |         "Yong Shan, Zekang Li, Jinchao Zhang, Fandong Meng, Yang Feng, Cheng Niu and Jie Zhou. A Contextual Hierarchical Attention Network with Adaptive Objective for Dialogue State Tracking. The 58th Annual Meeting of the Association for Computational Linguistics 2020.",
 73 |     },
 74 |     abstract:
 75 |       "This is currently left empty and this can be considered as a dummy data 4",
 76 |     absbox: "absPopup4",
 77 |   },
 78 | 
 79 |   {
 80 |     title: "Dual Super-Resolution Learning for Semantic Segmentation",
 81 |     authors: "Wang, Li and Li, Dong and Zhu, Yousong and Tian, Lu and Shan, Yi",
 82 |     conferences:
 83 |       "IEEE/CVF Conference on Computer Vision and Pattern Recognition (CVPR)",
 84 |     researchYr: 2020,
 85 |     citebox: "popup5",
 86 |     image: "assets/images/research-page/semanticSegmentation.png",
 87 |     citation: {
 88 |       vancouver:
 89 |         "Wang, Li and Li, Dong and Zhu, Yousong and Tian, Lu and Shan, Yi. Dual Super-Resolution Learning for Semantic Segmentation. IEEE/CVF Conference on Computer Vision and Pattern Recognition (CVPR) 2020.",
 90 |     },
 91 |     abstract:
 92 |       "This is currently left empty and this can be considered as a dummy data 5",
 93 |     absbox: "absPopup5",
 94 |   },
 95 | 
 96 |   {
 97 |     title: "Deep Unfolding Network for Image Super-Resolution",
 98 |     authors: "Zhang, Kai and Van Gool, Luc and Timofte, Radu",
 99 |     conferences:
100 |       "IEEE/CVF Conference on Computer Vision and Pattern Recognition (CVPR)",
101 |     researchYr: 2020,
102 |     citebox: "popup6",
103 |     image: "assets/images/research-page/deepNetwork.png",
104 |     citation: {
105 |       vancouver:
106 |         "Zhang, Kai and Van Gool, Luc and Timofte, Radu. Deep Unfolding Network for Image Super-Resolution. IEEE/CVF Conference on Computer Vision and Pattern Recognition (CVPR) 2020.",
107 |     },
108 |     abstract:
109 |       "This is currently left empty and this can be considered as a dummy data 6",
110 |     absbox: "absPopup6",
111 |   },
112 | 
113 |   {
114 |     title:
115 |       "Unsupervised Learning for Intrinsic Image Decomposition From a Single Image",
116 |     authors: "Liu, Yunfei and Li, Yu and You, Shaodi and Lu, Feng",
117 |     conferences:
118 |       "IEEE/CVF Conference on Computer Vision and Pattern Recognition (CVPR)",
119 |     researchYr: 2020,
120 |     citebox: "popup7",
121 |     image: "assets/images/research-page/imageDecomposition.png",
122 |     citation: {
123 |       vancouver:
124 |         "Liu, Yunfei and Li, Yu and You, Shaodi and Lu, Feng. Unsupervised Learning for Intrinsic Image Decomposition From a Single Image. IEEE/CVF Conference on Computer Vision and Pattern Recognition (CVPR) 2020.",
125 |     },
126 |     abstract:
127 |       "This is currently left empty and this can be considered as a dummy data 7",
128 |     absbox: "absPopup7",
129 |   },
130 |   {
131 |     title:
132 |       "Forward and Backward Information Retention for Accurate Binary Neural Networks",
133 |     authors:
134 |       "Qin, Haotong and Gong, Ruihao and Liu, Xianglong and Shen, Mingzhu and Wei, Ziran and Yu, Fengwei and Song, Jingkuan",
135 |     conferences:
136 |       "IEEE/CVF Conference on Computer Vision and Pattern Recognition (CVPR)",
137 |     researchYr: 2020,
138 |     citebox: "popup8",
139 |     image: "assets/images/research-page/neuralNetworks.jpg",
140 |     citation: {
141 |       vancouver:
142 |         "Qin, Haotong and Gong, Ruihao and Liu, Xianglong and Shen, Mingzhu and Wei, Ziran and Yu, Fengwei and Song, Jingkuan. Forward and Backward Information Retention for Accurate Binary Neural Networks. IEEE/CVF Conference on Computer Vision and Pattern Recognition (CVPR) 2020.",
143 |     },
144 |     abstract:
145 |       "This is currently left empty and this can be considered as a dummy data 8",
146 |     absbox: "absPopup8",
147 |   },
148 | ];
149 | AOS.init();
150 | const fillData = () => {
151 |   let output = "";
152 |   research.forEach(
153 |     ({
154 |       image,
155 |       title,
156 |       authors,
157 |       conferences,
158 |       researchYr,
159 |       citebox,
160 |       citation,
161 |       absbox,
162 |       abstract,
163 |     }) =>
164 |       (output += `
165 |             <tr data-aos="zoom-in-left"> 
166 |                 <td class="imgCol"><img src="${image}" class="rImg"></td>
167 |                 <td class = "researchTitleName">
168 |                     <div class="img-div">
169 |                         <span class="imgResponsive">
170 |                             <img src="${image}" class="imgRes">
171 |                         </span>
172 |                     </div>
173 |                     <a href="#0" class="paperTitle"> ${title} </a> 
174 |                     <div class = "authors"> ${authors} </div> 
175 |                     
176 |                     <div class="rConferences"> ${conferences} 
177 |                         <div class="researchY">${researchYr}</div>
178 |                     </div>
179 |                     
180 |                     <!--CITE BUTTON-->
181 |                     <div class="d-flex" style="margin-right:5%;">
182 |                         <button class="button button-accent button-small text-right button-abstract " type="button" data-toggle="collapse" data-target="#${absbox}" aria-expanded="false" aria-controls="${absbox}">
183 |                             ABSTRACT
184 |                         </button>
185 |                 
186 |                         <button class="button button-accent button-small text-right button-abstract " type="button" data-toggle="collapse" data-target="#${citebox}" aria-expanded="false" aria-controls="${citebox}">
187 |                             CITE
188 |                         </button>
189 |                     </div>
190 |                     <div id="${absbox}" class="collapse" aria-labelledby="headingTwo" data-parent=".collapse">
191 |                         <div class="card-body">
192 |                             ${abstract}    
193 |                         </div>
194 |                     </div>
195 |                     <div id="${citebox}" class="collapse" aria-labelledby="headingTwo" data-parent=".collapse">
196 |                         <div class="card-body">
197 |                             ${citation.vancouver}    
198 |                         </div>
199 |                     </div>
200 |                 </td>
201 |             </tr>`)
202 |   );
203 |   researchTable.innerHTML = output;
204 | };
205 | document.addEventListener("DOMContentLoaded", fillData);
206 | 


--------------------------------------------------------------------------------
/js/techstack.js:
--------------------------------------------------------------------------------
 1 | AOS.init();
 2 | 
 3 | //  Tech Stacks cards
 4 | 
 5 | const techStackCards = document.querySelector(".techstack-box");
 6 | const techStack = [
 7 |   {
 8 |     langImage: "assets/images/techstack-page/html.png",
 9 |     langName: "HyperText Markup Language",
10 |     langDesc: "<li>The HyperText Markup Language, or HTML is the standard markup language for documents designed to be displayed in a web browser</li>",
11 |   },
12 |   {
13 |     langImage: "assets/images/techstack-page/css.png",
14 |     langName: "Cascading Style Sheets",
15 |     langDesc: "<li>Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in a markup language such as HTML</li>",
16 |   },
17 |   {
18 |     langImage: "assets/images/techstack-page/javascript.png",
19 |     langName: "JavaScript",
20 |     langDesc: "<li>JavaScript, often abbreviated JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS</li>",
21 |   },
22 |   {
23 |     langImage: "assets/images/techstack-page/node.png",
24 |     langName: "Node",
25 |     langDesc: "<li>Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on the V8 engine and executes JavaScript code outside a web browser</li>",
26 |   },
27 |   {
28 |     langImage: "assets/images/techstack-page/python.png",
29 |     langName: "Python",
30 |     langDesc: "<li>Python is an interpreted high-level general-purpose programming language</li>",
31 |   },
32 |   {
33 |     langImage: "assets/images/techstack-page/cpp.png",
34 |     langName: "C++",
35 |     langDesc: "<li>C++ is a general-purpose programming language created by Bjarne Stroustrup as an extension of the C programming language, or C with Classes</li>",
36 |   },
37 |   {
38 |     langImage: "assets/images/techstack-page/git.png",
39 |     langName: "Git",
40 |     langDesc: "<li>Git is software for tracking changes in any set of files, usually used for coordinating work among programmers collaboratively developing source code during software development.</li>",
41 |   },
42 |   {
43 |     langImage: "assets/images/techstack-page/bootstrap.png",
44 |     langName: "Bootstrap",
45 |     langDesc: "<li>Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development</li>",
46 |   },
47 |   {
48 |     langImage: "assets/images/techstack-page/react.png",
49 |     langName: "React",
50 |     langDesc: "<li>React is a free and open-source front-end JavaScript library for building user interfaces based on UI components</li>",
51 |   },
52 |   {
53 |     langImage:"assets/images/techstack-page/c.png",
54 |     langName:"C",
55 |     langDesc:"<li>C is a general-purpose, procedural computer programming language supporting structured programming, lexical variable scope, and recursion, with a static type system</li>"
56 |   },
57 | ];
58 | 
59 | const displayTechStacksCards = () => {
60 |   const entireCardTemplate =
61 |   techStack.map((stack)=> {
62 |       return `        
63 |     <div class="row page-content techstackcards" data-aos="fade-up" data-aos-easing="linear" data-aos-delay="0" data-aos-duration="400"> 
64 |         <div class="tech_card">
65 |             <div class="card_img">
66 |                 <img src ="${stack.langImage}" class="featured_image">
67 |             </div>
68 |             <div class="card_header">
69 |                 <header>
70 |                     <div class="text-center langName">
71 |                         <h4>${stack.langName}</h4>
72 |                     </div>
73 |                 </header>
74 |                 <ul class="description">
75 |                 ${stack.langDesc}
76 |             </ul>
77 |             </div>
78 |         </div>
79 |     </div>
80 |       `}).join('');
81 |   techStackCards.innerHTML = entireCardTemplate;
82 | };
83 | // displayTechStacksCards(techStack)
84 | document.addEventListener("DOMContentLoaded", displayTechStacksCards);
85 | 


--------------------------------------------------------------------------------
/js/travel_temp.js:
--------------------------------------------------------------------------------
  1 | document.addEventListener("DOMContentLoaded", () => {
  2 |   /* dynamic load */
  3 |   const travelSummary = document.querySelector(".main");
  4 | 
  5 |   // json variable for injecting html into DOM
  6 |   const travel_data = [
  7 |     {
  8 |       day: "Day 1",
  9 |       description: "description",
 10 |       background_image: "assets/images/travel/trip1/street.jpg"
 11 |     },
 12 |     {
 13 |       day: "Day 2",
 14 |       description: "description",
 15 |       background_image: "assets/images/travel/trip1/qutub_minar.jpg"
 16 |     },
 17 |     {
 18 |       day: "Day 3",
 19 |       description: "description",
 20 |       background_image: "assets/images/travel/trip1/lotus_temple.jpg"
 21 |     },
 22 |     {
 23 |       day: "Day 4",
 24 |       description: "description",
 25 |       background_image: "assets/images/travel/trip1/old_fort.jpg"
 26 |     },
 27 |     {
 28 |       day: "Day 5",
 29 |       description: "description",
 30 |       background_image: "assets/images/travel/trip1/red_fort.jpg"
 31 |     }
 32 |   ];
 33 | 
 34 |   // AOS.init();
 35 |   const fillData = () => {
 36 |     let output = "";
 37 |     travel_data.forEach(
 38 |       ({ day, description, background_image }, index) => {
 39 |         output += `
 40 |     <div class="el">
 41 |     <div class="el__overflow">
 42 |         <div class="el__inner">
 43 |             <div class="el__bg"></div>
 44 |             <div class="el__preview-cont">
 45 |                 <h2 class="el__heading">${day}</h2>
 46 |             </div>
 47 |             <div class="el__content">
 48 |                 <div class="el__text">${description}</div>
 49 |                 <div class="el__close-btn"></div>
 50 |             </div>
 51 |         </div>
 52 |     </div>
 53 |     <div class="el__index">
 54 |         <div class="el__index-back">${index + 1}</div>
 55 |         <div class="el__index-front">
 56 |             <div class="el__index-overlay" data-index="${index + 1}">${index + 1}</div>
 57 |         </div>
 58 |     </div>
 59 | </div>`
 60 | 
 61 |         /* adding style to stylesheet */
 62 |         document.styleSheets[0].addRule(`.el:nth-child(${index + 1}) .el__bg:before`, `background-image: url("${background_image}");`);
 63 | 
 64 |       });
 65 | 
 66 |     travelSummary.innerHTML = output;
 67 | 
 68 |   };
 69 | 
 70 |   fillData();
 71 | 
 72 |   // document.addEventListener("DOMContentLoaded", fillData);
 73 |   /* dynamic load */
 74 | 
 75 |   var $cont = document.querySelector('.cont');
 76 |   var $elsArr = [].slice.call(document.querySelectorAll('.el'));
 77 |   var $closeBtnsArr = [].slice.call(document.querySelectorAll('.el__close-btn'));
 78 | 
 79 |   setTimeout(function () {
 80 |     $cont.classList.remove('s--inactive');
 81 |   }, 200);
 82 | 
 83 |   $elsArr.forEach(function ($el) {
 84 |     $el.addEventListener('click', function () {
 85 |       if (this.classList.contains('s--active')) return;
 86 | 
 87 |       /* added */
 88 |       const mediaQuery = window.matchMedia('(max-width: 700px)')
 89 |       // Check if the media query is true
 90 |       if (mediaQuery.matches) {
 91 |         $cont.style.height = "80vh";
 92 |       }
 93 |       else {
 94 |         $cont.style.height = "120vh";
 95 |       }
 96 | 
 97 |       document.styleSheets[0].addRule(".el__bg:before", "background-repeat: no-repeat; background-size: contain !important; background-position: center center !important;");
 98 |       /* added */
 99 | 
100 |       $cont.classList.add('s--el-active');
101 |       this.classList.add('s--active');
102 |     });
103 |   });
104 | 
105 |   $closeBtnsArr.forEach(function ($btn) {
106 |     $btn.addEventListener('click', function (e) {
107 | 
108 |       /* added */
109 |       $cont.style.height = "70vh";
110 |       document.styleSheets[0].addRule(".el__bg:before", "background-size: 100% 100% !important;");
111 |       /* added */
112 | 
113 |       e.stopPropagation();
114 |       $cont.classList.remove('s--el-active');
115 |       document.querySelector('.el.s--active').classList.remove('s--active');
116 |     });
117 |   });
118 | });
119 | 


--------------------------------------------------------------------------------
/project-page/header-female.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="e96d43fc-c2ba-4d44-92c2-c0adf9da4e64" width="862.844" height="574" data-name="Layer 1" viewBox="0 0 862.844 574"><defs><linearGradient id="bfa0f4d2-dcfa-4ef6-86fd-560f9baa573d" x1="491.814" x2="491.814" y1="649.09" y2="275.777" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="gray" stop-opacity=".25"/><stop offset=".535" stop-color="gray" stop-opacity=".12"/><stop offset="1" stop-color="gray" stop-opacity=".1"/></linearGradient><linearGradient id="a8a26417-897b-4824-ba24-124e6df23ee1" x1="743.556" x2="743.556" y1="708.815" y2="647.802" xlink:href="#bfa0f4d2-dcfa-4ef6-86fd-560f9baa573d"/><linearGradient id="ab5b96a4-0813-40c0-b204-ab4c684c1095" x1="322.803" x2="322.803" y1="543.162" y2="385.061" xlink:href="#bfa0f4d2-dcfa-4ef6-86fd-560f9baa573d"/><linearGradient id="abf8dd20-0cff-4ae4-8a34-4657bd98ff8c" x1="519.121" x2="519.121" y1="123.678" y2="29.316" xlink:href="#bfa0f4d2-dcfa-4ef6-86fd-560f9baa573d"/><linearGradient id="be1ebc98-5a27-4b7e-a024-d61eab9032a4" x1="534.557" x2="534.557" y1="145.484" y2="51.121" xlink:href="#bfa0f4d2-dcfa-4ef6-86fd-560f9baa573d"/><linearGradient id="ef1bc669-8f5e-47d2-bcab-fb6965780cb0" x1="656.13" x2="656.13" y1="119.518" y2="65.397" xlink:href="#bfa0f4d2-dcfa-4ef6-86fd-560f9baa573d"/><linearGradient id="fdab1853-eb02-4945-888d-7e18210c292d" x1="771.514" x2="771.514" y1="162.365" y2="18.041" xlink:href="#bfa0f4d2-dcfa-4ef6-86fd-560f9baa573d"/><linearGradient id="abb561b1-6277-47b7-aebb-e0bd47f7b9cd" x1="674.919" x2="674.919" y1="262.903" y2="202.956" xlink:href="#bfa0f4d2-dcfa-4ef6-86fd-560f9baa573d"/><linearGradient id="bfa125eb-3859-436e-b673-157c8f5e610a" x1="637.959" x2="637.959" y1="255.272" y2="180.968" xlink:href="#bfa0f4d2-dcfa-4ef6-86fd-560f9baa573d"/></defs><title>Organizing projects</title><path fill="#3f3d56" d="M274,668.62224c0,18.88026-11.22431,25.47337-25.06914,25.47337-.32233,0-.64293-.00349-.96178-.0122-.64119-.01394-1.27715-.04181-1.9044-.08712-12.49625-.88338-22.20469-7.81624-22.20469-25.37405,0-18.16937,23.21526-41.09715,24.96633-42.79944l.00349-.00175c.06621-.0662.101-.0993.101-.0993S274,649.74024,274,668.62224Z" transform="translate(-168.57802 -163)"/><path fill="#f2f2f2" d="M248.01612,691.20677l9.17006-12.8116-9.19271,14.21769-.02439,1.47055c-.64119-.01394-1.27715-.04181-1.9044-.08712l.98792-18.889-.007-.14637.01743-.02787.09234-1.78419L237.94,658.89462l9.24324,12.91614.02265.37811.74748-14.27172L240.064,643.189l7.98525,12.22094.7771-29.58709.00349-.101v.0993l-.12894,23.332,7.85283-9.25022L248.66776,651.162l-.20733,12.77851,7.33361-12.26276-7.365,14.14451-.115,7.10362,10.64584-17.07L248.274,675.40526Z" transform="translate(-168.57802 -163)"/><path fill="url(#bfa0f4d2-dcfa-4ef6-86fd-560f9baa573d)" d="M592.51319,559.44847c-6.69828-24.31322-43.88872-42.23288-72.90771-46.85833v-11.679q.80456-.29971,1.60018-.61741a25.80449,25.80449,0,0,0-1.39392-6.844A70.43338,70.43338,0,0,0,550.67,469.04284,79.35794,79.35794,0,0,0,535.00069,346.7025a15.57,15.57,0,0,0-6.96213-28.68268,30.3914,30.3914,0,0,0-47.31236-35.30576,30.38171,30.38171,0,0,1,44.65292,26.82984c0,.26671-.01578.52952-.0226.7946a30.38589,30.38589,0,1,0-58.90437,11.367,15.194,15.194,0,0,0-10.05686,22.25626,79.36055,79.36055,0,0,0-19.353,126.21911,70.44524,70.44524,0,0,0,28.62208,22.68125v19.467c-29.3263,4.18973-67.94606,22.44217-74.69415,47.35455-5.88056,21.70968-12.15778,45.55164-15.281,59.54974,26.7709,18.81079,82.94473,29.85609,118.14907,29.85609,33.44821,0,88.11815-9.9692,114.10088-27.09764C605.12483,606.611,598.64958,581.72218,592.51319,559.44847ZM538.88587,334.86914c0,.27668-.01144.55056-.026.82359a15.19713,15.19713,0,0,0-12.61858-14.11309q.44136-.74742.84172-1.5208A15.19746,15.19746,0,0,1,538.88587,334.86914Z" transform="translate(-168.57802 -163)"/><path fill="#7c38b5" d="M493.7806,643.77286c32.49549,0,85.60824-9.68525,110.85087-26.32582-2.73418-14.94272-9.025-39.12268-14.98658-60.76192-7.59245-27.55885-55.51136-46.66462-84.097-46.66462H478.00176c-28.67418,0-76.66223,19.21632-84.15911,46.89313-5.71305,21.0913-11.81148,44.25416-14.84578,57.85354C405.00526,633.04217,459.579,643.77286,493.7806,643.77286Z" transform="translate(-168.57802 -163)"/><circle cx="324.68" cy="252.595" r="77.092" fill="#f55f44"/><path fill="#fda57d" d="M303.86624,306.181h40.33461a6.035,6.035,0,0,1,6.035,6.035v41.24161a24.77978,24.77978,0,0,1-24.77978,24.77978H322.611a24.77978,24.77978,0,0,1-24.77978-24.77978V312.216A6.035,6.035,0,0,1,303.86624,306.181Z"/><path d="M495.03245,504.09727a67.98146,67.98146,0,0,0,25.336-4.88195,25.10935,25.10935,0,0,0-25.04537-23.48378H493.1753a25.1215,25.1215,0,0,0-25.01388,22.85987A67.96813,67.96813,0,0,0,495.03245,504.09727Z" opacity=".05" transform="translate(-168.57802 -163)"/><circle cx="324.817" cy="266.344" r="68.203" fill="#fda57d"/><circle cx="301.717" cy="177.143" r="14.762" fill="#f55f44"/><circle cx="354.205" cy="177.143" r="14.762" fill="#f55f44"/><circle cx="326.32" cy="152.539" r="29.525" fill="#f55f44"/><path fill="#f55f44" d="M526.0633,322.10008a14.69253,14.69253,0,0,0-8.23833,2.51185,14.75544,14.75544,0,0,1,13.19614,26.1412,14.754,14.754,0,0,0-4.95781-28.65305Z" transform="translate(-168.57802 -163)"/><path fill="#f55f44" d="M499.81918,281.09365a29.40313,29.40313,0,0,0-18.77716,6.73953,29.52238,29.52238,0,0,1,32.63315,48.85092,29.52118,29.52118,0,0,0-13.856-55.59045Z" transform="translate(-168.57802 -163)"/><path fill="#f55f44" d="M444.05043,368.02729s8.20128,54.1285,111.5375,24.60386L504.74,348.3442Z" transform="translate(-168.57802 -163)"/><rect width="71.055" height="30.236" x="45.227" y="515.012" fill="#7c38b5" rx="14.297"/><g opacity=".7"><path fill="url(#a8a26417-897b-4824-ba24-124e6df23ee1)" d="M763.71145,658.69733V647.80222H709.23591V698.1921a10.62275,10.62275,0,0,0,10.62273,10.62273h33.23008a10.62275,10.62275,0,0,0,10.62273-10.62273V687.02461a14.16364,14.16364,0,1,0,0-28.32728Zm0,22.87973V664.14489a8.71609,8.71609,0,0,1,0,17.43217Z" transform="translate(-168.57802 -163)"/></g><path fill="#7c38b5" d="M761.95876,660.40265a12.932,12.932,0,1,0,12.932,12.932A12.932,12.932,0,0,0,761.95876,660.40265Zm0,20.89019a7.95817,7.95817,0,1,1,7.95816-7.95817A7.95818,7.95818,0,0,1,761.95876,681.29284Z" transform="translate(-168.57802 -163)"/><path d="M761.95876,660.40265a12.932,12.932,0,1,0,12.932,12.932A12.932,12.932,0,0,0,761.95876,660.40265Zm0,20.89019a7.95817,7.95817,0,1,1,7.95816-7.95817A7.95818,7.95818,0,0,1,761.95876,681.29284Z" opacity=".1" transform="translate(-168.57802 -163)"/><path fill="#7c38b5" d="M543.6422,487.45495h49.73854a0,0,0,0,1,0,0v45.95716a9.75,9.75,0,0,1-9.75,9.75H553.3922a9.75,9.75,0,0,1-9.75-9.75V487.45495A0,0,0,0,1,543.6422,487.45495Z"/><rect width="645.606" height="21.885" y="543.162" fill="#e0e0e0"/><g opacity=".7"><rect width="274.557" height="158.101" x="185.525" y="385.061" fill="url(#ab5b96a4-0813-40c0-b204-ab4c684c1095)" rx="14.5"/></g><rect width="264.609" height="155.184" x="190.499" y="387.978" fill="#535461" rx="26.835"/><circle cx="322.803" cy="465.57" r="8.953" fill="#fff"/><rect width="590.894" height="8.953" x="27.356" y="565.047" fill="#e0e0e0"/><rect width="590.894" height="2.984" x="27.356" y="565.047" opacity=".1"/><path d="M753.00582,650.455v46.00814a9.699,9.699,0,0,1-9.699,9.699h4.97385a9.699,9.699,0,0,0,9.699-9.699V650.455Z" opacity=".1" transform="translate(-168.57802 -163)"/><path fill="#eee" d="M722.03546,613.37321a2.90423,2.90423,0,0,0-2.1965,1.11521c-.65244,1.18276.52985,2.51633,1.60877,3.329,1.99324,1.50147,4.09411,2.97632,5.449,5.072s1.7805,5.02022.29944,7.02867c-1.93388,2.62249-6.5477,3.18662-6.99422,6.4143-.28666,2.07216,1.50475,3.8403,3.31992,4.88008,4.48025,2.5664,10.25592,3.25107,13.50114,7.267,1.34247-2.76054,4.34521-4.35628,7.33829-5.03772s6.10287-.63057,9.13753-1.09285a3.15939,3.15939,0,0,0,2.52119-1.33731c.8483-1.72159-1.56943-3.78639-.735-5.51473.63512-1.31546,2.50084-1.2133,3.86329-1.74011,2.21844-.85777,3.13325-3.71287,2.50361-6.00651s-2.40819-4.08614-4.27841-5.55575c-5.0403-3.96061-11.10094-6.28982-17.2309-7.96517-2.851-.7792-6.19776-2.00112-9.159-2.11925C728.125,611.996,724.86481,612.88918,722.03546,613.37321Z" transform="translate(-168.57802 -163)"/><rect width="434.476" height="297.668" x="428.368" fill="#535461" opacity=".1"/><g opacity=".5"><rect width="102.276" height="94.362" x="467.983" y="29.316" fill="url(#abf8dd20-0cff-4ae4-8a34-4657bd98ff8c)" rx="4.5"/></g><rect width="99.917" height="92.074" x="469.232" y="30.047" fill="#f5f5f5" rx="4.5"/><rect width="16.85" height="15.165" x="476.932" y="45.213" fill="#7c38b5" rx="4.5"/><rect width="66.985" height="1.685" x="498.838" y="45.213" fill="#e0e0e0" rx=".797"/><rect width="66.985" height="1.685" x="498.838" y="50.268" fill="#e0e0e0" rx=".797"/><rect width="90.576" height="1.685" x="475.247" y="68.616" fill="#e0e0e0" rx=".797"/><rect width="90.576" height="1.685" x="475.247" y="73.671" fill="#e0e0e0" rx=".797"/><rect width="90.576" height="1.685" x="475.247" y="80.411" fill="#e0e0e0" rx=".797"/><rect width="52.236" height="1.685" x="475.247" y="85.467" fill="#e0e0e0" rx=".797"/><rect width="90.576" height="1.685" x="475.247" y="92.19" fill="#e0e0e0" rx=".797"/><rect width="90.576" height="1.685" x="475.247" y="97.245" fill="#e0e0e0" rx=".797"/><rect width="90.576" height="1.685" x="475.247" y="103.986" fill="#e0e0e0" rx=".797"/><rect width="52.236" height="1.685" x="475.247" y="109.041" fill="#e0e0e0" rx=".797"/><g opacity=".5"><rect width="102.276" height="94.362" x="483.419" y="51.121" fill="url(#be1ebc98-5a27-4b7e-a024-d61eab9032a4)" rx="4.5"/></g><rect width="99.917" height="92.074" x="484.667" y="51.853" fill="#fff" rx="4.5"/><rect width="16.85" height="15.165" x="492.367" y="67.018" fill="#7c38b5" rx="4.5"/><rect width="66.985" height="1.685" x="514.273" y="67.018" fill="#e0e0e0" rx=".797"/><rect width="66.985" height="1.685" x="514.273" y="72.073" fill="#e0e0e0" rx=".797"/><rect width="90.576" height="1.685" x="490.682" y="90.422" fill="#e0e0e0" rx=".797"/><rect width="90.576" height="1.685" x="490.682" y="95.477" fill="#e0e0e0" rx=".797"/><rect width="90.576" height="1.685" x="490.682" y="102.217" fill="#e0e0e0" rx=".797"/><rect width="52.236" height="1.685" x="490.682" y="107.272" fill="#e0e0e0" rx=".797"/><rect width="90.576" height="1.685" x="490.682" y="113.996" fill="#e0e0e0" rx=".797"/><rect width="90.576" height="1.685" x="490.682" y="119.051" fill="#e0e0e0" rx=".797"/><rect width="90.576" height="1.685" x="490.682" y="125.791" fill="#e0e0e0" rx=".797"/><rect width="52.236" height="1.685" x="490.682" y="130.846" fill="#e0e0e0" rx=".797"/><rect width="56.331" height="54.122" x="627.965" y="65.397" fill="url(#ef1bc669-8f5e-47d2-bcab-fb6965780cb0)"/><rect width="54.563" height="51.692" x="628.848" y="66.722" fill="#f5f5f5"/><g opacity=".6"><rect width="19.66" height="2.651" x="646.741" y="97.428" fill="#7c38b5"/></g><rect width="33.577" height="2.651" x="639.341" y="102.288" fill="#bdbdbd"/><g opacity=".5"><rect width="122.835" height="144.324" x="710.096" y="18.041" fill="url(#fdab1853-eb02-4945-888d-7e18210c292d)"/></g><rect width="116.447" height="138.807" x="713.871" y="20.364" fill="#fff"/><rect width="81.89" height="3.485" x="731.295" y="81.264" fill="#e0e0e0"/><rect width="81.89" height="3.485" x="731.295" y="104.204" fill="#e0e0e0"/><rect width="81.89" height="3.485" x="731.295" y="110.303" fill="#e0e0e0"/><rect width="34.556" height="3.485" x="731.295" y="98.106" fill="#e0e0e0"/><rect width="25.845" height="3.485" x="787.34" y="98.106" fill="#3ad29f" opacity=".6"/><rect width="25.845" height="3.485" x="760.043" y="124.532" fill="#7c38b5"/><g opacity=".5"><rect width="72.986" height="59.948" x="638.426" y="202.956" fill="url(#abb561b1-6277-47b7-aebb-e0bd47f7b9cd)"/></g><rect width="71.144" height="57.822" x="639.277" y="204.089" fill="#f2f2f2"/><rect width="71.144" height="12.897" x="639.277" y="204.089" fill="#7c38b5"/><rect width="71.144" height="12.897" x="639.277" y="204.089" opacity=".1"/><rect width="59.806" height="7.511" x="644.945" y="221.663" fill="#e0e0e0"/><rect width="43.65" height="2.551" x="644.945" y="234.843" fill="#e0e0e0"/><rect width="28.344" height="2.551" x="644.945" y="239.236" fill="#e0e0e0"/><rect width="37.414" height="2.551" x="644.945" y="243.629" fill="#e0e0e0"/><rect width="43.65" height="2.551" x="644.945" y="248.023" fill="#e0e0e0"/><rect width="14.597" height="2.551" x="644.945" y="252.416" fill="#e0e0e0"/><g opacity=".5"><rect width="90.464" height="74.304" x="592.726" y="180.968" fill="url(#bfa125eb-3859-436e-b673-157c8f5e610a)"/></g><rect width="88.181" height="71.669" x="593.78" y="182.374" fill="#fff"/><rect width="88.181" height="15.985" x="593.78" y="182.374" fill="#7c38b5"/><rect width="74.128" height="9.31" x="600.807" y="204.155" fill="#f5f5f5"/><rect width="54.103" height="3.162" x="600.807" y="220.492" fill="#e0e0e0"/><rect width="35.132" height="3.162" x="600.807" y="225.937" fill="#e0e0e0"/><rect width="46.374" height="3.162" x="600.807" y="231.382" fill="#e0e0e0"/><rect width="54.103" height="3.162" x="600.807" y="236.828" fill="#e0e0e0"/><rect width="18.093" height="3.162" x="600.807" y="242.273" fill="#e0e0e0"/><rect width="21.079" height="2.811" x="604.671" y="207.317" fill="#69f0ae"/><circle cx="469.373" cy="366.072" r="12.214" fill="#535461" opacity=".1"/><circle cx="492.057" cy="326.812" r="12.214" fill="#535461" opacity=".1"/></svg>


--------------------------------------------------------------------------------
/project-page/header-male.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="e2165270-d70d-4354-9ac9-1848d055b0c2" width="971.44" height="662" data-name="Layer 1" viewBox="0 0 971.44 662"><defs><linearGradient id="afa9b5ae-644d-481c-a512-b5b81b77e42b" x1="979.446" x2="979.446" y1="738.59" y2="646.785" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="gray" stop-opacity=".25"/><stop offset=".535" stop-color="gray" stop-opacity=".12"/><stop offset="1" stop-color="gray" stop-opacity=".1"/></linearGradient><linearGradient id="bf9220ea-365d-417c-960f-9ff5535a2d22" x1="600.652" x2="600.652" y1="650.105" y2="119" xlink:href="#afa9b5ae-644d-481c-a512-b5b81b77e42b"/><linearGradient id="b4202d31-0de8-4369-b735-813ee4300deb" x1="485.72" x2="485.72" y1="615.598" y2="377.704" xlink:href="#afa9b5ae-644d-481c-a512-b5b81b77e42b"/></defs><title>Designer</title><path fill="#3f3d56" d="M260.11393,656.80937c-6.98452,26.59789-31.459,43.21966-31.459,43.21966s-13.15033-26.50193-6.16581-53.09982,31.459-43.21966,31.459-43.21966S267.09845,630.21148,260.11393,656.80937Z" transform="translate(-114.2798 -119)"/><path fill="#6c63ff" d="M249.52,651.18266c-19.56251,19.32716-21.75117,48.83128-21.75117,48.83128s29.52845-1.83141,49.091-21.15858,21.75116-48.83129,21.75116-48.83129S269.08248,631.85549,249.52,651.18266Z" transform="translate(-114.2798 -119)"/><rect width="106.916" height="45.496" x="68.053" y="573.241" fill="#6c63ff" rx="15.198"/><g opacity=".7"><path fill="url(#afa9b5ae-644d-481c-a512-b5b81b77e42b)" d="M1009.77408,663.17837V646.78456H927.805V722.606a15.984,15.984,0,0,0,15.984,15.984h50.00113a15.984,15.984,0,0,0,15.984-15.984V705.80229a21.312,21.312,0,0,0,0-42.62392Zm0,34.427v-26.2301a13.115,13.115,0,0,1,0,26.2301Z" transform="translate(-114.2798 -119)"/></g><path fill="#6c63ff" d="M1007.13681,665.74436a19.45875,19.45875,0,1,0,19.45875,19.45874A19.45877,19.45877,0,0,0,1007.13681,665.74436Zm0,31.43336a11.97462,11.97462,0,1,1,11.97461-11.97462A11.97462,11.97462,0,0,1,1007.13681,697.17772Z" transform="translate(-114.2798 -119)"/><path d="M1007.13681,665.74436a19.45875,19.45875,0,1,0,19.45875,19.45874A19.45877,19.45877,0,0,0,1007.13681,665.74436Zm0,31.43336a11.97462,11.97462,0,1,1,11.97461-11.97462A11.97462,11.97462,0,0,1,1007.13681,697.17772Z" opacity=".1" transform="translate(-114.2798 -119)"/><path fill="#6c63ff" d="M818.01569,531.77609H892.857a0,0,0,0,1,0,0v74.07228a9.75,9.75,0,0,1-9.75,9.75H827.76569a9.75,9.75,0,0,1-9.75-9.75V531.77609A0,0,0,0,1,818.01569,531.77609Z"/><rect width="971.44" height="32.93" y="615.598" fill="#e0e0e0"/><g opacity=".7"><path fill="url(#bf9220ea-365d-417c-960f-9ff5535a2d22)" d="M753.24926,514.26464c-10.41165-37.79179-69.43785-65.38862-113.8507-71.50773.006-.27882.02112-.55536.02112-.83569V409.571c.04726-.01733.09584-.03182.143-.04925v-1.22615A110.93933,110.93933,0,0,0,706.57314,338.064a119.882,119.882,0,0,0,7.14989-15.41561c4.74115-1.72629,8.322-9.54462,8.322-18.93884a33.06945,33.06945,0,0,0-1.3381-9.49537,121.52779,121.52779,0,0,0,.88891-14.41912,120.17944,120.17944,0,0,0-39.6966-89.38228,23.44841,23.44841,0,0,0,.37522-5.87723c-1.00473-15.52708-17.58929-26.07586-33.13284-26.78142a32.8005,32.8005,0,0,0,5.53147-34.63658c-9.91113,14.43929-30.25853,15.97418-47.77168,16.08774,7.55675-2.9265,10.95734-13.39715,6.56225-20.20525-18.30375,24.53386-53.985,29.07689-75.75576,50.59371a63.8633,63.8633,0,0,0-11.77976,16.06661,120.24089,120.24089,0,0,0-45.31946,94.1347,121.55587,121.55587,0,0,0,.87233,14.28918,32.96391,32.96391,0,0,0-1.38014,9.62531c0,9.43741,3.61453,17.27988,8.38807,18.95778a119.88387,119.88387,0,0,0,7.18266,15.46665,110.91725,110.91725,0,0,0,66.54128,69.98516v33.80212c0,.26025.01449.51691.0196.77593-44.58123,6.01408-104.079,33.82817-114.39809,71.92387-8.91132,32.89854-18.42365,69.02824-23.15665,90.24078,40.56827,28.50553,125.69315,45.24341,179.04119,45.24341,50.6869,0,133.53278-15.10715,172.90663-41.06339C772.36065,585.734,762.54821,548.0178,753.24926,514.26464Z" transform="translate(-114.2798 -119)"/></g><path fill="#6c63ff" d="M603.61048,640.72159c48.89581,0,128.8143-14.57335,166.79676-39.61233-4.11411-22.48424-13.57985-58.86769-22.55024-91.42816-11.42431-41.46766-83.52767-70.216-126.54025-70.216h-41.4486c-43.1459,0-115.35328,28.91469-126.6338,70.55985-8.5964,31.736-17.77266,66.589-22.33837,87.05194C470.03068,624.57518,552.14757,640.72159,603.61048,640.72159Z" transform="translate(-114.2798 -119)"/><circle cx="486.807" cy="164.497" r="116.236" fill="#72351c"/><path d="M449.29134,261.31116H523.77a0,0,0,0,1,0,0v59.58294a37.23927,37.23927,0,0,1-37.23927,37.23927h-.00007a37.23927,37.23927,0,0,1-37.23927-37.23927V261.31116A0,0,0,0,1,449.29134,261.31116Z" opacity=".1"/><path fill="#fda57d" d="M459.97433,258.55269H513.087a10.683,10.683,0,0,1,10.683,10.683v48.89994a37.23927,37.23927,0,0,1-37.23927,37.23927h-.00007a37.23927,37.23927,0,0,1-37.23927-37.23927V269.23568A10.683,10.683,0,0,1,459.97433,258.55269Z"/><path d="M563.70906,408.43366a107.19075,107.19075,0,0,0,74.47862.20587v-9.14914H563.70906Z" opacity=".1" transform="translate(-114.2798 -119)"/><circle cx="486.807" cy="187.668" r="106.753" fill="#fda57d"/><path d="M525.04613,209.56488S570.036,300.88751,696.94755,247.8398L667.402,201.507l-52.37621-18.80172Z" opacity=".1" transform="translate(-114.2798 -119)"/><path fill="#72351c" d="M525.04613,208.2219s44.98982,91.32263,171.90142,38.27492L667.402,200.164,615.02578,181.3623Z" transform="translate(-114.2798 -119)"/><path fill="#72351c" d="M524.64663,202.0522a61.66959,61.66959,0,0,1,15.28543-24.86262c21.00146-20.75652,55.42186-25.13895,73.07881-48.80594,4.23984,6.56758.95939,16.66822-6.33032,19.49128,16.89431-.10957,36.52273-1.59016,46.08358-15.51925a31.6415,31.6415,0,0,1-5.336,33.4127c14.99426.68059,30.99283,10.85661,31.962,25.835.64565,9.97871-5.6112,19.42651-13.81131,25.14924s-18.12112,8.34985-27.88617,10.50284C609.18758,233.54021,506.04616,259.8821,524.64663,202.0522Z" transform="translate(-114.2798 -119)"/><path fill="#72351c" d="M707.83565,307.60241h-2.83022l-55.06218,49.01876c-53.0477-24.84513-91.99411,0-91.99411,0L500.201,309.61688l-5.82291.73165a106.75011,106.75011,0,0,0,213.45756-2.74612ZM600.92449,375.42289c-20.76778,0-37.60344-4.209-37.60344-9.40086s16.83566-9.40086,37.60344-9.40086,37.60344,4.20894,37.60344,9.40086S621.69227,375.42289,600.92449,375.42289Z" transform="translate(-114.2798 -119)"/><ellipse cx="380.011" cy="187.566" fill="#fda57d" rx="9.93" ry="18.62"/><ellipse cx="593.545" cy="187.566" fill="#fda57d" rx="9.93" ry="18.62"/><g opacity=".7"><rect width="413.124" height="237.894" x="279.158" y="377.704" fill="url(#b4202d31-0de8-4369-b735-813ee4300deb)" rx="14.5"/></g><rect width="398.156" height="233.505" x="286.642" y="382.093" fill="#535461" rx="26.835"/><circle cx="485.72" cy="498.846" r="13.471" fill="#fff"/><rect width="889.115" height="13.471" x="41.163" y="648.529" fill="#e0e0e0"/><rect width="889.115" height="4.49" x="41.163" y="648.529" opacity=".1"/><path d="M993.66537,650.77609v69.22823a14.59407,14.59407,0,0,1-14.59405,14.59406h7.48413a14.59408,14.59408,0,0,0,14.59406-14.59406V650.77609Z" opacity=".1" transform="translate(-114.2798 -119)"/><path fill="#eee" d="M947.06443,594.97939c-1.26234.216-2.68649.55668-3.30507,1.67806-.98172,1.77969.79727,3.7863,2.42071,5.0092,2.99922,2.25925,6.16039,4.47845,8.19907,7.63175s2.67912,7.5539.45056,10.576c-2.9099,3.94605-9.85229,4.79489-10.52416,9.65158-.43133,3.11795,2.26418,5.77847,4.99546,7.343,6.74142,3.86165,15.432,4.89187,20.3151,10.93461,2.02-4.15378,6.53823-6.55488,11.04189-7.58024s9.183-.94882,13.7492-1.6444c1.47405-.22454,3.13458-.67474,3.79362-2.01224,1.27644-2.59048-2.36152-5.69737-1.1059-8.298.95565-1.97936,3.763-1.82565,5.81307-2.61832,3.33807-1.29069,4.71459-5.58675,3.76717-9.038s-3.62359-6.14839-6.4377-8.3597c-7.58411-5.95952-16.70353-9.46426-25.92726-11.98516-4.2899-1.17245-9.32574-3.01108-13.78142-3.18882C956.2274,592.90716,951.32174,594.25107,947.06443,594.97939Z" transform="translate(-114.2798 -119)"/></svg>


--------------------------------------------------------------------------------