style: modernize site UI while preserving brand colors and content

README.md

@@ -1,2 +1,75 @@
-# My_Personal_Repo
-This is my personal repo, I use it to share what makes me tick and some of the projects I've worked on. You can share my journey on my GitHub Pages where you'll find my personal website.
+# Toby Beevers | Personal Website
+
+A static personal website built with HTML and CSS, hosted via GitHub Pages.
+
+This repo captures my personal and professional journey, including:
+- key milestones in my career
+- personal development highlights
+- links to my profiles and resources
+- blog posts about projects and experiences
+
+## Live Site
+
+You can view the website here:
+
+- **GitHub Pages:** https://tobebeevers.github.io/My_Personal_Repo/
+
+## Tech Stack
+
+- HTML5
+- CSS3
+- Font Awesome (icons)
+
+## Project Structure
+
+```text
+.
+├── index.html
+├── my_early_years.html
+├── career_change.html
+├── personal_development.html
+├── my_links.html
+├── my_blog.html
+├── Blog-Posts/
+│   ├── blog_AIML.html
+│   ├── blog_CentralBilling.html
+│   ├── blog_CareerChange.html
+│   ├── blog_JupyterNotebook.html
+│   ├── blog_MyCSR.html
+│   ├── blog_O365Migrations.html
+│   ├── blog_PowerBI.html
+│   └── blog_template.html
+├── css/
+│   ├── containers.css
+│   ├── styles.css
+│   └── timeline.css
+└── library/
+    ├── images
+    ├── favicons
+    └── CV files
+```
+
+## Run Locally
+
+Because this is a static site, you can open `index.html` directly in your browser.
+
+For a better local development experience (recommended), run a simple local server from the repository root:
+
+```bash
+python -m http.server 8000
+```
+
+Then open:
+
+- `http://localhost:8000`
+
+## Maintenance Notes
+
+- Keep global layout and component styles in `css/styles.css` and `css/containers.css`.
+- Use `css/timeline.css` for timeline-specific styling.
+- Add new blog pages in `Blog-Posts/` and link them from `my_blog.html`.
+- Store reusable media and document assets in `library/`.
+
+## License
+
+This project is licensed under the terms of the [LICENSE](LICENSE) file.

css/containers.css

@@ -2,14 +2,14 @@
 .container {
   max-width: 1100px;
   margin: 0 auto;
-  overflow: auto;
-  padding: 0 40px
+  overflow: visible;
+  padding: 0 32px
 }
 
 .container1 {
   max-width: 2100px;
   margin: 0 auto;
-  overflow: auto;
+  overflow: visible;
   padding: 0 40px
 }
 
@@ -19,40 +19,52 @@
   margin: 0 auto;
   display: flex;
   justify-content: flex-start;
-  overflow: auto;
+  overflow: visible;
   padding: 40px
 }
 
 .card {
-  background-color: #fff;
+  background: linear-gradient(180deg, #ffffff 0%, #f8fbfd 100%);
   color: #333;
-  border-radius: 10px;
-  box-shadow: 0 3px 10px rgba(0,0,0,0.2);
-  padding: 20px;
-  margin: 10px;
+  border-radius: 16px;
+  border: 1px solid rgba(96, 150, 186, 0.2);
+  box-shadow: 0 12px 28px rgba(39, 76, 119, 0.14);
+  padding: 24px;
+  margin: 0;
+  transition: transform 0.22s ease, box-shadow 0.22s ease;
+}
+
+.card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 16px 36px rgba(39, 76, 119, 0.2);
 }
 
 /* BACKGROUNDS & BUTTONS*/
 .btn {
   display: inline-block;
-  padding: 10px 30px;
+  padding: 11px 26px;
   cursor: pointer;
   background-color: var(--primary-color);
-  color: var(--secondary-color);
+  color: #fff;
   border: none;
-  border-radius: 5px;
-  width: 300px; /* Ensures a minimum width */
+  border-radius: 999px;
+  width: auto;
+  min-width: 220px;
   text-align: center;
+  font-weight: 700;
+  letter-spacing: 0.25px;
+  box-shadow: 0 8px 18px rgba(39, 76, 119, 0.16);
 }
 
 .btn-outline {
   background-color: transparent;
   border: 1px var(--secondary-color) solid;
+  color: var(--secondary-color);
 }
 
 /* Adds a slight movement to the button boarder on hover*/
 .btn:hover {
-  transform: scale(0.98);
+  transform: translateY(-2px);
 }
 
 .bg-primary, 
@@ -123,7 +135,7 @@
 .grid {
   display: grid;
   grid-template-columns: 1fr 1fr; /* fr units are fractions of the space*/
-  gap: 20px;
+  gap: 24px;
   justify-content: center;
   align-items: center;
   height: 100%;
@@ -203,4 +215,4 @@
 }
 .p-5{
   padding: 4rem;
-}
+}