{data.degree}
13 |14 | {data.school}, {data.year} 15 |
16 |
17 |
19 |
13 |
14 |
21 | );
22 |
23 | export default Experience;
24 |
--------------------------------------------------------------------------------
/src/components/Resume/Education.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import type { Degree as DegreeType } from '@/data/resume/degrees';
4 |
5 | import Degree from './Education/Degree';
6 |
7 | interface EducationProps {
8 | data: DegreeType[];
9 | }
10 |
11 | const Education: React.FC
15 |
17 | {data.map((job) => (
18 | Experience
16 |
13 |
14 |
21 | );
22 |
23 | export default Education;
24 |
--------------------------------------------------------------------------------
/src/static/css/layout/_footer.scss:
--------------------------------------------------------------------------------
1 | ///
2 | /// Future Imperfect by HTML5 UP
3 | /// html5up.net | @ajlkn
4 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
5 | ///
6 |
7 | /* Footer */
8 |
9 | #footer {
10 | .icons {
11 | color: _palette(fg-light);
12 | }
13 |
14 | .copyright {
15 | color: _palette(fg-light);
16 | font-family: _font(family-heading);
17 | font-size: 0.5em;
18 | font-weight: _font(weight-heading);
19 | letter-spacing: _font(kerning-heading);
20 | text-transform: uppercase;
21 | }
22 |
23 | body.single & {
24 | text-align: center;
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/src/components/Stats/TableRow.tsx:
--------------------------------------------------------------------------------
1 | import React, { isValidElement } from 'react';
2 |
3 | import { TableRowProps } from './types';
4 |
5 | const TableRow: React.FC
15 |
17 | {data.map((degree) => (
18 | Education
16 |
13 |
24 | );
25 | }
26 |
--------------------------------------------------------------------------------
/src/static/css/components/_hamburger.scss:
--------------------------------------------------------------------------------
1 | // Not found page
2 |
3 | .bm-item-list {
4 | margin-top: 0;
5 | }
6 |
7 | .menu-hover {
8 | padding: 0 1em;
9 | }
10 |
11 | .menu-hover:hover {
12 | opacity: 0.5;
13 | }
14 |
15 | .hamburger-ul {
16 | display: block;
17 |
18 | li a h3 {
19 | border: 0;
20 | border-top: dotted 1px _palette(border);
21 | margin: 1.5em 0 0 0;
22 | padding: 1.5em 0 0 0;
23 | }
24 |
25 | li a h3:hover {
26 | color: _palette(accent);
27 | }
28 |
29 | li {
30 | display: block !important;
31 | }
32 |
33 | h3 {
34 | font-size: 0.7em;
35 | }
36 |
37 | .index-li {
38 | border-top: none;
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/src/components/Resume/Courses/Course.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import type { Course as CourseType } from '@/data/resume/courses';
4 |
5 | interface CourseProps {
6 | data: CourseType;
7 | last?: boolean;
8 | }
9 |
10 | const Course: React.FC
14 |
15 |
16 |
20 | Return Home
21 |
22 |
23 | {data.number}:
14 |{data.title}
15 | 16 | {!last && ( 17 |
18 |
20 | )}
21 | •
19 |{children}
27 | {!fullPage &&
21 |
26 | 22 | About Me 23 |
24 |(in about {count(aboutMarkdown)} words)
25 |
21 |
25 | 22 | Stats 23 |
24 |
14 |
15 |
16 |
23 |
24 |
30 |
31 | );
32 |
33 | export default Cell;
34 |
--------------------------------------------------------------------------------
/src/static/css/libs/_functions.scss:
--------------------------------------------------------------------------------
1 | /// Gets a duration value.
2 | /// @param {string} $keys Key(s).
3 | /// @return {string} Value.
4 | @function _duration($keys...) {
5 | @return val($duration, $keys...);
6 | }
7 |
8 | /// Gets a font value.
9 | /// @param {string} $keys Key(s).
10 | /// @return {string} Value.
11 | @function _font($keys...) {
12 | @return val($font, $keys...);
13 | }
14 |
15 | /// Gets a misc value.
16 | /// @param {string} $keys Key(s).
17 | /// @return {string} Value.
18 | @function _misc($keys...) {
19 | @return val($misc, $keys...);
20 | }
21 |
22 | /// Gets a palette value.
23 | /// @param {string} $keys Key(s).
24 | /// @return {string} Value.
25 | @function _palette($keys...) {
26 | @return val($palette, $keys...);
27 | }
28 |
29 | /// Gets a size value.
30 | /// @param {string} $keys Key(s).
31 | /// @return {string} Value.
32 | @function _size($keys...) {
33 | @return val($size, $keys...);
34 | }
35 |
--------------------------------------------------------------------------------
/src/static/css/layout/_wrapper.scss:
--------------------------------------------------------------------------------
1 | ///
2 | /// Future Imperfect by HTML5 UP
3 | /// html5up.net | @ajlkn
4 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
5 | ///
6 |
7 | /* Wrapper */
8 |
9 | #wrapper {
10 | @include vendor('display', 'flex');
11 | @include vendor('flex-direction', 'row-reverse');
12 | @include vendor('transition', 'opacity #{_duration(menu)} ease');
13 | margin: 0 auto;
14 | max-width: 100%;
15 | opacity: 1;
16 | padding: (_size(section-spacing) * 1.5);
17 | width: 90em;
18 |
19 | body.is-menu-visible & {
20 | opacity: 0.15;
21 | }
22 |
23 | @include breakpoint(xlarge) {
24 | padding: _size(section-spacing);
25 | }
26 |
27 | @include breakpoint(large) {
28 | display: block;
29 | }
30 |
31 | @include breakpoint(small) {
32 | padding: _size(section-spacing-small);
33 | }
34 |
35 | body.single & {
36 | display: block;
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/src/static/css/components/_table.scss:
--------------------------------------------------------------------------------
1 | ///
2 | /// Future Imperfect by HTML5 UP
3 | /// html5up.net | @ajlkn
4 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
5 | ///
6 |
7 | /* Table */
8 |
9 | table {
10 | margin: 0 0 _size(element-margin) 0;
11 | width: 100%;
12 |
13 | tbody {
14 | tr {
15 | border: solid 1px _palette(border);
16 | border-left: 0;
17 | border-right: 0;
18 |
19 | &:nth-child(2n + 1) {
20 | background-color: _palette(border-bg);
21 | }
22 | }
23 | }
24 |
25 | td {
26 | padding: 0.75em 0.75em;
27 | }
28 |
29 | th {
30 | color: _palette(fg-bold);
31 | font-size: 0.9em;
32 | font-weight: _font(weight-bold);
33 | padding: 0 0.75em 0.75em 0.75em;
34 | text-align: left;
35 | }
36 |
37 | thead {
38 | border-bottom: solid 2px _palette(border);
39 | }
40 |
41 | tfoot {
42 | border-top: solid 2px _palette(border);
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/src/components/Template/Navigation.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import Link from 'next/link';
4 | import React from 'react';
5 |
6 | import routes from '../../data/routes';
7 | import Hamburger from './Hamburger';
8 |
9 | // Websites Navbar, displays routes defined in 'src/data/routes'
10 | const Navigation: React.FC = () => (
11 | 17 | {data.title} 18 |
19 | 22 |
27 |
29 | {data.desc}
28 |13 | {routes 14 | .filter((l) => l.index) 15 | .map((l) => ( 16 | 17 | {l.label} 18 | 19 | ))} 20 |
21 | 32 |
21 |
26 | 22 | Projects 23 |
24 |A selection of projects that I'm not too ashamed of
25 |
21 |
25 | 22 | Contact 23 |
24 |
27 |
30 | Feel free to get in touch. You can email me at:
28 |
27 |
33 | );
34 | };
35 |
36 | export default SkillBar;
37 |
--------------------------------------------------------------------------------
/public/images/favicon/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "mldangelo.com",
3 | "icons": [
4 | {
5 | "src": "/images/favicon/android-icon-36x36.png",
6 | "sizes": "36x36",
7 | "type": "image/png",
8 | "density": "0.75"
9 | },
10 | {
11 | "src": "/images/favicon/android-icon-48x48.png",
12 | "sizes": "48x48",
13 | "type": "image/png",
14 | "density": "1.0"
15 | },
16 | {
17 | "src": "/images/favicon/android-icon-72x72.png",
18 | "sizes": "72x72",
19 | "type": "image/png",
20 | "density": "1.5"
21 | },
22 | {
23 | "src": "/images/favicon/android-icon-96x96.png",
24 | "sizes": "96x96",
25 | "type": "image/png",
26 | "density": "2.0"
27 | },
28 | {
29 | "src": "/images/favicon/android-icon-144x144.png",
30 | "sizes": "144x144",
31 | "type": "image/png",
32 | "density": "3.0"
33 | },
34 | {
35 | "src": "/images/favicon/android-icon-192x192.png",
36 | "sizes": "192x192",
37 | "type": "image/png",
38 | "density": "4.0"
39 | }
40 | ]
41 | }
42 |
--------------------------------------------------------------------------------
/src/components/__tests__/ContactIcons.test.tsx:
--------------------------------------------------------------------------------
1 | import { render, screen } from '@testing-library/react';
2 | import React from 'react';
3 |
4 | import ContactIcons from '../Contact/ContactIcons';
5 |
6 | describe('ContactIcons', () => {
7 | it('renders contact icons', () => {
8 | render(
28 | {title}
29 |
30 |
31 | {competency} / 5
32 |
31 |
32 |
37 | );
38 |
39 | export default Courses;
40 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2023 Michael D'Angelo
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/src/data/stats/personal.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import React, { useEffect, useState } from 'react';
4 |
5 | import { StatData } from '../../components/Stats/types';
6 |
7 | const Age: React.FC = () => {
8 | const [age, setAge] = useState
33 |
35 | Selected Courses
34 |- {getRows(data)}
45 |
47 |
48 | );
49 | };
50 |
51 | export default Stats;
52 |
--------------------------------------------------------------------------------
/src/static/css/layout/_intro.scss:
--------------------------------------------------------------------------------
1 | ///
2 | /// Future Imperfect by HTML5 UP
3 | /// html5up.net | @ajlkn
4 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
5 | ///
6 |
7 | /* Intro */
8 |
9 | #intro {
10 | .logo {
11 | border-bottom: 0;
12 | display: inline-block;
13 | margin: 0 0 (_size(element-margin) * 0.5) 0;
14 | overflow: hidden;
15 | position: relative;
16 |
17 | img {
18 | width: 10em;
19 | height: 10em;
20 | object-fit: cover;
21 | border-radius: 50%;
22 | display: block;
23 | }
24 | }
25 |
26 | header {
27 | h2 {
28 | font-size: 1.5em;
29 | font-weight: _font(weight-heading-extrabold);
30 | }
31 |
32 | p {
33 | font-size: 0.8em;
34 | }
35 | }
36 |
37 | @include breakpoint(large) {
38 | margin: 0 0 _size(section-spacing) 0;
39 | text-align: center;
40 |
41 | header {
42 | h2 {
43 | font-size: 2em;
44 | }
45 |
46 | p {
47 | font-size: 0.7em;
48 | }
49 | }
50 | }
51 |
52 | @include breakpoint(small) {
53 | margin: 0 0 _size(section-spacing-small) 0;
54 | padding: 1.25em 0;
55 |
56 | > :last-child {
57 | margin-bottom: 0;
58 | }
59 |
60 | .logo {
61 | margin: 0 0 (_size(element-margin) * 0.25) 0;
62 | }
63 |
64 | header {
65 | h2 {
66 | font-size: 1.25em;
67 | }
68 |
69 | > :last-child {
70 | margin-bottom: 0;
71 | }
72 | }
73 | }
74 | }
75 |
--------------------------------------------------------------------------------
/app/page.tsx:
--------------------------------------------------------------------------------
1 | import type { Metadata } from 'next';
2 | import Link from 'next/link';
3 | import React from 'react';
4 |
5 | import PageWrapper from './components/PageWrapper';
6 |
7 | export const metadata: Metadata = {
8 | description:
9 | 'Co-founder & CTO building LLM security tools. Previously VP Engineering, YC alum, Stanford ICME.',
10 | };
11 |
12 | export default function HomePage() {
13 | return (
14 | Some stats about this site
46 |
18 |
26 | 19 | About this site 20 |
21 |22 | A beautiful, responsive, statically-generated, react application 23 | written with modern TypeScript. 24 |
25 |28 | {' '} 29 | Welcome to my website. Please feel free to read more{' '} 30 | about me, or you can check out my{' '} 31 | resume,{' '} 32 | projects, view{' '} 33 | site statistics, or{' '} 34 | contact me. 35 |
36 |37 | {' '} 38 | Source available{' '} 39 | here. 40 |
41 |18 | {name} - {position} 19 |
20 |21 | {' '} 22 | {dayjs(startDate).format('MMMM YYYY')} -{' '} 23 | {endDate ? dayjs(endDate).format('MMMM YYYY') : 'PRESENT'} 24 |
25 |-
49 | {highlights.map((highlight) => (
50 |
- {highlight} 51 | ))} 52 |
16 |
33 | }>
34 |
48 |
49 | );
50 | };
51 |
52 | export default Hamburger;
53 |
--------------------------------------------------------------------------------
/src/data/stats/site.ts:
--------------------------------------------------------------------------------
1 | import dayjs from 'dayjs';
2 |
3 | import { StatData } from '../../components/Stats/types';
4 |
5 | /* Keys match keys returned by the github api. Fields without keys are
6 | * mostly jokes. To see everything returned by the github api, run:
7 | curl https://api.github.com/repos/mldangelo/personal-site
8 | */
9 | const data: StatData[] = [
10 | {
11 | label: 'Stars this repository has on github',
12 | key: 'stargazers_count',
13 | link: 'https://github.com/mldangelo/personal-site/stargazers',
14 | },
15 | {
16 | label: 'Number of people watching this repository',
17 | key: 'subscribers_count',
18 | link: 'https://github.com/mldangelo/personal-site/stargazers',
19 | },
20 | {
21 | label: 'Number of forks',
22 | key: 'forks',
23 | link: 'https://github.com/mldangelo/personal-site/network',
24 | },
25 | {
26 | label: 'Number of spoons',
27 | value: '0',
28 | },
29 | {
30 | label: 'Number of linter warnings',
31 | value: '0', // enforced via github workflow
32 | },
33 | {
34 | label: 'Open github issues',
35 | key: 'open_issues_count',
36 | link: 'https://github.com/mldangelo/personal-site/issues',
37 | },
38 | {
39 | label: 'Last updated at',
40 | key: 'pushed_at',
41 | link: 'https://github.com/mldangelo/personal-site/commits',
42 | format: (x: unknown) => dayjs(x as string).format('MMMM DD, YYYY'),
43 | },
44 | {
45 | // TODO update this with a pre-commit hook
46 | /* find . | grep ".js" | grep -vE ".min.js|node_modules|.git|.json" |
47 | xargs -I file cat file | wc -l */
48 | label: 'Lines of TypeScript powering this website',
49 | value: '2279',
50 | link: 'https://github.com/mldangelo/personal-site/graphs/contributors',
51 | },
52 | ];
53 |
54 | export default data;
55 |
--------------------------------------------------------------------------------
/src/static/css/main.scss:
--------------------------------------------------------------------------------
1 | @import-normalize;
2 |
3 | @import 'libs/vars';
4 | @import 'libs/functions';
5 | @import 'libs/mixins';
6 | @import 'libs/skel';
7 |
8 | // NOTE: This import was moved into index.html template
9 | // @import url('//fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Raleway:400,800,900');
10 |
11 | /*
12 | Future Imperfect by HTML5 UP
13 | html5up.net | @ajlkn
14 | Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
15 | */
16 |
17 | @include skel-breakpoints(
18 | (
19 | xlarge: '(max-width: 1680px)',
20 | large: '(max-width: 1280px)',
21 | medium: '(max-width: 980px)',
22 | small: '(max-width: 736px)',
23 | xsmall: '(max-width: 480px)',
24 | )
25 | );
26 |
27 | @include skel-layout(
28 | (
29 | reset: 'full',
30 | boxModel: 'border',
31 | grid: (
32 | gutters: 1em,
33 | ),
34 | )
35 | );
36 |
37 | // Base.
38 |
39 | @import 'base/page';
40 | @import 'base/typography';
41 |
42 | // Component.
43 |
44 | @import 'components/author';
45 | @import 'components/blurb';
46 | @import 'components/box';
47 | @import 'components/button';
48 | @import 'components/form';
49 | @import 'components/icon';
50 | @import 'components/image';
51 | @import 'components/list';
52 | @import 'components/mini-post';
53 | @import 'components/post';
54 | @import 'components/section';
55 | @import 'components/table';
56 | @import 'components/hamburger';
57 | @import 'components/markdown';
58 |
59 | // Layout.
60 |
61 | @import 'layout/header';
62 | @import 'layout/wrapper';
63 | @import 'layout/main';
64 | @import 'layout/sidebar';
65 | @import 'layout/intro';
66 | @import 'layout/footer';
67 | @import 'layout/menu';
68 |
69 | @import 'pages/contact';
70 | @import 'pages/notFound';
71 | @import 'pages/resume';
72 | @import 'pages/skills';
73 | @import 'pages/stats';
74 |
--------------------------------------------------------------------------------
/src/static/css/components/_button.scss:
--------------------------------------------------------------------------------
1 | ///
2 | /// Future Imperfect by HTML5 UP
3 | /// html5up.net | @ajlkn
4 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
5 | ///
6 |
7 | /* Button */
8 |
9 | input[type='submit'],
10 | input[type='reset'],
11 | input[type='button'],
12 | button,
13 | .button {
14 | @include vendor('appearance', 'none');
15 | @include vendor(
16 | 'transition',
17 | (
18 | 'background-color #{_duration(transition)} ease',
19 | 'box-shadow #{_duration(transition)} ease',
20 | 'color #{_duration(transition)} ease'
21 | )
22 | );
23 | background-color: transparent;
24 | border: 0;
25 | box-shadow: inset 0 0 0 1px _palette(border);
26 | color: _palette(fg-bold) !important;
27 | cursor: pointer;
28 | display: inline-block;
29 | font-family: _font(family-heading);
30 | font-size: 0.6em;
31 | font-weight: _font(weight-heading-bold);
32 | height: _size(element-height) * 1.75;
33 | letter-spacing: _font(kerning-heading);
34 | line-height: _size(element-height) * 1.75;
35 | padding: 0 2.5em;
36 | text-align: center;
37 | text-decoration: none;
38 | text-transform: uppercase;
39 | white-space: nowrap;
40 |
41 | &:hover {
42 | box-shadow: inset 0 0 0 1px _palette(accent);
43 | color: _palette(accent) !important;
44 |
45 | &:active {
46 | background-color: rgba(_palette(accent), 0.05);
47 | }
48 | }
49 |
50 | &:before,
51 | &:after {
52 | color: _palette(fg-light);
53 | position: relative;
54 | }
55 |
56 | &:before {
57 | left: -1em;
58 | padding: 0 0 0 0.75em;
59 | }
60 |
61 | &:after {
62 | left: 1em;
63 | padding: 0 0.75em 0 0;
64 | }
65 |
66 | &.disabled,
67 | &:disabled {
68 | @include vendor('pointer-events', 'none');
69 | color: _palette(border) !important;
70 |
71 | &:before {
72 | color: _palette(border) !important;
73 | }
74 | }
75 | }
76 |
--------------------------------------------------------------------------------
/src/data/projects.ts:
--------------------------------------------------------------------------------
1 | export interface Project {
2 | title: string;
3 | subtitle?: string;
4 | link?: string;
5 | image: string;
6 | date: string;
7 | desc: string;
8 | }
9 |
10 | const data: Project[] = [
11 | {
12 | title: 'Nearest Dollar',
13 | subtitle: '2015 BVP Hackathon',
14 | image: '/images/projects/nearestdollar.jpg',
15 | date: '2015-11-20',
16 | desc:
17 | 'Built for a social impact hackathon. ' +
18 | 'NearestDollar connected to your bank accounts, credit cards, ' +
19 | 'or debit cards and rounded up your purchases to donate the balance to ' +
20 | 'the charity of your choice.',
21 | },
22 | {
23 | title: 'Harvest',
24 | subtitle: 'Won 3rd. place in 2015 Techcrunch Disrupt SF Hackathon',
25 | link: 'https://devpost.com/software/harvest',
26 | image: '/images/projects/harvest.jpg',
27 | date: '2015-09-20',
28 | desc:
29 | 'Won ~ $7000 in prizes for an advanced, low cost monitoring solution ' +
30 | 'for crops. Harvest was designed to catch irrigation leaks, overwatering, ' +
31 | 'and nutrient deficiencies at an affordable price for the developing world.',
32 | },
33 | {
34 | title: 'Space Potato',
35 | subtitle: 'A kickstarter funded potato powered weather balloon.',
36 | link: 'http://www.spacepotato.org',
37 | image: '/images/projects/spacepotato.jpg',
38 | date: '2015-06-28',
39 | desc:
40 | 'Launched a potato battery powered weather balloon with two cameras ' +
41 | 'and gps transponder. Resulting photos were published in a coffee table book. ' +
42 | 'You can email me for a copy.',
43 | },
44 | {
45 | title: 'Cat Detector',
46 | subtitle: 'A convolutional neural network to classify cats! (and dogs)',
47 | image: '/images/projects/catdetector.jpg',
48 | date: '2015-05-15',
49 | desc:
50 | 'Trained a convolutional neural network to classify between ~ 80 cats breeds. ' +
51 | 'Over 60,000 cats were classified before server bills made the project too expensive ' +
52 | 'to continue hosting.',
53 | },
54 | ];
55 |
56 | export default data;
57 |
--------------------------------------------------------------------------------
/src/components/Template/SideBar.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import Image from 'next/image';
4 | import Link from 'next/link';
5 | import { usePathname } from 'next/navigation';
6 | import React from 'react';
7 |
8 | import ContactIcons from '../Contact/ContactIcons';
9 |
10 | const SideBar: React.FC = () => {
11 | const pathname = usePathname();
12 |
13 | return (
14 |
66 | );
67 | };
68 |
69 | export default SideBar;
70 |
--------------------------------------------------------------------------------
/jest.config.ts:
--------------------------------------------------------------------------------
1 | import type { Config } from '@jest/types';
2 | import nextJest from 'next/jest.js';
3 |
4 | const createJestConfig = nextJest({
5 | // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
6 | dir: './',
7 | });
8 |
9 | // Add any custom config to be passed to Jest
10 | const config: Config.InitialProjectOptions = {
11 | // Use SWC for transformations
12 | transform: {
13 | '^.+\\.(t|j)sx?$': [
14 | '@swc/jest',
15 | {
16 | jsc: {
17 | parser: {
18 | syntax: 'typescript',
19 | tsx: true,
20 | decorators: true,
21 | },
22 | transform: {
23 | react: {
24 | runtime: 'automatic',
25 | },
26 | },
27 | target: 'es2021',
28 | },
29 | },
30 | ] as [string, any],
31 | },
32 |
33 | // Add more setup options before each test is run
34 | setupFilesAfterEnv: ['-
36 | {routes.map((l) => (
37 |
-
38 | setOpen(!open)}>
39 |
40 | {l.label} 41 |
42 | 43 |
44 | ))}
45 |
33 |
42 | Resume
34 |
35 | {sections.map((section) => (
36 |
41 | 37 | {section.name} 38 |
39 | ))} 40 |
80 |
83 |
95 |
96 |
102 | );
103 | };
104 |
105 | export default Skills;
106 |
--------------------------------------------------------------------------------
/src/static/css/pages/_resume.scss:
--------------------------------------------------------------------------------
1 | /* Resume */
2 |
3 | // The resume page uses the .post wrapper for consistent styling
4 | #resume {
5 | // Navigation section inside header
6 | .link-container {
7 | padding-top: 1em;
8 |
9 | h4 {
10 | text-decoration: none;
11 | border-bottom: none;
12 | display: inline-flex;
13 |
14 | a {
15 | padding: 0 0.5em;
16 | margin: 0;
17 | }
18 | }
19 | }
20 |
21 | // Common section styles
22 | .education,
23 | .experience,
24 | .skills,
25 | .courses,
26 | .references {
27 | .title {
28 | text-align: center;
29 | margin-bottom: 2em;
30 | }
31 | }
32 |
33 | // Experience section
34 | .experience {
35 | .title {
36 | text-align: center;
37 | }
38 | }
39 |
40 | .jobs-container {
41 | margin-bottom: 2em;
42 |
43 | .points {
44 | li {
45 | margin: 0;
46 | padding: 0;
47 | font-size: 0.9em;
48 | }
49 | }
50 | }
51 |
52 | // Courses section
53 | .courses {
54 | padding-top: 1.6em;
55 |
56 | .title {
57 | text-align: center;
58 | }
59 |
60 | .course-list {
61 | text-align: center;
62 |
63 | h4 {
64 | white-space: nowrap;
65 | }
66 | }
67 | }
68 |
69 | // Skills section
70 | .skills {
71 | margin-top: 2em;
72 |
73 | .title {
74 | text-align: center;
75 |
76 | p {
77 | font-size: 0.9em;
78 | }
79 | }
80 | }
81 |
82 | // Summary text in experience
83 | .summary {
84 | margin-bottom: 0.5em;
85 | font-size: 0.9em;
86 |
87 | // Override any code block styling from markdown
88 | code,
89 | pre {
90 | background: none;
91 | border: none;
92 | padding: 0;
93 | margin: 0;
94 | font-family: inherit;
95 | font-size: inherit;
96 | }
97 |
98 | pre code {
99 | display: inline;
100 | line-height: inherit;
101 | }
102 | }
103 |
104 | // References section
105 | .references {
106 | margin: 2em 0;
107 |
108 | .title {
109 | text-align: center;
110 | }
111 | }
112 |
113 | // Anchor links
114 | .link-to {
115 | position: relative;
116 | top: -4.5em;
117 | }
118 | }
119 |
120 | // Date ranges
121 | .daterange {
122 | margin-bottom: 0.2em;
123 | }
124 |
125 | // Education degrees
126 | .degree-container {
127 | h4 {
128 | font-weight: normal;
129 | }
130 |
131 | .degree {
132 | margin-bottom: 0.1em;
133 | text-transform: none;
134 | letter-spacing: 0.16em;
135 | font-size: 0.8em;
136 | }
137 |
138 | .school {
139 | text-transform: none;
140 | padding-top: 0.3em;
141 | margin-bottom: 1em;
142 | }
143 | }
144 |
145 | // Course styling
146 | .courses {
147 | .course-number {
148 | display: inline;
149 | }
150 |
151 | .course-name {
152 | display: inline;
153 | font-family: _font(family-heading);
154 | font-size: 0.7em;
155 | font-weight: 400;
156 | letter-spacing: 0.25em;
157 | line-height: 2.5;
158 | margin-top: -1em;
159 | text-transform: uppercase;
160 | }
161 |
162 | ul li {
163 | display: inline;
164 | }
165 | }
166 |
167 | .course-dot {
168 | display: inline;
169 | }
170 |
171 | // Responsive
172 | @include breakpoint(small) {
173 | .course-dot {
174 | display: none;
175 | }
176 |
177 | .course-container a {
178 | display: block;
179 | }
180 | }
181 |
--------------------------------------------------------------------------------
/src/data/resume/skills.ts:
--------------------------------------------------------------------------------
1 | export interface Skill {
2 | title: string;
3 | competency: number;
4 | category: string[];
5 | }
6 |
7 | export interface Category {
8 | name: string;
9 | color: string;
10 | }
11 |
12 | const skills: Skill[] = [
13 | // Languages
14 | {
15 | title: 'Python',
16 | competency: 5,
17 | category: ['Languages', 'ML Engineering'],
18 | },
19 | {
20 | title: 'TypeScript',
21 | competency: 5,
22 | category: ['Languages', 'Web Development'],
23 | },
24 | {
25 | title: 'SQL',
26 | competency: 4,
27 | category: ['Languages', 'Databases'],
28 | },
29 | // AI & LLM
30 | {
31 | title: 'AI Agents',
32 | competency: 5,
33 | category: ['ML Engineering'],
34 | },
35 | {
36 | title: 'LLM Evaluation',
37 | competency: 5,
38 | category: ['ML Engineering'],
39 | },
40 | {
41 | title: 'AI Red-teaming',
42 | competency: 5,
43 | category: ['ML Engineering'],
44 | },
45 | {
46 | title: 'LLM APIs',
47 | competency: 5,
48 | category: ['ML Engineering'],
49 | },
50 | {
51 | title: 'RAG',
52 | competency: 4,
53 | category: ['ML Engineering'],
54 | },
55 | {
56 | title: 'Prompt Engineering',
57 | competency: 4,
58 | category: ['ML Engineering'],
59 | },
60 | {
61 | title: 'Vector Databases',
62 | competency: 4,
63 | category: ['ML Engineering', 'Databases'],
64 | },
65 | {
66 | title: 'PyTorch',
67 | competency: 4,
68 | category: ['ML Engineering'],
69 | },
70 | {
71 | title: 'Pandas',
72 | competency: 5,
73 | category: ['ML Engineering', 'Data Engineering'],
74 | },
75 | // Web Development
76 | {
77 | title: 'Node.js',
78 | competency: 5,
79 | category: ['Web Development'],
80 | },
81 | {
82 | title: 'FastAPI',
83 | competency: 4,
84 | category: ['Web Development'],
85 | },
86 | {
87 | title: 'Next.js',
88 | competency: 3,
89 | category: ['Web Development'],
90 | },
91 | // Databases
92 | {
93 | title: 'PostgreSQL',
94 | competency: 4,
95 | category: ['Databases'],
96 | },
97 | {
98 | title: 'Redis',
99 | competency: 3,
100 | category: ['Databases'],
101 | },
102 | // Infrastructure
103 | {
104 | title: 'AWS',
105 | competency: 4,
106 | category: ['Infrastructure'],
107 | },
108 | {
109 | title: 'Docker',
110 | competency: 4,
111 | category: ['Infrastructure'],
112 | },
113 | {
114 | title: 'Kubernetes',
115 | competency: 3,
116 | category: ['Infrastructure'],
117 | },
118 | {
119 | title: 'Observability',
120 | competency: 4,
121 | category: ['Infrastructure', 'ML Engineering'],
122 | },
123 | ].map((skill) => ({ ...skill, category: skill.category.sort() }));
124 |
125 | // this is a list of colors that I like. The length should be === to the
126 | // number of categories. Re-arrange this list until you find a pattern you like.
127 | const colors: string[] = [
128 | '#6968b3',
129 | '#37b1f5',
130 | '#40494e',
131 | '#515dd4',
132 | '#e47272',
133 | '#cc7b94',
134 | '#3896e2',
135 | '#c3423f',
136 | '#d75858',
137 | '#747fff',
138 | '#64cb7b',
139 | ];
140 |
141 | const categories: Category[] = Array.from(
142 | new Set(skills.flatMap(({ category }) => category)),
143 | )
144 | .sort()
145 | .map((category, index) => ({
146 | name: category,
147 | color: colors[index],
148 | }));
149 |
150 | export { categories, skills };
151 |
--------------------------------------------------------------------------------
/src/static/css/base/_typography.scss:
--------------------------------------------------------------------------------
1 | ///
2 | /// Future Imperfect by HTML5 UP
3 | /// html5up.net | @ajlkn
4 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
5 | ///
6 |
7 | /* Type */
8 |
9 | body,
10 | input,
11 | select,
12 | textarea {
13 | color: _palette(fg);
14 | font-family: _font(family);
15 | font-size: 14pt;
16 | font-weight: _font(weight);
17 | line-height: 1.75;
18 |
19 | @include breakpoint(xlarge) {
20 | font-size: 12pt;
21 | }
22 |
23 | @include breakpoint(large) {
24 | font-size: 12pt;
25 | }
26 |
27 | @include breakpoint(medium) {
28 | font-size: 12pt;
29 | }
30 |
31 | @include breakpoint(small) {
32 | font-size: 12pt;
33 | }
34 |
35 | @include breakpoint(xsmall) {
36 | font-size: 12pt;
37 | }
38 | }
39 |
40 | a {
41 | @include vendor(
42 | 'transition',
43 | ('color #{_duration(transition)} ease', 'border-bottom-color #{_duration(transition)} ease')
44 | );
45 | border-bottom: dotted 1px _palette(border-alt);
46 | color: inherit;
47 | text-decoration: none;
48 |
49 | &:before {
50 | @include vendor('transition', ('color #{_duration(transition)} ease'));
51 | }
52 |
53 | &:hover {
54 | border-bottom-color: transparent;
55 | color: _palette(accent) !important;
56 |
57 | &:before {
58 | color: _palette(accent) !important;
59 | }
60 | }
61 | }
62 |
63 | strong,
64 | b {
65 | color: _palette(fg-bold);
66 | font-weight: _font(weight-bold);
67 | }
68 |
69 | em,
70 | i {
71 | font-style: italic;
72 | }
73 |
74 | p {
75 | margin: 0 0 _size(element-margin) 0;
76 | }
77 |
78 | h1,
79 | h2,
80 | h3,
81 | h4,
82 | h5,
83 | h6 {
84 | color: _palette(fg-bold);
85 | font-family: _font(family-heading);
86 | font-weight: _font(weight-heading-bold);
87 | letter-spacing: _font(kerning-heading);
88 | line-height: 1.65;
89 | margin: 0 0 (_size(element-margin) * 0.5) 0;
90 | text-transform: uppercase;
91 |
92 | a {
93 | color: inherit;
94 | border-bottom: 0;
95 | }
96 | }
97 |
98 | h2 {
99 | font-size: 1.1em;
100 | }
101 |
102 | h3 {
103 | font-size: 0.9em;
104 | }
105 |
106 | h4 {
107 | font-size: 0.7em;
108 | }
109 |
110 | h5 {
111 | font-size: 0.7em;
112 | }
113 |
114 | h6 {
115 | font-size: 0.7em;
116 | }
117 |
118 | sub {
119 | font-size: 0.8em;
120 | position: relative;
121 | top: 0.5em;
122 | }
123 |
124 | sup {
125 | font-size: 0.8em;
126 | position: relative;
127 | top: -0.5em;
128 | }
129 |
130 | blockquote {
131 | border-left: solid 4px _palette(border);
132 | font-style: italic;
133 | margin: 0 0 _size(element-margin) 0;
134 | padding: calc(_size(element-margin) / 4) 0 calc(_size(element-margin) / 4) _size(element-margin);
135 | }
136 |
137 | code {
138 | background: _palette(border-bg);
139 | border: solid 1px _palette(border);
140 | font-family: _font(family-fixed);
141 | font-size: 0.9em;
142 | margin: 0 0.25em;
143 | padding: 0.25em 0.65em;
144 | }
145 |
146 | pre {
147 | -webkit-overflow-scrolling: touch;
148 | font-family: _font(family-fixed);
149 | font-size: 0.9em;
150 | margin: 0 0 _size(element-margin) 0;
151 |
152 | code {
153 | display: block;
154 | line-height: 1.75em;
155 | padding: 1em 1.5em;
156 | overflow-x: auto;
157 | }
158 | }
159 |
160 | hr {
161 | border: 0;
162 | border-bottom: solid 1px _palette(border);
163 | margin: _size(element-margin) 0;
164 |
165 | &.major {
166 | margin: (_size(element-margin) * 1.5) 0;
167 | }
168 | }
169 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Personal Website
2 |
3 | Welcome to my [personal website](https://mldangelo.com)! This is an [MIT licensed](https://github.com/mldangelo/personal-site/blob/main/LICENSE) Next.js-based Jamstack application. It offers a simple interface, easy modifications, static export capabilities, and free automatic deployments via [GitHub Pages](https://pages.github.com/).
4 |
5 | ## 🚀 Features
6 |
7 | - Built with modern TypeScript, using [Next.js 16](https://nextjs.org/), [React 19](https://react.dev/), and SCSS.
8 | - Type-safe development with TypeScript strict mode.
9 | - Optimized performance with static export and automatic font optimization.
10 | - Automated workflows via [GitHub Actions](https://github.com/features/actions).
11 | - And more!
12 |
13 | ## 🛠 Adapting this Project
14 |
15 | Want to create your own personal website based on this project? You can set it up in as little as 30 minutes! Follow the setup instructions below and check out the **[detailed guide and checklist](./docs/adapting-guide.md)** on adapting this project to your needs. If you encounter any challenges, don't hesitate to contact me through an issue or email at [help@mldangelo.com](mailto:help@mldangelo.com).
16 |
17 | ## 🤝 Contributing
18 |
19 | Your contributions are warmly welcomed! If you wish to contribute, please review the [design goals](./docs/design-goals.md), [roadmap](./docs/roadmap.md), and [contributing guidelines](./docs/contributing.md). For any bugs or suggestions, you can reach out via email, submit a pull request (I'd be happy to get you a coffee as a thank-you!), or open an issue.
20 |
21 | ## 🔧 Dependencies
22 |
23 | Ensure you have [node](https://nodejs.org/) >= v20. Optionally, use [nvm](https://github.com/nvm-sh/nvm#installing-and-updating) to manage node versions.
24 |
25 | ## 🚀 Setup and Running
26 |
27 | 1. Clone the repository:
28 |
29 | ```bash
30 | git clone git://github.com/mldangelo/personal-site.git
31 | cd personal-site
32 | ```
33 |
34 | 2. (Optional) Ensure you're on Node v20 or higher:
35 |
36 | ```bash
37 | nvm install
38 | node --version
39 | ```
40 |
41 | 3. Install dependencies:
42 |
43 | ```bash
44 | npm install
45 | ```
46 |
47 | 4. Start the development server:
48 |
49 | ```bash
50 | npm run dev
51 | ```
52 |
53 | By default, the application will be available at [http://localhost:3000/](http://localhost:3000/).
54 |
55 | ## 🏗 Building for Production
56 |
57 | 1. Build the static export:
58 |
59 | ```bash
60 | npm run build
61 | ```
62 |
63 | The build process automatically creates a static export in the `out/` directory.
64 |
65 | 2. Preview the production build locally:
66 |
67 | ```bash
68 | npm run start
69 | ```
70 |
71 | ## 🚢 Deploying
72 |
73 | ### Deploying to GitHub Pages
74 |
75 | 1. Update the environment variables and Git remote URL in [`.github/workflows/github-pages.yml`](.github/workflows/github-pages.yml).
76 |
77 | 2. Enable GitHub Actions and Pages for your repository.
78 |
79 | 3. Push to the `main` branch to trigger automatic deployment.
80 |
81 | ```bash
82 | git add .
83 | git commit -m "Deploy to GitHub Pages"
84 | git push origin main
85 | ```
86 |
87 | ### Static Export
88 |
89 | You can export the site as static HTML to host anywhere:
90 |
91 | ```bash
92 | npm run build
93 | ```
94 |
95 | The static files will be automatically generated in the `out/` directory.
96 |
97 | ## 🔬 Testing
98 |
99 | ```bash
100 | npm run lint # Run Biome linter
101 | npm run type-check # Run TypeScript type checking
102 | npm run format # Format code with Biome and Prettier
103 | npm run format:check # Check code formatting
104 | npm test # Run Jest tests
105 | ```
106 |
107 | ## 🎨 Customization
108 |
109 | - **Personal Information**: Update files in `src/data/` with your information.
110 | - **Images**: Replace images in `public/images/` with your own.
111 | - **Theme**: Modify SCSS variables in `src/static/css/libs/_vars.scss`.
112 |
113 | ## 📝 License
114 |
115 | [MIT](https://github.com/mldangelo/personal-site/blob/main/LICENSE)
--------------------------------------------------------------------------------
/src/components/Contact/EmailLink.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import React, { useEffect, useReducer, useRef } from 'react';
4 |
5 | // Validates the first half of an email address.
6 | const validateText = (text: string): boolean => {
7 | // NOTE: Passes RFC 5322 but not tested on google's standard.
8 | // eslint-disable-next-line no-useless-escape
9 | const re = /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))$/;
10 | return re.test(text) || text.length === 0;
11 | };
12 |
13 | const messages = [
14 | 'hi',
15 | 'hello',
16 | 'hola',
17 | 'you-can-email-me-at-literally-anything! Really',
18 | 'well, not anything. But most things',
19 | 'like-this',
20 | 'or-this',
21 | 'but not this :( ',
22 | 'you.can.also.email.me.with.specific.topics.like',
23 | 'just-saying-hi',
24 | 'please-work-for-us',
25 | 'help',
26 | 'admin',
27 | 'or-I-really-like-your-website',
28 | 'thanks',
29 | ];
30 |
31 | const useInterval = (callback: () => void, delay: number | null) => {
32 | const savedCallback = useRef<() => void>(callback);
33 |
34 | useEffect(() => {
35 | savedCallback.current = callback;
36 | }, [callback]);
37 |
38 | useEffect(() => {
39 | if (delay) {
40 | const id = setInterval(() => {
41 | savedCallback.current?.();
42 | }, delay);
43 | return () => clearInterval(id);
44 | }
45 | return () => {}; // pass linter
46 | }, [delay]);
47 | };
48 |
49 | // React 19: Using useReducer for complex state management
50 | type AnimationState = {
51 | idx: number;
52 | message: string;
53 | char: number;
54 | isActive: boolean;
55 | };
56 |
57 | type AnimationAction =
58 | | { type: 'TICK'; loopMessage: boolean; hold: number }
59 | | { type: 'PAUSE' }
60 | | { type: 'RESUME'; maxIdx: number };
61 |
62 | const animationReducer = (
63 | state: AnimationState,
64 | action: AnimationAction,
65 | ): AnimationState => {
66 | switch (action.type) {
67 | case 'TICK': {
68 | let newIdx = state.idx;
69 | let newChar = state.char;
70 |
71 | if (state.char - action.hold >= messages[state.idx].length) {
72 | newIdx += 1;
73 | newChar = 0;
74 | }
75 |
76 | if (newIdx === messages.length) {
77 | if (action.loopMessage) {
78 | return {
79 | idx: 0,
80 | message: '',
81 | char: 0,
82 | isActive: true,
83 | };
84 | }
85 | return {
86 | ...state,
87 | isActive: false,
88 | };
89 | }
90 |
91 | return {
92 | idx: newIdx,
93 | message: messages[newIdx].slice(0, newChar),
94 | char: newChar + 1,
95 | isActive: true,
96 | };
97 | }
98 | case 'PAUSE':
99 | return { ...state, isActive: false };
100 | case 'RESUME':
101 | return {
102 | ...state,
103 | isActive: state.idx < action.maxIdx,
104 | };
105 | default:
106 | return state;
107 | }
108 | };
109 |
110 | interface EmailLinkProps {
111 | loopMessage?: boolean;
112 | }
113 |
114 | const EmailLink: React.FC
97 |
99 | Skills
98 |{getButtons()}
100 | {getRows()}
101 | dispatch({ type: 'PAUSE' })}
137 | onMouseLeave={() => dispatch({ type: 'RESUME', maxIdx: messages.length })}
138 | >
139 |
146 | {state.message}
147 | @mldangelo.com
148 |
149 |
150 | );
151 | };
152 |
153 | export default EmailLink;
154 |
--------------------------------------------------------------------------------
/src/static/css/components/_post.scss:
--------------------------------------------------------------------------------
1 | ///
2 | /// Future Imperfect by HTML5 UP
3 | /// html5up.net | @ajlkn
4 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
5 | ///
6 |
7 | /* Post */
8 |
9 | .post {
10 | @include padding(_size(section-spacing), _size(section-spacing));
11 | background: _palette(bg);
12 | border: solid 1px _palette(border);
13 | margin: 0 0 _size(section-spacing) 0;
14 | position: relative;
15 |
16 | > header {
17 | @include vendor('display', 'flex');
18 | border-bottom: solid 1px _palette(border);
19 | left: (_size(section-spacing) * -1);
20 | margin: (_size(section-spacing) * -1) 0 _size(section-spacing) 0;
21 | position: relative;
22 | width: calc(100% + #{_size(section-spacing) * 2});
23 |
24 | .title {
25 | @include vendor('flex-grow', '1');
26 | padding: (_size(section-spacing) * 1.25) _size(section-spacing) (_size(section-spacing) * 1.1)
27 | _size(section-spacing);
28 |
29 | h2 {
30 | font-weight: _font(weight-heading-extrabold);
31 | font-size: 1.5em;
32 | }
33 |
34 | > :last-child {
35 | margin-bottom: 0;
36 | }
37 | }
38 |
39 | .meta {
40 | @include padding(_size(section-spacing) * 1.25, _size(section-spacing));
41 | border-left: solid 1px _palette(border);
42 | min-width: 17em;
43 | text-align: right;
44 | width: 17em;
45 |
46 | > * {
47 | margin: 0 0 (_size(element-margin) * 0.5) 0;
48 | }
49 |
50 | > :last-child {
51 | margin-bottom: 0;
52 | }
53 |
54 | .published {
55 | color: _palette(fg-bold);
56 | display: block;
57 | font-family: _font(family-heading);
58 | font-size: 0.7em;
59 | font-weight: _font(weight-heading-bold);
60 | letter-spacing: _font(kerning-heading);
61 | margin-top: 0.5em;
62 | text-transform: uppercase;
63 | white-space: nowrap;
64 | }
65 | }
66 | }
67 |
68 | > footer {
69 | @include vendor('display', 'flex');
70 | @include vendor('align-items', 'center');
71 |
72 | .actions {
73 | @include vendor('flex-grow', '1');
74 | }
75 | }
76 |
77 | @include breakpoint(medium) {
78 | border-left: 0;
79 | border-right: 0;
80 | left: _size(section-spacing) * -1;
81 | width: calc(100% + (#{_size(section-spacing)} * 2));
82 |
83 | > header {
84 | @include vendor('flex-direction', 'column');
85 | @include padding(_size(section-spacing) * 1.25, _size(section-spacing), (0, 0, -0.5em, 0));
86 | border-left: 0;
87 |
88 | .title {
89 | margin: 0 0 _size(element-margin) 0;
90 | padding: 0;
91 | text-align: center;
92 | }
93 |
94 | .meta {
95 | @include vendor('align-items', 'center');
96 | @include vendor('display', 'flex');
97 | @include vendor('justify-content', 'center');
98 | border-left: 0;
99 | margin: 0 0 _size(element-margin) 0;
100 | padding-top: 0;
101 | padding: 0;
102 | text-align: left;
103 | width: 100%;
104 |
105 | > * {
106 | border-left: solid 1px _palette(border);
107 | margin-left: 2em;
108 | padding-left: 2em;
109 | }
110 |
111 | > :first-child {
112 | border-left: 0;
113 | margin-left: 0;
114 | padding-left: 0;
115 | }
116 |
117 | .published {
118 | margin-bottom: 0;
119 | margin-top: 0;
120 | }
121 | }
122 | }
123 | }
124 |
125 | @include breakpoint(small) {
126 | @include padding(_size(section-spacing-small), _size(section-spacing-small));
127 | left: _size(section-spacing-small) * -1;
128 | margin: 0 0 _size(element-margin) 0;
129 | width: calc(100% + (#{_size(section-spacing-small)} * 2));
130 |
131 | > header {
132 | @include padding(
133 | _size(section-spacing-small) * 2,
134 | _size(section-spacing-small),
135 | (0, 0, -0.5em, 0)
136 | );
137 | left: (_size(section-spacing-small) * -1);
138 | margin: (_size(section-spacing-small) * -1) 0 _size(section-spacing-small) 0;
139 | width: calc(100% + #{_size(section-spacing-small) * 2});
140 |
141 | .title {
142 | h2 {
143 | font-size: 1.1em;
144 | }
145 | }
146 | }
147 | }
148 |
149 | @include breakpoint(xsmall) {
150 | > header {
151 | .meta {
152 | @include vendor('align-items', 'center');
153 | @include vendor('flex-direction', 'column');
154 |
155 | > * {
156 | border-left: 0;
157 | margin: (_size(element-margin) * 0.5) 0 0 0;
158 | padding-left: 0;
159 | }
160 | }
161 | }
162 | }
163 | }
164 |
--------------------------------------------------------------------------------
/src/static/css/layout/_header.scss:
--------------------------------------------------------------------------------
1 | ///
2 | /// Future Imperfect by HTML5 UP
3 | /// html5up.net | @ajlkn
4 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
5 | ///
6 |
7 | /* Header */
8 |
9 | body {
10 | padding-top: 3.5em;
11 | }
12 |
13 | #header {
14 | @include vendor('display', 'flex');
15 | @include vendor('justify-content', 'space-between');
16 | background-color: _palette(bg);
17 | border-bottom: solid 1px _palette(border);
18 | height: 3.5em;
19 | left: 0;
20 | line-height: 3.5em;
21 | position: fixed;
22 | top: 0;
23 | width: 100%;
24 | z-index: _misc(z-index-base);
25 |
26 | a {
27 | color: inherit;
28 | text-decoration: none;
29 | }
30 |
31 | ul {
32 | list-style: none;
33 | margin: 0;
34 | padding-left: 0;
35 |
36 | li {
37 | display: inline-block;
38 | padding-left: 0;
39 | }
40 | }
41 |
42 | h1 {
43 | height: inherit;
44 | line-height: inherit;
45 | padding: 0 0 0 1.5em;
46 | white-space: nowrap;
47 |
48 | a {
49 | font-size: 0.7em;
50 | }
51 | }
52 |
53 | .links {
54 | @include vendor('flex', '1');
55 | border-left: solid 1px _palette(border);
56 | height: inherit;
57 | line-height: inherit;
58 | margin-left: 1.5em;
59 | overflow: hidden;
60 | padding-left: 1.5em;
61 |
62 | ul {
63 | li {
64 | border-left: solid 1px _palette(border);
65 | line-height: 1;
66 | margin-left: 1em;
67 | padding-left: 1em;
68 |
69 | &:first-child {
70 | border-left: 0;
71 | margin-left: 0;
72 | padding-left: 0;
73 | }
74 |
75 | a {
76 | border-bottom: 0;
77 | font-family: _font(family-heading);
78 | font-size: 0.7em;
79 | font-weight: _font(weight-heading);
80 | letter-spacing: _font(kerning-heading);
81 | text-transform: uppercase;
82 | }
83 | }
84 | }
85 | }
86 |
87 | .main {
88 | height: inherit;
89 | line-height: inherit;
90 | text-align: right;
91 |
92 | ul {
93 | height: inherit;
94 | line-height: inherit;
95 |
96 | li {
97 | border-left: solid 1px _palette(border);
98 | height: inherit;
99 | line-height: inherit;
100 | white-space: nowrap;
101 |
102 | > i {
103 | text-decoration: none;
104 | border-bottom: 0;
105 | overflow: hidden;
106 | position: relative;
107 | text-indent: 4em;
108 | margin-right: 1.5em;
109 | }
110 |
111 | > * {
112 | display: block;
113 | float: left;
114 | }
115 |
116 | > a {
117 | @include icon;
118 | border-bottom: 0;
119 | color: _palette(fg-light);
120 | overflow: hidden;
121 | position: relative;
122 | text-indent: 4em;
123 | width: 4em;
124 |
125 | &:before {
126 | display: block;
127 | height: inherit;
128 | left: 0;
129 | line-height: inherit;
130 | position: absolute;
131 | text-align: center;
132 | text-indent: 0;
133 | top: 0;
134 | width: inherit;
135 | }
136 | }
137 | }
138 | }
139 | }
140 |
141 | @include breakpoint(medium) {
142 | .links {
143 | display: none;
144 | }
145 | }
146 |
147 | @include breakpoint(small) {
148 | height: 2.75em;
149 | line-height: 2.75em;
150 |
151 | h1 {
152 | padding: 0 0 0 1em;
153 | }
154 |
155 | .main {
156 | .search {
157 | display: none;
158 | }
159 | }
160 | }
161 | }
162 |
163 | /* Position and sizing of burger button */
164 | .bm-burger-button {
165 | display: none;
166 | }
167 |
168 | /* Color/shape of burger icon bars */
169 | .bm-burger-bars {
170 | display: none;
171 | }
172 |
173 | /* Position and sizing of clickable cross button */
174 | .bm-cross-button {
175 | display: none;
176 | }
177 |
178 | /* Color/shape of close button cross */
179 | .bm-cross {
180 | display: none;
181 | }
182 |
183 | /* General sidebar styles */
184 | .bm-menu {
185 | background: _palette(bg);
186 | padding: 2.5em 1.5em 0;
187 | font-size: 1.15em;
188 | }
189 |
190 | /* Wrapper for item list */
191 | .bm-item-list {
192 | color: _palette(fg-bold);
193 | padding: 0.8em;
194 | font-family: 'Raleway', Helvetica, sans-serif;
195 | }
196 |
197 | #header .index-link {
198 | z-index: 3;
199 | }
200 |
201 | #header .main .menu {
202 | cursor: pointer;
203 | }
204 |
205 | #header .main .close-menu {
206 | border: 0;
207 | z-index: 10000;
208 | }
209 |
210 | #header .main .open-menu {
211 | border: 0;
212 | }
213 |
214 | .open-menu {
215 | position: fixed;
216 | right: 0;
217 | border: none;
218 | }
219 |
220 | .close-menu {
221 | position: fixed;
222 | right: 0;
223 | z-index: 3;
224 | border-left: 0;
225 | }
226 |
227 | .hamburger-container {
228 | display: none;
229 | }
230 |
231 | @include breakpoint(medium) {
232 | .hamburger-container {
233 | display: initial;
234 | }
235 | }
236 |
--------------------------------------------------------------------------------
/.github/workflows/node.js.yml:
--------------------------------------------------------------------------------
1 | name: CI
2 |
3 | on:
4 | push:
5 | branches: [main]
6 | pull_request:
7 | branches: [main]
8 | workflow_dispatch:
9 |
10 | # Cancel in-progress runs for the same workflow and branch
11 | concurrency:
12 | group: ${{ github.workflow }}-${{ github.ref }}
13 | cancel-in-progress: true
14 |
15 | jobs:
16 | # Shared job for installing dependencies with caching
17 | install:
18 | name: Install Dependencies
19 | runs-on: ubuntu-latest
20 | timeout-minutes: 5
21 | steps:
22 | - name: Checkout code
23 | uses: actions/checkout@v4
24 |
25 | - name: Setup Node.js
26 | uses: actions/setup-node@v4
27 | with:
28 | node-version-file: ".nvmrc"
29 | cache: "npm"
30 |
31 | - name: Cache node_modules
32 | id: cache-node-modules
33 | uses: actions/cache@v4
34 | with:
35 | path: node_modules
36 | key: ${{ runner.os }}-node-modules-${{ hashFiles('package-lock.json') }}
37 | restore-keys: |
38 | ${{ runner.os }}-node-modules-
39 |
40 | - name: Install dependencies
41 | if: steps.cache-node-modules.outputs.cache-hit != 'true'
42 | run: npm ci
43 |
44 | # Lint, format, and type check
45 | code-quality:
46 | name: Code Quality
47 | needs: install
48 | runs-on: ubuntu-latest
49 | timeout-minutes: 5
50 | steps:
51 | - name: Checkout code
52 | uses: actions/checkout@v4
53 |
54 | - name: Setup Node.js
55 | uses: actions/setup-node@v4
56 | with:
57 | node-version-file: ".nvmrc"
58 | cache: "npm"
59 |
60 | - name: Restore node_modules
61 | uses: actions/cache@v4
62 | with:
63 | path: node_modules
64 | key: ${{ runner.os }}-node-modules-${{ hashFiles('package-lock.json') }}
65 |
66 | - name: Type Check
67 | run: npm run type-check
68 |
69 | - name: Lint
70 | run: npm run lint
71 |
72 | - name: Format Check
73 | run: npm run format:check
74 |
75 | # Run tests
76 | test:
77 | name: Test
78 | needs: install
79 | runs-on: ubuntu-latest
80 | timeout-minutes: 10
81 | steps:
82 | - name: Checkout code
83 | uses: actions/checkout@v4
84 |
85 | - name: Setup Node.js
86 | uses: actions/setup-node@v4
87 | with:
88 | node-version-file: ".nvmrc"
89 | cache: "npm"
90 |
91 | - name: Restore node_modules
92 | uses: actions/cache@v4
93 | with:
94 | path: node_modules
95 | key: ${{ runner.os }}-node-modules-${{ hashFiles('package-lock.json') }}
96 |
97 | - name: Run tests
98 | run: npm test -- --ci --coverage
99 |
100 | - name: Upload coverage reports
101 | if: always()
102 | uses: actions/upload-artifact@v4
103 | with:
104 | name: coverage
105 | path: coverage/
106 | retention-days: 7
107 |
108 | # Build on multiple OS and Node versions
109 | build:
110 | name: Build (${{ matrix.os }}, Node ${{ matrix.node-version }})
111 | needs: install
112 | runs-on: ${{ matrix.os }}
113 | timeout-minutes: 10
114 | strategy:
115 | fail-fast: false
116 | matrix:
117 | node-version: [20.x, 22.x]
118 | os: [ubuntu-latest, windows-latest, macos-latest]
119 | exclude:
120 | # Reduce matrix size for faster CI
121 | - os: windows-latest
122 | node-version: 20.x
123 | - os: macos-latest
124 | node-version: 20.x
125 | steps:
126 | - name: Checkout code
127 | uses: actions/checkout@v4
128 |
129 | - name: Setup Node.js ${{ matrix.node-version }}
130 | uses: actions/setup-node@v4
131 | with:
132 | node-version: ${{ matrix.node-version }}
133 | cache: "npm"
134 |
135 | - name: Install dependencies
136 | run: npm ci
137 |
138 | - name: Build
139 | run: npm run build
140 | env:
141 | NODE_ENV: production
142 | NEXT_PUBLIC_GA_TRACKING_ID: ${{ vars.NEXT_PUBLIC_GA_TRACKING_ID || 'UA-XXXXXXXXX-X' }}
143 |
144 | - name: Verify static export
145 | shell: bash
146 | run: |
147 | if [ ! -d "out" ]; then
148 | echo "Error: 'out' directory not found. Static export may have failed."
149 | exit 1
150 | fi
151 | echo "Static export successful. Found $(find out -type f | wc -l) files."
152 |
153 | - name: Upload build artifacts
154 | if: matrix.os == 'ubuntu-latest' && matrix.node-version == '22.x'
155 | uses: actions/upload-artifact@v4
156 | with:
157 | name: build-output
158 | path: out/
159 | retention-days: 7
160 |
161 | # Summary job to ensure all checks pass
162 | ci-success:
163 | name: CI Success
164 | needs: [code-quality, test, build]
165 | runs-on: ubuntu-latest
166 | if: always()
167 | steps:
168 | - name: Check if all jobs succeeded
169 | run: |
170 | if [[ "${{ needs.code-quality.result }}" != "success" ||
171 | "${{ needs.test.result }}" != "success" ||
172 | "${{ needs.build.result }}" != "success" ]]; then
173 | echo "One or more jobs failed"
174 | exit 1
175 | fi
176 | echo "All CI checks passed!"
--------------------------------------------------------------------------------
/docs/adapting-guide.md:
--------------------------------------------------------------------------------
1 | # Adapting this Website
2 |
3 | Many people have contacted me about adapting this website. I have tried to make things as simple as possible. There are still bugs. I am sorry. If you find a bug, please email me (help@mldangelo.com), submit a pull request (I'll buy you a coffee as a thank you), or submit an issue.
4 |
5 | You may wish to fork this repository or remove my remote origin and add your own. Go [here](https://help.github.com/articles/changing-a-remote-s-url/) for more information on how to change remotes.
6 |
7 | ## Before you start
8 |
9 | 1. Make sure you have a good text editor. I recommend [Visual Studio Code](https://code.visualstudio.com/).
10 | 2. Review the project structure. This is a Next.js app using the App Router. Pages are defined in the `app/` directory. If you wish to add or remove a page, you should do so there.
11 |
12 | ## Checklist
13 |
14 | ### Setup
15 |
16 | 1. Run the project before making any modifications by following the set up and running instructions in the main [README.md](https://github.com/mldangelo/personal-site#set-up).
17 | 2. Change `homepage` in `package.json` to reflect where you plan to host the site. This is important for static exporting. This also changes your path when developing locally. For example, a homepage of `mldangelo.com` places the site at `localhost:3000` and a homepage of `https://mldangelo.github.io/personal-site/` places the site at `localhost:3000/personal-site/`. If you plan to host at on a path such as `https://[your-github-username].github.io/[your-repo-name]`, you should set this now so that your development environment mirrors your production environment.
18 | 3. Create a `.env.local` file. To do this, run:
19 |
20 | ```bash
21 | cp .env.example .env.local
22 | ```
23 |
24 | and set values as appropriate. Most people will only need to update the Google Analytics tracking ID.
25 |
26 | ### Adapt Content
27 |
28 | I recommend keeping the project running as you go (with `npm run dev`) to help correct mistakes quickly.
29 |
30 | 1. Start by changing text in the sidebar. This file is located at `src/components/Template/SideBar.tsx`.
31 | 2. Add an image of yourself in `public/images/me.jpg`. Your image should be approximately 256 x 256 pixels. Larger and smaller is ok, but avoid very large images to save bandwidth. If you need help resizing your image, Adobe makes a great online tool [here](https://www.adobe.com/photoshop/online/resize-image.html).
32 | 3. Modify the text on the homepage. This file is located at `app/page.tsx`.
33 | 4. Modify the files in `src/data/resume/` next.
34 | 5. Modify all of the other files in the `src/data/` directory.
35 | 6. You've finished modifying >95% of the pages. Search through the rest of the files for references to `Michael` or `Angelo` and change values to your name.
36 | 7. Change or remove the favicon in `public/favicon.ico` and images in `public/images/favicon/`. [This](https://realfavicongenerator.net/) website may be helpful.
37 |
38 | ### Deploy
39 |
40 | See deployment instructions [here](https://github.com/mldangelo/personal-site#deploying-to-github-pages). If you plan to use a custom url, modify `public/CNAME` and enter your URL. You can run:
41 |
42 | ```bash
43 | echo "[your-custom-domain][.com]" > public/CNAME
44 | ```
45 |
46 | as a shortcut.
47 |
48 | I recommend purchasing your own domain name from [Google Domains](https://domains.google). The project is pre-configured to automatically deploy to github pages via the deploy github action. Go to `https://github.com/[your-github-username]/[your-repo-name]/settings` and configure accordingly:
49 |
50 | 