diff --git a/content/images/aang-avatar.jpg b/content/images/aang-avatar.jpg deleted file mode 100644 index ba5aa9f..0000000 Binary files a/content/images/aang-avatar.jpg and /dev/null differ diff --git a/content/images/assets/.gitkeep b/content/images/assets/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/content/images/assets/movie-1/fly.jpg b/content/images/assets/movie-1/fly.jpg deleted file mode 100644 index 67a8644..0000000 Binary files a/content/images/assets/movie-1/fly.jpg and /dev/null differ diff --git a/content/images/assets/movie-1/hand.jpg b/content/images/assets/movie-1/hand.jpg deleted file mode 100644 index 46498e4..0000000 Binary files a/content/images/assets/movie-1/hand.jpg and /dev/null differ diff --git a/content/images/assets/movie-1/naoufel.jpg b/content/images/assets/movie-1/naoufel.jpg deleted file mode 100644 index fc06685..0000000 Binary files a/content/images/assets/movie-1/naoufel.jpg and /dev/null differ diff --git a/content/images/assets/movie-1/recorder.jpg b/content/images/assets/movie-1/recorder.jpg deleted file mode 100644 index bc69422..0000000 Binary files a/content/images/assets/movie-1/recorder.jpg and /dev/null differ diff --git a/content/images/patreon-user.jpg b/content/images/patreon-user.jpg deleted file mode 100644 index 69dfcd7..0000000 Binary files a/content/images/patreon-user.jpg and /dev/null differ diff --git a/content/thumbnails/screen-2.svg b/content/thumbnails/screen-2.svg deleted file mode 100644 index bc8ff09..0000000 --- a/content/thumbnails/screen-2.svg +++ /dev/null @@ -1,58 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/content/thumbnails/star.svg b/content/thumbnails/star.svg new file mode 100644 index 0000000..b2eba26 --- /dev/null +++ b/content/thumbnails/star.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/data/SiteConfig.js b/data/SiteConfig.js index 5f07a2d..6f421dd 100644 --- a/data/SiteConfig.js +++ b/data/SiteConfig.js @@ -12,7 +12,7 @@ const config = { dateFromFormat: 'YYYY-MM-DD', dateFormat: 'MMMM Do, YYYY', userName: 'Siddharth', - userEmail: 'sydrawat@gmail.com', + userEmail: 'siddharth.rawat94@gmail.com', userTwitter: 'sydrawat', menuLinks: [ { @@ -24,8 +24,8 @@ const config = { link: '/blog/', }, { - name: 'Contact', - link: '/contact/', + name: 'Projects', + link: '/projects/', }, ], themeColor: '#C7A27C', // Used for setting manifest and progress theme colors. diff --git a/gatsby-config.js b/gatsby-config.js index d57a03a..1c0fb9b 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -83,14 +83,15 @@ module.exports = { background_color: config.backgroundColor, theme_color: config.themeColor, display: 'minimal-ui', + icon: 'static/logos/logo-1024.png', icons: [ { - src: '/logos/logo-512.png', + src: 'static/logos/logo-512.png', sizes: '512x512', type: 'image/png', }, { - src: '/logos/logo-1024.png', + src: 'static/logos/logo-1024.png', sizes: '1024x1024', type: 'image/png', }, diff --git a/package.json b/package.json index 75cc393..6efeadc 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "sydrawat", "description": "Sid's website built with Gatsby, React & GraphQL", - "version": "1.3.1", + "version": "1.3.2", "author": "Siddharth Rawat ", "dependencies": { "@mdx-js/mdx": "^1.6.5", diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer/Footer.jsx index 4ad4242..0ed7263 100644 --- a/src/components/Footer/Footer.jsx +++ b/src/components/Footer/Footer.jsx @@ -2,8 +2,9 @@ import React from 'react'; import { Link } from 'gatsby'; import netlify from '../../../content/images/netlify.png'; import gatsby from '../../../content/thumbnails/gatsby.png'; -import github from '../../../content/images/github.png'; -import ig from '../../../content/images/ig.svg'; +import github from '../../../content/thumbnails/github.svg'; +import mail from '../../../content/thumbnails/mail.svg'; +import linkedin from '../../../content/thumbnails/linkedin.svg'; import twitter from '../../../content/images/twitter.svg'; const Footer = () => { @@ -23,22 +24,25 @@ const Footer = () => { RSS -
+
GitHub - Netlify + LinkedIn + + + Mail { - const ratings = []; - for (let i = 1; i <= stars; i += 1) { - ratings.push(i); - } - return ( -
-
- - netflix - -
-
- {ratings.map(item => ( - rating - ))} -
-
- ); -}; -export default Rating; diff --git a/src/components/Navigation/Navigation.jsx b/src/components/Navigation/Navigation.jsx index c4d6c8b..a8462cc 100644 --- a/src/components/Navigation/Navigation.jsx +++ b/src/components/Navigation/Navigation.jsx @@ -1,6 +1,6 @@ import React, { Component } from 'react'; import { Link } from 'gatsby'; -import board from '../../images/stickie.svg'; +import stickie from '../../images/stickie.svg'; import sun from '../../images/sun.svg'; import moon from '../../images/moon.svg'; import ThemeContext from '../../context/ThemeContext'; @@ -41,7 +41,7 @@ export default class Navigation extends Component {
- MotherBoard + stickie Siddharth Rawat
diff --git a/src/data/projectList.js b/src/data/projectList.js new file mode 100644 index 0000000..19f8e4a --- /dev/null +++ b/src/data/projectList.js @@ -0,0 +1,48 @@ +const projectsList = [ + { + name: 'React Boilerplate', + date: '2021', + slug: 'react-boilerplate', + tagline: 'A free, open source React template with Redux Toolkit, TypeScript & React Router.', + url: 'https://boilerplate-react-ts.web.app/', + }, + { + name: 'React Pocket Notes', + date: '2021', + tagline: 'Pocket-sized notes for React, TypeScript & Redux Toolkit.', + url: 'https://sydrawat.gitbook.io/react/', + }, + { + name: "Bob's Burgers", + slug: 'bobs-burgers', + tagline: + "Bob's burgers is a simple burger builder app, that lets you sculpt your own burger by selecting individual ingredients. Includes Typescript with React Router and Redux Toolkit!", + url: 'https://bobs-burgers-f1443.web.app/', + }, + { + name: 'Bon-Apetit', + slug: 'bon-apetit', + tagline: + 'This web-app is focused on logging all your food hunting activites across the globe! Add reviews, comments and provide ratings to the restaurants. Built using TypeScript, NodeJS, MongoDB and ReactJS', + }, + { + name: 'Hyper Moonlite', + slug: 'hyper-moonlite', + tagline: 'Hyper term moonlite theme. Simple and easy to use.', + url: 'https://www.npmjs.com/package/hyper-moonlite', + }, + { + name: 'Firefox Moonlite', + slug: 'firefox-moonlite', + tagline: 'A minimal theme for FireFox, heavily resembles my terminal. Join the dark side.', + url: 'https://addons.mozilla.org/en-US/firefox/addon/hyper-ff-moonlite/', + }, + { + name: 'QR-WiFi', + slug: 'qrifi', + tagline: 'Generate a QR code for your WiFi!', + url: 'https://qr-ifi.web.app/', + }, +]; + +export default projectsList; diff --git a/src/pages/about.jsx b/src/pages/about.jsx index d30e9bc..58228a1 100644 --- a/src/pages/about.jsx +++ b/src/pages/about.jsx @@ -35,7 +35,7 @@ export default class Me extends Component {

Getting to know me

- I'm currently purusing my Master's degree in Information Systems from + I'm currently pursuing my Master's degree in Information Systems from Northeastern University, Boston.

diff --git a/src/pages/contact.jsx b/src/pages/contact.jsx index d836f6a..d1e92c1 100644 --- a/src/pages/contact.jsx +++ b/src/pages/contact.jsx @@ -7,7 +7,7 @@ import config from '../../data/SiteConfig'; import github from '../../content/thumbnails/github.svg'; import twitter from '../../content/images/twitter.svg'; import linkedin from '../../content/thumbnails/linkedin.svg'; -import mail from '../../content/thumbnails/mail.svg'; +import ig from '../../content/images/ig.svg'; import reddit from '../../content/thumbnails/reddit.svg'; export default class Contact extends Component { @@ -48,11 +48,11 @@ export default class Contact extends Component { Linkedin - Mail + instagram

diff --git a/src/pages/index.jsx b/src/pages/index.jsx index 2652c71..006fd57 100644 --- a/src/pages/index.jsx +++ b/src/pages/index.jsx @@ -71,8 +71,8 @@ const IndexPage = () => (
Sid
-

Sid

-

Northeastern '23

+

Siddharth Rawat

+

Northeastern '23

🍜 diff --git a/src/pages/projects.jsx b/src/pages/projects.jsx new file mode 100644 index 0000000..cde1338 --- /dev/null +++ b/src/pages/projects.jsx @@ -0,0 +1,98 @@ +import React, { useState, useEffect } from 'react'; +import Helmet from 'react-helmet'; +import { Link } from 'gatsby'; + +import projectsList from '../data/projectList'; + +import Layout from '../layout/index'; +import SEO from '../components/SEO/SEO'; +import config from '../../data/SiteConfig'; +// import takeNote from '../../content/thumbnails/tn.png'; +// import laconia from '../../content/images/laconiaproject.png'; +// import primitive from '../../content/images/primitiveproject.png'; +// import chip8 from '../../content/images/chip8project.png'; +// import newMoon from '../../content/images/new-moon.svg'; +// import keyboardAccordion from '../../content/images/keyboardaccordionlogo.png'; +// import github from '../assets/nav-github.png'; +import star from '../../content/thumbnails/star.svg'; + +export default function ProjectsIndex() { + const [repos, setRepos] = useState([]); + + useEffect(() => { + async function getStars() { + const repositories = await fetch( + 'https://api.github.com/users/sydrawat01/repos?per_page=100', + ); + + return repositories.json(); + } + + getStars() + .then(data => { + setRepos(data); + }) + .catch(err => console.log(err)); + }, []); + + return ( + + + + +

+
+
+

Projects

+

+ A few highlights of my open-source projects. View them all{' '} + on GitHub. +

+
+
+ +
+ {projectsList.map(project => ( +
+

{project.name}

+
+ {project.writeup && Write-up} + {project.slug && ( + + Source + + )} + {project.url && ( + + Demo + + )} +
+

{project.tagline}

+ +
+ ))} +
+
+ + ); +} diff --git a/src/styles/components/layout.scss b/src/styles/components/layout.scss index 8aa616d..b10b9a7 100644 --- a/src/styles/components/layout.scss +++ b/src/styles/components/layout.scss @@ -457,7 +457,7 @@ @media screen and (min-width: 1050px) { .posts:not(.simple) { - margin: 3rem 0 3rem -6rem; + margin: 3rem 0 3rem 0; } } @@ -902,7 +902,6 @@ blockquote { position: absolute; bottom: 1rem; right: 1.5rem; - // color: rgba(0, 0, 0, 0.6); margin-top: 1rem; font-size: 1.3rem; text-align: right; @@ -938,7 +937,6 @@ blockquote { } .note { - // border: 1px solid green; margin: 1.5rem; .note-container { @@ -1010,7 +1008,6 @@ blockquote { } .search { - // margin-bottom: 0; display: block; border: 2px solid #ccc; border-radius: 6px; @@ -1407,7 +1404,7 @@ button[disabled] { } } -// mdx code language tags +/* mdx code language tags */ .gatsby-highlight { position: relative; @@ -1483,7 +1480,7 @@ button[disabled] { color: black; } -// hand-wave +/* hand-wave */ .wave { cursor: pointer; display: inline-block; @@ -1505,4 +1502,112 @@ button[disabled] { 80% { transform: rotate( 15.0deg) } 90% { transform: rotate( -15.0deg) } 100% { transform: rotate( 15.0deg) } +} + +/* Projects Section*/ +.projects { + display: flex; + flex-direction: column; +} + +@media screen and (min-width: 600px) { + .projects { + display: grid; + grid-template-columns: repeat(auto-fill, 300px); + justify-content: center; + grid-gap: 2rem; + } +} + +.project { + border: 1px solid $light; + background: $light; + padding: 1.5rem; + display: flex; + flex-direction: column; + background: $light; + color: $font-color; + border-radius: 8px; + &:hover { + background: darken($light, 3%); + cursor: pointer; + } + align-items: center; + justify-content: space-around; +} + +.project h2 { + border-bottom: none; + font-size: 1.5rem; + text-align: center; + margin-bottom: 0; + align-items: center; + justify-content: center; +} + +.project img { + margin-top: 0.5rem; + max-width: 100%; + max-height: 100px; + height: auto; + object-fit: contain; +} + +.project .description { + font-size: 1.2rem; + line-height: 1.3; + margin: 1rem; + text-align: center; + align-items: center; + justify-content: center; + color: $light-font-color; + font-family: $font-family; +} + +.project .links { + display: flex; + gap: 0.5rem; + a { + margin: 1rem 0 0 0; + border: 3px solid transparent; + color: darken($light, 20%); + &:hover { + color: darken($light, 30%); + } + } +} + +.project .stars { + display: flex; + flex-direction: row; + width: 100%; + justify-content: center; + align-items: center; + gap: 0.75rem; + margin-top: auto; +} + +.project .stars img { + margin-top: 0; + max-width: 20px; +} + +@media screen and (max-width: 800px) { + .projects { + grid-template-columns: repeat(2, 50%); + grid-gap: 1rem; + } + + .project .links { + a { + margin: 0.2rem 0 0 0; + } + } + + .project .stars { + justify-content: center; + } + .project img { + max-height: 50px; + } } \ No newline at end of file diff --git a/src/styles/themes/dark.scss b/src/styles/themes/dark.scss index 0290f38..f7ef986 100644 --- a/src/styles/themes/dark.scss +++ b/src/styles/themes/dark.scss @@ -496,4 +496,22 @@ $dark-primary: $tag; path { stroke: $keyword; } -} \ No newline at end of file + .project { + border: 1px solid $accent; + background: $accent; + color: white; + &:hover { + background: darken($accent, 7%); + } + + .links { + a { + border: 3px solid transparent; + color: $dark-primary; + &:hover { + color: darken($dark-primary, 15%); + } + } + } + } +}