22 |
24 |
25 | );
26 | };
27 |
28 | export default Container;
29 |
--------------------------------------------------------------------------------
/src/components/Container/styles.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Container component styles.
3 | */
4 | import { Styles } from 'react-jss';
5 | import {
6 | breakpoints,
7 | midBlue,
8 | textLightBlue,
9 | textMid,
10 | mSize,
11 | } from '../../theme';
12 |
13 | export default {
14 | root: {
15 | maxWidth: '960px',
16 | padding: '0 20px',
17 | marginBottom: '200px',
18 | '& a:hover': {
19 | color: textMid,
20 | },
21 | '& li': {
22 | listStyle: 'square',
23 | },
24 | [`@media screen and (max-width: ${breakpoints.desktop})`]: {
25 | marginLeft: 0,
26 | },
27 | },
28 | content: {
29 | color: textLightBlue,
30 | fontSize: mSize,
31 | '& h3': {
32 | color: midBlue,
33 | },
34 | '& ul': {
35 | '& li': {
36 | paddingBottom: '4px',
37 | },
38 | [`@media screen and (max-width: ${breakpoints.desktop})`]: {
39 | paddingLeft: '20px',
40 | },
41 | },
42 | },
43 | } as Styles;
44 |
--------------------------------------------------------------------------------
/src/components/GHButton/index.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Generic GHButton component.
3 | */
4 | import React, { useState, useEffect } from 'react';
5 | import { useLocalStorageState } from '../../hooks';
6 | import ButtonLink, { ButtonLinkProps } from '../ButtonLink';
7 | import { LocalCache } from '../../models';
8 | import { buildRecordObject, isRecordUsable } from '../../utils';
9 |
10 | export interface GHButtonProps extends ButtonLinkProps {
11 | resource: {
12 | endpoint: string;
13 | attr: string;
14 | };
15 | }
16 |
17 | const GHButton: React.FC{children}
23 |
39 |
40 |
41 | );
42 | };
43 |
44 | export default ProgressBar;
45 |
--------------------------------------------------------------------------------
/src/components/SEO/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Helmet } from 'react-helmet';
3 | import metadata from '../../data/json/metadata.json';
4 |
5 | export interface SEOProps {
6 | title: string;
7 | description?: string;
8 | lang?: string;
9 | meta?: HTMLMetaElement[];
10 | }
11 |
12 | const SEO: React.FC
8 |
11 |
12 |
8 |
16 |
11 |
14 |
15 |
8 |
11 |
12 |
21 | {tabs.map((t) => (
22 | {t.mdFileName}
23 | ))}
24 |
25 | );
26 | };
27 |
28 | export default Explorer;
29 |
--------------------------------------------------------------------------------
/src/layouts/Main/components/Explorer/styles.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Explorer component styles.
3 | */
4 | import { Styles } from 'react-jss';
5 | import { widths, bgDarkBlue } from '../../../../theme';
6 |
7 | export default {
8 | root: {
9 | background: bgDarkBlue,
10 | height: '100vh',
11 | position: 'fixed',
12 | top: '0',
13 | left: widths.leftBar,
14 | width: widths.explorer,
15 | '& li': {
16 | listStyle: 'none',
17 | padding: '6px 12px',
18 | },
19 | },
20 | closed: {
21 | display: 'none',
22 | },
23 | } as Styles;
24 |
--------------------------------------------------------------------------------
/src/layouts/Main/components/Header/NavBar/NavItem/index.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * NavItem component.
3 | */
4 | import React from 'react';
5 | import { Link, navigate } from '@reach/router';
6 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
7 | import { createUseStyles } from 'react-jss';
8 | import { TabSpec, TabLink } from '../../../../../../models';
9 | import styles from './styles';
10 |
11 | const useStyles = createUseStyles(styles);
12 |
13 | const NavItem: React.FC
48 |
55 | );
56 | };
57 |
58 | export default LeftBar;
59 |
--------------------------------------------------------------------------------
/src/layouts/Main/components/LeftBar/styles.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * LeftBar component styles.
3 | */
4 | import { Styles } from 'react-jss';
5 | import Color from 'color';
6 | import { bgLightBlue, breakpoints, widths } from '../../../../theme';
7 |
8 | export default {
9 | root: {
10 | alignItems: 'center',
11 | background: bgLightBlue,
12 | display: 'flex',
13 | flexDirection: 'column',
14 | justifyContent: 'space-between',
15 | height: '100vh',
16 | position: 'fixed',
17 | left: '0',
18 | top: '0',
19 | width: `${widths.leftBar}px`,
20 | [`@media screen and (max-width: ${breakpoints.desktop})`]: {
21 | display: 'none',
22 | },
23 | '& div': {
24 | display: 'flex',
25 | alignItems: 'center',
26 | flexDirection: 'column',
27 | padding: '10px 0',
28 | },
29 | },
30 | divider: {
31 | height: '1px',
32 | background: Color(bgLightBlue).lighten(0.35).string(),
33 | width: '95%',
34 | marginTop: '4px',
35 | marginBottom: '12px',
36 | },
37 | } as Styles;
38 |
--------------------------------------------------------------------------------
/src/layouts/Main/components/StatusBar/index.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * StatusBar component.
3 | */
4 | import React from 'react';
5 | import { createUseStyles } from 'react-jss';
6 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
7 | import styles from './styles';
8 | import pkg from '../../../../../package.json';
9 |
10 | const useStyles = createUseStyles(styles);
11 |
12 | const StatusBar: React.FC = () => {
13 | const classes = useStyles();
14 |
15 | return (
16 |
36 | );
37 | };
38 |
39 | export default StatusBar;
40 |
--------------------------------------------------------------------------------
/src/layouts/Main/components/StatusBar/styles.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * StatusBar component styles.
3 | */
4 | import { Styles } from 'react-jss';
5 | import {
6 | bgDarkBlue,
7 | bgMidBlue,
8 | textLightBlue,
9 | sSize,
10 | sansFont,
11 | heights,
12 | } from '../../../../theme';
13 |
14 | export default {
15 | root: {
16 | bottom: '0',
17 | background: bgDarkBlue,
18 | display: 'flex',
19 | justifyContent: 'space-between',
20 | alignItems: 'center',
21 | fontFamily: sansFont,
22 | fontWeight: 400,
23 | left: '0',
24 | position: 'fixed',
25 | width: '100vw',
26 | height: heights.statusBar,
27 | '& span, & a': {
28 | display: 'inline-block',
29 | padding: '2px 8px',
30 | '&:hover': {
31 | background: bgMidBlue,
32 | cursor: 'pointer',
33 | },
34 | },
35 | },
36 | icon: {
37 | color: textLightBlue,
38 | },
39 | text: {
40 | color: textLightBlue,
41 | fontSize: sSize,
42 | padding: '0 4px',
43 | },
44 | } as Styles;
45 |
--------------------------------------------------------------------------------
/src/layouts/Main/index.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Main layout.
3 | */
4 | import React, { useState } from 'react';
5 | import { createUseStyles } from 'react-jss';
6 | import clsx from 'clsx';
7 | import Header from './components/Header';
8 | import LeftBar from './components/LeftBar';
9 | import Explorer from './components/Explorer';
10 | import StatusBar from './components/StatusBar';
11 | import { ContactItem, TabLink } from '../../models';
12 | import styles from './styles';
13 |
14 | const useStyles = createUseStyles(styles);
15 |
16 | export interface TabProps {
17 | tabs: TabLink[];
18 | }
19 |
20 | export interface ContactProps {
21 | contactData: ContactItem[];
22 | }
23 |
24 | export type MainLayoutProps = TabProps & ContactProps;
25 |
26 | const MainLayout: React.FC
49 | {renderData(internals)}
50 | {renderDivider()}
51 | {renderData(contactData)}
52 |
53 | {renderData(bottom)}
54 |
38 |
45 |
48 |
50 | );
51 | };
52 |
53 | export default MainLayout;
54 |
--------------------------------------------------------------------------------
/src/layouts/Main/styles.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Main layout styles.
3 | */
4 | import Color from 'color';
5 | import { Styles } from 'react-jss';
6 | import {
7 | bgMidBlue,
8 | textLightBlue,
9 | mSize,
10 | monoFont,
11 | breakpoints,
12 | widths,
13 | } from '../../theme';
14 |
15 | // Notice that it's an object containing
16 | // global "base" values for the rest of the app.
17 | export default {
18 | '@global': {
19 | html: {
20 | fontSize: '62.5%',
21 | },
22 | body: {
23 | fontFamily: monoFont,
24 | fontSize: mSize,
25 | background: bgMidBlue,
26 | boxSizing: 'border-box',
27 | },
28 | button: {
29 | cursor: 'pointer',
30 | '&:disabled': {
31 | cursor: 'default',
32 | },
33 | },
34 | a: {
35 | color: textLightBlue,
36 | textDecoration: 'none',
37 | transition: 'color 500ms ease',
38 | '&:visited': {
39 | color: Color(textLightBlue).darken(0.1).string(),
40 | },
41 | },
42 | '.color-transform': {
43 | transform: 'color 500ms ease',
44 | },
45 | },
46 | root: {
47 | position: 'absolute',
48 | height: '100vh',
49 | width: `calc(100% - ${widths.leftBar}px)`,
50 | padding: 0,
51 | margin: 0,
52 | },
53 | content: {
54 | position: 'relative',
55 | top: 0,
56 | left: `${widths.leftBar}px`,
57 | right: 0,
58 | width: '100%',
59 | [`@media screen and (max-width: ${breakpoints.desktop})`]: {
60 | left: '0',
61 | },
62 | },
63 | explorerOpen: {
64 | left: `${widths.leftBar + widths.explorer}px`,
65 | },
66 | } as Styles;
67 |
--------------------------------------------------------------------------------
/src/models/ContactItem.ts:
--------------------------------------------------------------------------------
1 | import { Linkable } from './Linkable';
2 |
3 | export interface ContactItem extends Linkable {
4 | name: string;
5 | icon: string | string[];
6 | url: string;
7 | isMain?: boolean;
8 | badge?: any;
9 | }
10 |
--------------------------------------------------------------------------------
/src/models/DetailsPanel.ts:
--------------------------------------------------------------------------------
1 | export interface DetailsPanel {
2 | showDetails?: boolean;
3 | }
4 |
--------------------------------------------------------------------------------
/src/models/DiplomaTypes.ts:
--------------------------------------------------------------------------------
1 | export declare namespace DiplomaTypes {
2 | export interface Metadata {
3 | title: string;
4 | subtitle?: string;
5 | info?: string;
6 | }
7 | export interface Section {
8 | title: string;
9 | url: string;
10 | progress: {
11 | completed: number;
12 | total: number;
13 | };
14 | }
15 |
16 | export interface Course {
17 | courseName: string;
18 | sections: Section[];
19 | isOptional?: boolean;
20 | }
21 |
22 | export interface Semester {
23 | name: string;
24 | dates: {
25 | start: string;
26 | end: string;
27 | };
28 | courses: Course[];
29 | }
30 |
31 | export interface Curriculum {
32 | metadata: Metadata;
33 | semesters: Semester[];
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/src/models/Linkable.ts:
--------------------------------------------------------------------------------
1 | export interface Linkable {
2 | name: string;
3 | url: string;
4 | isInternal?: boolean;
5 | }
6 |
--------------------------------------------------------------------------------
/src/models/LocalCache.ts:
--------------------------------------------------------------------------------
1 | export declare namespace LocalCache {
2 | export interface Record
25 | ![]()
30 |
31 | `;
32 |
33 | const progress = calculateSectionProgress(section);
34 | const progressText = `${progress}% done`;
35 |
36 | return (
37 |
35 |
36 | {courseName}
37 |
39 |
45 | );
46 | };
47 |
48 | export default Course;
49 |
--------------------------------------------------------------------------------
/src/views/Diploma/components/Semester/Course/styles.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Course component styles.
3 | */
4 | import { Styles } from 'react-jss';
5 |
6 | export default {
7 | courseDetails: {
8 | marginLeft: '20px',
9 | marginTop: '10px',
10 | },
11 | optional: {
12 | opacity: 0.7,
13 | },
14 | bookPanel: {
15 | marginLeft: '20px',
16 | marginTop: '6px',
17 | paddingBottom: '10px',
18 | },
19 | } as Styles;
20 |
--------------------------------------------------------------------------------
/src/views/Diploma/components/Semester/index.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Semester component.
3 | */
4 | import React from 'react';
5 | import { createUseStyles } from 'react-jss';
6 | import { DetailsPanel, DiplomaTypes } from '../../../../models';
7 | import {
8 | calculateSemesterProgress,
9 | formatDate,
10 | isOverDue,
11 | } from '../../../../utils';
12 | import Course from './Course';
13 | import styles from './styles';
14 |
15 | const useStyles = createUseStyles(styles);
16 |
17 | export interface SemesterProps extends DetailsPanel {
18 | semesterData: DiplomaTypes.Semester;
19 | showOptionalCourses?: boolean;
20 | }
21 |
22 | const Semester: React.FC
36 | {courseName}
37 |
39 |
40 | {sections.map((section) => (
41 |
42 | ))}
43 |
44 |
43 |
55 | );
56 | };
57 |
58 | export default Semester;
59 |
--------------------------------------------------------------------------------
/src/views/Diploma/components/Semester/styles.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Semester component styles.
3 | */
4 | import { Styles } from 'react-jss';
5 | import { orange, bgDarkBlue, sSize } from '../../../../theme';
6 |
7 | export default {
8 | root: {
9 | // marginTop: '10px',
10 | marginBottom: '10px',
11 | },
12 | overDue: {
13 | marginLeft: '10px',
14 | padding: '2px 4px',
15 | fontSize: sSize,
16 | fontWeight: '700',
17 | textTransform: 'uppercase',
18 | backgroundColor: orange,
19 | color: bgDarkBlue,
20 | borderRadius: '8px',
21 | },
22 | } as Styles;
23 |
--------------------------------------------------------------------------------
/src/views/Diploma/index.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Diploma component.
3 | */
4 | import React from 'react';
5 | import { createUseStyles } from 'react-jss';
6 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
7 | import ReactTooltip from 'react-tooltip';
8 | import Container from '../../components/Container';
9 | import Semester from './components/Semester';
10 | import { DiplomaTypes } from '../../models';
11 | import styles from './styles';
12 |
13 | const useStyles = createUseStyles(styles);
14 |
15 | export interface DiplomaProps {
16 | diplomaData: DiplomaTypes.Curriculum;
17 | }
18 |
19 | const Diploma: React.FC44 | 45 | {name} 46 | {overDue && overdue} 47 | 48 |
49 | {courses 50 | .filter((course) => showOptionalCourses || !course.isOptional) 51 | .map((course) => ( 52 |
33 |
37 | {title}
34 |{subtitle}
} 36 |
38 | {semesters.map((s) => (
39 |
42 |
56 |
73 | );
74 | };
75 |
76 | export default MainButtons;
77 |
--------------------------------------------------------------------------------
/src/views/Greeter/components/MainButtons/styles.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * MainButtons component styles.
3 | */
4 | import { Styles } from 'react-jss';
5 |
6 | export default {
7 | root: {
8 | display: 'flex',
9 | flexDirection: 'column',
10 | marginTop: '50px',
11 | '& div': {
12 | display: 'flex',
13 | alignItems: 'center',
14 | justifyContent: 'center',
15 | },
16 | },
17 | } as Styles;
18 |
--------------------------------------------------------------------------------
/src/views/Greeter/index.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Greeter component.
3 | */
4 | import React, { useEffect } from 'react';
5 | import Typed from 'typed.js';
6 | import { createUseStyles } from 'react-jss';
7 | import MainButtons, { MainButtonsProps } from './components/MainButtons';
8 | import SEO from '../../components/SEO';
9 | import { Static } from '../../models';
10 | import { randomHello } from '../../utils';
11 | import styles from './styles';
12 |
13 | const useStyles = createUseStyles(styles);
14 |
15 | export interface GreeterProps extends MainButtonsProps {
16 | staticData: Static;
17 | }
18 |
19 | const Greeter: React.FC
57 | {ghButtons.map((btn) => (
58 |
61 |
62 | {mainContact && (
63 |
72 | {staticData.mainLine}
51 |
52 |
53 |
54 | 11 | Hi! I'm Çağlar. 12 |
13 |
16 |
20 |
26 |
27 |
30 |
104 |
105 |
106 |