@import url(‘https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&family=Montserrat:wght@400;600;700;800;900&display=swap’); /* Global Reset & Page Overrides for Full-Width Immersive Experience */ .entry-content, .wp-block-post-content, #page, .site-content, .wp-site-blocks { padding: 0 !important; margin: 0 !important; max-width: 100% !important; width: 100% !important; } #reeni-portfolio-root { font-family: ‘Poppins’, sans-serif; background-color: #0b0c10; color: #c4cfde; line-height: 1.6; margin: 0; padding: 0; width: 100%; overflow-x: hidden; box-sizing: border-box; position: relative; } #reeni-portfolio-root * { box-sizing: border-box; } /* Color Variables */ :root { –reeni-primary: #ff014f; –reeni-primary-glow: rgba(255, 1, 79, 0.35); –reeni-bg-dark: #0e1013; –reeni-card-bg: #14161b; –reeni-card-border: rgba(255, 255, 255, 0.07); –reeni-text-light: #ffffff; –reeni-text-muted: #878e99; –reeni-radius: 14px; } /* Container */ .reeni-container { max-width: 1240px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 2; } /* Top Navigation Bar */ .reeni-navbar { display: flex; align-items: center; justify-content: space-between; padding: 24px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .reeni-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: #ffffff; font-size: 26px; font-weight: 800; letter-spacing: -0.5px; } .reeni-logo-icon { width: 36px; height: 36px; background: linear-gradient(135deg, #ff014f 0%, #d8003f 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 15px rgba(255, 1, 79, 0.4); } .reeni-nav-links { display: flex; align-items: center; gap: 32px; list-style: none; margin: 0; padding: 0; } .reeni-nav-links a { color: #c4cfde; text-decoration: none; font-size: 14px; font-weight: 600; transition: color 0.3s; display: flex; align-items: center; gap: 4px; } .reeni-nav-links a:hover, .reeni-nav-links a.active { color: var(–reeni-primary); } .reeni-nav-socials { display: flex; align-items: center; gap: 12px; } .reeni-social-btn { width: 40px; height: 40px; border-radius: 50%; background: #191b22; display: flex; align-items: center; justify-content: center; color: #c4cfde; text-decoration: none; transition: all 0.3s ease; border: 1px solid rgba(255, 255, 255, 0.08); } .reeni-social-btn:hover { background: var(–reeni-primary); color: #ffffff; box-shadow: 0 4px 15px var(–reeni-primary-glow); transform: translateY(-2px); } .reeni-hamburger-btn { width: 42px; height: 42px; border-radius: 50%; background: var(–reeni-primary); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 15px var(–reeni-primary-glow); border: none; } /* Hero Section */ .reeni-hero { position: relative; padding: 80px 0 100px; min-height: 650px; display: flex; align-items: center; overflow: hidden; } .reeni-hero-bg-text { position: absolute; top: 45%; left: 45%; transform: translate(-30%, -50%); font-size: clamp(60px, 11vw, 150px); font-weight: 900; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.08); text-transform: uppercase; white-space: nowrap; user-select: none; pointer-events: none; z-index: 1; letter-spacing: 4px; } .reeni-hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 40px; align-items: center; position: relative; z-index: 3; } .reeni-hero-content { max-width: 580px; } .reeni-badge { display: inline-block; color: #878e99; font-size: 13px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 20px; } .reeni-hero-title { font-size: clamp(38px, 5vw, 62px); font-weight: 800; line-height: 1.15; color: #ffffff; margin: 0 0 24px 0; font-family: ‘Montserrat’, sans-serif; } .reeni-highlight { color: var(–reeni-primary); position: relative; } .reeni-cursor { display: inline-block; width: 3px; height: 1em; background-color: var(–reeni-primary); margin-left: 4px; vertical-align: -0.1em; animation: reeni-blink 1s infinite; } @keyframes reeni-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } .reeni-hero-desc { color: #878e99; font-size: 16px; line-height: 1.7; margin-bottom: 35px; } .reeni-hero-img-wrap { position: relative; display: flex; justify-content: center; align-items: flex-end; } .reeni-hero-img-backdrop { position: absolute; width: 100%; height: 90%; bottom: 0; background: linear-gradient(180deg, rgba(255, 1, 79, 0.08) 0%, rgba(20, 22, 27, 0.95) 100%); border-radius: 20px; z-index: 1; border: 1px solid rgba(255, 1, 79, 0.15); } .reeni-hero-img { width: 100%; max-width: 440px; height: auto; object-fit: cover; border-radius: 20px; position: relative; z-index: 2; display: block; filter: drop-shadow(0 20px 40px rgba(0,0,0,0.8)); } /* Service Cards Section */ .reeni-services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-bottom: 80px; } .reeni-card { background: var(–reeni-card-bg); border: 1px solid var(–reeni-card-border); border-radius: var(–reeni-radius); padding: 36px 28px; transition: all 0.4s ease; text-align: center; position: relative; overflow: hidden; } .reeni-card::before { content: ”; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, transparent, var(–reeni-primary), transparent); opacity: 0; transition: opacity 0.4s ease; } .reeni-card:hover { transform: translateY(-8px); border-color: rgba(255, 1, 79, 0.4); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6), 0 0 20px rgba(255, 1, 79, 0.12); } .reeni-card:hover::before { opacity: 1; } .reeni-card-icon { width: 60px; height: 60px; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; color: var(–reeni-primary); } .reeni-card-title { color: #ffffff; font-size: 20px; font-weight: 700; margin: 0 0 10px 0; } .reeni-card-subtitle { color: #878e99; font-size: 14px; margin: 0; } /* Experience & Counter Stats */ .reeni-stats-section { display: grid; grid-template-columns: 1fr 1.6fr; gap: 28px; margin-bottom: 110px; } .reeni-big-exp-card { background: var(–reeni-card-bg); border: 1px solid var(–reeni-card-border); border-radius: var(–reeni-radius); padding: 48px 36px; display: flex; align-items: center; gap: 28px; position: relative; } .reeni-big-number { font-size: clamp(64px, 8vw, 96px); font-weight: 900; color: var(–reeni-primary); line-height: 1; font-family: ‘Montserrat’, sans-serif; letter-spacing: -2px; } .reeni-exp-text { font-size: 26px; font-weight: 800; color: #ffffff; line-height: 1.25; } .reeni-stat-boxes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .reeni-stat-box { background: var(–reeni-card-bg); border: 1px solid var(–reeni-card-border); border-radius: var(–reeni-radius); padding: 36px 30px; transition: all 0.3s ease; } .reeni-stat-box:hover { border-color: rgba(255, 1, 79, 0.4); transform: translateY(-4px); } .reeni-stat-num { font-size: 34px; font-weight: 800; color: #ffffff; margin: 0 0 8px 0; font-family: ‘Montserrat’, sans-serif; } .reeni-stat-label { color: #878e99; font-size: 14px; margin: 0; } /* Skills Section */ .reeni-skills-section { padding: 60px 0 100px; } .reeni-skills-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; } .reeni-skill-col-header { display: flex; align-items: center; gap: 16px; margin-bottom: 36px; } .reeni-skill-col-title { font-size: 28px; font-weight: 800; color: #ffffff; margin: 0; } .reeni-line-accent { flex: 1; height: 1px; background: rgba(255, 255, 255, 0.1); position: relative; } .reeni-line-accent::after { content: ”; position: absolute; width: 6px; height: 6px; background: var(–reeni-primary); border-radius: 50%; top: -2.5px; left: 0; } .reeni-skill-item { margin-bottom: 28px; } .reeni-skill-info { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .reeni-skill-name { font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #ffffff; } .reeni-skill-pct { font-size: 13px; font-weight: 700; color: #878e99; } .reeni-progress-track { width: 100%; height: 6px; background: #1e2128; border-radius: 10px; overflow: hidden; position: relative; } .reeni-progress-fill { height: 100%; background: linear-gradient(90deg, #ff014f, #ff3366); border-radius: 10px; position: relative; box-shadow: 0 0 12px rgba(255, 1, 79, 0.5); transition: width 1.2s cubic-bezier(0.1, 0.5, 0.1, 1); } /* Latest Service Section */ .reeni-section-head { text-align: center; max-width: 720px; margin: 0 auto 60px; } .reeni-section-tag { color: var(–reeni-primary); font-size: 13px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 12px; display: inline-block; } .reeni-section-title { font-size: clamp(30px, 4vw, 44px); font-weight: 800; color: #ffffff; line-height: 1.2; margin: 0 0 16px 0; font-family: ‘Montserrat’, sans-serif; } .reeni-section-desc { color: #878e99; font-size: 15px; line-height: 1.7; margin: 0; } .reeni-latest-service-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 50px; align-items: center; margin-bottom: 110px; } .reeni-accordion { display: flex; flex-direction: column; gap: 20px; } .reeni-accordion-item { background: var(–reeni-card-bg); border: 1px solid var(–reeni-card-border); border-radius: var(–reeni-radius); padding: 24px 28px; cursor: pointer; transition: all 0.3s ease; } .reeni-accordion-item.active { border-color: rgba(255, 1, 79, 0.4); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); } .reeni-acc-header { display: flex; justify-content: space-between; align-items: center; } .reeni-acc-title { color: #ffffff; font-size: 20px; font-weight: 700; margin: 0; } .reeni-acc-body { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, margin-top 0.3s ease; color: #878e99; font-size: 14px; line-height: 1.7; } .reeni-accordion-item.active .reeni-acc-body { max-height: 200px; margin-top: 14px; } .reeni-circle-avatar-wrap { position: relative; display: flex; justify-content: center; align-items: center; } .reeni-circle-ring { position: absolute; width: 360px; height: 360px; border-radius: 50%; border: 2px dashed rgba(255, 1, 79, 0.4); animation: reeni-spin 25s linear infinite; } @keyframes reeni-spin { 100% { transform: rotate(360deg); } } .reeni-circle-img { width: 320px; height: 320px; border-radius: 50%; object-fit: cover; position: relative; z-index: 2; border: 6px solid #14161b; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(255, 1, 79, 0.2); } /* Education & Experience Section */ .reeni-education-section { padding: 40px 0 100px; } .reeni-edu-header { display: flex; align-items: center; gap: 16px; margin-bottom: 32px; } .reeni-edu-title { font-size: 26px; font-weight: 800; color: #ffffff; margin: 0; } .reeni-edu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; } .reeni-edu-card { background: var(–reeni-card-bg); border: 1px solid var(–reeni-card-border); border-radius: var(–reeni-radius); padding: 36px 32px; transition: all 0.3s ease; } .reeni-edu-card:hover { border-color: rgba(255, 1, 79, 0.4); transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0,0,0,0.5); } .reeni-edu-role { font-size: 20px; font-weight: 700; color: #ffffff; margin: 0 0 8px 0; } .reeni-edu-period { font-size: 14px; font-weight: 600; color: var(–reeni-primary); margin: 0 0 16px 0; } .reeni-edu-desc { color: #878e99; font-size: 14px; line-height: 1.7; margin: 0; } /* Floating Widgets */ .reeni-chat-bubble { position: fixed; bottom: 30px; right: 30px; width: 54px; height: 54px; background: var(–reeni-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #ffffff; box-shadow: 0 8px 24px rgba(255, 1, 79, 0.45); z-index: 999; cursor: pointer; transition: transform 0.3s; } .reeni-chat-bubble:hover { transform: scale(1.1); } .reeni-back-to-top { position: fixed; bottom: 96px; right: 34px; width: 44px; height: 44px; background: #171920; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #ffffff; z-index: 998; cursor: pointer; transition: all 0.3s; } .reeni-back-to-top:hover { background: var(–reeni-primary); border-color: var(–reeni-primary); transform: translateY(-3px); } /* Responsive Breakpoints */ @media (max-width: 992px) { .reeni-hero-grid { grid-template-columns: 1fr; text-align: center; } .reeni-hero-content { margin: 0 auto; } .reeni-services-grid { grid-template-columns: repeat(2, 1fr); } .reeni-stats-section { grid-template-columns: 1fr; } .reeni-skills-grid { grid-template-columns: 1fr; gap: 40px; } .reeni-latest-service-grid { grid-template-columns: 1fr; } .reeni-circle-avatar-wrap { order: -1; } .reeni-edu-grid { grid-template-columns: 1fr; } .reeni-nav-links { display: none; } } @media (max-width: 600px) { .reeni-services-grid { grid-template-columns: 1fr; } .reeni-stat-boxes { grid-template-columns: 1fr; } .reeni-big-exp-card { flex-direction: column; text-align: center; } }
WEB DESIGNER
HELLO i’m Jane Cooper a
Web Developer.
A personal portfolio is a collection of your work, achievements, and skills that highlights your abilities and professional growth. It serves as a showcase of modern digital craftsmanship.
UI/Ux Design
241 Projects
Web Research
240 Projects
20K+
Our Project Complete
10K+
Our Natural Products
LATEST SERVICE Inspiring The World One Project
Business consulting consultants provide expert advice and guide businesses to help them improve their performance, efficiency, and organizational excellence.
Business consulting consultants provide expert advice and guide businesses to help them elevate their brand presence, maximize design potential, and optimize user engagement.
Delivering cutting-edge web architecture, clean code, responsive layouts, and seamless user experiences across all devices and platforms.
Strategic consultation aimed at scaling digital products, enhancing SEO visibility, and driving business growth with measurable metrics.
EDUCATION & EXPERIENCE Empowering Creativity through
Business consulting consultants provide expert advice and guide businesses to help them improve their performance, efficiency, and organizational
Trainer Marketing
2005 – 2009
A personal portfolio is a curated collection of an individual’s professional work, showcasing their skills, experience and dedication to excellence.
Assistant Director
2010 – 2014
Each project here showcases my commitment to excellence and adaptability, tailored to meet each client’s unique needs and deliver impactful results.
// Typewriter rotation effect (function() { const roles = [“Web Developer.”, “UI/UX Designer.”, “Creative Strategist.”]; let roleIdx = 0; let charIdx = 0; let isDeleting = false; const target = document.getElementById(“reeni-typing-text”); if (!target) return; function type() { const currentRole = roles[roleIdx]; if (isDeleting) { target.textContent = currentRole.substring(0, charIdx – 1); charIdx–; } else { target.textContent = currentRole.substring(0, charIdx + 1); charIdx++; } let speed = isDeleting ? 40 : 90; if (!isDeleting && charIdx === currentRole.length) { speed = 2000; isDeleting = true; } else if (isDeleting && charIdx === 0) { isDeleting = false; roleIdx = (roleIdx + 1) % roles.length; speed = 500; } setTimeout(type, speed); } setTimeout(type, 1000); })();