Skip to content

Commit bbbf9cf

Browse files
SamHillierDevSamHillierDev
committed
feat: improve section layout
1 parent ba0b54f commit bbbf9cf

File tree

3 files changed

+53
-115
lines changed

3 files changed

+53
-115
lines changed

‎src/App.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,9 @@ function App() {
1010
return (
1111
<Router>
1212
<ScrollToTop />
13-
<div>
13+
<div className="flex min-h-screen flex-col">
1414
<Header />
15-
<main className="container mx-auto mt-20">
15+
<main className="flex-1 container mx-auto mt-20">
1616
<Routes>
1717
<Route
1818
path="/"

‎src/components/About.tsx‎

Lines changed: 50 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import { useEffect } from "react";
2-
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
31
import { faGithub, faLinkedin } from "@fortawesome/free-brands-svg-icons";
2+
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
3+
import { useEffect } from "react";
44
import Certifications from "./Certifications";
55
import Skills from "./Skills";
66

@@ -11,60 +11,56 @@ const About: React.FC = () => {
1111

1212
return (
1313
<section className="py-12">
14-
<div className="container mx-auto flex flex-wrap items-center gap-12 xl:flex-nowrap">
15-
<article className="order-2 w-full px-6 text-center xl:order-1 xl:w-1/2 xl:text-left">
16-
<header>
17-
<h3 className="text-4xl font-extrabold text-gray-800">About Me</h3>
18-
</header>
19-
<p className="mt-6 text-lg leading-relaxed text-gray-600">
20-
Software engineer with a track record of applying technical
21-
expertise and collaboration to enhance system health, scalability,
22-
and long-term organisational excellence.
23-
</p>
24-
<p className="text-md mt-3 leading-relaxed text-gray-500">
25-
If you're interested in collaborating or have any questions — I'd
26-
love to hear from you!
27-
</p>
28-
<p className="mt-4 text-lg font-medium text-purple-800">
29-
🫵 This site is still in development.
30-
</p>
31-
<footer className="mt-6">
32-
<h4 className="text-xl font-semibold text-gray-800">
33-
Let's connect
34-
</h4>
35-
<div className="mt-4 flex justify-center gap-4 xl:justify-start">
36-
<a
37-
href="https://linkedin.com/in/samhillier"
38-
target="_blank"
39-
rel="noopener noreferrer"
40-
className="flex items-center gap-2 rounded-lg bg-[#0A66C2] px-5 py-2 text-white shadow-md transition-transform hover:scale-105 hover:bg-[#0a44c2]"
41-
>
42-
<FontAwesomeIcon icon={faLinkedin} className="h-5 w-5" />
43-
LinkedIn
44-
</a>
45-
<a
46-
href="https://github.com/SamHillierDev"
47-
target="_blank"
48-
rel="noopener noreferrer"
49-
className="flex items-center gap-2 rounded-lg bg-gray-800 px-6 py-2 text-white shadow-md transition-transform hover:scale-105 hover:bg-gray-900"
50-
>
51-
<FontAwesomeIcon icon={faGithub} className="h-5 w-5" />
52-
GitHub
53-
</a>
14+
<div className="container mx-auto px-6">
15+
<article className="mx-auto max-w-4xl text-center xl:text-left">
16+
<div className="flex flex-col items-center gap-6 xl:flex-row xl:items-start">
17+
<div className="h-32 w-32 flex-shrink-0 rounded-full bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 p-1 xl:h-40 xl:w-40">
18+
<img
19+
src="https://raw.githubusercontent.com/SamHillierDev/samhillier.dev/main/src/assets/images/sam-hillier.jpg"
20+
alt="Sam Hillier"
21+
className="h-full w-full cursor-pointer rounded-full shadow-lg transition hover:scale-105"
22+
/>
23+
</div>
24+
<div className="flex-1">
25+
<header>
26+
<h3 className="text-4xl font-extrabold bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 bg-clip-text text-transparent">Sam Hillier</h3>
27+
</header>
28+
<p className="mt-4 text-lg leading-snug text-gray-600">
29+
Software engineer with a track record of applying technical
30+
expertise and collaboration to enhance system health, scalability,
31+
and long-term organisational excellence.
32+
</p>
33+
<p className="text-md mt-2 leading-snug text-gray-500">
34+
If you're interested in collaborating or have any questions — I'd
35+
love to hear from you!
36+
</p>
37+
<div className="mt-6 flex justify-center gap-4 xl:justify-start">
38+
<a
39+
href="https://linkedin.com/in/samhillier"
40+
target="_blank"
41+
rel="noopener noreferrer"
42+
className="flex items-center gap-2 rounded-lg bg-[#0A66C2] px-5 py-2 text-white shadow-md transition-transform hover:scale-105 hover:bg-[#0a44c2]"
43+
>
44+
<FontAwesomeIcon icon={faLinkedin} className="h-5 w-5" />
45+
LinkedIn
46+
</a>
47+
<a
48+
href="https://github.com/SamHillierDev"
49+
target="_blank"
50+
rel="noopener noreferrer"
51+
className="flex items-center gap-2 rounded-lg bg-gray-800 px-6 py-2 text-white shadow-md transition-transform hover:scale-105 hover:bg-gray-900"
52+
>
53+
<FontAwesomeIcon icon={faGithub} className="h-5 w-5" />
54+
GitHub
55+
</a>
56+
</div>
5457
</div>
55-
</footer>
56-
</article>
57-
<aside className="order-1 flex w-full flex-col items-center px-6 xl:order-2 xl:w-1/2">
58-
<img
59-
src="https://raw.githubusercontent.com/SamHillierDev/samhillier.dev/main/src/assets/images/sam-hillier.jpg"
60-
alt="Sam Hillier"
61-
className="h-50 w-50 cursor-pointer rounded-full shadow-lg transition hover:scale-105"
62-
/>
63-
<div className="mt-8 w-full">
64-
<Certifications />
65-
<Skills />
6658
</div>
67-
</aside>
59+
</article>
60+
<div className="mt-12">
61+
<Certifications />
62+
<Skills />
63+
</div>
6864
</div>
6965
</section>
7066
);

‎src/data/skills.tsx‎

Lines changed: 1 addition & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -21,64 +21,6 @@ export const skills = [
2121
},
2222
{
2323
name: "CSS",
24-
badge: "https://img.shields.io/badge/CSS-1572B6?logo=css3&logoColor=fff",
25-
},
26-
{
27-
name: "React",
28-
badge:
29-
"https://img.shields.io/badge/React-%2320232a.svg?logo=react&logoColor=%2361DAFB",
30-
},
31-
{
32-
name: "Vue.js",
33-
badge:
34-
"https://img.shields.io/badge/Vue.js-42b883?logo=vuedotjs&logoColor=fff",
35-
},
36-
{
37-
name: "Node.js",
38-
badge:
39-
"https://img.shields.io/badge/Node.js-6DA55F?logo=node.js&logoColor=white",
40-
},
41-
{
42-
name: "Express",
43-
badge:
44-
"https://img.shields.io/badge/Express-%23404d59.svg?logo=express&logoColor=%2361DAFB",
45-
},
46-
{
47-
name: "Tailwind",
48-
badge:
49-
"https://img.shields.io/badge/Tailwind-%2338B2AC.svg?logo=tailwind-css&logoColor=white",
50-
},
51-
{
52-
name: "Vitest",
53-
badge:
54-
"https://img.shields.io/badge/Vitest-6E9F18?logo=vitest&logoColor=fff",
55-
},
56-
{
57-
name: "AWS",
58-
badge:
59-
"https://img.shields.io/badge/AWS-%23232F3E.svg?logo=amazon-web-services&logoColor=white",
60-
},
61-
{
62-
name: "Azure",
63-
badge:
64-
"https://custom-icon-badges.demolab.com/badge/Azure-0089D6?logo=msazure&logoColor=white",
65-
},
66-
{
67-
name: "Docker",
68-
badge:
69-
"https://img.shields.io/badge/Docker-2496ED?logo=docker&logoColor=fff",
70-
},
71-
{
72-
name: "Git",
73-
badge: "https://img.shields.io/badge/Git-F05032?logo=git&logoColor=fff",
74-
},
75-
{
76-
name: "Vite",
77-
badge: "https://img.shields.io/badge/Vite-646CFF?logo=vite&logoColor=fff",
78-
},
79-
{
80-
name: "Jira",
81-
badge:
82-
"https://img.shields.io/badge/Jira-0052CC?&logo=jira&logoColor=white",
24+
badge: "https://img.shields.io/badge/CSS-1572B6?logo=css&logoColor=fff",
8325
},
8426
];

0 commit comments

Comments
 (0)