├── .github └── ISSUE_TEMPLATE │ └── feature_request.md ├── .gitignore ├── LICENSE ├── README.md ├── cdn ├── css │ └── style.css └── images │ ├── apple-logo.svg │ ├── avatar.png │ ├── css3.png │ ├── email-icon.svg │ ├── goog-logo.svg │ ├── html5.png │ ├── instagram.svg │ ├── javascript.png │ ├── logo.png │ ├── meta-logo.svg │ ├── nodejs.png │ ├── project-1.jpeg │ ├── project-2.jpeg │ ├── reactjs.png │ ├── screenshot.jpg │ ├── x.png │ └── youtube.png └── index.html /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | ._* 3 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 ABM 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this website and associated documentation files (the "website"), to deal 7 | in the website without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the website, and to permit persons to whom the website 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 website. 14 | 15 | THE WEBSITE 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 website OR THE USE OR OTHER DEALINGS IN THE 21 | website. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Developer Portfolio Website 2 | 3 | ![Portfolio Screenshot](./cdn/images/screenshot.jpg) 4 | 5 | ## Introduction 6 | 7 | Welcome to my open-source Developer Portfolio website! This project is built using HTML and CSS. 8 | 9 | ## Sections 10 | 11 | 1. **About Section:** Discover more about me and my journey in the tech world. 12 | 13 | 2. **Programming Languages:** Explore some of the languages that programmers use. 14 | 15 | 3. **Projects Section:** Check out the projects I've worked on. 16 | 17 | 4. **Experience Section:** Learn about my professional experiences. 18 | 19 | 5. **Contact Section:** Reach out to me if you have any inquiries. 20 | 21 | ## Links 22 | 23 | - [Figma Design](https://www.figma.com/community/file/1308487677104759760) 24 | - [YouTube Tutorial](https://youtu.be/rkR2Jvh-GZE) 25 | 26 | ## How to Use 27 | 28 | 1. Clone the repository: `git clone https://github.com/your-username/your-portfolio.git` 29 | 2. Open `index.html` in your preferred browser. 30 | 31 | ## Learn How to Build 32 | 33 | If you want to learn how I created this portfolio, check out my [YouTube tutorial](link-to-youtube-tutorial). 34 | 35 | ## Subscribe and Star 36 | 37 | If you find the content helpful, consider subscribing to my channel for more tutorials. Don't forget to give this repository a star if you love it! 38 | 39 | ## Connect with Me 40 | 41 | - Youtube: [@abmcode](https://www.youtube.com/channel/UC_cVNH4pTyn2p514P0h-MTw) 42 | - Instagram: [@abmcode](https://www.instagram.com/abmcode) 43 | - X: [@abmcode](https://twitter.com/abmcode) 44 | 45 | Feel free to explore, contribute, and customize this portfolio for your own use! 46 | 47 | Happy coding! 🚀 48 | -------------------------------------------------------------------------------- /cdn/css/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | body { 7 | font-family: "Poppins", sans-serif; 8 | background-color: #161513; 9 | color: #c5c5c5; 10 | } 11 | a { 12 | text-decoration: none; 13 | } 14 | header { 15 | background-color: #222; 16 | } 17 | nav { 18 | display: flex; 19 | justify-content: space-between; 20 | width: 1100px; 21 | margin: 0 auto; 22 | } 23 | .logo img { 24 | width: 80px; 25 | } 26 | .navbar { 27 | display: flex; 28 | } 29 | .navbar div { 30 | padding: 30px 20px; 31 | } 32 | .navbar a { 33 | color: #fff; 34 | } 35 | .container { 36 | width: 1100px; 37 | margin: 0 auto; 38 | padding: 80px 20px; 39 | } 40 | .avatar img { 41 | width: 251px; 42 | } 43 | .about { 44 | text-align: center; 45 | } 46 | .about-text { 47 | width: 652px; 48 | margin: 30px auto; 49 | } 50 | .about-text h1 { 51 | font-size: 55px; 52 | line-height: 1; 53 | color: #fff; 54 | } 55 | .about-text h1 > span { 56 | background: var( 57 | --Primary-Gradient, 58 | linear-gradient(116deg, #ff8660 71.79%, #9a33ff 95.51%) 59 | ); 60 | background-clip: text; 61 | -webkit-background-clip: text; 62 | -webkit-text-fill-color: transparent; 63 | } 64 | .about-text p { 65 | font-size: 18px; 66 | margin-top: 30px; 67 | } 68 | .about-btn { 69 | margin-top: 30px; 70 | } 71 | .btn-primary { 72 | width: 195px; 73 | height: 64px; 74 | border-radius: 50px; 75 | border: 1px solid var(--Primary-Color, #fff); 76 | background: linear-gradient( 77 | 0deg, 78 | var(--Primary-Color, #fff) 0%, 79 | var(--Primary-Color, #fff) 100% 80 | ), 81 | var(--Primary-Color, #fff); 82 | font-size: 22px; 83 | margin-right: 20px; 84 | } 85 | .btn-secondary { 86 | width: 195px; 87 | height: 64px; 88 | background: none; 89 | border: 2px solid #fff; 90 | border-radius: 50px; 91 | font-size: 22px; 92 | color: #fff; 93 | } 94 | .experience-with { 95 | text-align: center; 96 | } 97 | 98 | .experience-with h2 { 99 | font-size: 20px; 100 | } 101 | .experience-with-lang { 102 | display: flex; 103 | width: 500px; 104 | margin: 50px auto; 105 | justify-content: space-between; 106 | } 107 | .experience-with-lang img { 108 | width: 42px; 109 | cursor: pointer; 110 | } 111 | .primary-heading { 112 | text-align: center; 113 | font-size: 35px; 114 | } 115 | .heading-project { 116 | background: var( 117 | --Orange-Gradient, 118 | linear-gradient(180deg, #ff8660 0%, #d5491d 100%) 119 | ); 120 | background-clip: text; 121 | -webkit-background-clip: text; 122 | -webkit-text-fill-color: transparent; 123 | } 124 | .projects { 125 | display: flex; 126 | justify-content: space-between; 127 | margin: 40px 0; 128 | } 129 | .project-item { 130 | background: #2a2a2a; 131 | margin: 20px; 132 | border-radius: 18px 18px 0 0; 133 | } 134 | .project-item img { 135 | width: 100%; 136 | border-radius: 18px 18px 0 0; 137 | } 138 | .project-title { 139 | padding: 15px; 140 | } 141 | .project-title h3 { 142 | color: #fff; 143 | } 144 | 145 | .heading-experience { 146 | background: var( 147 | --Blue-Gradient, 148 | linear-gradient(180deg, #5badff 0%, #1373d1 100%) 149 | ); 150 | background-clip: text; 151 | -webkit-background-clip: text; 152 | -webkit-text-fill-color: transparent; 153 | } 154 | .experience-item { 155 | padding: 30px 0; 156 | } 157 | .experience-title-container { 158 | display: flex; 159 | justify-content: space-between; 160 | align-items: center; 161 | margin-bottom: 20px; 162 | } 163 | .experience-title-container .date { 164 | margin-left: auto; 165 | } 166 | .experience-title { 167 | color: #fff; 168 | font-size: 22px; 169 | font-weight: bold; 170 | margin-left: 10px; 171 | } 172 | footer { 173 | background-color: #191919; 174 | } 175 | footer h2 { 176 | color: #fff; 177 | font-size: 24px; 178 | margin-bottom: 20px; 179 | } 180 | footer p { 181 | font-size: 15px; 182 | } 183 | .email-container { 184 | display: flex; 185 | align-items: center; 186 | margin-top: 40px; 187 | } 188 | .email-container img { 189 | margin-right: 10px; 190 | } 191 | 192 | .social-links { 193 | display: flex; 194 | margin-top: 40px; 195 | } 196 | .social-links img { 197 | margin-right: 20px; 198 | } 199 | -------------------------------------------------------------------------------- /cdn/images/apple-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /cdn/images/avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abmcodes/developer-portfolio-website/612d4aa554a30e3f86114951be9d89d3f9cc2d6f/cdn/images/avatar.png -------------------------------------------------------------------------------- /cdn/images/css3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abmcodes/developer-portfolio-website/612d4aa554a30e3f86114951be9d89d3f9cc2d6f/cdn/images/css3.png -------------------------------------------------------------------------------- /cdn/images/email-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /cdn/images/goog-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 8 | 9 | -------------------------------------------------------------------------------- /cdn/images/html5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abmcodes/developer-portfolio-website/612d4aa554a30e3f86114951be9d89d3f9cc2d6f/cdn/images/html5.png -------------------------------------------------------------------------------- /cdn/images/instagram.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /cdn/images/javascript.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abmcodes/developer-portfolio-website/612d4aa554a30e3f86114951be9d89d3f9cc2d6f/cdn/images/javascript.png -------------------------------------------------------------------------------- /cdn/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abmcodes/developer-portfolio-website/612d4aa554a30e3f86114951be9d89d3f9cc2d6f/cdn/images/logo.png -------------------------------------------------------------------------------- /cdn/images/meta-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /cdn/images/nodejs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abmcodes/developer-portfolio-website/612d4aa554a30e3f86114951be9d89d3f9cc2d6f/cdn/images/nodejs.png -------------------------------------------------------------------------------- /cdn/images/project-1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abmcodes/developer-portfolio-website/612d4aa554a30e3f86114951be9d89d3f9cc2d6f/cdn/images/project-1.jpeg -------------------------------------------------------------------------------- /cdn/images/project-2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abmcodes/developer-portfolio-website/612d4aa554a30e3f86114951be9d89d3f9cc2d6f/cdn/images/project-2.jpeg -------------------------------------------------------------------------------- /cdn/images/reactjs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abmcodes/developer-portfolio-website/612d4aa554a30e3f86114951be9d89d3f9cc2d6f/cdn/images/reactjs.png -------------------------------------------------------------------------------- /cdn/images/screenshot.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abmcodes/developer-portfolio-website/612d4aa554a30e3f86114951be9d89d3f9cc2d6f/cdn/images/screenshot.jpg -------------------------------------------------------------------------------- /cdn/images/x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abmcodes/developer-portfolio-website/612d4aa554a30e3f86114951be9d89d3f9cc2d6f/cdn/images/x.png -------------------------------------------------------------------------------- /cdn/images/youtube.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abmcodes/developer-portfolio-website/612d4aa554a30e3f86114951be9d89d3f9cc2d6f/cdn/images/youtube.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | ABM Code 12 | 13 | 14 |
15 | 24 |
25 |
26 |
27 | abm avatar 28 |
29 |
30 |

I do code and
make content about it!

31 |

32 | I am a seasoned full-stack software engineer with over 8 years of 33 | professional experience, specializing in backend development. My 34 | expertise lies in crafting robust and scalable SaaS-based 35 | architectures on the Amazon AWS platform. 36 |

37 |
38 | 39 | 40 |
41 |
42 |
43 |
44 |

EXPERIENCE WITH

45 |
46 |
html logo
47 |
html logo
48 |
html logo
49 |
html logo
50 |
html logo
51 |
52 |
53 |
54 |

PROJECTS

55 |
56 |
57 | abm-project1 58 |
59 |

CLICK HERE TO VISIT

60 |

HTML Tutorial

61 |
62 |
63 |
64 | abm-project1 65 |
66 |

CLICK HERE TO VISIT

67 |

CSS Tutorial

68 |
69 |
70 |
71 |
72 |
73 |

EXPERIENCE

74 |
75 |
76 |
77 |
google
78 |
Lead Software Engineer at Google
79 |
Nov 2019 - Present
80 |
81 |

82 | As a Senior Software Engineer at Google, I played a pivotal role in 83 | developing innovative solutions for Google's core search algorithms. 84 | Collaborating with a dynamic team of engineers, I contributed to the 85 | enhancement of search accuracy and efficiency, optimizing user 86 | experiences for millions of users worldwide. 87 |

88 |
89 |
90 |
91 |
google
92 |
93 | Junior Software Engineer at Apple 94 |
95 |
Jan 2016 - Dec 2017
96 |
97 |

98 | During my tenure at Apple, I held the role of Software Architect, 99 | where I played a key role in shaping the architecture of 100 | mission-critical software projects. Responsible for designing 101 | scalable and efficient systems, I provided technical leadership to a 102 | cross-functional team. 103 |

104 |
105 |
106 |
107 |
google
108 |
Software Engineer at Meta
109 |
Jan 2017 - Oct 2019
110 |
111 |

112 | At Meta, I served as a Software Engineer, focusing on the design and 113 | implementation of backend systems for the social media giant's 114 | dynamic platform. Working on projects that involved large-scale data 115 | processing and user engagement features, I leveraged my expertise to 116 | ensure seamless functionality and scalability. 117 |

118 |
119 |
120 |
121 | 141 | 142 | 143 | --------------------------------------------------------------------------------