├── LICENSE ├── README.md ├── css ├── reset.css ├── styles.css └── themes │ ├── green-white.css │ ├── grey-white.css │ ├── indigo-white.css │ ├── red-white.css │ ├── white-blue.css │ ├── white-grey.css │ ├── white-indigo.css │ ├── white-red.css │ └── yellow-black.css ├── favicon.ico └── index.html /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Dinesh Pandiyan 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. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Dev Landing Page 2 | 3 | Minimal landing page for developers. 4 | 5 | Developers don't talk much. Their code does all the talking. So here's a minimal landing page for developers. 6 | 7 | ## Why? [![start with why](https://img.shields.io/badge/start%20with-why%3F-brightgreen.svg?style=flat)](http://www.ted.com/talks/simon_sinek_how_great_leaders_inspire_action) 8 | 9 | I wanted a dev landing page to showcase everything I do online and I wanted it to be minimal and right to the point rather beautiful and hefty. And I think most of the devs out there would want the same. 10 | 11 | So I sat down one night and created this **Dev Landing Page**. Feel free to fork, clone, play around and make this your own. 12 | 13 | ## Themes 14 | 15 | Dev Landing Page comes in 9 **material themes**. 16 | 17 | ![9 Material Themes](https://image.ibb.co/jJVKCn/dev_landing_page_themes.jpg) 18 | 19 | If none of these themes fit within your taste, it's quite easy to customize and create your own too. 20 | 21 | ## GitHub Pages 22 | 23 | GitHub makes it easy to create personal websites. Follow this link - [GitHub Pages](https://pages.github.com/) to know how or follow the steps below. 24 | 25 | If you already have a GitHub profile (obviously) 26 | 27 | * Create a new repo with the name `{username}.github.io` 28 | * Clone/Fork this repo and copy the files to your newly created repo 29 | * Customize your name, links and everything else for your landing page 30 | * `git push` 31 | 32 | Voila! Your site should be live at `https://{username}.github.io` 33 | 34 | Here's my **Dev Landing Page** - [Dinesh Pandiyan - v1](https://v1.dineshpandiyan.com/) 35 | 36 | ### Custom Domain 37 | 38 | If you want to make your new landing page available under a domain like `{username}.com` you can get started here - [Setting up a custom domain](https://help.github.com/articles/quick-start-setting-up-a-custom-domain/). 39 | 40 | ## License 41 | 42 | MIT © Dinesh Pandiyan 43 | -------------------------------------------------------------------------------- /css/reset.css: -------------------------------------------------------------------------------- 1 | /* Minimal CSS Reset */ 2 | 3 | html { 4 | box-sizing: border-box; 5 | font-size: 12px; 6 | } 7 | 8 | *, *:before, *:after { 9 | box-sizing: inherit; 10 | } 11 | 12 | body, h1, h2, h3, h4, h5, h6, p, ol, ul { 13 | margin: 0; 14 | padding: 0; 15 | font-weight: normal; 16 | } 17 | 18 | ol, ul { 19 | list-style: none; 20 | } 21 | 22 | img { 23 | max-width: 100%; 24 | height: auto; 25 | } -------------------------------------------------------------------------------- /css/styles.css: -------------------------------------------------------------------------------- 1 | /* Typography */ 2 | 3 | html { 4 | font-family: 'Roboto', sans-serif; 5 | } 6 | 7 | @media (min-width: 576px) { 8 | html { 9 | font-size: 14px; 10 | } 11 | } 12 | 13 | @media (min-width: 768px) { 14 | html { 15 | font-size: 16px; 16 | } 17 | } 18 | 19 | @media (min-width: 992px) { 20 | html { 21 | font-size: 18px; 22 | } 23 | } 24 | 25 | @media (min-width: 1200px) { 26 | html { 27 | font-size: 20px; 28 | } 29 | } 30 | 31 | .icons-social i { 32 | font-size: 3em; 33 | } 34 | 35 | /* Custom Styles */ 36 | 37 | main { 38 | display: flex; 39 | flex-direction: column; 40 | min-height: 100vh; 41 | justify-content: center; 42 | padding: 0 30px; 43 | text-align: center; 44 | } 45 | 46 | main > .intro { 47 | font-family: 'Reem Kufi', sans-serif; 48 | font-size: 3.75em; 49 | font-weight: 600; 50 | } 51 | 52 | main > .tagline { 53 | font-size: 1.5rem; 54 | margin: 1.5rem 0; 55 | font-weight: 100; 56 | } 57 | 58 | .icons-social i { 59 | padding: 10px; 60 | } 61 | 62 | .icons-social a { 63 | text-decoration: none; 64 | } 65 | 66 | .devto { 67 | margin-bottom: -0.20rem; 68 | } 69 | 70 | .devto svg { 71 | margin-bottom: -0.20rem; 72 | margin-left: 0.675rem;; 73 | width: 2.65rem; 74 | height: 2.65rem; 75 | } -------------------------------------------------------------------------------- /css/themes/green-white.css: -------------------------------------------------------------------------------- 1 | /* Theme */ 2 | 3 | main { 4 | background: #43A047; 5 | color: #FAFAFA; 6 | } 7 | 8 | .icons-social a { 9 | color: #FAFAFA; 10 | } 11 | 12 | .icons-social a svg path{ 13 | fill: #FAFAFA; 14 | } -------------------------------------------------------------------------------- /css/themes/grey-white.css: -------------------------------------------------------------------------------- 1 | /* Theme */ 2 | 3 | main { 4 | background: #485564; 5 | color: #FAFAFA; 6 | } 7 | 8 | .icons-social a { 9 | color: #FAFAFA; 10 | } 11 | 12 | .icons-social a svg path{ 13 | fill: #FAFAFA; 14 | } -------------------------------------------------------------------------------- /css/themes/indigo-white.css: -------------------------------------------------------------------------------- 1 | /* Theme */ 2 | 3 | main { 4 | background: #303F9F; 5 | color: #FAFAFA; 6 | } 7 | 8 | .icons-social a { 9 | color: #FAFAFA; 10 | } 11 | 12 | .icons-social a svg path{ 13 | fill: #FAFAFA; 14 | } -------------------------------------------------------------------------------- /css/themes/red-white.css: -------------------------------------------------------------------------------- 1 | /* Theme */ 2 | 3 | main { 4 | background: #AF3D4E; 5 | color: #FAFAFA; 6 | } 7 | 8 | .icons-social a { 9 | color: #FAFAFA; 10 | } 11 | 12 | .icons-social a svg path{ 13 | fill: #FAFAFA; 14 | } -------------------------------------------------------------------------------- /css/themes/white-blue.css: -------------------------------------------------------------------------------- 1 | /* Theme */ 2 | 3 | main { 4 | background: #FAFAFA; 5 | color: #0277BD; 6 | } 7 | 8 | .icons-social a { 9 | color: #0277BD; 10 | } 11 | 12 | .icons-social a svg path{ 13 | fill: #0277BD; 14 | } -------------------------------------------------------------------------------- /css/themes/white-grey.css: -------------------------------------------------------------------------------- 1 | /* Theme */ 2 | 3 | main { 4 | background: #EDEDED; 5 | color: #4B5658; 6 | } 7 | 8 | .icons-social a { 9 | color: #4B5658; 10 | } 11 | 12 | .icons-social a svg path{ 13 | fill: #4B5658; 14 | } -------------------------------------------------------------------------------- /css/themes/white-indigo.css: -------------------------------------------------------------------------------- 1 | /* Theme */ 2 | 3 | main { 4 | background: #E8EAF6; 5 | color: #303F9F; 6 | } 7 | 8 | .icons-social a { 9 | color: #303F9F; 10 | } 11 | 12 | .icons-social a svg path{ 13 | fill: #303F9F; 14 | } -------------------------------------------------------------------------------- /css/themes/white-red.css: -------------------------------------------------------------------------------- 1 | /* Theme */ 2 | 3 | main { 4 | background: #EDEDED; 5 | color: #AF3D4E; 6 | } 7 | 8 | .icons-social a { 9 | color: #AF3D4E; 10 | } 11 | 12 | .icons-social a svg path{ 13 | fill: #AF3D4E; 14 | } -------------------------------------------------------------------------------- /css/themes/yellow-black.css: -------------------------------------------------------------------------------- 1 | /* Theme */ 2 | 3 | main { 4 | background: #FFEB3B; 5 | color: #1E1E1E; 6 | } 7 | 8 | .icons-social a { 9 | color: #1E1E1E; 10 | } 11 | 12 | .icons-social a svg path{ 13 | fill: #1E1E1E; 14 | } -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexdinesh/dev-landing-page/9d0a78f25090ef9e7612b44e8e8f31cc22a99f90/favicon.ico -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Dinesh Pandiyan | Awesome Dev 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 |
Hello, I'm Dinesh!
29 |
All-Star Dev | Code Fanatic | Linux Hacker | Bleh
30 | 31 |
32 | 33 | 34 | Github 35 | 36 | 37 | 38 | Twitter 39 | 40 | 41 | 42 | DEV Community 43 | 44 | 45 | 46 | StackOverflow 47 | 48 | 49 | 50 | LinkedIn 51 | 52 | 53 | 54 | Medium 55 | 56 | 57 | 58 | FreeCodeCamp 59 | 60 | 61 | 62 | Behance 63 | 64 | 65 | 66 | CodePen 67 | 68 |
69 |
70 | 71 | 72 | --------------------------------------------------------------------------------