feat(homepage): add new sections to homepage

This commit is contained in:
Amruth Pillai
2023-11-13 17:03:41 +01:00
parent 4b1e33db80
commit d18b258761
79 changed files with 3096 additions and 313 deletions

View File

@ -230,6 +230,7 @@ const Profiles = () => {
label={item.username}
icon={
<img
className="ph"
width={fontSize}
height={fontSize}
alt={item.network}

View File

@ -207,6 +207,7 @@ const Profiles = () => {
label={item.username}
icon={
<img
className="ph"
width={fontSize}
height={fontSize}
alt={item.network}

View File

@ -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}`}
/>

View File

@ -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}

View File

@ -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}`}
/>

View File

@ -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"

View File

@ -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}

View File

@ -206,6 +206,7 @@ const Profiles = () => {
label={item.username}
icon={
<img
className="ph"
width={fontSize}
height={fontSize}
alt={item.network}