├── pic.jpg ├── script.js ├── contact.html ├── skills.html ├── projects.html ├── about.css ├── index.html ├── new ├── ind.html └── styles.css ├── styles.css └── about.html /pic.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flyingculprit/Portfolio/HEAD/pic.jpg -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | document.addEventListener("DOMContentLoaded", function() { 2 | const texts = [ 3 | "Entrepreneur", 4 | "Computer Programmer", 5 | "CEO of Cyrus Byte", 6 | "Ethical Hacker", 7 | ]; 8 | let textIndex = 0; 9 | const container = document.querySelector(".slideshow"); // Updated to use the class selector 10 | 11 | function showText() { 12 | container.innerHTML = texts.map(text => `

${text}

`).join(''); 13 | const slides = container.querySelectorAll('.slideshow-text'); 14 | slides.forEach((slide, index) => { 15 | slide.style.animation = `slideshow 8s infinite ${index * 2}s`; 16 | }); 17 | } 18 | 19 | showText(); 20 | }); -------------------------------------------------------------------------------- /contact.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Flying Culprit - Contact 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 36 | 37 | 38 |

39 |

40 |

Contact

41 |

You can reach me via the following methods:

42 |

Email: suryan2021ai@gmail.com

43 |

Phone: +1234567890

44 |

45 |

46 | 47 | 48 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /skills.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Flying Culprit 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 39 | 40 | 41 |

42 |

43 |

Skills

44 |

Here are some of the skills I have acquired over the years:

45 |

UI/UX Design
Prototyping
Wireframing
User Research
Adobe XD
Figma

53 |

54 |

55 | 56 | 57 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | -------------------------------------------------------------------------------- /projects.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | FlyingCulprit 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |

15 |

16 | 20 | 23 | 39 |

40 |

41 | 42 |

43 |

44 |

Projects

45 |

Here are some of the projects I have worked on:

46 |

47 |

48 |

49 |

Project 1

50 |

Description of Project 1

51 |

52 |

53 |

54 |

Project 2

55 |

Description of Project 2

56 |

57 |

58 |

59 |

Project 3

60 |

Description of Project 3

61 |

62 |

63 |

64 |

65 | 66 | 67 | 72 | 73 | 74 | 75 | 76 | 88 | 89 | 90 | 91 | -------------------------------------------------------------------------------- /about.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Arial, sans-serif; 3 | line-height: 1.6; 4 | background-color: #1C1C1C; /* Background color matching navbar and footer */ 5 | color: #f9f9f9; /* Text color for better readability on dark background */ 6 | } 7 | 8 | .navbar { 9 | background-color: #1C1C1C !important; /* Ensure navbar background color */ 10 | margin-top: 40px; /* Adjust this value to move the navbar down */ 11 | } 12 | 13 | .navbar-brand { 14 | color: white !important; 15 | font-weight: normal; /* Set font weight to normal */ 16 | font-family: Arial, sans-serif; /* Use normal font family */ 17 | font-size: 18px; /* Reduce the font size */ 18 | 19 | } 20 | 21 | .navbar .nav-link { 22 | color: #c0c0c0 !important; /* Dimmed color for navbar links */ 23 | transition: color 0.3s; 24 | margin-right: 15px; 25 | } 26 | 27 | .navbar-nav .nav-link:hover, .navbar-nav .nav-link:focus { 28 | color: #ae77fa !important; /* Change color on hover */ 29 | } 30 | 31 | .navbar-nav .nav-link.active { 32 | color: #ae77fa !important; /* Change color when active */ 33 | } 34 | 35 | .navbar-nav .nav-item { 36 | margin-right: 20px; /* Add space between navbar items */ 37 | } 38 | 39 | .navbar-brand img { 40 | width: 40px; 41 | height: 40px; 42 | border-radius: 50%; 43 | } 44 | 45 | .navbar-toggler { 46 | border-color: #ae77fa; 47 | } 48 | 49 | .navbar-toggler-icon { 50 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath stroke='%23ae77fa' stroke-width='2' d='M5 7h20M5 15h20M5 23h20'/%3E%3C/svg%3E"); 51 | } 52 | 53 | .nav-link { 54 | color: #ae77fa; 55 | } 56 | 57 | .nav-link:hover { 58 | color: #fff; 59 | } 60 | 61 | .what-do-i-do-section { 62 | padding: 50px 0; 63 | text-align: left; /* Align content to the left */ 64 | } 65 | 66 | .section-header { 67 | text-align: left; /* Align the section header to the left */ 68 | margin-bottom: 20px; /* Reduce bottom margin */ 69 | font-size: 1.5rem; /* Decrease font size */ 70 | } 71 | 72 | .section-title { 73 | font-size: 1.5rem; /* Reduce the font size of section titles */ 74 | margin-bottom: 10px; 75 | color: #ae77fa; 76 | } 77 | 78 | 79 | 80 | .border-line { 81 | width: 50px; 82 | height: 3px; 83 | background-color: #ae77fa; 84 | margin: 10 auto; 85 | } 86 | 87 | .service-box { 88 | background: #2c2c2c; 89 | padding: 20px; 90 | margin: 15px 0; 91 | border-radius: 8px; 92 | } 93 | 94 | .skills-section { 95 | padding: 50px 0; 96 | } 97 | 98 | .skills-title { 99 | text-align: center; 100 | font-size: 2rem; 101 | margin-bottom: 20px; 102 | color: #ae77fa; 103 | } 104 | 105 | .skill-bar { 106 | margin-bottom: 10px; 107 | } 108 | 109 | .skill-bar span { 110 | display: block; 111 | font-size: 0.9rem; 112 | } 113 | 114 | .progress { 115 | background: #333; 116 | border-radius: 5px; 117 | overflow: hidden; 118 | height: 5px; 119 | } 120 | 121 | .progress-bar { 122 | background: #ae77fa; 123 | height: 100%; 124 | } 125 | 126 | .stackoverflow-section { 127 | padding: 50px 0; 128 | } 129 | 130 | .stackoverflow-section .btn { 131 | background-color: #ae77fa; 132 | color: #fff; 133 | padding: 10px 20px; 134 | border-radius: 5px; 135 | } 136 | 137 | .education-section { 138 | padding: 50px 0; 139 | } 140 | 141 | .education { 142 | margin-bottom: 20px; 143 | } 144 | 145 | .experience-section { 146 | padding: 50px 0; 147 | } 148 | 149 | .experience { 150 | margin-bottom: 20px; 151 | } 152 | 153 | .footer { 154 | background-color: #1C1C1C; 155 | padding: 20px 0; 156 | } 157 | 158 | .btn-square { 159 | width: 40px; 160 | height: 40px; 161 | display: flex; 162 | align-items: center; 163 | justify-content: center; 164 | border-radius: 50%; 165 | border: 1px solid #ae77fa; 166 | color: #ae77fa; 167 | margin: 0 5px; 168 | } 169 | 170 | .btn-square i { 171 | font-size: 18px; 172 | } 173 | 174 | .footer p { 175 | margin: 10px 0 0; 176 | } 177 | 178 | @media (max-width: 767px) { 179 | .navbar-brand img { 180 | width: 30px; 181 | height: 30px; 182 | } 183 | } 184 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Surya-Flyingculprit 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 40 | 41 | 42 | 43 | 44 |

45 |

46 |

47 |

48 |

49 |

50 |

Entrepreneur

51 |

Computer Programmer

52 |

CEO of Cyrus Byte

53 |

Ethical Hacker

54 |

55 |

Surya
Nallusamy

56 |

57 |

Started coding at the age of 16, I got a keen interest towards Cyber Security, 58 | and helped many with recovering their hacked social media accounts, 59 | and interest with hardware and I took the road of Entrepreneurship 60 | and progressively worked with many students for making projects for them. 61 | You can contact me for a coffee or to get your idea into code 62 | or to consult for your software, security or hardware needs.

63 |

64 |

65 | KNOW MORE 66 | DOWNLOAD CV 67 |

68 |

69 | 75 |

76 |

77 |

78 |

79 |

80 |

81 |

82 |

83 |

84 |

85 |

86 | 87 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | -------------------------------------------------------------------------------- /new/ind.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Surya-Flyingculprit 7 | 8 | 9 | 10 | 11 | 12 | 13 | 31 | 32 | 33 | 34 | 35 | 36 | 60 | 61 | 62 |

63 |

64 |

65 | 66 |

67 |

68 |

69 |

Entrepreneur

70 |

Computer Programmer

71 |

CEO of Cyrus Byte

72 |

Ethical Hacker

73 |

74 |

Surya
Nallusamy

75 |

76 | 77 | 78 |

79 |

80 |

81 |

82 |

83 |

84 |

Entrepreneur

85 |

Computer Programmer

86 |

CEO of Cyrus Byte

87 |

Ethical Hacker

88 |

89 |

Surya
Nallusamy

90 |

91 |

Started coding at the age of 16, I got a keen interest towards Cyber Security, 92 | and helped many with recovering their hacked social media accounts, 93 | and interest with hardware and I took the road of Entrepreneurship 94 | and progressively worked with many students for making projects for them. 95 | You can contact me for a coffee or to get your idea into code 96 | or to consult for your software, security or hardware needs.

97 |

98 |

99 | KNOW MORE 100 | DOWNLOAD CV 101 |

102 |

103 | 109 |

110 |

111 |

112 |

113 |

114 |

115 | 116 | 117 | 136 | 137 | 138 | 139 | 140 | 141 | 158 | 159 | 160 | 161 | -------------------------------------------------------------------------------- /new/styles.css: -------------------------------------------------------------------------------- 1 | /* General styles for sections */ 2 | .about, .skills, .projects, .contact { 3 | padding: 80px 0; 4 | } 5 | 6 | .about p, .skills p, .projects p, .contact p { 7 | color: #ccc; 8 | font-size: 18px; 9 | } 10 | 11 | body { 12 | background-color: #1C1C1C; 13 | color: #e6e6e6; 14 | font-family: 'Arial', sans-serif; 15 | } 16 | 17 | /* Footer styles */ 18 | .footer { 19 | background-color: #1C1C1C !important; 20 | color: #ccc; 21 | font-size: 0.7rem; /* Further reduce font size */ 22 | padding: 5px 0; /* Further decrease padding */ 23 | } 24 | 25 | .footer a { 26 | color: #fff !important; /* Ensure link text is white */ 27 | text-decoration: none !important; /* Remove underline */ 28 | } 29 | 30 | .footer a:hover { 31 | text-decoration: none !important; /* Remove underline on hover */ 32 | } 33 | 34 | .footer .btn-primary { 35 | background-color: #ae77fa !important; 36 | border-color: #ae77fa !important; 37 | font-size: 0.9rem !important; /* Further adjust the size of the icons inside the buttons */ 38 | } 39 | 40 | .footer .btn-primary:hover { 41 | animation: rotateScale 0.5s ease-in-out; 42 | background-color: #955fd4 !important; 43 | border-color: #955fd4 !important; 44 | } 45 | 46 | .footer .btn-square { 47 | align-items: center; 48 | animation: bounce 1.5s infinite; 49 | background-color: #ae77fa !important; /* Set the background color */ 50 | border-radius: 50%; /* Keep the circular shape */ 51 | color: #000000 !important; /* Set the icon color */ 52 | display: inline-flex; 53 | font-size: 0.7rem; /* Further adjust the size of the icons */ 54 | height: 25px; /* Further adjust the height of the social buttons */ 55 | justify-content: center; 56 | margin: 5px; /* Spacing between buttons */ 57 | transition: transform 0.3s, background-color 0.3s; /* Smooth transition */ 58 | width: 25px; /* Further adjust the width of the social buttons */ 59 | } 60 | 61 | .footer .btn-square:focus { 62 | box-shadow: none; /* Remove the default box-shadow */ 63 | outline: none; /* Remove the default outline */ 64 | } 65 | 66 | /* Hover effect for icons */ 67 | .footer .btn-square:hover { 68 | background-color: #000000 !important; /* Change background color on hover */ 69 | color: #ffffff !important; /* Change icon color on hover */ 70 | transform: scale(1.1); /* Slightly scale up on hover */ 71 | } 72 | 73 | .footer .btn-square i { 74 | font-size: 0.9rem !important; /* Further adjust the size of icons inside buttons */ 75 | } 76 | 77 | .footer-line { 78 | background-color: #58555d; /* Line color */ 79 | height: 1px; /* Further decrease height of the line */ 80 | margin-bottom: 5px; /* Space between line and footer content */ 81 | } 82 | 83 | /* Header styles */ 84 | .header { 85 | display: flex; 86 | align-items: center; 87 | background-color: #1c1c1c; 88 | height: 100vh; 89 | padding: 10px 20px; 90 | position: relative; 91 | text-align: left; /* Align text to the left for large screens */ 92 | flex-direction: row; /* Row layout for large screens */ 93 | } 94 | 95 | .header img { 96 | border: 5px solid #ae77fa; 97 | border-radius: 50%; 98 | box-shadow: 0 0 20px rgba(174, 119, 250, 0.8); /* Glow effect */ 99 | max-width: 350px; /* Increased size */ 100 | transition: transform 0.2s ease; /* Smooth transition */ 101 | width: 100%; /* Ensure the image fills the container */ 102 | margin-right: 20px; /* Space between image and content */ 103 | } 104 | 105 | /* Content styles */ 106 | .header .header-content { 107 | max-width: calc(100% - 370px); /* Ensure content does not exceed available width */ 108 | } 109 | 110 | /* Mobile view */ 111 | @media (max-width: 770px) { 112 | .header { 113 | flex-direction: column; /* Stack items vertically */ 114 | align-items: center; /* Center items horizontally */ 115 | justify-content: flex-start; /* Start content from the top */ 116 | text-align: left; /* Ensure text is left-aligned */ 117 | } 118 | 119 | .header img { 120 | width: 55%; /* Decrease image size on mobile */ 121 | max-width: none; /* Remove max-width restriction */ 122 | margin: 0; /* Remove margin for mobile view */ 123 | margin-bottom: 20px; /* Space between image and content */ 124 | } 125 | 126 | .header .header-content { 127 | width: 100%; /* Ensure content fills the container */ 128 | text-align: center; /* Center align text for better appearance */ 129 | } 130 | 131 | 132 | 133 | .header .title, 134 | .header .typed-text, 135 | .header .subtitle, 136 | .header .description, 137 | .header .buttons, 138 | .header hr, 139 | .header .social-links { 140 | margin: 0; /* Remove margins to ensure proper alignment */ 141 | } 142 | } 143 | 144 | /* Slideshow styles */ 145 | .header .slideshow { 146 | height:50px; /* Adjust height based on your needs */ 147 | margin-bottom: 10px; /* Space between slideshow and title */ 148 | overflow: hidden; 149 | position: relative; 150 | width: 100%; /* Ensure slideshow occupies full width */ 151 | display: flex; /* Flexbox for centering */ 152 | justify-content: center; /* Center the slideshow */ 153 | } 154 | 155 | .header .slideshow-text { 156 | color: #ae77fa !important; /* Color for the slideshow text */ 157 | font-family: "Monospace", "Courier New"; /* Slim font family */ 158 | font-size: 22px; 159 | font-weight: 300; /* Slim font weight */ 160 | opacity: 0; 161 | position: absolute; 162 | text-align: center; /* Center text alignment */ 163 | transition: opacity 1s ease-in-out; 164 | width: 100%; 165 | } 166 | 167 | @keyframes slideshow { 168 | 0% { opacity: 0; } 169 | 20% { opacity: 1; } 170 | 25% { opacity: 1; } 171 | 45% { opacity: 0; } 172 | 100% { opacity: 0; } 173 | } 174 | 175 | .header .slideshow .slideshow-text:nth-child(1) { animation: slideshow 8s infinite; } 176 | .header .slideshow .slideshow-text:nth-child(2) { animation: slideshow 8s infinite 2s; } 177 | .header .slideshow .slideshow-text:nth-child(3) { animation: slideshow 8s infinite 4s; } 178 | .header .slideshow .slideshow-text:nth-child(4) { animation: slideshow 8s infinite 6s; } 179 | 180 | /* Navbar styles */ 181 | .navbar { 182 | background-color: #1C1C1C !important; /* Ensure navbar background color */ 183 | margin-top: 40px; /* Adjust this value to move the navbar down */ 184 | } 185 | 186 | .navbar .nav-link { 187 | color: #e6e6e6 !important; 188 | margin-right: 15px; 189 | } 190 | 191 | .navbar .nav-link:hover { 192 | color: #ae77fa !important; 193 | } 194 | 195 | .navbar .navbar-brand { 196 | display: flex; 197 | margin-left: auto; /* Move the logo to the right */ 198 | align-items: center; 199 | font-size: 18px; 200 | } 201 | 202 | .navbar .navbar-brand img { 203 | margin-right: 10px; /* Adjust spacing between the image and text */ 204 | } 205 | 206 | .navbar .nav-item { 207 | margin-right: 20px; /* Add space between navbar items */ 208 | } 209 | 210 | .navbar .navbar-brand span { 211 | color: #e6e6e6; 212 | font-size: 18px; 213 | } 214 | 215 | /* Projects styles */ 216 | .projects .project-item { 217 | margin: 20px 0; 218 | } 219 | 220 | .projects .project-item img { 221 | border: 2px solid #ae77fa; 222 | border-radius: 10px; 223 | max-width: 100%; 224 | transition: all 0.3s ease; 225 | } 226 | 227 | .projects .project-item img:hover { 228 | transform: scale(1.05); 229 | } 230 | 231 | /* Skills styles */ 232 | .skills .list-inline-item { 233 | background-color: #1c1c1c; 234 | border: 2px solid #ae77fa; 235 | border-radius: 25px; 236 | color: #ae77fa; 237 | font-weight: bold; 238 | margin: 10px; 239 | padding: 10px 20px; 240 | } 241 | 242 | .skills .list-inline-item:hover { 243 | background-color: #ae77fa; 244 | color: #fff; 245 | } 246 | 247 | /* Social Links styles */ 248 | .social-links { 249 | color: #fff; /* White text color */ 250 | margin-top: 10px; 251 | } 252 | 253 | .social-links a { 254 | align-items: center; 255 | color: #fff !important; /* White color for Instagram link */ 256 | display: flex; 257 | text-decoration: none !important; /* Remove underline */ 258 | } 259 | 260 | .social-links a:hover { 261 | color: #fff !important; /* Ensure the color remains white on hover */ 262 | text-decoration: none !important; /* Remove underline on hover */ 263 | } 264 | 265 | /* Keyframes for animations */ 266 | @keyframes bounce { 267 | 0%, 20%, 50%, 80%, 100% { 268 | transform: translateY(0); 269 | } 270 | 40% { 271 | transform: translateY(-10px); 272 | } 273 | 60% { 274 | transform: translateY(-5px); 275 | } 276 | } 277 | 278 | @keyframes rotateScale { 279 | 0% { 280 | transform: rotate(0deg) scale(1); 281 | } 282 | 50% { 283 | transform: rotate(360deg) scale(1.1); 284 | } 285 | 100% { 286 | transform: rotate(0deg) scale(1); 287 | } 288 | 289 | } 290 | /* changes for sparkle 291 | 292 | /*Enna da mudunjudhaa -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | /* General styles for sections */ 2 | .about, .skills, .projects, .contact { 3 | padding: 80px 0; 4 | } 5 | 6 | .about p, .skills p, .projects p, .contact p { 7 | color: #ccc; 8 | font-size: 18px; 9 | } 10 | 11 | body { 12 | background-color: #1C1C1C; 13 | color: #e6e6e6; 14 | font-family: 'Arial', sans-serif; 15 | } 16 | 17 | /* Further reduced size for the footer */ 18 | .footer { 19 | background-color: #1C1C1C !important; 20 | color: #ccc; 21 | font-size: 0.7rem; /* Further reduce font size */ 22 | padding: 5px 0; /* Further decrease padding */ 23 | } 24 | 25 | .footer a { 26 | color: #fff !important; /* Ensure link text is white */ 27 | text-decoration: none !important; /* Remove underline */ 28 | } 29 | 30 | .footer a:hover { 31 | text-decoration: none !important; /* Remove underline on hover */ 32 | } 33 | 34 | .footer .btn-primary { 35 | background-color: #ae77fa !important; 36 | border-color: #ae77fa !important; 37 | font-size: 0.9rem !important; /* Further adjust the size of the icons inside the buttons */ 38 | } 39 | 40 | .footer .btn-primary:hover { 41 | animation: rotateScale 0.5s ease-in-out; 42 | background-color: #955fd4 !important; 43 | border-color: #955fd4 !important; 44 | } 45 | 46 | .footer .btn-square { 47 | align-items: center; 48 | animation: bounce 1.5s infinite; 49 | background-color: #ae77fa !important; /* Set the background color */ 50 | border-radius: 50%; /* Keep the circular shape */ 51 | color: #000000 !important; /* Set the icon color */ 52 | display: inline-flex; 53 | font-size: 0.7rem; /* Further adjust the size of the icons */ 54 | height: 25px; /* Further adjust the height of the social buttons */ 55 | justify-content: center; 56 | margin: 5px; /* Spacing between buttons */ 57 | transition: transform 0.3s, background-color 0.3s; /* Smooth transition */ 58 | width: 25px; /* Further adjust the width of the social buttons */ 59 | } 60 | 61 | .footer .btn-square:focus { 62 | box-shadow: none; /* Remove the default box-shadow */ 63 | outline: none; /* Remove the default outline */ 64 | } 65 | 66 | /* Hover effect for icons */ 67 | .footer .btn-square:hover { 68 | background-color: #000000 !important; /* Change background color on hover */ 69 | color: #ffffff !important; /* Change icon color on hover */ 70 | transform: scale(1.1); /* Slightly scale up on hover */ 71 | } 72 | 73 | .footer .btn-square i { 74 | font-size: 0.9rem !important; /* Further adjust the size of icons inside buttons */ 75 | } 76 | 77 | .footer-line { 78 | background-color: #58555d; /* Line color */ 79 | height: 1px; /* Further decrease height of the line */ 80 | margin-bottom: 5px; /* Space between line and footer content */ 81 | } 82 | 83 | .header { 84 | align-items: center; 85 | background-color: #1c1c1c; 86 | display: flex; 87 | height: 100vh; 88 | justify-content: center; 89 | padding-top: 10px; /* Adjust this value based on the height of your navbar */ 90 | position: relative; /* Needed for absolute positioning of image */ 91 | text-align: center; 92 | } 93 | 94 | .header .btn-light, .header .btn-dark { 95 | background-color: transparent; 96 | border: 2px solid #ae77fa; 97 | border-radius: 20px; /* Adjusted shape to be more rounded */ 98 | color: #ae77fa; 99 | font-size: 13px; /* Reduced font size */ 100 | margin: 10px; 101 | padding: 8px 16px; /* Reduced padding */ 102 | transition: all 0.3s ease; 103 | } 104 | 105 | .header .btn-light:hover, .header .btn-dark:hover { 106 | background-color: #ae77fa; 107 | color: #ae77fa; 108 | } 109 | 110 | .header .d-flex { 111 | margin-right: auto; 112 | } 113 | 114 | .header .slideshow { 115 | height: 50px; /* Adjust based on your needs */ 116 | margin-bottom: 10px; /* Reduced space between slideshow and title */ 117 | overflow: hidden; 118 | position: relative; 119 | } 120 | 121 | .header .slideshow-text { 122 | color: #ae77fa !important; /* Color for the slideshow text */ 123 | font-family: "Monospace", "Courier New"; /* Slim font family */ 124 | font-size: 22px; 125 | font-weight: 300; /* Slim font weight */ 126 | opacity: 0; 127 | position: absolute; 128 | text-align: left; /* Align text to the left */ 129 | transition: opacity 1s ease-in-out; 130 | width: 100%; 131 | } 132 | 133 | .header .title { 134 | color: #fff; 135 | font-size: 48px; 136 | font-weight: bold; 137 | margin-top: 10px; 138 | } 139 | 140 | .header .typed-text { 141 | color: #ae77fa; 142 | font-size: 22px; 143 | } 144 | 145 | .header .subtitle { 146 | color: #ccc; 147 | font-size: 24px; 148 | } 149 | 150 | .header img { 151 | border: 5px solid #ae77fa; 152 | border-radius: 50%; 153 | box-shadow: 0 0 20px rgba(174, 119, 250, 0.8); /* Glow effect */ 154 | margin-top: -10px; 155 | max-width: 350px; /* Increased size */ 156 | position: relative; /* Make sure it is positioned relative to parent */ 157 | transition: transform 0.2s ease; /* Smooth transition */ 158 | width: 100%; /* Ensure the image fills the container */ 159 | } 160 | 161 | .header .infos { 162 | padding-left: 60px; /* Adjust this value as needed to move the content slightly to the right */ 163 | } 164 | 165 | .header .slideshow { 166 | margin-left: 60px; /* Adjust this value as needed to move the slideshow slightly to the right */ 167 | } 168 | 169 | .header .title { 170 | margin-left: 60px; /* Adjust this value as needed to move the title slightly to the right */ 171 | } 172 | 173 | .header .description { 174 | margin-left: 60px; /* Adjust this value as needed to move the description slightly to the right */ 175 | } 176 | 177 | .header .buttons { 178 | margin-left: 60px; /* Adjust this value as needed to move the buttons slightly to the right */ 179 | } 180 | 181 | .header hr { 182 | margin-left: 60px; /* Adjust this value as needed to move the line slightly to the right */ 183 | } 184 | 185 | .header .social-links { 186 | margin-left: 60px; /* Adjust this value as needed to move the social links slightly to the right */ 187 | } 188 | 189 | .instagram-icon { 190 | color: #fff; /* White color for Instagram icon */ 191 | font-size: 24px; /* Adjust size of the Instagram icon */ 192 | margin-left: 10px; 193 | } 194 | 195 | .navbar { 196 | background-color: #1C1C1C !important; /* Ensure navbar background color */ 197 | margin-top: 40px; /* Adjust this value to move the navbar down */ 198 | } 199 | 200 | .navbar .nav-link { 201 | color: #e6e6e6 !important; 202 | margin-right: 15px; 203 | } 204 | 205 | .navbar .nav-link:hover { 206 | color: #ae77fa !important; 207 | } 208 | 209 | .navbar .navbar-brand { 210 | display: flex; 211 | margin-left: auto; /* Move the logo to the right */ 212 | align-items: center; 213 | font-size: 18px; 214 | } 215 | 216 | .navbar .navbar-brand img { 217 | margin-right: 10px; /* Adjust spacing between the image and text */ 218 | } 219 | 220 | .navbar .nav-item { 221 | margin-right: 20px; /* Add space between navbar items */ 222 | } 223 | 224 | .navbar .navbar-brand span { 225 | color: #e6e6e6; 226 | font-size: 18px; 227 | } 228 | 229 | 230 | .projects .project-item { 231 | margin: 20px 0; 232 | } 233 | 234 | .projects .project-item img { 235 | border: 2px solid #ae77fa; 236 | border-radius: 10px; 237 | max-width: 100%; 238 | transition: all 0.3s ease; 239 | } 240 | 241 | .projects .project-item img:hover { 242 | transform: scale(1.05); 243 | } 244 | 245 | .skills .list-inline-item { 246 | background-color: #1c1c1c; 247 | border: 2px solid #ae77fa; 248 | border-radius: 25px; 249 | color: #ae77fa; 250 | font-weight: bold; 251 | margin: 10px; 252 | padding: 10px 20px; 253 | } 254 | 255 | .skills .list-inline-item:hover { 256 | background-color: #ae77fa; 257 | color: #fff; 258 | } 259 | 260 | .slideshow { 261 | height: 50px; /* Adjust based on your needs */ 262 | overflow: hidden; 263 | position: relative; 264 | } 265 | 266 | .slideshow-text { 267 | color: #ae77fa !important; /* Color for the slideshow text */ 268 | font-family: "Monospace", "Courier New"; /* Slim font family */ 269 | font-size: 22px; 270 | font-weight: 300; /* Slim font weight */ 271 | opacity: 0; 272 | position: absolute; 273 | text-align: left; /* Align text to the left */ 274 | transition: opacity 1s ease-in-out; 275 | width: 100%; 276 | } 277 | 278 | .social-links { 279 | color: #fff; /* White text color */ 280 | margin-top: 10px; 281 | } 282 | 283 | .social-links a { 284 | align-items: center; 285 | color: #fff !important; /* White color for Instagram link */ 286 | display: flex; 287 | text-decoration: none !important; /* Remove underline */ 288 | } 289 | 290 | .social-links a:hover { 291 | color: #fff !important; /* Ensure the color remains white on hover */ 292 | text-decoration: none !important; /* Remove underline on hover */ 293 | } 294 | 295 | @keyframes bounce { 296 | 0%, 20%, 50%, 80%, 100% { 297 | transform: translateY(0); 298 | } 299 | 40% { 300 | transform: translateY(-10px); 301 | } 302 | 60% { 303 | transform: translateY(-5px); 304 | } 305 | } 306 | 307 | @keyframes rotateScale { 308 | 0% { 309 | transform: rotate(0deg) scale(1); 310 | } 311 | 100% { 312 | transform: rotate(360deg) scale(1.1); 313 | } 314 | } 315 | 316 | @keyframes slideshow { 317 | 0% { opacity: 0; } 318 | 20% { opacity: 1; } 319 | 25% { opacity: 1; } 320 | 45% { opacity: 0; } 321 | 100% { opacity: 0; } 322 | } 323 | 324 | ::selection { 325 | background-color: #ae77fa; /* Purple background color for selected text */ 326 | color: #000000; /* Optional: white text color for better contrast */ 327 | } 328 | 329 | 330 | .slideshow .slideshow-text:nth-child(1) { animation: slideshow 8s infinite; } 331 | .slideshow .slideshow-text:nth-child(2) { animation: slideshow 8s infinite 2s; } 332 | .slideshow .slideshow-text:nth-child(3) { animation: slideshow 8s infinite 4s; } 333 | .slideshow .slideshow-text:nth-child(4) { animation: slideshow 8s infinite 6s; } 334 | 335 | 336 | /*change the size for all devices, Make sparkle -------------------------------------------------------------------------------- /about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | FlyingCulprit 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |

15 |

16 | 20 | 23 | 39 |

40 |

41 | 42 | 43 |

44 |

45 |

46 |

What I Do

47 |

48 |

49 |

50 |

51 |

52 |

Develop Tools

53 |

With 2 years of experience, I can design tools and apps for your needs that can get your business or idea up and running.

54 |

55 |

56 |

57 |

Teach and Train

58 |

I have reached an impasse, and I cannot go up further without taking my community up to my level. So I am teaching all that I know from time to time.

59 |

60 |

61 |

62 |

63 |

64 |

Hustle

65 |

There is no one thing. I hustle a lot to explore opportunities and learn various domains of science, technology, and engineering to apply them in my work.

66 |

67 |

68 |

69 |

Develop Websites

70 |

I can design websites and apps for your needs that can get your business or idea up and running.

71 |

72 |

73 |

74 |

75 |

76 |

77 | 78 | 79 |

80 |

81 |

Skills

82 |

83 |

84 |

Programming

85 |

86 | C 87 |

88 |

89 |

90 |

91 |

92 | C++ 93 |

94 |

95 |

96 |

97 |

98 | Java 99 |

100 |

101 |

102 |

103 |

104 | Python 105 |

106 |

107 |

108 |

109 |

110 | PHP 111 |

112 |

113 |

114 |

115 |

116 |

117 |

Database

118 |

119 | MySQL 120 |

121 |

122 |

123 |

124 |

125 | MongoDB 126 |

127 |

128 |

129 |

130 |

131 |

132 |

Application and Development

133 |

134 | Mobile Application 135 |

136 |

137 |

138 |

139 |

140 | Web Application 141 |

142 |

143 |

144 |

145 |

146 | Customized Servers 147 |

148 |

149 |

150 |

151 |

152 |

153 |

154 |

155 | 156 | 157 |

158 |

159 | Ask me on StackOverflow 160 |

161 |

162 | 163 | 164 |

165 |

166 |

Education

167 |

168 |

2021-2025

169 |

MKCE (currently pursuing)

170 |

BTech Artificial Intelligence

171 |

172 |

173 |

2019

174 |

Bharani Park Matriculation School

175 |

Passed with 90%

176 |

177 |

178 |

179 | 180 | 181 |

182 |

183 |

Experience

184 |

185 |

2024 - Present

186 |

CEO of Cyrus Byte

187 |

This was my services startup, where I was able to network, acquire experience and earn knowledge. This company set the start of my professional career. I dealt with various web development and software development technologies.

188 |

189 |

190 |

2023 - Present

191 |

Freelancer

192 |

Freelancing is one of the best ways to acquire amazing knowledge and experience from the designers, developers and hustlers all over the world, from sitting in my home. I always freelance when I feel I reached an impasse, to get myself moving.

193 |

194 |

195 |

196 | 197 | 198 | 216 | 217 | 218 | 219 | 231 | 232 | 233 | 234 | --------------------------------------------------------------------------------