├── .ruby-version ├── .gitignore ├── assets ├── img │ ├── logo.jpg │ ├── mlh.jpg │ ├── .DS_Store │ ├── favicon.ico │ ├── portfolio.png │ ├── social-link.jpg │ ├── education │ │ ├── uob.png │ │ └── fellowship.svg │ ├── social │ │ ├── github.png │ │ ├── tumblr.png │ │ ├── twitter.png │ │ ├── youtube.png │ │ └── linkedin.png │ ├── recommendations │ │ └── tom-goodman.webp │ ├── experience │ │ ├── fellowship.svg │ │ └── mlh.svg │ └── logo.svg ├── css │ └── main.scss └── js │ └── dark-mode.js ├── CODE_OF_CONDUCT.md ├── _data ├── experience.yml ├── education.yml ├── about.yml ├── recommendations.yml └── projects.yml ├── _layouts ├── default.html └── page.html ├── lighthouserc.js ├── Gemfile ├── 404.html ├── index.html ├── _sass ├── projects.scss ├── footer.scss ├── profile.scss ├── page.scss ├── all.scss ├── navbar.scss └── toggle.scss ├── _includes ├── education.html ├── experience.html ├── google-analytics.html ├── recommendations.html ├── profile.html ├── contact.html ├── about.html ├── footer.html ├── header.html ├── navbar.html └── projects.html ├── _config.yml ├── .github └── workflows │ └── lighthouse.yml ├── LICENSE ├── pull_request_template.md ├── projects └── project.md ├── Gemfile.lock └── README.md /.ruby-version: -------------------------------------------------------------------------------- 1 | 3.0.0 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | _site 2 | .sass-cache 3 | .jekyll-cache 4 | .jekyll-metadata 5 | vendor 6 | .bundle 7 | .idea 8 | -------------------------------------------------------------------------------- /assets/img/logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLH-Fellowship/pod-3.1.3-portfolio/HEAD/assets/img/logo.jpg -------------------------------------------------------------------------------- /assets/img/mlh.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLH-Fellowship/pod-3.1.3-portfolio/HEAD/assets/img/mlh.jpg -------------------------------------------------------------------------------- /assets/img/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLH-Fellowship/pod-3.1.3-portfolio/HEAD/assets/img/.DS_Store -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Code of Conduct 2 | 3 | We follow the [MLH Code of Conduct](https://mlh.io/code-of-conduct). 4 | -------------------------------------------------------------------------------- /assets/img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLH-Fellowship/pod-3.1.3-portfolio/HEAD/assets/img/favicon.ico -------------------------------------------------------------------------------- /assets/img/portfolio.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLH-Fellowship/pod-3.1.3-portfolio/HEAD/assets/img/portfolio.png -------------------------------------------------------------------------------- /assets/img/social-link.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLH-Fellowship/pod-3.1.3-portfolio/HEAD/assets/img/social-link.jpg -------------------------------------------------------------------------------- /assets/img/education/uob.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLH-Fellowship/pod-3.1.3-portfolio/HEAD/assets/img/education/uob.png -------------------------------------------------------------------------------- /assets/img/social/github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLH-Fellowship/pod-3.1.3-portfolio/HEAD/assets/img/social/github.png -------------------------------------------------------------------------------- /assets/img/social/tumblr.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLH-Fellowship/pod-3.1.3-portfolio/HEAD/assets/img/social/tumblr.png -------------------------------------------------------------------------------- /assets/img/social/twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLH-Fellowship/pod-3.1.3-portfolio/HEAD/assets/img/social/twitter.png -------------------------------------------------------------------------------- /assets/img/social/youtube.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLH-Fellowship/pod-3.1.3-portfolio/HEAD/assets/img/social/youtube.png -------------------------------------------------------------------------------- /_data/experience.yml: -------------------------------------------------------------------------------- 1 | - role: Pre Fellowship Fellow 2 | company: MLH Fellowship 3 | dates: Summer 2021 4 | logo: fellowship.svg -------------------------------------------------------------------------------- /assets/img/social/linkedin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLH-Fellowship/pod-3.1.3-portfolio/HEAD/assets/img/social/linkedin.png -------------------------------------------------------------------------------- /assets/img/recommendations/tom-goodman.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MLH-Fellowship/pod-3.1.3-portfolio/HEAD/assets/img/recommendations/tom-goodman.webp -------------------------------------------------------------------------------- /_layouts/default.html: -------------------------------------------------------------------------------- 1 | --- 2 | --- 3 | 4 | 5 | {% include header.html %} 6 | 7 | 8 | {{ content }} 9 | 10 | 11 | -------------------------------------------------------------------------------- /lighthouserc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | ci: { 3 | collect: { 4 | staticDistDir: './_site', 5 | }, 6 | upload: { 7 | target: 'temporary-public-storage', 8 | } 9 | }, 10 | }; -------------------------------------------------------------------------------- /_data/education.yml: -------------------------------------------------------------------------------- 1 | - course: BSc Computer Science 2 | institute: University of Birmingham 3 | dates: 2018 - 2021 4 | logo: uob.png 5 | 6 | - course: Pre Fellowship Fellow 7 | institute: MLH Fellowship 8 | dates: Summer 2021 9 | logo: fellowship.svg 10 | -------------------------------------------------------------------------------- /Gemfile: -------------------------------------------------------------------------------- 1 | source "https://rubygems.org" 2 | gem "jekyll", "~> 4.1.1" 3 | 4 | platforms :mingw, :x64_mingw, :mswin, :jruby do 5 | gem "tzinfo", "~> 1.2" 6 | gem "tzinfo-data" 7 | end 8 | 9 | gem "wdm", "~> 0.1.1", :platforms => [:mingw, :x64_mingw, :mswin] 10 | 11 | 12 | gem "webrick", "~> 1.7" 13 | -------------------------------------------------------------------------------- /_layouts/page.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | --- 4 | 5 | 17 | 18 |
19 | {{ content }} 20 |
-------------------------------------------------------------------------------- /_data/about.yml: -------------------------------------------------------------------------------- 1 | - name: Will Russell 2 | number: +213 33433 3 | email: youremail@gmail.com 4 | funfact: I love coffee! 5 | bio1: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sodales sapien nec faucibus egestas. In porta mattis tristique. Phasellus aliquam euismod mauris. Proin aliquam ligula eu erat ornare, quis aliquam ante egestas. Vestibulum congue, dui eu rutrum dictum, diam turpis suscipit libero, sit amet euismod risus libero vel ligula. Vivamus efficitur at arcu vel eleifend. 6 | -------------------------------------------------------------------------------- /404.html: -------------------------------------------------------------------------------- 1 | --- 2 | permalink: /404.html 3 | layout: default 4 | --- 5 | 6 | 19 | 20 |
21 |

404

22 | 23 |

Page not found :(

24 |

The requested page could not be found.

25 |
26 | -------------------------------------------------------------------------------- /assets/img/education/fellowship.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/img/experience/fellowship.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_data/recommendations.yml: -------------------------------------------------------------------------------- 1 | - title: HackTheMidlands 2 | author: Tom Goodman 3 | text: Will's passion and drive to do awesome stuff is truly unbounded. When he started working on HackTheMidlands, he really hit the ground running, and coordinated an incredible outreach scheme, as well as profoundly contributing to the organisation of the event as a whole.

His variety of skills - both technical and interpersonal - have allowed him to flourish over the past few years, and I'd highly recommend working with him to anyone! 4 | logo: tom-goodman.webp -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | --- 2 | --- 3 | 4 | 5 | {% include header.html %} 6 | 7 | 8 | 9 | {% include navbar.html %} 10 | 11 | {% include profile.html %} 12 | 13 | {% include about.html %} 14 | 15 | {% include projects.html %} 16 | 17 | {% include experience.html %} 18 | 19 | {% include education.html %} 20 | 21 | {% include recommendations.html %} 22 | 23 | {% include contact.html %} 24 | 25 | {% include google-analytics.html %} 26 | 27 | {% include footer.html %} 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /_sass/projects.scss: -------------------------------------------------------------------------------- 1 | .modal-footer-icons { 2 | width: 30% !important; 3 | } 4 | 5 | .project-footer-icons { 6 | font-size: 32px; 7 | color: var(--banner-background-color); 8 | } 9 | 10 | .project-close-btn { 11 | background-color: var(--banner-background-color); 12 | border-color: var(--banner-background-color); 13 | } 14 | 15 | .project-close-btn:hover { 16 | text-decoration: underline; 17 | background-color: var(--banner-background-color); 18 | border-color: var(--banner-background-color); 19 | } 20 | 21 | .modal-body { 22 | color: black; 23 | } 24 | 25 | .modal-title { 26 | color: black; 27 | } 28 | -------------------------------------------------------------------------------- /_includes/education.html: -------------------------------------------------------------------------------- 1 |

Education

2 |
3 |
4 | {% for item in site.data.education %} 5 |
6 |
7 |
8 | {{ item.institute }} logo 9 |
10 |
11 |

{{ item.course }}

12 |

{{ item.institute }}

13 |

{{ item.dates }}

14 |
15 |
16 |
17 | {% endfor %} 18 |
19 |
20 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | title: "Will Russell" 2 | email: fellowship@mlh.io 3 | description: >- # this means to ignore newlines until "baseurl:" 4 | This is my portfolio website! 5 | baseurl: "/" 6 | url: "/" 7 | # You only need to define your social links here and no need to edit the footer.html 8 | social: 9 | twitter_username: wrussell1999 10 | github_username: wrussell1999 11 | linkedin_username: wrussell1999 12 | 13 | 14 | sass: 15 | sass_dir: _sass 16 | 17 | icon: /assets/img/icon.jpg 18 | 19 | # your google analytics tag goes here 20 | # how to get your analytics tag? 21 | # https://support.google.com/analytics/answer/1008080 22 | google-analytics: XX-000000000-0 23 | resume: /assets/resume.pdf 24 | -------------------------------------------------------------------------------- /_includes/experience.html: -------------------------------------------------------------------------------- 1 |

Work Experience

2 |
3 |
4 | {% for item in site.data.experience %} 5 |
6 |
7 |
8 | {{ item.company }} logo 9 |
10 |
11 |

{{ item.role }}

12 |

{{ item.company }}

13 |

{{ item.dates }}

14 |
15 |
16 | {% endfor %} 17 |
18 |
19 |
20 | -------------------------------------------------------------------------------- /_includes/google-analytics.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | {% if site.google-analytics %} 4 | 15 | {% endif %} -------------------------------------------------------------------------------- /_includes/recommendations.html: -------------------------------------------------------------------------------- 1 |

Recommendations

2 |
3 | {% for item in site.data.recommendations %} 4 |
5 |
6 | {{ item.author }} bio image 7 |
8 |
9 |

{{ item.title }}

10 |

{{ item.author }}

11 |

{{ item.text }}

12 | View more on LinkedIn 19 |
20 |
21 | {% endfor %} 22 |
-------------------------------------------------------------------------------- /.github/workflows/lighthouse.yml: -------------------------------------------------------------------------------- 1 | name: Lighthouse 2 | on: 3 | pull_request: 4 | branches: 5 | - main 6 | jobs: 7 | lighthouseci: 8 | runs-on: ubuntu-latest 9 | steps: 10 | - uses: actions/checkout@v2 11 | - name: Use Node.js 16.x 12 | uses: actions/setup-node@v1 13 | with: 14 | node-version: 16.x 15 | - name: Install ruby and jekyll 16 | run: | 17 | sudo apt-get install ruby-full build-essential zlib1g-dev 18 | sudo gem install jekyll bundler 19 | - name: Install site packages 20 | run: | 21 | sudo bundle install 22 | sudo bundle exec jekyll build 23 | - name: run Lighhouse CI 24 | run: | 25 | sudo npm install -g @lhci/cli@0.8.x 26 | lhci autorun 27 | env: 28 | LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }} -------------------------------------------------------------------------------- /_includes/profile.html: -------------------------------------------------------------------------------- 1 | 2 |
3 |
4 |
5 | {{ site.title }} 6 |
7 |

{{ site.title }}

8 | 9 | {% if site.resume %} 10 |
11 | 17 |
18 | {% endif %} 19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 | 28 | {% if site.resume %} 29 | 38 | {% endif %} 39 | -------------------------------------------------------------------------------- /assets/css/main.scss: -------------------------------------------------------------------------------- 1 | --- 2 | --- 3 | 4 | @import 'all'; 5 | :root { 6 | /* text colors (Title, Text, Links, Dates) */ 7 | --title-color: white; 8 | --text-color: black; 9 | --link-color: black; 10 | --dates-color: #404040; 11 | 12 | /* background colors (Body, Cards, Banner)*/ 13 | --body-color: #f5f5f9; 14 | --card-color: white; 15 | --banner-background-color: #1C539F; 16 | 17 | /* page colors (See page.scss) **/ 18 | --page-color: #0f90fe; 19 | --page-code-color: #17a2b8; 20 | } 21 | 22 | [data-theme="dark"] { 23 | /* text colors (Title, Text, Links, Dates) */ 24 | --title-color: white; 25 | --text-color: white; 26 | --link-color: white; 27 | --dates-color: #b6b6b6; 28 | 29 | /* background colors (Body, Cards, Banner, Form)*/ 30 | --body-color: #303030; 31 | --card-color: #232323; 32 | --banner-background-color: #e3ac67; 33 | 34 | /* page colors (See page.scss) **/ 35 | --page-color: #0f90fe; 36 | --page-code-color: #17a2b8; 37 | } 38 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 MLH Fellowship 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /_sass/footer.scss: -------------------------------------------------------------------------------- 1 | 2 | #btnTop { 3 | display: inline-block; 4 | background-color: #0766CA; 5 | width: 50px; 6 | height: 50px; 7 | text-align: center; 8 | border-radius: 4px; 9 | position: fixed; 10 | bottom: 30px; 11 | right: 30px; 12 | transition: background-color .3s, 13 | opacity .5s, visibility .5s; 14 | opacity: 0; 15 | visibility: hidden; 16 | z-index: 1000; 17 | } 18 | 19 | #btnTop:hover { 20 | cursor: pointer; 21 | background-color: #333; 22 | } 23 | #btnTop:active { 24 | background-color: #555; 25 | } 26 | #btnTop.show { 27 | opacity: 1; 28 | visibility: visible; 29 | } 30 | 31 | 32 | .footer { 33 | height: 200px; 34 | background-color: var(--banner-light-blue) !important; 35 | margin-top: 50px; 36 | align-items: center; 37 | 38 | h1 { 39 | margin-top: 30px; 40 | font-size: 30px; 41 | font-family: "Open Sans", sans-serif; 42 | } 43 | 44 | .social-image { 45 | padding: 10px; 46 | 47 | :hover { 48 | opacity: 0.9; 49 | } 50 | 51 | img { 52 | width: 60px; 53 | } 54 | } 55 | } 56 | 57 | -------------------------------------------------------------------------------- /_includes/contact.html: -------------------------------------------------------------------------------- 1 |

Contact Me

2 |
3 |
4 |
5 | 6 | 14 |
15 |
16 | 17 | 25 |
26 |
27 | 28 | 37 |
38 |
39 | 40 |
41 |
42 |
43 | -------------------------------------------------------------------------------- /pull_request_template.md: -------------------------------------------------------------------------------- 1 | ### Why This PR Adds Value 2 | 3 | Why did you submit this PR? What are its benefits? - Use Issue Description as inspiration 4 | 5 | ### What This PR Adds 6 | 7 | - Bullet point list of features - should be descriptive. Mention code variables, file names and/or selectors. 8 | 9 | > Add a screenshot below of what your changes look like - especially if it changes the UI. Remove this line and the quotation marks on the line below and add the alt text and image link accordingly. You can also upload images to GitHub by dragging and dropping (or copying and pasting) the image. 10 | 11 | ### Screenshot 12 | 13 | `![Image Alt Text](Image Link)` 14 | 15 | ### How This PR Could Be Improved 16 | 17 | - **Improvement Area** - Add details of what the improvement is, why it would be an improvement and if there are any blockers or issues preventing you from implementing it (lack of knowledge, isn't possible, haven't got to it yet or dependent on another issue (if so link to the issue using `#issue number`). This is the place to ask for help if needed. Looking for help from a fellow pod member with a specific skill set? Mention it here. 18 | 19 | ### Issue This PR Closes 20 | 21 | > This will link the PR to the relevant issue so merging the PR with automatically close the issue. Also, it helps others discover which issues have open PRs. **Note**: Don't change any of the wording in the line below or it won't work. 22 | 23 | This closes #`issue number` 24 | 25 | > See this [PR](https://github.com/MLH-Fellowship/pod-3.1.3-portfolio/pull/13) for an example 26 | -------------------------------------------------------------------------------- /_includes/about.html: -------------------------------------------------------------------------------- 1 |

About

2 |
3 |
4 |
5 |
6 | {% for item in site.data.about %} 7 |
8 |

Full Name: {{item.name}}

9 |

Contact: {{item.number}}

10 |

E-mail: {{item.email}}

11 |

Fun Fact: {{item.funfact}}

12 |
13 | 14 |
15 |

Hello there!

16 |

 {{item.bio1}}

17 |
18 |
19 |
20 |
21 |
22 | Most used languages on GitHub 28 |
29 |
30 | GitHub statistics (Total Stars, Total Commits, Total PRs, Total Issues, Contributed to) 36 |
37 |
38 |
39 | {% endfor %} 40 |
41 |
42 | -------------------------------------------------------------------------------- /assets/js/dark-mode.js: -------------------------------------------------------------------------------- 1 | // Wait for document to load 2 | document.addEventListener("DOMContentLoaded", function(event) { 3 | document.documentElement.setAttribute("data-theme", "dark"); 4 | 5 | // Get the button switcher from DOM 6 | var themeSwitcher = document.getElementById("Switch"); 7 | 8 | themeSwitcher.onclick = function() { 9 | // Get the current color theme 10 | var currentTheme = document.documentElement.getAttribute("data-theme"); 11 | 12 | // If dark, switch to light : If light, switch to dark 13 | var switchToTheme = currentTheme === "dark" ? "light" : "dark" 14 | 15 | // Set the new color theme 16 | document.documentElement.setAttribute("data-theme", switchToTheme); 17 | 18 | 19 | // Get Sources for Current GitHub Stats and Most Used Languages 20 | var currentGitHubStats = document.getElementById("github_stats").src 21 | var currentGitHubLanguages = document.getElementById("github_languages").src 22 | 23 | // If dark, switch GitHub theme to dark : If light, switch GitHub theme to light 24 | if (currentTheme == "dark") { 25 | document.getElementById("github_stats").src = document.getElementById("github_stats").src.replace("dark", "default"); 26 | document.getElementById("github_languages").src = document.getElementById("github_languages").src.replace("dark", "default"); 27 | } else { 28 | document.getElementById("github_stats").src = document.getElementById("github_stats").src.replace("default", "dark"); 29 | document.getElementById("github_languages").src = document.getElementById("github_languages").src.replace("default", "dark"); 30 | } 31 | 32 | 33 | } 34 | }); 35 | -------------------------------------------------------------------------------- /_includes/footer.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | {% if site.social %} 4 |

Connect with me

5 | {% endif %} 6 |
7 | 8 | {% if site.social.github_username %} 9 | 14 | {% endif %} 15 | {% if site.social.twitter_username %} 16 | 21 | {% endif %} 22 | {% if site.social.linkedin_username %} 23 | 29 | {% endif %} 30 |
31 |
32 | 33 |
34 | 35 |
36 | 37 | 56 | 57 | -------------------------------------------------------------------------------- /_data/projects.yml: -------------------------------------------------------------------------------- 1 | - title: Task Tracker 2 | event: MLH Fellowship Pre Fellowship Project 3 | date: Summer 2021 - Batch 3.5 4 | page-name: project 5 | 6 | # Optional links 7 | github: https://github.com/ 8 | external_link: https://github.com/ 9 | video_demo: https://github.com/ 10 | 11 | id: 1 12 | summary: >- # This means to ignore newlines until the next attribute. This summary is used for the overlay card content. 13 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 14 | Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 15 | Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 16 | Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 17 | 18 | # Second Dummy project 19 | - title: Not a Task Tracker 20 | event: MLH Fellowship Pre Fellowship Project 21 | date: Summer 2021 - Batch 3.5 22 | page-name: project 23 | 24 | # Optional links 25 | github: https://github.com/ 26 | external_link: 27 | video_demo: https://github.com/ 28 | 29 | id: 2 30 | summary: >- # This means to ignore newlines until the next attribute 31 | 32 | 33 | Some new random Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 34 | Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 35 | Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 36 | Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 37 | -------------------------------------------------------------------------------- /_includes/header.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | {{ site.title }} 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /_includes/navbar.html: -------------------------------------------------------------------------------- 1 |
2 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 |
51 | -------------------------------------------------------------------------------- /projects/project.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: My Project 3 | layout: page 4 | --- 5 | 6 | ## Inspiration 7 | 8 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 9 | 10 | ## What it does 11 | 12 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 13 | 14 | ## How we built it 15 | 16 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 17 | 18 | ## Challenge we ran into 19 | 20 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -------------------------------------------------------------------------------- /Gemfile.lock: -------------------------------------------------------------------------------- 1 | GEM 2 | remote: https://rubygems.org/ 3 | specs: 4 | addressable (2.7.0) 5 | public_suffix (>= 2.0.2, < 5.0) 6 | colorator (1.1.0) 7 | concurrent-ruby (1.1.9) 8 | em-websocket (0.5.2) 9 | eventmachine (>= 0.12.9) 10 | http_parser.rb (~> 0.6.0) 11 | eventmachine (1.2.7) 12 | eventmachine (1.2.7-x64-mingw32) 13 | ffi (1.15.3) 14 | ffi (1.15.3-x64-mingw32) 15 | forwardable-extended (2.6.0) 16 | http_parser.rb (0.6.0) 17 | i18n (1.8.10) 18 | concurrent-ruby (~> 1.0) 19 | jekyll (4.1.1) 20 | addressable (~> 2.4) 21 | colorator (~> 1.0) 22 | em-websocket (~> 0.5) 23 | i18n (~> 1.0) 24 | jekyll-sass-converter (~> 2.0) 25 | jekyll-watch (~> 2.0) 26 | kramdown (~> 2.1) 27 | kramdown-parser-gfm (~> 1.0) 28 | liquid (~> 4.0) 29 | mercenary (~> 0.4.0) 30 | pathutil (~> 0.9) 31 | rouge (~> 3.0) 32 | safe_yaml (~> 1.0) 33 | terminal-table (~> 1.8) 34 | jekyll-sass-converter (2.1.0) 35 | sassc (> 2.0.1, < 3.0) 36 | jekyll-watch (2.2.1) 37 | listen (~> 3.0) 38 | kramdown (2.3.1) 39 | rexml 40 | kramdown-parser-gfm (1.1.0) 41 | kramdown (~> 2.0) 42 | liquid (4.0.3) 43 | listen (3.5.1) 44 | rb-fsevent (~> 0.10, >= 0.10.3) 45 | rb-inotify (~> 0.9, >= 0.9.10) 46 | mercenary (0.4.0) 47 | pathutil (0.16.2) 48 | forwardable-extended (~> 2.6) 49 | public_suffix (4.0.6) 50 | rb-fsevent (0.11.0) 51 | rb-inotify (0.10.1) 52 | ffi (~> 1.0) 53 | rexml (3.2.5) 54 | rouge (3.26.0) 55 | safe_yaml (1.0.5) 56 | sassc (2.4.0) 57 | ffi (~> 1.9) 58 | sassc (2.4.0-x64-mingw32) 59 | ffi (~> 1.9) 60 | terminal-table (1.8.0) 61 | unicode-display_width (~> 1.1, >= 1.1.1) 62 | thread_safe (0.3.6) 63 | tzinfo (1.2.9) 64 | thread_safe (~> 0.1) 65 | tzinfo-data (1.2021.1) 66 | tzinfo (>= 1.0.0) 67 | unicode-display_width (1.7.0) 68 | wdm (0.1.1) 69 | webrick (1.7.0) 70 | 71 | PLATFORMS 72 | ruby 73 | x64-mingw32 74 | 75 | DEPENDENCIES 76 | jekyll (~> 4.1.1) 77 | tzinfo (~> 1.2) 78 | tzinfo-data 79 | wdm (~> 0.1.1) 80 | webrick (~> 1.7) 81 | 82 | BUNDLED WITH 83 | 2.2.24 84 | -------------------------------------------------------------------------------- /_sass/profile.scss: -------------------------------------------------------------------------------- 1 | .home { 2 | background-color: var(--banner-background-color) !important; 3 | position: relative; 4 | height: 85vh; 5 | overflow: hidden; 6 | } 7 | 8 | .profile { 9 | position: absolute; 10 | top: 50%; 11 | left: 50%; 12 | transform: translate(-50%, -50%); 13 | color: #fff; 14 | text-align: center; 15 | height: 320px; 16 | margin-bottom: 50px; 17 | h1 { 18 | font-size: 50px; 19 | font-weight: 700; 20 | color: var(--title-color); 21 | } 22 | 23 | img { 24 | border-radius: 50%; 25 | max-width: 100%; 26 | max-height: 100%; 27 | margin-left: auto; 28 | margin-right: auto; 29 | display: block; 30 | padding: 20px; 31 | } 32 | 33 | .profile-picture { 34 | margin-bottom: 30px; 35 | height: 200px; 36 | z-index: 1; 37 | } 38 | 39 | .download { 40 | color: var(--title-color); 41 | outline: none; 42 | background: transparent; 43 | border: none; 44 | margin-left: 0; 45 | } 46 | } 47 | 48 | /* Background Animation */ 49 | 50 | .cube { 51 | position: absolute; 52 | top: 80vh; 53 | left: 45vw; 54 | width: 10px; 55 | height: 10px; 56 | border: solid 1px darken(#0040C1, 8%); 57 | transform-origin: top left; 58 | transform: scale(0) rotate(0deg) translate(-50%, -50%); 59 | animation: cube 12s ease-in forwards infinite; 60 | 61 | &:nth-child(2n) { 62 | border-color: lighten(#0040C1, 10%); 63 | } 64 | 65 | &:nth-child(2) { 66 | animation-delay: 2s; 67 | left: 25vw; 68 | top: 40vh; 69 | } 70 | 71 | &:nth-child(3) { 72 | animation-delay: 4s; 73 | left: 75vw; 74 | top: 50vh; 75 | } 76 | 77 | &:nth-child(4) { 78 | animation-delay: 6s; 79 | left: 90vw; 80 | top: 10vh; 81 | } 82 | 83 | &:nth-child(5) { 84 | animation-delay: 8s; 85 | left: 10vw; 86 | top: 85vh; 87 | } 88 | 89 | &:nth-child(6) { 90 | animation-delay: 10s; 91 | left: 50vw; 92 | top: 10vh; 93 | } 94 | } 95 | 96 | @keyframes cube { 97 | from { 98 | transform: scale(0) rotate(0deg) translate(-50%, -50%); 99 | opacity: 1; 100 | } 101 | to { 102 | transform: scale(20) rotate(960deg) translate(-50%, -50%); 103 | opacity: 0; 104 | } 105 | } 106 | -------------------------------------------------------------------------------- /_sass/page.scss: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | p, h1, h2, h3, h4, h5, h6, button { 5 | font-family: "Open Sans", serif; 6 | } 7 | 8 | h2 { 9 | font-size: large; 10 | } 11 | 12 | body { 13 | background-color:var(--body-color) !important; 14 | background-size: cover; 15 | width: auto!important; 16 | overflow-x: hidden!important; 17 | font-family: "Open Sans", serif; 18 | } 19 | 20 | .banner { 21 | padding: 20px 0px 50px 0px; 22 | height: 150px; 23 | background-color: var(--banner-background-color); 24 | } 25 | 26 | .banner .logo { 27 | max-width:180px; 28 | max-height:60px; 29 | width: auto; 30 | height: auto; 31 | } 32 | 33 | .banner .title { 34 | color: var(--title-color); 35 | font-size: 50px; 36 | font-weight: 700; 37 | } 38 | 39 | .page { 40 | text-align: left; 41 | } 42 | 43 | 44 | .page h1 { 45 | text-align: left !important; 46 | font-weight: 800 !important; 47 | color: var(--text-color); 48 | margin-bottom: 0.7em; 49 | } 50 | 51 | .page h2 { 52 | text-align: left !important; 53 | font-weight: 800 !important; 54 | color: var(--text-color); 55 | margin-bottom: 0.5em; 56 | } 57 | 58 | .page h3 { 59 | font-weight: 600 !important; 60 | text-align: left !important; 61 | color: var(--text-color); 62 | font-size: 1.3rem; 63 | } 64 | 65 | .page h4 { 66 | font-weight: 600 !important; 67 | text-align: center !important; 68 | color: var(--text-color); 69 | } 70 | 71 | .page p { 72 | color: var(--text-color); 73 | font-weight: 500; 74 | } 75 | 76 | .page td { 77 | color: var(--text-color); 78 | } 79 | 80 | .page th { 81 | color: var(--text-color); 82 | } 83 | 84 | .page li { 85 | color: var(--text-color); 86 | } 87 | 88 | .page a { 89 | color: var(--page-color); 90 | } 91 | 92 | .page a:hover { 93 | color: var(--page-color); 94 | } 95 | 96 | .page code { 97 | color: var(--page-code-color); 98 | } 99 | 100 | hr { 101 | background-color: var(--text-color); 102 | padding: 1px; 103 | margin-top: 1em !important; 104 | margin-bottom: 1em !important; 105 | } 106 | 107 | @media screen and (max-width: 768px) { 108 | 109 | .banner { 110 | padding: 20px 0px 20px 0px; 111 | height: 110px; 112 | } 113 | 114 | .banner .logo { 115 | max-width:150px; 116 | max-height:60px; 117 | width: auto; 118 | height: auto; 119 | } 120 | 121 | .banner .title { 122 | color: var(--title-color); 123 | font-size: 30px; 124 | font-weight: 700; 125 | } 126 | 127 | .page h1 { 128 | font-size: 1.5rem !important; 129 | } 130 | 131 | .page h2 { 132 | font-size: 1.2rem !important; 133 | } 134 | 135 | .page h4 { 136 | font-size: 0.8rem !important; 137 | } 138 | } 139 | -------------------------------------------------------------------------------- /_sass/all.scss: -------------------------------------------------------------------------------- 1 | /* CSS Imports */ 2 | @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"); 3 | @import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap"); 4 | @import "navbar"; 5 | @import "profile"; 6 | @import "page"; 7 | @import "toggle"; 8 | @import 'projects'; 9 | @import 'footer'; 10 | 11 | /* Global CSS */ 12 | 13 | html { 14 | font-size: 16px; 15 | scroll-behavior: smooth; 16 | } 17 | 18 | ::-webkit-scrollbar-track 19 | { 20 | -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 21 | border-radius: 10px; 22 | background-color: #F5F5F5; 23 | } 24 | 25 | ::-webkit-scrollbar 26 | { 27 | width: 8px; 28 | background-color: transparent; 29 | } 30 | 31 | ::-webkit-scrollbar-thumb 32 | { 33 | -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); 34 | background-color: #0766CA; 35 | } 36 | 37 | ::-webkit-scrollbar-thumb:hover { 38 | background: #8e7f7f; 39 | } 40 | 41 | .card-container { 42 | display: grid; 43 | grid-template-columns: repeat(4, 1fr); 44 | font-family: "Open Sans", sans-serif; 45 | } 46 | 47 | body { 48 | background-color: var(--body-color); 49 | margin-bottom: 50px; 50 | color: var(--text-color) 51 | } 52 | 53 | h2 { 54 | margin-bottom: 20px; 55 | margin-top: 20px; 56 | font-weight: 700; 57 | text-align: center; 58 | } 59 | 60 | .card { 61 | display: flex; 62 | flex-direction: row; 63 | align-items: center; 64 | justify-content: center; 65 | margin: 20px 30px; 66 | background-color: var(--card-color); 67 | border-radius: 0.375rem; 68 | padding: 1.5em; 69 | font-size: 1.2em; 70 | text-align: center; 71 | cursor: pointer; 72 | } 73 | 74 | a { 75 | color: var(--link-colo); 76 | } 77 | 78 | /* Full Width Card CSS */ 79 | 80 | .card.full { 81 | .icon { 82 | width: 50%; 83 | height: auto; 84 | 85 | img { 86 | border-radius: 50%; 87 | } 88 | } 89 | 90 | .info { 91 | padding: 2.5%; 92 | 93 | .location { 94 | margin: 2.5% 0; 95 | } 96 | } 97 | } 98 | 99 | /* Card Info CSS */ 100 | 101 | .info { 102 | p { 103 | margin-top: 5px; 104 | margin: 0px; 105 | text-align: left; 106 | } 107 | 108 | .title { 109 | font-size: 500; 110 | font-weight: bold; 111 | } 112 | 113 | .location { 114 | font-size: medium; 115 | font-weight: 400; 116 | } 117 | 118 | .text { 119 | font-size: medium; 120 | font-weight: 300; 121 | } 122 | 123 | .dates { 124 | font-size: small; 125 | color: var(--dates-color); 126 | } 127 | } 128 | 129 | .icon { 130 | width: 70px; 131 | height: 70px; 132 | margin-right: 20px; 133 | padding: 10px; 134 | 135 | img { 136 | width: 100%; 137 | } 138 | } 139 | 140 | /* Netlify form at the end of the index page */ 141 | .form-control { 142 | background-color: var(--card-color); 143 | border: var(--card-color); 144 | } 145 | 146 | .transform{ 147 | transition: all 0.3s; 148 | } 149 | .transform:hover{ 150 | transform: scale(1.05); 151 | } 152 | 153 | 154 | -------------------------------------------------------------------------------- /_sass/navbar.scss: -------------------------------------------------------------------------------- 1 | @import "toggle"; 2 | .navbar { 3 | background-color: var(--banner-background-color); 4 | } 5 | .nav-bar { 6 | width: 100%; 7 | display: inline-block; 8 | background-color: var(--banner-background-color); 9 | font-family: "Poppins", serif; 10 | font-weight: 700 !important; 11 | padding-top: 10px; 12 | } 13 | 14 | .navbar-light .navbar-nav .nav-link { 15 | color: white; 16 | } 17 | 18 | .navbar-light .navbar-nav .nav-link:hover { 19 | color: white; 20 | } 21 | 22 | .nav-logo img { 23 | width: 200px; 24 | z-index: 1; 25 | } 26 | 27 | .navbar-toggler { 28 | background-color: white; 29 | float: right; 30 | position: relative; 31 | } 32 | .navbar-brand { 33 | position: absolute; 34 | left: 5%; 35 | margin-left: -50px !important; 36 | display: block; 37 | padding-left: 5%; 38 | } 39 | 40 | button { 41 | margin-left: 82%; 42 | } 43 | 44 | .navbar-collapse { 45 | margin-left: 82%; 46 | } 47 | 48 | @media (min-width: 1200px) { 49 | .navbar-collapse { 50 | margin-left: auto; 51 | } 52 | .navbar-brand { 53 | left: 5%; 54 | } 55 | } 56 | 57 | 58 | @media (max-width: 1076px) { 59 | .navbar-brand { 60 | left: 11%; 61 | } 62 | } 63 | 64 | @media (max-width: 500px) { 65 | .navbar-brand { 66 | margin-left: 10%; 67 | padding-left: 5%; 68 | } 69 | button { 70 | margin-left: 30%; 71 | } 72 | .navbar-collapse { 73 | margin-left: 30%; 74 | } 75 | 76 | } 77 | 78 | @media (min-width: 500px) and (max-width: 590px) { 79 | button { 80 | margin-left: 60%; 81 | } 82 | .navbar-collapse { 83 | margin-left: 60%; 84 | } 85 | } 86 | 87 | @media (min-width: 590px) and (max-width: 850px) { 88 | button { 89 | margin-left: 72%; 90 | } 91 | .navbar-collapse { 92 | margin-left: 72%; 93 | } 94 | } 95 | 96 | @media (min-width: 850px) and (max-width: 1000px) { 97 | button { 98 | margin-left: 80%; 99 | } 100 | .navbar-collapse { 101 | margin-left: 80%; 102 | } 103 | } 104 | 105 | /* Dark Mode toggle */ 106 | 107 | .theme-switch-wrapper { 108 | display: flex; 109 | align-items: center; 110 | padding-left: 5%; 111 | color: white; 112 | background-color: var(--banner-background-color); 113 | 114 | em { 115 | margin-left: 10px; 116 | font-size: 1rem; 117 | } 118 | 119 | } 120 | .theme-switch { 121 | display: inline-block; 122 | height: 34px; 123 | position: relative; 124 | width: 60px; 125 | } 126 | 127 | .theme-switch input { 128 | display: none; 129 | } 130 | 131 | .slider { 132 | background-color: #ccc; 133 | bottom: 0; 134 | cursor: pointer; 135 | left: 0; 136 | position: absolute; 137 | right: 0; 138 | top: 0; 139 | transition: 0.4s; 140 | } 141 | 142 | .slider:before { 143 | background-color: #fff; 144 | bottom: 4px; 145 | content: ""; 146 | height: 26px; 147 | left: 4px; 148 | position: absolute; 149 | transition: 0.4s; 150 | width: 26px; 151 | } 152 | 153 | input:checked + .slider { 154 | background-color: #66bb6a; 155 | } 156 | 157 | input:checked + .slider:before { 158 | transform: translateX(26px); 159 | } 160 | 161 | .slider.round { 162 | border-radius: 34px; 163 | } 164 | 165 | .slider.round:before { 166 | border-radius: 50%; 167 | } -------------------------------------------------------------------------------- /_includes/projects.html: -------------------------------------------------------------------------------- 1 |

Projects

2 |
3 |
4 | {% for item in site.data.projects %} 5 |
6 | 11 |
12 |
13 |

{{ item.title }}

14 |

{{ item.event }}

15 |

{{ item.date }}

16 |
17 |
18 | 19 |
20 |
21 | 97 | {% endfor %} 98 |
99 | -------------------------------------------------------------------------------- /_sass/toggle.scss: -------------------------------------------------------------------------------- 1 | 2 | 3 | .switch { 4 | background-color: var(--banner-background-color); 5 | display: inline-block; 6 | position: relative; 7 | } 8 | 9 | .switch__input { 10 | clip: rect(1px, 1px, 1px, 1px); 11 | clip-path: inset(50%); 12 | height: 1px; 13 | width: 1px; 14 | margin: -1px; 15 | overflow: hidden; 16 | padding: 0; 17 | position: absolute; 18 | } 19 | 20 | .switch__label { 21 | 22 | position: relative; 23 | display: inline-block; 24 | width: 90px; 25 | height: 40px; 26 | background-color: #2B2B2B; 27 | border: 5px solid #5B5B5B; 28 | border-radius: 9999px; 29 | cursor: pointer; 30 | transition: all 0.4s cubic-bezier(.46,.03,.52,.96); 31 | } 32 | 33 | .switch__indicator { 34 | position: absolute; 35 | top: 50%; 36 | left: 50%; 37 | transform: translate(-50%, -50%) translateX(-72%); 38 | display: block; 39 | width: 30px; 40 | height: 30px; 41 | background-color: #7B7B7B; 42 | border-radius: 9999px; 43 | box-shadow: 10px 0px 0 0 rgba(#000000, 0.2) inset; 44 | 45 | &::before, 46 | &::after { 47 | position: absolute; 48 | content: ''; 49 | display: block; 50 | background-color: #FFFFFF; 51 | border-radius: 9999px; 52 | } 53 | 54 | &::before { 55 | top: 7px; 56 | left: 7px; 57 | width: 9px; 58 | height: 9px; 59 | background-color: #FFFFFF; 60 | opacity: 0.6; 61 | } 62 | 63 | &::after { 64 | bottom: 8px; 65 | right: 6px; 66 | width: 14px; 67 | height: 14px; 68 | background-color: #FFFFFF; 69 | opacity: 0.8; 70 | } 71 | } 72 | 73 | .switch__decoration { 74 | position: absolute; 75 | top: 65%; 76 | left: 50%; 77 | display: block; 78 | width: 5px; 79 | height: 5px; 80 | background-color: #FFFFFF; 81 | border-radius: 9999px; 82 | animation: twinkle 0.8s infinite -0.6s; 83 | 84 | &::before, 85 | &::after { 86 | position: absolute; 87 | display: block; 88 | content: ''; 89 | width: 5px; 90 | height: 5px; 91 | background-color: #FFFFFF; 92 | border-radius: 9999px; 93 | } 94 | 95 | &::before { 96 | top: -20px; 97 | left: 10px; 98 | opacity: 1; 99 | animation: twinkle 0.6s infinite; 100 | } 101 | 102 | &::after { 103 | top: -7px; 104 | left: 30px; 105 | animation: twinkle 0.6s infinite -0.2s; 106 | } 107 | } 108 | 109 | @keyframes twinkle { 110 | 50% { opacity: 0.2; } 111 | } 112 | 113 | .switch__indicator { 114 | &, 115 | &::before, 116 | &::after { 117 | transition: all 0.4s cubic-bezier(.46,.03,.52,.96); 118 | } 119 | } 120 | 121 | .switch__input:checked + .switch__label { 122 | background-color: #8FB5F5; 123 | border-color: #347CF8; 124 | 125 | .switch__indicator { 126 | background-color: #ECD21F; 127 | box-shadow: none; 128 | transform: translate(-50%, -50%) translateX(72%); 129 | 130 | &::before, 131 | &::after { 132 | display: none; 133 | } 134 | } 135 | 136 | .switch__decoration { 137 | top: 50%; 138 | transform: translate(0%, -50%); 139 | animation: cloud 8s linear infinite; 140 | 141 | width: 20px; 142 | height: 20px; 143 | 144 | &::before { 145 | width: 10px; 146 | height: 10px; 147 | top: auto; 148 | bottom: 0; 149 | left: -8px; 150 | animation: none; 151 | } 152 | 153 | &::after { 154 | width: 15px; 155 | height: 15px; 156 | top: auto; 157 | bottom: 0; 158 | left: 16px; 159 | animation: none; 160 | } 161 | 162 | &, 163 | &::before, 164 | &::after { 165 | border-radius: 9999px 9999px 0 0; 166 | } 167 | 168 | &::after { 169 | border-bottom-right-radius: 9999px; 170 | } 171 | } 172 | } 173 | 174 | @keyframes cloud { 175 | 0% { 176 | transform: translate(0%, -50%); 177 | } 178 | 50% { 179 | transform: translate(-50%, -50%); 180 | } 181 | 100% { 182 | transform: translate(0%, -50%); 183 | } 184 | } 185 | -------------------------------------------------------------------------------- /assets/img/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Portfolio Template 2 | 3 | This is a Jekyll website template designed for Pre Fellowship Fellows. This will be your first project for your pre-fellowship. You will first build this portfolio website with your peers then use it as a template for yourself. 4 | 5 | [![Netlify Status](https://api.netlify.com/api/v1/badges/3a8dce37-f16e-426c-b3f2-f9fa9faf0fb4/deploy-status)](https://app.netlify.com/sites/practically-pi-portfolio-template/deploys) 6 | 7 | ## Features 8 | 9 | * Easy setup with .yml, .sass and css variables 10 | * Projects showcase 11 | * Google Analytics integration 12 | * GitHub stats and MUL integration 13 | * Links to your Twitter, GitHub and LinkedIn 14 | * Downloadable Resume 15 | * Dark mode 16 | * Lighthouse Automated Auditing 17 | * Sweet UI :sunglasses: 18 | 19 | ## Directory strucure 20 | 21 | ``` 22 | . 23 | ├── _data # files to fill up with your data 24 | ├── _includes # HTML files included in the website 25 | ├── _layouts # Content Structure Rendering 26 | ├── _sass # beauty files 27 | ├── assets # Tools, utilities and resume storage 28 | │ ├── css # Configure your UI Colors 29 | │ ├── img # Configurable and stored images 30 | │ └── js # dark mode file 31 | ├── projects # Cards container project section 32 | ├── _config.yml # Configure your information 33 | ├── .gitignore 34 | ├── .ruby-version 35 | ├── 404.html 36 | ├── CODE_OF_CONDUCT.md 37 | ├── gemfile 38 | ├── gemfile.lock 39 | ├── LICENSE 40 | ├── README.md 41 | ├── index.html 42 | ├── lighthousec.js 43 | └── pull_request_template.md 44 | ``` 45 | 46 | ## Make your own! 47 | 48 | 1. Use the Template button. 49 | 2. Update `_config.yml` to contain your information. 50 | 1. Change `url` to the URL you'll be hosting it at 51 | 2. Make sure it has the / 52 | 3. Use something like Netlify or GitHub Pages to deploy (note, this only works on username.github.io, not username.github.io/repo-name) 53 | 54 | ## Add your portfolio 55 | 56 | Head to `_data` and fill out files `projects.yml`, `experience.yml`, `education.yml` and `recommendation.yml`. 57 | 58 | 59 | Project example. 60 | ```yaml 61 | - title: Machine Learning Project 62 | event: MLH Fellowship Pre Fellowship - Batch 3.5 63 | date: Fall 2020 64 | ``` 65 | 66 | Experience example. 67 | ```yaml 68 | - role: Pre Fellowship Fellow 69 | company: MLH Fellowship 70 | dates: Summer 2021 71 | logo: fellowship.svg 72 | ``` 73 | 74 | Education example. 75 | ```yaml 76 | - course: Pre Fellowship Fellow 77 | institute: MLH Fellowship 78 | dates: Summer 2021 79 | logo: fellowship.svg 80 | ``` 81 | 82 | Recommendation example. 83 | ```yaml 84 | - title: HackTheMidlands 85 | author: Robbie 86 | text: Top Zoom Host 87 | date: Summer 2021 88 | ``` 89 | ## Add project posts 90 | 91 | 1. Make a new `.md` file inside of `projects`. 92 | 2. Add the header to your markdown file (see below) and change the title to the name of your blog post. 93 | 3. Write your project page! Can be a README from GitHub or your Devpost page. 94 | 4. Add the `page-name` field to your `projects.yml` (see below). 95 | 96 | Top of post markdown file post. 97 | ``` 98 | --- 99 | title: Project 100 | layout: page 101 | --- 102 | ``` 103 | 104 | `projects.yml` with the `page-name` field. 105 | 106 | ```yaml 107 | - title: Machine Learning Project 108 | event: MLH Fellowship Pre Fellowship - Batch 3.5 109 | date: Summer 2021 110 | page-name: project 111 | ``` 112 | 113 | ## Add your Resume 114 | 115 | Inside the folder /assets add your resume file using .pdf format. 116 | It should be named `resume.pdf`. It will be avaliable for download as `{name surname} - resume.pdf"`! 117 | 118 | ## Add Google Analytics 119 | 120 | 1. Create a Google account if you don't have one 121 | 122 | 2. Sign in to your [Analytics account](https://analytics.google.com/) 123 | 124 | 3. Click Admin 125 | 126 | 4. Select an account from the menu in the *ACCOUNT* column. 127 | 128 | 5. Select a property from the menu in the *PROPERTY* column. 129 | 130 | 6. Under *PROPERTY*, click *Tracking Info* -> *Tracking Code*. Your Tracking ID will be displayed at the top of the page 131 | 132 | 7. Inside `_config.yml` file, simply enter your tracking id under `google-analytics` field. 133 | 134 | If you get stuck in any of these steps, refer [here](https://support.google.com/analytics/answer/1008080). 135 | 136 | ## Development 137 | 138 | If you want to test it locally or add some new features, run the commands below. Make sure to have [Ruby](https://www.ruby-lang.org/en/downloads/ "Ruby Installation") and Bundler (``gem install bundler``) installed. 139 | 140 | ``` 141 | bundle config set --local path 'vendor/bundle' 142 | bundle install 143 | bundle exec jekyll serve --livereload 144 | ``` 145 | note: If flag --livereload gives you an error don't use it. 146 | 147 | 148 | ### It should look like something like this: 149 | 150 | ![template screenshot](/assets/img/portfolio.png) -------------------------------------------------------------------------------- /assets/img/experience/mlh.svg: -------------------------------------------------------------------------------- 1 | mlh-logo-color-dark --------------------------------------------------------------------------------