Improved styling of Accordion and About

src/app/components/AboutBrief.tsx

@@ -7,7 +7,7 @@ export default function AboutBrief() {
     const person = usePersonContext()
     return (
       <Container className='about-brief' fluid>
-        <h1>{person.name}</h1>
+        <h1 className='person-name'>{person.name}</h1>
         <div className='brief'>{md(person.brief)}</div>
       </Container>
     )

src/app/components/Skills.tsx

@@ -6,7 +6,7 @@ import TagCloud from './TagCloud';
 export default function Skills() {
     const person = useContext(PersonContext)
     return (
-    <Container className='skills'>
+    <Container className='skills' fluid>
         <h2>Skills</h2>
         <TagCloud title='Primary' icon='bookmark-star' style='primary' tags={person.skills.primary} />
         {person.skills.secondary && (

src/app/components/TagCloud.tsx

@@ -12,9 +12,9 @@ export type Props = {
 export default function TagCloud(props: Props) {
     const containerClasses = ['tag-cloud', 'cloud-' + (props.style || 'standard')]
     return (
-        <Container className={containerClasses.join(' ')}>
+        <Container className={containerClasses.join(' ')} fluid>
             <h4>{props.icon && (<i className={'bi-' + props.icon}> </i>)}{props.title}</h4>
-            <Container className='tag-badges'>
+            <Container className='tag-badges' fluid>
                 {props.tags.map((tag: string) => (<Tag key={tag} text={tag} />) )}
             </Container>
         </Container>

src/app/globals.css

@@ -8,6 +8,15 @@ body {
     padding-top: 1rem;
     padding-bottom: 0.2rem;
 }
+
+.person-name {
+    margin-top: 1rem;
+    font-weight: bold;
+}
+.brief {
+    font-size: 120%;
+}
+
 .footer {
     margin-top: 2rem;
     filter: opacity(75%)
@@ -55,6 +64,7 @@ body {
 }
 .tag-badges > span {
     margin: 0.4em;
+    color: #222;
 }
 .contacts .contact {
     margin: 0.75em;
@@ -65,6 +75,14 @@ body {
 .accordion {
     margin: 1rem;
 }
+.main-container .accordion-button:not(.collapsed) {
+    color: #222;
+    background-color: RGBA(217, 216, 216, 0.3);
+}
+.main-container .accordion-button.collapsed {
+    color: #0e489d;
+    background-color: RGBA(153, 165, 213, 0.3);
+}
 .multiline {
     white-space: pre-line;
 }