Skip to content

Commit

Permalink
refactor(v1.0.0): redesigned web interface (#23)
Browse files Browse the repository at this point in the history 
* refactor(theme): update default theme
* refactor(comp): update footer
* refactor: update main page
* refactor(comp): update header
* feat(deps): add sitemap generator
* chore: remove images loader
* refactor: update link button style
* feat(pages): customize 404 page
* build(deps): add react-markdown
* feat: add about page
* fix: eslint error of `useColorModeValue` hook
* refactor: update about page
* fix: add module export on sitemap generator
* perf: update link color contrast
* feat: add projects page
* build(deps): add plaiceholder (#22)
* feat: update with image loading placeholder
* refactor: update blog page
* refactor: minor update page layout
* feat: add achievement page
* fix: eslint error
* refactor: update cv link
* build(deps): add react-hook-form (#24)
* feat: add contact page
* chore: bump web version from 0.1.0 to 1.0.0
  • Loading branch information
@pravastacaraka
pravastacaraka authored Aug 25, 2021
1 parent 9675bce commit 340e8aa
Show file tree
Hide file tree
Showing 30 changed files with 4,573 additions and 1,374 deletions.
1 change: 1 addition & 0 deletions .env.example
View file
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
AIRTABLE_API_KEY=
AIRTABLE_BASE_ID=
NEXT_PUBLIC_SITE_URL=
11 changes: 2 additions & 9 deletions components/Button.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,15 +14,8 @@ function ThemeToggle({ mobile }) {
) : (
<IconButton
aria-label="Toogle dark mode"
icon={
<Icon
as={colorMode === "dark" ? HiSun : HiMoon}
boxSize={4}
color={colorMode === "dark" ? "gray.200" : "gray.800"}
/>
}
bg={colorMode === "dark" ? "gray.800" : "gray.200"}
_hover={{ bg: colorMode === "dark" ? "gray.800" : "gray.200" }}
icon={<Icon as={colorMode === "dark" ? HiSun : HiMoon} color={colorMode === "dark" ? "white" : "black"} />}
variant="ghost"
onClick={handleClick}
/>
);
Expand Down
70 changes: 26 additions & 44 deletions components/Card.js
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,18 @@
import {
AspectRatio,
Box,
Center,
chakra,
Heading,
HStack,
Link as ChakraLink,
Tag,
Text,
useColorMode,
useColorModeValue,
VStack,
Wrap,
WrapItem,
} from "@chakra-ui/react";
import { hexToRGB } from "helper/function.helper";
import Image from "next/image";
import NextChakraLink from "./NextChakraLink";

function ProjectCard({ name, desc, type, img, stack, demo_url }) {
const getTypeColor = (type) => {
Expand Down Expand Up @@ -86,47 +82,33 @@ function ProjectCard({ name, desc, type, img, stack, demo_url }) {
);
}

function SkillCard({ name, icon, to, color }) {
const { colorMode } = useColorMode();
const iconColor = (color) => {
if (color === "#000000" && colorMode === "dark") return "#EDF2F7";
else return color;
};
function KnowledgeCard({ data, label }) {
return (
<NextChakraLink href={to} prefetch={false} isExternal={to != "/"}>
<HStack
p={2}
spacing={1}
align="center"
borderWidth="1px"
borderColor={useColorModeValue("gray.100", "gray.700")}
rounded={{ base: "lg" }}
_hover={{ shadow: "base" }}
>
<Center boxSize={6} rounded="md" bgColor={hexToRGB(iconColor(color), useColorModeValue(0.1, 0.3))}>
<chakra.svg
boxSize={4}
fill={iconColor(color)}
role="img"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<title>{name}</title>
<path d={icon} />
</chakra.svg>
</Center>
<Text
color={useColorModeValue("gray.600", "gray.400")}
lineHeight="normal"
fontSize="sm"
fontWeight="normal"
noOfLines={1}
>
{name}
</Text>
</HStack>
</NextChakraLink>
<Box>
<Heading mb={4} size="md" letterSpacing="tighter" fontWeight="600">
{label}
</Heading>
<Wrap color={useColorModeValue("gray.600", "gray.400")} fontSize="sm" spacing={1}>
{data?.map((item) => (
<WrapItem key={item.id}>
<HStack w={{ base: "110px", md: "120px" }}>
<chakra.svg
boxSize={4}
fill="currentcolor"
role="img"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<title>{item.fields.name}</title>
<path d={item.fields.icon} />
</chakra.svg>
<Text noOfLines={1}>{item.fields.name}</Text>
</HStack>
</WrapItem>
))}
</Wrap>
</Box>
);
}

export { ProjectCard, SkillCard };
export { KnowledgeCard, ProjectCard };
96 changes: 76 additions & 20 deletions components/Footer.js
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,86 @@
import { Container, Divider, HStack, Text } from "@chakra-ui/react";
import Link from "next/link";
import { ButtonGroup, Container, HStack, Icon, Link, Stack, Text } from "@chakra-ui/react";
import { FaEnvelope, FaFacebook, FaGithub, FaInstagram, FaLinkedinIn, FaTwitter } from "react-icons/fa";
import { NextChakraLink, NextChakraLinkIconButton } from "./NextChakraLink";

function FooterLink({ href, name, ...props }) {
return (
<Link href={href} passHref>
<Text as="a" color="gray.500" _hover={{ color: "gray.600" }} {...props}>
{name}
</Text>
</Link>
);
}
const footerSocials = [
{
name: "Email",
href: "mailto:raka@pravastacaraka.my.id",
icon: FaEnvelope,
},
{
name: "Github",
href: "https://github.com/pravastacaraka",
icon: FaGithub,
},
{
name: "LinkedIn",
href: "https://linkedin.com/in/pravastacaraka",
icon: FaLinkedinIn,
},
{
name: "Facebook",
href: "https://facebook.com/pravastacaraka",
icon: FaFacebook,
},
{
name: "Twitter",
href: "https://twitter.com/pravastacaraka",
icon: FaTwitter,
},
{
name: "Instagram",
href: "https://instagram.com/pravastacaraka",
icon: FaInstagram,
},
];

function Footer() {
const date = new Date().getFullYear();
return (
<Container as="footer" d={{ base: "none", md: "block" }}>
<Divider />
<HStack justify="space-between" w="full" py={4}>
<Text fontSize="sm" color="gray.500">
© {date} Pravasta Caraka Bramastagiri
</Text>
<Container as="footer" px={4} py={8}>
<Stack align="center" color="gray.500" textAlign="center">
<ButtonGroup>
{footerSocials.map((social) => (
<NextChakraLinkIconButton
key={social.name}
href={social.href}
aria-label={social.name}
color="gray.500"
icon={<Icon as={social.icon} />}
_hover={{
transform: "scale(1.05)",
}}
isExternal
/>
))}
</ButtonGroup>
<Stack spacing={0}>
<Text>
Made using&nbsp;
<Link href="https://nextjs.org" isExternal>
Next.js
</Link>
,&nbsp;
<Link href="https://chakra-ui.com" isExternal>
Chakra UI
</Link>
, and&nbsp;
<Link href="https://airtable.com" isExternal>
Airtable
</Link>
. Hosted in&nbsp;
<Link href="https://vercel.com" isExternal>
Vercel
</Link>
</Text>
<Text>MIT License © {date} Pravasta Caraka Bramastagiri</Text>
</Stack>
<HStack spacing={4}>
<FooterLink href="/disclaimer" name="Disclaimer" />
<FooterLink href="/privacy" name="Privacy" />
<NextChakraLink href="/disclaimer">Disclaimer</NextChakraLink>
<NextChakraLink href="/privacy">Privacy</NextChakraLink>
</HStack>
</HStack>
</Stack>
</Container>
);
}
Expand Down
69 changes: 31 additions & 38 deletions components/Header.js
View file
Original file line number Diff line number Diff line change
@@ -1,58 +1,51 @@
import { ThemeToggle } from "@app-components/Button";
import { MENU_LINKS } from "@app-config/app.config";
import { Avatar, Container, HStack, Text, useColorModeValue } from "@chakra-ui/react";
import { useRouter } from "next/dist/client/router";
import Link from "next/link";
import { _app_routes } from "@app-config/app.config";
import { Container, HStack, useColorMode, useColorModeValue } from "@chakra-ui/react";
import { useRouter } from "next/router";
import { useCallback } from "react";
import { NextChakraLinkButton } from "./NextChakraLink";

function HeaderLink({ name, href, isActive }) {
const { colorMode } = useColorMode();
const textColor = isActive ? (colorMode === "dark" ? "yellow.200" : "#2756a3") : undefined;
return (
<Link href={href} passHref>
<Text
as="a"
px={4}
color="gray.500"
_hover={{ color: "gray.600" }}
aria-current={isActive ? "page" : undefined}
_activeLink={{
color: useColorModeValue("gray.900", "gray.100"),
}}
>
{name}
</Text>
</Link>
<NextChakraLinkButton
href={href}
color={textColor}
fontWeight={isActive ? "bold" : "normal"}
variant="ghost"
_hover={{
bg: useColorModeValue("blackAlpha.200", "whiteAlpha.200"),
color: textColor,
transform: "scale(1.05)",
}}
>
{name}
</NextChakraLinkButton>
);
}

function Header() {
const { pathname } = useRouter();
let isActive = false;

const router = useRouter();
const isRoute = useCallback((asPath) => router.asPath == asPath, [router.asPath]);
return (
<Container
as="nav"
p={8}
my={{ base: 6, md: 8 }}
bg={useColorModeValue("rgba(255,255,255,0.6)", "rgba(0,0,0,0.6)")}
backdropFilter="blur(12px)"
d={{ base: "none", md: "block" }}
position="sticky"
px={4}
py={8}
top={0}
zIndex={10}
d={{ base: "none", md: "block" }}
background={useColorModeValue("rgba(255,255,255,0.6)", "rgba(0,0,0,1)")}
backdropFilter="saturate(180%) blur(20px)"
>
<HStack justify="space-between" w="full">
<Link href="/" passHref>
<Avatar name="Pravasta Caraka" size="sm" cursor="pointer" />
</Link>
<HStack></HStack>
<HStack>
{MENU_LINKS.map(({ title, path }) => {
if (path !== "/") {
const [, group] = path.split("/");
isActive = pathname.includes(group);
} else {
if (path === pathname) isActive = true;
}
return <HeaderLink href={path} name={title} isActive={isActive} key={title} />;
})}
{_app_routes.map(({ title, href }) => (
<HeaderLink key={title} href={href} name={title} isActive={isRoute(href)} />
))}
</HStack>
<ThemeToggle />
</HStack>
Expand Down
53 changes: 49 additions & 4 deletions components/NextChakraLink.js
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,58 @@
import { Link as ChakraLink } from "@chakra-ui/react";
import { Button, IconButton, Link as ChakraLink } from "@chakra-ui/react";
import NextLink from "next/link";

// has to be a new component because both chakra and next share the `as` keyword
const NextChakraLink = ({ href, as, replace, scroll, shallow, prefetch, ...chakraProps }) => {
return (
<NextLink passHref href={href} as={as} replace={replace} scroll={scroll} shallow={shallow} prefetch={prefetch}>
<ChakraLink transition="none" _hover={{ textDecoration: "none" }} {...chakraProps} />
<NextLink href={href} as={as} replace={replace} scroll={scroll} shallow={shallow} prefetch={prefetch} passHref>
<ChakraLink {...chakraProps} />
</NextLink>
);
};

export default NextChakraLink;
const NextChakraLinkButton = ({
href,
as,
replace,
scroll,
shallow,
prefetch,
isExternal = false,
...chakraProps
}) => {
return (
<NextLink href={href} as={as} replace={replace} scroll={scroll} shallow={shallow} prefetch={prefetch} passHref>
<Button
as="a"
transition="transform .3s cubic-bezier(.175,.885,.32,1.275), border-color .2s cubic-bezier(.39,.575,.565,1), background-color .2s cubic-bezier(.39,.575,.565,1)"
{...(isExternal && { target: "_blank", rel: "noopener noreferrer" })}
{...chakraProps}
/>
</NextLink>
);
};

const NextChakraLinkIconButton = ({
href,
as,
replace,
scroll,
shallow,
prefetch,
isExternal = false,
...chakraProps
}) => {
return (
<NextLink href={href} as={as} replace={replace} scroll={scroll} shallow={shallow} prefetch={prefetch} passHref>
<IconButton
as="a"
transition="transform .3s cubic-bezier(.175,.885,.32,1.275), border-color .2s cubic-bezier(.39,.575,.565,1), background-color .2s cubic-bezier(.39,.575,.565,1)"
variant="ghost"
{...(isExternal && { target: "_blank", rel: "noopener noreferrer" })}
{...chakraProps}
/>
</NextLink>
);
};

export { NextChakraLink, NextChakraLinkButton, NextChakraLinkIconButton };
13 changes: 13 additions & 0 deletions components/markdown/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import { NextChakraLink } from "@app-components/NextChakraLink";
import { Text } from "@chakra-ui/react";

export const BaseMarkdown = {
a({ node, ...rest }) {
const href = rest.href;
return <NextChakraLink isExternal={!href.startsWith("#")} {...rest} />;
},

p({ node, ...rest }) {
return <Text as="div" {...rest} />;
},
};
Loading

1 comment on commit 340e8aa

@vercel
Copy link

@vercel vercel bot commented on 340e8aa Aug 25, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

Please sign in to comment.