{"id":15066592,"url":"https://github.com/j11tendra/intrinsic","last_synced_at":"2026-01-02T23:05:43.949Z","repository":{"id":194528274,"uuid":"690677110","full_name":"J11tendra/Intrinsic","owner":"J11tendra","description":"Intrinsic is a interior design company providing clean designs. This website features a add to card, shop, contact page.","archived":false,"fork":false,"pushed_at":"2024-03-29T15:53:07.000Z","size":30583,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-22T14:45:40.348Z","etag":null,"topics":["html5-css3-javascript","scss-framework","ui-design"],"latest_commit_sha":null,"homepage":"https://intrinsic-xi.vercel.app","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/J11tendra.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-09-12T16:43:37.000Z","updated_at":"2024-08-21T12:10:20.000Z","dependencies_parsed_at":"2023-09-13T21:19:02.591Z","dependency_job_id":"79a59142-f0e6-47ef-bc4b-4f8b32c53153","html_url":"https://github.com/J11tendra/Intrinsic","commit_stats":null,"previous_names":["j11tendra/intrinsic"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/J11tendra%2FIntrinsic","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/J11tendra%2FIntrinsic/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/J11tendra%2FIntrinsic/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/J11tendra%2FIntrinsic/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/J11tendra","download_url":"https://codeload.github.com/J11tendra/Intrinsic/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243814893,"owners_count":20352038,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["html5-css3-javascript","scss-framework","ui-design"],"created_at":"2024-09-25T01:09:35.938Z","updated_at":"2026-01-02T23:05:43.943Z","avatar_url":"https://github.com/J11tendra.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Intrinsic - Interior Design Website\n\nInterior design is the art and science of enhancing the interior of a building to achieve a healthier and more aesthetically pleasing environment for the people who use the space. At Intrinsic, we provides professional interior design services to clients, such as homeowners, businesses, institutions, or organizations.\n\n\n## Table of Content\n\n* [Overview](#overview)\n  *  [The Challenge](#challenge)\n  *  [Screenshots](#screenshots)\n  *  [Website Preview Links](#livepreview)\n  * [Features](#features)\n\n\n* [My Process](#process)\n  *  [Build with](#builtwith)\n  *  [My Learnings](#mylearning)\n\n*  [Author](#author)\n*  [Acknowledgements](#builtwith)\n*  [Useful Links](#usefullinks)\n\n\n## Overview[](#overview)\n\n**The Challenge**\n\nThe Tablet \"Footer\" was challenging for me to code. Despite the last flex being overflowing on the x-axis, I eventually overcame the challenge and made the footer responsive for lablet as well. I defined the maximum width for footer and gap for flex to deal the problem.\n\n\n**Screenshots**\n\n![Homepage Desktop](https://github.com/J11tendra/Intrinsic/assets/108735984/339012db-26d4-4eee-b6dc-dfc5d9743344)\n![A](https://github.com/J11tendra/Intrinsic/assets/108735984/af221194-be42-4f79-b758-cc7da668a217)\n\n\n**Features**\n\n-  Fully responsive website\n-  Sematic HTML5 markdown\n-  Scalable clean code\n-  Mobile first approach\n-  Multipage\n## My Process\n\nStarted the project with simple HTML5 boilerplate and created separate SCSS and JavaScript folder for scalability.Then I went on creating variables for colors, font sizes and font weights.\n\nI created separate file for each universal section of website such as navigation bar and footer. Made use of \"Global.scss\" file to create base styling for the project which include all margins, paddings, font sizes, font color, and button styles. I placed all images and svg in separate folder for better debugging.\n\nFirstly the navigation bar was coded for mobile and then moved to the larger display sizes. Natural responsiveness approach was used to reduce the use of media queries.\n\nThe shop section was grid which adapts to display sizes. I used flexbox for about section and addded a max-width which helped me align the section horizontally.\n\nFor the testimonal and footer section again I used flex for desired alignment.\n\nNow, For the shop and about page the code basically reuseable from the component and added few specific styling using ids and class. This approach turned to write less code improve overall development productivity.\n\nThe rest all development was combination of flex, grid and long hours of debugging.\n\n**Built with**\n\n![javascript4](https://github.com/J11tendra/Intrinsic/assets/108735984/4437a469-39cc-4707-a183-d10e08767a7a)\n![scss3](https://github.com/J11tendra/Intrinsic/assets/108735984/a9245cf8-a5e6-48a1-ac37-2598486cd68b)\n\n\n\n**My learnings**\n\nThis project has been my learning ground as it pushed me to research about the bugs i encounter during development and found out some better methods to deal with the project.\n\nI figure out the better semantic way to center the buttons.\n\n\n    \u003c!-- I have the global style for buttons designs. --\u003e\n    \u003c!-- The \u003ca\u003e tag is the link to call to action. --\u003e\n    a {\n        color: $black;\n        margin: 0 auto;\n        font-weight: $reg;\n\n        @include breakpoint-up(medium) {\n            font-size: $font-5;\n        }\n    }\n\nI used margin auto for images and had its max-width set to some rem.\n\n    \u003c!-- This is a container for all shop items --\u003e\n\n    \u0026__container {\n        margin: 0 auto;\n        max-width: 25rem;\n        width: 100%;\n\n        @include breakpoint-up(medium) {\n            max-width: 48rem;\n        }\n\n        @include breakpoint-up(large) {\n            max-width: 80rem;\n        }\n\n        @include breakpoint-up(x-large) {\n            max-width: 110rem;\n        }\n    }\n\nFor the individual card\n\n\n    \u003c!-- This is individual shop item which adapts to display sizes --\u003e\n\n         \u0026__01 {\n                height: 15rem;\n                max-width: 11.5625rem;\n                width: 100%;\n                border-radius: 0.25rem;\n                background-color: $very-light-gray;\n                box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);\n\n                @include breakpoint-up(medium) {\n                    height: 26.5rem;\n                    max-width: 22.8125rem;\n                }\n\n                @include breakpoint-up(large) {\n                    height: 26.5rem;\n                    max-width: 29rem;\n                }\n\n                @include breakpoint-up(x-large) {\n                    height: 28.5rem;\n                    max-width: 30rem;\n                }\n        }\n\n\nThe Footer section which was challenging for lablet display. I used flex and column gap to stop the content from overflowing.\n\n    .links {\n        display: flex;\n        flex-direction: column;\n        gap: 1.5rem;\n        justify-content: space-between;\n        align-items: center;\n        margin: 3.75rem 0;\n\n        @include breakpoint-up(large) {\n            grid-area: links;\n            flex-direction: row;\n            align-items: flex-start;\n            gap: 4rem;\n            text-align: left;\n            margin: 0 0 3.75rem 0;\n        }\n\n        @include breakpoint-up(x-large) {\n            gap: 8rem;\n        }\n    }\n    \n## Author\n\nWebsite Design: Jitendra Choudhary\n\nDevelopment: Jitendra Choudhary\n\n\n## Acknowledgement\n\nFinally I'd like to thanks all resources i used during the development process that includes all Fontawesome icons and Freepik images.\n\n\n## Useful Links\n\n_If you would like to improve the project or have a suggestions, feedback or issues. Feel free to contact me on the above links and i'd happy to respond._\n\nEmail: [Jitendra Choudhary](info.jiitendra@gmail.com)\n\nTwitter: [JiitendraC](https://twitter.com/JiitendraC)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fj11tendra%2Fintrinsic","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fj11tendra%2Fintrinsic","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fj11tendra%2Fintrinsic/lists"}