*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } img, video, iframe { max-width:100%; height:auto; } :root { --bg:#ffffff; --bg2:#f4f7fb; --bg3:#e8eef6; --blue:#1a56db; --blue-pale:#eff6ff; --navy:#0f1f40; --text:#1a2236; --text2:#4b5675; --text3:#8a94a8; --border:#e2e8f0; --card:#ffffff; --shadow:0 2px 16px rgba(26,86,219,0.08); --shadow-lg:0 8px 40px rgba(26,86,219,0.14); } [data-theme="dark"] { --bg:#0f1419; --bg2:#1a202c; --bg3:#2d3748; --blue:#3b82f6; --blue-pale:#1e3a8a; --navy:#f0f4f8; --text:#e2e8f0; --text2:#cbd5e1; --text3:#94a3b8; --border:#2d3748; --card:#1a202c; --shadow:0 2px 16px rgba(0,0,0,0.3); --shadow-lg:0 8px 40px rgba(0,0,0,0.4); } html { scroll-behavior: smooth; } body { font-family:'Plus Jakarta Sans',sans-serif; background:var(--bg); color:var(--text); overflow-x:hidden; line-height:1.6; transition: background 0.3s, color 0.3s; } /* NAV */ nav { position:fixed; top:0; left:0; right:0; z-index:100; padding:0 5rem; height:68px; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; background:rgba(255,255,255,0.96); backdrop-filter:blur(16px); border-bottom:1px solid var(--border); box-shadow:0 1px 12px rgba(0,0,0,0.06); transition: all 0.3s; } nav .nav-logo { order:0; } nav .nav-toggle { order:2; } nav .nav-links { order:1; } nav .subscribe-btn { order:3; margin-left:0.5rem; } @media (max-width:768px) { .btn-primary { margin-left:0.5rem; padding:0.5rem 0.8rem; font-size:0.88rem; } .subscribe-btn { margin-left:0.5rem; } .hero { padding:6rem 1.5rem 3rem; } .hero-grid { grid-template-columns:1fr; gap:2rem; text-align:center; } .hero-card { width:100%; max-width:320px; margin:0 auto; } .hero-card-img { height:auto; max-height:380px; } .hero-btns { justify-content:center; } .hero-sub { margin:0 auto 2rem; } } [data-theme="dark"] nav { background:rgba(26,32,44,0.96); } .visitor-bar { position:fixed;top:68px;left:0;right:0;z-index:99; display:flex;align-items:center;justify-content:center; padding:0.35rem 1rem; background:rgba(255,255,255,0.85); backdrop-filter:blur(12px); border-bottom:1px solid var(--border); font-size:0.75rem;color:var(--text2);font-weight:600; gap:0.4rem;letter-spacing:0.02em; transition:background 0.3s; } [data-theme="dark"] .visitor-bar { background:rgba(26,32,44,0.85); } .visitor-bar .vb-dot { width:6px;height:6px;border-radius:50%;background:#22c55e;animation:blink 2s infinite;flex-shrink:0; } .visitor-bar .vb-num { color:var(--blue);font-weight:800; } .nav-logo { font-family:'Fraunces',serif; font-weight:800; font-size:1.4rem; color:var(--blue); text-decoration:none; } .nav-logo span { color:var(--navy); } .nav-links { display:flex; gap:2.5rem; list-style:none; } /* mobile dropdown support */ .nav-links.open { display:flex; position:absolute; top:100%; left:0; right:0; flex-direction:column; background:var(--bg); padding:1rem 2rem; gap:1.2rem; box-shadow:0 4px 12px rgba(0,0,0,0.1); } .nav-links.open a { font-size:1rem; } .nav-toggle.open { transform:rotate(90deg); } .nav-links a { color:var(--text2); text-decoration:none; font-size:0.88rem; font-weight:600; transition:color 0.2s; } .nav-links a:hover { color:var(--blue); } .btn-primary { display:inline-flex; align-items:center; gap:0.5rem; background:var(--blue); color:#fff; font-weight:700; font-size:0.85rem; padding:0.6rem 1.4rem; border-radius:8px; text-decoration:none; transition:all 0.25s; border:none; cursor:pointer; font-family:'Plus Jakarta Sans',sans-serif; } .subscribe-btn .subscribe-icon { display:inline; } .subscribe-btn .subscribe-text { display:inline; } @media (max-width:768px) { .subscribe-btn .subscribe-text { display:none; } .subscribe-btn { padding:0.6rem 0.9rem; } } .btn-primary:hover { transform:translateY(-2px); box-shadow:0 4px 16px rgba(26,86,219,0.4); } .btn-primary:active { transform:scale(0.98); } .btn-secondary { display:inline-flex; align-items:center; gap:0.5rem; background:transparent; color:var(--blue); font-weight:700; font-size:0.88rem; padding:0.65rem 1.4rem; border-radius:8px; text-decoration:none; border:2px solid var(--blue); transition:all 0.25s; font-family:'Plus Jakarta Sans',sans-serif; cursor:pointer; } .btn-secondary:hover { background:var(--blue-pale); } /* NAV TOGGLE */ .nav-toggle { display:none; background:transparent; border:none; font-size:1.4rem; cursor:pointer; color:var(--blue); } /* show toggle on mobile */ @media (max-width:768px) { .nav-toggle { display:block; } .nav-links.open { display:flex; } } /* HERO */ .hero { min-height:100vh; display:flex; align-items:center; padding:9rem 5rem 5rem; background:linear-gradient(160deg,#ffffff 0%,#eff6ff 50%,#dbeafe 100%); position:relative; overflow:hidden; } [data-theme="dark"] .hero { background:linear-gradient(160deg,#0f1419 0%,#1a2c4a 50%,#162e4a 100%); } .hero::before { content:''; position:absolute; top:-100px; right:-100px; width:600px; height:600px; background:radial-gradient(circle,rgba(59,130,246,0.12) 0%,transparent 70%); border-radius:50%; pointer-events:none; } .hero-grid { display:grid; grid-template-columns:1fr auto; gap:6rem; align-items:center; max-width:1200px; margin:0 auto; width:100%; position:relative; z-index:1; } .hero-badge { display:inline-flex; align-items:center; gap:0.5rem; background:#fff; border:1px solid #bfdbfe; color:var(--blue); padding:0.4rem 1rem; border-radius:100px; font-size:0.78rem; font-weight:700; margin-bottom:1.5rem; box-shadow:0 2px 8px rgba(26,86,219,0.1); animation:fadeInUp 0.8s ease; } .badge-dot { width:7px; height:7px; background:#22c55e; border-radius:50%; animation:blink 2s infinite; } @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} } @keyframes fadeInUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:none} } @keyframes slideInRight { from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:none} } @keyframes floatUp { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} } .hero h1 { font-family:'Fraunces',serif; font-size:clamp(2.6rem,4.5vw,4rem); font-weight:800; line-height:1.08; margin-bottom:1.2rem; color:var(--navy); letter-spacing:-0.03em; animation:fadeInUp 0.8s ease 0.1s both; } .hero h1 .blue { color:var(--blue); background:linear-gradient(135deg,var(--blue),#6366f1); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } .hero-sub { font-size:1.05rem; color:var(--text2); line-height:1.75; margin-bottom:2.5rem; max-width:520px; animation:fadeInUp 0.8s ease 0.2s both; } .hero-btns { display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:3rem; animation:fadeInUp 0.8s ease 0.3s both; } .hero-stats { display:inline-flex; gap:2.5rem; padding:1.5rem 2rem; background:#fff; border-radius:14px; box-shadow:var(--shadow); border:1px solid var(--border); animation:fadeInUp 0.8s ease 0.4s both; } [data-theme="dark"] .hero-stats { background:var(--card); } @media (max-width:768px) { .hero-stats { flex-direction:column; align-items:center; gap:1rem; } } .stat-item { text-align:center; } .stat-num { font-family:'Fraunces',serif; font-size:1.9rem; font-weight:800; color:var(--blue); line-height:1; } .stat-label { font-size:0.72rem; color:var(--text3); font-weight:600; margin-top:0.3rem; text-transform:uppercase; letter-spacing:0.06em; } .stat-div { width:1px; background:var(--border); align-self:stretch; } .hero-card { width:280px; background:#fff; border-radius:24px; box-shadow:var(--shadow-lg); border:1px solid var(--border); overflow:hidden; animation:slideInRight 0.8s ease; } /* ensure the card never exceeds its container on tiny screens */ .hero-card { max-width:100%; } [data-theme="dark"] .hero-card { background:var(--card); } .hero-card-img { width:100%; height:auto; max-height:420px; background:linear-gradient(135deg,#dbeafe,#eff6ff); display:block; object-fit:contain; object-position:center top; } .hero-card-info { padding:1.2rem; border-top:1px solid var(--border); } .hero-card-name { font-family:'Fraunces',serif; font-weight:700; font-size:1rem; color:var(--navy); } .hero-card-role { font-size:0.78rem; color:var(--text2); margin-top:0.2rem; } .hero-card-tag { display:inline-flex; align-items:center; gap:0.3rem; background:#dcfce7; color:#166534; font-size:0.72rem; font-weight:700; padding:0.25rem 0.6rem; border-radius:100px; margin-top:0.6rem; } /* SECTIONS */ section { padding:4rem 5rem; } .section-inner { max-width:1200px; margin:0 auto; } .chip { display:inline-flex; background:var(--blue-pale); color:var(--blue); font-size:0.72rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; padding:0.3rem 0.9rem; border-radius:100px; margin-bottom:1rem; } .section-title { font-family:'Fraunces',serif; font-size:clamp(1.8rem,3vw,2.6rem); font-weight:800; color:var(--navy); letter-spacing:-0.03em; line-height:1.1; margin-bottom:0.8rem; } .section-desc { color:var(--text2); font-size:1rem; max-width:540px; line-height:1.7; margin-bottom:3rem; } /* ABOUT */ #about { background:var(--bg2); } .about-grid { display:grid; grid-template-columns:1.3fr 1fr; gap:5rem; align-items:start; } .about-text p { color:var(--text2); line-height:1.8; margin-bottom:1.2rem; font-size:0.97rem; } .about-text strong { color:var(--text); } .cert-pill { display:inline-flex; align-items:center; gap:0.5rem; background:#fff; border:1px solid #bbf7d0; color:#166534; padding:0.5rem 1.1rem; border-radius:8px; font-size:0.82rem; font-weight:700; margin-top:1.2rem; } .exp-list { display:flex; flex-direction:column; } .exp-item { display:flex; gap:1rem; padding:1.1rem 0; border-bottom:1px solid var(--border); } .exp-item:last-child { border-bottom:none; } .exp-dot { width:12px; height:12px; border-radius:50%; background:var(--blue); border:2px solid #fff; box-shadow:0 0 0 3px #bfdbfe; flex-shrink:0; margin-top:4px; animation:floatUp 3s ease-in-out infinite; } .exp-company { font-weight:700; font-size:0.92rem; color:var(--navy); } .exp-role { font-size:0.82rem; color:var(--text2); margin-top:0.15rem; } .exp-period { font-size:0.72rem; color:var(--blue); font-weight:700; margin-top:0.3rem; background:var(--blue-pale); padding:0.15rem 0.5rem; border-radius:4px; display:inline-block; } /* WHY WORK WITH ME */ #why-work { background:var(--bg); } .why-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:2rem; } .why-card { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:2rem; transition:all 0.3s; text-align:center; } .why-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:var(--blue); } .why-icon { font-size:2.5rem; margin-bottom:1rem; } .why-title { font-weight:700; font-size:1.1rem; color:var(--navy); margin-bottom:0.7rem; } .why-desc { font-size:0.9rem; color:var(--text2); line-height:1.6; } /* PROJECTS */ #projects { background:var(--bg2); } .projects-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:2rem; } .project-card { background:var(--card); border:1px solid var(--border); border-radius:14px; overflow:hidden; transition:all 0.3s; } .project-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); } .project-img { width:100%; height:200px; background:linear-gradient(135deg,var(--blue),#6366f1); display:flex; align-items:center; justify-content:center; font-size:3rem; } .project-body { padding:1.5rem; } .project-name { font-family:'Fraunces',serif; font-weight:700; font-size:1.1rem; color:var(--navy); margin-bottom:0.5rem; } .project-desc { font-size:0.9rem; color:var(--text2); margin-bottom:1rem; line-height:1.6; } .project-tags { display:flex; flex-wrap:wrap; gap:0.4rem; margin-bottom:1rem; } .project-tag { background:var(--blue-pale); color:var(--blue); font-size:0.7rem; padding:0.25rem 0.6rem; border-radius:4px; font-weight:600; } .project-link { color:var(--blue); font-weight:700; text-decoration:none; transition:all 0.2s; } .project-link:hover { opacity:0.75; } /* TESTIMONIALS */ #testimonials { background:var(--bg); } .testimonials-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:2rem; } .testimonial-card { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:2rem; transition:all 0.3s; } .testimonial-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); } .testimonial-stars { font-size:1.2rem; margin-bottom:1rem; color:#fbbf24; letter-spacing:0.2rem; } .testimonial-text { font-size:0.95rem; color:var(--text2); margin-bottom:1rem; line-height:1.7; font-style:italic; } .testimonial-author { font-weight:700; color:var(--navy); font-size:0.9rem; } .testimonial-role { font-size:0.8rem; color:var(--text3); margin-top:0.2rem; } /* SKILLS */ #skills { background:var(--bg); } .skills-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1.2rem; } .skill-card { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:1.4rem; transition:all 0.25s; box-shadow:var(--shadow); } .skill-card:hover { border-color:#bfdbfe; transform:translateY(-3px); box-shadow:var(--shadow-lg); } .skill-icon { font-size:1.7rem; margin-bottom:0.7rem; } .skill-name { font-weight:700; font-size:0.92rem; color:var(--navy); margin-bottom:0.5rem; } .skill-tags { display:flex; flex-wrap:wrap; gap:0.4rem; margin-top:0.7rem; } .skill-tag { background:var(--blue-pale); color:var(--blue); font-size:0.7rem; padding:0.2rem 0.6rem; border-radius:4px; font-weight:600; } /* BLOG */ #blog { background:var(--bg2); } /* ── Blog Grid ─────────────────────────────── */ .blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; } @media (max-width:900px) { .blog-grid { grid-template-columns:repeat(2,1fr); } } @media (max-width:600px) { .blog-grid { grid-template-columns:1fr; } } .blog-grid .blog-card.featured { grid-column:1 / -1; flex-direction:row; align-items:stretch; } .blog-grid .blog-card.featured .blog-img-wrap { width:45%; flex-shrink:0; position:relative; overflow:hidden; min-height:240px; } .blog-grid .blog-card.featured .blog-card-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center center; } .blog-grid .blog-card.featured .blog-card-img-ph { position:absolute; inset:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:3rem; background:linear-gradient(135deg,#dbeafe,#eff6ff); } .blog-grid .blog-card.featured .blog-body { padding:2rem 2.2rem; justify-content:center; } .blog-grid .blog-card.featured .blog-title { font-size:1.3rem; line-height:1.35; -webkit-line-clamp:3; } .blog-grid .blog-card.featured .blog-excerpt { -webkit-line-clamp:4; font-size:0.88rem; } .blog-grid .blog-card.featured .featured-badge { display:inline-block; } /* mobile: stack featured card */ @media (max-width:768px) { .blog-grid .blog-card.featured { flex-direction:column; } .blog-grid .blog-card.featured .blog-img-wrap { width:100%; min-height:0; padding-bottom:56.25%; } .blog-grid .blog-card.featured .blog-body { padding:1.4rem 1.5rem; } } .blog-card { background:var(--card); border:1px solid var(--border); border-radius:16px; overflow:hidden; transition:all 0.28s cubic-bezier(.4,0,.2,1); cursor:pointer; display:flex; flex-direction:column; box-shadow:0 1px 4px rgba(15,31,64,0.07); } .blog-card:hover { border-color:#93c5fd; transform:translateY(-5px); box-shadow:0 12px 40px rgba(59,130,246,0.13); } .blog-card-img { width:100%; height:195px; object-fit:cover; object-position:center; display:block; background:var(--bg3); transition:transform 0.4s ease; } .blog-card:hover .blog-card-img { transform:scale(1.03); } .blog-card-img-ph { width:100%; height:195px; background:linear-gradient(135deg,#dbeafe,#eff6ff); display:flex; align-items:center; justify-content:center; font-size:2.5rem; } .blog-img-wrap { overflow:hidden; position:relative; flex-shrink:0; } .blog-body { padding:1.4rem 1.5rem 1.5rem; flex:1; display:flex; flex-direction:column; } .blog-tags { display:flex; gap:0.4rem; flex-wrap:wrap; margin-bottom:0.75rem; align-items:center; } .blog-tag { background:#eff6ff; color:var(--blue); font-size:0.65rem; padding:0.18rem 0.55rem; border-radius:4px; font-weight:800; text-transform:uppercase; letter-spacing:0.04em; } .featured-badge { display:none; background:linear-gradient(135deg,var(--blue),#6366f1); color:#fff; font-size:0.62rem; padding:0.2rem 0.6rem; border-radius:4px; font-weight:800; text-transform:uppercase; letter-spacing:0.06em; } .blog-title { font-family:'Fraunces',serif; font-weight:800; font-size:1.02rem; line-height:1.35; margin-bottom:0.6rem; color:var(--navy); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; letter-spacing:-0.01em; } .blog-excerpt { font-size:0.82rem; color:var(--text2); line-height:1.7; flex:1; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } .blog-meta { display:flex; justify-content:space-between; align-items:center; margin-top:1rem; padding-top:0.9rem; border-top:1px solid var(--border); font-size:0.74rem; color:var(--text3); } .blog-read { color:var(--blue); font-weight:700; font-size:0.75rem; display:flex; align-items:center; gap:0.3rem; } .blog-read::after { content:'→'; transition:transform 0.2s; } .blog-card:hover .blog-read::after { transform:translateX(4px); } .blog-views { font-size:0.72rem; color:var(--text3); font-weight:600; } .loading-msg { grid-column:1/-1; text-align:center; color:var(--text2); padding:3rem; } /* BLOG MODAL */ .modal-overlay { display:none; position:fixed; inset:0; background:rgba(15,31,64,0.6); backdrop-filter:blur(6px); z-index:200; align-items:center; justify-content:center; padding:1.5rem; } .modal-overlay.open { display:flex; animation:fadeIn 0.3s ease; } @keyframes fadeIn { from{opacity:0} to{opacity:1} } .modal-box { background:var(--card); border-radius:20px; max-width:800px; width:100%; max-height:90vh; overflow-y:auto; box-shadow:0 30px 80px rgba(15,31,64,0.25); animation:modalIn 0.3s ease; } @keyframes modalIn { from{opacity:0;transform:translateY(20px) scale(0.97)} to{opacity:1;transform:none} } .modal-bar { position:sticky; top:0; display:flex; justify-content:space-between; align-items:center; padding:1rem 1.5rem; background:rgba(255,255,255,0.97); backdrop-filter:blur(8px); border-bottom:1px solid var(--border); z-index:10; } [data-theme="dark"] .modal-bar { background:rgba(26,32,44,0.97); } .modal-bar-title { font-weight:700; font-size:0.85rem; color:var(--text2); } .modal-close-btn { width:36px; height:36px; border-radius:50%; background:var(--bg2); border:1px solid var(--border); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:1rem; color:var(--text2); transition:all 0.2s; } .modal-close-btn:hover { background:var(--bg3); color:var(--navy); } .modal-hero-img { width:100%; height:280px; object-fit:cover; display:block; } .modal-hero-ph { width:100%; height:200px; background:linear-gradient(135deg,#dbeafe,#eff6ff); display:flex; align-items:center; justify-content:center; font-size:4rem; } .modal-content { padding:2rem 2.5rem 3rem; } .modal-tags { display:flex; gap:0.4rem; flex-wrap:wrap; margin-bottom:1rem; } .modal-tag { background:var(--blue-pale); color:var(--blue); font-size:0.7rem; padding:0.25rem 0.7rem; border-radius:4px; font-weight:700; text-transform:uppercase; } .modal-title { font-family:'Fraunces',serif; font-size:1.8rem; font-weight:800; color:var(--navy); line-height:1.2; margin-bottom:0.5rem; letter-spacing:-0.02em; } .modal-date { font-size:0.8rem; color:var(--text3); margin-bottom:1.5rem; } .modal-read-full { display:block; text-align:center; background:var(--blue); color:#fff; font-weight:700; font-size:0.92rem; padding:0.85rem 1.5rem; border-radius:10px; text-decoration:none; margin-bottom:1.5rem; transition:all 0.2s; letter-spacing:0.01em; } .modal-read-full:hover { background:#1d4ed8; transform:translateY(-1px); box-shadow:0 4px 16px rgba(59,130,246,0.35); } .modal-yt-box { display:flex; align-items:center; gap:1rem; background:#fff7f7; border:1px solid #fee2e2; border-radius:12px; padding:1rem 1.2rem; margin-bottom:1.5rem; text-decoration:none; transition:background 0.2s; } .modal-yt-box:hover { background:#fee2e2; } .modal-yt-icon { width:44px; height:44px; background:#ff0000; border-radius:10px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.2rem; flex-shrink:0; } .modal-yt-text .label { font-size:0.72rem; color:#9b1c1c; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; } .modal-yt-text .title { font-size:0.9rem; font-weight:700; color:#1a2236; margin-top:0.1rem; } .modal-article { font-size:0.95rem; color:var(--text2); line-height:1.85; } .modal-article h1,.modal-article h2 { font-family:'Fraunces',serif; color:var(--navy); margin:2rem 0 0.8rem; font-size:1.4rem; letter-spacing:-0.02em; } .modal-article h3 { font-family:'Fraunces',serif; color:var(--navy); margin:1.5rem 0 0.6rem; font-size:1.1rem; } .modal-article p { margin-bottom:1rem; } .modal-article pre { background:var(--bg2); padding:1.2rem; border-radius:10px; overflow-x:auto; font-size:0.85rem; margin:1rem 0; border:1px solid var(--border); } .modal-article code { background:var(--bg2); padding:0.1rem 0.4rem; border-radius:4px; font-size:0.85rem; color:var(--blue); } .modal-article pre code { background:none; color:inherit; padding:0; } .modal-article ul,.modal-article ol { padding-left:1.5rem; margin:0.8rem 0; } .modal-article li { margin-bottom:0.4rem; } .modal-article blockquote { border-left:3px solid var(--blue); padding-left:1rem; color:var(--text2); font-style:italic; margin:1rem 0; } .modal-article img { max-width:100%; border-radius:8px; margin:1rem 0; } .modal-article a { color:var(--blue); font-weight:600; } /* YOUTUBE */ #youtube { background:var(--bg); } .yt-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1.4rem; } .yt-card { background:var(--card); border:1px solid var(--border); border-radius:14px; overflow:hidden; transition:all 0.25s; text-decoration:none; color:inherit; box-shadow:var(--shadow); display:block; } .yt-card:hover { border-color:#fecaca; transform:translateY(-4px); box-shadow:0 12px 40px rgba(220,38,38,0.1); } .yt-thumb { position:relative; width:100%; padding-bottom:56.25%; background:var(--bg3); overflow:hidden; } .yt-thumb img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 0.3s; display:block; } .yt-card:hover .yt-thumb img { transform:scale(1.04); } .yt-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.2); opacity:0; transition:opacity 0.25s; } .yt-card:hover .yt-overlay { opacity:1; } .yt-play { width:52px; height:52px; background:#ff0000; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.3rem; box-shadow:0 4px 20px rgba(0,0,0,0.4); } .yt-body { padding:1.1rem; } .yt-title { font-weight:700; font-size:0.88rem; line-height:1.45; color:var(--navy); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:0.4rem; min-height:2.6rem; } .yt-date { font-size:0.76rem; color:var(--text3); } /* SUBSCRIBE */ #subscribe { background:var(--blue); padding:4rem 5rem; color:#fff; } .sub-inner { max-width:620px; margin:0 auto; text-align:center; } .sub-chip { display:inline-flex; background:rgba(255,255,255,0.15); color:#fff; font-size:0.72rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; padding:0.3rem 0.9rem; border-radius:100px; margin-bottom:1rem; } #subscribe .section-title { color:#fff; } #subscribe .section-desc { color:rgba(255,255,255,0.85); margin:0 auto 2rem; } .sub-form { display:flex; gap:0.8rem; } .sub-input { flex:1; background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.3); color:#fff; padding:0.85rem 1.2rem; border-radius:8px; font-family:'Plus Jakarta Sans',sans-serif; font-size:0.9rem; outline:none; transition:all 0.2s; } .sub-input::placeholder { color:rgba(255,255,255,0.6); } [data-theme="dark"] .sub-input { background:rgba(255,255,255,0.1); } .sub-input:focus { background:rgba(255,255,255,0.2); border-color:rgba(255,255,255,0.6); } .btn-white { background:#fff; color:var(--blue); font-weight:700; font-size:0.88rem; padding:0.85rem 1.8rem; border-radius:8px; border:none; cursor:pointer; font-family:'Plus Jakarta Sans',sans-serif; transition:all 0.2s; white-space:nowrap; } .btn-white:hover { background:#dbeafe; } /* CTA SECTION */ #cta { background:linear-gradient(135deg,var(--blue),#6366f1); padding:4rem 5rem; color:#fff; text-align:center; } .cta-inner { max-width:700px; margin:0 auto; } .cta-subtitle { font-size:0.85rem; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; opacity:0.9; margin-bottom:1rem; } .cta-title { font-family:'Fraunces',serif; font-size:2.2rem; font-weight:800; margin-bottom:1rem; line-height:1.2; } .cta-desc { font-size:1.05rem; opacity:0.95; margin-bottom:2rem; line-height:1.7; } .cta-btns { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; } .btn-cta-primary { background:#fff; color:var(--blue); padding:0.9rem 2rem; border-radius:10px; font-weight:700; text-decoration:none; transition:all 0.3s; border:none; cursor:pointer; font-family:'Plus Jakarta Sans',sans-serif; font-size:0.95rem; } .btn-cta-primary:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,0.2); } .btn-cta-secondary { background:transparent; color:#fff; padding:0.9rem 2rem; border:2px solid #fff; border-radius:10px; font-weight:700; text-decoration:none; transition:all 0.3s; cursor:pointer; font-family:'Plus Jakarta Sans',sans-serif; font-size:0.95rem; } .btn-cta-secondary:hover { background:rgba(255,255,255,0.1); } /* CONTACT */ #contact { background:var(--bg2); } .contact-grid { display:grid; grid-template-columns:1fr 1.2fr; gap:5rem; } .contact-links { display:flex; flex-direction:column; gap:1rem; } .contact-card { display:flex; align-items:center; gap:1rem; padding:1.1rem 1.3rem; background:var(--card); border:1px solid var(--border); border-radius:12px; text-decoration:none; color:var(--text); transition:all 0.25s; box-shadow:var(--shadow); } .contact-card:hover { border-color:#bfdbfe; transform:translateX(5px); box-shadow:var(--shadow-lg); } .contact-icon { width:42px; height:42px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0; } .contact-lbl { font-size:0.72rem; color:var(--text3); font-weight:600; margin-bottom:0.15rem; } .contact-val { font-weight:700; font-size:0.87rem; color:var(--navy); } .contact-form { display:flex; flex-direction:column; gap:0.9rem; } .form-group { display:flex; flex-direction:column; gap:0.4rem; } .form-lbl { font-size:0.8rem; font-weight:700; color:var(--text2); } .form-ctrl { background:var(--card); border:1px solid var(--border); color:var(--text); padding:0.8rem 1rem; border-radius:8px; font-family:'Plus Jakarta Sans',sans-serif; font-size:0.9rem; outline:none; transition:border-color 0.2s, box-shadow 0.2s; width:100%; } .form-ctrl:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(26,86,219,0.1); } .form-ctrl::placeholder { color:var(--text3); } textarea.form-ctrl { resize:vertical; min-height:120px; } /* FOOTER */ .form-success { background:#dcfce7; color:#166534; padding:1rem; border-radius:8px; text-align:center; font-weight:700; display:none; animation:slideInUp 0.3s ease; } .form-success.show { display:block; } /* FOOTER */ footer { background:var(--navy); padding:2.5rem 5rem; display:flex; justify-content:space-between; align-items:center; } .footer-logo { font-family:'Fraunces',serif; font-weight:800; font-size:1.2rem; color:#fff; } .footer-copy { font-size:0.8rem; color:rgba(255,255,255,0.4); } .footer-hashnode { font-size:0.8rem; color:rgba(255,255,255,0.5); margin-bottom:0.5rem; } .footer-hashnode a { color:rgba(255,255,255,0.8); font-weight:600; text-decoration:none; } .footer-hashnode a:hover { color:#fff; } .footer-links { display:flex; gap:1.5rem; } .footer-links a { color:rgba(255,255,255,0.5); text-decoration:none; font-size:0.82rem; font-weight:600; transition:color 0.2s; } .footer-links a:hover { color:#fff; } /* FADE */ .fade-up { opacity:0; transform:translateY(20px); transition:opacity 0.5s ease, transform 0.5s ease; } .fade-up.visible { opacity:1; transform:none; } /* Safety fallback — if observer never fires, reveal after 0.8s */ @keyframes fadeUpFallback { to { opacity:1; transform:none; } } .fade-up { animation:fadeUpFallback 0.5s ease 0.8s forwards; } .fade-up.visible { animation:none; } /* MOBILE */ @media (max-width:768px) { nav { padding:0 1.5rem; } .nav-links { display:none; } #tools { padding:3rem 1.5rem !important; } section { padding:3rem 1.5rem; } #subscribe { padding:3rem 1.5rem; } .hero { padding:7rem 1.5rem 4rem; } .hero-grid { grid-template-columns:1fr; gap:2rem; } .hero-sub { max-width:100%; } .hero-card { width:100%; max-width:100%; display:flex; flex-direction:row; margin:0; border-radius:16px; } .hero-card-img { height:120px; width:120px; flex-shrink:0; border-radius:12px 0 0 12px; } .hero-card-info { flex:1; padding:1rem; } .about-grid,.contact-grid { grid-template-columns:1fr; gap:3rem; } .sub-form { flex-direction:column; } footer { flex-direction:column; gap:1rem; text-align:center; padding:2rem 1.5rem; } .blog-grid { grid-template-columns:1fr; } /* featured card mobile handled above */ .modal-content { padding:1.5rem; } .modal-title { font-size:1.4rem; } #cta { padding:4rem 1.5rem; } .projects-grid,.why-grid,.testimonials-grid { grid-template-columns:1fr; gap:3rem; } .cta-btns { flex-direction:column; } /* smaller phones */ @media (max-width:480px) { .hero h1 { font-size:1.8rem; } .hero-sub { font-size:0.85rem; max-width:100%; line-height:1.6; margin-bottom:1.5rem; } .hero-card { flex-direction:column; width:100%; } .hero-card-img { width:100%; height:150px; border-radius:12px 12px 0 0; } .hero-card-info { padding:1rem; } .hero-stats { flex-direction:column; gap:1.2rem; width:100%; } .btn-primary, .btn-secondary { padding:0.55rem 0.8rem; font-size:0.82rem; } .stat-item .stat-num { font-size:1.3rem; } .stat-div { display:none; } } } /* PAGINATION */ .pagination { display:flex; justify-content:center; align-items:center; gap:0.5rem; margin-top:2.5rem; flex-wrap:wrap; } .page-btn { min-width:40px; height:40px; padding:0 0.6rem; border-radius:8px; border:1px solid var(--border); background:var(--card); color:var(--text2); font-family:'Plus Jakarta Sans',sans-serif; font-size:0.88rem; font-weight:600; cursor:pointer; transition:all 0.2s; display:flex; align-items:center; justify-content:center; } .page-btn:hover { border-color:var(--blue); color:var(--blue); background:var(--blue-pale); } .page-btn.active { background:var(--blue); color:#fff; border-color:var(--blue); box-shadow:0 2px 8px rgba(26,86,219,0.3); } .page-btn:disabled { opacity:0.4; cursor:not-allowed; pointer-events:none; } .page-ellipsis { color:var(--text3); font-size:0.9rem; padding:0 0.2rem; }
Open to freelance & consulting

Hi, I'm
Nishant Gupta

Full Stack Developer (.NET, Angular & Azure) with 9+ years of experience building scalable enterprise apps. Creator of TechYatra — 230+ tutorials in Hindi on YouTube.

📖 Read Blog ▶ Watch Videos
9+
Years Exp.
230+
YT Videos
Azure
Certified ☁️
Nishant Gupta
Nishant Gupta
Full Stack Developer · .NET · Angular · Azure
🟢 Available for work
Why Work With Me
I deliver production-grade software, mentor teams, and scale systems on cloud.
⚙️
Full-Stack Delivery
From API design to polished frontend — practical, testable, maintainable code.
☁️
Cloud-Native
Azure + CI/CD experience for resilient, secure production deployments.
📚
Developer Advocate
230+ video tutorials, clear documentation, and developer-first thinking.
Ready to Build Something Amazing?
Let's ship your next product — faster.
I help startups and enterprises design scalable systems and ship production-ready features.
📧 Get In Touch 💼 Connect on LinkedIn
Nishant Gupta
About Me

Building software,
teaching the world

I'm a Full Stack Developer (.NET, Angular & Azure) with deep expertise in building scalable enterprise solutions. Over nearly a decade I've delivered robust systems across e-commerce, healthcare and logistics.

I've built systems processing 100,000+ orders/day, integrated AWS and Azure cloud services, and contributed to multi-location development teams.

Beyond coding I run TechYatra on YouTube — teaching .NET to Hindi-speaking developers across India, one video at a time.

🏅 Microsoft Azure Certified
Experience
Senior Full Stack Developer
.NET · Angular · Azure · Microservices
June 2022 — Present
Full Stack Developer
.NET Core · SQL Server · REST APIs
Aug 2021 — June 2022
Full Stack Developer
Angular · ASP.NET · Azure DevOps
Oct 2019 — Jul 2021
Software Developer
.NET · MVC · jQuery · SQL
Mar 2017 — Sep 2019
Tech Stack

Skills & Technologies

9 years across full stack — backend, frontend, cloud and databases.

⚙️
Backend Development
C#ASP.NET CoreWeb APIEF CoreLINQ
🖥️
Frontend
AngularTypeScriptHTMLJavaScript
🗄️
Databases
SQL ServerMySQLMongoDBPostgreSQLCosmos DB
☁️
Cloud & DevOps
AzureAzure FunctionsAWSGitHub
🛠️
Tools
Visual StudioPostmanSSMSSwaggerJira
📊
Data & Analytics
PandasJupyterTeradata
Free Tool

AI Video Slide Generator

Paste your script or topic — AI reads it, builds a custom slide deck with varied layouts and downloads as PNG or JPEG.

Beautiful Slides,
Zero Design Skills

Powered by Gemini AI. Paste any script and get a custom slide deck with varied layouts, colors and content pulled directly from your words.

HOOK
SLIDE
LIST
SLIDE
STATS
SLIDE
OUTRO
SLIDE
QUOTE
SLIDE
✦ AI-powered 10+ slide types ⬇ PNG / JPEG download 💯 100% free
✦ Try the Tool →
Blog

Latest Articles

Technical deep-dives on .NET, Azure, SQL Server — generated from my YouTube videos. Click any article to read it here.

⏳ Loading articles...
View All Articles →
YouTube

Latest Videos

230+ .NET tutorials in Hindi. New videos every week on @tech_yatra.

⏳ Loading videos...
â–¶ Visit YouTube Channel
Newsletter

Stay in the loop

Get notified when I publish new .NET articles or videos.

Contact

Get in touch

Open to full stack freelance projects, consulting, speaking and collaborations.

📧
Email
[email protected]
💼
LinkedIn
nishant-gupta-fse
🐙
GitHub
github.com/techyatra
â–¶
YouTube
@tech_yatra