├── LICENSE.md ├── banner.png ├── cv.pdf ├── images └── profileImage.png ├── index.html ├── readme.md └── style.css /LICENSE.md: -------------------------------------------------------------------------------- 1 | This project is available for private, non-commercial use under the [GPL version 3](http://www.gnu.org/licenses/gpl-3.0-standalone.html). If you want it for commercial use, please contact at [webcifar@gmail.com](mailto:webcifar@gmail.com) 2 | -------------------------------------------------------------------------------- /banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ShaifArfan/html-css-resume/b32b314b5d4cb4d531430f4fd1ba549155cff16b/banner.png -------------------------------------------------------------------------------- /cv.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ShaifArfan/html-css-resume/b32b314b5d4cb4d531430f4fd1ba549155cff16b/cv.pdf -------------------------------------------------------------------------------- /images/profileImage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ShaifArfan/html-css-resume/b32b314b5d4cb4d531430f4fd1ba549155cff16b/images/profileImage.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Resume 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 |
17 |
18 | shaif arfan 19 |
20 |
21 |

22 | Shaif 23 | Arfan 24 |

25 |

Software Developer

26 |

27 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et 28 | dolore 29 | magna aliqua. Ut enim ad minim veniam, 30 |

31 | Download Resume 32 |
33 |
34 |
35 |
36 |
37 |

Expertise

38 |
    39 |
  • JavaScript
    • 40 |
  • PHP & Wordpress
    • 41 |
  • HTML CSS
    • 42 |
  • React JS
    • 43 |
  • MERN STACK
    • 44 |
45 |
46 |
47 |

Reference

48 |
49 |

Rashid Chy

50 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, neque?

51 |
52 |
53 |

Ayman Rahman

54 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 55 | incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

56 |
57 |
58 | 59 |
60 |

Education

61 |
62 |

2012-2014

63 |

MSC in CSE

64 |

65 | Chittagong University 66 |

67 |
68 |
69 |

2008-2012

70 |

BSC in CSE

71 |

72 | Chittagong University 73 |

74 |
75 |
76 | 77 |
78 |

certification

79 |
80 |

2018

81 |

Frontend Developer

82 |

83 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et 84 | dolore 85 | magna aliqua. Ut enim ad minim veniam, 86 |

87 |
88 |
89 |
90 |
91 |
92 |

Experience

93 |
94 |

2019 - present

95 |

Rashid Software LTD.

96 |

Frontend Developer

97 |

98 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et 99 | dolore 100 | magna aliqua. Ut enim ad minim veniam, 101 |

102 |
103 |
104 |

2019 - present

105 |

Rashid Software LTD.

106 |

Frontend Developer

107 |

108 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et 109 | dolore 110 | magna aliqua. Ut enim ad minim veniam, 111 |

112 |
113 |
114 |
115 |

Awards

116 |
117 |

2019

118 |

Rashid Software LTD.

119 |

120 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et 121 | dolore 122 | magna aliqua. Ut enim ad minim veniam, 123 |

124 |
125 |
126 |

2019

127 |

Rashid Software LTD.

128 |

129 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et 130 | dolore 131 | magna aliqua. Ut enim ad minim veniam, 132 |

133 |
134 |
135 | 136 |
137 |

Interest

138 |
139 |
140 | 141 | Music 142 |
143 |
144 | 145 | Books 146 |
147 |
148 | 149 | Travel 150 |
151 |
152 | 153 |
154 |
155 |
156 |
157 |
158 |

Contact

159 |
160 |

161 | Chittagong, Bangladesh 162 |

163 |

164 | +880 ** *** *** 165 |

166 |

167 | shaifarfan08@gmail.com 168 |

169 |
170 |
171 | 188 |
189 |
190 | 193 | 194 | 195 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | ![banner](./banner.png) 2 | 3 | ## HTML CSS Resume 4 | 5 | Simple Resume built in HTML CSS only! 6 | 7 | **Live Preview: [https://html-css-resume.surge.sh/](https://html-css-resume.surge.sh/)** 8 | YouTube Tutorial: [https://youtu.be/FHb9JobDs2o][yt-video] 9 | 10 | --- 11 | 12 | ### Made with ❤️ by [Shaif Arfan][arfan-ig] 13 | 14 | Like my works and want to support me? 15 | 16 | Buy Me A Coffee 17 | 18 | --- 19 | 20 | ## Other projects 21 | 22 | 📚 [All Web Cifar Projects][wc-projects] 23 | 24 | ### Q: How can i get started? 25 | 26 | You can get started by following the YouTube tutorial of this project. Here is the full tutorial video link: [https://youtu.be/FHb9JobDs2o][yt-video]. 27 | 28 | ## Feedback 29 | 30 | If you have any feedback, please reach out to us at [@web_cifar][wc-tw] 31 | 32 | ## Support 33 | 34 | For support, join our [Community Group][wc-fb-group]. 35 | 36 | Happy Coding! ✨🚀 37 | 38 | [wc-tw]: http://twitter.com/webcifar 39 | [wc-yt]: http://www.youtube.com/webcifarOfficial 40 | [arfan-ig]: https://www.instagram.com/shaifarfan08/ 41 | [wc-projects]: https://github.com/ShaifArfan/wc-project-tutorials 42 | [wc-fb-group]: https://www.facebook.com/groups/webcifar 43 | [buymeacoffee]: https://www.buymeacoffee.com/shaifarfan08 44 | [yt-video]: https://youtu.be/FHb9JobDs2o 45 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap'); 2 | 3 | * { 4 | padding: 0; 5 | margin: 0; 6 | box-sizing: border-box; 7 | } 8 | :root { 9 | --primary-color: #ff7613; 10 | --text-color: #727171; 11 | } 12 | html { 13 | font-size: 10px; 14 | } 15 | body { 16 | font-family: Inter, sans-serif; 17 | background-color: black; 18 | color: white; 19 | } 20 | 21 | /* common styles */ 22 | img { 23 | width: 100%; 24 | } 25 | a { 26 | text-decoration: none; 27 | color: white; 28 | } 29 | .description { 30 | margin-top: 1rem; 31 | font-size: 1.5rem; 32 | font-weight: 400; 33 | color: var(--text-color); 34 | } 35 | .title { 36 | color: var(--primary-color); 37 | font-weight: 700; 38 | font-size: 2rem; 39 | text-transform: uppercase; 40 | } 41 | .item_preTitle { 42 | font-size: 1.4rem; 43 | color: var(--text-color); 44 | font-weight: 300; 45 | } 46 | .item_title { 47 | font-size: 1.6rem; 48 | color: white; 49 | font-weight: 500; 50 | margin: 0.8rem 0; 51 | } 52 | .item_subtitle { 53 | font-size: 1.4rem; 54 | color: var(--text-color); 55 | font-weight: 400; 56 | } 57 | 58 | /* layouts */ 59 | .container { 60 | max-width: 1000px; 61 | width: 90%; 62 | margin: 0 auto; 63 | display: grid; 64 | padding: 5rem; 65 | background: #070707; 66 | grid-template-columns: 1fr 1fr; 67 | gap: 4rem; 68 | } 69 | @media only screen and (max-width: 768px) { 70 | .container { 71 | width: 100%; 72 | grid-template-columns: 1fr; 73 | padding: 3rem; 74 | gap: 7rem; 75 | } 76 | } 77 | .profile { 78 | grid-column: 1 / -1; 79 | margin-bottom: 2rem; 80 | } 81 | .group-1, 82 | .group-2 { 83 | display: flex; 84 | flex-direction: column; 85 | gap: 5rem; 86 | } 87 | .group-3 { 88 | max-width: 700px; 89 | width: 100%; 90 | margin: 0 auto; 91 | grid-column: 1/-1; 92 | display: flex; 93 | flex-direction: row; 94 | gap: 5rem; 95 | } 96 | .group-3 > div { 97 | flex: 1; 98 | } 99 | @media only screen and (max-width: 768px) { 100 | .profile { 101 | margin-bottom: 0; 102 | } 103 | .group-3 { 104 | flex-direction: column; 105 | } 106 | } 107 | 108 | /* profile */ 109 | .profile_container { 110 | display: flex; 111 | gap: 2rem; 112 | } 113 | .profile_profileImg { 114 | max-width: 250px; 115 | } 116 | .profile_name_firstName { 117 | color: white; 118 | font-weight: 200; 119 | font-size: clamp(2rem, 8vw, 4rem); 120 | text-transform: uppercase; 121 | display: block; 122 | margin-bottom: -0.8rem; 123 | } 124 | .profile_name_lastName { 125 | color: var(--primary-color); 126 | font-weight: 700; 127 | font-size: clamp(2.5rem, 15vw, 7rem); 128 | text-transform: uppercase; 129 | display: block; 130 | } 131 | .profile_title { 132 | font-size: 1.5rem; 133 | font-weight: 400; 134 | text-transform: uppercase; 135 | } 136 | .downloadBtn { 137 | display: block; 138 | text-decoration: underline; 139 | font-size: 1.6rem; 140 | margin-top: 1rem; 141 | } 142 | .downloadBtn:hover { 143 | color: var(--primary-color); 144 | } 145 | @media only screen and (max-width: 768px) { 146 | .profile_container { 147 | flex-direction: column; 148 | } 149 | } 150 | 151 | /* Expertise */ 152 | .skills_list { 153 | margin-top: 1rem; 154 | margin-left: 2rem; 155 | line-height: 2; 156 | } 157 | 158 | /* Ref */ 159 | .ref_item { 160 | margin-top: 2rem; 161 | } 162 | .ref_name { 163 | font-size: 1.6rem; 164 | font-weight: 700; 165 | } 166 | 167 | /* eduction */ 168 | .edu_item { 169 | margin-top: 2rem; 170 | } 171 | 172 | /* certification */ 173 | .certification_item { 174 | margin-top: 2rem; 175 | } 176 | /* exp */ 177 | .exp_item { 178 | margin-top: 2rem; 179 | } 180 | 181 | /* awards */ 182 | .awards_item { 183 | margin-top: 2rem; 184 | } 185 | /* Interests */ 186 | .interest_items { 187 | margin-top: 2rem; 188 | display: flex; 189 | align-items: center; 190 | flex-wrap: wrap; 191 | gap: 2rem; 192 | } 193 | .interest_item { 194 | font-size: 1.5rem; 195 | display: flex; 196 | flex-direction: column; 197 | align-items: center; 198 | justify-content: center; 199 | gap: 0.5rem; 200 | color: var(--text-color); 201 | } 202 | .interest_item svg { 203 | width: 2rem; 204 | } 205 | 206 | /* socials */ 207 | .social_items { 208 | margin-top: 2rem; 209 | } 210 | .social_item { 211 | margin-top: 1.5rem; 212 | font-size: 1.5rem; 213 | display: flex; 214 | gap: 0.5rem; 215 | align-items: center; 216 | justify-content: flex-start; 217 | color: var(--text-color); 218 | } 219 | .social_item:hover { 220 | color: var(--primary-color); 221 | } 222 | .social_item svg { 223 | width: 2rem; 224 | } 225 | 226 | hr { 227 | grid-column: 1/-1; 228 | width: 80%; 229 | margin: 0 auto; 230 | margin-top: 5rem; 231 | margin-bottom: 1rem; 232 | border: none; 233 | border-top: 2px solid rgba(128, 128, 128, 0.229); 234 | } 235 | @media only screen and (max-width: 768px) { 236 | hr { 237 | margin: 0 auto; 238 | } 239 | } 240 | --------------------------------------------------------------------------------