AVAILABLE FOR OPPORTUNITIES
HELLO, I'M AZREENA
Building digital
experiences with
purpose.
I'm a Software Engineering student passionate about building
thoughtful, practical, and user-friendly digital solutions.
I am a Software Engineering Student|
SOFTWARE ENGINEERING
MALAYSIA
PERSONAL PROFILE01 / 04
FOCUSWeb Development
APPROACHLearn · Build · Improve
{" "} ⌘ Creative Thinking
Always Learning
01 / ABOUT ME
Curious by nature.
Driven to create.
I enjoy turning ideas into digital experiences that are useful, intuitive, and thoughtfully designed.
As a Software Engineering student, I'm developing my skills in programming, web technologies, and problem-solving. I believe good software is not only about how it works, but also how people experience it.
I'm always looking for opportunities to learn, collaborate, and build projects that challenge me to grow.
Let's connect ↗
01⌘Problem Solving
Breaking down challenges and finding practical solutions.
02◇Creative Building
Combining functionality with clean, user-focused design.
03↗Continuous Growth
Learning new tools and improving with every project.
04◎Team Collaboration
Sharing ideas and working together towards better outcomes.
02 / SKILLS & TECHNOLOGIES
Tools I use to
bring ideas to life.
Technologies I'm familiar with and continuously developing through practice and projects.
01</>
Frontend
Building responsive and accessible interfaces.
HTMLCSSJavaScriptReact
02{ }
Programming
Writing structured code and solving problems.
PythonJavaC++
03▤
Backend & Data
Understanding application logic and data management.
SQLREST APIsDatabases
04✳
Tools & Workflow
Organising development and collaborating efficiently.
GitGitHubVS CodeFigma
* Skills listed are editable — keep only the technologies you have actually used.
03 / SELECTED PROJECTS
Things I've
been working on.
01 — WEB APPLICATION2026
DuitWise
A personal finance commitment tracker designed to help users organise bills, savings goals, and payment promises in one clear view.
ReactTypeScriptPython
View on GitHub ↗02 — YOUR PROJECT TYPE2026
Project Two
Replace this with a short explanation of another project, its purpose, and the problem it solves.
TechnologyDevelopment
Ask me about it ↗03 — YOUR PROJECT TYPE2026
Project Three
Showcase another project here. Explain what you built, the tools you used, and what you learned.
DesignProblem Solving
Learn more ↗
Replace the sample projects with your own work, screenshots, and working links.
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Inter:wght@400;500;600;700;800&display=swap');
#az-portfolio {
--bg: #080B12;
--panel: #0D131E;
--panel-light: #111A27;
--text: #EAF0F8;
--muted: #8995A8;
--cyan: #42D9E8;
--violet: #9875FF;
--border: rgba(165,190,220,.12);
position: relative;
isolation: isolate;
overflow: hidden;
width: 100%;
background: #080B12;
background-image:
radial-gradient(ellipse at 12% 8%, rgba(66,217,232,.075), transparent 42%),
radial-gradient(ellipse at 88% 45%, rgba(152,117,255,.055), transparent 40%),
linear-gradient(125deg,#080B12,#0B111C,#0A0D18,#080B12);
background-size: 160% 160%;
animation: azBackground 26s ease-in-out infinite alternate;
color: var(--text);
font-family: 'Inter', sans-serif;
font-size: 15px;
line-height: 1.7;
}
#az-portfolio *, #az-portfolio *::before, #az-portfolio *::after { box-sizing: border-box; }
#az-portfolio a { color: inherit; text-decoration: none; }
#az-portfolio h1, #az-portfolio h2, #az-portfolio h3, #az-portfolio p { margin-top: 0; }
#az-portfolio h1, #az-portfolio h2, #az-portfolio h3 { color: var(--text); font-family: 'Inter',sans-serif; }
#az-portfolio .background-glow { position:absolute; z-index:-1; width:260px; height:260px; border-radius:50%; filter:blur(100px); opacity:.12; pointer-events:none; }
#az-portfolio .glow-one { top:4%; left:-150px; background:var(--cyan); animation:azFloatOne 19s ease-in-out infinite alternate; }
#az-portfolio .glow-two { top:43%; right:-150px; background:var(--violet); animation:azFloatTwo 25s ease-in-out infinite alternate; }
#az-portfolio .background-grid { position:absolute; z-index:-1; inset:0; pointer-events:none; opacity:.10; background-image:linear-gradient(rgba(140,170,200,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(140,170,200,.07) 1px,transparent 1px); background-size:76px 76px; mask-image:linear-gradient(to bottom,black,transparent 75%); }
#az-portfolio .navbar { max-width:1240px; width:calc(100% - 80px); margin:auto; min-height:84px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--border); position:relative; z-index:3; }
#az-portfolio .logo { font-size:27px; font-weight:800; letter-spacing:-2px; }
#az-portfolio .logo span { color:var(--cyan); }
#az-portfolio nav { display:flex; align-items:center; gap:35px; }
#az-portfolio nav a { color:#A7B1C0; font-size:12px; transition:color .25s; }
#az-portfolio nav a:hover { color:var(--cyan); }
#az-portfolio nav .nav-contact { padding:9px 15px; border:1px solid var(--border); border-radius:7px; color:var(--text); }
#az-portfolio .section { max-width:1240px; width:calc(100% - 80px); margin:0 auto; padding:115px 0; scroll-margin-top:25px; }
#az-portfolio .hero { min-height:680px; display:grid; grid-template-columns:1.08fr .92fr; align-items:center; gap:55px; padding-top:95px; padding-bottom:100px; }
#az-portfolio .status { display:inline-flex; align-items:center; gap:9px; font:10px 'DM Mono',monospace; letter-spacing:1.2px; color:#A8B5C5; border:1px solid var(--border); background:rgba(13,19,30,.65); padding:8px 12px; border-radius:5px; margin-bottom:30px; }
#az-portfolio .status-dot, #az-portfolio .tag-dot { width:7px; height:7px; background:#60E5AD; border-radius:50%; box-shadow:0 0 12px rgba(96,229,173,.45); }
#az-portfolio .eyebrow { color:var(--cyan); font:10px 'DM Mono',monospace; letter-spacing:2px; margin-bottom:19px; }
#az-portfolio .hero h1 { font-size:clamp(43px,5.3vw,72px); line-height:1.08; letter-spacing:-4px; font-weight:700; margin-bottom:25px; }
#az-portfolio .gradient-text { background:linear-gradient(100deg,var(--cyan),#8DBEEB 48%,var(--violet)); -webkit-background-clip:text; background-clip:text; color:transparent; }
#az-portfolio .hero-description { max-width:510px; color:#A3AFC0; font-size:15px; line-height:1.9; margin-bottom:18px; }
#az-portfolio .typing-line { font-size:12px; color:#8B97A9; margin-bottom:29px; min-height:23px; }
#az-portfolio #typing-text { color:var(--cyan); }
#az-portfolio .cursor { color:var(--cyan); animation:azBlink .8s step-end infinite; }
#az-portfolio .hero-buttons { display:flex; flex-wrap:wrap; gap:12px; }
#az-portfolio .button { min-height:47px; padding:12px 19px; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; gap:20px; font-size:12px; font-weight:600; transition:transform .25s,border-color .25s,background .25s; }
#az-portfolio .button:hover { transform:translateY(-3px); }
#az-portfolio .button-primary { color:#071116; background:var(--cyan); border:1px solid var(--cyan); }
#az-portfolio .button-primary:hover { background:#7AEAF2; }
#az-portfolio .button-secondary { color:var(--text); background:rgba(255,255,255,.025); border:1px solid var(--border); }
#az-portfolio .button-secondary:hover { border-color:rgba(66,217,232,.5); }
#az-portfolio .hero-meta { display:flex; flex-wrap:wrap; gap:22px; margin-top:47px; color:#687689; font:9px 'DM Mono',monospace; letter-spacing:1px; }
#az-portfolio .meta-line { display:inline-block; width:19px; height:1px; vertical-align:middle; margin-right:8px; background:var(--cyan); }
#az-portfolio .hero-visual { position:relative; padding:18px; }
#az-portfolio .visual-frame { position:relative; border:1px solid rgba(155,185,220,.17); border-radius:12px; background:linear-gradient(145deg,rgba(17,27,42,.91),rgba(9,14,23,.95)); box-shadow:0 25px 90px rgba(0,0,0,.22); overflow:hidden; }
#az-portfolio .frame-top { display:flex; justify-content:space-between; padding:17px 19px; border-bottom:1px solid var(--border); color:#728197; font:9px 'DM Mono',monospace; letter-spacing:1px; }
#az-portfolio .visual-center { height:320px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; background:radial-gradient(circle,rgba(66,217,232,.065),transparent 55%); }
#az-portfolio .orbit { position:absolute; border:1px solid rgba(66,217,232,.17); border-radius:50%; }
#az-portfolio .orbit-outer { width:255px; height:255px; animation:azOrbit 40s linear infinite; }
#az-portfolio .orbit-inner { width:180px; height:180px; border-color:rgba(152,117,255,.28); border-style:dashed; animation:azOrbit 34s linear infinite reverse; }
#az-portfolio .core { width:108px; height:108px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; border-radius:27px; border:1px solid rgba(66,217,232,.4); background:linear-gradient(145deg,rgba(66,217,232,.13),rgba(152,117,255,.12)); box-shadow:0 0 55px rgba(66,217,232,.09),inset 0 0 25px rgba(66,217,232,.04); transform:rotate(-5deg); }
#az-portfolio .core span { font-size:34px; font-weight:700; letter-spacing:-3px; }
#az-portfolio .core small { font:8px 'DM Mono',monospace; letter-spacing:2px; color:var(--cyan); }
#az-portfolio .orbit-point { position:absolute; width:9px; height:9px; border-radius:50%; background:var(--cyan); box-shadow:0 0 15px rgba(66,217,232,.7); }
#az-portfolio .point-one { top:54px; left:calc(50% + 52px); }
#az-portfolio .point-two { bottom:70px; left:calc(50% - 120px); background:var(--violet); box-shadow:0 0 15px rgba(152,117,255,.7); }
#az-portfolio .point-three { top:50%; right:calc(50% - 127px); width:5px; height:5px; }
#az-portfolio .visual-caption { display:flex; justify-content:space-between; gap:10px; padding:18px 20px; border-top:1px solid var(--border); }
#az-portfolio .visual-caption div { display:flex; flex-direction:column; gap:4px; }
#az-portfolio .caption-label { font:9px 'DM Mono',monospace; color:#718097; letter-spacing:1px; }
#az-portfolio .visual-caption strong { font-size:11px; font-weight:500; }
#az-portfolio .floating-tag { position:absolute; padding:10px 13px; display:flex; align-items:center; gap:9px; border:1px solid rgba(155,185,220,.18); background:rgba(12,19,30,.92); backdrop-filter:blur(12px); border-radius:6px; color:#C4CEDB; font-size:10px; box-shadow:0 10px 35px rgba(0,0,0,.2); }
#az-portfolio .tag-top { top:8%; right:-4px; animation:azTagFloat 6s ease-in-out infinite; }
#az-portfolio .tag-bottom { bottom:9%; left:-8px; animation:azTagFloat 7s ease-in-out infinite reverse; }
#az-portfolio .tag-symbol { font-size:15px; color:var(--cyan); }
#az-portfolio .section-heading { margin-bottom:48px; }
#az-portfolio .section-heading h2, #az-portfolio .contact-panel h2 { font-size:clamp(35px,4.4vw,54px); line-height:1.16; letter-spacing:-2.5px; font-weight:650; margin-bottom:0; }
#az-portfolio .muted-text { color:#78869A; }
#az-portfolio .about-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:80px; align-items:start; }
#az-portfolio .about-copy p { color:#929FB1; font-size:13px; line-height:1.95; }
#az-portfolio .about-copy .lead { color:#D4DDE9; font-size:17px; line-height:1.8; margin-bottom:22px; }
#az-portfolio .text-link { display:inline-flex; gap:20px; align-items:center; color:var(--cyan); font-size:12px; margin-top:10px; }
#az-portfolio .about-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
#az-portfolio .info-card { position:relative; min-height:170px; padding:23px; border:1px solid var(--border); background:rgba(13,19,30,.62); border-radius:8px; transition:transform .25s,border-color .25s,background .25s; }
#az-portfolio .info-card:hover, #az-portfolio .skill-card:hover, #az-portfolio .project-card:hover { transform:translateY(-4px); border-color:rgba(66,217,232,.28); }
#az-portfolio .card-number { position:absolute; top:17px; right:18px; color:#526074; font:10px 'DM Mono',monospace; }
#az-portfolio .card-icon { display:block; color:var(--cyan); font-size:22px; margin-bottom:16px; }
#az-portfolio .info-card h3 { font-size:13px; font-weight:600; margin-bottom:8px; }
#az-portfolio .info-card p { font-size:11px; color:#8491A4; line-height:1.75; margin-bottom:0; }
#az-portfolio .skills-section { border-top:1px solid var(--border); }
#az-portfolio .section-description { color:#909DB0; font-size:13px; max-width:570px; margin-top:-25px; margin-bottom:35px; }
#az-portfolio .skills-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
#az-portfolio .skill-card { position:relative; padding:25px 21px; min-height:255px; border:1px solid var(--border); border-radius:8px; background:rgba(13,19,30,.66); transition:transform .25s,border-color .25s; }
#az-portfolio .skill-index { position:absolute; top:19px; right:18px; color:#536176; font:10px 'DM Mono',monospace; }
#az-portfolio .skill-icon { width:42px; height:42px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(66,217,232,.19); border-radius:8px; color:var(--cyan); background:rgba(66,217,232,.055); font:15px 'DM Mono',monospace; margin-bottom:24px; }
#az-portfolio .skill-card h3 { font-size:14px; margin-bottom:8px; }
#az-portfolio .skill-card p { color:#8592A5; font-size:11px; line-height:1.8; min-height:40px; }
#az-portfolio .skill-tags, #az-portfolio .project-tags { display:flex; flex-wrap:wrap; gap:6px; }
#az-portfolio .skill-tags span, #az-portfolio .project-tags span { font:9px 'DM Mono',monospace; color:#9AA8B9; padding:5px 7px; border:1px solid var(--border); border-radius:4px; }
#az-portfolio .skills-note, #az-portfolio .projects-note { margin-top:19px; color:#657387; font-size:10px; }
#az-portfolio .projects-section { border-top:1px solid var(--border); }
#az-portfolio .project-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; }
#az-portfolio .project-count { font:9px 'DM Mono',monospace; letter-spacing:1px; color:#748197; padding-bottom:7px; }
#az-portfolio .projects-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
#az-portfolio .project-card { overflow:hidden; border:1px solid var(--border); border-radius:9px; background:rgba(13,19,30,.73); transition:transform .25s,border-color .25s; }
#az-portfolio .project-featured { grid-column:span 2; display:grid; grid-template-columns:1.05fr .95fr; }
#az-portfolio .project-art { min-height:245px; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; border-bottom:1px solid var(--border); }
#az-portfolio .project-featured .project-art { min-height:335px; border-bottom:0; border-right:1px solid var(--border); }
#az-portfolio .art-one { background:radial-gradient(ellipse at 50% 50%,rgba(66,217,232,.1),transparent 70%),linear-gradient(145deg,#101C2A,#0A111D); }
#az-portfolio .art-two { background:radial-gradient(ellipse at 80% 20%,rgba(152,117,255,.12),transparent 60%),#0C111D; }
#az-portfolio .art-three { background:radial-gradient(ellipse at 20% 80%,rgba(66,217,232,.09),transparent 60%),#0B121D; }
#az-portfolio .mock-window { width:83%; border:1px solid rgba(145,180,210,.2); background:rgba(8,13,22,.9); border-radius:8px; overflow:hidden; transform:perspective(900px) rotateY(-5deg) rotateX(2deg); box-shadow:0 20px 55px rgba(0,0,0,.3); }
#az-portfolio .mock-top { height:29px; display:flex; align-items:center; gap:5px; padding:0 10px; border-bottom:1px solid var(--border); }
#az-portfolio .mock-top>span, #az-portfolio .code-header span { width:5px; height:5px; border-radius:50%; background:#536174; }
#az-portfolio .mock-top small { margin-left:auto; color:#64748A; font:7px 'DM Mono',monospace; }
#az-portfolio .mock-content { display:grid; grid-template-columns:55px 1fr; min-height:205px; }
#az-portfolio .mock-sidebar { border-right:1px solid var(--border); background:rgba(255,255,255,.012); }
#az-portfolio .mock-main { padding:18px 15px; }
#az-portfolio .mock-label { color:var(--cyan); font:7px 'DM Mono',monospace; letter-spacing:1px; }
#az-portfolio .mock-title { width:48%; height:9px; background:#D2DFEC; opacity:.7; border-radius:3px; margin-top:8px; }
#az-portfolio .mock-stats { display:flex; gap:8px; margin:17px 0; }
#az-portfolio .mock-stats i { height:30px; flex:1; border:1px solid rgba(145,180,210,.15); background:linear-gradient(135deg,rgba(66,217,232,.08),transparent); border-radius:3px; }
#az-portfolio .mock-chart { height:75px; display:flex; align-items:end; gap:7px; border-bottom:1px solid rgba(145,180,210,.1); padding:0 7px; }
#az-portfolio .mock-chart span { flex:1; background:linear-gradient(to top,rgba(66,217,232,.12),rgba(66,217,232,.7)); border-radius:2px 2px 0 0; }
#az-portfolio .mock-chart span:nth-child(1) { height:30%; } #az-portfolio .mock-chart span:nth-child(2) { height:55%; } #az-portfolio .mock-chart span:nth-child(3) { height:43%; } #az-portfolio .mock-chart span:nth-child(4) { height:75%; } #az-portfolio .mock-chart span:nth-child(5) { height:61%; } #az-portfolio .mock-chart span:nth-child(6) { height:90%; } #az-portfolio .mock-chart span:nth-child(7) { height:70%; }
#az-portfolio .code-window { position:relative; z-index:1; width:68%; border:1px solid rgba(145,180,210,.18); border-radius:7px; background:rgba(9,14,24,.91); padding-bottom:25px; transform:rotate(-3deg); box-shadow:0 20px 55px rgba(0,0,0,.3); }
#az-portfolio .code-header { display:flex; gap:5px; padding:13px; border-bottom:1px solid var(--border); }
#az-portfolio .code-lines { padding:20px 18px 0; display:flex; flex-direction:column; gap:11px; }
#az-portfolio .code-lines i { display:block; width:76%; height:4px; border-radius:3px; background:rgba(160,178,203,.3); }
#az-portfolio .code-lines i.short { width:34%; } #az-portfolio .code-lines i.medium { width:56%; } #az-portfolio .code-lines i.long { width:90%; } #az-portfolio .code-lines i.cyan { background:rgba(66,217,232,.65); } #az-portfolio .code-lines i.violet { background:rgba(152,117,255,.65); }
#az-portfolio .art-orb { position:absolute; width:130px; height:130px; border:1px solid rgba(152,117,255,.3); border-radius:50%; right:7%; top:12%; box-shadow:0 0 60px rgba(152,117,255,.08),inset 0 0 40px rgba(152,117,255,.06); }
#az-portfolio .design-panel { width:70%; display:grid; grid-template-columns:35px 1fr; border:1px solid rgba(145,180,210,.2); border-radius:7px; overflow:hidden; background:rgba(9,15,24,.92); transform:rotate(3deg); box-shadow:0 20px 50px rgba(0,0,0,.28); }
#az-portfolio .design-sidebar { display:flex; flex-direction:column; align-items:center; gap:14px; padding-top:18px; border-right:1px solid var(--border); }
#az-portfolio .design-sidebar i { width:9px; height:9px; border-radius:3px; border:1px solid rgba(66,217,232,.4); }
#az-portfolio .design-content { padding:19px; }
#az-portfolio .design-chip { width:35px; height:5px; background:var(--cyan); opacity:.7; border-radius:3px; margin-bottom:12px; }
#az-portfolio .design-heading { width:65%; height:10px; background:#8998AB; opacity:.65; border-radius:3px; margin-bottom:20px; }
#az-portfolio .design-blocks { display:flex; gap:9px; }
#az-portfolio .design-blocks i { display:block; height:66px; flex:1; border:1px solid rgba(66,217,232,.16); border-radius:4px; background:linear-gradient(145deg,rgba(66,217,232,.11),rgba(152,117,255,.06)); }
#az-portfolio .design-footer { height:5px; width:80%; margin-top:16px; border-radius:3px; background:rgba(145,180,210,.16); }
#az-portfolio .project-details { padding:26px; }
#az-portfolio .project-topline { display:flex; justify-content:space-between; gap:10px; color:var(--cyan); font:9px 'DM Mono',monospace; letter-spacing:.6px; margin-bottom:14px; }
#az-portfolio .project-year { color:#718096; }
#az-portfolio .project-details h3 { font-size:22px; letter-spacing:-.6px; margin-bottom:10px; }
#az-portfolio .project-details p { font-size:12px; line-height:1.9; color:#8F9CB0; margin-bottom:18px; }
#az-portfolio .project-featured .project-details p { max-width:470px; }
#az-portfolio .project-link { display:flex; justify-content:space-between; align-items:center; margin-top:22px; padding-top:15px; border-top:1px solid var(--border); color:#C4D1E0; font-size:11px; }
#az-portfolio .project-link span { color:var(--cyan); }
#az-portfolio .contact-section { padding-top:65px; padding-bottom:110px; }
#az-portfolio .contact-panel { position:relative; overflow:hidden; text-align:center; padding:85px 30px 30px; border:1px solid rgba(145,180,210,.16); border-radius:12px; background:linear-gradient(145deg,rgba(15,24,38,.9),rgba(9,14,23,.95)); }
#az-portfolio .contact-glow { position:absolute; width:400px; height:240px; left:50%; top:-160px; transform:translateX(-50%); background:var(--cyan); opacity:.10; filter:blur(90px); pointer-events:none; }
#az-portfolio .contact-panel .eyebrow, #az-portfolio .contact-panel h2, #az-portfolio .contact-panel>p, #az-portfolio .contact-panel>a { position:relative; z-index:1; }
#az-portfolio .contact-panel h2 { margin-bottom:20px; }
#az-portfolio .contact-description { max-width:490px; margin:0 auto 27px; color:#99A6B8; font-size:13px; line-height:1.9; }
#az-portfolio .contact-panel .button { margin-bottom:65px; }
#az-portfolio .contact-bottom { display:flex; justify-content:space-between; gap:15px; padding-top:18px; border-top:1px solid var(--border); color:#69788D; font:9px 'DM Mono',monospace; letter-spacing:1px; }
#az-portfolio .footer { max-width:1240px; width:calc(100% - 80px); min-height:90px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:20px; border-top:1px solid var(--border); color:#758398; }
#az-portfolio .footer .logo { color:var(--text); }
#az-portfolio .footer p { margin:0; font-size:10px; }
#az-portfolio .social-links { display:flex; gap:18px; font-size:10px; }
#az-portfolio .social-links a:hover { color:var(--cyan); }
#az-portfolio .copyright { font:9px 'DM Mono',monospace; }
#az-portfolio .reveal { opacity:0; transform:translateY(18px); transition:opacity .8s ease,transform .8s ease; }
#az-portfolio .reveal.is-visible { opacity:1; transform:translateY(0); }
@keyframes azBackground { 0% { background-position:0% 0%; } 100% { background-position:100% 100%; } }
@keyframes azFloatOne { from { transform:translate(0,0); } to { transform:translate(90px,110px); } }
@keyframes azFloatTwo { from { transform:translate(0,0); } to { transform:translate(-100px,70px); } }
@keyframes azOrbit { to { transform:rotate(360deg); } }
@keyframes azTagFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-7px); } }
@keyframes azBlink { 50% { opacity:0; } }
@media (max-width: 900px) {
#az-portfolio .section, #az-portfolio .navbar, #az-portfolio .footer { width:calc(100% - 48px); }
#az-portfolio .hero { grid-template-columns:1fr 1fr; gap:20px; min-height:600px; }
#az-portfolio .hero h1 { font-size:clamp(39px,6vw,58px); letter-spacing:-2.5px; }
#az-portfolio .about-grid { gap:35px; }
#az-portfolio .skills-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
#az-portfolio .project-featured { grid-template-columns:1fr 1fr; }
#az-portfolio .project-featured .project-art { min-height:300px; }
#az-portfolio .project-details { padding:20px; }
}
@media (max-width: 650px) {
#az-portfolio .section, #az-portfolio .navbar, #az-portfolio .footer { width:calc(100% - 36px); }
#az-portfolio .navbar { min-height:72px; }
#az-portfolio nav { gap:13px; }
#az-portfolio nav a { font-size:10px; }
#az-portfolio nav .nav-contact { padding:7px 9px; }
#az-portfolio .section { padding:78px 0; }
#az-portfolio .hero { display:flex; flex-direction:column; align-items:stretch; gap:45px; padding-top:75px; padding-bottom:80px; }
#az-portfolio .hero h1 { font-size:clamp(43px,12vw,62px); letter-spacing:-2.8px; }
#az-portfolio .hero-description { font-size:13px; }
#az-portfolio .hero-meta { margin-top:32px; }
#az-portfolio .hero-visual { margin:0 4px; }
#az-portfolio .visual-center { height:260px; }
#az-portfolio .orbit-outer { width:220px; height:220px; }
#az-portfolio .orbit-inner { width:155px; height:155px; }
#az-portfolio .tag-top { right:-5px; }
#az-portfolio .tag-bottom { left:-5px; }
#az-portfolio .about-grid { grid-template-columns:1fr; gap:35px; }
#az-portfolio .about-cards { gap:10px; }
#az-portfolio .info-card { min-height:160px; padding:17px; }
#az-portfolio .section-heading { margin-bottom:35px; }
#az-portfolio .section-heading h2, #az-portfolio .contact-panel h2 { font-size:clamp(34px,9vw,45px); letter-spacing:-1.8px; }
#az-portfolio .section-description { margin-top:-15px; }
#az-portfolio .skills-grid { gap:10px; }
#az-portfolio .skill-card { min-height:240px; padding:18px 14px; }
#az-portfolio .skill-card h3 { font-size:12px; }
#az-portfolio .skill-card p { font-size:10px; }
#az-portfolio .skill-tags span { font-size:8px; }
#az-portfolio .project-heading { align-items:start; flex-direction:column; }
#az-portfolio .projects-grid { grid-template-columns:1fr; gap:15px; }
#az-portfolio .project-featured { grid-column:auto; display:flex; flex-direction:column; }
#az-portfolio .project-featured .project-art { min-height:250px; border-right:0; border-bottom:1px solid var(--border); }
#az-portfolio .project-art { min-height:220px; }
#az-portfolio .project-details { padding:21px; }
#az-portfolio .contact-panel { padding:65px 20px 22px; }
#az-portfolio .contact-panel .button { margin-bottom:45px; }
#az-portfolio .contact-bottom { font-size:8px; }
#az-portfolio .footer { padding:20px 0; flex-wrap:wrap; justify-content:space-between; }
#az-portfolio .footer p { order:3; width:100%; }
#az-portfolio .social-links { gap:12px; }
}
@media (prefers-reduced-motion: reduce) {
#az-portfolio, #az-portfolio .background-glow, #az-portfolio .orbit, #az-portfolio .floating-tag, #az-portfolio .cursor { animation:none !important; }
#az-portfolio .reveal { opacity:1; transform:none; transition:none; }
#az-portfolio * { scroll-behavior:auto !important; transition:none !important; }
}
(function () {
const root = document.getElementById('az-portfolio');
if (!root || root.dataset.initialized === 'true') return;
root.dataset.initialized = 'true';
const typing = root.querySelector('#typing-text');
const phrases = ['Software Engineering Student', 'Aspiring Developer', 'Web Development Enthusiast'];
let phraseIndex = 0, charIndex = phrases[0].length, deleting = false;
function typeLoop() {
if (!typing) return;
const phrase = phrases[phraseIndex];
if (deleting) {
charIndex--;
typing.textContent = phrase.substring(0, charIndex);
} else {
charIndex++;
typing.textContent = phrase.substring(0, charIndex);
}
let delay = deleting ? 35 : 65;
if (!deleting && charIndex >= phrase.length) {
deleting = true;
delay = 1500;
} else if (deleting && charIndex {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add('is-visible');
observer.unobserve(entry.target);
}
});
}, { threshold: 0.12 });
revealItems.forEach((item) => observer.observe(item));
} else {
revealItems.forEach((item) => item.classList.add('is-visible'));
}
const year = root.querySelector('#current-year');
if (year) year.textContent = new Date().getFullYear();
root.querySelectorAll('a[href^="#"]').forEach((link) => {
link.addEventListener('click', (event) => {
const target = root.querySelector(link.getAttribute('href'));
if (target) {
event.preventDefault();
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
});
});
})();
```