{"id":15031852,"url":"https://github.com/ryanfitzgerald/devportfolio","last_synced_at":"2025-05-14T08:07:02.334Z","repository":{"id":37580139,"uuid":"84686614","full_name":"RyanFitzgerald/devportfolio","owner":"RyanFitzgerald","description":"A lightweight, customizable single-page personal portfolio website template built with JavaScript and Sass","archived":false,"fork":false,"pushed_at":"2025-03-17T01:38:46.000Z","size":1067,"stargazers_count":4479,"open_issues_count":13,"forks_count":3917,"subscribers_count":64,"default_branch":"master","last_synced_at":"2025-05-14T08:06:55.285Z","etag":null,"topics":["javascript","portfolio","portfolio-template","portfolio-website","sass","skills","template","timeline"],"latest_commit_sha":null,"homepage":"https://ryanfitzgerald.github.io/devportfolio","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/RyanFitzgerald.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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":"2017-03-11T23:26:38.000Z","updated_at":"2025-05-11T20:58:06.000Z","dependencies_parsed_at":"2024-01-13T03:01:43.658Z","dependency_job_id":"cd74f575-68f1-4215-90ee-0957b218079b","html_url":"https://github.com/RyanFitzgerald/devportfolio","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/RyanFitzgerald%2Fdevportfolio","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RyanFitzgerald%2Fdevportfolio/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RyanFitzgerald%2Fdevportfolio/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RyanFitzgerald%2Fdevportfolio/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RyanFitzgerald","download_url":"https://codeload.github.com/RyanFitzgerald/devportfolio/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254101618,"owners_count":22014909,"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":["javascript","portfolio","portfolio-template","portfolio-website","sass","skills","template","timeline"],"created_at":"2024-09-24T20:16:47.087Z","updated_at":"2025-05-14T08:06:57.324Z","avatar_url":"https://github.com/RyanFitzgerald.png","language":"SCSS","readme":"# Dev Portfolio\r\n\r\n🎉 **[Interested in learning all about full-stack Chrome Extension development? My latest course, Chrome Extension Mastery: Build Full-Stack Extensions with React \u0026 Node.js, is now live!](https://fullstackextensions.com/?ref=github)** 🎉\r\n\r\n🚀 **[Dev Portfolio V2 has arrived. Meet Devfolio, a modern portfolio + blog template built with GatsbyJS and TailwindCSS](https://github.com/RyanFitzgerald/devfolio)** 🚀\r\n\r\nThis repo contains an easy-to-customize personal dev portfolio template that was created with Sass and JavaScript. It is lightweight and fully responsive, as well as comes with the Bootstrap grid system and loaded with Font Awesome. The site is static and comes production ready if you just want to add your information and go. Alternatively, you can edit styles, colours, and scripts fairly easily. The site was built as modular as possible to make it easy to shift around styles and content.\r\n\r\nTo view a live demo, [click here](https://ryanfitzgerald.github.io/devportfolio/).\r\n\r\nLooking for a blog template? Checkout [DevBlog](https://github.com/RyanFitzgerald/devblog).\r\n\r\n## Features\r\n\r\n* Gulp ready (compiles Sass and minifies JS)\r\n* Sass ready with lots of commenting\r\n* Fully responsive\r\n* Comes with Bootstrap grid system\r\n* Easy colour changes can be done through simple variable edits\r\n\r\n## Contents\r\n\r\n- [Setup and Configuration](#setup-and-configuration)\r\n    - [Making Edits / Customizing the Template](#making-edits--customizing-the-template)\r\n    - [Using the Template As Is](#using-the-template-as-is)\r\n- [Customization and Editing](#customization-and-editing)\r\n    - [General](#general)\r\n    - [Images](#images)\r\n    - [Header Section](#header-section)\r\n    - [Lead Section](#lead-section)\r\n    - [About Section](#about-section)\r\n    - [Experience Section](#experience-section)\r\n    - [Education Section](#education-section)\r\n    - [Projects Section](#projects-section)\r\n    - [Skills Section](#skills-section)\r\n    - [Contact Section](#contact-section)\r\n    - [Footer Section](#footer-section)\r\n    - [Optional Sections](#optional-sections)\r\n- [Changelog](#changelog)\r\n- [License](#license)\r\n\r\n## Setup and Configuration\r\n\r\nThe setup required can be broken into two types:\r\n1. If you want to make edits or customize the template\r\n2. If you just want to add your information as use as is\r\n\r\n### Making Edits / Customizing the Template\r\n\r\nTo setup, simply fork the repo and run `npm install` in order to get all the Gulp dev dependencies. Next, run `Gulp watch` to compile the Sass and minify the JavaScript. Alternatively, if you don't have Gulp installed globally, you can run the npm script `npm run watch`. Any changes done to the JavaScript (js/scripts.js) or Sass (sass/styles.scss) will be autocompiled and ready to go.\r\n\r\nAll scripts are within `js/scripts.js` and get minified to `js/scripts.min.js`. All styles are in `sass/styles.scss` and get compiled to `css/styles.css`. Both the minified scripts file and compiled CSS file are what is loaded on the page by default.\r\n\r\nAt this point, the page is ready to go and you can begin to add your own information and make any needed changes. The sections below  contains a quick breakdown of each of the default sections and how they work.\r\n\r\n### Using The Template As Is\r\n\r\nIf you wish to use the template as is (i.e. how it's seen in the demo), then all that's required is the `css`, `images`, `js`, `libs` folders and the `index.html` file. You would then add your content to `index.html` as needed and you're good to go!\r\n\r\n## Customization and Editing\r\n\r\n### General\r\n\r\nIn general, most styles on the page are based off the definitions of variables in the variable section of the style sheet:\r\n\r\n```SCSS\r\n// Define base and accent colors\r\n$base-color: #3498db;\r\n$base-color-hover: darken($base-color, 10%);\r\n\r\n// Define background colors\r\n$background: #fff;\r\n$background-alt: #f2f2f5;\r\n\r\n// Define border colors\r\n$border: #dcd9d9;\r\n\r\n// Define text colors\r\n$heading: #374054;\r\n$text: #74808a;\r\n```\r\n\r\nIf you wish to change the general colour scheme of the page for example, simply change the value of `$base-color`.\r\n\r\nThere is also a number of default CSS classes that can be applied such as `.shadow`, `.shadow-large`, `.btn-rounded-white`, and various others. These can be found under the General Styles section in the style sheet.\r\n\r\n### Images\r\n\r\nBy default, the template comes with a number of images, some of which can be kept and others which act simply as placeholders and should be switched. The template contains the following:\r\n\r\n* Main background (images/lead-bg.jpg) - this is the main background image provided via [Unsplash](https://unsplash.com/). This can be kept or changed easily by replacing `images/lead-bg.jpg` with your new background (recommended size of at least 1920x1080).\r\n* Favicon (/favicon.ico) - this is the favicon used for the page. Similar to the main bg, this can be kept or changed easily by replacing the `favicon.ico` with your new one.\r\n* Project image - these are the images associated with the projects under the project section. These are simply placeholders and should either be replaced or removed.\r\n\r\n### Header Section\r\n\r\nThe header section can be found within the `\u003cheader\u003e` tag and simply contains an unordered list of anchors to different sections of the page. If you add a new section and want to be able to quickly navigate to it from the top, simply add another list element with an anchor that has the href of the ID of the section. Conversely, if you remove a section, don't forget to remove the associated navigation element.\r\n\r\nIf you wish to add a header link to an external page, simply add the class `no-scroll` to the anchor. For example:\r\n\r\n```HTML\r\n\u003cli\u003e\r\n    \u003ca href=\"https://google.com\" class=\"no-scroll\"\u003eGoogle\u003c/a\u003e\r\n\u003c/li\u003e\r\n```\r\n\r\nIf you wish to have a sticky (fixed) header, you simply need to add a class of `sticky` to the main header. For example, that would be accomplished as follows:\r\n\r\n```HTML\r\n\u003cheader class=\"sticky\"\u003e\r\n    \u003c!-- Header content --\u003e\r\n\u003c/header\u003e\r\n```\r\n\r\n### Lead Section\r\n\r\nThe Lead section is pretty straightforward, it contains an h1 for your name and an h2 for your title. It also contains a link that can be used to link to your resume should you wish to add it as well.\r\n\r\nIf you want your resume to automatically download when the button is clicked instead of opening up in another tab (the default behaviour), add the following code (Thanks to jkfran for the suggestion) in the lead:\r\n\r\n```HTML\r\n\u003ca href=\"path/to/resume.pdf\" download=\"resume.pdf\" class=\"btn-rounded-white\"\u003eDownload Resume\u003c/a\u003e\r\n```\r\n\r\nThe href attribute points to where your resume is stored and the download attribute is what triggers the download / provides the name the file will be downloaded as when the user clicks the button (In this case, it will download as resume.pdf).\r\n\r\n### About Section\r\n\r\nThe about section contains a quick about blurb that can be edited by changing the text within the paragraph tags.\r\n\r\n### Experience Section\r\n\r\nThe experience section creates a vertical timeline with all your relevant experience. The code for the timeline creation can be found within `js/scripts.js` and is an adaptation of [RyanFitzgerald/vertical-timeline](https://github.com/RyanFitzgerald/vertical-timeline).\r\n\r\nThe default format is as follows:\r\n\r\n```HTML\r\n\u003cdiv id=\"experience-timeline\"\u003e\r\n    \u003cdiv data-date=\"September 2015 – September 2016\"\u003e\r\n        \u003ch3\u003eEmployer Name\u003c/h3\u003e\r\n        \u003ch4\u003eJob Title\u003c/h4\u003e\r\n        \u003cp\u003e\r\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in iaculis ex.\r\n        \u003c/p\u003e\r\n    \u003c/div\u003e\r\n\u003c/div\u003e\r\n```\r\n\r\nThe data attribute `data-date` is what is used to add a date to the associated timeline point. All that is really required is a wrapping div (i.e. `#experience-timeline`) and nested divs to build the timeline. The h3, h4, and p tags are optional and the contents of the div can be styled however you wish.\r\n\r\nTo add an additional section, simply add additional nested divs under the main wrapping div.\r\n\r\n### Education Section\r\n\r\nThe Education is just a series of `.education-block` classes with some details associated with them. By default, it shows school name, date, degree, and some additional details. For example:\r\n\r\n```HTML\r\n\u003cdiv class=\"education-block\"\u003e\r\n    \u003ch3\u003eUniversity of Ottawa\u003c/h3\u003e\r\n    \u003cspan class=\"education-date\"\u003eSept 2016 - Sept 2017\u003c/span\u003e\r\n    \u003ch4\u003eBachelor of Science in Computer Science\u003c/h4\u003e\r\n    \u003cp\u003e\r\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in iaculis ex.\r\n    \u003c/p\u003e\r\n\u003c/div\u003e\r\n```\r\n\r\nTo add additional section, simply add additional `.education-block` elements.\r\n\r\n### Projects Section\r\n\r\nThe Project section contains a number of `.project` elements that represent each of your projects. By default, it contains a 300x300 image under `.project-image` and relevant project information under `.project-info`. An example is as follows:\r\n\r\n```HTML\r\n\u003cdiv class=\"project\"\u003e\r\n    \u003cdiv class=\"project-image\"\u003e\r\n        \u003cimg src=\"images/project.jpg\" /\u003e\r\n    \u003c/div\u003e\r\n    \u003c!-- End .project-image --\u003e\r\n\r\n    \u003cdiv class=\"project-info\"\u003e\r\n        \u003ch3\u003eProject Name Here\u003c/h3\u003e\r\n        \u003cp\u003e\r\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in iaculis ex.\r\n        \u003c/p\u003e\r\n        \u003ca href=\"#\"\u003eView Project\u003c/a\u003e\r\n    \u003c/div\u003e\r\n    \u003c!-- End .project-info --\u003e\r\n\u003c/div\u003e\r\n```\r\n\r\nIf you want to hide some projects by default, you can throw them in an additional row and add the markup for the \"Show More\" button. This would be done as follows:\r\n\r\n```HTML\r\n\u003c!-- Projects Above --\u003e\r\n\r\n\u003ca id=\"view-more-projects\" href=\"#\"\u003eView More Projects\u003c/a\u003e\r\n\u003cdiv id=\"more-projects\" class=\"row\"\u003e\r\n    \u003cdiv class=\"project shadow-large\"\u003e\r\n        \u003cdiv class=\"project-image\"\u003e\r\n            \u003cimg src=\"images/project.jpg\" /\u003e\r\n        \u003c/div\u003e\r\n        \u003c!-- End .project-image --\u003e\r\n        \u003cdiv class=\"project-info\"\u003e\r\n            \u003ch3\u003eProject Name Here\u003c/h3\u003e\r\n            \u003cp\u003e\r\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in iaculis ex. Etiam volutpat laoreet urna. Morbi ut tortor nec nulla commodo malesuada sit amet vel lacus. Fusce eget efficitur libero. Morbi dapibus porta quam laoreet placerat.\r\n            \u003c/p\u003e\r\n            \u003ca href=\"#\"\u003eView Project\u003c/a\u003e\r\n        \u003c/div\u003e\r\n        \u003c!-- End .project-info --\u003e\r\n    \u003c/div\u003e\r\n    \u003c!-- End .project --\u003e\r\n\u003c/div\u003e\r\n```\r\n\r\nThis will add a link that says \"View More Projects\" under the current projects and when clicked, all projects in the \"More-projects\" div will be shown. This is optional functionality and isn't provided by default. It is important that you keep the wrapping div ID intact (\"#more-projects\") as well as the anchor ID (\"#view-more-projects\"), however the contents of the div and the anchor text itself can be edited however you like.\r\n\r\n#### Projects without images\r\n\r\nIf you do not wish to have a project image associated with a project, you can simply add `no-image` as an additional class to the project. It would look like the following:\r\n\r\n```HTML\r\n\u003cdiv class=\"project no-image\"\u003e\r\n    \u003cdiv class=\"project-info\"\u003e\r\n        \u003ch3\u003eProject Name Here\u003c/h3\u003e\r\n        \u003cp\u003e\r\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in iaculis ex.\r\n        \u003c/p\u003e\r\n        \u003ca href=\"#\"\u003eView Project\u003c/a\u003e\r\n    \u003c/div\u003e\r\n    \u003c!-- End .project-info --\u003e\r\n\u003c/div\u003e\r\n```\r\n\r\n### Skills Section\r\n\r\nThe Skills section is simply an unordered list that spits out a \"Skill Cloud\" with all the skills listed. To add / remove skills, simply edit or add list elements, like so:\r\n\r\n```HTML\r\n\u003cul\u003e\r\n    \u003cli\u003eJavaScript\u003c/li\u003e\r\n    \u003cli\u003ePython\u003c/li\u003e\r\n    \u003cli\u003eRuby\u003c/li\u003e\r\n    \u003cli\u003eGo\u003c/li\u003e\r\n    \u003cli\u003eNode.js\u003c/li\u003e\r\n\u003c/ul\u003e\r\n```\r\n\r\n### Contact Section\r\n\r\nSince the page is static, I opted to use the awesome Formspree to allow for a contact form without the need for anything else. To use it, you must have the page hosted on a server (loading a basic HTML page won't work) where a referrer header is generated. Also, simply add the email to the action. An example is as follows:\r\n\r\n```HTML\r\n\u003cform method=\"POST\" action=\"https://formspree.io/email@email.com\"\u003e\r\n    \u003cinput type=\"hidden\" name=\"_subject\" value=\"Contact request from personal website\" /\u003e\r\n    \u003cinput type=\"email\" name=\"_replyto\" placeholder=\"Your email\" required\u003e\r\n    \u003ctextarea name=\"message\" placeholder=\"Your message\" required\u003e\u003c/textarea\u003e\r\n    \u003cbutton type=\"submit\"\u003eSend\u003c/button\u003e\r\n\u003c/form\u003e\r\n```\r\nFor more information on configuration of the contact form or dealing with errors, check out [Formspree](https://formspree.io/).\r\n\r\nFor a quick tutorial about formspree, check out this [tutsplus tutorial](https://webdesign.tutsplus.com/tutorials/quick-tip-add-a-formspree-form-to-your-static-sites--cms-23870) that covers different aspects and features of the form tool.\r\n\r\n### Footer Section\r\n\r\nThe Footer contains an optional copyright where you can place your name as well as an unordered list of all of your social or coding related profiles. By default it contains Github, Stack Overflow, Facebook, Twitter, and Google Plus. You can add or remove them easily and simply use the Font Awesome icon associated with the social profile you wish to use. For a list of all icons, [click here](http://fontawesome.io/icons/).\r\n\r\n### Optional Sections\r\n\r\nThe template comes with an optional section that can be added to the page markup to list things like Certifications, Hobbies, and more (Note: these are not included by default). The markup for the additional optional section is as follows:\r\n\r\n```HTML\r\n\u003cdiv class=\"optional-section background-alt\"\u003e\r\n    \u003ch2 class=\"heading\"\u003eSection Name\u003c/h2\u003e\r\n\r\n    \u003cdiv class=\"optional-section-block\"\u003e\r\n        \u003ch3\u003eSome content title\u003c/h3\u003e\r\n        \u003cp\u003e\r\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in iaculis ex. Etiam volutpat laoreet urna. Morbi ut tortor nec nulla commodo malesuada sit amet vel lacus. Fusce eget efficitur libero. Morbi dapibus porta quam laoreet placerat.\r\n        \u003c/p\u003e\r\n        \u003cul\u003e\r\n            \u003cli\u003e\r\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit.\r\n            \u003c/li\u003e\r\n            \u003cli\u003e\r\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit.\r\n            \u003c/li\u003e\r\n            \u003cli\u003e\r\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit.\r\n            \u003c/li\u003e\r\n        \u003c/ul\u003e\r\n    \u003c/div\u003e\r\n    \u003c!-- End .optional-section-block --\u003e\r\n\r\n\u003c/div\u003e\r\n\u003c!-- End .optional-section --\u003e\r\n```\r\n\r\nYou can copy .optional-section-block for each new item you wish you have in the optional section. Also, the background-alt class may need to be removed depending on where the optional section is placed in your layout as this adds the grey background. If you play it at the bottom after \"Skills\", it can be used as is. Also, by default the border is applied at the top, but this can also be adjusted as needed.\r\n\r\nThe optional section blocks have styling for h3 (the block title), h4, p, and ul tags by default.\r\n\r\n## Changelog\r\n\r\n### 1.2.2\r\n\r\n* Updated dependencies and gulpfile\r\n\r\n### 1.2.1\r\n\r\n* Updated dependencies and gulpfile\r\n* Added `no-image` optional class for projects without images (see above for usage)\r\n\r\n### 1.2.0\r\n\r\n* Added support for optional \"Show More Projects\" that hides some projects by default if included\r\n* Added optional sections to display certifications, languages, etc.\r\n\r\n### 1.1.3\r\n\r\n* Added default favicon to be used or changed\r\n* Added `sticky` class to make header fixed\r\n* Updated docs to add image section\r\n\r\n### 1.1.2\r\n\r\n* Added `no-scroll` class option to header navigation anchor if you want to link to external site\r\n* Changed contact form input / textarea colours to be based off `$base-color`\r\n* Changed main background to 100vh so it doesn't overflow if viewport height \u003c 700px\r\n\r\n### 1.1.1\r\n\r\n* Made input placeholder text more readable\r\n* Removed timeline line when no JS\r\n* Added some basic styling to timeline when no JS\r\n\r\n### 1.1.0\r\n\r\n* Fixed menu toggle on mobile devices\r\n* Fixed z-index / scrolling issue with mobile menu\r\n* Mobile menu now closes once a nav element is hit\r\n\r\n## License\r\n\r\nCompletely free (MIT)! See [LICENSE.md](LICENSE.md) for more.\r\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryanfitzgerald%2Fdevportfolio","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fryanfitzgerald%2Fdevportfolio","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryanfitzgerald%2Fdevportfolio/lists"}