Who am I?
I'm Tinura Indunil, a creative tech professional specializing in web development, digital marketing, and social media issue resolution like hacked account recovery and fake profile removal. I'm also a frontend developer, photographer, videographer, and video editor—combining tech and creativity to deliver powerful digital solutions.
My Skills
Shopify & wordpress Web Development
70%
Web Application & Social Media Security
80%
Social Media Incident Response
82%
Graphic Design
Creating eye-catching visuals and brand identities that leave a lasting impression.
Learn More
Web Development
Building responsive, high-performance websites with modern technologies and best practices.
Learn More
Social Media Issues Fix
Recover hacked Facebook and YouTube accounts, remove fake profiles, pages, and groups, and resolve ad account errors quickly and securely.
Learn More
Video Editing
Professional video editing and color grading services for commercials and social media.
Learn More
Photography
High-quality photography services for products, portraits, and commercial use.
Learn More
Digital Marketing
Comprehensive digital marketing strategies to grow your online presence and engagement.
Learn More
--light-accent: #f72585;
--light-card: #ffffff;
--light-border: #e9ecef;
/* Dark Theme */
--dark-bg: #121212;
--dark-text: #e9ecef;
--dark-primary: #4cc9f0;
--dark-secondary: #4895ef;
--dark-accent: #f72585;
--dark-card: #1e1e1e;
--dark-border: #333333;
/* Current Theme - Default to Dark */
--bg: var(--dark-bg);
--text: var(--dark-text);
--primary: var(--dark-primary);
--secondary: var(--dark-secondary);
--accent: var(--dark-accent);
--card: var(--dark-card);
--border: var(--dark-border);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Montserrat', sans-serif;
background-color: var(--bg);
color: var(--text);
line-height: 1.6;
transition: all 0.3s ease;
}
body.light-theme {
--bg: var(--light-bg);
--text: var(--light-text);
--primary: var(--light-primary);
--secondary: var(--light-secondary);
--accent: var(--light-accent);
--card: var(--light-card);
--border: var(--light-border);
}
h1, h2, h3, h4 {
font-family: 'Playfair Display', serif;
font-weight: 600;
}
a {
text-decoration: none;
color: inherit;
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
section {
padding: 100px 0;
}
.btn {
display: inline-block;
padding: 12px 30px;
border-radius: 50px;
font-weight: 600;
transition: all 0.3s ease;
border: none;
cursor: pointer;
font-size: 1rem;
}
.btn-primary {
background: var(--primary);
color: white;
box-shadow: 0 4px 15px rgba(67, 97, 238, 0.3);
}
.btn-primary:hover {
background: var(--secondary);
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(67, 97, 238, 0.4);
}
.btn-outline {
background: transparent;
color: var(--primary);
border: 2px solid var(--primary);
}
.btn-outline:hover {
background: var(--primary);
color: white;
transform: translateY(-3px);
}
.section-header {
text-align: center;
margin-bottom: 60px;
}
.section-title {
font-size: 2.5rem;
margin-bottom: 15px;
position: relative;
display: inline-block;
}
.section-title span {
color: var(--primary);
}
.section-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 3px;
background: var(--primary);
border-radius: 3px;
}
.section-subtitle {
color: var(--primary);
font-size: 1.1rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 2px;
}
/* Theme Toggle */
.theme-toggle {
position: fixed;
top: 30px;
right: 30px;
z-index: 1000;
}
.toggle-label {
position: relative;
display: inline-block;
width: 0px;
height: 0px;
background: var(--card);
border-radius: 50px;
cursor: pointer;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.toggle-label i {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 14px;
color: var(--text);
transition: all 0.3s ease;
}
.toggle-label .fa-sun {
left: 0px;
opacity: 0;
}
.toggle-label .fa-moon {
right: 0px;
}
#theme-switch:checked + .toggle-label .fa-sun {
opacity: 1;
}
#theme-switch:checked + .toggle-label .fa-moon {
opacity: 0;
}
.toggle-ball {
position: absolute;
top: 3px;
left: 3px;
width: 24px;
height: 24px;
background: var(--primary);
border-radius: 50%;
transition: all 0.3s ease;
}
#theme-switch:checked + .toggle-label .toggle-ball {
transform: translateX(30px);
}
#theme-switch {
display: none;
}
/* Particles Background */
#particles-js {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
opacity: 0.3;
}
/* Header */
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
padding: 20px 0;
transition: all 0.3s ease;
}
.header.scrolled {
background: rgba(30, 30, 30, 0.9);
backdrop-filter: blur(10px);
padding: 15px 0;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}
.light-theme .header.scrolled {
background: rgba(255, 255, 255, 0.9);
}
.header .container {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 1.8rem;
font-weight: 700;
color: var(--text);
}
.logo span {
color: var(--primary);
}
.navbar {
display: flex;
align-items: center;
}
.navbar a {
margin-left: 30px;
font-weight: 500;
position: relative;
transition: all 0.3s ease;
}
.navbar a:hover {
color: var(--primary);
}
.navbar a::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 0;
height: 2px;
background: var(--primary);
transition: width 0.3s ease;
}
.navbar a:hover::after {
width: 100%;
}
.menu-btn {
display: none;
width: 30px;
height: 20px;
position: relative;
cursor: pointer;
z-index: 1001;
}
.menu-btn__burger {
position: absolute;
width: 30px;
height: 3px;
background: var(--text);
border-radius: 3px;
transition: all 0.3s ease;
}
.menu-btn__burger::before,
.menu-btn__burger::after {
content: '';
position: absolute;
width: 30px;
height: 3px;
background: var(--text);
border-radius: 3px;
transition: all 0.3s ease;
}
.menu-btn__burger::before {
transform: translateY(-8px);
}
.menu-btn__burger::after {
transform: translateY(8px);
}
.menu-btn.active .menu-btn__burger {
background: transparent;
}
.menu-btn.active .menu-btn__burger::before {
transform: rotate(45deg);
}
.menu-btn.active .menu-btn__burger::after {
transform: rotate(-45deg);
}
/* Hero Section */
.home {
min-height: 100vh;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
padding-top: 100px;
}
.home .container {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
z-index: 1;
}
.hero-content {
flex: 1;
max-width: 600px;
}
.hero-subtitle {
font-size: 1.2rem;
color: var(--primary);
margin-bottom: 15px;
display: inline-block;
font-weight: 500;
}
.hero-title {
font-size: 4rem;
margin-bottom: 20px;
line-height: 1.2;
background: linear-gradient(to right, var(--primary), var(--accent));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero-role {
font-size: 1.8rem;
margin-bottom: 25px;
font-weight: 500;
color: var(--text);
height: 40px;
overflow: hidden;
}
.hero-text {
font-size: 1.1rem;
margin-bottom: 35px;
color: var(--text);
opacity: 0.9;
}
.hero-btns {
display: flex;
gap: 20px;
}
.image-wrapper {
width: 400px;
height: 400px;
position: relative;
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
overflow: hidden;
box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2);
animation: morph 8s ease-in-out infinite;
}
.profile-image {
width: 100%;
height: 100%;
object-fit: cover;
position: relative;
z-index: 1;
}
/* Keep the existing circle animation */
.circle-animation {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 120%;
height: 120%;
border-radius: 50%;
border: 2px dashed var(--primary);
opacity: 0.5;
animation: rotate 20s linear infinite;
z-index: 2;
}
/* Morphing animation */
@keyframes morph {
0% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
50% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
100% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
}
/* Rotation animation */
@keyframes rotate {
0% { transform: translate(-50%, -50%) rotate(0deg); }
100% { transform: translate(-50%, -50%) rotate(360deg); }
}
.hero-contact {
position: absolute;
bottom: 40px;
left: 0;
width: 100%;
display: flex;
justify-content: center;
gap: 30px;
z-index: 1;
}
.contact-item {
display: flex;
align-items: center;
gap: 10px;
background: var(--card);
padding: 10px 20px;
border-radius: 50px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.contact-item:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.contact-item i {
color: var(--primary);
font-size: 1.2rem;
}
/* About Section */
.about-content {
display: flex;
gap: 50px;
align-items: center;
}
.about-text {
flex: 1;
}
.about-text h3 {
font-size: 1.8rem;
margin-bottom: 20px;
color: var(--text);
}
.about-text p {
margin-bottom: 25px;
color: var(--text);
opacity: 0.9;
line-height: 1.8;
}
.about-stats {
display: flex;
gap: 30px;
margin: 30px 0;
}
.stat-item {
text-align: center;
}
.stat-item h4 {
font-size: 2.5rem;
color: var(--primary);
margin-bottom: 5px;
}
.stat-item p {
font-size: 0.9rem;
color: var(--text);
opacity: 0.7;
}
.about-btns {
display: flex;
gap: 20px;
margin-top: 30px;
}
.about-skills {
flex: 1;
background: var(--card);
padding: 40px;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.about-skills h3 {
font-size: 1.8rem;
margin-bottom: 30px;
color: var(--text);
}
.skills-grid {
display: grid;
gap: 20px;
}
.skill-item {
margin-bottom: 10px;
}
.skill-info {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
.skill-info span:first-child {
font-weight: 500;
}
.skill-info span:last-child {
color: var(--primary);
font-weight: 600;
}
.skill-bar {
width: 100%;
height: 8px;
background: var(--border);
border-radius: 10px;
overflow: hidden;
}
.skill-progress {
height: 100%;
background: linear-gradient(to right, var(--primary), var(--accent));
border-radius: 10px;
width: 0;
transition: width 1.5s ease;
}
/* Services Section */
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}
.service-card {
background: var(--card);
padding: 40px 30px;
border-radius: 15px;
transition: all 0.3s ease;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
z-index: 1;
}
.service-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--primary), var(--secondary));
opacity: 0;
transition: all 0.3s ease;
z-index: -1;
}
.service-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}
.service-card:hover::before {
opacity: 0.1;
}
.service-icon {
width: 70px;
height: 70px;
background: linear-gradient(135deg, var(--primary), var(--secondary));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 25px;
color: white;
font-size: 1.5rem;
box-shadow: 0 10px 20px rgba(67, 97, 238, 0.3);
}
.service-card h3 {
font-size: 1.5rem;
margin-bottom: 15px;
color: var(--text);
}
.service-card p {
color: var(--text);
opacity: 0.8;
margin-bottom: 20px;
line-height: 1.7;
}
.service-link {
display: inline-flex;
align-items: center;
gap: 5px;
color: var(--primary);
font-weight: 600;
transition: all 0.3s ease;
}
.service-link:hover {
color: var(--accent);
transform: translateX(5px);
}
/* Reviews Section */
.reviews {
background: var(--card);
position: relative;
}
.reviews::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml;utf8,
');
background-size: cover;
z-index: -1;
}
.reviews-slider {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}
.review-card {
background: var(--bg);
border-radius: 15px;
padding: 30px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.review-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}
.quote-icon {
font-size: 2rem;
color: var(--primary);
opacity: 0.5;
margin-bottom: 20px;
}
.review-text {
font-style: italic;
margin-bottom: 25px;
color: var(--text);
line-height: 1.8;
}
.review-author {
display: flex;
align-items: center;
gap: 15px;
}
.review-author img {
width: 60px;
height: 60px;
border-radius: 50%;
object-fit: cover;
}
.author-info h4 {
font-size: 1.1rem;
margin-bottom: 5px;
color: var(--text);
}
.author-info span {
font-size: 0.9rem;
color: var(--text);
opacity: 0.7;
display: block;
margin-bottom: 5px;
}
.stars {
color: #fbbf24;
font-size: 0.9rem;
}
/* Contact Section */
.contact-content {
display: flex;
gap: 50px;
}
.contact-form {
flex: 1;
background: var(--card);
padding: 40px;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.form-group {
margin-bottom: 25px;
}
.form-group input,
.form-group textarea {
width: 100%;
padding: 15px;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--bg);
color: var(--text);
font-family: 'Montserrat', sans-serif;
transition: all 0.3s ease;
}
.form-group input:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
}
.form-group textarea {
min-height: 150px;
resize: vertical;
}
.contact-info {
flex: 1;
}
.info-card {
display: flex;
gap: 20px;
background: var(--card);
padding: 30px;
border-radius: 15px;
margin-bottom: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.info-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}
.info-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--primary), var(--secondary));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5rem;
flex-shrink: 0;
}
.info-content h3 {
font-size: 1.3rem;
margin-bottom: 10px;
color: var(--text);
}
.info-content p {
color: var(--text);
opacity: 0.8;
}
.social-links {
display: flex;
gap: 15px;
margin-top: 30px;
}
.social-link {
width: 45px;
height: 45px;
background: var(--card);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--text);
font-size: 1.2rem;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.social-link:hover {
background: var(--primary);
color: white;
transform: translateY(-5px);
}
/* Footer */
.footer {
background: var(--card);
padding: 80px 0 30px;
position: relative;
}
.footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(to right, var(--primary), var(--accent));
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 40px;
margin-bottom: 60px;
}
.footer-logo .logo {
font-size: 1.8rem;
margin-bottom: 20px;
display: inline-block;
}
.footer-logo p {
color: var(--text);
opacity: 0.8;
line-height: 1.8;
}
.footer-links h3 {
font-size: 1.3rem;
margin-bottom: 25px;
color: var(--text);
position: relative;
padding-bottom: 10px;
}
.footer-links h3::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 50px;
height: 2px;
background: var(--primary);
}
.footer-links ul {
list-style: none;
}
.footer-links li {
margin-bottom: 15px;
}
.footer-links a {
color: var(--text);
opacity: 0.8;
transition: all 0.3s ease;
display: inline-block;
}
.footer-links a:hover {
color: var(--primary);
transform: translateX(5px);
opacity: 1;
}
.newsletter-form {
display: flex;
margin-top: 20px;
}
.newsletter-form input {
flex: 1;
padding: 12px 15px;
border: 1px solid var(--border);
border-radius: 50px 0 0 50px;
background: var(--bg);
color: var(--text);
outline: none;
}
.newsletter-form button {
width: 50px;
background: var(--primary);
color: white;
border: none;
border-radius: 0 50px 50px 0;
cursor: pointer;
transition: all 0.3s ease;
}
.newsletter-form button:hover {
background: var(--secondary);
}
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 30px;
border-top: 1px solid var(--border);
}
.footer-bottom p {
color: var(--text);
opacity: 0.7;
font-size: 0.9rem;
}
.footer-social {
display: flex;
gap: 15px;
}
.footer-social a {
color: var(--text);
opacity: 0.7;
transition: all 0.3s ease;
}
.footer-social a:hover {
color: var(--primary);
opacity: 1;
}
/* Back to Top Button */
.back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
width: 50px;
height: 50px;
background: var(--primary);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
z-index: 999;
box-shadow: 0 5px 15px rgba(67, 97, 238, 0.3);
}
.back-to-top.active {
opacity: 1;
visibility: visible;
}
.back-to-top:hover {
background: var(--secondary);
transform: translateY(-5px);
}
/* Animations */
@keyframes morph {
0% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
50% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
100% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
}
@keyframes rotate {
0% { transform: translate(-50%, -50%) rotate(0deg); }
100% { transform: translate(-50%, -50%) rotate(360deg); }
}
/* Responsive Styles */
@media (max-width: 992px) {
.home .container {
flex-direction: column;
text-align: center;
}
.hero-content {
max-width: 100%;
margin-bottom: 50px;
}
.hero-btns {
justify-content: center;
}
.about-content {
flex-direction: column;
}
.contact-content {
flex-direction: column;
}
}
@media (max-width: 768px) {
.menu-btn {
display: block;
}
.navbar {
position: fixed;
top: 0;
left: -100%;
width: 80%;
height: 100vh;
background: var(--card);
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 0;
transition: all 0.5s ease;
box-shadow: 5px 0 15px rgba(0, 0, 0, 0.1);
}
.navbar.active {
left: 0;
}
.navbar a {
margin: 15px 0;
font-size: 1.2rem;
}
.hero-title {
font-size: 3rem;
}
.hero-role {
font-size: 1.5rem;
}
.hero-contact {
flex-direction: column;
align-items: center;
gap: 15px;
bottom: 20px;
}
.contact-item {
width: max-content;
}
.footer-content {
grid-template-columns: 1fr;
}
}
@media (max-width: 576px) {
.section-title {
font-size: 2rem;
}
.hero-title {
font-size: 2.5rem;
}
.hero-btns {
flex-direction: column;
gap: 15px;
}
.about-stats {
flex-direction: column;
gap: 20px;
}
.about-btns {
flex-direction: column;
gap: 15px;
}
.footer-bottom {
flex-direction: column;
gap: 20px;
text-align: center;
}
}
