|
1 | | -# Logan Finney - Personal Landing Page |
2 | | - |
3 | | -A clean, static portfolio website built with HTML, CSS, and JavaScript. Features a rotating hero image gallery, dark/light mode toggle, and responsive design. |
4 | | - |
5 | | -## Features |
6 | | - |
7 | | -- **Rotating Hero Images** - Automatically cycles through your Flickr photos every 5 seconds |
8 | | -- **Dark/Light Mode** - Theme preference persists in browser localStorage |
9 | | -- **Responsive Design** - Works seamlessly on desktop, tablet, and mobile |
10 | | -- **Clean Editorial Layout** - Serif typography with blue accents |
11 | | -- **No Dependencies** - Pure HTML, CSS, and JavaScript (no build tools required) |
12 | | - |
13 | | -## File Structure |
14 | | - |
15 | | -``` |
16 | | -logan-finney-static/ |
17 | | -├── index.html # Home page with hero section |
18 | | -├── resume.html # Resume with employment and education history |
19 | | -├── work.html # Portfolio with writing, video, and audio work |
20 | | -├── config.js # Theme toggle and hero image rotation |
21 | | -└── README.md # This file |
22 | | -``` |
23 | | - |
24 | | -## Customization |
25 | | - |
26 | | -### Update Hero Images |
27 | | - |
28 | | -Edit `config.js` and replace the `HERO_IMAGES` array with your own image URLs: |
29 | | - |
30 | | -```javascript |
31 | | -const HERO_IMAGES = [ |
32 | | - 'https://your-image-url-1.jpg', |
33 | | - 'https://your-image-url-2.jpg', |
34 | | - 'https://your-image-url-3.jpg', |
35 | | - // ... add more URLs |
36 | | -]; |
37 | | -``` |
38 | | - |
39 | | -For Flickr images, use the direct image URL format: |
40 | | -``` |
41 | | -https://live.staticflickr.com/{server-id}/{id}_{secret}_b.jpg |
42 | | -``` |
43 | | - |
44 | | -### Update Content |
45 | | - |
46 | | -- **Home**: Edit the bio and tagline in `index.html` |
47 | | -- **Resume**: Update employment and education sections in `resume.html` |
48 | | -- **Work**: Add portfolio items in `work.html` |
49 | | - |
50 | | -### Customize Colors |
51 | | - |
52 | | -The primary accent color is blue (#2563eb). To change it globally, search and replace in all HTML files: |
53 | | -- Find: `#2563eb` |
54 | | -- Replace with: your desired color |
55 | | - |
56 | | -## Deployment to GitHub Pages |
57 | | - |
58 | | -### 1. Create a GitHub Repository |
59 | | - |
60 | | -```bash |
61 | | -git init |
62 | | -git add . |
63 | | -git commit -m "Initial commit" |
64 | | -git remote add origin https://github.com/yourusername/logan-finney-static.git |
65 | | -git branch -M main |
66 | | -git push -u origin main |
67 | | -``` |
68 | | - |
69 | | -### 2. Enable GitHub Pages |
70 | | - |
71 | | -1. Go to your repository settings |
72 | | -2. Scroll to "GitHub Pages" section |
73 | | -3. Select "main" branch as the source |
74 | | -4. Save |
75 | | - |
76 | | -Your site will be available at: `https://yourusername.github.io/logan-finney-static/` |
77 | | - |
78 | | -### 3. Connect Your Custom Domain |
79 | | - |
80 | | -1. In repository settings, add your domain (e.g., loganfinney.com) in the "Custom domain" field |
81 | | -2. Update your domain's DNS settings to point to GitHub Pages: |
82 | | - - Add an `A` record pointing to GitHub's IP addresses |
83 | | - - Or add a `CNAME` record pointing to `yourusername.github.io` |
84 | | - |
85 | | -For detailed instructions, see [GitHub Pages Custom Domain Documentation](https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site) |
86 | | - |
87 | | -## Local Testing |
88 | | - |
89 | | -To test locally before deploying: |
90 | | - |
91 | | -```bash |
92 | | -# Python 3 |
93 | | -python3 -m http.server 8000 |
94 | | - |
95 | | -# Then visit: http://localhost:8000 |
96 | | -``` |
97 | | - |
98 | | -## Browser Support |
99 | | - |
100 | | -- Chrome/Edge (latest) |
101 | | -- Firefox (latest) |
102 | | -- Safari (latest) |
103 | | -- Mobile browsers |
104 | | - |
105 | | -## License |
| 1 | +# loganfinney.com |
106 | 2 |
|
107 | 3 | © 2026 Logan Finney. All rights reserved. |
0 commit comments