Feature/color update #6
Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR refactors the profile website by standardizing page layouts, restructuring contact data, and enhancing the About page. The changes improve consistency across pages and add a tech stack section to the profile.
- Introduces a
DefaultPagecomponent for consistent page structure across all routes - Refactors
contactsfrom an array to a keyed Record for easier access by identifier - Adds a new
TechStackIteminterface and populates tech stack data in profile
Reviewed Changes
Copilot reviewed 14 out of 14 changed files in this pull request and generated 8 comments.
Show a summary per file
| File | Description |
|---|---|
| src/utils/profileData.ts | Added TechStackItem interface, changed contacts to Record structure, updated job title, removed presentation entry, and added tech stack data |
| src/pages/Projects.tsx | Adopted DefaultPage component for consistent layout |
| src/pages/Home.tsx | Adopted DefaultPage component and simplified layout structure |
| src/pages/Contact.tsx | Integrated DefaultPage component, replaced ContactLinks with ContactAnchor, and simplified contact display |
| src/pages/About.tsx | Adopted DefaultPage component for consistent layout |
| src/main.tsx | Changed default Text size from 'lg' to 'md' |
| src/components/Paragraph.tsx | New component for consistent paragraph formatting with title and optional link |
| src/components/Navigation.tsx | Filtered out home link ('/') from navigation menu |
| src/components/Link.tsx | New component for consistent external link formatting |
| src/components/DefaultPage.tsx | New layout wrapper component providing consistent page structure |
| src/components/ContactLinks.tsx | Removed (replaced by ContactAnchor) |
| src/components/ContactAnchor.tsx | New component for rendering individual contact links as anchors |
| src/components/AboutDetailed.tsx | Refactored to use Paragraph component, improved layout consistency |
| src/components/AboutBrief.tsx | Refactored to use Paragraph component, added tech stack display, removed Recent Highlights section |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
|
||
|
|
||
| const ContactAnchor = (contact: ContactLink) => { | ||
| return < Anchor |
There was a problem hiding this comment.
The opening tag has an extra space before 'Anchor'. Remove the space between '<' and 'Anchor' for proper JSX syntax.
| return < Anchor | |
| return <Anchor |
| rel="noreferrer" | ||
| > | ||
| {contact.label} | ||
| </Anchor > |
There was a problem hiding this comment.
The closing tag has an extra space before '>'. Remove the space between 'Anchor' and '>' for consistent JSX syntax.
| </Anchor > | |
| </Anchor> |
| <Grid.Col span={{ base: 12, md: 8 }}> | ||
|
|
||
| <Stack gap="md"> | ||
| <Text>The fastest way to connect with me is online, using {ContactAnchor(contacts.email)} or {ContactAnchor(contacts.linkedin)}.</Text> |
There was a problem hiding this comment.
ContactAnchor should be used as a JSX component with JSX syntax (e.g., <ContactAnchor contact={contacts.email} />) rather than being called as a function. This follows React best practices and ensures proper component lifecycle and key handling.
| <Text>The fastest way to connect with me is online, using {ContactAnchor(contacts.email)} or {ContactAnchor(contacts.linkedin)}.</Text> | |
| <Text>The fastest way to connect with me is online, using <ContactAnchor contact={contacts.email} /> or <ContactAnchor contact={contacts.linkedin} />.</Text> |
|
|
||
| const ContactAnchor = (contact: ContactLink) => { | ||
| return < Anchor | ||
| key={contact.href} |
There was a problem hiding this comment.
The 'key' prop should not be set within the component itself. Keys are only meaningful when components are rendered in a list by the parent component. Remove this prop from the component definition.
| key={contact.href} |
| { name: 'Databases', technologies: ['PostgreSQL', 'MongoDB', 'Neo4j', 'MySQL'] }, | ||
| { name: 'Brokers', technologies: ['RabbitMQ', 'Kafka', 'ZeroMQ'] }, | ||
| { name: 'Tools & Platforms', technologies: ['RFEM6', 'Grasshopper', 'Rhino', 'NSIS', 'OnShape'] }, | ||
| { name: "Security", technologies: ['Keycloak', 'GDPR Compliance'] }, |
There was a problem hiding this comment.
Inconsistent quote style: this line uses double quotes for the name property while all other entries use single quotes. Change to single quotes for consistency.
| { name: "Security", technologies: ['Keycloak', 'GDPR Compliance'] }, | |
| { name: 'Security', technologies: ['Keycloak', 'GDPR Compliance'] }, |
| </Text> | ||
| ))} | ||
| </Stack> | ||
| return (<> |
There was a problem hiding this comment.
[nitpick] Missing space between 'return' and the opening parenthesis. Add a space for consistency with React code formatting conventions.
| return (<> | |
| return ( <> |
| @@ -1,5 +1,7 @@ | |||
| import { Accordion, Badge, Card, Group, Stack, Text, Title } from '@mantine/core' | |||
| import { Accordion, Anchor, Badge, Card, Group, Stack, Text, Title } from '@mantine/core' | |||
There was a problem hiding this comment.
Unused imports Anchor, Card.
| import { Accordion, Anchor, Badge, Card, Group, Stack, Text, Title } from '@mantine/core' | |
| import { Accordion, Badge, Group, Stack, Text, Title } from '@mantine/core' |
| @@ -1,14 +1,26 @@ | |||
| import { Card, Container, Grid, Image, Stack, Text, Title } from '@mantine/core' | |||
| import ContactLinks from '../components/ContactLinks' | |||
| import { Container, Grid, Image, Stack, Text, Title } from '@mantine/core' | |||
There was a problem hiding this comment.
Unused imports Container, Title.
| import { Container, Grid, Image, Stack, Text, Title } from '@mantine/core' | |
| import { Grid, Image, Stack, Text } from '@mantine/core' |
No description provided.