diff --git a/mir coder portfolio/assets/css/style.css b/mir coder portfolio/assets/css/style.css
new file mode 100644
index 0000000..7563da4
--- /dev/null
+++ b/mir coder portfolio/assets/css/style.css
@@ -0,0 +1,1497 @@
+/*-----------------------------------*\
+ #main.css
+\*-----------------------------------*/
+
+/**
+ * copyright 2022 codewithsadee
+ */
+
+
+
+
+
+/*-----------------------------------*\
+ #CUSTOM PROPERTY
+\*-----------------------------------*/
+
+:root {
+
+ /**
+ * COLORS
+ */
+
+ /* background colors */
+ --bg-white: hsla(0, 0%, 100%, 1);
+ --bg-light-gray: hsla(240, 1%, 83%, 1);
+ --bg-jet: hsla(0, 0%, 18%, 1);
+ --bg-eerie-black: hsla(0, 0%, 13%, 1);
+ --bg-rich-black-fogra-29: hsla(229, 23%, 9%, 1);
+ --bg-smoky-black: hsla(0, 0%, 6%, 1);
+ --bg-black: hsla(0, 0%, 0%, 1);
+
+ /* gradient colors */
+ --gradient-1: linear-gradient(to top, var(--bg-black) 0%, transparent 40%);
+ --gradient-2: radial-gradient(circle at 75% 100%, hsla(79, 100%, 70%, 0.3) 0%, transparent 100%);
+
+ /* text colors */
+ --text-white: hsla(0, 0%, 100%, 1);
+ --text-light-gray: hsla(240, 1%, 83%, 1);
+ --text-rich-black-fogra-29: hsla(216, 42%, 12%, 1);
+ --text-smoky-black: hsla(0, 0%, 6%, 1);
+ --text-black: hsla(0, 0%, 0%, 1);
+
+ /* border colors */
+ --border-white: hsla(0, 0%, 100%, 1);
+ --border-light-gray: hsla(240, 1%, 83%, 1);
+ --border-gainsboro: hsla(220, 13%, 91%, 1);
+ --border-eerie-black: hsla(0, 0%, 13%, 1);
+ --border-smoky-black: hsla(0, 0%, 6%, 1);
+
+ /**
+ * TYPOGRAPHY
+ */
+
+ /* font family */
+ --fontFamily-recoleta: 'Recoleta';
+ --fontFamily-roboto: 'Roboto', sans-serif;
+
+ /* font size */
+ --fontSize-1: 4.6rem;
+ --fontSize-2: 4.5rem;
+ --fontSize-3: 4rem;
+ --fontSize-4: 3rem;
+ --fontSize-5: 2.4rem;
+ --fontSize-6: 1.8rem;
+ --fontSize-7: 2rem;
+ --fontSize-8: 1.6rem;
+ --fontSize-9: 1.5rem;
+ --fontSize-10: 1.4rem;
+
+ /* font weight */
+ --weight-regular: 400;
+ --weight-medium: 500;
+
+ /**
+ * SPACING
+ */
+
+ --section-spacing: 70px;
+
+ /**
+ * BORDER RADIUS
+ */
+
+ --radius-pill: 500px;
+ --radius-circle: 50%;
+
+ /**
+ * TRANSITION
+ */
+
+ --transition-1: 0.25s ease;
+ --transition-2: 0.5s ease;
+ --transition-3: 1000ms cubic-bezier(0.03, 0.98, 0.52, 0.99) 0s;
+ --cubic-in: cubic-bezier(0.51, 0.03, 0.64, 0.28);
+ --cubic-out: cubic-bezier(0.05, 0.83, 0.52, 0.97);
+
+}
+
+
+
+
+
+/*-----------------------------------*\
+ #RESET
+\*-----------------------------------*/
+
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+li { list-style: none; }
+
+a,
+img,
+span,
+input,
+button,
+textarea,
+ion-icon { display: block; }
+
+a {
+ color: inherit;
+ text-decoration: none;
+}
+
+img { height: auto; }
+
+input,
+button,
+textarea {
+ background: none;
+ border: none;
+ font: inherit;
+}
+
+input,
+textarea { width: 100%; }
+
+button { cursor: pointer; }
+
+ion-icon { pointer-events: none; }
+
+address { font-style: normal; }
+
+html {
+ font-size: 10px;
+ scroll-behavior: smooth;
+}
+
+body {
+ background-color: var(--bg-black);
+ color: var(--text-light-gray);
+ font-family: var(--fontFamily-roboto);
+ font-size: var(--fontSize-8);
+ line-height: 1.75;
+ overflow: hidden;
+}
+
+body.loaded { overflow-y: auto; }
+
+body.nav-active { overflow: hidden; }
+
+::-webkit-scrollbar { width: 5px; }
+
+::-webkit-scrollbar-track { border-inline-start: 1px solid var(--border-eerie-black); }
+
+::-webkit-scrollbar-thumb { background-color: var(--bg-white); }
+
+
+
+
+
+/*-----------------------------------*\
+ #REUSED STYLE
+\*-----------------------------------*/
+
+.container { padding-inline: 16px; }
+
+.btn\:hover {
+ position: relative;
+ z-index: 1;
+}
+
+.btn\:hover::before,
+.btn\:hover::after {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: -1;
+ transition: var(--transition-1);
+ will-change: transform;
+ pointer-events: none;
+}
+
+.btn\:hover::after {
+ border: 1px solid var(--bg-white);
+ transform: scale(1.2);
+ opacity: 0;
+}
+
+.btn\:hover:is(:hover, :focus-visible)::before {
+ transform: scale(0.5);
+ opacity: 0;
+}
+
+.btn\:hover:is(:hover, :focus-visible)::after {
+ transform: scale(1);
+ opacity: 1;
+}
+
+.text-center { text-align: center; }
+
+.has-before,
+.has-after {
+ position: relative;
+ z-index: 1;
+}
+
+.has-before::before,
+.has-after::after {
+ content: "";
+ position: absolute;
+}
+
+.img-holder {
+ aspect-ratio: var(--width) / var(--height);
+ overflow: hidden;
+ background-color: var(--bg-jet);
+}
+
+.img-cover {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+
+[data-tilt] { transition: var(--transition-3); }
+
+.title {
+ color: var(--text-white);
+ font-family: var(--fontFamily-recoleta);
+ font-weight: var(--weight-regular);
+}
+
+.h1 {
+ font-size: var(--fontSize-2);
+ line-height: 1.2;
+}
+
+.h2,
+.h3,
+.h4,
+.h5 { line-height: 1.3; }
+
+.h2 { font-size: var(--fontSize-3); }
+
+.h3 { font-size: var(--fontSize-4); }
+
+.h4 { font-size: var(--fontSize-5); }
+
+.h5 { font-size: var(--fontSize-7); }
+
+.h6 { font-size: var(--fontSize-6); }
+
+.btn {
+ color: var(--text-white);
+ font-size: var(--fontSize-9);
+ font-weight: var(--weight-medium);
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ max-width: max-content;
+ height: 56px;
+ padding-inline: 30px;
+}
+
+.btn::before { background-color: var(--bg-smoky-black); }
+
+.btn ion-icon {
+ font-size: 1.8rem;
+ --ionicon-stroke-width: 50px;
+}
+
+.section {
+ padding-block: var(--section-spacing);
+ overflow-x: hidden;
+}
+
+
+
+
+
+/*-----------------------------------*\
+ #PRELOADER
+\*-----------------------------------*/
+
+.preloader {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100vh;
+ box-shadow: inset 55vw 0 0 0 var(--bg-white),
+ inset -55vw 0 0 0 var(--bg-white);
+ display: grid;
+ place-items: center;
+ z-index: 10;
+}
+
+.preloader.loaded {
+ transition: 300ms ease 500ms;
+ pointer-events: none;
+ box-shadow: inset 0 0 0 0 var(--bg-white),
+ inset 0 0 0 0 var(--bg-white);
+}
+
+.preloader .line {
+ width: 1px;
+ height: 100%;
+ background-color: var(--bg-black);
+ transition: var(--transition-2);
+ animation: loading 1000ms linear forwards;
+}
+
+@keyframes loading {
+ 0% { transform: scaleY(0); }
+ 100% { transform: scaleY(0.3); }
+}
+
+.preloader.loaded .line { animation: loaded 500ms ease forwards; }
+
+@keyframes loaded {
+ 0% { transform: scaleY(0.3); }
+
+ 100% {
+ transform: scaleY(1);
+ opacity: 0;
+ }
+}
+
+
+
+
+
+/*-----------------------------------*\
+ #HEADER
+\*-----------------------------------*/
+
+.header .btn { display: none; }
+
+.header {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ background-color: var(--bg-black);
+ padding-block: 20px;
+ z-index: 4;
+}
+
+.header.active {
+ position: fixed;
+ background-color: var(--bg-jet);
+ padding-block: 10px;
+ animation: slideIn 500ms ease-out forwards;
+}
+
+@keyframes slideIn {
+ 0% {
+ opacity: 0;
+ transform: translateY(-100%);
+ }
+
+ 100% {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+.header .container {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.nav-open-btn {
+ width: 50px;
+ height: 50px;
+ display: grid;
+ place-content: center;
+ gap: 6px;
+}
+
+.nav-open-btn .line {
+ width: 24px;
+ height: 2px;
+ background-color: var(--bg-black);
+ transition: var(--transition-1);
+}
+
+.nav-open-btn:is(:hover, :focus-visible) .line { background-color: var(--bg-white); }
+
+.nav-open-btn:is(:hover, :focus-visible) .line-1 { transform: scaleX(0.7); }
+
+.nav-open-btn::before { background-color: var(--bg-white); }
+
+.nav-open-btn::after { background-color: var(--bg-black); }
+
+.navbar {
+ position: fixed;
+ background-color: var(--bg-black);
+ top: 0;
+ left: -300px;
+ width: 100%;
+ max-width: 300px;
+ height: 100vh;
+ padding: 25px 20px;
+ visibility: hidden;
+ transition: 250ms var(--cubic-in);
+ z-index: 3;
+}
+
+.navbar.active {
+ transform: translateX(300px);
+ visibility: visible;
+ transition: 500ms var(--cubic-out);
+}
+
+.navbar-top {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding-block-end: 20px;
+ border-block-end: 1px solid var(--border-smoky-black);
+ margin-block-end: 10px;
+}
+
+.nav-close-btn {
+ width: 30px;
+ height: 30px;
+ background-color: var(--bg-smoky-black);
+ color: var(--text-white);
+ font-size: 2rem;
+ display: grid;
+ place-items: center;
+}
+
+.nav-close-btn ion-icon { --ionicon-stroke-width: 50px; }
+
+.navbar-link {
+ padding: 8px;
+ margin-block-start: 4px;
+}
+
+.navbar-link:is(:hover, :focus-visible) { color: var(--text-white); }
+
+.overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100vh;
+ background-color: var(--bg-black);
+ opacity: 0;
+ pointer-events: none;
+ z-index: 2;
+ transition: var(--transition-1);
+}
+
+.overlay.active {
+ opacity: 0.5;
+ pointer-events: all;
+}
+
+
+
+
+
+/*-----------------------------------*\
+ #HERO
+\*-----------------------------------*/
+
+.hero {
+ position: relative;
+ padding-block-start: 120px;
+}
+
+.hero .container {
+ display: grid;
+ gap: 50px;
+}
+
+.banner-outline {
+ position: relative;
+ max-width: max-content;
+ margin-inline: auto;
+}
+
+.banner-outline::after {
+ top: 20px;
+ right: 0;
+ width: 100%;
+ height: 100%;
+ outline: 1px solid var(--border-eerie-black);
+ border-radius: var(--radius-pill);
+}
+
+.hero-banner {
+ position: relative;
+ border-radius: var(--radius-pill);
+}
+
+.hero-banner::after {
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ background-image: var(--gradient-1);
+ opacity: 0.7;
+ pointer-events: none;
+}
+
+.banner-outline .span {
+ position: absolute;
+ bottom: 40px;
+ left: 50%;
+ transform: translateX(-50%);
+ font-size: var(--fontSize-4);
+ min-width: max-content;
+ z-index: 1;
+}
+
+.hero .btn {
+ margin-block: 20px;
+ margin-inline: auto;
+}
+
+.hero .shape {
+ position: absolute;
+ max-width: 100%;
+ z-index: -1;
+}
+
+.hero .shape-1 {
+ top: -60px;
+ left: 120px;
+}
+
+.hero .shape-2 {
+ top: 180px;
+ left: 0;
+}
+
+
+
+
+
+/*-----------------------------------*\
+ #SERVICE
+\*-----------------------------------*/
+
+.service {
+ border-block-start: 1px solid var(--border-eerie-black);
+ margin-block-start: var(--section-spacing);
+}
+
+.service .container { padding-inline: 0; }
+
+.service-item { border-block-end: 1px solid var(--border-eerie-black); }
+
+.service-card {
+ position: relative;
+ padding-block: 45px;
+}
+
+.service-card .card-icon {
+ max-width: max-content;
+ margin-inline: auto;
+ transition: var(--transition-1);
+}
+
+.service-card .card-title {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -100%);
+ color: var(--text-white);
+ font-size: var(--fontSize-5);
+ font-weight: var(--weight-regular);
+ line-height: 1.3;
+ opacity: 0;
+ transition: var(--transition-1);
+}
+
+.service-card:is(:hover, :focus-visible) .card-title {
+ opacity: 1;
+ transform: translate(-50%, -50%);
+}
+
+.service-card:is(:hover, :focus-visible) .card-icon { opacity: 0; }
+
+
+
+
+
+/*-----------------------------------*\
+ #ABOUT
+\*-----------------------------------*/
+
+.tab-container { border: 1px solid var(--border-eerie-black); }
+
+.tab-btn {
+ width: 100%;
+ padding-block: 16px;
+ border-block-end: 1px solid var(--border-eerie-black);
+ transition: var(--transition-1);
+}
+
+.tab-btn:is(:hover, :focus-visible, .active) { background: var(--bg-eerie-black); }
+
+.tab-content {
+ display: none;
+ padding: 30px;
+}
+
+.tab-content.active {
+ display: block;
+ animation: fade 500ms linear forwards;
+}
+
+@keyframes fade {
+ 0% { opacity: 0; }
+ 100% { opacity: 1; }
+}
+
+.tab-content .grid-list {
+ display: grid;
+ gap: 30px;
+}
+
+.tab-content .section-title { margin-block-end: 30px; }
+
+.tab-content .section-text,
+.about-item:not(:last-child) { margin-block-end: 20px; }
+
+.about-item .span { line-height: 1.4; }
+
+.social-list {
+ display: flex;
+ align-items: center;
+ gap: 20px;
+}
+
+.social-link { color: var(--text-white); }
+
+.skill-wrapper {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-block: 30px 12px;
+}
+
+.skill-wrapper .span {
+ font-family: var(--fontFamily-recoleta);
+ font-weight: var(--weight-medium);
+}
+
+.progress-bar {
+ background-color: var(--bg-smoky-black);
+ height: 4px;
+}
+
+.progress-fill {
+ background-color: var(--bg-white);
+ height: 100%;
+}
+
+.interview-card { position: relative; }
+
+.interview-card .btn {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 60px;
+ height: 60px;
+ justify-content: center;
+ border-radius: var(--radius-circle);
+ color: var(--text-smoky-black);
+}
+
+.interview-card .btn::before,
+.interview-card .btn::after { border-radius: inherit; }
+
+.interview-card .btn::before { background-color: var(--bg-white); }
+
+.interview-card .btn:is(:hover, :focus-visible) { color: var(--text-white); }
+
+.exhibition-card { position: relative; }
+
+.exhibition-card .card-icon {
+ position: absolute;
+ top: 30px;
+ right: 30px;
+ background-color: var(--bg-white);
+ width: 40px;
+ height: 40px;
+ border-radius: var(--radius-circle);
+ color: var(--bg-smoky-black);
+ display: grid;
+ place-items: center;
+}
+
+
+
+
+
+/*-----------------------------------*\
+ #CTA
+\*-----------------------------------*/
+
+.cta { border-block: 1px solid var(--border-eerie-black); }
+
+.cta .section-title::before {
+ content: "";
+ display: block;
+ background-color: var(--bg-white);
+ width: 60px;
+ height: 30px;
+ border-radius: 30px 30px 0 0;
+ margin-inline: auto;
+ margin-block-end: 15px;
+}
+
+.cta .btn {
+ margin-inline: auto;
+ margin-block-start: 30px;
+}
+
+
+
+
+
+/*-----------------------------------*\
+ #PROJECT
+\*-----------------------------------*/
+
+.project-card .card-banner::before {
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ background-color: var(--bg-rich-black-fogra-29);
+ background-image: var(--gradient-2);
+ opacity: 0;
+ transition: var(--transition-1);
+}
+
+.project-card .card-banner:is(:hover, :focus-within)::before { opacity: 0.9; }
+
+.project-card .btn {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -100%);
+ min-width: max-content;
+ opacity: 0;
+ transition: var(--transition-2);
+}
+
+.project-card .card-banner:is(:hover, :focus-within) .btn {
+ transform: translate(-50%, -50%);
+ opacity: 1;
+}
+
+.project-card .card-content { padding: 24px 30px 0; }
+
+.project-card .card-subtitle {
+ font-size: var(--fontSize-10);
+ text-transform: uppercase;
+ letter-spacing: 2px;
+ margin-block-end: 10px;
+}
+
+.project-card .card-title {
+ display: inline;
+ background-image: linear-gradient(var(--bg-white), var(--bg-white));
+ background-repeat: no-repeat;
+ background-position: left bottom;
+ background-size: 0 1px;
+ transition: var(--transition-1);
+}
+
+.project-card .card-title:is(:hover, :focus-visible) { background-size: 100% 1px; }
+
+.slider-list {
+ display: flex;
+ align-items: flex-start;
+ gap: 30px;
+ overflow: auto;
+ scroll-snap-type: inline mandatory;
+ padding-block-end: 5px;
+}
+
+.slider-list::-webkit-scrollbar { display: none; }
+
+.slider-item {
+ min-width: 100%;
+ scroll-snap-align: start;
+}
+
+
+
+
+
+/*-----------------------------------*\
+ #TESTIMONIALS
+\*-----------------------------------*/
+
+.testi { border-block: 1px solid var(--border-eerie-black); }
+
+.testi-content { padding-inline-start: 15px; }
+
+.testi .section-text {
+ text-indent: -15px;
+ line-height: 1.5;
+ margin-block-end: 20px;
+}
+
+.profile-card .card-banner { display: none; }
+
+.profile-card .card-subtitle { font-size: var(--fontSize-10); }
+
+
+
+
+
+/*-----------------------------------*\
+ #CONTACT
+\*-----------------------------------*/
+
+.contact .section-title {
+ font-size: var(--fontSize-1);
+ margin-block-end: 25px;
+}
+
+.contact-content {
+ display: grid;
+ gap: 60px;
+}
+
+.contact-form .input-field {
+ height: 50px;
+ padding-block: 12px;
+ margin-block-end: 20px;
+ color: var(--text-white);
+ outline: none;
+ border-block-end: 1px solid var(--border-eerie-black);
+ transition: border-color var(--transition-1);
+}
+
+.contact-form .input-field::placeholder { color: var(--text-light-gray); }
+
+.contact-form .input-field:focus { border-color: var(--border-light-gray); }
+
+textarea.input-field {
+ min-height: 165px;
+ resize: none;
+}
+
+.contact-form .btn { margin-block-start: 30px; }
+
+.contact .map {
+ width: 100%;
+ filter: grayscale(1);
+}
+
+.contact-item {
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ gap: 15px;
+}
+
+.contact-item:not(:last-child) {
+ padding-block-end: 30px;
+ border-block-end: 1px solid var(--border-eerie-black);
+ margin-block-end: 30px;
+}
+
+.contact-item .title { color: var(--text-light-gray); }
+
+
+
+
+
+/*-----------------------------------*\
+ #FOOTER
+\*-----------------------------------*/
+
+.footer { border-block-start: 1px solid var(--border-eerie-black); }
+
+.footer .container {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ gap: 20px;
+}
+
+.copyright {
+ flex-grow: 1;
+ font-family: var(--fontFamily-recoleta);
+}
+
+.back-top-btn .span { display: none; }
+
+.back-top-btn {
+ color: var(--text-white);
+ padding: 32px 16px;
+ border-inline: 1px solid var(--border-eerie-black);
+}
+
+
+
+
+
+/*-----------------------------------*\
+ #CUSTOM CURSOR
+\*-----------------------------------*/
+
+.cursor-dot,
+.cursor-outline { display: none; }
+
+
+
+
+
+/*-----------------------------------*\
+ #MEDIA QUERIES
+\*-----------------------------------*/
+
+/**
+ * responsive for large than 575px screen
+ */
+
+@media (min-width: 575px) {
+
+ /**
+ * CUSTOM PROPERTY
+ */
+
+ :root {
+
+ /**
+ * TYPOGRAPHY
+ */
+
+ /* font size */
+ --fontSize-1: 5.6rem;
+ --fontSize-5: 3.2rem;
+
+ }
+
+
+
+ /**
+ * REUSED STYLE
+ */
+
+ .container {
+ max-width: 540px;
+ width: 100%;
+ margin-inline: auto;
+ }
+
+
+
+ /**
+ * HERO
+ */
+
+ .hero .banner-outline { max-width: 410px; }
+
+ .hero .banner-outline::after { right: -15px; }
+
+
+
+ /**
+ * SERVICE
+ */
+
+ .service .container { max-width: unset; }
+
+ .service-list {
+ display: flex;
+ flex-wrap: wrap;
+ }
+
+ .service-item { width: 50%; }
+
+ .service-item:nth-child(2n) {
+ border-inline-start: 1px solid var(--border-eerie-black);
+ }
+
+ .service-card .card-title { --fontSize-5: 2.4rem; }
+
+
+
+ /**
+ * ABOUT
+ */
+
+ .tab-btn-list {
+ display: flex;
+ flex-wrap: wrap;
+ }
+
+ .tab-btn-item {
+ width: 50%;
+ flex-grow: 1;
+ }
+
+ .tab-btn-item:nth-child(2n) {
+ border-inline-start: 1px solid var(--border-eerie-black);
+ }
+
+ .tab-content { padding: 40px; }
+
+ .about-list {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ }
+
+ .interview-card {
+ max-width: max-content;
+ margin-inline: auto;
+ }
+
+
+
+ /**
+ * TESTIMONIALS
+ */
+
+ .profile-card .card-banner {
+ display: block;
+ border-radius: var(--radius-circle);
+ }
+
+ .testi .profile-card {
+ display: flex;
+ align-items: center;
+ gap: 20px;
+ }
+
+}
+
+
+
+
+
+/**
+ * responsive for large than 768px screen
+ */
+
+@media (min-width: 768px) {
+
+ /**
+ * CUSTOM PROPERTY
+ */
+
+ :root {
+
+ /**
+ * TYPOGRAPHY
+ */
+
+ /* font size */
+ --fontSize-1: 6.6rem;
+
+ /**
+ * SPACING
+ */
+
+ --section-spacing: 100px;
+
+ }
+
+
+
+ /**
+ * REUSED STYLE
+ */
+
+ .container { max-width: 720px; }
+
+
+
+ /**
+ * HERO
+ */
+
+ .hero { text-align: left; }
+
+ .hero .container {
+ grid-template-columns: 1fr 1fr;
+ align-items: center;
+ gap: 40px;
+ }
+
+ .banner-outline { order: 1; }
+
+ .hero .btn { margin-inline: 0; }
+
+
+
+ /**
+ * SERVICE
+ */
+
+ .service-item { width: 25%; }
+
+ .service-item:not(:last-child) {
+ border-inline-end: 1px solid var(--border-eerie-black);
+ }
+
+
+
+ /**
+ * ABOUT
+ */
+
+ .tab-btn-item { width: 20%; }
+
+ .tab-btn-item:not(:first-child) {
+ border-inline-start: 1px solid var(--border-eerie-black);
+ }
+
+ :is([data-tab-content="interview"], [data-tab-content="exhibition"]) .grid-list {
+ grid-template-columns: 1fr 1fr;
+ }
+
+
+
+ /**
+ * CTA
+ */
+
+ .cta { padding-block: 40px; }
+
+ .cta .section-title {
+ display: flex;
+ align-items: center;
+ }
+
+ .cta .section-title::before {
+ border-radius: 0 30px 30px 0;
+ width: 30px;
+ height: 60px;
+ flex-shrink: 0;
+ margin-block-end: 0;
+ }
+
+
+
+ /**
+ * PROJECTS
+ */
+
+ .slider-item { min-width: calc(50% - 15px); }
+
+
+
+ /**
+ * CUSTOM CURSOR
+ */
+
+ .cursor-dot,
+ .cursor-outline {
+ display: block;
+ position: fixed;
+ top: -60px;
+ left: -60px;
+ transform: translate(-50%, -50%);
+ border-radius: var(--radius-circle);
+ z-index: 10;
+ transition-property: opacity, transform;
+ transition-duration: 300ms;
+ transition-timing-function: ease-in-out;
+ pointer-events: none;
+ }
+
+ .cursor-dot {
+ width: 60px;
+ height: 60px;
+ background-color: var(--bg-white);
+ transform: translate(-50%, -50%) scale(0.1);
+ }
+
+ .cursor-dot.hovered {
+ transform: translate(-50%, -50%) scale(1);
+ mix-blend-mode: exclusion;
+ }
+
+ .cursor-outline {
+ width: 30px;
+ height: 30px;
+ border: 2px solid var(--border-white);
+ opacity: 0.5;
+ transition-duration: 100ms;
+ }
+
+ .cursor-outline.hovered { opacity: 0; }
+
+}
+
+
+
+
+
+/**
+ * responsive for large than 992px screen
+ */
+
+@media (min-width: 992px) {
+
+ /**
+ * CUSTOM PROPERTY
+ */
+
+ :root {
+
+ /**
+ * TYPOGRAPHY
+ */
+
+ /* font size */
+ --fontSize-2: 7rem;
+
+ }
+
+
+
+ /**
+ * REUSED STYLE
+ */
+
+ .container { max-width: 960px; }
+
+
+
+ /**
+ * HEADER
+ */
+
+ .header .container {
+ margin-inline: 0;
+ min-width: 100%;
+ }
+
+ .nav-open-btn,
+ .navbar-top { display: none; }
+
+ .navbar {
+ all: unset;
+ display: block;
+ }
+
+ .navbar-list {
+ display: flex;
+ gap: 16px;
+ }
+
+ .header .btn { display: flex; }
+
+
+
+ /**
+ * HERO
+ */
+
+ .hero .container { grid-template-columns: 1fr 0.7fr; }
+
+ .hero .banner-outline { max-width: 366px; }
+
+ .hero .wrapper {
+ display: flex;
+ align-items: center;
+ gap: 30px;
+ }
+
+ .hero .btn { flex-shrink: 0; }
+
+
+
+ /**
+ * SERVICE
+ */
+
+ .service { border-block-end: 1px solid var(--border-eerie-black); }
+
+ .service-list {
+ gap: 158px;
+ flex-wrap: nowrap;
+ }
+
+ .service .service-item {
+ border-inline: 1px solid var(--border-eerie-black);
+ border-block-end: none;
+ }
+
+
+
+ /**
+ * ABOUT
+ */
+
+ .tab-content .grid-list { grid-template-columns: 1fr 1fr; }
+
+ :is([data-tab-content="interview"], [data-tab-content="exhibition"], [data-tab-content="awward"]) .grid-list {
+ grid-template-columns: repeat(3, 1fr);
+ }
+
+
+
+ /**
+ * CTA
+ */
+
+ .cta .container {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ }
+
+ .cta .section-title {
+ text-align: left;
+ gap: 30px;
+ }
+
+ .cta .btn {
+ flex-shrink: 0;
+ margin: 0;
+ }
+
+
+
+ /**
+ * PROJECTS
+ */
+
+ .slider-item { min-width: calc(33.33% - 20px); }
+
+
+
+ /**
+ * CONTACT
+ */
+
+ .contact-content {
+ grid-template-columns: 0.8fr 1fr 0.6fr;
+ gap: 30px;
+ align-items: center;
+ }
+
+
+
+ /**
+ * BACK TO TOP
+ */
+
+ .back-top-btn .span { display: block; }
+
+ .back-top-btn {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ }
+
+}
+
+
+
+
+
+/**
+ * responsive for large than 1200px screen
+ */
+
+@media (min-width: 1200px) {
+
+ /**
+ * CUSTOM PROPERTY
+ */
+
+ :root {
+
+ /**
+ * TYPOGRAPHY
+ */
+
+ /* font size */
+ --fontSize-2: 9rem;
+ --fontSize-4: 4rem;
+ --fontSize-5: 4rem;
+ --fontSize-6: 2rem;
+
+ }
+
+
+
+ /**
+ * REUSED STYLE
+ */
+
+ .container,
+ .service .container { max-width: 1200px; }
+
+ .h1 { line-height: 1.1; }
+
+
+
+ /**
+ * HEADER
+ */
+
+ .header { padding-block: 40px; }
+
+ .header .container { padding-inline: 60px; }
+
+ .navbar-list { gap: 50px; }
+
+
+
+ /**
+ * HERO
+ */
+
+ .hero { padding-block-start: 160px; }
+
+ .hero .banner-outline { max-width: 410px; }
+
+ .hero-text { max-width: 30ch; }
+
+
+
+ /**
+ * ABOUT
+ */
+
+ .tab-content { padding: 60px; }
+
+ .tab-content .grid-list { gap: 50px; }
+
+}
+
+
+
+
+
+/**
+ * responsive for large than 1400px screen
+ */
+
+@media (min-width: 1400px) {
+
+ /**
+ * REUSED STYLE
+ */
+
+ .container,
+ .service .container { max-width: 1320px; }
+
+
+
+ /**
+ * HEADER
+ */
+
+ .header { padding-inline: 90px; }
+
+
+
+ /**
+ * HERO
+ */
+
+ .hero .container { grid-template-columns: 1fr 0.85fr; }
+
+}
\ No newline at end of file
diff --git a/mir coder portfolio/assets/font/font.css b/mir coder portfolio/assets/font/font.css
new file mode 100644
index 0000000..d150292
--- /dev/null
+++ b/mir coder portfolio/assets/font/font.css
@@ -0,0 +1,31 @@
+/*-----------------------------------*\
+ #style.css
+\*-----------------------------------*/
+
+/**
+ * copyright 2022 codewithsadee
+ */
+
+
+
+/**
+ * RECOLETA FONT
+ */
+
+@font-face {
+ font-family: 'Recoleta';
+ src: local('Recoleta Regular'), local('Recoleta-Regular'),
+ url('./recoleta/Recoleta-Regular.woff2') format('woff2');
+ font-weight: 400;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: 'Recoleta';
+ src: local('Recoleta Medium'), local('Recoleta-Medium'),
+ url('./recoleta/Recoleta-Medium.woff2') format('woff2');
+ font-weight: 500;
+ font-style: normal;
+ font-display: swap;
+}
\ No newline at end of file
diff --git a/mir coder portfolio/assets/font/recoleta/Recoleta-Medium.woff2 b/mir coder portfolio/assets/font/recoleta/Recoleta-Medium.woff2
new file mode 100644
index 0000000..44678ae
Binary files /dev/null and b/mir coder portfolio/assets/font/recoleta/Recoleta-Medium.woff2 differ
diff --git a/mir coder portfolio/assets/font/recoleta/Recoleta-Regular.woff2 b/mir coder portfolio/assets/font/recoleta/Recoleta-Regular.woff2
new file mode 100644
index 0000000..fb9dc51
Binary files /dev/null and b/mir coder portfolio/assets/font/recoleta/Recoleta-Regular.woff2 differ
diff --git a/mir coder portfolio/assets/images/85377861.jpg b/mir coder portfolio/assets/images/85377861.jpg
new file mode 100644
index 0000000..85c9075
Binary files /dev/null and b/mir coder portfolio/assets/images/85377861.jpg differ
diff --git a/mir coder portfolio/assets/images/Boos Your Business.png b/mir coder portfolio/assets/images/Boos Your Business.png
new file mode 100644
index 0000000..52796ec
Binary files /dev/null and b/mir coder portfolio/assets/images/Boos Your Business.png differ
diff --git a/mir coder portfolio/assets/images/CV.pdf b/mir coder portfolio/assets/images/CV.pdf
new file mode 100644
index 0000000..c9b0285
Binary files /dev/null and b/mir coder portfolio/assets/images/CV.pdf differ
diff --git a/mir coder portfolio/assets/images/IMG_9217.JPG b/mir coder portfolio/assets/images/IMG_9217.JPG
new file mode 100644
index 0000000..4fceaab
Binary files /dev/null and b/mir coder portfolio/assets/images/IMG_9217.JPG differ
diff --git a/mir coder portfolio/assets/images/PAK-FOOD__1_-removebg-preview.png b/mir coder portfolio/assets/images/PAK-FOOD__1_-removebg-preview.png
new file mode 100644
index 0000000..721eb27
Binary files /dev/null and b/mir coder portfolio/assets/images/PAK-FOOD__1_-removebg-preview.png differ
diff --git a/mir coder portfolio/assets/images/Thumbs.db b/mir coder portfolio/assets/images/Thumbs.db
new file mode 100644
index 0000000..3c3b29e
Binary files /dev/null and b/mir coder portfolio/assets/images/Thumbs.db differ
diff --git a/mir coder portfolio/assets/images/Untitled design (2)-fotor-bg-remover-2024031774340.png b/mir coder portfolio/assets/images/Untitled design (2)-fotor-bg-remover-2024031774340.png
new file mode 100644
index 0000000..a893e06
Binary files /dev/null and b/mir coder portfolio/assets/images/Untitled design (2)-fotor-bg-remover-2024031774340.png differ
diff --git a/mir coder portfolio/assets/images/Untitled design.png b/mir coder portfolio/assets/images/Untitled design.png
new file mode 100644
index 0000000..51fca9b
Binary files /dev/null and b/mir coder portfolio/assets/images/Untitled design.png differ
diff --git a/mir coder portfolio/assets/images/about-banner.jpg b/mir coder portfolio/assets/images/about-banner.jpg
new file mode 100644
index 0000000..856a37e
Binary files /dev/null and b/mir coder portfolio/assets/images/about-banner.jpg differ
diff --git a/mir coder portfolio/assets/images/awward-2.jpg b/mir coder portfolio/assets/images/awward-2.jpg
new file mode 100644
index 0000000..7cbc01e
Binary files /dev/null and b/mir coder portfolio/assets/images/awward-2.jpg differ
diff --git a/mir coder portfolio/assets/images/awward-3.jpg b/mir coder portfolio/assets/images/awward-3.jpg
new file mode 100644
index 0000000..cfb8008
Binary files /dev/null and b/mir coder portfolio/assets/images/awward-3.jpg differ
diff --git a/mir coder portfolio/assets/images/contact-icon-1.png b/mir coder portfolio/assets/images/contact-icon-1.png
new file mode 100644
index 0000000..b4cc31c
Binary files /dev/null and b/mir coder portfolio/assets/images/contact-icon-1.png differ
diff --git a/mir coder portfolio/assets/images/contact-icon-2.png b/mir coder portfolio/assets/images/contact-icon-2.png
new file mode 100644
index 0000000..ab93e62
Binary files /dev/null and b/mir coder portfolio/assets/images/contact-icon-2.png differ
diff --git a/mir coder portfolio/assets/images/contact-icon-3.png b/mir coder portfolio/assets/images/contact-icon-3.png
new file mode 100644
index 0000000..e72eae0
Binary files /dev/null and b/mir coder portfolio/assets/images/contact-icon-3.png differ
diff --git a/mir coder portfolio/assets/images/download (1).png b/mir coder portfolio/assets/images/download (1).png
new file mode 100644
index 0000000..4a63578
Binary files /dev/null and b/mir coder portfolio/assets/images/download (1).png differ
diff --git a/mir coder portfolio/assets/images/exhibition-1.jpg b/mir coder portfolio/assets/images/exhibition-1.jpg
new file mode 100644
index 0000000..60228ad
Binary files /dev/null and b/mir coder portfolio/assets/images/exhibition-1.jpg differ
diff --git a/mir coder portfolio/assets/images/exhibition-2.jpg b/mir coder portfolio/assets/images/exhibition-2.jpg
new file mode 100644
index 0000000..dc6471d
Binary files /dev/null and b/mir coder portfolio/assets/images/exhibition-2.jpg differ
diff --git a/mir coder portfolio/assets/images/exhibition-3.jpg b/mir coder portfolio/assets/images/exhibition-3.jpg
new file mode 100644
index 0000000..dd3643d
Binary files /dev/null and b/mir coder portfolio/assets/images/exhibition-3.jpg differ
diff --git a/mir coder portfolio/assets/images/exhibition-4.jpg b/mir coder portfolio/assets/images/exhibition-4.jpg
new file mode 100644
index 0000000..ce22327
Binary files /dev/null and b/mir coder portfolio/assets/images/exhibition-4.jpg differ
diff --git a/mir coder portfolio/assets/images/exhibition-5.jpg b/mir coder portfolio/assets/images/exhibition-5.jpg
new file mode 100644
index 0000000..fffce2e
Binary files /dev/null and b/mir coder portfolio/assets/images/exhibition-5.jpg differ
diff --git a/mir coder portfolio/assets/images/exhibition-6.jpg b/mir coder portfolio/assets/images/exhibition-6.jpg
new file mode 100644
index 0000000..9287735
Binary files /dev/null and b/mir coder portfolio/assets/images/exhibition-6.jpg differ
diff --git a/mir coder portfolio/assets/images/gym 2.png b/mir coder portfolio/assets/images/gym 2.png
new file mode 100644
index 0000000..0ceb8af
Binary files /dev/null and b/mir coder portfolio/assets/images/gym 2.png differ
diff --git a/mir coder portfolio/assets/images/hero-shape-1.png b/mir coder portfolio/assets/images/hero-shape-1.png
new file mode 100644
index 0000000..6442818
Binary files /dev/null and b/mir coder portfolio/assets/images/hero-shape-1.png differ
diff --git a/mir coder portfolio/assets/images/hero-shape-2.png b/mir coder portfolio/assets/images/hero-shape-2.png
new file mode 100644
index 0000000..5985984
Binary files /dev/null and b/mir coder portfolio/assets/images/hero-shape-2.png differ
diff --git a/mir coder portfolio/assets/images/interview-1.jpg b/mir coder portfolio/assets/images/interview-1.jpg
new file mode 100644
index 0000000..326626d
Binary files /dev/null and b/mir coder portfolio/assets/images/interview-1.jpg differ
diff --git a/mir coder portfolio/assets/images/interview-2.jpg b/mir coder portfolio/assets/images/interview-2.jpg
new file mode 100644
index 0000000..59d8b2a
Binary files /dev/null and b/mir coder portfolio/assets/images/interview-2.jpg differ
diff --git a/mir coder portfolio/assets/images/interview-3.jpg b/mir coder portfolio/assets/images/interview-3.jpg
new file mode 100644
index 0000000..5ec7a75
Binary files /dev/null and b/mir coder portfolio/assets/images/interview-3.jpg differ
diff --git a/mir coder portfolio/assets/images/logo.svg b/mir coder portfolio/assets/images/logo.svg
new file mode 100644
index 0000000..54a2c4f
--- /dev/null
+++ b/mir coder portfolio/assets/images/logo.svg
@@ -0,0 +1,7 @@
+
+
+
+
+
+
+
diff --git a/mir coder portfolio/assets/images/project-2.jpg b/mir coder portfolio/assets/images/project-2.jpg
new file mode 100644
index 0000000..274313a
Binary files /dev/null and b/mir coder portfolio/assets/images/project-2.jpg differ
diff --git a/mir coder portfolio/assets/images/project-3.jpg b/mir coder portfolio/assets/images/project-3.jpg
new file mode 100644
index 0000000..35e253c
Binary files /dev/null and b/mir coder portfolio/assets/images/project-3.jpg differ
diff --git a/mir coder portfolio/assets/images/project-4.jpg b/mir coder portfolio/assets/images/project-4.jpg
new file mode 100644
index 0000000..0b885ba
Binary files /dev/null and b/mir coder portfolio/assets/images/project-4.jpg differ
diff --git a/mir coder portfolio/assets/images/project-5.jpg b/mir coder portfolio/assets/images/project-5.jpg
new file mode 100644
index 0000000..73eb23a
Binary files /dev/null and b/mir coder portfolio/assets/images/project-5.jpg differ
diff --git a/mir coder portfolio/assets/images/service-icon-1.svg b/mir coder portfolio/assets/images/service-icon-1.svg
new file mode 100644
index 0000000..bc68275
--- /dev/null
+++ b/mir coder portfolio/assets/images/service-icon-1.svg
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/mir coder portfolio/assets/images/service-icon-2.svg b/mir coder portfolio/assets/images/service-icon-2.svg
new file mode 100644
index 0000000..a5be3fc
--- /dev/null
+++ b/mir coder portfolio/assets/images/service-icon-2.svg
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/mir coder portfolio/assets/images/service-icon-3.svg b/mir coder portfolio/assets/images/service-icon-3.svg
new file mode 100644
index 0000000..3acb855
--- /dev/null
+++ b/mir coder portfolio/assets/images/service-icon-3.svg
@@ -0,0 +1,10 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/mir coder portfolio/assets/images/service-icon-4.svg b/mir coder portfolio/assets/images/service-icon-4.svg
new file mode 100644
index 0000000..e1ea2df
--- /dev/null
+++ b/mir coder portfolio/assets/images/service-icon-4.svg
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/mir coder portfolio/assets/images/skill-banner.jpg b/mir coder portfolio/assets/images/skill-banner.jpg
new file mode 100644
index 0000000..b8763e9
Binary files /dev/null and b/mir coder portfolio/assets/images/skill-banner.jpg differ
diff --git a/mir coder portfolio/assets/js/script.js b/mir coder portfolio/assets/js/script.js
new file mode 100644
index 0000000..9c54286
--- /dev/null
+++ b/mir coder portfolio/assets/js/script.js
@@ -0,0 +1,161 @@
+'use strict';
+
+
+
+/**
+ * PRELOADER
+ */
+
+const preloader = document.querySelector("[data-preloader]");
+
+window.addEventListener("DOMContentLoaded", function () {
+ preloader.classList.add("loaded");
+ document.body.classList.add("loaded");
+});
+
+
+
+/**
+ * add event on multiple elements
+ */
+
+const addEventOnElements = function (elements, eventType, callback) {
+ for (let i = 0, len = elements.length; i < len; i++) {
+ elements[i].addEventListener(eventType, callback);
+ }
+}
+
+
+
+/**
+ * Mobile navbar toggle
+ */
+
+const navbar = document.querySelector("[data-navbar]");
+const navTogglers = document.querySelectorAll("[data-nav-toggler]");
+const navLinks = document.querySelectorAll("[data-nav-link]");
+const overlay = document.querySelector("[data-overlay]");
+
+addEventOnElements(navTogglers, "click", function () {
+ navbar.classList.toggle("active");
+ overlay.classList.toggle("active");
+ document.body.classList.toggle("nav-active");
+});
+
+addEventOnElements(navLinks, "click", function () {
+ navbar.classList.remove("active");
+ overlay.classList.remove("active");
+ document.body.classList.remove("nav-active");
+});
+
+
+
+/**
+ * Header active
+ */
+
+const header = document.querySelector("[data-header]");
+
+window.addEventListener("scroll", function () {
+ header.classList[window.scrollY > 100 ? "add" : "remove"]("active");
+});
+
+
+
+/**
+ * Element tilt effect
+ */
+
+const tiltElements = document.querySelectorAll("[data-tilt]");
+
+const initTilt = function (event) {
+
+ /** get tilt element center position */
+ const centerX = this.offsetWidth / 2;
+ const centerY = this.offsetHeight / 2;
+
+ const tiltPosY = ((event.offsetX - centerX) / centerX) * 10;
+ const tiltPosX = ((event.offsetY - centerY) / centerY) * 10;
+
+ this.style.transform = `perspective(1000px) rotateX(${tiltPosX}deg) rotateY(${tiltPosY - (tiltPosY * 2)}deg)`;
+
+}
+
+addEventOnElements(tiltElements, "mousemove", initTilt);
+
+addEventOnElements(tiltElements, "mouseout", function () {
+ this.style.transform = `perspective(1000px) rotateX(0deg) rotateY(0deg)`;
+});
+
+
+
+/**
+ * Tab content
+ */
+
+const tabBtns = document.querySelectorAll("[data-tab-btn]");
+const tabContents = document.querySelectorAll("[data-tab-content]");
+
+let lastActiveTabBtn = tabBtns[0];
+let lastActiveTabContent = tabContents[0];
+
+const filterContent = function () {
+
+ if (!(lastActiveTabBtn === this)) {
+
+ lastActiveTabBtn.classList.remove("active");
+ lastActiveTabContent.classList.remove("active");
+
+ this.classList.add("active");
+ lastActiveTabBtn = this;
+
+ const currentTabContent = document.querySelector(`[data-tab-content="${this.dataset.tabBtn}"]`);
+
+ currentTabContent.classList.add("active");
+ lastActiveTabContent = currentTabContent;
+
+ }
+
+}
+
+addEventOnElements(tabBtns, "click", filterContent);
+
+
+
+/**
+ * Custom cursor
+ */
+
+const cursors = document.querySelectorAll("[data-cursor]");
+const hoveredElements = [...document.querySelectorAll("button"), ...document.querySelectorAll("a")];
+
+window.addEventListener("mousemove", function (event) {
+
+ const posX = event.clientX;
+ const posY = event.clientY;
+
+ /** cursor dot position */
+ cursors[0].style.left = `${posX}px`;
+ cursors[0].style.top = `${posY}px`;
+
+ /** cursor outline position */
+ setTimeout(function () {
+ cursors[1].style.left = `${posX}px`;
+ cursors[1].style.top = `${posY}px`;
+ }, 80);
+
+});
+
+/** add hovered class when mouseover on hoverElements */
+addEventOnElements(hoveredElements, "mouseover", function () {
+ for (let i = 0, len = cursors.length; i < len; i++) {
+ cursors[i].classList.add("hovered");
+ }
+});
+
+/** remove hovered class when mouseout on hoverElements */
+addEventOnElements(hoveredElements, "mouseout", function () {
+ for (let i = 0, len = cursors.length; i < len; i++) {
+ cursors[i].classList.remove("hovered");
+ }
+});
\ No newline at end of file
diff --git a/mir coder portfolio/index.html b/mir coder portfolio/index.html
new file mode 100644
index 0000000..031c7f2
--- /dev/null
+++ b/mir coder portfolio/index.html
@@ -0,0 +1,932 @@
+
+
+
+
+
+
+
+
+
+ Mir Coder - Portfolio
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Mir Coder
+
+
+
+
+
+
Get Your Website From Me.
+
+
+
+ Download CV
+
+
+
+
+
+ From device to cloud to edge Innovate from anywhere with secure
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ About Me
+
+
+
+ Skillset
+
+
+
+ Interview
+
+
+
+ Awwards
+
+
+
+ Exhibition
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Only Motto Your Work is Mine Work
+
+
+
+ I specialize in building new websites from start and enhancing existing ones. With my expertise,
+ I can create attractive and user-friendly interfaces while ensuring smooth functionality on the backend.
+
+
+
+
+
+ Name
+
+ Mir Coder
+
+
+
+ Phone Number
+
+ +92 31. 858. 311. 56
+
+
+
+ Email Address
+
+ mirkashi111@gmail.comkashifmir302@gmail.com
+
+
+
+ Social Network
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ We help to create visual strategies.
+
+
+
+ Skilled Full Stack Web Developer proficient in HTML, CSS, Javascript, PHP, MySQL, and Laravel.
+ I specialize in building new websites from start and enhancing existing ones.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Play
+
+
+
+
+
+
Play
+
+
+
+
+
+
Play
+
+
+
+
+
+
+
+
+ We’re a team of creatives who are excited about unique ideas and help IT-tech companies to make identity
+ by crafting UI/UX and Web Development.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ “ The website developer exceeded expectations, delivering a user-friendly interface, extensive customization options, and responsive design. Their prompt support and
+ competitive pricing make them a top choice for businesses of all sizes. Highly recommended. ”
+
+
+
+
+
+
+
+
+
Mustafa Khan.
+
+
Software Engineering.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file