{"id":17,"date":"2026-10-27T02:01:25","date_gmt":"2026-10-27T02:01:25","guid":{"rendered":"https:\/\/reena.mits.my\/?page_id=17"},"modified":"2026-10-27T03:18:15","modified_gmt":"2026-10-27T03:18:15","slug":"home","status":"publish","type":"page","link":"https:\/\/reena.mits.my\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"17\" class=\"elementor elementor-17\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5c60cd8 e-con-full e-flex e-con e-parent\" data-id=\"5c60cd8\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a57adbe elementor-widget__width-inherit elementor-widget elementor-widget-wp-widget-custom_html\" data-id=\"a57adbe\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"wp-widget-custom_html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"textwidget custom-html-widget\">\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&amp;display=swap');\r\n\r\n#az-portfolio {\r\n  --bg: #080B12;\r\n  --panel: #101621;\r\n  --text: #F3F5FA;\r\n  --muted: #A6B0C0;\r\n  --cyan: #42D9E8;\r\n  font-family: 'Inter', sans-serif;\r\n  background: var(--bg);\r\n  color: var(--text);\r\n  line-height: 1.7;\r\n  width: 100%;\r\n  overflow: hidden;\r\n}\r\n\r\n#az-portfolio * { box-sizing: border-box; }\r\n#az-portfolio a { text-decoration: none; color: inherit; }\r\n#az-portfolio .wrap { width: min(1080px, 90%); margin: auto; }\r\n\r\n#az-portfolio nav {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  padding: 24px 0;\r\n  border-bottom: 1px solid #ffffff12;\r\n}\r\n#az-portfolio .logo { font-weight: 700; font-size: 19px; }\r\n#az-portfolio .logo span { color: var(--cyan); }\r\n#az-portfolio .navlinks { display: flex; gap: 25px; font-size: 13px; color: var(--muted); }\r\n#az-portfolio .navlinks a:hover { color: var(--cyan); }\r\n\r\n#az-portfolio .hero {\r\n  min-height: 490px;\r\n  display: flex;\r\n  align-items: center;\r\n  padding: 85px 0;\r\n}\r\n#az-portfolio .eyebrow {\r\n  color: var(--cyan);\r\n  font-size: 12px;\r\n  font-weight: 600;\r\n  letter-spacing: 2px;\r\n  text-transform: uppercase;\r\n}\r\n#az-portfolio h1 {\r\n  font-size: clamp(38px, 6vw, 66px);\r\n  line-height: 1.12;\r\n  letter-spacing: -2px;\r\n  margin: 18px 0;\r\n  color: var(--text);\r\n}\r\n#az-portfolio h1 span { color: var(--cyan); }\r\n#az-portfolio p { color: var(--muted); }\r\n#az-portfolio .intro { max-width: 580px; font-size: 16px; }\r\n#az-portfolio .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }\r\n#az-portfolio .btn {\r\n  display: inline-block;\r\n  padding: 12px 20px;\r\n  border: 1px solid #ffffff25;\r\n  border-radius: 7px;\r\n  font-size: 13px;\r\n  font-weight: 600;\r\n  transition: .2s;\r\n}\r\n#az-portfolio .btn.primary { background: var(--cyan); color: #080B12; border-color: var(--cyan); }\r\n#az-portfolio .btn:hover { transform: translateY(-2px); }\r\n\r\n#az-portfolio section { padding: 65px 0; border-top: 1px solid #ffffff12; }\r\n#az-portfolio .section-label {\r\n  color: var(--cyan);\r\n  font-size: 11px;\r\n  letter-spacing: 2px;\r\n  text-transform: uppercase;\r\n}\r\n#az-portfolio h2 { font-size: 30px; margin: 8px 0 24px; color: var(--text); }\r\n#az-portfolio .about-text { max-width: 720px; }\r\n\r\n#az-portfolio .grid {\r\n  display: grid;\r\n  grid-template-columns: repeat(3, minmax(0, 1fr));\r\n  gap: 16px;\r\n}\r\n#az-portfolio .card {\r\n  background: var(--panel);\r\n  border: 1px solid #ffffff12;\r\n  padding: 24px;\r\n  border-radius: 12px;\r\n  transition: .25s;\r\n}\r\n#az-portfolio .card:hover { border-color: #42D9E855; transform: translateY(-4px); }\r\n#az-portfolio .card h3 { font-size: 17px; margin: 0 0 8px; color: var(--text); }\r\n#az-portfolio .card p { font-size: 13px; margin-bottom: 0; }\r\n#az-portfolio .tag {\r\n  display: inline-block;\r\n  color: var(--cyan);\r\n  background: #42D9E811;\r\n  padding: 4px 8px;\r\n  border-radius: 4px;\r\n  font-size: 11px;\r\n  margin: 3px 3px 3px 0;\r\n}\r\n#az-portfolio .contact-box {\r\n  background: var(--panel);\r\n  border: 1px solid #ffffff12;\r\n  padding: 32px;\r\n  border-radius: 12px;\r\n}\r\n#az-portfolio footer {\r\n  padding: 25px 0;\r\n  border-top: 1px solid #ffffff12;\r\n  color: var(--muted);\r\n  font-size: 12px;\r\n}\r\n\r\n@media (max-width: 700px) {\r\n  #az-portfolio .navlinks { gap: 12px; font-size: 11px; }\r\n  #az-portfolio .hero { min-height: auto; padding: 65px 0; }\r\n  #az-portfolio .grid { grid-template-columns: 1fr; }\r\n  #az-portfolio section { padding: 45px 0; }\r\n  #az-portfolio h1 { letter-spacing: -1px; }\r\n}\r\n@media (prefers-reduced-motion: reduce) {\r\n  #az-portfolio * { transition: none !important; }\r\n}\r\n\r\n\/* ===== Smooth animations ===== *\/\r\n\r\n#az-portfolio {\r\n  position: relative;\r\n  isolation: isolate;\r\n  background:\r\n    radial-gradient(ellipse at 15% 20%, #15334455 0%, transparent 45%),\r\n    radial-gradient(ellipse at 85% 70%, #29204a44 0%, transparent 40%),\r\n    #080B12;\r\n  background-size: 150% 150%;\r\n  animation: backgroundDrift 16s ease-in-out infinite alternate;\r\n}\r\n\r\n@keyframes backgroundDrift {\r\n  from { background-position: 0% 0%; }\r\n  to   { background-position: 100% 100%; }\r\n}\r\n\r\n\/* Subtle cyan glow behind the hero *\/\r\n#az-portfolio .hero {\r\n  position: relative;\r\n  isolation: isolate;\r\n}\r\n\r\n#az-portfolio .hero::before {\r\n  content: \"\";\r\n  position: absolute;\r\n  z-index: -1;\r\n  width: 280px;\r\n  height: 280px;\r\n  right: 5%;\r\n  top: 20%;\r\n  border-radius: 50%;\r\n  background: #42D9E8;\r\n  opacity: 0.10;\r\n  filter: blur(90px);\r\n  pointer-events: none;\r\n  animation: orbFloat 7s ease-in-out infinite alternate;\r\n}\r\n\r\n@keyframes orbFloat {\r\n  from { transform: translate(0, 0) scale(0.9); }\r\n  to   { transform: translate(-35px, 25px) scale(1.15); }\r\n}\r\n\r\n\/* Intro animations *\/\r\n#az-portfolio .hero .eyebrow {\r\n  animation: fadeUp 0.7s ease both;\r\n}\r\n\r\n#az-portfolio .hero h1 {\r\n  animation: fadeUp 0.8s 0.12s ease both;\r\n}\r\n\r\n#az-portfolio .hero .intro {\r\n  animation: fadeUp 0.8s 0.24s ease both;\r\n}\r\n\r\n#az-portfolio .hero .actions {\r\n  animation: fadeUp 0.8s 0.36s ease both;\r\n}\r\n\r\n@keyframes fadeUp {\r\n  from {\r\n    opacity: 0;\r\n    transform: translateY(18px);\r\n  }\r\n  to {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n  }\r\n}\r\n\r\n\/* Gentle hover on project and skill cards *\/\r\n#az-portfolio .card {\r\n  position: relative;\r\n  transition:\r\n    transform 0.3s ease,\r\n    border-color 0.3s ease,\r\n    box-shadow 0.3s ease;\r\n}\r\n\r\n#az-portfolio .card:hover {\r\n  transform: translateY(-6px);\r\n  border-color: #42D9E877;\r\n  box-shadow: 0 12px 35px #42D9E810;\r\n}\r\n\r\n\/* Buttons *\/\r\n#az-portfolio .btn {\r\n  transition:\r\n    transform 0.25s ease,\r\n    background 0.25s ease,\r\n    border-color 0.25s ease,\r\n    box-shadow 0.25s ease;\r\n}\r\n\r\n#az-portfolio .btn.primary:hover {\r\n  background: #75EDF5;\r\n  box-shadow: 0 0 22px #42D9E833;\r\n}\r\n\r\n#az-portfolio .btn:not(.primary):hover {\r\n  border-color: #42D9E8;\r\n  box-shadow: 0 0 16px #42D9E811;\r\n}\r\n\r\n\/* Navigation underline *\/\r\n#az-portfolio .navlinks a {\r\n  position: relative;\r\n  transition: color 0.25s ease;\r\n}\r\n\r\n#az-portfolio .navlinks a::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  bottom: -5px;\r\n  left: 0;\r\n  width: 0;\r\n  height: 1px;\r\n  background: #42D9E8;\r\n  transition: width 0.25s ease;\r\n}\r\n\r\n#az-portfolio .navlinks a:hover::after {\r\n  width: 100%;\r\n}\r\n\r\n\/* Cyan highlight on your name *\/\r\n#az-portfolio h1 span {\r\n  text-shadow: 0 0 24px #42D9E822;\r\n}\r\n\r\n\/* Respect reduced-motion preferences *\/\r\n@media (prefers-reduced-motion: reduce) {\r\n  #az-portfolio,\r\n  #az-portfolio *,\r\n  #az-portfolio *::before,\r\n  #az-portfolio *::after {\r\n    animation: none !important;\r\n    transition: none !important;\r\n    scroll-behavior: auto !important;\r\n  }\r\n}\r\n\r\n\r\n\r\n<div id=\"az-portfolio\">\r\n  <div class=\"wrap\">\r\n\r\n    <nav>\r\n      <a class=\"logo\" href=\"#az-home\">Azreena<span>.<\/span><\/a>\r\n      <div class=\"navlinks\">\r\n        <a href=\"#az-about\">About<\/a>\r\n        <a href=\"#az-skills\">Skills<\/a>\r\n        <a href=\"#az-projects\">Projects<\/a>\r\n        <a href=\"#az-contact\">Contact<\/a>\r\n      <\/div>\r\n    <\/nav>\r\n\r\n    <header class=\"hero\" id=\"az-home\">\r\n      <div>\r\n        <div class=\"eyebrow\">Software Engineering Student<\/div>\r\n        <h1>Hi, I'm <span>Azreena.<\/span><\/h1>\r\n        <p class=\"intro\">\r\n          I'm a Software Engineering student interested in web development\r\n          and creating useful digital solutions. I'm always learning,\r\n          exploring new technologies, and improving my skills through projects.\r\n        <\/p>\r\n        <div class=\"actions\">\r\n          <a class=\"btn primary\" href=\"#az-projects\">View My Projects<\/a>\r\n          <a class=\"btn\" href=\"#az-contact\">Get In Touch<\/a>\r\n        <\/div>\r\n      <\/div>\r\n    <\/header>\r\n\r\n    <section id=\"az-about\">\r\n      <div class=\"section-label\">01 \/ About Me<\/div>\r\n      <h2>A little about me<\/h2>\r\n      <p class=\"about-text\">\r\n        I'm currently pursuing Software Engineering and building my\r\n        knowledge in programming, web technologies, and software development.\r\n        I enjoy learning by doing and turning ideas into practical projects.\r\n        I'm looking forward to gaining industry experience and growing as a developer.\r\n      <\/p>\r\n    <\/section>\r\n\r\n    <section id=\"az-skills\">\r\n      <div class=\"section-label\">02 \/ Skills<\/div>\r\n      <h2>What I'm learning<\/h2>\r\n      <div class=\"grid\">\r\n        <div class=\"card\">\r\n          <h3>Web Development<\/h3>\r\n          <p>Building and styling websites with a focus on usability and responsive layouts.<\/p>\r\n          <div><span class=\"tag\">HTML<\/span><span class=\"tag\">CSS<\/span><span class=\"tag\">JavaScript<\/span><\/div>\r\n        <\/div>\r\n        <div class=\"card\">\r\n          <h3>Programming<\/h3>\r\n          <p>Developing problem-solving skills and learning programming fundamentals.<\/p>\r\n          <div><span class=\"tag\">Programming<\/span><span class=\"tag\">OOP<\/span><\/div>\r\n        <\/div>\r\n        <div class=\"card\">\r\n          <h3>Tools &amp; Workflow<\/h3>\r\n          <p>Learning to organise code, manage projects, and collaborate effectively.<\/p>\r\n          <div><span class=\"tag\">Git<\/span><span class=\"tag\">GitHub<\/span><span class=\"tag\">VS Code<\/span><\/div>\r\n        <\/div>\r\n      <\/div>\r\n      <p style=\"font-size:12px;margin-top:16px\">Note: Edit these skills to match the technologies you actually know.<\/p>\r\n    <\/section>\r\n\r\n    <section id=\"az-projects\">\r\n      <div class=\"section-label\">03 \/ Projects<\/div>\r\n      <h2>Things I've worked on<\/h2>\r\n      <div class=\"grid\">\r\n        <div class=\"card\">\r\n          <h3>DuitWise<\/h3>\r\n          <p>A financial commitment tracker concept for organising bills, savings goals, and payment commitments.<\/p>\r\n          <div><span class=\"tag\">Web App<\/span><span class=\"tag\">In Progress<\/span><\/div>\r\n        <\/div>\r\n        <div class=\"card\">\r\n          <h3>Academic Project<\/h3>\r\n          <p>Replace this description with a project you completed during your studies, including its purpose and features.<\/p>\r\n          <div><span class=\"tag\">Your Technology<\/span><\/div>\r\n        <\/div>\r\n        <div class=\"card\">\r\n          <h3>More Coming Soon<\/h3>\r\n          <p>I'm continuing to explore new ideas and develop projects as I learn.<\/p>\r\n          <div><span class=\"tag\">Learning<\/span><\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/section>\r\n\r\n    <section id=\"az-contact\">\r\n      <div class=\"section-label\">04 \/ Contact<\/div>\r\n      <div class=\"contact-box\">\r\n        <h2>Let's connect<\/h2>\r\n        <p>I'm open to learning opportunities, collaboration, and connecting with other developers.<\/p>\r\n        <div class=\"actions\">\r\n          <a class=\"btn primary\" href=\"mailto:YOUR_EMAIL@example.com\">Email Me<\/a>\r\n          <a class=\"btn\" href=\"https:\/\/github.com\/YOUR_GITHUB\" target=\"_blank\" rel=\"noopener noreferrer\">GitHub<\/a>\r\n          <a class=\"btn\" href=\"https:\/\/www.linkedin.com\/in\/YOUR_LINKEDIN\/\" target=\"_blank\" rel=\"noopener noreferrer\">LinkedIn<\/a>\r\n        <\/div>\r\n        <p style=\"font-size:12px\">Remember to replace the sample email and profile links with your own.<\/p>\r\n      <\/div>\r\n    <\/section>\r\n\r\n    <footer>\r\n      \u00a9 2026 Azreena \u00b7 Personal Portfolio\r\n    <\/footer>\r\n\r\n  <\/div>\r\n<\/div>\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-17","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/reena.mits.my\/index.php?rest_route=\/wp\/v2\/pages\/17","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/reena.mits.my\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/reena.mits.my\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/reena.mits.my\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/reena.mits.my\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=17"}],"version-history":[{"count":5,"href":"https:\/\/reena.mits.my\/index.php?rest_route=\/wp\/v2\/pages\/17\/revisions"}],"predecessor-version":[{"id":33,"href":"https:\/\/reena.mits.my\/index.php?rest_route=\/wp\/v2\/pages\/17\/revisions\/33"}],"wp:attachment":[{"href":"https:\/\/reena.mits.my\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=17"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}