{"id":13401262,"url":"https://github.com/rammcodes/Dopefolio","last_synced_at":"2025-03-14T07:31:27.197Z","repository":{"id":38200012,"uuid":"399552006","full_name":"rammcodes/Dopefolio","owner":"rammcodes","description":"Dopefolio 🔥 - Portfolio Template for Developers 🚀","archived":false,"fork":false,"pushed_at":"2024-10-26T18:28:04.000Z","size":2236,"stargazers_count":3409,"open_issues_count":25,"forks_count":688,"subscribers_count":39,"default_branch":"main","last_synced_at":"2024-10-29T15:09:23.832Z","etag":null,"topics":["css","css3","html5","javascript","npm","portfolio","portfolio-page","portfolio-site","portfolio-template","portfolio-website","sass","scss"],"latest_commit_sha":null,"homepage":"https://dopefolio.netlify.app","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rammcodes.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2021-08-24T17:32:41.000Z","updated_at":"2024-10-28T16:47:27.000Z","dependencies_parsed_at":"2024-01-16T09:05:46.418Z","dependency_job_id":"afd97764-494a-4d54-9176-32180c04572b","html_url":"https://github.com/rammcodes/Dopefolio","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rammcodes%2FDopefolio","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rammcodes%2FDopefolio/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rammcodes%2FDopefolio/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rammcodes%2FDopefolio/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rammcodes","download_url":"https://codeload.github.com/rammcodes/Dopefolio/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243541816,"owners_count":20307765,"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":["css","css3","html5","javascript","npm","portfolio","portfolio-page","portfolio-site","portfolio-template","portfolio-website","sass","scss"],"created_at":"2024-07-30T19:01:00.581Z","updated_at":"2025-03-14T07:31:27.179Z","avatar_url":"https://github.com/rammcodes.png","language":"HTML","readme":"# Dopefolio 🔥\n\n## A Blazing Fast Multipage Portfolio Template for Developers 🚀\n\n## [Demo Link](https://dopefolio.netlify.app) 🔗\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://i.postimg.cc/CxZXqhWM/ezgif-com-video-to-gif-1.gif\" alt=\"Dopefolio Demo\" width=\"100%\" /\u003e\n  \u003cbr\u003e\n\u003c/div\u003e\n\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n---\n\n\u003cbr/\u003e\n\n## ( Update ): Project Achievement 🏆 \n\n**Dopefolio** has been listed as the **Hottest Frontend Tool of 2021** According to **CSS Tricks** 🥳. Thanks to all of you for supporting this project 🙌\n\n**[Link to the CSS tricks article on Dopefolio](https://css-tricks.com/hottest-front-end-tools-in-2021/#aa-58-dopefolio)**   \n\n\u003cbr/\u003e\n\n----\n\n\u003cbr/\u003e\n\n## Features\n\n- ### **Easy to Setup 💯** \n- ### **Free to Use ( OpenSource ) 🥳** \n- ### **No Additional Frameworks 🤘** \n- ### **No Additional Libraries 🙌** \n- ### **Multi Page 💎** \n- ### **Fully Responsive 🚀** \n- ### **Super Fast and Optimized for SEO ⚡** \n- ### **Great Audits Score 🎖️** \n\n\u003cimg src=\"https://i.ibb.co/1dD8Mky/Screenshot-from-2021-08-28-14-38-30.png\" alt=\"Dopefolio Audits\" width=\"100%\" /\u003e\n\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n## Test the template with different colors on the playground link 🚀\n\n## [Playground Link](https://dopefolio-playground.netlify.app) 🔗\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://i.postimg.cc/xjsqN9GG/ezgif-com-gif-maker-2.gif\" alt=\"Dopefolio Playground\" width=\"100%\" /\u003e\n  \u003cbr\u003e\n\u003c/div\u003e\n\n\u003cbr/\u003e\n\n----\n\n\u003cbr/\u003e\n\n## Technologies used 🛠️\n\n- **HTML** 🚀\n- **CSS** 🚀\n- **JavaScript** 🚀\n- **SASS** 🚀\n\n---\n\n\u003cbr/\u003e\n\n## How To Use 🔧\n\nFrom your command line, first clone Dopefolio:\n\n```bash\n# Clone this repository\n$ git clone https://github.com/rammcodes/dopefolio\n\n# Go into the repository\n$ cd dopefolio\n\n# Remove current origin repository\n$ git remote remove origin\n```\n\n\u003cbr/\u003e\n\nThen you can install the dependencies\n\nUsing NPM:\n\n```bash\n# Install dependencies\n$ npm install\n\n# Listen to changes in CSS Preprocessor files ( SASS files )\n$ npm run compile:scss\n```\n\nOnce you run `npm run compile:scss`, then open the `index.html` inside your favorite browser or using the live server extension.\n\n\u003cbr\u003e\n\n---\n\n\u003cbr\u003e\n\n## Template Instructions:\n\n## Step 1 - STYLES\n\nMake sure you have started the SASS to CSS compilation by running\n\n```bash\n$ npm run compile:scss\n```\n\nChange the color theme of the website.\n\nGo to `sass/abstracts/_variables.scss` and change the value of this sass variable called `$themeClrPrimary` to your preferred HEX color.\n\n```scss\n// Default value\n$themeClrPrimary: #0062b9;\n```\n\n**NOTE**: I highly recommend to checkout the [Dopefolio Playground Link](https://dopefolio-playground.netlify.app) to test the template with different colors and see which color do you like the most.\n\n\u003cbr/\u003e\n\n---\n\n\u003cbr/\u003e\n\n## Step 2 - Homepage\n\nGo to `/index.html` and fill your information, there are 6 sections:\n\n### Header of Homepage\n\n- On `.header__logo-img`, Add your own Image, Better if the background of the image is transparent so the background can match the theme color. To remove the background of your image, you can visit remove.bg where you can upload your image and it will remove the background of it.\n- On `.header__logo-sub`, Add your own Name.\n\n```html\n\u003c!-- **** Header of Homepage **** --\u003e\n\u003cheader class=\"header\"\u003e\n  \u003cdiv class=\"header__content\"\u003e\n    \u003cdiv class=\"header__logo-container\"\u003e\n      \u003cdiv class=\"header__logo-img-cont\"\u003e\n        \u003cimg\n          src=\"./assets/png/john-doe.png\"\n          alt=\"Ram Maheshwari Logo Image\"\n          class=\"header__logo-img\"\n        /\u003e\n      \u003c/div\u003e\n      \u003cspan class=\"header__logo-sub\"\u003eJohn Doe\u003c/span\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"header__main\"\u003e\n      \u003cul class=\"header__links\"\u003e\n        \u003cli class=\"header__link-wrapper\"\u003e\n          \u003ca href=\"./\" class=\"header__link\"\u003e Home \u003c/a\u003e\n        \u003c/li\u003e\n        \u003cli class=\"header__link-wrapper\"\u003e\n          \u003ca href=\"./#about\" class=\"header__link\"\u003eAbout \u003c/a\u003e\n        \u003c/li\u003e\n        \u003cli class=\"header__link-wrapper\"\u003e\n          \u003ca href=\"./#projects\" class=\"header__link\"\u003e Projects \u003c/a\u003e\n        \u003c/li\u003e\n        \u003cli class=\"header__link-wrapper\"\u003e\n          \u003ca href=\"./#contact\" class=\"header__link\"\u003e Contact \u003c/a\u003e\n        \u003c/li\u003e\n      \u003c/ul\u003e\n      \u003cdiv class=\"header__main-ham-menu-cont\"\u003e\n        \u003cimg\n          src=\"./assets/svg/ham-menu.svg\"\n          alt=\"hamburger menu\"\n          class=\"header__main-ham-menu\"\n        /\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"header__sm-menu\"\u003e\n    \u003cdiv class=\"header__sm-menu-content\"\u003e\n      \u003cul class=\"header__sm-menu-links\"\u003e\n        \u003cli class=\"header__sm-menu-link\"\u003e\n          \u003ca href=\"./\"\u003e Home \u003c/a\u003e\n        \u003c/li\u003e\n\n        \u003cli class=\"header__sm-menu-link\"\u003e\n          \u003ca href=\"./#about\"\u003e About \u003c/a\u003e\n        \u003c/li\u003e\n\n        \u003cli class=\"header__sm-menu-link\"\u003e\n          \u003ca href=\"./#projects\"\u003e Projects \u003c/a\u003e\n        \u003c/li\u003e\n\n        \u003cli class=\"header__sm-menu-link\"\u003e\n          \u003ca href=\"./#contact\"\u003e Contact \u003c/a\u003e\n        \u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/header\u003e\n\u003c!-- END Header --\u003e\n```\n\n### Hero Section of Homepage\n\n- On `.heading-primary`, put your custom title.\n- On `.text-primary`, put a short description about yourself.\n- On `.home-hero__social-icon-link`, fill the href attribute with a link related to your social media account.\n\n```html\n\u003c!-- **** Hero Section of Homepage **** --\u003e\n\u003csection class=\"home-hero\"\u003e\n  \u003cdiv class=\"home-hero__content\"\u003e\n    \u003ch1 class=\"heading-primary\"\u003eHey, My name is John Doe\u003c/h1\u003e\n    \u003cdiv class=\"home-hero__info\"\u003e\n      \u003cp class=\"text-primary\"\u003e\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic facilis\n        tempora explicabo quae quod deserunt eius sapiente solutions for complex\n        problems\n      \u003c/p\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"home-hero__cta\"\u003e\n      \u003ca href=\"./#projects\" class=\"btn btn--bg\"\u003eProjects\u003c/a\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"home-hero__socials\"\u003e\n    \u003cdiv class=\"home-hero__social\"\u003e\n      \u003ca href=\"#\" class=\"home-hero__social-icon-link\"\u003e\n        \u003cimg\n          src=\"./assets/png/linkedin-ico.png\"\n          alt=\"icon\"\n          class=\"home-hero__social-icon\"\n        /\u003e\n      \u003c/a\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"home-hero__social\"\u003e\n      \u003ca href=\"#\" class=\"home-hero__social-icon-link\"\u003e\n        \u003cimg\n          src=\"./assets/png/github-ico.png\"\n          alt=\"icon\"\n          class=\"home-hero__social-icon\"\n        /\u003e\n      \u003c/a\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"home-hero__social\"\u003e\n      \u003ca href=\"#\" class=\"home-hero__social-icon-link\"\u003e\n        \u003cimg\n          src=\"./assets/png/twitter-ico.png\"\n          alt=\"icon\"\n          class=\"home-hero__social-icon\"\n        /\u003e\n      \u003c/a\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"home-hero__social\"\u003e\n      \u003ca href=\"#\" class=\"home-hero__social-icon-link\"\u003e\n        \u003cimg\n          src=\"./assets/png/yt-ico.png\"\n          alt=\"icon\"\n          class=\"home-hero__social-icon\"\n        /\u003e\n      \u003c/a\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"home-hero__social\"\u003e\n      \u003ca\n        href=\"#\"\n        class=\"home-hero__social-icon-link home-hero__social-icon-link--bd-none\"\n      \u003e\n        \u003cimg\n          src=\"./assets/png/insta-ico.png\"\n          alt=\"icon\"\n          class=\"home-hero__social-icon\"\n        /\u003e\n      \u003c/a\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"home-hero__mouse-scroll-cont\"\u003e\n    \u003cdiv class=\"mouse\"\u003e\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/section\u003e\n\u003c!-- /END Hero Section --\u003e\n```\n\n### About Section\n\n- On `.heading-sec__sub`, put a short description about the section.\n- On `.about__content-details-para`, put your details here and use `\u003cstrong\u003e\u003c/strong\u003e` tag to highlight specific keywords.\n- On `.skills__skill`, mention your skill one by one.\n\n```html\n\u003c!-- **** About Section of Homepage **** --\u003e\n\u003csection id=\"about\" class=\"about sec-pad\"\u003e\n  \u003cdiv class=\"main-container\"\u003e\n    \u003ch2 class=\"heading heading-sec heading-sec__mb-med\"\u003e\n      \u003cspan class=\"heading-sec__main\"\u003eAbout Me\u003c/span\u003e\n      \u003cspan class=\"heading-sec__sub\"\u003e\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic facilis\n        tempora explicabo quae quod deserunt eius sapiente\n      \u003c/span\u003e\n    \u003c/h2\u003e\n    \u003cdiv class=\"about__content\"\u003e\n      \u003cdiv class=\"about__content-main\"\u003e\n        \u003ch3 class=\"about__content-title\"\u003eGet to know me!\u003c/h3\u003e\n        \u003cdiv class=\"about__content-details\"\u003e\n          \u003cp class=\"about__content-details-para\"\u003e\n            Hey! It's\n            \u003cstrong\u003eJohn Doe\u003c/strong\u003e\n            and I'm a \u003cstrong\u003e Frontend Web Developer \u003c/strong\u003e located in Los\n            Angeles. I've done\n            \u003cstrong\u003e remote \u003c/strong\u003e\n            projects for agencies, consulted for startups, and collaborated with\n            talented people to create\n            \u003cstrong\u003edigital products \u003c/strong\u003e\n            for both business and consumer use.\n          \u003c/p\u003e\n          \u003cp class=\"about__content-details-para\"\u003e\n            I'm a bit of a digital product junky. Over the years, I've used\n            hundreds of web and mobile apps in different industries and\n            verticals. Feel free to\n            \u003cstrong\u003econtact\u003c/strong\u003e me here.\n          \u003c/p\u003e\n        \u003c/div\u003e\n        \u003ca href=\"./#contact\" class=\"btn btn--med btn--theme dynamicBgClr\"\n          \u003eContact\u003c/a\n        \u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"about__content-skills\"\u003e\n        \u003ch3 class=\"about__content-title\"\u003eMy Skills\u003c/h3\u003e\n        \u003cdiv class=\"skills\"\u003e\n          \u003cdiv class=\"skills__skill\"\u003eHTML\u003c/div\u003e\n          \u003cdiv class=\"skills__skill\"\u003eCSS\u003c/div\u003e\n          \u003cdiv class=\"skills__skill\"\u003eJavaScript\u003c/div\u003e\n          \u003cdiv class=\"skills__skill\"\u003eReact\u003c/div\u003e\n          \u003cdiv class=\"skills__skill\"\u003eSASS\u003c/div\u003e\n          \u003cdiv class=\"skills__skill\"\u003eGIT\u003c/div\u003e\n          \u003cdiv class=\"skills__skill\"\u003eShopify\u003c/div\u003e\n          \u003cdiv class=\"skills__skill\"\u003eWordpress\u003c/div\u003e\n          \u003cdiv class=\"skills__skill\"\u003eGoogle ADS\u003c/div\u003e\n          \u003cdiv class=\"skills__skill\"\u003eFacebook Ads\u003c/div\u003e\n          \u003cdiv class=\"skills__skill\"\u003eAndroid\u003c/div\u003e\n          \u003cdiv class=\"skills__skill\"\u003eIOS\u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/section\u003e\n\u003c!-- END About Section --\u003e\n```\n\n### Projects\n\n- On `.heading-sec__sub`, put a short description about the section.\n- `.projects__row` is the row for each project in your portfolio.\n- One `.projects__row` for each project in your portfolio ( so for example, if you have 3 projects then you need 3 `.projects__row` one by one).\n\n- Inside each `projects__row`, there are 4 main elements.\n\n  - Project Image is located at `.projects__row-img` where you can add the URL for your project mockup/image. You can use websites like [Media Modifier](https://mediamodifier.com/) and [SmartMockups](https://smartmockups.com) to generate mockups for free. Just make sure to crop the extra white space around your mockup so the mockups can look bigger and the size of the mockup file will be less.\n\n  - `.projects__row-content-title` is where you need to add your Project title.\n  - `.projects__row-content-desc` is where you need to add a short 2-3 lines description of your project. As there's going to be a separate page for each project so there you can add all the details for each project on the specific project page.\n  - The Anchor tag ( **Case Study** button) on press will take you to the details page for each project ( For example: If you click the **Case Study** button of Project 1 then it will take you to the `project-1.html` file where you will have all the details about that particular project).\n\nCurrently, I have already added a separate for each project ( considering there are 3 projects ) the file names are `project-1.html`, `project-2.html`, and `project-3.html`. They all contain the same code only the project title, description and image will change. If you like to add more projects then you can just create a new file for it and paste the same code that we have in `project-1.html` as the code is going to be the same and the only thing that you need to change is the data inside each project.\n\n```html\n\u003c!-- **** Projects Section of Homepage **** --\u003e\n\u003csection id=\"projects\" class=\"projects sec-pad\"\u003e\n  \u003cdiv class=\"main-container\"\u003e\n    \u003ch2 class=\"heading heading-sec heading-sec__mb-bg\"\u003e\n      \u003cspan class=\"heading-sec__main\"\u003eProjects\u003c/span\u003e\n      \u003cspan class=\"heading-sec__sub\"\u003e\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic facilis\n        tempora explicabo quae quod deserunt eius sapiente\n      \u003c/span\u003e\n    \u003c/h2\u003e\n\n    \u003cdiv class=\"projects__content\"\u003e\n      \u003cdiv class=\"projects__row\"\u003e\n        \u003cdiv class=\"projects__row-img-cont\"\u003e\n          \u003cimg\n            src=\"./assets/jpeg/project-mockup-example.jpeg\"\n            alt=\"Software Screenshot\"\n            class=\"projects__row-img\"\n            loading=\"lazy\"\n          /\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"projects__row-content\"\u003e\n          \u003ch3 class=\"projects__row-content-title\"\u003eProject 1\u003c/h3\u003e\n          \u003cp class=\"projects__row-content-desc\"\u003e\n            Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic facilis\n            tempora, explicabo quae quod deserunt eius sapiente praesentium.\n          \u003c/p\u003e\n          \u003ca\n            href=\"./project-1.html\"\n            class=\"btn btn--med btn--theme dynamicBgClr\"\n            target=\"_blank\"\n            \u003eCase Study\u003c/a\n          \u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"projects__row\"\u003e\n        \u003cdiv class=\"projects__row-img-cont\"\u003e\n          \u003cimg\n            src=\"./assets/jpeg/project-mockup-example.jpeg\"\n            alt=\"Software Screenshot\"\n            class=\"projects__row-img\"\n            loading=\"lazy\"\n          /\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"projects__row-content\"\u003e\n          \u003ch3 class=\"projects__row-content-title\"\u003eProject 2\u003c/h3\u003e\n          \u003cp class=\"projects__row-content-desc\"\u003e\n            Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic facilis\n            tempora, explicabo quae quod deserunt eius sapiente praesentium.\n          \u003c/p\u003e\n          \u003ca\n            href=\"./project-2.html\"\n            class=\"btn btn--med btn--theme dynamicBgClr\"\n            target=\"_blank\"\n            \u003eCase Study\u003c/a\n          \u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"projects__row\"\u003e\n        \u003cdiv class=\"projects__row-img-cont\"\u003e\n          \u003cimg\n            src=\"./assets/jpeg/project-mockup-example.jpeg\"\n            alt=\"Software Screenshot\"\n            class=\"projects__row-img\"\n            loading=\"lazy\"\n          /\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"projects__row-content\"\u003e\n          \u003ch3 class=\"projects__row-content-title\"\u003eProject 3\u003c/h3\u003e\n          \u003cp class=\"projects__row-content-desc\"\u003e\n            Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic facilis\n            tempora, explicabo quae quod deserunt eius sapiente praesentium.\n          \u003c/p\u003e\n          \u003ca\n            href=\"./project-3.html\"\n            class=\"btn btn--med btn--theme dynamicBgClr\"\n            target=\"_blank\"\n            \u003eCase Study\u003c/a\n          \u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/section\u003e\n\u003c!-- END Projects Section --\u003e\n```\n\n### Contact Section\n\n- On `.heading-sec__sub`, put a short description about the section.\n- `.contact__form-field` is the field inside form. Currently, there are 3 fields but you can add more fields as per your need but just make sure to change the name of **label** and **input/textarea** inside it.\n\nIf you like to know how to submit forms so you can receive the form details in your email then highly recommend using **formspree.io** as it's easier to set up and free to use. If you are using **Netlify** to host the site then Netlify has an inbuilt form receiver which you can use instead of **formspree**.\n\n```html\n\u003c!-- **** Contact Section of Homepage **** --\u003e\n\u003csection id=\"contact\" class=\"contact sec-pad dynamicBg\"\u003e\n  \u003cdiv class=\"main-container\"\u003e\n    \u003ch2 class=\"heading heading-sec heading-sec__mb-med\"\u003e\n      \u003cspan class=\"heading-sec__main heading-sec__main--lt\"\u003eContact\u003c/span\u003e\n      \u003cspan class=\"heading-sec__sub heading-sec__sub--lt\"\u003e\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic facilis\n        tempora explicabo quae quod deserunt eius sapiente\n      \u003c/span\u003e\n    \u003c/h2\u003e\n    \u003cdiv class=\"contact__form-container\"\u003e\n      \u003cform action=\"#\" class=\"contact__form\"\u003e\n        \u003cdiv class=\"contact__form-field\"\u003e\n          \u003clabel class=\"contact__form-label\" for=\"name\"\u003eName\u003c/label\u003e\n          \u003cinput\n            required\n            placeholder=\"Enter Your Name\"\n            type=\"text\"\n            class=\"contact__form-input\"\n            name=\"name\"\n            id=\"name\"\n          /\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"contact__form-field\"\u003e\n          \u003clabel class=\"contact__form-label\" for=\"email\"\u003eEmail\u003c/label\u003e\n          \u003cinput\n            required\n            placeholder=\"Enter Your Email\"\n            type=\"text\"\n            class=\"contact__form-input\"\n            name=\"email\"\n            id=\"email\"\n          /\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"contact__form-field\"\u003e\n          \u003clabel class=\"contact__form-label\" for=\"message\"\u003eMessage\u003c/label\u003e\n          \u003ctextarea\n            required\n            cols=\"30\"\n            rows=\"10\"\n            class=\"contact__form-input\"\n            placeholder=\"Enter Your Message\"\n            name=\"message\"\n            id=\"message\"\n          \u003e\u003c/textarea\u003e\n        \u003c/div\u003e\n        \u003cbutton type=\"submit\" class=\"btn btn--theme contact__btn\"\u003e\n          Submit\n        \u003c/button\u003e\n      \u003c/form\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/section\u003e\n\u003c!-- END Contact Section --\u003e\n```\n\n\n\n### Footer Section\n\n- Inside h4 tag with the class `heading heading-sm text-lt` add your name.\n- On `.main-footer__short-desc` put a short description about yourself.\n- On Anchor tag inside `.main-footer__social-cont`, fill the href attribute with a link related to your social media account.\n\n```html\n\u003c!-- **** Footer Section **** --\u003e\n\u003cfooter class=\"main-footer\"\u003e\n  \u003cdiv class=\"main-container\"\u003e\n    \u003cdiv class=\"main-footer__upper\"\u003e\n      \u003cdiv class=\"main-footer__row main-footer__row-1\"\u003e\n        \u003ch2 class=\"heading heading-sm main-footer__heading-sm\"\u003e\n          \u003cspan\u003eSocial\u003c/span\u003e\n        \u003c/h2\u003e\n        \u003cdiv class=\"main-footer__social-cont\"\u003e\n          \u003ca target=\"_blank\" rel=\"noreferrer\" href=\"#\"\u003e\n            \u003cimg\n              class=\"main-footer__icon\"\n              src=\"./assets/png/linkedin-ico.png\"\n              alt=\"icon\"\n            /\u003e\n          \u003c/a\u003e\n          \u003ca target=\"_blank\" rel=\"noreferrer\" href=\"#\"\u003e\n            \u003cimg\n              class=\"main-footer__icon\"\n              src=\"./assets/png/github-ico.png\"\n              alt=\"icon\"\n            /\u003e\n          \u003c/a\u003e\n          \u003ca target=\"_blank\" rel=\"noreferrer\" href=\"#\"\u003e\n            \u003cimg\n              class=\"main-footer__icon\"\n              src=\"./assets/png/twitter-ico.png\"\n              alt=\"icon\"\n            /\u003e\n          \u003c/a\u003e\n          \u003ca target=\"_blank\" rel=\"noreferrer\" href=\"#\"\u003e\n            \u003cimg\n              class=\"main-footer__icon\"\n              src=\"./assets/png/yt-ico.png\"\n              alt=\"icon\"\n            /\u003e\n          \u003c/a\u003e\n          \u003ca target=\"_blank\" rel=\"noreferrer\" href=\"#\"\u003e\n            \u003cimg\n              class=\"main-footer__icon main-footer__icon--mr-none\"\n              src=\"./assets/png/insta-ico.png\"\n              alt=\"icon\"\n            /\u003e\n          \u003c/a\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"main-footer__row main-footer__row-2\"\u003e\n        \u003ch4 class=\"heading heading-sm text-lt\"\u003eJohn Doe\u003c/h4\u003e\n        \u003cp class=\"main-footer__short-desc\"\u003e\n          Lorem ipsum dolor sit amet consectetur adipisicing elit facilis\n          tempora explicabo quae quod deserunt\n        \u003c/p\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n\n    \u003cdiv class=\"main-footer__lower\"\u003e\n      \u0026copy; Copyright 2021. Made by\n      \u003ca rel=\"noreferrer\" target=\"_blank\" href=\"https://rammaheshwari.com\"\n        \u003eRam Maheshwari\u003c/a\n      \u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/footer\u003e\n\u003c!-- END Footer Section --\u003e\n```\n\n\u003cbr/\u003e\n\n---\n\n\u003cbr/\u003e\n\n## Step 3 - Project Page\n\nEach project will have its own Page. The project page will have important details about the project like the Project Title, Description, Technologies, Project Links, etc.\n\n### Project Hero Section\n\n- On `.heading-primary` add the Project Title.\n- On `.text-primary` add a short description about the Project.\n- On Anchor Tag that says **Live Link** with class `btn btn--bg`, add the Project Live Link as the value for the href attribute.\n\n\u003c!-- **** Project Section **** --\u003e\n\n```html\n\u003csection class=\"project-cs-hero\"\u003e\n  \u003cdiv class=\"project-cs-hero__content\"\u003e\n    \u003ch1 class=\"heading-primary\"\u003eProject 1\u003c/h1\u003e\n    \u003cdiv class=\"project-cs-hero__info\"\u003e\n      \u003cp class=\"text-primary\"\u003e\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos in\n        numquam incidunt earum quaerat cum fuga, atque similique natus nobis\n        sit.\n      \u003c/p\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"project-cs-hero__cta\"\u003e\n      \u003ca href=\"#\" class=\"btn btn--bg\" target=\"_blank\"\u003eLive Link\u003c/a\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/section\u003e\n```\n\n\u003c!-- **** END Project Hero Section **** --\u003e\n\n### Project Details Section\n\n- On `.project-details__showcase-img`, change the value of **src** to the location/link of Project Mockup.\n- On `.project-details__desc-para` to add a detailed paragraph describing your project. Use multiple `.project-details__desc-para` elements for multiple paragraphs.\n- On `.skills` mention the skills that were used to build the project inside `.skills__skill` to mention each skill.\n- On Anchor Tag that says **Live Link** with class `btn btn--med btn--theme project-details__links-btn`, add the Project Live Link as the value for the href attribute.\n- On Anchor Tag that says **Code Link** with class `btn btn--med btn--theme-inv project-details__links-btn`, add the Project's Code Link ( Repository Link ) as the value for the href attribute.\n\n\u003c!-- **** Project Details Section **** --\u003e\n\n```html\n\u003csection class=\"project-details\"\u003e\n  \u003cdiv class=\"main-container\"\u003e\n    \u003cdiv class=\"project-details__content\"\u003e\n      \u003cdiv class=\"project-details__showcase-img-cont\"\u003e\n        \u003cimg\n          src=\"./assets/jpeg/project-mockup-example.jpeg\"\n          alt=\"Project Image\"\n          class=\"project-details__showcase-img\"\n        /\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"project-details__content-main\"\u003e\n        \u003cdiv class=\"project-details__desc\"\u003e\n          \u003ch3 class=\"project-details__content-title\"\u003eProject Overview\u003c/h3\u003e\n          \u003cp class=\"project-details__desc-para\"\u003e\n            Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque alias\n            tenetur minus quaerat aliquid, aut provident blanditiis, deleniti\n            aspernatur ipsam eaque veniam voluptatem corporis vitae mollitia\n            laborum corrupti ullam rem. Lorem ipsum dolor sit amet consectetur\n            adipisicing elit. Neque alias tenetur minus quaerat aliquid, aut\n            provident blanditiis, deleniti aspernatur ipsam eaque veniam\n            voluptatem corporis vitae mollitia laborum corrupti ullam rem?\n          \u003c/p\u003e\n          \u003cp class=\"project-details__desc-para\"\u003e\n            Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque alias\n            tenetur minus quaerat aliquid, aut provident blanditiis, deleniti\n            aspernatur ipsam eaque veniam voluptatem corporis vitae mollitia\n            laborum corrupti ullam rem?\n          \u003c/p\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"project-details__tools-used\"\u003e\n          \u003ch3 class=\"project-details__content-title\"\u003eTools Used\u003c/h3\u003e\n          \u003cdiv class=\"skills\"\u003e\n            \u003cdiv class=\"skills__skill\"\u003eHTML\u003c/div\u003e\n            \u003cdiv class=\"skills__skill\"\u003eCSS\u003c/div\u003e\n            \u003cdiv class=\"skills__skill\"\u003eJavaScript\u003c/div\u003e\n            \u003cdiv class=\"skills__skill\"\u003eReact\u003c/div\u003e\n            \u003cdiv class=\"skills__skill\"\u003eSASS\u003c/div\u003e\n            \u003cdiv class=\"skills__skill\"\u003eGIT\u003c/div\u003e\n            \u003cdiv class=\"skills__skill\"\u003eShopify\u003c/div\u003e\n            \u003cdiv class=\"skills__skill\"\u003eWordpress\u003c/div\u003e\n            \u003cdiv class=\"skills__skill\"\u003eGoogle ADS\u003c/div\u003e\n            \u003cdiv class=\"skills__skill\"\u003eFacebook Ads\u003c/div\u003e\n            \u003cdiv class=\"skills__skill\"\u003eAndroid\u003c/div\u003e\n            \u003cdiv class=\"skills__skill\"\u003eIOS\u003c/div\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"project-details__links\"\u003e\n          \u003ch3 class=\"project-details__content-title\"\u003eSee Live\u003c/h3\u003e\n          \u003ca\n            href=\"#\"\n            class=\"btn btn--med btn--theme project-details__links-btn\"\n            target=\"_blank\"\n            \u003eLive Link\u003c/a\n          \u003e\n          \u003ca\n            href=\"#\"\n            class=\"btn btn--med btn--theme-inv project-details__links-btn\"\n            target=\"_blank\"\n            \u003eCode Link\u003c/a\n          \u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/section\u003e\n```\n\n\u003c!-- **** END Project Details Section **** --\u003e\n\n\u003cbr\u003e\n\n---\n\n\u003cbr\u003e\n\n\n## Deployment 📦\n\nOnce you have done with your setup. You need to put your website online!\n\nI highly recommend to use [Netlify](https://netlify.com) to achieve this on the EASIEST WAY\n\nWhenever you wanna host a new site on Netlify. You will need to press the **Create New Site** button from the Netlify's dashboard once you login into Netlify.\n\nOnce you press the **Create Site Button** then you will have to follow the 3 steps:\n\n1. You will have to select your Github account.\n\n2. Then select the Repository which you wanna host, in this case its your Portfolio website ( Clone of Dopefolio )\n\n3. In the 3rd step, you will have to modify the **Site settings and deploy**, keep everything as it is but just make sure to modify the **Build command** and set its value to **npm run build** and then modify the **Publish directory** and set its value to **/** as shown in the  **image** below\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://i.ibb.co/hDTTrPB/Set-Build-Command-to.png\" alt=\"Dopefolio Build Command Example and Publish Directory Value\" width=\"100%\" /\u003e\n  \u003cbr\u003e\n\u003c/div\u003e\n\n\u003cbr\u003e\n\nThen hit the **Deploy site** button and your **Portfolio Site** is live 🥳\n\n\u003cbr\u003e\n\n---\n\n\u003cbr\u003e\n\n## Give a Star ⭐\n\nIf you like this project then give it a **Github** star by pressing the **Star** button ⭐\n\n\u003cbr\u003e\n\n---\n\n\u003cbr\u003e\n\n## Author 👨‍💻\n\n- **Ram Maheshwari** - **[Linkedin](https://linkedin.com/in/rammcodes)**, **[Instagram](https://instagram.com/rammcodes_)**, **[Twitter](https://twitter.com/rammcodes)**, **[Github](https://github.com/rammcodes)**, **[Portfolio](https://rammaheshwari.com)**  \n\n\u003cbr\u003e\n\n#### Note: \nI'm currently looking for good **Job Opportunities** both **Remote ( Worldwide )** and **On-Site ( Anywhere in India )**. So, if you have a good opportunity that matches my skills experience then you can contact me on my **[Linkedin](https://linkedin.com/in/rammcodes)** or my email id **rammcodes@gmail.com** 🙌\n\n\n\u003cbr\u003e\n\n---\n\n\u003cbr\u003e\n\n## Special Thanks ❤️\n\nSpecial thanks to [Jacobo Martínez](https://github.com/cobidev) for inspiring me to create something useful for the Developer Community. **Jacobo** is the creator of [Simplefolio](https://github.com/cobidev/simplefolio) which is another great Portfolio website Template for Developers. Check it out and show him some love ❤️\n\n\u003cbr\u003e\n\n---\n\n\u003cbr\u003e\n\n## License 📄\n\nThis project is licensed under the  **GPL-3.0** License - see the [LICENSE](LICENSE) file for details\n\n","funding_links":[],"categories":["HTML","Themes"],"sub_categories":["Misc."],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frammcodes%2FDopefolio","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frammcodes%2FDopefolio","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frammcodes%2FDopefolio/lists"}