Skip to content

README.md

Latest commit

 

History

History
113 lines (79 loc) · 2.94 KB

README.md

File metadata and controls

113 lines (79 loc) · 2.94 KB

Cole Mlostek - Personal Website

A modern, responsive personal website built with React.

Features

  • Responsive Design: Works perfectly on desktop, tablet, and mobile devices
  • Modern UI: Clean, professional design with smooth animations
  • Interactive Navigation: Smooth scrolling navigation with mobile hamburger menu
  • Contact Form: Functional contact form (ready for backend integration)
  • Project Showcase: Display your projects with links to GitHub and live demos
  • Skills Section: Highlight your technical skills and technologies

Getting Started

Prerequisites

Make sure you have Node.js installed on your system. You can download it from nodejs.org.

Installation

  1. Install dependencies:

    npm install

  2. Start the development server:

    npm start

  3. Open http://localhost:3000 to view it in the browser.

Building for Production

To create a production build:

npm run build

This builds the app for production to the build folder.

Customization

Personal Information

Update the following files with your personal information:

  1. About Section (src/components/About.js):

    • Update the about text
    • Modify the skills list
    • Replace the image placeholder

  2. Contact Information (src/components/Contact.js and src/components/Footer.js):

    • Update email addresses
    • Add your LinkedIn and GitHub profiles

  3. Projects (src/components/Projects.js):

    • Replace the sample projects with your actual projects
    • Update project descriptions, technologies, and links

Styling

All CSS files are organized by component:

  • src/index.css - Global styles
  • src/App.css - Main app styles
  • src/components/*.css - Component-specific styles

Colors and Branding

The main color scheme uses:

  • Primary: #007bff (blue)
  • Text: #333 (dark gray)
  • Background: #ffffff (white)
  • Secondary background: #f8f9fa (light gray)

You can easily customize these colors by updating the CSS variables or color values in the respective CSS files.

Project Structure

src/
├── components/
│   ├── Header.js & Header.css
│   ├── About.js & About.css
│   ├── Projects.js & Projects.css
│   ├── Contact.js & Contact.css
│   └── Footer.js & Footer.css
├── App.js & App.css
├── index.js
└── index.css

Deployment

This project can be deployed to any static hosting service:

  • Netlify: Connect your GitHub repository and deploy automatically
  • Vercel: Deploy with zero configuration
  • GitHub Pages: Use the gh-pages package for deployment
  • AWS S3: Upload the build folder to an S3 bucket

Technologies Used

  • React 18
  • CSS3 with modern features (Grid, Flexbox, CSS Variables)
  • Responsive design principles
  • Smooth scrolling and animations

License

This project is open source and available under the MIT License.