Goal

• Create a section to introduce myself

Deadline / Task size

• 1 day

Steps

• Create the About section component with the 2 subsections embedded

Design

Goal

• To create a reusable button component

Deadline / Task size

• 1 day

Steps

• Create <CommonButton /> in /src/components/common

Design image

Uncertainty

• none

Additional memo

• none

GOAL

• To create the Header section
• To make it responsive for mobile, tablet, and laptop

DEADLINE / TASK SIZE

2 days

STEPS

• Create the Header section

DESIGN

• Tablet / Laptop
  

• Mobile
  
  

DEPENDENCY

• Predecessor: #4

Goal

• To create a section for viewers to contact me

Deadline / Task size

• 1 day

Steps

• To create a section component <Contact /> to be embedded in <Main />

Design

Uncertainty

• How can I implement the functionality of "creating an email draft when the icon is clicked"?
  • Use the a tag with the href attribute, the value of which is mailto: + my email address

Additional memo

• none

GOAL

• To make the navigation menu in the Header section responsive to mobile
• To create the Hamburger Menu to implement in the Header section

DEADLINE / TASK SIZE

2 days

STEPS

• Create the HamburgerBtn component

DESIGN

• Mobile
  
  

DEPENDENCY

• Next Issue: #3

Goal

• To prevent existing code from being highlighted at PRs for its format such as indentation

Deadline / Task size

• 1 day

Steps

• Execute the format command at the root directory of the project prettier --write

Goal

• Create the reusable component SectionTitle

Deadline / Task size

• 1 day

Design

Goal

• To prevent import/export paths from being too long and complicated
• To invalidate import/export with absolute paths

Deadline / Task size

• 1 day

Steps

• Create jsconfig.json with these parameters in the root directory
  • "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["./src/*"] }}

GOAL

• To clarify what sections the portfolio web page is made of
• To make it easier to understand the necessary components to create

TASK SIZE

1 day

Goal

• The profile image in the Intro section is replaced with another image

Deadline / Task size

• 0.5 day

Steps

• Replace the old image public/assets/profile-img.jpg with a new one
• Add MongoDB to the section My Skills
• Remove the shadow effect around the profile image

Uncertainty

• None

Additional memo

• None

Goal

• To create the Footer section

Deadline / Task size

• 1 day

Steps

• Create <Footer /> to embed in pages/index.js

Design

Uncertainty

• none

Additional memo

• none

Goal

• There is enough space between the Contact section and the Footer section

Deadline / Task size

• 1 day

Steps

• To add margin-bottom to <SectionLayout />

Screenshot

Uncertainty

• Would be there any UI side-effects since <SectionLayout /> is commonly used over the page?
  • No. <SectionLayout /> has margin-top and there is already space between sections, so adding bottom margin won't affect other UIs.

Additional memo

• none

Goal

• Social links in the Contact section have a better hover animation

Deadline / Task size

• 0.5 day

Steps

• Apply the same hover effect as the GitHub button in the Projects section

Uncertainty

• none

Additional memo

• none

Goal

• Create the reusable component SectionSubTitle

Deadline / Task size

• 1 day

Design

Goal

• To embed Title components in SectionLayout components

Deadline / Task size

• 1 day

Steps

• Import <SectionTitle /> to <SectionLayout /> and <SubSectionTitle /> to <SubSectionLayout>
• Replace <Title /> with <SectionTitle /> and <SubSectionTitle />

Additional memo

• There are some styles that should be fixed so that those style modifications can be addressed along with this embedding

Goal

• To replace hard-coded breakpoints with constants for readability

Deadline / Task size

• 1 day

Steps

• Create constants for each breakpoint in /src/constants/index
• Replace hard-coded breakpoints with the created constants

Additional memo

• Mentioned at #37

GOAL

• Make the code more maintainable by replacing hard-coded texts with constants

DEADLINE / TASK SIZE

1 day

STEPS

• Create a js file to hold constants and import them into components

GOAL

• Create a section to introduce me with a brief description

DEADLINE / TASK SIZE

1 day

STEPS

• Create a section with a heading of my name, my profile image, and a brief description of myself

Design

• Mobile (~ 750px)
  

• Tablet / Laptop (751px ~)
  

Goal

• The Intro section has 100vh or almost 100vh height to look better

Deadline / Task size

• 0.5 day

Steps

• Change the height of the Intro component with calc(100vh - header's height)

Uncertainty

• none

Additional memo

• none

Screenshot

• The current Intro section

Goal

• Create the subsection "My Skills" to embed in the About section

Deadline / Task size

• 1 day

Steps

• Create the "My Skills" component and tech icon components

Design

Goal

• No CSS files exist in the project after this integration
• All the existing CSS files, *.module.css and globals.css, get integrated with styled-components

Deadline / Task size

• none

Steps

• Create styled components of *.module.css and globals.css
• Embed them in appropriate components or appropriate places

Uncertainty

• How can I apply global styles with styled-components in Next.js?

  • Use createGlobalStyle for global styles
  • Embed the GlobalStyle component in _app.js

  Referrence: API Reference, Custom App

Additional memo

• none

Goal

• Create the subsection "Whoami" to embed in the About section

Deadline / Task size

• 1 day

Steps

• Create <MyDescription /> in <About />

Design

Goal

• My new project weight-tracker is added to the section Projects

Deadline / Task size

• 1 day

Steps

• Add weight-tracker to the section Projects with:
  • A temporary thumbnail
  • MERN stack
  • App description

Uncertainty

• None

Additional memo

• None

Goal

• The header logo's image is displayed without a UI issue

Deadline / Task size

• 1 day

Steps

• Embed the image as background-image instead of using <Image />.
  Here're the necessary properties below.

  • background-image: url();
  • background-position: center;
  • background-size: cover;

Screenshot

Uncertainty

• none

Additional memo

• The same UI issue happened at HidemichiShimura/portfolio#9 (comment)

Goal

• To Add more horizontal spacing to the Main section, especially for mobile views

Deadline / Task size

• 1 day

Steps

• Add more horizontal padding to <Main />

Uncertainty

• none

Additional memo

• none

Screenshot

Goal

• This error never shows in the console

Deadline / Task size

• none

Steps

• Error research on the web

Uncertainty

1. What is this error?
2. How can I fix this?

Additional memo

• none

Goal

• The project thumbnails are replaced with gif
• The GitHub button has better UI

Deadline / Task size

• 1 day

Steps

• Delete <Image />
• Apply background-image: URL() in ProjectThumbnail in ImageContainer

Uncertainty

• How can I use props with styled-components?
  • The same way as a normal component but with a callback function
    Reference: Passed props

Additional memo

• none

Goal

• The MySkillList component becomes reusable and shows various skills depending on props

Deadline / Task size

• 1 day

Steps

• Add constants for the reusable MySkillList component to src/constants/index.js
• Make MySkillList have props skills and size for reusability
• Refactor MySkillList that is already called in other components

Uncertainty

• none

Additional memo

• This reusable component will be used in the Projects section later

Goal

• To create a README instead of the default one

Deadline / Task size

• 0.5 day

Steps

• Create README with the topics below
  • Description
  • Used skills
  • Achievements

Uncertainty

• none

Additional memo

• none

Goal

• My portfolio website has the basic metadata in the Head

Deadline / Task size

• 1 day

Steps

• Create <Head /> with following metadata embedded
  • charset
  • viewport
  • title
  • author
  • description

Uncertainty

• What should I name the title of the page?
  • Name + Job title

Additional memo

• Use the built-in component next/head.
• This PR only addresses basic metadata.
• There mightl be another PR of updating metadata in <Head /> to improve this website's SEO.

Goal

• Each project in Projects has its tech stack

Deadline / Task size

• 0.5 day

Steps

• Add <SkillList /> with an array of its tech stack to <ProjectDescription />

Uncertainty

• none

Additional memo

• none

Goal

• The thumbnail of Weight Tracker is replaced with the new app gif

Deadline / Task size

• 0.5 day

Steps

• Replace the current thumbnail weight-tracker.jpg in public/assets with a new gif
• Change the path of the current thumbnail file in src/constants/index, PROJECT_DETAILS

Uncertainty

• None

Additional memo

• None

Goal

• The logo and the links in the header get darker on hover

Deadline / Task size

• 0.5 day

Steps

• Add :hover to Container in HeaderLogo
• Add :hover to NavLink in NavMenu

Uncertainty

• none

Additional memo

• none

Screenshot

Goal

• Create a layout component for sub sections in About

Deadline / Task size

• 1 day

Steps

• Create SubSectionLayout.jsx in /src/components/common

Layout image

• Mobile(~750px)
  

Goal

• To create a component for the common section layout that can be used over the page

Deadline / Task size

• 1 day

Steps

• Create <SectionLayout /> in src/common

Layout image

Additional memo

• I will create a similar layout component for SubSectionLayout for 'Who am I?" and "My Skills" in About

Goal

• The header has a blurred background

Deadline / Task size

• 0.5 day

Steps

• Add backdrop-filter: blur() to the header

Uncertainty

• none

Additional memo

• none

GOAL

• To set the project term
• To clarify tech skills to be used in this project
• To decide on a development environment for this project
• To find out my current uncertainty regarding the project

DEADLINE

29 Dec 2022

RESEARCH TOPICS

• Project deadline
• Skills used in this project
• Development environment
• Deployment environment
• Uncertainty

Goal

• Install styled-components

Deadline / Task size

• 1 day

Steps

• Install the npm package

Goal

• All the headings have gradient color

Deadline / Task size

• 1 day

Steps

• To add the gradient color styles to each heading with the colors below
  • --main-color: #252525
  • --text-color: #ffffff
  • --accent-color: #fef2b2

Uncertainty

• none

Additional memo

• none

Goal

• Users get to a section when they click on a section in the navigation menu

Deadline / Task size

• 1 day

Steps

• Add id as props to <SectionLayout /> at which the window scrolling ends up

Uncertainty

• none

Additional memo

• The Intro section does not contain <SectionLayout /> and its id is hard coded, which needs to be fixed as well.

Goal

• To Create a section to introduce my projects

Deadline / Task size

• 2 days

Steps

• To add <Projects /> in <Main />

Design image

• Mobile

• Table / Laptop

Uncertainty

• none

Additional memo

• none