|
1 | | -# Awar Abdulkarim - Professional Portfolio |
| 1 | +# Personal Website |
2 | 2 |
|
3 | | -A modern, professional portfolio website with automated LinkedIn profile sync and speaking engagement showcase. |
4 | | - |
5 | | -## Features |
6 | | - |
7 | | -### 🎨 Modern UI/UX |
8 | | - |
9 | | -- **Enhanced Typography** - Large, bold headlines with improved hierarchy |
10 | | -- **Glassmorphism Design** - Backdrop blur effects and layered depth |
11 | | -- **Micro-interactions** - Smooth hover states and animations |
12 | | -- **Profile Image** - GitHub avatar with floating animation and glow effect |
13 | | -- **Stats Counter** - Dynamic experience/project metrics |
14 | | -- **Better Spacing** - Generous padding and consistent vertical rhythm |
15 | | -- **Responsive Design** - Optimized for all devices |
16 | | - |
17 | | -### 🔄 Automated LinkedIn Sync |
18 | | - |
19 | | -- **Automatic CV updates** from LinkedIn during each build |
20 | | -- No manual profile.yml editing required |
21 | | -- Scheduled daily sync + manual trigger option |
22 | | -- Preserves custom achievements and technology tags |
23 | | -- See [LinkedIn Sync Guide](.github/LINKEDIN_SYNC.md) for setup |
24 | | - |
25 | | -### 🎤 Speaking Engagements |
26 | | - |
27 | | -- **Dynamic Sessionize integration** showing upcoming events and sessions |
28 | | -- "Next Speaking Engagement" section with live data |
29 | | -- Professional presentation of "Places I'm Speaking At" and "What I'm Speaking About" |
30 | | -- Direct link to Sessionize profile |
31 | | - |
32 | | -### 🎨 Professional Design |
33 | | - |
34 | | -- **Clean black & gold theme** |
35 | | -- **No emojis** - professional SVG icons throughout |
36 | | -- Smooth animations and transitions |
37 | | -- Fully mobile-responsive |
38 | | -- Optimized for performance |
39 | | - |
40 | | -### 📄 Pages |
41 | | - |
42 | | -1. **Home** - Hero section, experience timeline, GitHub projects |
43 | | -2. **Speaking** - Sessionize integration with upcoming events and sessions |
44 | | -3. **CV** - Auto-synced from LinkedIn with timestamp |
45 | | -4. **Socials** - Professional networking links |
46 | | - |
47 | | -## Quick Start |
48 | | - |
49 | | -### Prerequisites |
50 | | - |
51 | | -- Ruby 3.1+ |
52 | | -- Bundler |
53 | | -- Node.js 20+ (for LinkedIn sync) |
54 | | -- Proxycurl API key (for automated sync) |
55 | | - |
56 | | -### Local Development |
57 | | - |
58 | | -```bash |
59 | | -# Install dependencies |
60 | | -bundle install |
61 | | -npm install |
62 | | - |
63 | | -# Run locally |
64 | | -bundle exec jekyll serve |
65 | | - |
66 | | -# View at http://localhost:4000 |
67 | | -``` |
68 | | - |
69 | | -### LinkedIn Sync Setup |
70 | | - |
71 | | -1. Get API key from [Proxycurl](https://nubela.co/proxycurl/) |
72 | | -2. Add to GitHub Secrets as `PROXYCURL_API_KEY` |
73 | | -3. Workflow runs automatically on push and daily at 2 AM UTC |
74 | | - |
75 | | -**Local testing:** |
76 | | - |
77 | | -```bash |
78 | | -export PROXYCURL_API_KEY="your_key" |
79 | | -export LINKEDIN_PROFILE_URL="https://www.linkedin.com/in/notawar" |
80 | | -npm run sync-linkedin |
81 | | -``` |
82 | | - |
83 | | -See detailed instructions: [LinkedIn Sync Guide](.github/LINKEDIN_SYNC.md) |
84 | | - |
85 | | -## File Structure |
86 | | - |
87 | | -``` |
88 | | -/ |
89 | | -├── index.html # Home page |
90 | | -├── speaking/index.html # Speaking engagements with Sessionize |
91 | | -├── resume.html # CV with LinkedIn auto-sync |
92 | | -├── socials/index.html # Professional networking |
93 | | -├── _data/ |
94 | | -│ ├── profile.yml # Auto-synced from LinkedIn |
95 | | -│ └── navigation.yml # Site navigation |
96 | | -├── scripts/ |
97 | | -│ └── sync-linkedin.js # LinkedIn sync automation |
98 | | -├── .github/ |
99 | | -│ ├── workflows/ |
100 | | -│ │ └── build-and-deploy.yml # Automated build with sync |
101 | | -│ └── LINKEDIN_SYNC.md # Detailed sync documentation |
102 | | -├── assets/ |
103 | | -│ ├── css/style.scss # Professional styling |
104 | | -│ └── js/main.js # Interactive features |
105 | | -└── package.json # Node.js dependencies |
106 | | -``` |
107 | | - |
108 | | -## Automated Workflows |
109 | | - |
110 | | -### Build and Deploy (`.github/workflows/build-and-deploy.yml`) |
111 | | - |
112 | | -Runs on: |
113 | | - |
114 | | -- Every push to main |
115 | | -- Daily at 2 AM UTC (scheduled) |
116 | | -- Manual trigger |
117 | | - |
118 | | -Process: |
119 | | - |
120 | | -1. Fetch LinkedIn profile data |
121 | | -2. Update `_data/profile.yml` |
122 | | -3. Commit changes (if any) |
123 | | -4. Build Jekyll site |
124 | | -5. Deploy to GitHub Pages |
125 | | - |
126 | | -## Customization |
127 | | - |
128 | | -### Update Speaking Profile |
129 | | - |
130 | | -Edit the Sessionize script URLs in `speaking/index.html`: |
131 | | - |
132 | | -```javascript |
133 | | -// Change the speaker ID |
134 | | -src="https://sessionize.com/api/speaker/events/YOUR_ID/1x1x3fb393x" |
135 | | -src="https://sessionize.com/api/speaker/sessions/YOUR_ID/1x1x3fb393x" |
136 | | -``` |
137 | | - |
138 | | -### Manual Profile Updates |
139 | | - |
140 | | -If you want to add custom data not in LinkedIn: |
141 | | - |
142 | | -Edit `_data/profile.yml` and add: |
143 | | - |
144 | | -```yaml |
145 | | -experience: |
146 | | - - position: "Your Role" |
147 | | - company: "Company" |
148 | | - achievements: |
149 | | - - "Custom achievement not in LinkedIn" |
150 | | - technologies: ["Tech1", "Tech2"] # Manually curated |
151 | | -``` |
152 | | -
|
153 | | -These will be preserved during sync! |
154 | | -
|
155 | | -## Deployment |
156 | | -
|
157 | | -### GitHub Pages with Custom Domain |
158 | | -
|
159 | | -1. DNS records already configured: |
160 | | - - `awar.no` → ANAME → `notawar.github.io` |
161 | | - - `www.awar.no` → CNAME → `notawar.github.io` |
162 | | -2. CNAME file in repository root: `awar.no` |
163 | | -3. Site available at: **<https://awar.no>** |
164 | | -4. GitHub Pages enforces HTTPS automatically |
165 | | - |
166 | | -### GitHub Pages Setup |
167 | | - |
168 | | -1. Push to main branch |
169 | | -2. Go to Settings → Pages |
170 | | -3. Source: GitHub Actions |
171 | | -4. Custom domain: awar.no (already configured) |
172 | | -5. Enforce HTTPS: ✓ (automatic) |
173 | | -6. Site deploys automatically |
174 | | - |
175 | | -### Manual Deployment |
176 | | - |
177 | | -```bash |
178 | | -bundle exec jekyll build |
179 | | -# Upload _site/ folder to your hosting |
180 | | -``` |
181 | | - |
182 | | -## Maintenance |
183 | | - |
184 | | -### LinkedIn Profile Sync |
185 | | - |
186 | | -- Updates automatically daily at 2 AM UTC |
187 | | -- Manual trigger available in Actions tab |
188 | | -- Check Actions tab for sync status and logs |
189 | | -- Costs: ~$99/month for Proxycurl (or use free tier with manual triggers) |
190 | | - |
191 | | -### Sessionize Integration |
192 | | - |
193 | | -- Automatically updates from your Sessionize profile |
194 | | -- No maintenance required |
195 | | -- Update your Sessionize profile to see changes on site |
196 | | - |
197 | | -## Monitoring |
198 | | - |
199 | | -- **Build status**: Check GitHub Actions tab |
200 | | -- **LinkedIn sync**: Look for "Auto-sync" commits |
201 | | -- **Last sync timestamp**: Visible on CV page |
202 | | -- **Deployment**: Automatic via GitHub Pages |
203 | | - |
204 | | -## Cost Summary |
205 | | - |
206 | | -- **GitHub Pages**: Free |
207 | | -- **Custom Domain**: awar.no (already owned) |
208 | | -- **Proxycurl API**: |
209 | | - - Free: 10 credits/month (manual syncs only) |
210 | | - - Basic: $99/month (daily syncs) |
211 | | - |
212 | | -## Support |
213 | | - |
214 | | -- **LinkedIn Sync**: See [LINKEDIN_SYNC.md](.github/LINKEDIN_SYNC.md) |
215 | | -- **Scripts**: See [scripts/README.md](scripts/README.md) |
216 | | -- **Sessionize**: [Sessionize Documentation](https://sessionize.com/playbook) |
217 | | -- **Jekyll**: [Jekyll Documentation](https://jekyllrb.com/docs/) |
218 | | - |
219 | | -## Tech Stack |
220 | | - |
221 | | -- **Jekyll** - Static site generator |
222 | | -- **GitHub Pages** - Hosting |
223 | | -- **GitHub Actions** - CI/CD automation |
224 | | -- **Proxycurl API** - LinkedIn data fetching |
225 | | -- **Sessionize API** - Speaking engagements |
226 | | -- **Node.js** - Build scripts |
227 | | -- **Ruby** - Jekyll runtime |
228 | | - |
229 | | -## License |
230 | | - |
231 | | -© 2025 Awar Abdulkarim. All rights reserved. |
232 | | - |
233 | | -## Next Steps |
234 | | - |
235 | | -1. **✅ Review Content**: All information in `_data/profile.yml` is real and current |
236 | | -2. **✅ Test Site**: Site builds successfully at <http://localhost:4002> |
237 | | -3. **📤 Deploy**: Push to GitHub to update your live site |
238 | | -4. **🚀 Share**: Your portfolio is now ready to share with employers/colleagues |
239 | | - |
240 | | -## Site URLs |
241 | | - |
242 | | -- **Local Development**: <http://localhost:4002> |
243 | | -- **Live Site**: <https://notawar.github.io> (once pushed to GitHub) |
244 | | -- **LinkedIn**: <https://www.linkedin.com/in/notawar/> |
245 | | -- **GitHub**: <https://github.com/NotAwar> |
246 | | - |
247 | | ---- |
248 | | - |
249 | | -**Result**: A clean, professional portfolio that showcases your real experience and skills without any fake content or unnecessary complexity. Perfect for job applications, networking, and professional branding. |
| 3 | +This is just the source code for my personal website, which can be found at [https://awar.no](https://awar.no). |
0 commit comments