{"id":14069336,"url":"https://github.com/AnilSeervi/DevFolio","last_synced_at":"2025-07-30T05:32:07.012Z","repository":{"id":43105161,"uuid":"286088147","full_name":"AnilSeervi/DevFolio","owner":"AnilSeervi","description":"A Modern Portfolio Template for Developers with easy setup process documented(with hosting).","archived":false,"fork":false,"pushed_at":"2024-06-24T00:24:39.000Z","size":14671,"stargazers_count":432,"open_issues_count":1,"forks_count":152,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-12-04T10:39:39.557Z","etag":null,"topics":["css","developer-portfolio","developer-portfolio-template","devfolio","html","javascript","minimal","minimal-portfolio-template","portfolio","portfolio-website","scss","simple","template"],"latest_commit_sha":null,"homepage":"https://devfolio.js.org","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AnilSeervi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"github":null,"patreon":"anilseervi","open_collective":null,"ko_fi":"anilseervi","tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2020-08-08T17:25:32.000Z","updated_at":"2024-11-22T18:48:44.000Z","dependencies_parsed_at":"2024-08-13T07:15:09.306Z","dependency_job_id":"5367a6a3-326f-49f8-b642-80ef6b1b3ee0","html_url":"https://github.com/AnilSeervi/DevFolio","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/AnilSeervi/DevFolio","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnilSeervi%2FDevFolio","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnilSeervi%2FDevFolio/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnilSeervi%2FDevFolio/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnilSeervi%2FDevFolio/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AnilSeervi","download_url":"https://codeload.github.com/AnilSeervi/DevFolio/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnilSeervi%2FDevFolio/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267815187,"owners_count":24148356,"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","status":"online","status_checked_at":"2025-07-30T02:00:09.044Z","response_time":70,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","developer-portfolio","developer-portfolio-template","devfolio","html","javascript","minimal","minimal-portfolio-template","portfolio","portfolio-website","scss","simple","template"],"created_at":"2024-08-13T07:06:51.873Z","updated_at":"2025-07-30T05:32:05.852Z","avatar_url":"https://github.com/AnilSeervi.png","language":"SCSS","readme":"\u003ch1 align=\"center\"\u003e ⚡️ DevFolio ⚡️\u003c/h1\u003e\n\n[![Github](https://img.shields.io/github/license/anilseervi/DevFolio?color=%2312c2e9\u0026logo=github\u0026style=for-the-badge)](https://github.com/AnilSeervi/DevFolio/blob/master/README.md) ![Github Stars](https://img.shields.io/github/stars/anilseervi/DevFolio?color=%23c471ed\u0026style=for-the-badge) ![Github forks](https://img.shields.io/github/forks/anilseervi/DevFolio?color=%23f64f59\u0026style=for-the-badge) ![GitHub deployments](https://img.shields.io/github/deployments/anilseervi/DevFolio/github-pages?label=Deploy\u0026logo=github\u0026style=for-the-badge)\n\n## A Modern Portfolio Template for Developers!\n\n\u003ch2 align=\"center\"\u003e\n  \u003cimg src=\"assets/devfolio.gif\" alt=\"Devfolio\" /\u003e\n\u003c/h2\u003e\n\n## Features\n\n⚡️ Modern UI Design + Reveal Animations + Hover Effects\\\n⚡️ Well organized documentation\\\n⚡️ One Page Layout\\\n⚡️ Custom SCSS\\\n⚡️ Fully Responsive\\\n⚡️ Valid HTML5 \u0026 CSS3\\\n⚡ Fast and SEO Optimized\n\nTo view a demo example, **[Click Here](https://devfolio.js.org)**\\\nTo view a live example, **[Click Here](https://anilseervi.github.io/Portfolio/)**\\\nTo view live example repo, **[Click Here](https://github.com/AnilSeervi/Portfolio/)**\n\n## Getting Started 🚀\n\nHere's a **Complete Guide** to walk you through the process of setting your own Portfolio Website with this minimal template on your local machine as well as hosting it on GitHub.\n\n### Prerequisites 📋\n\nYou'll need [VSCode](https://code.visualstudio.com/) and [Git](https://git-scm.com/) installed on your computer.\n\nYou'll also need these two extensions [Live Preview](https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server) and [Live Sass Compiler](https://marketplace.visualstudio.com/items?itemName=glenn2223.live-sass) installed in your VSCode. You will be automatically promted to install these extensions once you open this project in VSCode.\n\n---\n\n## How To Use 🔧\n\nIn VSCode, Open the terminal(\u003ckbd\u003eCtrl\u003c/kbd\u003e+\u003ckbd\u003e\\\\\u003c/kbd\u003e ) and clone the DevFolio Repo.\n\n```bash\n# Clone this repository\n$ git clone https://github.com/AnilSeervi/DevFolio.git\n\n# Go into the repository\n$ cd DevFolio\n\n# Remove current origin repository\n$ git remote remove origin\n```\n\nAnd delete the [`.github`](./.github) folder as you don't need it.\n\nNow Simply click on **Watch Sass** in the bottom status bar to watch all your `.scss` file chages and compile them to vanilla `.css`.\nAnd also open `index.html`, right click inside the file and select _Show Preview_ to start a preview at `http://127.0.0.1:3000/`.\n\n\u003ch3 align=\"center\"\u003e\nOR\n\u003c/h3\u003e\n\nPress \u003ckbd\u003eCtrl\u003c/kbd\u003e+\u003ckbd\u003eShift\u003c/kbd\u003e+\u003ckbd\u003eP\u003c/kbd\u003e or \u003ckbd\u003eF1\u003c/kbd\u003e to Show Command Palette, Search for **Live Sass: Watch Sass** and turn it on. Also search for **Live Preview: Start Server** and turn it on. Doing this will watch all your Sass files for changes and will spin up a live server for you at `http://127.0.0.1:3000/`.\n\n---\n\n## Template Instructions\n\n### Step 1 - STRUCTURE\n\nOpen [`index.html`](./index.html) and fill your information, there are 6 sections:\n\n### Head Section\n\n- Add a title to your Portfolio website within the `\u003ctitle\u003e` tag.\n- Add some keywords and description to your Portfolio website as directed in the [`index.html`](./index.html) file.\n\n```html\n\u003c!-- Title: add your Portfolio websites's title here --\u003e\n\u003ctitle\u003e[Your name here] | Developer\u003c/title\u003e\n\u003c!-- Add some coding keywords below, Ex: (javascript, yourusername, etc) --\u003e\n\u003cmeta name=\"keywords\" content=\"[username], [name], skill\" /\u003e\n\u003c!-- Improve your SEO by adding a small descrption of you --\u003e\n\u003cmeta name=\"description\" content=\"[Your name here] | Developer\" /\u003e\n```\n\n- Remove google analytics tag before pushing it to GitHub.\n\n### Hero Section\n\n- On `.hero-title`, put your custom title.\n- On `.hero-cta`, put your custom button cta.\n\n```html\n\u003c!-- Hero Section --\u003e\n\u003cdiv id=\"hero\"\u003e\n  \u003csection class=\"container\"\u003e\n    \u003ch1 class=\"hero-title\"\u003e\n      Hi, my name is \u003cspan class=\"text-color-main name\"\u003eYour Name\u003c/span\u003e\n      \u003cbr /\u003e\n      I'm the Unknown Developer.\n    \u003c/h1\u003e\n    \u003cp class=\"hero-cta\"\u003e\n      \u003ca class=\"cta-btn cta-btn--hero\" href=\"#about\"\u003eGet in touch\u003c/a\u003e\n    \u003c/p\u003e\n  \u003c/section\u003e\n  \u003ca href=\"#about\" class=\"scroll-down-link\" aria-label=\"scroll-down\"\u003e\n    \u003cdiv class=\"scroll-down\"\u003e\u003c/div\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\u003c!-- /END Hero Section --\u003e\n```\n\n### About Section\n\n- On `\u003cimg\u003e` tag, fill the `src` attribute with your profile picture, your picture must be located inside [`assets/`](./assets) folder.\n  - Recommended size for your profile image is (_450 x 450px_).\n- On `\u003cp\u003e` tag with class-name `.about-wrapper__info-text`, include information about you, I recommend to use 2 paragraphs in order to work well and a maximum of 3 paragraphs.\n- On last `\u003ca\u003e` tag, include your resume url on `href` attribute.\n\n```html\n\u003c!-- About Section --\u003e\n\u003csection id=\"about\"\u003e\n  \u003cdiv class=\"container\"\u003e\n    \u003ch2 class=\"section-title\"\u003eAbout Me\u003c/h2\u003e\n    \u003cdiv class=\"row about-wrapper\"\u003e\n      \u003cdiv class=\"about-wrapper__image\"\u003e\n        \u003cimg class=\"img-fluid\" src=\"./assets/profile.png\" alt=\"Profile Image\" /\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"about-wrapper__info\"\u003e\n        \u003cp class=\"about-wrapper__info-text\"\u003e\n          Lorem ipsum dolor sit amet consectetur adipisicing elit.\n        \u003c/p\u003e\n        \u003cp class=\"about-wrapper__info-text\"\u003e\n          Lorem ipsum dolor sit amet consectetur adipisicing elit.\n        \u003c/p\u003e\n        \u003cspan class=\"about-wrapper__cta\"\u003e\n          \u003ca href=\"#\" class=\"cta-btn cta-btn--resume\"\u003eView Resume\u003c/a\u003e\n        \u003c/span\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 Section\n\n- Each project lives inside `row` class.\n- On `\u003ch3\u003e` tag with class-name `.project-wrapper__text-title`, include your project title.\n- On `\u003cp\u003e` tag with `loremp ipsum...` text, include your project information.\n- On first `\u003ca\u003e` tag, put your project url on `href` attribute.\n- On second `\u003ca\u003e` tag, put your project repository url on `href` attribute.\n\n---\n\n- Inside `\u003cdiv\u003e` tag with class-name `.project-wrapper__image`, put your project image url on the `src` of the `\u003cimg\u003e` and put again your project url on `href` attribute of `\u003ca\u003e` tag.\n- Recommended size for project image (_1366 x 767px_), your project image must live in [`assets/`](./assets) folder. You can remove the default images and replace them with yours.\n\n```html\n\u003c!--Projects Section--\u003e\n    \u003csection id=\"projects\"\u003e\n      \u003cdiv class=\"container\"\u003e\n        \u003cdiv class=\"project-wrapper\"\u003e\n          \u003ch2 class=\"section-title dark-blue-text\"\u003eProjects\u003c/h2\u003e\n\n        \u003c!-- Each .row is a project --\u003e\n          \u003cdiv class=\"row\"\u003e\n            \u003cdiv class=\"project-wrapper__text\"\u003e\n              \u003ch3 class=\"project-wrapper__text-title\"\u003eProject Title\u003c/h3\u003e\n              \u003cp class=\"project-wrapper__text-info\"\u003e\n                Lorem ipsum dolor sit amet consectetur adipisicing elit.\n              \u003c/p\u003e\n              \u003cdiv class=\"project-wrapper__text-btns\"\u003e\n                \u003ca\n                  href=\"#\"\n                  target=\"_blank\"\n                  class=\"cta-btn cta-btn--hero cta-btn--projects\"\n                  \u003eSee Live\u003c/a\n                \u003e\n                \u003ca href=\"#\" target=\"_blank\" class=\"cta-btn text-color-main\"\n                  \u003eSource Code\u003c/a\n                \u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n\n            \u003cdiv class=\"project-wrapper__image\"\u003e\n              \u003ca href=\"#\" target=\"_blank\"\u003e\n                \u003cdiv class=\"thumbnail rounded\"\u003e\n                  \u003cimg\n                    src=\"./assets/project.png\"\n                    class=\"img-fluid\"\n                    alt=\"Project Image\"\n                  /\u003e\n                \u003c/div\u003e\n              \u003c/a\u003e\n            \u003c/div\u003e\n          \u003c/div\u003e\n          ...\n          \u003c/section\u003e\n\u003c!-- /END Project --\u003e\n```\n\n### Contact Section\n\n- On `\u003cp\u003e` tag with class-name `.contact-wrapper__text`, include some custom call-to-action message.\n- On `\u003ca\u003e` tag, put your email address on `href=\"mailto:` attribute.\n\n```html\n\u003c!-- Contact Section --\u003e\n\u003csection id=\"contact\"\u003e\n  \u003cdiv class=\"container\"\u003e\n    \u003ch2 class=\"section-title\"\u003eContact\u003c/h2\u003e\n    \u003cdiv class=\"contact-wrapper\"\u003e\n      \u003cp class=\"contact-wrapper__text\"\u003e[Put your call to action here]\u003c/p\u003e\n      \u003ca href=\"mailto:\" class=\"cta-btn cta-btn--resume\"\u003eCall to Action\u003c/a\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/section\u003e\n\u003c!-- END Contact Section --\u003e\n```\n\n### Footer Section\n\n- Put your social media link on each `\u003ca\u003e` links.\n- If you have more social-media accounts, see [Font Awesome Icons](https://fontawesome.com/icons) to put the corresponding additional social icon classNames.\n- You can delete or add as many `\u003ca\u003e` links your want.\n\n```html\n\u003c!-- Footer Section --\u003e\n\u003cfooter class=\"footer\"\u003e\n  ...\n  \u003cdiv class=\"social-links\"\u003e\n    \u003ca href=\"#!\" target=\"_blank\"\u003e\n      \u003ci class=\"fa-brands fa-twitter\"\u003e\u003c/i\u003e\n    \u003c/a\u003e\n    \u003ca href=\"#!\" target=\"_blank\"\u003e\n      \u003ci class=\"fa-brands fa-instagram\"\u003e\u003c/i\u003e\n    \u003c/a\u003e\n    \u003ca href=\"#!\" target=\"_blank\"\u003e\n      \u003ci class=\"fa-brands fa-codepen\"\u003e\u003c/i\u003e\n    \u003c/a\u003e\n    \u003ca href=\"#!\" target=\"_blank\"\u003e\n      \u003ci class=\"fa-brands fa-linkedin\"\u003e\u003c/i\u003e\n    \u003c/a\u003e\n    \u003ca href=\"#!\" target=\"_blank\"\u003e\n      \u003ci class=\"fa-brands fa-github\"\u003e\u003c/i\u003e\n    \u003c/a\u003e\n  \u003c/div\u003e\n  ...\n\u003c/footer\u003e\n\u003c!-- END Footer Section --\u003e\n```\n\n### Step 2 - STYLES\n\nChange the color theme of the website ( choose 2 colors to create a gradient ):\n\nGo to [`style/base/_variables.scss`](./style/base/_variables.scss) and only change the values on these properties `$main-color` and `$secondary-color` to your prefered HEX color.\n\nSave the `.scss` file so that the **Live Sass Compiler** extension compiles it to `.css`.\n\n```scss\n// Default values\n$primary-color: #36d1dc;\n$secondary-color: #5b86e5;\n```\n\n**NOTE**: I highly recommend to checkout gradients variations on [UI Gradient](https://uigradients.com/#Scooter)\n\n---\n\n- You can clear the README.md file and add you own readme to it.\n- Also you don't need to push the [`style`](./style) folder, so you can add [`style`](./style) to [`.gitignore`](./.gitignore) file to ignore it while pushing it to the repo.\n- Delete the file [`CNAME`](./CNAME) before you push it.\n\n---\n\n## Deployment 📦\n\n- Head to your GitHub account and create a new repo. And set a new remote for our template repo.\n\n  Note: remote URL will be different.\n\n  ```bash\n  # set a new remote\n  $ git remote add origin https://github.com/user.repo.git\n  ```\n\n- Now commit all your changes with a commit message and push the code to your newly created repo.\n\n  ```bash\n  # commit changes\n  $ git commit -m 'created my portfolio'\n  # push the changes\n  $ git push -u origin master\n  ```\n\n- Refresh your repo page and head to the settings tab. Now scroll down till you see GitHub Pages. In the Source section select the branch to be master and save it!\n- Voilà your Portfolio should be live at `https://username.github.io/repoName/`\n\n## Technologies used 🛠️\n\n- [Sass](https://sass-lang.com/documentation) - CSS extension language\n- [ScrollReveal.js](https://scrollrevealjs.org/) - JavaScript library\n- [Tilt.js](https://gijsroge.github.io/tilt.js/) - JavaScript tiny parallax library\n\n## Authors\n\n- **Anil Seervi** - [https://github.com/AnilSeervi](https://github.com/AnilSeervi)\n\n## License 📄\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## Acknowledgments 🎁\n\nI was motivated and inspired while learning [ZTM: Complete Web Developer](https://www.udemy.com/course/the-complete-web-developer-zero-to-mastery/) to create a simpler version of [simplefolio](https://github.com/cobidev/simplefolio) for those who didn't know node and packages.\n\n---\n\n\u003ch2 align=\"center\"\u003eHave Fun Creating Your Own Portfolio Website.\u003c/h2\u003e\n","funding_links":["https://patreon.com/anilseervi","https://ko-fi.com/anilseervi"],"categories":["SCSS"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAnilSeervi%2FDevFolio","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FAnilSeervi%2FDevFolio","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAnilSeervi%2FDevFolio/lists"}