Skip to content

FEATURES.md

Latest commit

 

History

History
163 lines (110 loc) · 2.95 KB

FEATURES.md

File metadata and controls

163 lines (110 loc) · 2.95 KB
Raw

Features Overview

This portfolio includes the following sections and features.

Homepage Sections

1. Hero Section

Location: src/components/sections/hero.js

The landing area with:

  • Greeting text
  • Your name
  • Tagline/subtitle
  • Optional description paragraph
  • Optional CTA button

2. About Section

Location: src/components/sections/about.js

Contains:

  • Bio paragraphs
  • Skills list (displayed in 2 columns)
  • Profile photo

3. Experience Section

Location: src/components/sections/jobs.js
Content: content/jobs/

Tabbed interface showing work history. Each job is a folder with an index.md file.

Features:

  • Company tabs on the left
  • Job details on the right
  • Supports multiple bullet points
  • Links to company websites

4. Featured Projects Section

Location: src/components/sections/featured.js
Content: content/featured/

Showcases 3 main projects with:

  • Project image
  • Title and description
  • Tech stack tags
  • GitHub and external links
  • Alternating left/right layout

5. Contact Section

Location: src/components/sections/contact.js

Simple CTA section with:

  • Section title
  • Message text
  • Email button

Blog (Pensieve)

Location: src/pages/pensieve/
Content: content/posts/

A blog system for writing articles.

Features:

  • Grid layout of post cards
  • Tag system for categorization
  • Date display
  • Supports external links (posts can link to external sites like Hashnode, Medium)
  • Markdown content with code syntax highlighting

Navigation

Location: src/components/nav.js (desktop) and src/components/menu.js (mobile)
Config: src/config.js → navLinks

Features:

  • Smooth scroll to sections
  • Hide on scroll down, show on scroll up
  • Mobile hamburger menu with slide-in sidebar
  • Resume button (links to external URL)
  • Numbered nav items

Social Links

Location: src/components/social.js
Config: src/config.js → socialMedia

Fixed sidebar on left side showing social icons.

Supported platforms:

  • GitHub
  • LinkedIn
  • Instagram
  • Twitter
  • CodePen

Email Sidebar

Location: src/components/email.js
Config: src/config.js → email

Fixed sidebar on right side showing email link (vertical text).

Loading Animation

Location: src/components/loader.js

Animated logo on initial page load.

404 Page

Location: src/pages/404.js

Custom "page not found" page.

SEO & Meta

Config: gatsby-config.js → siteMetadata

  • Open Graph tags for social sharing
  • Twitter card support
  • Sitemap generation
  • Robots.txt

Styling System

Location: src/styles/

  • GlobalStyle.js - Reset and global styles
  • theme.js - Styled-components theme
  • variables.js - CSS custom properties
  • mixins.js - Reusable style mixins
  • fonts.js - Font face declarations

Color palette:

  • Background: #0f1115
  • Muted Teal (accent): #79bac1
  • Secondary Text: #6b7280