Welcome to the repository for Jim Macur's Professional Portfolio! This site showcases my projects, skills, education, and experience as a fullstack developer. Built with modern web technologies, the portfolio emphasizes accessibility, responsive design, and user engagement.
- Live Site
- Features
- Technologies Used
- Getting Started
- Project Structure
- Accessibility
- Contact
- License
Check out the live version of the portfolio here:
Jim Macur's Portfolio
- Responsive Design: Works seamlessly on desktop, tablet, and mobile devices.
- Interactive Elements: Smooth scrolling, hover effects, and subtle animations enhance user experience.
- Contact Form: Integrated with Formspree to allow easy email communication.
- Accessibility: ARIA landmarks, focus indicators, and screen reader-friendly labels.
- Back-to-Top Button: Allows users to quickly navigate to the top of the page.
- Projects Showcase: Displays detailed information about projects, tech stacks, and contributions.
- Education Section: Highlights educational background with institution logos and program details.
- Frontend: React, TypeScript, Tailwind CSS
- Form Handling: Formspree
- Icons: React Icons (FontAwesome)
- Accessibility: ARIA landmarks, focus indicators
- Animations: Tailwind CSS animations and transitions
Follow these steps to get a local copy of the project up and running.
Make sure you have the following installed:
- Node.js (v14 or higher)
- npm (v6 or higher)
- Clone the repository:
git clone https://github.com/jimmacur/jim-macur-portfolio.git
cd jim-macur-portfolio- Install Dependencies:
npm install
- Start the Development Server:
npm start
This portfolio follows accessibility best practices to ensure an inclusive user experience. Key features include:
• ARIA Landmarks: Implemented role attributes and aria-labelledby for improved screen reader navigation, making it easier for users to understand and navigate the site structure.
• Semantic HTML: Used appropriate HTML elements like headings (<h1>, <h2>, etc.), lists, and sections to enhance the document’s structure and readability.
• Descriptive Links: Included aria-label attributes for links and buttons to provide context for screen reader users.
• Accessible Forms: Contact forms use label elements and aria-labelledby to ensure all form fields are properly associated and usable by assistive technologies.
These practices help make the portfolio accessible to a broader audience, including those using screen readers or navigating via keyboard.
Feel free to reach out to me via:
• Email: jim.macur@gmail.com
• LinkedIn: LinkedIn Profile
• GitHub: GitHub Profile