https://github.com/riakjam/personal-portfolio-website-hackathon1
https://github.com/riakjam/personal-portfolio-website-hackathon1
Last synced: 5 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/riakjam/personal-portfolio-website-hackathon1
- Owner: RiakJam
- Created: 2025-07-29T15:08:33.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-07-30T15:19:58.000Z (12 months ago)
- Last Synced: 2025-10-11T07:42:11.055Z (10 months ago)
- Language: CSS
- Homepage: https://personal-portfolio-website-hackatho.vercel.app
- Size: 2.88 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# James Riak's Portfolio Website
### Project Overview
This is a professional portfolio website showcasing James Riak Samuel Yacobo's skills, projects, and professional background. The single-page application features responsive design with smooth navigation between sections.
### Live Website
🚀 [View My Portfolio](https://personal-portfolio-website-hackatho.vercel.app/)
### Features
- Fully responsive layout
- Interactive elements and animations
- Project showcase with live links
- Detailed skills visualization
- Contact form and multiple contact options
- Loading animation
### Single-Page Design with Hash (#) Navigation Explanation
- Reason: The website uses a single-page design with hash (#) navigation primarily for seamless user experience and faster content access.
#### Key Benefits:
##### Instant Section Loading
- Hash links (e.g., #projects) allow users to jump between sections without full page reloads
- Eliminates white flashes between page transitions
##### Preserved Scroll Position
- Users can bookmark specific sections (e.g., yourdomain.com#contact)
- Browser back/forward buttons work intuitively between sections
##### Performance Optimization
- Only one HTTP request needed for all content
- No waiting for multiple pages to load when navigating
##### Portfolio-Specific Advantages
- Creates a "storytelling" flow as users scroll through professional journey
- Visual consistency across all sections reinforces personal brand
### Technologies Used
- HTML5 (semantic markup)
- CSS3 (flexbox, grid, animations)
- Vercel (for deployment)
## File Structure
### Root Folder - portfolio
- index.html - Main website content
- assets/ - folders insite assets (css, images, icons and files)
- css/ - Stylesheets (styles.css)
- images/ - Project screenshots and background image for hero section
- icons/ - Various icons used
- files/ - Downloadable documents (CV)
### Section Breakdown
#### Header & Navigation
- Fixed position menu
- Responsive hamburger menu
- Smooth scrolling
#### Hero Section
- Introduction with CTA
- Clean, focused design
#### About Section
- Personal introduction
- Skills visualization with progress bars
#### Education Section
- Chronological timeline
- Downloadable CV
#### Projects Section
- Featured projects with:
- Screenshots
- Descriptions
- Live links
### Responsive Design
**Breakpoints:**
1. Mobile (up to 767px)
2. Tablet (768px-1023px)
3. Desktop (1024px+)
### Accessibility Features
- Semantic HTML5
- ARIA (Accessible Rich Internet Applications) attributes
- Keyboard navigation
- Proper contrast ratios
### Performance Optimizations
- Minimal dependencies
- Efficient CSS
- Loading strategy
### Deployment
Hosted on Vercel with automatic deployments from GitHub.
### Contact
**James Riak Samuel Yacobo**
📧 [riakjms@gmail.com](mailto:riakjms@gmail.com)
📞 [+254 757 876 862](tel:+254757876862)
**Profiles:**
🔗 [LinkedIn](https://www.linkedin.com/in/james-riak-315044226/)