Add Portfolio Button

saurabh73 · Dec 31, 2020 · 089f0a8 · 089f0a8
1 parent 64cd096
commit 089f0a8
Show file tree

Hide file tree

Showing 44 changed files with 240 additions and 54 deletions.
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -23,8  23,8 @@ module.exports = {
     {
       resolve: `gatsby-source-filesystem`,
       options: {
-        name: `images`,
-        path: `${__dirname}/src/images`,
         name: `assets`,
         path: `${__dirname}/src/assets`,
       },
     },
     {
@@ -36,7  36,7 @@ module.exports = {
         background_color: `#663399`,
         theme_color: `#663399`,
         display: `minimal-ui`,
-        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
         icon: `src/assets/images/gatsby-icon.png`, // This path is relative to the root of the site.
       },
     },
     {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -5,6  5,7 @@
   "version": "0.0.1",
   "author": "Saurabh Dutta <[email protected]>",
   "dependencies": {
     "@crossfield/react-read-more": "^0.2.0",
     "@fortawesome/fontawesome-free": "^5.15.1",
     "@sanity/block-content-to-react": "^2.0.7",
     "@sanity/client": "^2.1.0",

diff --git a/src/files/saurabh-dutta-resume.pdf → src/assets/files/saurabh-dutta-resume.pdf b/src/files/saurabh-dutta-resume.pdf → src/assets/files/saurabh-dutta-resume.pdf
diff --git a/src/fonts/hkgrotesk/HKGrotesk-Bold.eot → ...assets/fonts/hkgrotesk/HKGrotesk-Bold.eot b/src/fonts/hkgrotesk/HKGrotesk-Bold.eot → ...assets/fonts/hkgrotesk/HKGrotesk-Bold.eot
diff --git a/src/fonts/hkgrotesk/HKGrotesk-Bold.otf → ...assets/fonts/hkgrotesk/HKGrotesk-Bold.otf b/src/fonts/hkgrotesk/HKGrotesk-Bold.otf → ...assets/fonts/hkgrotesk/HKGrotesk-Bold.otf
diff --git a/src/fonts/hkgrotesk/HKGrotesk-Bold.ttf → ...assets/fonts/hkgrotesk/HKGrotesk-Bold.ttf b/src/fonts/hkgrotesk/HKGrotesk-Bold.ttf → ...assets/fonts/hkgrotesk/HKGrotesk-Bold.ttf
diff --git a/src/fonts/hkgrotesk/HKGrotesk-Bold.woff → ...ssets/fonts/hkgrotesk/HKGrotesk-Bold.woff b/src/fonts/hkgrotesk/HKGrotesk-Bold.woff → ...ssets/fonts/hkgrotesk/HKGrotesk-Bold.woff
diff --git a/src/fonts/hkgrotesk/HKGrotesk-Bold.woff2 → ...sets/fonts/hkgrotesk/HKGrotesk-Bold.woff2 b/src/fonts/hkgrotesk/HKGrotesk-Bold.woff2 → ...sets/fonts/hkgrotesk/HKGrotesk-Bold.woff2
diff --git a/src/fonts/hkgrotesk/HKGrotesk-Light.eot → ...ssets/fonts/hkgrotesk/HKGrotesk-Light.eot b/src/fonts/hkgrotesk/HKGrotesk-Light.eot → ...ssets/fonts/hkgrotesk/HKGrotesk-Light.eot
diff --git a/src/fonts/hkgrotesk/HKGrotesk-Light.otf → ...ssets/fonts/hkgrotesk/HKGrotesk-Light.otf b/src/fonts/hkgrotesk/HKGrotesk-Light.otf → ...ssets/fonts/hkgrotesk/HKGrotesk-Light.otf
diff --git a/src/fonts/hkgrotesk/HKGrotesk-Light.ttf → ...ssets/fonts/hkgrotesk/HKGrotesk-Light.ttf b/src/fonts/hkgrotesk/HKGrotesk-Light.ttf → ...ssets/fonts/hkgrotesk/HKGrotesk-Light.ttf
diff --git a/src/fonts/hkgrotesk/HKGrotesk-Light.woff → ...sets/fonts/hkgrotesk/HKGrotesk-Light.woff b/src/fonts/hkgrotesk/HKGrotesk-Light.woff → ...sets/fonts/hkgrotesk/HKGrotesk-Light.woff
diff --git a/src/fonts/hkgrotesk/HKGrotesk-Light.woff2 → ...ets/fonts/hkgrotesk/HKGrotesk-Light.woff2 b/src/fonts/hkgrotesk/HKGrotesk-Light.woff2 → ...ets/fonts/hkgrotesk/HKGrotesk-Light.woff2
diff --git a/src/fonts/hkgrotesk/HKGrotesk-Medium.eot → ...sets/fonts/hkgrotesk/HKGrotesk-Medium.eot b/src/fonts/hkgrotesk/HKGrotesk-Medium.eot → ...sets/fonts/hkgrotesk/HKGrotesk-Medium.eot
diff --git a/src/fonts/hkgrotesk/HKGrotesk-Medium.otf → ...sets/fonts/hkgrotesk/HKGrotesk-Medium.otf b/src/fonts/hkgrotesk/HKGrotesk-Medium.otf → ...sets/fonts/hkgrotesk/HKGrotesk-Medium.otf
diff --git a/src/fonts/hkgrotesk/HKGrotesk-Medium.ttf → ...sets/fonts/hkgrotesk/HKGrotesk-Medium.ttf b/src/fonts/hkgrotesk/HKGrotesk-Medium.ttf → ...sets/fonts/hkgrotesk/HKGrotesk-Medium.ttf
diff --git a/src/fonts/hkgrotesk/HKGrotesk-Medium.woff → ...ets/fonts/hkgrotesk/HKGrotesk-Medium.woff b/src/fonts/hkgrotesk/HKGrotesk-Medium.woff → ...ets/fonts/hkgrotesk/HKGrotesk-Medium.woff
diff --git a/src/fonts/hkgrotesk/HKGrotesk-Medium.woff2 → ...ts/fonts/hkgrotesk/HKGrotesk-Medium.woff2 b/src/fonts/hkgrotesk/HKGrotesk-Medium.woff2 → ...ts/fonts/hkgrotesk/HKGrotesk-Medium.woff2
diff --git a/src/fonts/hkgrotesk/HKGrotesk-Regular.eot → ...ets/fonts/hkgrotesk/HKGrotesk-Regular.eot b/src/fonts/hkgrotesk/HKGrotesk-Regular.eot → ...ets/fonts/hkgrotesk/HKGrotesk-Regular.eot
diff --git a/src/fonts/hkgrotesk/HKGrotesk-Regular.otf → ...ets/fonts/hkgrotesk/HKGrotesk-Regular.otf b/src/fonts/hkgrotesk/HKGrotesk-Regular.otf → ...ets/fonts/hkgrotesk/HKGrotesk-Regular.otf
diff --git a/src/fonts/hkgrotesk/HKGrotesk-Regular.ttf → ...ets/fonts/hkgrotesk/HKGrotesk-Regular.ttf b/src/fonts/hkgrotesk/HKGrotesk-Regular.ttf → ...ets/fonts/hkgrotesk/HKGrotesk-Regular.ttf
diff --git a/src/fonts/hkgrotesk/HKGrotesk-Regular.woff → ...ts/fonts/hkgrotesk/HKGrotesk-Regular.woff b/src/fonts/hkgrotesk/HKGrotesk-Regular.woff → ...ts/fonts/hkgrotesk/HKGrotesk-Regular.woff
diff --git a/src/fonts/hkgrotesk/HKGrotesk-Regular.woff2 → ...s/fonts/hkgrotesk/HKGrotesk-Regular.woff2 b/src/fonts/hkgrotesk/HKGrotesk-Regular.woff2 → ...s/fonts/hkgrotesk/HKGrotesk-Regular.woff2
diff --git a/src/fonts/hkgrotesk/HKGrotesk-SemiBold.eot → ...ts/fonts/hkgrotesk/HKGrotesk-SemiBold.eot b/src/fonts/hkgrotesk/HKGrotesk-SemiBold.eot → ...ts/fonts/hkgrotesk/HKGrotesk-SemiBold.eot
diff --git a/src/fonts/hkgrotesk/HKGrotesk-SemiBold.otf → ...ts/fonts/hkgrotesk/HKGrotesk-SemiBold.otf b/src/fonts/hkgrotesk/HKGrotesk-SemiBold.otf → ...ts/fonts/hkgrotesk/HKGrotesk-SemiBold.otf
diff --git a/src/fonts/hkgrotesk/HKGrotesk-SemiBold.ttf → ...ts/fonts/hkgrotesk/HKGrotesk-SemiBold.ttf b/src/fonts/hkgrotesk/HKGrotesk-SemiBold.ttf → ...ts/fonts/hkgrotesk/HKGrotesk-SemiBold.ttf
diff --git a/src/fonts/hkgrotesk/HKGrotesk-SemiBold.woff → ...s/fonts/hkgrotesk/HKGrotesk-SemiBold.woff b/src/fonts/hkgrotesk/HKGrotesk-SemiBold.woff → ...s/fonts/hkgrotesk/HKGrotesk-SemiBold.woff
diff --git a/src/fonts/hkgrotesk/HKGrotesk-SemiBold.woff2 → .../fonts/hkgrotesk/HKGrotesk-SemiBold.woff2 b/src/fonts/hkgrotesk/HKGrotesk-SemiBold.woff2 → .../fonts/hkgrotesk/HKGrotesk-SemiBold.woff2
diff --git a/src/images/coding.svg → src/assets/images/coding.svg b/src/images/coding.svg → src/assets/images/coding.svg
diff --git a/src/images/day.jpg → src/assets/images/day.jpg b/src/images/day.jpg → src/assets/images/day.jpg
diff --git a/src/images/gatsby-astronaut.png → src/assets/images/gatsby-astronaut.png b/src/images/gatsby-astronaut.png → src/assets/images/gatsby-astronaut.png
diff --git a/src/images/gatsby-icon.png → src/assets/images/gatsby-icon.png b/src/images/gatsby-icon.png → src/assets/images/gatsby-icon.png
diff --git a/src/images/night.jpg → src/assets/images/night.jpg b/src/images/night.jpg → src/assets/images/night.jpg
diff --git a/src/images/profile.jpeg → src/assets/images/profile.jpeg b/src/images/profile.jpeg → src/assets/images/profile.jpeg
diff --git a/src/images/web-developer.svg → src/assets/images/web-developer.svg b/src/images/web-developer.svg → src/assets/images/web-developer.svg
diff --git a/src/components/portfolio-card/index.js b/src/components/portfolio-card/index.js
@@ -0,0  1,60 @@
 import React from 'react';
 import PropTypes from "prop-types";
 import Img from "gatsby-image";
 import ReadMore from "@crossfield/react-read-more";
 import { BsChevronCompactDown } from "react-icons/bs";
 
 const PortfolioCard = ({ portfolio }) => {
   return (
     <div className="portfolio-card card my-5">
       <Img
         fluid={portfolio.image.asset.fluid}
         className="card-img-top portfolio-image-card"
         alt="Smart Coaching Portfolio"
         style={{ background: portfolio.background }}
       />
       <ReadMore initialHeight={400} readMore={props => (
         <button onClick={props.onClick}>
           {props.open ? 'Read Less' : 'Read More'}
           <span className="px-2">
             <BsChevronCompactDown style={{
               transform: `rotate( ${props.open ? '180deg' : '0deg'})`,
               transition: 'transform 0.25s',
             }} />
           </span>
         </button>
       )}>
         <div className="card-body portfolio-body" style={{ paddingTop: "30px" }}>
           <div className="row">
             <div className="col-12 col-md-6">
               <h3 className="card-title">
                 <a href={portfolio.link} target="__blank">{portfolio.name}</a>
               </h3>
               <p>{portfolio.description}</p>
             </div>
             <div className="col-12 col-md-6 project-info">
               <span className="portfolio-summary">Project Summary</span>
               <ul class="portfolio-aside-list">
                 <li>
                   <span class="t-left">Role:</span>
                   <span class="t-right text-primary">{portfolio.role}</span>
                 </li>
                 <li>
                   <span class="t-left">Skills:</span>
                   <div class="t-right cate-link">
                     {portfolio.tags.map((tag) => (<span className="badge">{tag}</span>))}
                   </div>
                 </li>
               </ul>
             </div>
 
           </div>
 
         </div>
       </ReadMore>
     </div >
   );
 }
 
 
 export default PortfolioCard;
diff --git a/src/components/sidebar/content.js b/src/components/sidebar/content.js
@@ -5,7  5,6 @@ import PropTypes from 'prop-types';
 import Img from "gatsby-image";
 import simpleIcons from 'simple-icons';
 import Icon from './../icon';
-import resumeFile from './../../files/saurabh-dutta-resume.pdf'
 
 const SidebarContent = ({ children }) => {
   const data = useStaticQuery(graphql`{
@@ -31,6  30,10 @@ const SidebarContent = ({ children }) => {
         }
       }
     }
     resume: file(name: {eq: "saurabh-dutta-resume"}, relativeDirectory: {in: "files"}) {
       id
       publicURL
     }
   }`);
   return (
     <>
@@ -69,7  72,7 @@ const SidebarContent = ({ children }) => {
       </div>
       <div className="resume-section mt-3">
         <a className='btn btn-resume hvr-underline-from-center btn-block p-3'
-          href={resumeFile} download>
           href={data.resume.publicURL} download>
           <i className="fas fa-download px-1"></i> Download Resume
         </a>
       </div>

diff --git a/src/components/technology-tile/index.js b/src/components/technology-tile/index.js
@@ -5,19  5,20 @@ import Img from "gatsby-image";
 const TechnologyTile = ({ technology }) => {
   return (
     <div className="card hvr-grow bg-transparent border-0 px-1" style={{ "width": "100%" }} >
-      {technology.image && technology.image.asset.fluid && <Img
-        className="card-img-top rounded"
-        fluid={technology.image.asset.fluid}
-        style={{
-          height: "96px",
-          backgroundColor: "rgba(150,150,150,0.1)"
-        }}
-        imgStyle={{
-          objectFit: "contain",
-          padding: "16px"
-        }}
-        alt="Card image cap">
-      </Img>
       {technology.image && technology.image.asset.fluid &&
         <Img
           className="card-img-top rounded"
           fluid={technology.image.asset.fluid}
           style={{
             height: "96px",
             backgroundColor: "rgba(150,150,150,0.1)"
           }}
           imgStyle={{
             objectFit: "contain",
             padding: "16px"
           }}
           alt="Card image cap">
         </Img>
       }
       <div className="card-body px-0 text-center">
         <span className="card-title">{technology.name}</span>
@@ -39,5  40,4 @@ TechnologyTile.propTypes = {
     showBadge: PropTypes.bool
   }).isRequired
 };
-
-export default TechnologyTile;
 export default TechnologyTile;
diff --git a/src/components/theme-switcher/index.js b/src/components/theme-switcher/index.js
@@ -1,7  1,6 @@
 import React from "react";
 import Style from "./theme-switcher.module.scss";
 import { ThemeToggler } from "gatsby-plugin-dark-mode";
-
 const ThemeSwitcher = () => {
   return (
     <ThemeToggler>

diff --git a/src/components/theme-switcher/theme-switcher.module.scss b/src/components/theme-switcher/theme-switcher.module.scss
@@ -17,7  17,7 @@
     &:checked {
       ~ .switch-label {
         transition: 0.5s all ease;
-        background-image: url(./../../images/day.jpg);
         background-image: url(./../../assets/images/day.jpg);
         border: 1px solid $sun;
         .toggle {
           $position: 0px;
@@ -39,7  39,7 @@
     cursor: pointer;
     transition: 1s all ease;
     margin-bottom: 0;
-    background-image: url(./../../images/night.jpg);
     background-image: url(./../../assets/images/night.jpg);
     background-size: cover;
     .toggle {
       width: $height * 0.75;

diff --git a/src/pages/portfolio.js b/src/pages/portfolio.js
@@ -1,20  1,43 @@
 import React from "react";
 import Layout from "../components/layout";
 import SEO from "../components/seo";
 import { useStaticQuery, graphql } from "gatsby";
 import PortfolioCard from "../components/portfolio-card";
 
 
 export const query = graphql`{
   portfolio: allSanityPortfolio(sort: {order: ASC, fields: order}) {
     nodes {
       id
       link
       name
       description
       background
       tags
       role
       image {
         asset {
           fluid(maxWidth: 800) {
             ...GatsbySanityImageFluid_withWebp
           }
         }
       }
     }
   }
 }`
 
 const PortfolioPage = () => {
   const pageName = "portfolio";
   const data = useStaticQuery(query);
   return (
     <Layout page={pageName}>
       <SEO title={"/"   pageName} />
       <div className="box">
-        <h1>Test</h1>
-        <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, officia
-          architecto? Ipsa ea commodi, fugiat dolorum neque necessitatibus
-          laborum sunt quo ullam aut nostrum nihil labore optio atque obcaecati
-          ipsum.
-        </p>
         <h1 className="title">Projects</h1>
 
         {data.portfolio.nodes.map((portfolio) => (
           <PortfolioCard portfolio={portfolio} />
         ))}
       </div>
     </Layout>
   );

diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss
@@ -1,5  1,5 @@
 @import url("https://fonts.googleapis.com/css2?family=Anonymous Pro:wght@400;700&display=swap");
-$font-path: "../fonts" !default;
 $font-path: "../assets/fonts" !default;
 
 // =============================================================================
 // String Replace
@@ -63,38  63,38 @@ $font-path: "../fonts" !default;
   }
 }
 
-// @include font-face(
-//   "HK Grotesk",
-//   "#{$font-path}/hkgrotesk/HKGrotesk-Bold",
-//   normal,
-//   bold,
-//   ("eot", "woff2", "woff", "ttf", "otf")
-// );
 @include font-face(
   "HK Grotesk Bold",
   "#{$font-path}/hkgrotesk/HKGrotesk-Bold",
   normal,
   bold,
   ("eot", "woff2", "woff", "ttf", "otf")
 );
 // @include font-face(
 //   "HK Grotesk",
 //   "#{$font-path}/hkgrotesk/HKGrotesk-SemiBold",
 //   normal,
 //   600,
 //   ("eot", "woff2", "woff", "ttf", "otf")
 // );
-// @include font-face(
-//   "HK Grotesk",
-//   "#{$font-path}/hkgrotesk/HKGrotesk-Medium",
-//   normal,
-//   500,
-//   ("eot", "woff2", "woff", "ttf", "otf")
-// );
 @include font-face(
   "HK Grotesk Medium",
   "#{$font-path}/hkgrotesk/HKGrotesk-Medium",
   normal,
   500,
   ("eot", "woff2", "woff", "ttf", "otf")
 );
 @include font-face(
   "HK Grotesk",
   "#{$font-path}/hkgrotesk/HKGrotesk-Regular",
   normal,
   normal,
   ("eot", "woff2", "woff", "ttf", "otf")
 );
-// @include font-face(
-//   "HK Grotesk",
-//   "#{$font-path}/hkgrotesk/HKGrotesk-Light",
-//   normal,
-//   300,
-//   ("eot", "woff2", "woff", "ttf", "otf")
-// );
 @include font-face(
   "HK Grotesk Light",
   "#{$font-path}/hkgrotesk/HKGrotesk-Light",
   normal,
   300,
   ("eot", "woff2", "woff", "ttf", "otf")
 );