mirror of
https://github.com/AmruthPillai/Reactive-Resume.git
synced 2025-11-17 10:11:31 +10:00
feat(homepage): add new sections to homepage
This commit is contained in:
@ -230,6 +230,7 @@ const Profiles = () => {
|
||||
label={item.username}
|
||||
icon={
|
||||
<img
|
||||
className="ph"
|
||||
width={fontSize}
|
||||
height={fontSize}
|
||||
alt={item.network}
|
||||
|
||||
@ -207,6 +207,7 @@ const Profiles = () => {
|
||||
label={item.username}
|
||||
icon={
|
||||
<img
|
||||
className="ph"
|
||||
width={fontSize}
|
||||
height={fontSize}
|
||||
alt={item.network}
|
||||
|
||||
@ -27,6 +27,7 @@ import { TemplateProps } from "../types/template";
|
||||
const Header = () => {
|
||||
const basics = useArtboardStore((state) => state.resume.basics);
|
||||
const profiles = useArtboardStore((state) => state.resume.sections.profiles);
|
||||
const fontSize = useArtboardStore((state) => state.resume.metadata.typography.font.size);
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-3">
|
||||
@ -83,8 +84,9 @@ const Header = () => {
|
||||
className="text-sm"
|
||||
icon={
|
||||
<img
|
||||
width="12"
|
||||
height="12"
|
||||
className="ph"
|
||||
width={fontSize}
|
||||
height={fontSize}
|
||||
alt={item.network}
|
||||
src={`https://cdn.simpleicons.org/${item.icon}`}
|
||||
/>
|
||||
|
||||
@ -79,13 +79,13 @@ const Header = () => {
|
||||
</>
|
||||
)}
|
||||
{basics.customFields.map((item) => (
|
||||
<>
|
||||
<div key={item.id} className="flex items-center gap-x-1.5">
|
||||
<Fragment key={item.id}>
|
||||
<div className="flex items-center gap-x-1.5">
|
||||
<i className={cn(`ph ph-bold ph-${item.icon}`, "text-primary")} />
|
||||
<span>{[item.name, item.value].filter(Boolean).join(": ")}</span>
|
||||
</div>
|
||||
<div className="bg-text h-1 w-1 rounded-full last:hidden" />
|
||||
</>
|
||||
</Fragment>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
@ -234,6 +234,7 @@ const Profiles = () => {
|
||||
label={item.username}
|
||||
icon={
|
||||
<img
|
||||
className="ph"
|
||||
width={fontSize}
|
||||
height={fontSize}
|
||||
alt={item.network}
|
||||
|
||||
@ -27,6 +27,7 @@ import { TemplateProps } from "../types/template";
|
||||
const Header = () => {
|
||||
const basics = useArtboardStore((state) => state.resume.basics);
|
||||
const profiles = useArtboardStore((state) => state.resume.sections.profiles);
|
||||
const fontSize = useArtboardStore((state) => state.resume.metadata.typography.font.size);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center space-y-2 pb-2 text-center">
|
||||
@ -81,8 +82,9 @@ const Header = () => {
|
||||
className="text-sm"
|
||||
icon={
|
||||
<img
|
||||
width="12"
|
||||
height="12"
|
||||
className="ph"
|
||||
width={fontSize}
|
||||
height={fontSize}
|
||||
alt={item.network}
|
||||
src={`https://cdn.simpleicons.org/${item.icon}`}
|
||||
/>
|
||||
|
||||
@ -27,6 +27,7 @@ import { TemplateProps } from "../types/template";
|
||||
const Header = () => {
|
||||
const basics = useArtboardStore((state) => state.resume.basics);
|
||||
const profiles = useArtboardStore((state) => state.resume.sections.profiles);
|
||||
const fontSize = useArtboardStore((state) => state.resume.metadata.typography.font.size);
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-between space-x-4 border-b border-primary pb-5">
|
||||
@ -73,7 +74,7 @@ const Header = () => {
|
||||
|
||||
{profiles.visible && profiles.items.length > 0 && (
|
||||
<div
|
||||
className="grid gap-x-4 gap-y-1 self-end text-right"
|
||||
className="grid gap-x-4 gap-y-1 text-right"
|
||||
style={{ gridTemplateColumns: `repeat(${profiles.columns}, auto)` }}
|
||||
>
|
||||
{profiles.items
|
||||
@ -86,8 +87,9 @@ const Header = () => {
|
||||
className="text-sm"
|
||||
icon={
|
||||
<img
|
||||
width="12"
|
||||
height="12"
|
||||
className="ph"
|
||||
width={fontSize}
|
||||
height={fontSize}
|
||||
alt={item.network}
|
||||
src={`https://cdn.simpleicons.org/${item.icon}`}
|
||||
/>
|
||||
@ -108,7 +110,7 @@ const Summary = () => {
|
||||
|
||||
return (
|
||||
<section id={section.id}>
|
||||
<h4 className="mb-1 font-bold uppercase text-primary">{section.name}</h4>
|
||||
<h4 className="font-bold uppercase text-primary">{section.name}</h4>
|
||||
|
||||
<div
|
||||
className="wysiwyg"
|
||||
@ -180,7 +182,7 @@ const Section = <T,>({
|
||||
|
||||
return (
|
||||
<section id={section.id} className="grid">
|
||||
<h4 className="mb-1 font-bold uppercase text-primary">{section.name}</h4>
|
||||
<h4 className="font-bold uppercase text-primary">{section.name}</h4>
|
||||
|
||||
<div
|
||||
className="grid gap-3"
|
||||
|
||||
@ -81,13 +81,13 @@ const Header = () => {
|
||||
</>
|
||||
)}
|
||||
{basics.customFields.map((item) => (
|
||||
<>
|
||||
<div key={item.id} className="flex items-center gap-x-1.5">
|
||||
<Fragment key={item.id}>
|
||||
<div className="flex items-center gap-x-1.5">
|
||||
<i className={cn(`ph ph-bold ph-${item.icon}`)} />
|
||||
<span>{[item.name, item.value].filter(Boolean).join(": ")}</span>
|
||||
</div>
|
||||
<div className="h-1 w-1 rounded-full bg-background last:hidden" />
|
||||
</>
|
||||
</Fragment>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
@ -234,6 +234,7 @@ const Profiles = () => {
|
||||
label={item.username}
|
||||
icon={
|
||||
<img
|
||||
className="ph"
|
||||
width={fontSize}
|
||||
height={fontSize}
|
||||
alt={item.network}
|
||||
|
||||
@ -206,6 +206,7 @@ const Profiles = () => {
|
||||
label={item.username}
|
||||
icon={
|
||||
<img
|
||||
className="ph"
|
||||
width={fontSize}
|
||||
height={fontSize}
|
||||
alt={item.network}
|
||||
|
||||
Reference in New Issue
Block a user